网页美工设计模块五--网站整体设计教学课件

模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页网页美工设计网页美工设计模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页教学目标教学目标 能记住各种工具的使用。能理解如何整合素材。能记住图层蒙板的的应用。教学重、难点教学重、难点变形命令、移动工具、文字工具的使用设计风格的确立与色调的选择 模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页新课导入新课导入餐饮类网站的设计应符合顾客的审美观点，为顾客营造一种宾至如归的感餐饮类网站的设计应符合顾客的审美观点，为顾客营造一种宾至如归的感觉。其中网页的主题风格应与网站经营的产品想匹配。例如，经营西式餐点的觉。其中网页的主题风格应与网站经营的产品想匹配。例如，经营西式餐点的网页，可以采用欧洲古典风格的花纹和色调，而经营中式餐饮的网页，则可以网页，可以采用欧洲古典风格的花纹和色调，而经营中式餐饮的网页，则可以通过一些象征中国风格的图形元素突出网页的主题。通过一些象征中国风格的图形元素突出网页的主题。本实例采用金黄色为主色调，辅以褐色、橘黄色等颜色，以突出中餐馆的本实例采用金黄色为主色调，辅以褐色、橘黄色等颜色，以突出中餐馆的特点，除了使用金黄色等中国文化特色的色调外，在设计首页时还采用了回纹特点，除了使用金黄色等中国文化特色的色调外，在设计首页时还采用了回纹花纹、古典建筑风格的窗格、画卷卷轴等与中国文化相关的图形图像元素，以花纹、古典建筑风格的窗格、画卷卷轴等与中国文化相关的图形图像元素，以及大量的中餐菜肴的照片，以突出中国的特征及大量的中餐菜肴的照片，以突出中国的特征模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页目标展示目标展示图6-1-1网站首页展示模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页任务分解任务分解一、一、Logo设计设计 1.在Photoshop CS6中执行【文件】|【新建】命令，打开【新建】对话框，设置网页文档的【宽度】、【高度】、【分辨率】等属性，建立空白网页文档，如图6-1-2所示。2.在文档中新建“背景”图层文件夹，导入素材文件/模块六/任务一/“backgroundColor.psd“，将其命名为“背景1”，拖入到“背景”图层文件夹中，删除“图层1”，如图6-1-3所示。图6-1-2空白网页文档 图6-1-3 素材背景效果模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 3.用同样的方式，导入素材文件/模块六/任务一/“paperGrain.psd素材图像，将其命名为“背景2”，拖入“背景”文件夹中，放置在“背景1”图层上方，作为纸张纹理，如图6-1-4所示。4.再导入素材文件/模块六/任务一/“topGrain.psd”文档中的回纹纹理，将其拖动到网页文档的顶部，即可完成背景图像的制作，如图6-1-5所示。图6-1-4 纸张纹理效果 图6-1-5 回纹纹理效果5.新建“标志”图层文件夹，导入素材文件/模块六/任务一/LogoBG.psd的素材文档，设置其中素材图像位置，选择“直排文字工具”，在“字符”面板中设置文字工具的属性，然后在Logo背景中输入文字“，如图6-1-6所示。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 6.选中该图层，右击图层名称，执行“混合选项”命令，单击“投影”列表项目，在右侧设置“投影”样式的各种属性，然后选择“外发光”效果，设置如图6-1-7所示。图6-1-6文本属性参数 图6-1-7文本图层样式参数 7选中“横排文字工具”，在“字符”面板中设置文字工具的属性，然后输入网站的名称如图6-1-8所示。8.将光标置于“亦”字之后，换行并选中“江南”二字，设置其文本的属性，如图6-1-9所示。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 图6-1-8网站名称样式参数 图6-1-9文本样式参数9.选中“亦江南”图层，右击执行“混合模式”命令，添加并设置“投影”样式。然后，选择“外发光”和“内发光”等列表选项，如图6-1-11所示。10.再选择“描边”的列表项目，为“亦江南”文本添加2px的黑色外部描边，即可完成该图层的样式设置，如图6-1-13所示。11.选择“横排文字工具”，输入“八十年老店”文本，字体颜色为黄褐色（#735e2d）,然后设置文本样式。12.在“工具选项”栏中单击“变形文字”按钮，在弹出的“变形文字”对话框中设置“样式”为“扇形”，然后设置“弯曲”为“+20%”，然后单击确定按钮，如图6-1-14所示。13.用同样的方式，添加“中餐服务连锁”文本到Logo底部，颜色同上为“黄褐色”，然后设置文本变形，完成Logo，如图6-1-15所示。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 图6-1-11“渐变叠加”样式参数 图6-1-13文本样式参数图6-1-14文本变形参数 图6-1-15文本变形参数模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 二、制作导航与二、制作导航与Banner1、在网页文档中新建“导航条”图层文件夹。然后打开“navigatorBG.psd”素材文档，将文档中的墨迹图像导入到网页文档中。2右击导入图层名称，执行“混合选项”命令，打开“图层样式”对话框。在左侧选择“投影”列表项目，然后设置投影属性，如图6-1-17所示。3、选择“横排文字工具”，在“字符”面板中设置文本的样式，然后输入导航条的文本，即可完成导航条的制作，如图6-1-18所示。图6-1-17设置投影属性 图6-1-18设置文本样式模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 4、在网页文档中新建“背景图”图层文件夹，然后导入“flower.psd”和“flower2.psd”两个素材图像，移动其在网页文档中的位置，如图6-1-19所示。5、导入“delicacies1.psd”素材文档，在“图层”面板中单击“添加图层蒙版”按钮，为图层添加蒙板，如图6-1-20所示。6、选择工具栏中的“画笔工具”，在图层蒙版上绘制黑色和灰色的图像，以覆盖图层中的内容。7、打开“delicacies1.psd”素材文件，将其中的菜肴和筷子等素材图像导入到网页文档中。图6-1-19导入素材图像 图6-1-20绘制选区模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 8、用同样的方式导入“smoke.psd”素材文档中的烟雾图像，并通过图层蒙板对其进行遮罩处理，如图6-1-23所示。9、导入“butterfly.psd”素材文档，将其中的蝴蝶图像导入到网页文档中,如图6-1-24所示。10、在网页文档中新建“企业语”图层文件夹，然后选择“横排文字工具”，在“字符”面板中设置文本样式，然后输入企业宣传口号，如图6-1-25所示。11、选中企业宣传口号所在的图层，在“图层”面板中右击图层名称，执行“混合选项”命令，然后在弹出的“图层样式”对话框中选择“外发光”列表项目，设置外发光的属性，完成Banner制作，如图6-1-26所示。图6-1-25输入企业宣传号 图6-1-26添加图层样式图6-1-23制作烟雾图像 图6-1-24导入蝴蝶素材文档模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 三、制作内容和版尾三、制作内容和版尾1、在网页文档中新建“画布”图层文件夹，然后打开“scroll.psd”素材文档，将其中的两个图层导入到网页文档中，并移动其位置。2、在“画布”图层文件夹中新建“江南介绍”图层文件夹，然后选择“横排文字工具”，在“字符”面板中设置字体样式，输入标题文本。3、在选中“横排文字工具”，并设置字体样式，输入内容文本，如图6-1-29所示。4、新建“名菜品鉴”图层文件夹，用同样的方式制作栏目的标题文本，如图6-1-30所示。图6-1-29输入内容文本 图6-1-30制作栏目标题模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 5、导入“蟹粉狮子头.jpg”素材图像，为其添加剪贴蒙板，在蒙板中绘制一个圆形图像。6、选择“横排文字工具”，在字符面板中设置字体的样式，输入标题，如图6-1-32所示。7、再次选择“横排文字工具”，在“字符”面板中设置字体的样式，输入菜肴介绍的文本，如图6-1-33所示。8、打开“more.psd”素材文件，将其中的“了解更多”按钮图像导入到网页文档中，并移动至菜肴介绍下方。图6-1-32输入小标题文本 图 6-1-33输入菜肴介绍9、用同样的方法，制作“响油鳝湖”菜肴的介绍内容，再次导入按钮。10、在“画布”图层文件夹中建立“联系方式”图层文件夹，导入“titleBar.psd”素材文件中的图层，并输入文本，设置文本的样式。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 11、选择“横排文字工具”，在字符面板中设置字体样式，输入联系电话如图6-1-37所示。12、再次导入“titleBar.psd“素材中的图层，输入”点此开始网上订餐“，然后选择“钢笔工具”，绘制一个箭头，设置其颜色为黄褐色（#6F4301。13、在网页文档中建立“版权声明”图层文件夹，选择“横排文字工具”，在字符面板中设置字体的样式，输入版权信息的内容，如图6-1-39所示。14、选中版权信息中的英文部分，在字符面板中设置“字体”为Calibri，完成版权信息部分的制作。图6-1-37输入联系电话 图6-1-39输入版权信息文本模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页作业布置作业布置1、瀚方手机网站首页设计与制作、瀚方手机网站首页设计与制作请根据提供的素材，参考现有的设计，自行完成瀚方手机网站首页布局与版面设计（布局结构不限），参考效果图如图。设计目的与要求：（1）树立良好的企业形象，并适当提供相关业务服务。（2）形式上层次要清晰、布局简洁、结构性强、色彩明快。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页网页美工设计网页美工设计模块五模块五 网站整体设计网站整体设计任务二任务二 设计网站次级页设计网站次级页模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页教学目标教学目标 能再现变形命令、文字、画笔、移动等工具的使用。能完成素材的整合。能完成网页效果图的制作。教学重、难点教学重、难点变形命令、移动工具、文字工具的使用设计风格的确立与色调的选择 模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页新课导入新课导入企业理念网页和网上订餐页是由文本内容和表单内容组成的网站子企业理念网页和网上订餐页是由文本内容和表单内容组成的网站子页。在设计这些子页时，可以使用首页中已使用过的一些网页图像元素，页。在设计这些子页时，可以使用首页中已使用过的一些网页图像元素，以及各种通用的版块内容，包括以及各种通用的版块内容，包括LOGO、导航条和版尾等。除此之外，、导航条和版尾等。除此之外，还需要为子页设计统一的子页导航条和投票等栏目，以使网页内容更加还需要为子页设计统一的子页导航条和投票等栏目，以使网页内容更加丰富。丰富。子页导航是网站的二级菜单导航列表，其作用是为用户提供网站具子页导航是网站的二级菜单导航列表，其作用是为用户提供网站具体栏目的导航。投票栏目的作用是不定期地提供一些问题项目，供用户体栏目的导航。投票栏目的作用是不定期地提供一些问题项目，供用户选择，使网站的设计者根据用户的意见改进工作，提供更加丰富的内容，选择，使网站的设计者根据用户的意见改进工作，提供更加丰富的内容，同时提高服务水平，如图所示。同时提高服务水平，如图所示。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页目标展示目标展示模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页任务分解任务分解一、制作子页导航与投票一、制作子页导航与投票1、新建名为“concept.psd“的文档，设置画布大小为1003 x 1270像素，然后使用与首页相同的方式制作网页的背景。2、打开“index.psd”文档，从其中导入网页的LOGO、导航条和版尾等栏目，如图6-2-3所示。3、分别导入star.psd、subpage-Bannerlmage.psd、subpageBannerBG.psd和flower2.psd等素材文档中的图像，制作子页的Banner。4、右击从subpageBannerlmage.psd素材文档中导入的图像涂层，执行“创建剪贴蒙板”命令，制作剪贴蒙版，完成Banner的制作，如图6-2-5所示。图6-2-3导入LOGO和导航条等栏目 图 6-2-5制作剪贴蒙板模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页5、从index.psd文档中导入名为“企业语”的图层文件夹，然后设置其中文本的大小等属性，使其与子页的Banner相匹配，如图6-2-6所示。6、新建“导航条修饰”图层文件夹，分别打开“flower3.psd”和“butterfly.psd”等素材图像，导入其中的花朵和蝴蝶图像，将其移动到网页的左侧。7、在“导航条修饰”图层文件夹下方新建名为“组41“图层文件夹，导入”subNavBG.psd”素材图像，作为子导航条的背景。8、在导航条背景的图层上方输入“企业介绍”文本，然后在字符面板中设置文本样式，如图6-2-9所示。图6-2-6设置企业语文本样式 图6-2-9 制作导航条标题模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页9、打开“subNavLine.psd”素材文档，将其中的彩色线条导入到网页文档中。10、输入子导航条的内容，然后通过字符面板设置文本内容样式。打开subNavHover.psd素材文档，将其中的墨迹图层导入到网页文档中，作为鼠标划过菜单的特效，完成子导航条的制作，如图6-2-11所示。11、在“组4”图层文件夹中新建“组42”图层文件夹。然后打开subVoteBG.psd素材文档，将其中的图形导入到网页文档中。将图形放置在子导航栏的下方作为投票栏目的背景。12、在投票栏目背景上绘制亦个箭头，然后再输入投票内容的文本，并设置其样式。13、使用“椭圆工具”在投票项目左侧绘制4个圆形形状，并分别将其转换为位图，作为表单的单选按钮，如图6-2-13所示。图6-2-11完成子导航制作 图6-2-13绘制单选按钮模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页14、使用“圆角矩形工具”在投票项目下方绘制两个黑色的圆角矩形，作为按钮的背景，如图6-2-14所示。15、在两个黑色圆角矩形上方绘制两个略小一些的圆角矩形。16、输入按钮的标签文本，然后在字符面板中设置文本的样式，如图6-2-16所示。17、打开“titleBar.psd”素材文档，导入素材图像作为投票栏目的标题背景。然后，输入标题文本，设置标题文本的样式，完成投票栏目的制作。图6-2-14绘制按钮背景 图6-2-16输入按钮标签文本模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页二、制作企业理念页二、制作企业理念页1、在concept.psd文档中，新建名为“组3”的图层文件夹。然后，导入subContentBG.psd素材文档中的图形，作为网页主题内容的背景，如图6-2-18所示。2、在“组3”图层文件夹中新建“组31”图层文件夹，然后导入subPageTitle.psd素材文档中的图标，作为主题内容标题的图标。然后输入标题，涉资标题样式，如图6-2-19所示。3、用同样的方法，导入subTitle2BG.psd素材文件中的图形，作为二级标题的背景。然后，输入二级标题的文本，并设置其样式，如图6-2-20所示。4、最后，输入企业理念的文本内容，并分别设置其中各种标题和段落的样式，即可完成企业理念网页的制作，如图6-2-21所示。图6-2-20制作二级标题 图6-2-21制作企业理念文本模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页三三、制作订餐表、制作订餐表1、复制“concept.psd”文档，将其重命名为“reservation.psd”文档，然后将其打开，删除“组3”图层文件夹中企业理念的文本内容和二级标题。2、将子导航栏的标题和主题内容的标题都修改为“网上订餐”，并删除导航栏中的内容。3、在“组3”图层文件夹中新建“客户信息”图层文件夹，然后从concept.psd文档中导入主题内容的二级标题和背景，修改二级标题为“客户信息”。输入客户信息表单中的文本内容并设置样式。然后绘制表单的矩形框如图6-2-24所示。4、新建“用餐要求”图层文件夹，然后用同样的方式在“客户信息”表单下方制作“用餐要求”表单，如图6-2-25所示。图6-2-24制作客户信息表单 图6-2-25制作用餐要求表单模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页5、再新建一个 “订餐须知”图层文件夹，添加二级标题，然后输入订餐须知的文本，如图6-2-26所示。6、新建名为“按钮”的图层文件夹，将投票栏目中的两个按钮复制到该图层文件夹中，并设置按钮的位置，即可完成网上订餐表单的制作。如图6-2-27所示。图6-2-26制作订餐须知文本 图6-2-27制作提交按钮模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页作业布置作业布置 1、瀚方手机网站内页设计与制作、瀚方手机网站内页设计与制作请根据提供的素材，自己创作；也可以根据上一任务中的作业进行修改得到相同的布局，然后参考现有的设计，自行完成瀚方手机网站内页布局与版面设计（布局结构不限），参考效果图如图设计目的与要求：（1）制作过程中，网页中的文字要尽量遵循网页标准用字来设置。（2）插入图像时，图像与文字之间、图像与图像之间的距离要适中。（2）形式上层次要清晰、布局简洁、结构性强、色彩明快。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页网页美工设计网页美工设计模块五模块五 网站整体设计网站整体设计任务三任务三 设计网站设计网站展示页展示页模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页教学目标教学目标 能再现变形命令、文字、画笔、移动等工具的使用。能完成素材的整合。能完成网页效果图的制作。教学重、难点教学重、难点变形命令、移动工具、文字工具的使用设计风格的确立与色调的选择 模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页新课导入新课导入展示页作用是介绍网站相关产品的具体内容，通过对产品的描述，来展示展示页作用是介绍网站相关产品的具体内容，通过对产品的描述，来展示产品的文化。本任务通过设计、美化各种产品栏目结构形状并通过大量精美的产品的文化。本任务通过设计、美化各种产品栏目结构形状并通过大量精美的菜肴照片作为栏目内容，达到提高浏览者对餐厅的兴趣，吸引浏览者前来就餐菜肴照片作为栏目内容，达到提高浏览者对餐厅的兴趣，吸引浏览者前来就餐的目的。的目的。设计该页面的作用是为了介绍与餐饮网站相关的各种名菜，通过这些描述，设计该页面的作用是为了介绍与餐饮网站相关的各种名菜，通过这些描述，来展示中餐的文化底蕴和餐馆精湛的烹饪技术。制作饮食文化子页时，可以使来展示中餐的文化底蕴和餐馆精湛的烹饪技术。制作饮食文化子页时，可以使用之前制作的子页中各种重复的栏目，以提高网页设计的效率。如图所示。用之前制作的子页中各种重复的栏目，以提高网页设计的效率。如图所示。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页目标展示目标展示模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页任务分解任务分解一、饮食文化页面设计一、饮食文化页面设计1.复制concept.psd文档，将其重命名为culture.psd文档。然后，修改子页导航条中的文本内容，以及主题内容中的两种标题内容，删除企业理念文本，如图6-3-2所示。2.在“组3”图层文件夹中新建名为“组32”图层文件夹，将主题内容的二级标题拖动到该图层文件夹中。然后，在“组32”图层文件夹中新建“糟香鲥鱼”图层文件夹，导入“糟香鲥鱼”的图片，如图6-3-3所示。图6-3-2子页内容 图6-3-3菜肴图像模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页3.打开素材文件/模块六/任务三/imageBG.psd素材文档，将其中的图形导入到“糟香鲥鱼”图层，执行“创建剪贴蒙板”命令，建立剪贴蒙版，如图6-3-4所示。4.在图片右侧输入“糟香鲥鱼”文本，然后导入素材文件/模块六/任务三/point.pas素材图像中的点画线，如图6-3-5所示。图6-3-4.剪贴蒙板 图6-3-5.素材图像导入效果模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页5.在“糟香鲥鱼”文本下方输入菜肴的介绍文本内容，并导入然后导入素材文件/模块六/任务三colorLine.psd素材文档中的彩色线条，如图6-3-6所示。6.从index.psd文档中导入“了解更多”按钮的文本及其背景图像。然后将“了解更多”修改为“更多简介”，即可完成“糟香鲥鱼”介绍的制作，如图6-3-7所示。图6-3-6素材文档 图6-3-7按钮效果模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页 7.用同样的方式，制作“蟹粉豆腐”和“瑶柱极品干丝”两道菜肴的介绍内容，即可完成饮食文化页面的制作，如图6-3-8所示。图6-3-8.饮食文化页效果图模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页二、特色佳肴页面设计二、特色佳肴页面设计 特色佳肴子页的作用是介绍餐饮企业提供给用户的各种才要类型，吸引用户前来就餐。同时，特色佳肴子页还可以介绍餐馆的价位、形象等信息，从而帮助用户了解餐饮类道德经营特色，如图6-3-9所示。图6-3-9特色佳肴子页模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页1.复制 concept.psd 文档，将其重命名为 delicacies.psd 文档。然后修改子页导航条中的文本内容，以及主题内容中的标题文本，同时删除二级标题和企业理念文本等内容，如图6-3-10所示。2.在主题内容部分的标题下方输入介绍信息的文本，并对文本进行排版，如图6-3-11所示。图6-3-10子页内容 图6-3-11文本排版效果模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页3.在“组3”图层文件夹中新建“组32“图层文件夹，从concept.psd文档中复制一个主题内容的二级标题文本和标题背景，然后将其拖动到介绍信息的文本下方，修改标题文本内容，如图6-3-12所示。4.导入imageBG.psd素材文档中的图像，作为菜肴图片列表的背景，将其放置到二级标题的下方，如图6-3-13所示。图6-3-12.二级标题 图6-3-13.图片背景导入效果模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页5.导入然后导入素材文件/模块六/任务三然后导入素材文件/模块六/任务三“果陷春卷.jpg”素材图像，将其拖拽到指定的位置，并以imageBG.psd素材中的图像制作剪贴蒙版，如图6-3-14所示。6.在图像的右侧输入菜肴的名称，然后在字符面板中设置文本的样式，如图6-3-15所示。图6-3-14剪贴蒙板 图6-3-15菜肴名称样式模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页7.用同样的方式，制作菜肴列表中的其他项目，即可完成特色佳肴子页的制作，如图6-3-16所示。图6-3-16菜肴列表效果图模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页作业布置作业布置 请根据提供素材文件/模块六/练习题素材，自己创作；也可以根据上一任务中的作业进行修改得到相同的布局，然后参考现有的设计，自行完成瀚方手机网站内页布局与版面设计（布局结构不限），参考效果图如图所示。1、瀚方手机网站内页设计与制作、瀚方手机网站内页设计与制作设计目的与要求：设计目的与要求：1.制作过程中，网页中的文字要尽量遵循网页标准用字来设置。2.插入图像时，图像与文字之间、图像与图像之间的距离要适中。3.形式上层次要清晰、布局简洁、结构性强、色彩明快。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页网页美工设计网页美工设计模块五模块五 网站整体设计网站整体设计任务四任务四 网页切片与输出网页切片与输出模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页教学目标教学目标 能使用切片工具对图片进行切割。能使用切片选择工具对切片进行选择并修改标注。能完成网页效果图的切片、并保存。教学重、难点教学重、难点使用切片工具按要求进行手动切割合理裁剪分割图片并进行正确标注 模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页新课导入新课导入Photoshop中的网页设计工具可以帮助我们设计和优化单个网页图形或整中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部分，并对每个部分应用不同的压缩和交互设置。当然对图像切割的最大好处就分，并对每个部分应用不同的压缩和交互设置。当然对图像切割的最大好处就是提高图像的下载速度，减轻网络的负担。是提高图像的下载速度，减轻网络的负担。网站的切片输出是网页美工设计最后的一个环节，所有通过网站的切片输出是网页美工设计最后的一个环节，所有通过PS设计的网页设计的网页都必须通过切片输出才能应用到网页中。本任务对切片需求以及切片工具的使都必须通过切片输出才能应用到网页中。本任务对切片需求以及切片工具的使用进行简单的讲解，让大家能使用切片工具对做好的网页或者图片进行合理的用进行简单的讲解，让大家能使用切片工具对做好的网页或者图片进行合理的切割和调整。切割和调整。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页任务分解任务分解一、切片概述一、切片概述1.切图是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。切片工具主要是用来将大图片分解为几张小图片，使用HTML表格或CSS层将图像划分为若干较小的图像，这些图像可在网页上重新组合成完整的图像。由于现在的网页中图文并茂，因此打开一个网页所须的时间就比较长，为了不让浏览网页的人等等时间太长，所以他们将图片切为几个小的来组成。2.切图中使用到的工具为“切片工具”和“切片选择工具”，如图所示。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页二、切片方式二、切片方式基本操作有两个：划分切片，是使用切片工具，在原图上进行切分的操作。编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等等。1.自动切割 （1）对于普通用来展示的图像，完全可以进行均匀的简单切割，这样会更加快速和高效。当选择了“切片工具”后，在图像上单击右键，在快捷菜单中选择“划分切片”命令，如图6-4-2所示。（2）在弹出的“划分切片”对话框中，设置“水平划分为”和“垂直划分为”两项的纵向切片和横向 切片的数量分别为“3”和“3”。可以看到图像上已经出现了切片的预览，如图6-4-3所示。图6-4-2切片菜单 图6-4-3切片参数模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页2.基于参考线创建切片（1）在网页制作过程中一般会向图像中添加参考线以布局需要如图6-4-4所示。（2）选择切片工具，然后在选项栏中单击“基于参考线的切片”，此时在工作区会根据我们图像的参考线自动生成切割的区域。如图6-4-5所示：图6-4-4图像参考线 图6-4-5基于参考线的切片模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页3.手动切割选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号，如图6-4-6所示。图6-4-6手动切割图片小技巧：小技巧：1.属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在X或在Y方向上没有变化2.属性渐变的区域适合分为一个切片模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页4.修改切片参数调整切片大小对切片大小调整方法有两种，一种通过切片的控制点进行自由调整，另一种通过双击切片，在选项对话框中进行调整，如图所示。正如您所看到的，对话框里有许多设置。a.切片名称：打开网页之后显示的名称b.URL：点击这个被编辑的图片区域后，会跳到你输入的目标网址内c.目标：指定载入的URL帧原窗口打开，表示是在还是在新窗口打开链接d.消息文本：鼠标移到这个块时浏览器左 下角显示的内容e.Alt标记：图片的属性标记，鼠标移动到 这块时鼠标旁的文本信息f.切片的尺寸：设置块的x、y轴坐标，W、H的精确大小注意事项：注意事项：切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创建图文并茂的网站界面；切片前,先要仔细对设计进行分析,考虑要因设计制宜；切片时,可不断放大缩小设计观察精准度,可以根据辅助线进行切片；切片后,要对导出的切片进行审核是否符合要求,比如大小颜色图片质量透明背景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页三、切片输出三、切片输出切图完成，就可以输出为Html格式如图6-4-8、图6-4-9所示。在“文件”菜单中，选择“存储为Web所用格式(W).”，在弹出的页面中直接选择“存储”，然后在弹出的界面中，填入文件名，保存类型选择“HTML 和图像(*.html)”，设置为“默认设置”即可，切片选择“所有切片”。然后点击“保存”按钮就可以了。图6-4-8 WEB格式存储选项 图6-4-9 WEB格式存储设置参数小提示：小提示：1.首页和内容页的切片可以放在同一个站点下的首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面文件夹下面,但是如果素材图片多时但是如果素材图片多时,最好最好另起一个文件夹单独保存另起一个文件夹单独保存,以便制作和修改的方便以便制作和修改的方便.2.FW切片导出时设置为切片导出时设置为只要切片输出只要切片输出,如果按照如果按照HTML和图像和图像输出会有很多的废代码输出会有很多的废代码,所以手动所以手动设置布局比较理想设置布局比较理想.模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块五模块五 网站整体设计网站整体设计任务一任务一 设计网站首页设计网站首页作业布置作业布置1.请将本章前面所完成的餐饮网站首页以及子页面进行切片保存。2.完成瀚方手机网站内页切片保存，如图所示。供娄浪颓蓝辣袄驹靴锯澜互慌仲写绎衰斡染圾明将呆则孰盆瘸砒腥悉漠堑脊髓灰质炎(讲课2019)脊髓灰质炎(讲课2019)