1-2教学单元设计(网站界面设计)ppt课件(全)

2021/10/10星期日11-2科创资讯网站首页设计——网站界面设计

2021/10/10星期日2地点：网影科技有限公司网站开发部时间：上午8：20主持：网站开发部项目总监参加人员：网页设计部各项目组组长及设计师会议议题：科创资讯网站建设项目中项目需求分析创建情境网页设计部每周例会2021/10/10星期日3工作任务流程：概要设计，提交网站建设方案提交设计草图需求分析修改并完成网页界面（网页初始原型）的设计制作把页面切片输出成网页2021/10/10星期日41.讨论分析与解决问题——问题布局如何根据草图进行页面的布局，把草图设计转化为页面设计，并进行各栏目的对齐分布图像管理如何制作带有圆角，并且具有色彩和图像合成的banner图像如何制作带有圆角且带有图案的网页图标如何对齐各栏目的标题，对多个图片进行对齐和分布如何有效管理多个图层2021/10/10星期日5布局如何根据草图进行页面的布局，把草图设计转化为页面设计，并进行各栏目的对齐分布参考线的应用解决方法操作步骤：1.通过【视图】│【标尺】命令打开标尺显示2.在标尺上单击鼠标右键修改该标尺单位为像素，保证和页面长宽的单位（通常为像素）3.使用移动工具从标尺上方拖出参考线，放置在草图中各栏目的分界处（要结合各栏目的大小计算出每个参考线所在的位置，遵循从上至下，从左到右的顺序设置参考线）1.讨论分析与解决问题——问题2021/10/10星期日6草图到页面的转化2021/10/10星期日7参考线的锁定：执行【视图】│【锁定参考线】命令参考线对齐功能：执行【视图】│【对齐到参考线】命令参考线的应用技巧1.讨论分析与解决问题——问题2021/10/10星期日8图像如何制作带有圆角，并且具有色彩和图像合成的banner图像蒙版的应用解决方法确保需要合成的图像的图层关系（上下关系）对处在上方的图层添加图层蒙版在蒙版区域中使用渐变色或是使用软性画笔绘画（蒙版中黑灰白和图像的对应关系）1.讨论分析与解决问题——问题2021/10/10星期日9蒙版的应用蒙版中黑灰白和图像的对应关系2021/10/10星期日10蒙版的应用技巧使用软性画笔绘制蒙板区域使用渐变色绘制蒙板区域2021/10/10星期日11图像1.如何制作带有圆角德banner图像2.如何制作带有圆角且带有图案的网页图标剪辑组的使用解决方法操作步骤：1.确保修剪的图像和用来修剪的造型分别处于两个独立的图层，并且是紧密的上下层的关系2.在两层交接处按下ALT键，出现创建剪辑组的图标时单击鼠标左键，确立剪辑组的创建3.同样的操作可以取消剪辑组，恢复图层的独立关系1.讨论分析与解决问题——问题2021/10/10星期日12需修剪图像和用来修剪的造型图层的上下关系和修剪对应关系2021/10/10星期日13管理图像文字按钮/图标如何对文字、对齐各栏目的标题，和对多个图片进行对齐和分布使用自有属性对齐链接图层对齐分布使用参考线对齐链接图层对齐分布移动复制对齐链接图层对齐分布解决方法解决方法类型类型2021/10/10星期日14管理2.如何有效管理多个图层图层编组解决方法操作步骤：1.把同一栏目的各个图层归类放置在同一个图层组文件夹中2.给图层组文件夹进行命名：原则是使用栏目名称2021/10/10星期日152.完成网页的切片输出1.网页切片的作用1）减少网页下载时间而又不影