![CSS3+DIV网页样式与布局案例课堂(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/31794459/b_31794459.jpg)
上QQ阅读APP看书,第一时间看更新
1.6 在Photoshop中构建网页结构
设计网页之前,设计者可以先在Photoshop中勾画出框架,后来的设计就可以在此框架基础上进行了,具体的操作步骤如下。
step 01 打开Photoshop软件,如图1-29所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7471.jpg?sign=1739293871-BM1hcjOLX5cxHNE56gn27QktP6BzEfze-0-c8d11386c5fedc09793d1cfca3ca6add)
图1-29 Photoshop工作界面
step 02 选择【文件】|【新建】菜单命令,打开【新建】对话框,在其中设置文档的宽度为1024像素、高度为800像素,如图1-30所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_1.jpg?sign=1739293871-z949CnDBED9CevGC0Dct0ZU4deGNzeGT-0-164ccb57ac1e217dc86de4ce9f87980f)
图1-30 【新建】对话框
step 03 单击【确定】按钮,创建一个1024像素×800像素的文档,如图1-31所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7483.jpg?sign=1739293871-QigTdSTEI5EyI1rgfoH4p5XgO2XIyhfJ-0-ae3a3fa22da46a882339ccb3ba5b8ea5)
图1-31 空白文档
step 04 选择左侧工具箱中的矩形工具,并调整为路径状态,绘制一个矩形框,如图1-32所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7486.jpg?sign=1739293871-eMebKaKjm0a2aOoQyZOOD2WHTut8Vmrk-0-e2629e22ab8de17e3d54b912ab6d15f0)
图1-32 绘制矩形框
step 05 使用文字工具,创建一个文本图层,输入“网站的头部”,如图1-33所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7495.jpg?sign=1739293871-5ilAXBLPRHV3N1oUfuQN7hTAKcKoQ0BZ-0-097c08534362407bfb60a891908de9f0)
图1-33 输入文字
step 06 依次绘制出中左、中右和底部,网页的结构布局最终如图1-34所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7498.jpg?sign=1739293871-DczzVIw79p36EZvB2hT004AvlyHrPiOI-0-c5415494eaced675529c871690a59f21)
图1-34 网页布局效果