网页设计与制作项目教程.ppt
书名：网页设计与制作项目教程ISBN：978-7-111-49182-8作者：陈义文出版社：机械工业出版社本书配有电子课件,项目一 网站规划与设计,院系：广东女子职业技术学院经贸系主讲：陈义文,能力拓展2 网站首页版式设计,任务要求,利用Photoshop软件设计网站首页版式，掌握页面设计的方法及制作技巧,最终效果,操作提示,在Photoshop编辑窗口中，新建1000px800px的图像文件，白色背景，如图1-14所示。,操作提示,将页面分成页眉、导航、横幅广告、友情链接、页脚5大部分，并在图层面板分别创建“Logo”组、“Nav”组、“Banner”组、“Link”组和“foot”组,操作提示,在“Logo”组下新建“LogoBg”图层，选择“选框工具”，并设置其固定大小为1000px100px，如图1-16所示,操作提示,选择“线性渐变工具”，设置渐变色：前景色为“#FFFFFF”，背景色为“#0099CC”。以选区的中间位置为起点，按住键进行拖放，效果如图1-17所示。,操作提示,选择菜单“文件”“置入”命令，将logo图像插入“Logo”区域，并调整至合适的位置。在“Logo”组下新建“LogoRight”图层，选择“钢笔工具”，在距离右边1/3处绘制如图1-18所示封闭路径。,操作提示,按住组合键，将路径转换为选区，将区域填充为“白色”，如图1-13所示。选择菜单“文件”“置入”命令，分别将“联系我们”“公司邮箱”和“收藏本站”的对应图标插入“Logo”区域，并调整其位置，如图1-13所示。选择“文字工具”，分别创建“联系我们”“公司邮箱”和“收藏本站”3个文字图层，如图1-19所示。,操作提示,在“Nav”组下新建“NavBg”图层，选择“选框工具”，设置其固定大小为“1000px38px”，填充前景色为“#19a4c2”。修改选框的固定大小为“1000px1px”，在距离上边缘1px处，填充前景色为“#c7deec”，如图1-20所示。,操作提示,修改选框的固定大小为“1000px18px”，距离上边缘2px处，填充前景色为“#6fc4d9”、背景颜色为“#32aac6”的渐变效果，如图1-21所示。,操作提示,新建导航分隔线图层，将选框的固定大小设置为“1px38px”，分别绘制两根1px的填充色为“#1a92ae”和“#c7deec”的垂直线条，填充颜色时将两线条水平并放在一起。然后添加蒙版图层，设置“渐变工具”，如图1-22所示，并自上而下拖动渐变，效果如图1-13所示。,操作提示,按照相同的方法制作其他分隔线，或复制6个相同的图层，并将其平均分布。创建导航文字图层，设置字体为“宋体”、大小为“14点”、消除锯齿方式为“无”，如图1-23所示。输入对应导航文字，并调整其位置。,操作提示,创建“hover效果”图层。在工具栏中选择“圆角矩形工具”，在“属性”面板切换至“形状”选项，并设置填充颜色为“#ffffff”、固定大小为“102px25px”、半径为“8px”，如图1-24所示。,操作提示,绘制圆角矩形形状，并将该图层的透明度调整为“25%”，完成导航区域的制作，相关图层如图1-25所示。,操作提示,选择“Banner”组，执行菜单“文件”“置入”命令，插入Banner广告图像，按住键将图像放大至“1000px”，并以中心点为原点，定位图像的X值和Y值的参数如图1-26所示。在“Link”组下新建“LinkBg”图层，设置“选框工具”的固定大小为“1000px110px”，并将选区填充为白色。,操作提示,新建“LinkBorder”图层，选择“圆角矩形工具”，设置圆角半径为“5px”，固定大小为“980px93px”，如图1-27所示。绘制路径，并以“#cfcfcf”的颜色进行描边、大小为“1px”。,操作提示,将圆角矩形选区缩小至“25px”的高度，选择“对称渐变工具”，设置渐变前景色为“#eeeeee”、背景色为“#fdfdfd”，制作渐变效果如图1-28所示，并再次执行1px的描边，描边颜色仍为“#cfcfcf”。,操作提示,创建“友情链接”文字图层，并选择“椭圆工具”，制作红色空心圆圈。创建文字图层，输入链接项文字。至此，完成Link部分的制作，相关图层如图1-29所示。,在“foot”组下新建“相关导航背景”图层，设置“选框工具”的固定大小为“1000px33px”，绘制区域并填充颜色为“#5db9cf”，然后在顶部填充“3px”的“#199dba”颜色，完成底部导航背景的制作。,操作提示,新建“浮雕”图层，选择“钢笔工具”，绘制如图1-30所示路径，将路径转换成选区，并填充白色背景。,操作提示,为“浮雕”图层添加斜面浮雕和投影效果，相关参数设置如图1-31所示。,操作提示,创建文字图层，输入导航文字及页脚文字信息，最终效果如图1-32所示。,谢谢大家！,Thank You!,
