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

1、标题：网页设计与制作项目教程ISBN: 978-7-111-49182-8作者：陈出版社：机械工业出版社本书配有电子课件，项目1:网站规划与设计，系：广东女子职业技术学院经济与贸易系主讲人：陈，能力开发2网站主页布局设计，任务要求，用Photoshop软件设计网站主页布局，掌握页面设计方法，制作技巧，最终效果和操作技巧，并创建新的1000像素x800像素图像，操作提示，将页面分为五个部分：页眉、导航、横幅广告、友情链接和页脚，并在图层面板上分别创建“Logo”、“nav”、“横幅”、“Link”和“foot”组。操作提示，在“Logo”组下新建一个“Logo BG”图层，如图1-16所示，操作

2、提示，选择“线性渐变工具”，设置渐变颜色：前景色为“#FFFFFF”，背景色为“#0099CC”。从选择的中间位置开始，按住键进行拖放，效果如图1-17所示。操作提示，选择菜单“文件”“放置”命令，将徽标图像插入“徽标”区域，并将其调整到合适的位置。在“Logo”组下创建一个新的“Logo RIGHT”图层，选择“钢笔工具”，在右侧三分之一处画出如图1-18所示的闭合路径。操作提示，按住组合键，将路径转换为选择，并用“白色”填充该区域，如图1-13所示。选择菜单“文件”和“地点”命令，将相应的“联系我们”、“公司邮箱”和“收藏网站”图标插入“标识”区域，并调整它们的位置，如图1-13所示。选择

3、“文本工具”，创建三个文本层：“联系我们”、“公司邮箱”和“喜欢的网站”，如图1-19所示。操作提示，在“nav”组下新建一个“Navbg”图层，选择“选框工具”，将其固定大小设置为“1000px38px”，并将前景色填充为“#19a4c2”。修改后的复选框的固定大小为“1000px1px”，前景颜色为距离上边缘1px处的“#c7deec”，如图1-20所示。操作提示，将选择框的固定大小修改为“1000px18px”，并在前景填充“#6fc4d9”，在背景填充“#32aac6”，如图1-21所示。操作提示，创建一个新的导航分隔线图层，将选择框的固定大小设置为“1px38px”，分别绘制两条1p

4、x填充颜色为“#1a92ae”和“#c7deec”的竖线，填充颜色时将两条线水平放在一起。然后添加遮罩层，设置“渐变工具”，如图1-22所示，从上到下拖动渐变，效果如图1-13所示。操作提示，以同样的方式制作其他分割线，或者复制6个相同的图层并均匀分布。创建一个导航文本层，并将字体设置为“Tahoma”，大小设置为“14点”，抗锯齿模式设置为“无”，如图1-23所示。输入相应的导航文本并调整其位置。操作提示，创建悬停效果图层。选择工具栏中的圆角矩形工具，切换到属性面板中的形状选项，将填充颜色设置为# ffff，固定大小设置为“102px25px”，半径设置为“8px”，如图1-24所示。操作提

5、示，画一个圆角矩形，并将该层的透明度调整到 25%完成导航区域的制作。相关层如图1-25所示。操作提示，选择“横幅”组，执行菜单“文件”和“放置”命令，插入横幅广告图像，按住键将图像放大到“1000像素”，以中心点为原点，定位图像的x值和y值参数，如图1-26所示。在“链接”组下，创建一个新的链接图层，将选框工具的固定大小设置为1000像素x110px，并用白色填充选区。操作提示，新建一个“链接边框”图层，选择“圆角矩形工具”，将圆角半径设置为“5px”，将固定尺寸设置为“980px93px”，如图1-27所示。画出路径，用“1px”大小的“cfcfcf”的颜色描边。，操作提示，将圆角矩形选择

6、降低到“25px”的高度，选择“对称渐变工具”，将渐变前景色设置为“eeeeee，背景色设置为“#”fdfdfdfd，使渐变效果如图1-28所示，再用1px笔画，笔画颜色仍为“cfcfcf。操作提示，创建“友谊链接”文本层，并选择“椭圆工具”制作红色空心圆。创建一个文本层，并输入链接项目的文本。此时，链接部分完成，相关的层如图1-29所示。在“foot”组下创建一个新的“related navigation background”层，将“box selection tool”的固定大小设置为“1000px33px”，绘制该区域并用颜色“#5db9cf”填充，然后用“3px”的颜色“#199dba”填充顶部以完成底部导航背景。操作提示，创建一个新的“浮雕”层，选择“钢笔工具”，绘制如图1-30所示的路径，将路径转