试论网页设计的基本规范和常用技巧

2017-12-28孙小英黄冈职业技术学院

数码世界 2017年11期

孙小英黄冈职业技术学院

试论网页设计的基本规范和常用技巧

孙小英黄冈职业技术学院

网络技术的迅速发展，带动了诸多产业的进步，网页的科学设计对信息的有效传播有着积极作用，在进行网页设计的时候就要充分重视技巧的运用，并要遵循相应的规范，如此才能提高网页设计的质量。本文主要就网页设计的基本规范以及常用技巧进行详细分析，希望能借助此次的理论研究，有助于实际网页设计工作的顺利开展。

网页设计规范设计技巧

网络时代的到来人们对网络信息的浏览量也大大增加，网页设计是平面设计和信息技术的结合，通过网页的科学设计能带给浏览者良好的印象，能促进信息浏览的效率。在实际的网页设计中涉及到的内容比较多，这就需要对每个设计环节的细节质量控制加强重视，保障网页设计的科学。

1 网页设计的基本规范和注意事项

1.1 网页设计的基本规范

网页设计的内容比较多，对每个设计内容都要保持规范。对于网页的基本属性设计过程中就要按照规范进行设计。网页设计总宽度无固定局限，可参考常规尺寸。在当前的网络技术的迅速发展下，传统网页宽度已不再适应当前人们对页面的要求，当前比较普遍的是采用1024×768，在进行网页的宽度设计中，就要按照这一尺寸或者是更大的尺寸进行设计，当前常用网页宽度为960像素。

网页的设计中对于基本模块的设计也要按照相应的规范进行设计。如对于标准导航和搜索区的规范设计，就要强调文字链接部分，导航文字链接内容在背景区要垂直居中，文字链接内容上下部能适当的留有相应空白，这样从整体的视觉效果上看就比较的标准。网页导航设计中就要考虑服务器贷款成本以及用户体验，可使用文字链接进行制作导航。门户站点页面搜索区分成选项框以及文本输入框和搜索按钮，在将其放置一起的时候就要将间隙相等设计，通常设置6像素。而对于标准底部的规范设计，主要是注明版权和附加内容的，要对页面平衡感进行检查，底部文字上下部进行留白。内容区的规范设计中，就通常包含栏目标题以及文字内容和模块框，四边要将留白相等设计。在文字的规范设计过程中，就要将页面的字体以及颜色等和实际网页的内容相结合选择。再有就是对图片属性规范设计方面，注意图片的形式和大小，不同的图片形式在比例上是不同的，对于焦点图尺寸可自定义。

对于网页的版块布局设计过程中，也要遵循相应的规范，主要的网页布局有三个版块，也就是顶部版块和内容版块以及底部版块。对于网页版块间隙的设计也是有着严格标准的，例如在MSN中所使用的横向间隙是10像素，纵向间隙8像素。要注重统一化，将间隙的像素能保持一致，这样才能保证网页的页面更加的规范。进行顶部和底部间隙的设计方面。就要比内容版块间间隙大，从而能从整体上显示出明晰化。例如在网页总宽度是936像素的，在内容区域就要是930像素，能够留有相应的像素留白，这一留白的运用就要得以重视，尤其网页左右侧距离屏幕显示边缘要留有距离，保持整体的页面规整。

1.2 网页设计的注意事项

网页设计过程中要注意几个重要的事项，对网页导航设计务必要保证清晰，将超链接清晰的标识出。如导航性质设置以及图像按钮等，都要保证其清晰，让浏览者能一目了然。对于连接文本颜色的选择按照约定俗成的色彩进行设计，没有访问的显示蓝色，点击过的选紫色或是栗色。要想对网站导航的设计进行优化，就要将字体以及字号进行优化设计，只有保证文本链接和页面的其他文字进行明显区分。另外，对于网页的页面大小设计要遵循相应的原则，对网页浏览的速度要能保证，注重对网页文件大小的合理控制。首页不能超过35K内容页不超过50K。对于特殊的网页设计的时候，就要提示下载时间方便浏览者取舍。根据相关的研究发现，网页的主体在十五秒内不能显示就会影响读者对网站的兴趣度。

