网页草图设计实例.doc

网页草图设计实例

绘制草图是为了能够得到整体的页面结构，制作者通过网页草图与客户进行沟通，从而确定网站外观、功能和一些特效，知道客户这样能减满意为止，这样能减少麻烦。同时如果在设计页面阶段还没有完全确定整个网站的功能，那么在以后的开发过程中会浪费很长时间去修改，并且从页面设计到网页制作这个过程是不可逆的过程。同时草图文件还可以作为Dreamweaver中的跟踪图像，使用软件设计草图，效果如图所示。

制作网站首页草图的具体操作步骤。
（1）执行“文件”| “新建”命令，新建文档。（图像大小：960×900像素）
（2）打开“sky.jpg”、“建筑.jpg”文件。
（3）工具箱中选择“移动工具”，将“sky.jpg”文件拖到新建“网页草图”文件上，图层重命名为“天空”。将“建筑.jpg”文件拖到新建“网页草图”文件上，图层重命名为“建筑”。
（4）当前层为“建筑”图层，按【Ctrl+T】组合键调整图像大小，按【Enter】确定。
（5）为“建筑”图层添加图层蒙版。
（6）工具箱中设置“前景色/背景色”为默认的“黑色/白色”（#000000/#ffffff）。工具箱中选择“渐变工具”，选择“前景色到背景色的渐变”，在“建筑”图层蒙版上从左到右拖动鼠标填充。
（7）工具箱中选择“画笔工具”，前景色黑色#000000，画笔直径70px，硬度0%，在“建筑”图层蒙板上涂抹对图像遮罩，效果如图所示。

（8）打开“人物.gif”文档，执行“图像”|“模式”|“RGB颜色”命令，将图像转换成RGB颜色模式。
（9）工具箱中选择“移动工具”，把“人物.gif”图像拖动到“网页草图”文件上，该图层重命名为“人物”。
（10）打开images文件夹中的“logo. gif”文件。执行“图像”|“模式”|“RGB颜色”命令。
（11）工具箱中选择“移动工具”，把“logo.gif”图像拖动复制到“网页草图”文件上，该图层重命名为“Logo”。
（12）工具箱中选择“文字工具”，输入文字，效果如图所示。

（13）图层面板上，新建“组1”，重命名为“top”，并将除背景层以外的图层拖动到“top”组中，如图所示。

（14）图层面板上，新建“组1”，重命名为“导航栏”。在“导航栏”组中新建“图层1”重命名为“导航栏背景”，工具箱中选择“矩形选框工具”，在“导航栏背景”图层上创建矩形选区。
（15）前景色设置为#f45209，按【Alt+Del】组合键填充前景色。按【Ctrl+D】组合键取消选区。
（16）设置前景色为白色#ffffff，工具箱中选择“文字工具”，输入文字，效果如图所示。“|”与文字之间有一个空格。

17）图层面板上，新建“组1”，重命名为“主体”，新建“图层1”重命名为“主体右”，执行“视图”|“标尺”命令，显示出标尺线，并拖出标尺辅助线。工具箱中选择“矩形选框工具”，选项卡栏设置如图所示。在“主体右”图层上单击创建矩形选区与标尺重合。
（18）设置前景色为#4bb2f5，按【Alt+Del】组合键填充前景色，按【Ctrl+D】组合键取消选区，效果如图所示。

（19）工具箱中选择“矩形选框工具”。选项卡栏设置如图所示。在“主体右”图层上单击创建矩形选区，如图所示。

（20）执行“编辑”|“描边”命令，单击【确定】按钮。效果如图所示。

（21）图层面板上，新建两个图层，分别重命名为“主体右中”、“ 主体右下”，同理绘制其它两个主体部分，文字的背景选区的大小为200px×27px，描边选区的大小分别为
200px×157px、200px×194px，
效果如图所示。
（22）工具箱中选择“文字工具”，输入文字。
（23）图层面板上，新建两个图层，分别重命名为“主体左上”、“主体左下”。绘制左侧两个主体部分，文字的背景选区的大200px×27px，描边的选区的大小分别为200px×251px，200px×190px，效果如图所示。

（24）打开“lanmu.gif”、“xian3.gif”文件。执行“图像”|“模式”|“RGB模式”命令。
（25）图层面板上，新建“组1”，重命名为“主体中”。 工具箱中选择“移动工具”，将“lanmu.gif”文件拖动到“网页草图”文件中，图层重命名为“栏目”。 将“xian3.gif” 文件拖动到“网页草图”文件中，图层重命名为“线3”。“线3”和“栏目”图层都位于“主体中”组中。
（26）按【Ctrl+T】组合键，竖直方向上调整“线3”的大小，按【Enter】确定。
（27）工具箱中选择“移动工具”，按【Alt】键拖动鼠标复制“线3”图像，并移动到“栏目”图像右边，如图所示。

（28）工具箱中选择“移动工具”，按【Alt】键拖动鼠标复制“线3”图像。执行“编辑”|“变换”|“旋转90度（顺时针）”命令，并移动图像到合适位置，按【Ctrl+T】组合键。水平方向上调整该图像，按【Enter】确定，调整后效果如图所示。
（29）将组成图的所有图层合并为一个图层，图层重命名为“红色bg”。
（30）复制“红色bg”图像，
效果如图所示。

（31）图层面板上，新建“组1”，重命名为“底部”，新建“图层1”重命名为“站内导航”。工具箱中选择“矩形选框工具”，在“底部体”图层上单击创建矩形选区。
（32）设置前景色为#f45209，按【Alt+Del】组合键填充前景色，按【Ctrl+D】组合键取消选区。
（33）设置前景色为白色，工具箱中选择“文字工具”，输入文字。
（34）图层面板上，新建“图层1”重命名为“版权”，工具箱中选择“矩形选框工具”。在“底部体”图层上创建矩形选区。
（35）设置前景色为#8fdbce，按【Alt+Del】组合键填充前景色，按【Ctrl+D】组合键取消选区。
（36）输入相应文字。如图所示。

（37）执行“文件”|“存储”命令，保存到站点根目录下，文件名：网站草图，格式：jpg，单击“保存”按钮。
（38）工具箱中选择“切片工具”，在网站草图的title部分拖动鼠标创建切片，大小与title相同，如图所示。

（39）执行“文件”|“存储为Web和设备所用格式”命令。
（40）单击【存储】按钮，弹出“将优化结果存储为”对话框，在对话框中设置文件存储的位置和名字。