教学单元设计（网站界面设计）教学课件.ppt

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