网页设计基础知识

大家在浏览网页时经常可以看优秀的海报设计，这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么今天我们就跟大家分享网页设计基础知识。

　　一、需求分析

　　(1)网站风格

网站为学院网站的子站点，同时需保持旧版内容大致，具体分为以下几个方面：

1. 整体格调：学术科研类网站、内容精炼，形式简洁。

2. 版式布局：精心编排、层次清晰、美观实用，方便浏览。。

3. 配色应用：主色调采用 #00702a ，背景色采用 #f5f5f5 。

4. 基本功能：文章发布，图片展示。

5.基本要求：符合大学视觉形象识别规范、色调与主网站保持一致、网站内容与旧版内容基本一致、便于文章内容更新及实时信息发布。

　　(2)首页要求

1. 图片展示为主，格调文化典雅。

2. 尺寸：内容宽度1200px，slide最大为1920px。首屏高度800-1200px

3. 布局采用扩展全屏，突出图片，保证图片slide在首屏高度内。

布局：由上至下;

· header/头部 这部分包括banner和nav(导航)，其中nav采用了下拉菜单

· slider/滑动图片 图文并茂的形式展示网站理念或主旨，是首页是否出彩的决定性因素

· content/内容 内容不多，用文章列表的方式呈现

· footer/脚部 版权信息、作者信息、友情链接等

　　(3)网站栏目结构

导航栏：中心概况、组织架构、实验教学、设备环境、管理制度、开放实验、创新基金、学生感言。

二级栏目： 无二级栏目。

　　二、确定布局

1.需求分析时已确定网站首页以图片展示为主，尺寸已定，我们需要的网页内容宽度是1200px，而网页最大宽度为1920px。如何建立文档?

在ps中新建宽度为1200px、高度随意、分辨率为72ppi、RGB颜色模式的文档，注意文档规范语义化命名为“网站名称_index_版本_日期”(如图1)。

.红色框的参数和单位需注意，一般默认参数和单位，但是避免部分同学的默认参数存在问题，找不到原因而苦恼，另外背景内容透明和白色均可，无影响。

2.文档建立后，即拉出两条纵向辅助线到文档边缘(如图2)。

后面制作的过程中，可以改变画布的大小。选择菜单面板的“图像-画布大小”，如图3。“定位”可选择扩充/裁剪方向。

　　2. 建立辅助线

快速建立辅助线的方法是：直接从标尺上拖出一条辅助线。假如没看到标尺，选择菜单面板的“视图-标尺”打上勾，如图3。

选择“新建参考线”，精确定义参考线位置：

或者选择“新建参考线版面”，一键分栏：

内容宽度为1200px，因此将左右边距设置为(1920-1200)/2=360px;导航共9个栏目，因此将列数设置为9，如图7。

最好在画布边界也拉上辅助线，当你沿着辅助线画图(矩形、直线等)的时候它会自动贴齐辅助线，这样就不会画出边界了。如果辅助线太多，可以按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，字体为微软雅黑)，如图11。这里选用了斜面和浮雕效果，参数如图12所示。

接下来增加点细节，在两栏之间加分隔线，如图13。

　　实现方法：

① 画一个宽1px，高30px的矩形，填充白色;

② 再画一个相同的矩形，填充一种比背景更深的绿色，并把它贴在上面那个矩形的右侧;

③ 适当降低两个矩形的'不透明度，如30%;

以上就是利用一根浅颜色和一根深颜色的1px的线打造刻线质感的方法，到此已经基本完成，倘若要做得更细，可继续看第④步，做一点渐变，让它不那么生硬。

④ 双击白色矩形图层，打开图层样式面板，选择渐变叠加。如图14，“渐变”左侧选择白色，右侧选择背景绿(勾选反向时要反着选)，“样式”选择“对称的”，“角度”为90度，适当降低“不透明度”和控制“缩放”，直到达到自己满意的效果。右边的“预览”可以让你查看实时效果，记得勾选哦。同理，对于深色矩形，将“渐变”中白色改成改矩形的颜色，其余一致。快速的方法是右键图层-复制图层样式，再右键另一个图层-粘贴图层样式，更改渐变中的颜色即可。

　　· slider

沿着slider参考线画一个白色(或任意颜色，但不要描边)的矩形，把制作好的slide图片从文件夹直接拉入画布中，置于“slider_bg”图层之上。右键单击slider图片图层，在弹出的菜单中选择“创建剪贴蒙版”，让slider图片只在“slide_bg”图层区域上显示。如图15，于是图片就被裁剪得只剩slier区域的部分。此时该矩形对该图片就会起到蒙版的作用，把矩形以外的部分遮盖。之后你可以继续拖动图片调整其位置，你会发现图片并没有被真的裁剪得只剩slider区域。

剪切蒙版与蒙版有些类似，在网页制作的过程中会经常使用。使用剪切蒙版可以避免对素材的裁剪，保证其完整性以便再次调整。PS是关于图层的艺术，在设计过程中部分素材来之不易，一定要避免对素材进行如裁剪、变形等等“暴力”操作，否则当发现效果不理想时后悔为时已晚。

　　再在slider添加展示性文字

页面整体主色调使用不太明显，于是在slide下方增加2px的线，以强调主色调。(如图12)

· content

内容部分作用是放置栏目展示信息，主要注意排版和细节处理，难度是不大的。常见的内容部分有几种形式，例如采用列表式，适用于信息较少，文章展示为主：

这些画起来应该没啥难度的了，不过要注意几点：

① 文章列表每行用1px虚线间隔，直线工具中把实线改成虚线即可。

② 对于栏目标题，如新闻速递，建议使用图标加文字的形式。

③ 文章列表每行开头建议加一个小圆点，形成信息层次。

④ 栏目内容字号为14px，栏目标题字号为16px，导航、标题用微软雅黑，正文用宋体。整个网站除了slider之类的展示性文字，其余均需遵守这个原则。

⑤ 字体颜色避免纯黑，85%-95%的黑色阅读性更佳，且使网站看起来更精致。

完成后如图17、18、19，学院网首页展示内容量大，因此设计成滑动门的形式，可以选择性显示内容。

　　ent制作。

栏目内容分栏，左侧主要是文字为主，右侧以图片为主。

栏目标题采用图标加文字，图标如果不想自己画可以去图标网站上搜索，最好保持一致。

左侧的小图标是大小合适的绿色矩形。

文章列表每行用1px虚线间隔，直线工具中把实线改成虚线即可。(文章内容可以先用相同文字占位，找到合适的内容后修改)

可以画几条相同虚线，命名xx01、xx02、xx03等，确定最上和最下的虚线位置，采用分布，使虚线等间距。

文字、图标利用相同方式快速排列。

也可采用化院网站的滑动门形式，整合多栏目信息

　　footer

添加版权信息、作者信息、功能入口等

footer区域用了一种深一点的灰，在其顶部隔1px增加一条深灰色的线，让其更有质感

完成这些之后就基本大功告成了，此时检查是否有些必要功能漏掉，比如搜索框，然后加进去;再看看有哪些细节需要完善，将之完善;最后若画布高度有剩余，修改画布大小或使用左侧面板中的裁剪工具(如图22)，以便最后输出。

　　5. 输出效果图

设计完成后，需要输出效果图。直接点击“储存”，保存的是PSD文件，这是Photoshop的项目文件，日后还能打开修改。若输出效果图，点击“导出>>输出为web所用格式(旧版)”，设置输出格式为jpg，品质为80，如图23-24。或者选择“储存为”/“导出”-“导出为”-选择jpg保存亦可。