网页设计与制作项目教程.pptVIP

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