网页设计布局方法

相关推荐

网页设计布局方法

　　导语：一个好看实用的网页应该如何布局呢?跟着小编一起来学习吧!

　　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%的黑色阅读性更佳，且使网站看起来更精致。

　　6.content制作。