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

书名 网页设计与制作项目教程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 以选区的中间位置为起点 按住键进行拖放 效果如图1 17所示 操作提示 选择菜单 文件 置入 命令 将logo图像插入 Logo 区域 并调整至合适的位置 在 Logo 组下新建 LogoRight 图层 选择 钢笔工具 在距离右边1 3处绘制如图1 18所示封闭路径 操作提示 按住组合键 将路径转换为选区 将区域填充为 白色 如图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广告图像 按住键将图像放大至 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 然后在顶部填充 3px 的 199dba 颜色 完成底部导航背景的制作 操作提示 新建 浮雕 图层 选择 钢笔工具 绘制如图1 30所示路径 将路径转换成选区 并