029-88226191
13991117807
新闻中心

NEW CENTER

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

 二维码 36
发表时间:2019-09-06 17:08

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

  一、需求分析

  (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。


西安网站建设微信公众号


信之上微信公众号

西安信之上信息技术有限公司

Xi 'an Xinzhishang   information technology co., LTD


服务热线(Telephone):029-88226191          咨询热线(Mobile Phone):13991117807

客服邮箱(E-mail):xianxzs@163.com              客服Q Q(Service QQ):31388282   

公司地址(Address):西安市太白北路泰华金汇时代1单元A座

西安网站建设


服务微信-马上咨询