CSS3+DIV网页样式与布局案例课堂(第2版)
上QQ阅读APP看书,第一时间看更新

1.6 在Photoshop中构建网页结构

设计网页之前,设计者可以先在Photoshop中勾画出框架,后来的设计就可以在此框架基础上进行了,具体的操作步骤如下。

step 01 打开Photoshop软件,如图1-29所示。

图1-29 Photoshop工作界面

step 02 选择【文件】|【新建】菜单命令,打开【新建】对话框,在其中设置文档的宽度为1024像素、高度为800像素,如图1-30所示。

图1-30 【新建】对话框

step 03 单击【确定】按钮,创建一个1024像素×800像素的文档,如图1-31所示。

图1-31 空白文档

step 04 选择左侧工具箱中的矩形工具,并调整为路径状态,绘制一个矩形框,如图1-32所示。

图1-32 绘制矩形框

step 05 使用文字工具,创建一个文本图层,输入“网站的头部”,如图1-33所示。

图1-33 输入文字

step 06 依次绘制出中左、中右和底部,网页的结构布局最终如图1-34所示。

图1-34 网页布局效果