页面设计概论及其规范分析范文

一、网站的前台设计

（1）网站的风格及首页设计。首页设计应遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则,是全站内容的目录和索引。网站的整体风格是对网站整体形象的综合描述。包括版面布局、浏览方式、交互性、文字、语言、内容价值、存在意义等。首页的美化首先要考虑风格（设计装饰、组织性、功能性及可视性等）的定位。任何首页都要根据主题的内容决定其风格与形式,因为只有形式与内容的完美统一,才能达到理想的宣传效果。

（2）网站的内容和功能设计。根据网站类型的不同,决定网站的内容和功能。例如财务报告,收集客户反馈信息,其他针对企业经营特点的内容。对于不同性质的行业,应体现出不同的网站风格。

（3）页面色彩和可视化设计。根据和谐、均衡和重点突出原则即“总体协调,局部对比”的页面组织效果,进行合理搭配。运用对比与调和,对称与平衡,节奏与韵律以及留白手段,在页面中建立均衡,结合点线面的运用达到完美效果。页面色调效果:合理组合搭配,注意不同读者对颜色的喜恶差异习惯。页面版式设计:注重版面布局的视觉效果。页面美术设计:注意与其他媒体的区别和浏览器可识别的图像格式问题。

（4）页面的版面布局。根据内容的需要,将这些图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体,展现给广大的观众,通过文字图像的空间组合达到协调状态。经过草图制作,完成粗略布局,最后定案。版面布局形式:“T”性布局,“口”型布局,“三”型布局,对称布局,海报型的“POP”布局。布局设计原则:“均称”有序,平衡和谐,利用色彩、色调加强效果,注意凝视效果,注意空白的利用,对语言无法表达的是用图片解说的方法,做到主次分明,大小搭配,图文并茂的设计效果。

（5）栏目和版块设计。栏目的设计是搜索网站的大纲索引,要明确表明网站的主题,方便于浏览查询。需要设立板块,就要考虑版块的独立性,关联性,内容要围绕主题。栏目安排要紧扣主题,可设立“最近更新”的指南栏目,也可设立双向交流的栏目,设立一个下载或常见问题回答栏目。也可再设计一些其它的功能:例如搜索引擎,邮件功能等。

二、网页设计制作规范

2.1整体设计规范

（1）在网站根目录中不仅要开设imagescommontemp三个子目录,根据需要再开设media子目录和help目录,help目录存放说明文件。images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner条、菜单、按钮等等;common子目录中放css、js,、php、include等公共文件;temp子目录放客户提供的各种文字图片等等原始资料;media子目录中放flash,avi,quicktime等多媒体文件。

（2）在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images和me-dia的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。

（3）temp目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。

（4）除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称。经验证明,用拼音命名的目录往往连一个月后的自己都看不懂。

2.2脚本代码编写规范脚本代码编写整体风格要一致,不同的时间段写的脚本风格要保持一致,以及同一个工作组中不同的开发人员编写的脚本风格保持一致。

（1）Html文件的通用模板;其他meta标记;样式表定义;客户端Javascript函数定义及初始化操作为了保证网站能够与下一代的web语言xml标准兼容,所有的HTML标签的属性都要用单引号或者双引号括起。允许全文检索的页面,为了使Internet上的搜索引擎能够有效检索,在频道的首页的html的之间应该加入Keywords和Description元标记。

（2）CSS文件的格式样例代码,我们规定重定义的最先,伪类其次,自定义最后,便于自己和他人阅读。为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px的字号比较合适。在写互相嵌套时,严格按照的规范,对于单独的一个来说,对齐,缩进两个半角空格,中如果还有嵌套的表格,也缩进两个半角空格,如果中没有任何嵌套的表格,结束标记应该与处于同一行,不要换行。

（3）Width和height的写法也有统一的规范,一般情况下只有一列的表格,width写在的标签内,只有一行的表格,height写在的标签内,多行多列的表格,width和height写在第一行或者第一列的标签内。遵循原则:不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的,也就是你改动代码中任何一个width和height的数值,都应该在浏览器中看到变化。

2.3表格排版规范

（1）在排布表格之前,确定最佳方案。表格的嵌套尽量控制在三层以内,并且应该尽量避免两个标记,表格尽量用绝对像素,以免浏览器分辨率不同时表格产生变形。一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内。

（2）排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果。规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上标记,注意,一般情况下,请不要省略结束标记。

（3）原则上我们禁止用来人为干预图片显示的尺寸,而且建议标签中不要带上width和height两个属性。当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给附上width和height属性。

（4）在一段完整的文字中请尽量不要使用来人工干预分段,最大程度的发挥浏览器自动排版的功能。不同语种的文字之间应该有一个半角空格,但符号之前和符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号,所有的字号都应该用样式表来实现,禁止在页面中出现标记。

（5）请不要在网页中连续出现多于一个的也尽量少使用全角空格,英文字符集下,全角空格会变成乱码,空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。中英文混排时,我们尽可能的将英文和数字定义为verdana和arial两种字体。行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%。

（6）网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,嵌入图形文本的使用较大的字体,建议不要在图形中包括文本。“网页大小”定义为网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象。对于解调器用户,网页大小保持在34K以下为合适。

2.4文件命名规范

（1）每一个目录中应该包含一个缺省的html文件,文件名统一用index.htm。文件名称统一用小写的英文字母、数字和下划线的组合。命名原则:一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义;二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。

（2）图片的命名原则遵循规范。名称分为头尾两两部分,用下划线隔开。头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等。一般来说,放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner标志性的图片我们取名为:logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu装饰用的照片我们取名:pic不带链接表示标题的图片我们取名:title依照此原则类推。尾部分用来表示图片的具体含义。

三、结束语

《网页设计与制作》是目前中等职业学校计算机应用领域人才培养的一门核心课程。主要是在教学活动中通过对前台设计与制作规范的要求,提高了学生的学习能力,进行创新设计能力的培养。只有充分培养与发挥学生的主动性与创新性,才能真正提高培养社会急需的网页设计的应用型人才。

友情提示：写论文不难，难的是选好一个适合的期刊。你可以在本站了解一下评职的具体要求哦，可以参考一下哦!