西安网站建设础教程分享——学术类网站建设详细步骤！

　　西安网站建设础教程分享!

　　一、需求分析

　　(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_版本_日期”。

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

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

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

　　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是关于图层的艺术，在设计过程中部分素材来之不易，一定要避免对素材进行如裁剪、变形等等“暴力”操作，否则当发现效果不理想时后悔为时已晚。

　　再在slider添加展示性文字

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

　　· content

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

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

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

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

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

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

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

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

　　6.content制作。

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

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

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

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

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

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

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

　　footer

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

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

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

　　5. 输出效果图

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

　　六、FAQ

　　1. kuler怎么使用?

　　对于初学者，不建议自己创建配色。建议点击导航条中的“探索”，再在搜索框中根据自己的需求搜索配色。如输入“blue”搜索(注意关键词为英语)，可得到一系列蓝色的配色，选择自己合适的一系列配色，点击下载。(下载是需要登陆Adobe ID的)

　　下载完成后，在PS中的色板中点击右上角的小图标，弹出菜单，选择“载入色板”。

　　选择刚刚下载保存的文件，点击“载入”，颜色即可载入到ps的色板中。

　　2. ps里面如何画出固定大小的矩形?画好矩形之后如何查看各个矩形大小?

　　选择矩形工具，在画布上右击，此时会出现一个对话框，输入你想要的矩形的长宽大小，即可得到准确的矩形。

　　至于查看矩形大小，可点击“窗口>>信息”，打开信息面板，选择想要查看的矩形，按一下“ctrl+t”，即可看到矩形的大小。(信息面板可查看矩形的色彩信息、位置信息及大小信息)

　　3. 画矩形框时出现的单位为厘米，而不是像素，怎么办?

　　Ctrl+R打开ps中的标尺，在标尺上右击，会出现一个菜单，在菜单中选择“像素”，即可把ps中的单位改为像素。

　　4. banner和nav的背景纹理怎么增加?

　　将所给素材中名为"纹理"的图片在ps中单独打开，点击“编辑>>定义图案”，给新图案命名，确定。此时我们的新纹理就进入了ps的图案面板了。

　　然后回到我们的网页文档，右击banner的背景图层，即右击“banner bg”图层，弹出菜单中选择“混合选项”，打开图层混合选项对话框。勾选右边栏中的“图案叠加”，在切换到图案叠加的详细选项，点击下拉图案处。

　　在下拉图案的最下方，找到刚刚定义的图案，选择，面板中的其他选项如图设置，然后点击确定。纹理添加完成。)

　　5. ps里面如何画虚线?

　　使用PS CS6 及以上版本时：使用直线工具，画出直线，在菜单栏下方的属性栏修改直线的属性。设置填充为无，自定描边颜色，描边大小为1。描边右方下拉框，选择描边形式为虚线。即可得到1px的虚线。

　　使用PS CS5及以下版本时：使用铅笔工具，点击画笔预设按钮

　　弹出画笔预设面板，调整画笔的各个参数，最重要的是把画笔间距调成300%。

　　新建图层，在其上按着shift键，同时画出直线。按shift键是为了保证所画线条是直线。虚线完成。

　　对比以上两种方法，**种方法更佳，因为**种方法画出的虚线是矢量，后期可随时修改颜色和大小，而第二种方法所画虚线不是矢量，后期不可修改。所以建议使用**种方法，第二种方法仅提供给没有安装CS6以上版本的同学，还是强烈建议升级软件。

　　6. 设计时，各部分的字体样式是怎样的?

　　导航：微软雅黑/宋体，16px-18px。

　　标题：微软雅黑/宋体，16px。

　　正文/文章列表：宋体，14px，#000，行间距21px。