网页设计中的色彩处理环节要加强重视，注重遵循相应的原则。色彩对人的心理会产生影响，也是人的视觉比较敏感的要素，色彩处理不好就会影响浏览者的心情。在进行色彩设计方面就要按照总体协调和局部对比的原则设计，小范围地方可通过色彩强烈对比。对于色彩的运用就要能结合实际网页的内容来选择应用，采用不同的色调。色彩有着象征性，也有着民族性，由于环境和文化等因素的不同，人们对色彩的喜好也有着不同。要充分了解色彩的特性，结合网页的主题进行选择，就能提高网页的文化品位。对于网页的底色的运用就要注重高调和低调的应用，底色通常比较深，文字颜色要浅，这样能够有明度变化。

网页设计的时候要注意将风格进行准确定位和保证风格的统一。明确网页设计的目的，按照目的进行设计。任何网页的设计都有着自己的风格，这就需要在风格定位方面加以重视。将风格进行统一，网页上的图像以及文字和动画等，都要能统一风格，这样才能带给人舒适顺畅的浏览感觉。如网页每个页面的文字颜色不同，或是部分网页图片使用超链接，另一部分网页图片不用超链接，这样就比较容易出现阅读障碍的问题，所以在风格上要进行统一化。

2 网页设计的常用技巧

网页的设计过程中有诸多的小技巧可以运用，这是提高网页设计质量的重要方法。对于优秀网页设计人员来说，能够选择正确的格式进行优化网页的图片，保障图片的清晰度，并且下载的体积比较小，这样就能方便用户的浏览。在网页设计中运用到图片的时候，就要充分重视，对于单色的图片就可将其保存成PNG或者是GIF的格式。对于图片是连续性色调，就要将其保存或转化为JPG的格式，这样就能方便用户浏览，并且在体积上比较小。

网页的设计中提高设计的质量就要从各种小细节着手，优秀网页设计人员设计的网页整体上是比较规整的，看上去也能给人赏心悦目的感觉，对用户的体验比较重视。也就是要保证网页的设计可用性强的特征体现，避免用户在浏览网页的时候出现混淆以及复杂的现象。如果设计中使用过多网站功能以及组件，在进行浏览的时候就比较分散用户的注意力，很难达到聚焦目光的效果。在具体的网页设计的时候，要和用户浏览习惯相结合。对于设计比较特殊的网页，就要避免出现模糊难懂的情况出现，网页的设计还是要以简洁为主。

网页的设计过程中时间特效技巧的应用比较重要，这是比较常用的技巧，动态时间显示以及倒计时等，可采用常用的脚本程序//将此代码放入出现动态时间的地方即可，lt;font size=”2”id=”Dtime” color=”#009900”gt;lt;/fontgt;

lt;scriptgt;setInterval(“Dtime．innerHTML=new Date()．toLocaleString()+’ 星期 ‘+’ 日一二三四五六 ‘．charAt(new Date()．getDay());”,1000);

lt;/scriptgt;这样就能完成时间的特效，增加网页的功能。

为了能够增加网页的吸引力，就要添加一些技巧，可采用变换图像的导航条，导航条栏目通过图片进行制作的，在鼠标滑过相应栏目就会变成另一栏目图片，可通过编辑客户端脚本完成。或者是运用网页设计的工具Dreamweaver MX中导航条命令，通常一个栏目需要设置四张图片，图片数量少可选择鼠标经过的图片来进行命令实现变换图像，这一命令要两张图像。

对于文件和文件夹的命名方面，文件夹命名通常是使用英文，长度在二十字符内，使用小写字母命名。常见的文件夹命名有,uscrfilcs,temp，style,scripts等。文件夹使用按名称排列命令的时候，同一大类文件排列一起。