导语：一个好看实用的网页应该如何布局呢?跟着小编一起来学习吧!
1.栏目设置
导航栏：中心概况、组织架构、实验教学、设备环境、管理制度、开放实验、创新基金、学生感言。
二级栏目： 无二级栏目。
在ps中新建宽度为1200px、高度随意、分辨率为72ppi、RGB颜色模式的文档，注意文档规范语义化命名为“网站名称_index_版本_日期”。
.红色框的参数和单位需注意，一般默认参数和单位，但是避免部分同学的默认参数存在问题，找不到原因而苦恼，另外背景内容透明和白色均可，无影响。
后面制作的过程中，可以改变画布的大小。选择菜单面板的“图像-画布大小”。“定位”可选择扩充/裁剪方向。
2. 建立辅助线
快速建立辅助线的方法是：直接从标尺上拖出一条辅助线。假如没看到标尺，选择菜单面板的“视图-标尺”打上勾。
选择“新建参考线”，精确定义参考线位置：
或者选择“新建参考线版面”，一键分栏：
内容宽度为1200px，因此将左右边距设置为(1920-1200)/2=360px;导航共9个栏目，因此将列数设置为9。
最好在画布边界也拉上辅助线，当你沿着辅助线画图(矩形、直线等)的时候它会自动贴齐辅助线，这样就不会画出边界了。如果辅助线太多，可以按ctrl+h来隐藏辅助线，查看整体效果，再按一次即可显示回来。
但是拖动得到辅助线有时难以准确，为了精确的像素调整，可直接使用菜单面板的“视图-新建参考线”，直接建立360px，1560px两条参考线来限定网页内容范围。
3. 建立布局
根据需求分析，大概定一下网站的banner、slider、content、copyright的高度(之后可以调整)，banner及slider的高度不要超过578px。因为主流显示器分辨率为1366*768px，减去浏览器的高度首屏高度就剩下578px了，为了保证slider在屏幕上显示完全，必须使banner+slider≤578px。
同时建立五个文件夹，每个区域的图层分别放在对应的文件夹里。各文件夹可以用不同颜色标记(右键单击文件夹→选择颜色标记)，在含有大量图层的时候方便快速找到文件夹，切记各文件夹和图层命名语义化。以上措施均是为了方便图层的更改和管理。
4. 置入内容
· banner
首页banner一个重要的功能是展示网站的名称和logo。网站名称和logo直接放在导航左侧空白处，右侧可以通过放置一些与网站相关的图片平衡页面，如化院首页的分子图、校友会网站的纸笔等等，但需注意的是以上内容均应控制在1200px的参考线内。
为使图片素材融入背景，你可能需要进行抠图、降低不透明度、画笔调整等操作。
· navigation
沿着nav区域画一个颜色为#00702a的矩形，如果觉得太扁平，通过改变图层样式(双击图层，或者右键-混合模式，即可到达图层样式面板)来增加质感，最后辅助线建立的各栏内置入各栏目名称(字号16px，字体为微软雅黑)。这里选用了斜面和浮雕效果。
接下来增加点细节，在两栏之间加分隔线。
实现方法：
① 画一个宽1px，高30px的矩形，填充白色;
② 再画一个相同的矩形，填充一种比背景更深的绿色，并把它贴在上面那个矩形的右侧;
③ 适当降低两个矩形的不透明度，如30%;
以上就是利用一根浅颜色和一根深颜色的1px的线打造刻线质感的方法，到此已经基本完成，倘若要做得更细，可继续看第④步，做一点渐变，让它不那么生硬。
④ 双击白色矩形图层，打开图层样式面板，选择渐变叠加。“渐变”左侧选择白色，右侧选择背景绿(勾选反向时要反着选)，“样式”选择“对称的”，“角度”为90度，适当降低“不透明度”和控制“缩放”，直到达到自己满意的效果。右边的“预览”可以让你查看实时效果，记得勾选哦。同理，对于深色矩形，将“渐变”中白色改成改矩形的'颜色，其余一致。快速的方法是右键图层-复制图层样式，再右键另一个图层-粘贴图层样式，更改渐变中的颜色即可。
· slider
沿着slider参考线画一个白色(或任意颜色，但不要描边)的矩形，把制作好的slide图片从文件夹直接拉入画布中，置于“slider_bg”图层之上。右键单击slider图片图层，在弹出的菜单中选择“创建剪贴蒙版”，让slider图片只在“slide_bg”图层区域上显示。于是图片就被裁剪得只剩slier区域的部分。此时该矩形对该图片就会起到蒙版的作用，把矩形以外的部分遮盖。之后你可以继续拖动图片调整其位置，你会发现图片并没有被真的裁剪得只剩slider区域。
剪切蒙版与蒙版有些类似，在网页制作的过程中会经常使用。使用剪切蒙版可以避免对素材的裁剪，保证其完整性以便再次调整。PS是关于图层的艺术，在设计过程中部分素材来之不易，一定要避免对素材进行如裁剪、变形等等“暴力”操作，否则当发现效果不理想时后悔为时已晚。
5.再在slider添加展示性文字
页面整体主色调使用不太明显，于是在slide下方增加2px的线，以强调主色调。
· content
内容部分作用是放置栏目展示信息，主要注意排版和细节处理，难度是不大的。常见的内容部分有几种形式，例如采用列表式，适用于信息较少，文章展示为主：
这些画起来应该没啥难度的了，不过要注意几点：
① 文章列表每行用1px虚线间隔，直线工具中把实线改成虚线即可。
② 对于栏目标题，如新闻速递，建议使用图标加文字的形式。
③ 文章列表每行开头建议加一个小圆点，形成信息层次。
④ 栏目内容字号为14px，栏目标题字号为16px，导航、标题用微软雅黑，正文用宋体。整个网站除了slider之类的展示性文字，其余均需遵守这个原则。
⑤ 字体颜色避免纯黑，85%-95%的黑色阅读性更佳，且使网站看起来更精致。
ent制作。
栏目内容分栏，左侧主要是文字为主，右侧以图片为主。
栏目标题采用图标加文字，图标如果不想自己画可以去图标网站上搜索，最好保持一致。
书香门第
