1、第8章 网页设计,本章简介：一个优秀的网站必定有着独具特色的网页设计，漂亮的网页页面能够吸引浏览者的注意力。设计网页时要根据网络的特殊性对页面进行精心的设计和编排。本章以制作多个类型的网页为例，介绍网页的设计方法和制作技巧。,课堂学习目标,掌握网页的设计思路和表现手法 掌握网页的制作方法和技巧,8.1 制作科技网页,案例分析 设计理念 操作步骤 相关工具,8.1.1 案例分析,本例是为科技公司设计制作的网页，网页的主要服务受众是对现代科技进步感兴趣的网友。网页在设计风格上要体现出现代感和科技感，通过科技元素和图形化的语言表现出科技的独特魅力。,8.1.2 设计理念,在设计制作过程中，通过放置在
2、页面上方的深蓝色块的导航条，方便爱好者的浏览，通过格状底图展示出设计的科技感，通过地球图形和图片展示出网页的全球化和信息化，通过科技图片和文字展示最新的科技动态，从而使访问者更加快捷方便地浏览。整体页面大方直观，简洁明了。,科技网页图,8.1.3 操作步骤,1 2,3 4,8.1.4 相关工具,1图像尺寸的调整 打开一幅图像，选择“图像 图像大小”命令，弹出“图像大小”对话框，如图所示。,“图像大小”对话框,2画布尺寸的调整 图像画布尺寸的大小是指当前图像周围的工作空间的大小。选择“图像 画布大小”命令，弹出“画布大小”对话框，如图所示。,“画面大小”对话框,8.1.5 实战演练-制作国粹艺术
3、网页,使用自定形状工具制作背景装饰图形，使用图层样式命令制作图片的装饰效果，使用钢笔工具和横排文字工具制作介绍性文字，使用横排文字工具和图层样式命令制作导航文字。,国粹艺术网页图,8.2 制作电子产品网页,案例分析 设计理念 操作步骤 相关工具,8.2.1 案例分析,本例是为电子厂商设计制作的产品宣传网页，网页主要服务的受众是喜欢使用电子产品的消费者。网页在设计风格上要突出重点、简洁直观、易于浏览。,8.2.2 设计理念,在设计制作过程中，使用内敛的灰色和亮眼的橘红色形成鲜明的对比，烘托出网页的现代和时尚感，使用块状划分将菜单和产品图片分离，简洁直观、便于操作，使用不同的文字块构成不同的网页区
4、域，使读者易于浏览。整体设计科技感和专业性较强。,电子产品网页图,8.2.3 操作步骤,3,1 2,8.2.4 相关工具,1路径控制面板 绘制一条路径，再选择“窗口 路径”命令，调出“路径”控制面板，如图所示。单击“路径”控制面板右上方的图标，弹出下拉菜单。,“路径”对话框,路径下拉菜单,2新建路径使用控制面板的弹出式菜单：单击“路径”控制面板右上方的图标，弹出其下拉菜单，在其中选择“新建路径”命令，弹出“新建路径”对话框。,“新建路径”对话框,3复制路径 使用菜单命令：单击“路径”控制面板右上方的图标，弹出其下拉菜单，选择“复制路径”命令，弹出“复制路径”对话框，如图所示。在“名称”文本框中
5、输入复制路径的名称，单击“确定”按钮，“路径”控制面板。,“复制路径”对话框,4删除路径 使用菜单命令：单击“路径”控制面板右上方的图标，弹出其下拉菜单，选择“删除路径”命令，将路径删除。使用面板按钮：在“路径”控制面板中选择需要删除的路径，单击面板下方的“删除当前路径”按钮，将选择的路径删除。,5重命名路径 双击“路径”控制面板中的路径名，出现重命名路径文本框，如图8-103所示，更改名称后按Enter键确认即可，如图所示。,重命名路径示意图,6路径选择工具 选择“路径选择”工具或反复按Shift+A组合键，其属性栏如图所示。,“路径选择”工具属性栏,7直接选择工具 直接选择工具用于移动路径
6、中的锚点或线段，还可以调整手柄和控制点。,8矢量蒙版 选择“自定形状”工具，在属性栏中选中“路径”按钮，在形状选择面板中选中“红桃”图形，如图所示。,“矢量蒙版”属性栏,8.2.5 实战演练-制作流行音乐网页,使用渐变工具、矩形工具和圆角矩形工具绘制底图，使用圆角矩形工具、渐变工具和内阴影命令制作宣传板底图，使用自定形状工具和图层面板绘制装饰花图形，使用文字工具输入宣传文字。,流行音乐网页图,8.3 制作宠物医院网页,案例分析 设计理念 操作步骤 相关工具,8.3.1 案例分析,本例是为星级宠物医院设计制作的网站首页，星级宠物医院主要服务的对象是被主人饲养的用于玩赏的动物。在网页的设计上希望能
7、表现出公司的服务范围，展现出轻松活泼、爱护动物、保护动物的医院理念。,8.3.2 设计理念,在设计制作过程中，通过绿色背景寓意动物、自然与人的和谐关系，通过添加图案花纹增加网页页面的活泼感。导航栏通过使用不同的宠物图片和绕排文字来介绍医院的服务对象和服务范围，从而使页面直观准确而又灵活多变。标牌设计表现出医院温馨庄重的工作态度。整体设计轻松明快，布局合理清晰。,宠物医院网页图,8.3.3 操作步骤,3 4,1 2,8.3.4 相关工具,1 图层组 单击“图层”控制面板右上方的图标，在弹出的下拉菜单中选择“新建组”命令，弹出“新建组”对话框，单击“确定”按钮，即可新建一个图层组。选中要放置到组中
8、的多个图层，将其向图层组中拖曳，则选中的图层被放置在图层组中。,2 恢复到上一步操作在编辑图像的过程中可以随时将操作返回到上一步，也可以还原图像到恢复前的效果。选择“编辑 还原”命令或按Ctrl+Z组合键，可以恢复到图像的上一步操作。如果想还原图像到恢复前的效果，再按Ctrl+Z组合键即可。,3 中断操作当Photoshop CS3正在进行图像处理时，如果想中断这次的操作，可以按Esc键。,4恢复到操作过程的任意步骤 “历史记录”控制面板可以将进行过多次处理操作的图像恢复到任意一步操作时的状态，即所谓的“多次恢复功能”。选择“窗口 历史记录”命令，弹出“历史记录”控制面板，如图所示。,“历史记
9、录”控制面板,源图像,设置历史记录画笔的源,当前历史 记录步骤,操作过程的历史记录,5动作控制面板“动作”控制面板用于对一批需要进行相同处理的图像执行批处理操作，以减少重复操作带来的麻烦。选择“窗口 动作”命令，或按Alt+F9组合键，弹出如图所示的“动作”控制面板。,“动作”控制面板,源图像,设置历史记录画笔的源,当前历史 记录步骤,操作过程的历史记录,6创建动作在“动作”控制面板的弹出式菜单中选择“新建动作”命令，弹出“新建动作”对话框，如图所示。,“新建动作”对话框,8.3.5 实战演练-制作婚纱摄影网页,使用文字工具和直线工具添加导航条，使用移动工具、添加蒙版命令和渐变工具制作图片合成
10、效果，使用矩形工具和创建剪贴蒙版命令制作图片连续变化的效果，使用文字工具添加联系方式。,婚纱摄影网页,使用椭圆选框工具、通道面板和彩色半调滤镜命令制作背景装饰图形，使用图层的混合模式制作图形与底图的合成效果，使用钢笔工具绘制色块，并通过剪贴蒙版置入人物图片，使用圆角矩形工具和图层样式命令制作按钮。使用文字工具添加内容文字。,体育运动网页图,8.4 综合演练-制作体育运动网页,使用添加图层蒙版和渐变工具制作图片与底图的合成效果，使用画笔工具绘制底部的装饰图形，使用自定形状工具、直接选择工具和复制命令制作标志图形，使用钢笔工具和画笔描边路径命令绘制折线。,美容网页图,8.5 综合演练-制作美容网页,
