(网页草图设计实例.docVIP

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