《图形图像处理技术》 课件 任务8.3 制作“图书销售”网站首页

项目8网页设计任务8.3制作“图书销售”网站首页图形图像处理技术主要内容01任务解析02制作网页重点难点12341.了解网页的设计。2.掌握制作导航栏、分割线及登录区的方法。3.培养学生综合运用创意、美学知识设计创新的能力。.4.培养学生健康乐观的心理素质，使学生懂得奉献、分享与感恩。知识目标素质目标教学目标技能目标能力目标任务情境【任务场景】在Photoshop中制作网页，主要制作网页的框架。网页中的元素有很多，包括导航条，网页底部的页脚设计，网页主题内容的确定，特效文字的制作，动作按钮的设计等等。【任务布置】分析要制作的网站在同类网站中的特色和市场定位，确定网站风格；制定设计方案并收集整理素材；制作网页要素包括背景主题、网页标题、导航栏及分割线、登录区、网页内容和附加信息。8.3.1任务解析网上在线交易是通过网络去查询和购买所需商品，使人们有更多的选择。如今快节奏的生活状态，使人们减少了去实体店购买商品的时间，新手父母们忙于家务、工作和育儿，繁忙的事务导致他们更喜欢网上购物和交流。知识准备1．分析网站的市场定位8.3.1任务解析网站主题越集中，网站提供信息的质量也会越高；网站内容丰富更受用户欢迎，在推荐网站时位置也会越靠前。网站风格与主题相适应，更有利于网站的推广。趣味性是培养儿童学习知识的原动力。根据儿童的生理和心理特点，可以通过有趣的内容调动儿童的积极性，在潜移默化中培养儿童学习知识的兴趣。知识准备2．确定网站风格8.3.1任务解析综合以上的网站风格及市场定位，制定网站的设计方案：为了适应儿童的心理特点，以卡通图案和艳丽的色彩为主题；确定网站名称为“宝贝书房”；在网站标识中含有图书和儿童的元素；设计版面为“国”字型结构布局；对所收集的素材进行裁剪并调整色彩，保证布局的和谐统一。知识准备3．制定设计方案8.3.1任务解析在收集整理素材时应根据已经确定的网站风格进行适当的调整，使图像素材的色彩、色调与主题相符，使音乐、视频素材与网站风格一致。知识准备4．收集整理素材8.3.2制作网页根据任务目的，制作图书销售网站首页，如图8-12所示。知识准备图8-12图书销售网站首页效果图8.3.2制作网页（1）打开Photoshop，按快捷键Ctrl+N或执行“文件”→“新建”命令，在打开的“新建文档”对话框中设置文档：名称为图书销售网站背景，宽度为1000像素，高度为600像素，分辨率为72像素，颜色模式为RGB，背景为白色，如图8-13所示。单击“创建”按钮，完成画布的创建，效果如图8-14所示。知识准备1．背景主题图8-13“新建文档”对话框图8-14图书销售网站背景效果图8.3.2制作网页（2）选择素材文件“8-1.psd”，建立新的图层。执行“文件”→“置入嵌入的对象”命令，在打开的对话框中选择素材文件。调整图像与画布大小一致。设置图层：不透明度为30%，填充为50%。使用同样的方法，选择素材文件“8-2.psd”建立新的图层，调整图层的位置与大小，设置不透明度为80%，填充为70%。知识准备8.3.2制作网页（3）执行“文件”→“打开”命令，打开素材文件“8-3.psd”，使用“椭圆选框工具”制作椭圆选区，使用“移动工具”将选区移动到文件“图书销售网站背景”中，调整选区的大小和位置，建立新图层；使用同样的方法，选择素材文件“8-4.psd”建立新图层。设置图层：不透明度为100%，填充为80%。效果如图8-15所示。知识准备图8-15背景主题效果图8.3.2制作网页（1）设置网页标题：选择“横排文字工具”，在网页顶端输入文字“宝贝书房”。设置文字：华文琥珀、60点、抗锯齿为无、黑色。设置变形文字：扇形、弯曲49%、水平扭曲为13%、垂直扭曲为-59%。知识准备2．网页标题8.3.2制作网页（2）设置标题色彩：单击图层功能区右下角的“新建图层”按钮，建立新图层“图层3”。选择“图层3”后，选择“画笔工具”，设置笔尖大小为60。在属性栏中打开“画笔设置”对话框，在左侧的画笔笔尖形状区域勾选“散布”复选框，设置散布值为1000%，数量为2，如图8-16所示。知识准备2．网页标题图8-16“散布”参数8.3.2制作网页（2）设置标题色彩：勾选“颜色动态”复选框，并勾选“应用每个笔尖”复选框；设置色相抖动值为100%，饱和度抖动值和亮度值抖动均为10%，如图8-17所示。选择两种颜色，作为前景色和背景色，颜色可以任选，但一定要新鲜艳丽。设置完成后，在“图层3”中单击鼠标添加色彩，色彩添加越密集，色彩种类越多，后面的效果越明显。知识准备2．网页标题图8-17“颜色动态”参数8.3.2制作网页（3）色彩添加完成后，在按住Alt键的同时，单击图层名称区域中“图层3”与“宝贝书房”两个图层的中间位置，得到彩色的文字效果，如图8-18所示。知识准备2．网页标题图8-18网页标题效果图8.3.2制作网页知识准备（1）制作导航栏：选择“矩形工具”，在网页适当位置绘制矩形，属性设置如图8-19所示。3．导航栏、分割线图8-19“导航栏”属性设置8.3.2制作网页知识准备（2）绘制分割线：设置图层的前景色为灰色。选择“单列选框工具”，将导航栏分割为宽度相等的5份。单击鼠标右键，在弹出的快捷菜单中执行“填充”命令，在弹出的对话框中设置“内容”为“前景色”。完成颜色设置后，再一次单击鼠标右键，在弹出的快捷菜单中执行“取消选区”命令。灰色分割线制作完成。3．导航栏、分割线8.3.2制作网页知识准备（3）选择“横排文字工具”，在导航栏内输入文字“网站导航、联系客服、商品分类、合作伙伴、放入书架”。设置文字：黑体、18点、抗锯齿为锐利、黑色，效果如图8-20所示。3．导航栏、分割线图8-20导航条与分割线效果图8.3.2制作网页知识准备（1）绘制登录区背景：选择“圆角矩形工具”，在页面的适当位置绘制大小适中的圆角矩形。属性设置如图8-21所示。4．登录区图8-21登录区背景属性设置8.3.2制作网页知识准备（2）制作有登录区按钮：选择“圆角矩形工具”，在登录区背景处绘制图层，属性设置如图8-22所示。复制图层，并选择“横排文字工具”，分别输入文字“用户名、密码、验证码、15JT”。设置文字：华文楷体、16点、抗锯齿为锐利、黑色。再次选择“圆角矩形工具”，绘制图层，属性设置如图8-23所示。复制图层完成登录区制作，效果如图8-24所示。4．登录区8.3.2制作网页知识准备4．登录区图8-22登录区按钮属性设置（1）图8-23登录区按钮属性设置（2）图8-24登录区效果图8.3.2制作网页知识准备（1）导航区：选择“横排文字工具”，在页面左侧区域建立图层，输入文字“图书分类”。设置文字：黑体、18点、抗锯齿为锐利、黑色。再次选择“横排文字工具”，输入图书类别，并在页面右侧输入榜单名称。设置文字：华文楷体、16点、抗锯齿为锐利、黑色。5．内容8.3.2制作网页知识准备（2）搜索框：使用“矩形工具”在适当位置分别绘制两个矩形，属性设置如图8-25和图8-26所示。选择“横排文字工具”输入文字“搜索”，设置文字：黑体、22点、抗锯齿为锐利、灰色。（3）在页面适当位置使用“椭圆工具”绘制两个椭圆形状，属性如图8-27所示。分别输入文字“购物车0”和“我的订单”。设置文字：黑体、18点、抗锯齿为锐利、黑色。5．内容8.3.2制作网页知识准备5．内容图8-25搜索框属性设置（1）图8-26搜索框属性设置（2）图8-27椭圆形状属性设置8.3.2制作网页知识准备（4）执行“文件”→“置入嵌入对象”命令，在页面中央位置插入素材文件“8-5.psd