网页草图设计实例

《网页草图设计实例》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、“新建”命令，新建文档。（图像大小：960×900像素）（2）打开“sky.jpg”

3、、“建筑.jpg”文件。（3）工具箱中选择“移动工具”，将“sky.jpg”文件拖到新建“网页草图”文件上，图层重命名为“天空”。将“建筑.jpg”文件拖到新建“网页草图”文件上，图层重命名为“建筑”。（4）当前层为“建筑”图层，按【Ctrl+T】组合键调整图像大小，按【Enter】确定。（5）为“建筑”图层添加图层蒙版。（6）工具箱中设置“前景色/背景色”为默认的“黑色/白色”（#000000/#ffffff）。工具箱中选择“渐变工具”，选择“前景色到背景色的渐变”，在“建筑”图层蒙版上从左到右拖动鼠标填充。（7）工具箱中选择

4、“画笔工具”，前景色黑色#000000，画笔直径70px，硬度0%，在“建筑”图层蒙板上涂抹对图像遮罩，效果如图所示。（8）打开“人物.gif”文档，执行“图像”

5、“模式”

6、“RGB颜色”命令，将图像转换成RGB颜色模式。（9）工具箱中选择“移动工具”，把“人物.gif”图像拖动到“网页草图”文件上，该图层重命名为“人物”。（10）打开images文件夹中的“logo.gif”文件。执行“图像”

7、“模式”

8、“RGB颜色”命令。（11）工具箱中选择“移动工具”，把“logo.gif”图像拖动复制到“网页草图”文件上，该图层重命名为

9、“Logo”。（12）工具箱中选择“文字工具”，输入文字，效果如图所示。（13）图层面板上，新建“组1”，重命名为“top”，并将除背景层以外的图层拖动到“top”组中，如图所示。（14）图层面板上，新建“组1”，重命名为“导航栏”。在“导航栏”组中新建“图层1”重命名为“导航栏背景”，工具箱中选择“矩形选框工具”，在“导航栏背景”图层上创建矩形选区。（15）前景色设置为#f45209，按【Alt+Del】组合键填充前景色。按【Ctrl+D】组合键取消选区。（16）设置前景色为白色#ffffff，工具箱中选择“文字工具”，输入文

10、字，效果如图所示。“

11、”与文字之间有一个空格。17）图层面板上，新建“组1”，重命名为“主体”，新建“图层1”重命名为“主体右”，执行“视图”

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

13、”

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

15、所示。（24）打开“lanmu.gif”、“xian3.gif”文件。执行“图像”

16、“模式”

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

18、制“线3”图像，并移动到“栏目”图像右边，如图所示。（28）工具箱中选择“移动工具”，按【Alt】键拖动鼠标复制“线3”图像。执行“编辑”

19、“变换”

20、“旋转90度（顺时针）”命令，并移动图像到合适位置，按【Ctrl+T】组合键。水平方向上调整该图像，按【Ente