![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=1738840571-XpkALF5bO9BbiAZePqG9PEwCaESGG6Ot-0-6937c2ec8ebc9262fd7eb5a4b6af674d)
图1-29 Photoshop工作界面
step 02 选择【文件】|【新建】菜单命令,打开【新建】对话框,在其中设置文档的宽度为1024像素、高度为800像素,如图1-30所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_1.jpg?sign=1738840571-qPC0HWNbKeVsMNMAg3repg5ZEmTvhckV-0-3353977570798a0235bdd6d396222c67)
图1-30 【新建】对话框
step 03 单击【确定】按钮,创建一个1024像素×800像素的文档,如图1-31所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7483.jpg?sign=1738840571-HuFwLwyvbKaVBvnCuS9RnHhn2Jvl75Td-0-1fe7e1c34dac7ee8cc60f0c80875847c)
图1-31 空白文档
step 04 选择左侧工具箱中的矩形工具,并调整为路径状态,绘制一个矩形框,如图1-32所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7486.jpg?sign=1738840571-uq18PyM7tnj2IYCFNoujOplEOkUZv5SI-0-4a7e77d0111a5c202152713d2e2f84ac)
图1-32 绘制矩形框
step 05 使用文字工具,创建一个文本图层,输入“网站的头部”,如图1-33所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7495.jpg?sign=1738840571-VkCE4KqYqlVwIz5LXCusgsJ8Jk35Up4z-0-b738f136537af4e718fd4a763ab17d2d)
图1-33 输入文字
step 06 依次绘制出中左、中右和底部,网页的结构布局最终如图1-34所示。
![](https://epubservercos.yuewen.com/AA8EC0/17214368104800906/epubprivate/OEBPS/Images/Figure-P29_7498.jpg?sign=1738840571-X1SPmUVSN9GF2Q8yGt4J8DV4Q5hNJeov-0-a7d2e4bdc6ad35f5455f68b0d166c06e)
图1-34 网页布局效果