原创《基于Web标准的网站前台设计》：该文是关于前台论文范文，为你的论文写作提供相关论文资料参考。
摘 要：随着社会和网络技术的发展,对网站前台的设计与制作也越来越多.文章论述了符合网站前台制作的Web标准,并从Web标准出发,通过HTML代码实现网站前台的内容和结构,通过CSS代码实现相关内容的样式,通过JaScript代码实现页面的动态效果,以一个真实案例说明了对网站前台的制作实现过程,体现了Web标准的优势.
关键词：网站前台；Web标准；HTML；CSS
中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2018）03-0191-02
Abstract：With the development of society and Network, the design and implementation of the front end website is increasing. The paper discusses the Web standard met the design and implementation of the front end website. Proceed from the Web standard,the content and structure of the front end website are realized by means of HTML code； the style of the interrelated content is realized by means of CSS code； the dynamic effect is realized by means of JaScript code. The implementation process of the front end website is explained using a true case. The advantage on Web standard is showed.
Key words：front end website； Web standard； HTML； CSS
1 概述
而网站前台是指展现给访问者的所有页面,是面向网站访问用户而言,通俗的说也就是给访问网站的人看的内容和页面,用户可以通过对网站前台的访问来浏览公开发布的内容,如企业或公司概况介绍、新闻信息、产品信息、企业、提交留言等内容.近年来,随着社会和网络的发展,网站前台制作的需求越来越大,所以网站前台的实现问题也越来越重要.
对于简单的网站前台的制作,网页部分的内容实现可以通过Dreamweer软件的可视化视图方式来实现,但是这种实现方式存在着很多问题,比如在预览网页时网页元素会出现错位、不能灵活地控制网页元素的样式等方面的问题等.
2 Web标准
随着科技的发展,在越来越开放的环境中,各个相互关联的事物要能够协同工作,就必须遵守一些共同的标准来工作.“Web标准”也是互联网领域中的标准,但它并不是一个标准,而是一系列标准的集合.而网页的相关技术走入实用阶段仅短短十几年的时间,就发生了很多重要的变化,其中最重要的一点是“Web标准”这一理念被广泛地接受.
网页的构成主要由三部分：结构（Structure）、表现（Presentation）和行为（Behior）.对应的标准也分三方面：结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括JaScript等.在这三部分中,决定了XHTML和XML来实现网页的结构和内容,CSS实现网页的表现样式,JaScript来控制网页的行为.而且这三部分被明确后,产生了一个重要的思想,那就是三者的分离,这样会对网页的制作带来很大好处.比如在确定网页内容的情况下,如果只想改变内容的表现形式,那就无需改变HTML代码,只需改变CSS代码即可,这样可以随时在不改变HTML结构的情况下来修改网页的样式.所以在网站前台的实现过程中,借助相关的软件平台,遵循Web标准来书写（X）HTML和CSS代码实现页面的内容和样式,是一种好的选择.
3 整体设计思路
在进行网站前台的制作之前,首先要了解客户需求,明确客户做网站的目的,及客户的业务方向,根据客户的要求及其要实现的功能等,确定界面的色调与布局等.其次,根据这些需求,设计网站的首页,用Photoshop先设计大致的首页界面.制作出首页的页面图后,跟客户进行第二次沟通,征求客户对页面效果图的意见,并按沟通结果进行修改,直到客户满意为止.第三,在客户对首页设计效果图满意的情况下,开始切片,完成对图片的整理.第四,按照Web标准,书写代码,包括使用（X）HTML、DIV+CSS、JaScript等完成前台界面的内容结构及其样式.实现子页时,也要跟客户做简单沟通,如果没有特别要求,要跟首页的风格一致.第五,在需要加入特效的位置加入特效,并测试浏览器的兼容性.
4 页面的制作与实现
正如以上所讲,在网站前台的制作过程中,基本上需要五个主要步骤,其中最重要的部分是第四和第五部分的制作实现.下面以一个具体的真实案例——天津吉尔祥钢铁销售网站,来说明网站前台的代码制作实现过程.
1） 准备工作
首先根据客户要求设计并制作出页面效果图,并将所用到的图片和Flash动画等素材准备好,放入相应的文件夹中.然后使用Notepad、VS、TopStyle等软件工具,书写（X）HTML、DIV+CSS、JaScript等代码实现页面效果.
2） 页头内容的代码实现
在该钢铁销售公司的网站中,页头的内容包括了公司的Logo、Banner、导航条以及Flash动画等.在实现页头内容的过程中,首先根据内容书写HTML代码,实现对基本内容的添加,其中的Logo及其“联系我们”部分代码如下图1所示.从图1中的代码可以看出,该部分内容的HTML代码部分主要是通过DIV盒子来实现的,在此基础上,再书写CSS样式表代码来实现对各个DIV内容的样式添加.
有关导航条部分是通过和代码实现的,并将其放在盒子中,如图2所示.
3） 页面中间部分内容的实现
在页面中间的内容部分,通过将内容分为两栏来实现,也就是所谓的布局模式中的1-2-1布局.页面布局模式图如图3所示.
其中图4中的主要内容部分,主要包括网站的各种钢管的现货资源,在侧边栏中主要包括对公司的简单介绍以及具体和地址等.这两栏也是通过书写标记将所要的内容写入,然后再通过添加CSS样式表来实现相应的样式.其中的HTML代码部分省略,现将CSS样式表的部分代码内容摘录如图5所示.产品展示部分是图片动态滚动效果,是通过JaScript代码实现的,该部分的代码省略.
4） 页脚内容的代码实现
页脚内容相对较少,实现起来也相对容易些.该页脚中的内容只包含两行文字,所以对该部分内容来说,HTML代码不是最重要的,重要的是CSS样式表的代码书写,其中的部分代碼如图5所示.
5） 页面的整体调整
在各个部分的内容和样式实现后,对整个页面代码进行调整和测试,使整个页面能在各个主流浏览器下都能正确显示,经过测试和代码的调整,该页面均能在火狐和IE浏览器中有相同的显示效果.
5 结论
从以上钢铁销售网站的实现过程可以看到,在书写代码实现网站时,由于遵从了Web标准,所以使网页内容结构和表现样式实现了分离.从而在不改变HTML结构和内容的前提下,能很容易地设计出多种不同的表现形式,并且可以随时修改样式,提高了网站制作的便利性,并有利于网站的后期维护.
总之,在网站前台的制作实现过程中,按照Web标准来书写代码可以充分体验结构和表现分离带来的好处.
参考文献：
[1] 温谦.CSS网页设计[M].北京：人民邮电出版社,2016：2-5.
[2] 未来科技.CSS+DIV网页样式布局从入门到精通[M].北京：水利水电出版社,2017：237.
[3] 陆凌牛.HTML 5与CSS 3权威指南[M]. 北京.机械工业出版社,2011：3-6.
前台论文参考资料：
结论：基于Web标准的网站前台设计为关于对写作前台论文范文与课题研究的大学硕士、相关本科毕业论文前台论文开题报告范文和相关文献综述及职称论文参考文献资料下载有帮助。
