《网页制作三合一教程》项目十四 企业网站设计综合案例

网页制作三合一项目教程一、导航栏和Banner的制作项目十四

企业网站设计综合案例二、网页主体部分的制作三、网页底部的制作四、将效果图进行切片五、制作网页头部部分六、网页主体部分的制作七

网页页脚部分的制作八、用CSS样式美化网页项目十四

企业网站设计综合案例图14-1网页最终效果一、导航栏和Banner的制作图14-2设置文件参数

图14-3填充“背景”图层一、导航栏和Banner的制作图14-4新建参考线

图14-5再新建两条参考线一、导航栏和Banner的制作

图14-6创建矩形选区图14-7填充渐变色一、导航栏和Banner的制作图14-8打开素材文件

一、导航栏和Banner的制作图14-9拖入素材并调整位置一、导航栏和Banner的制作

图14-10输入文字一、导航栏和Banner的制作图14-11拖入按钮素材一、导航栏和Banner的制作图14-12拖入并复制箭头素材一、导航栏和Banner的制作图14-13拖入按钮素材一、导航栏和Banner的制作图14-14输入文字一、导航栏和Banner的制作图14-15打开素材图像一、导航栏和Banner的制作图14-16拖入banner素材一、导航栏和Banner的制作图14-17拖入素材二、网页主体部分的制作图14-18拖入面板素材二、网页主体部分的制作

图14-19输入文字二、网页主体部分的制作图14-20拖入气泡素材二、网页主体部分的制作图14-21输入文字二、网页主体部分的制作图14-22创建椭圆选区二、网页主体部分的制作图14-23绘制渐变色二、网页主体部分的制作

图14-24删除图像

二、网页主体部分的制作图14-25添加图层蒙版二、网页主体部分的制作图14-26编辑蒙版

二、网页主体部分的制作

图14-27复制图层二、网页主体部分的制作图14-28绘制五角星形状

二、网页主体部分的制作图14-29绘制其他形状二、网页主体部分的制作图14-30输入文字二、网页主体部分的制作图14-31输入英文文本二、网页主体部分的制作图14-32拖入素材二、网页主体部分的制作

图14-33绘制圆角矩形二、网页主体部分的制作

图14-34拖入素材

二、网页主体部分的制作图14-35绘制圆形并复制二、网页主体部分的制作图14-36拖入素材二、网页主体部分的制作图14-37输入文字二、网页主体部分的制作

图14-38绘制圆形并复制二、网页主体部分的制作图14-39“图层样式”对话框二、网页主体部分的制作

图14-40查看图像效果二、网页主体部分的制作图14-41添加投影三、网页底部的制作图14-42绘制路径并转换为选区

三、网页底部的制作图14-43新建并填充图层三、网页底部的制作图14-44添加渐变叠加三、网页底部的制作

图14-45创建选区三、网页底部的制作图14-46填充选区三、网页底部的制作图14-47输入文字四、将效果图进行切片图14-48新建文件夹四、将效果图进行切片图14-49进行切片四、将效果图进行切片图14-50隐藏文本和小图标四、将效果图进行切片图14-51保存切片四、将效果图进行切片图14-52选择保存选项图14-53确认操作四、将效果图进行切片图14-54查看切片文件五、制作网页头部部分图14-55单击“打开”命令

五、制作网页头部部分图14-56选择打开文件五、制作网页头部部分图14-57剪切图像路径五、制作网页头部部分图14-58转到代码视图五、制作网页头部部分图14-59加入背景属性

五、制作网页头部部分图14-60粘贴文件路径五、制作网页头部部分图14-61输入导航文本五、制作网页头部部分图14-62设置文本水平居中五、制作网页头部部分图14-63剪切图像路径

五、制作网页头部部分图14-64设置背景图像五、制作网页头部部分

图14-65插入表格

五、制作网页头部部分图14-66设置列宽和高度五、制作网页头部部分图14-67输入导航文本并加粗五、制作网页头部部分

图14-68单击“页面属性”按钮五、制作网页头部部分图14-69“页面属性”对话框五、制作网页头部部分图14-70保存并预览网页六、网页主体部分的制作图14-71选择“删除标签”命令六、网页主体部分的制作

图14-72输入标题文本六、网页主体部分的制作图14-73选择“删除标签”命令六、网页主体部分的制作

图14-74输入内容文本六、网页主体部分的制作图14-75选择“删除标签”命令六、网页主体部分的制作图14-76单击“项目列表”按钮六、网页主体部分的制作

图14-77输入文章列表标题

六、网页主体部分的制作

图14-78选择“删除标签”命令六、网页主体部分的制作

图14-79输入文章列表标题

六、网页主体部分的制作图14-80预览网页主体部分七

网页页脚部分的制作图14-81剪切图像路径

七

网页页脚部分的制作

图14-82设置背景图片七

网页页脚部分的制作图14-83单击“表格”按钮七

网页页脚部分的制作图14-84设置表格参数七

网页页脚部分的制作

图14-85设置列宽和高度七

网页页脚部分的制作图14-86输入版权信息七

网页页脚部分的制作图14-87保存并预览网页八、用CSS样式美化网页图14-88“页面属性”对话框八、用CSS样式美化网页图14-89设置链接属性八、用CSS样式美化网页图14-90设置文字超链接

八、用CSS样式美化网页图14-91设置其他文字链接八、用CSS样式美化网页图14-92单击“新建CSS规则”按钮

八、用CSS样式美化网页图14-93设置选择器类型和名称八、用CSS样式美化网页

图14-94设置规则

八、用CSS样式美化网页图14-95设置文本的行高属性八、用CSS样式美化网页图