浅谈HTML与网页制作

摘要：HTML是构成网页的最主要的基本的脚本代码，其具有制作简单，功能强大，支持不同数据格式的文件嵌入的特点。近年来俨然人们与网站的交互变得越来越多。因此，网页在制作的过程中就不仅只是需要考虑到实现功能这个简单的事实了，涉及到各种各样的领域。通过多个领域的结合与扎实的编程基础方能制作出完美的网页。

关键词：HTML；关系；网页制作

中图分类号：TP393 文献标识码：A 文章编号：1007-9599 （2012） 20-0000-02

1 引言

进入二十一世纪，互联网的普及使得人们的网络生活变得越来越丰富多彩，而网页也成为了人们沟通与交流的另一种渠道。经过两年来的初步的学习和在一些简单项目中的实战，对于网页的制作有了一些初步的了解与认知。

2 HTML与网页制作的关系

HTML是构成网页的基本语言，由它构成了最基本的静态网页，即它只是将网站的最终效果呈现出来，但是不能够实现动态的交互功能。它将后来的整个构造框架大致搭建了出来，后续一切动态效果，数据的更新都是在此基础之上来不断实现与完善。

社会的需求显然也不仅局限于是静态的而已；信息的快速更新，内容的形式多种多样化，用户的感官上感受等等已经让传统的静态页面不能够满足需求。它能够支持不同的语言文件的嵌入成为了它的另一个优点，在HTML中嵌入Flash、JavaScript、多媒体等丰富了页面内容，使其可用性不断增强。

当今，网页的制作是不采用原始的全部用HTML语言来编写整个页面，而是采用当今比价流行的CSS样式与DIV的结合来完成整个网站的外观制作。这就意味着在传统的HTML的许多属性不会在使用甚至已经废除某些属性。这种称之为盒子模型的做法使得内容与效果基本上完全分开制作，彼此相交之处变得尤为不多。

3 网页的制作

新推出的HTML5版本的确功能更加强大，但现在大部分网页制作者还是采用HTML4.01版本，加之这两者的基本元素区别不大，所以一般还是用这个标准来进行网页制作。

如何做出一个完美的网页，这是在实现过程中的一个核心问题。首先是要考虑网页的外观设计，其次是后期代码的是实现。

3.1 前期设计的主要因素。第一个要素—外观，首先必须清楚明白用户不是技术人员，所以在技术上的炫耀对于这一类人群来说大可不必，他们的重点是最终能够实实在在看到的效果，而不是看你的技术是多么强悍。显而易知，感官体验成为他们评判网页的好坏的主要标准。即这个页面是否足够漂亮，特效是否很新颖，足够新奇。作为主要消费者来说，我们的一切设计原则必须以他们的使用体验为基准。而实际情况是从一个专业人士的眼光来看这显然和制作者本身的感受是背道而驰。所以设计时需要不断调查市场用户需求，从人的视听元素方面来考虑。即文字，背景，按钮，图标，颜色，导航条，影像等方面。现在最常用的则是在网页中插入JavaScript来获得不同特效的效果和实现更好的人机交互界面。在外观上需要考虑的另一个方面就版式的设计，它与其他广告海报之类的是一个原理，需要合理的布局来考虑视觉上的效果，同时又有效的将网页需要表现的内容呈现出来（一个网页在用户眼中最多停留几秒钟，需要考虑如何将最有用的信息在第一时间传递给用户，来吸引他们的眼球）。第二个要考虑的因素就是设计这个网站的主题思想。主题鲜明更容易吸引客户，这就需要从客户的心理方面来考虑在不同类型主题面前，客户更想看到什么样的风格，同时能够言简意赅的向客户传达出网站的思想。而形式与内容同一页是必不可少的，只有这两者互相弥补与融合才能达到最终的效果。第三个因素则是要合理布局，能够使设计的网站在尽快的时间内显示出它应有的一切，而不是让一个客户进行长时间的等待。这会让客户从心理产生反感的情绪。最后巧用多媒体来丰富网页内容，使其看起来更加多元化，实现更好人机交互，让用户觉得更加舒适与有趣。

3.2 后期制作需考虑的方面。后期网页的设计也是一个不可或缺的一部，正如一张房屋的图纸设计，抛开其他因素，如果永远只能够呈现在纸上，不能够存在于现实之中。那等同于一张废纸，一无是处。

后期的网页制作需要一些编程基础和对于基础HTML语言的了解以及掌握。

首先是是要将网页的效果图和设计素材准备好。其次按照效果图用HTML实现页面布局，然后将素材放进网页中，并添加链接或别的功能，最后边做边预览效果，即时修改（在各个浏览器中不断测试）。这就是制作一个网页的大致流程。

众所周知，在当今这个时代，由于商业的原因，出现了各种不同的浏览器，而html中标签效果在各个不同的浏览器中的预览效果中是迥异的，作为前台人员在编写过程中，标签与属性的使用就的使大部分能够呈现一样的效果。

从现在来看大部分网页设计是使用Div与CSS相结合的样式来实现一个网页，不使用其他方案，主要是由于这个样式来更加简单合理，其次，当网页被使用是，如果用其他标签来写或许会造成在浏览的时候部分元素而显示不出的结果，同时它被搜索到的概率会降低。

如果借用盒子模型来编写时，虽然方便，但是有利也有弊，其主要原因是DIV是层，容易浮动，所以在编写好后预览时让人最头疼的会是错位很严重。

另一个就是使用外部CSS很简洁，方便。但是在实际过程中随着代码量的增加，它里面有些元素会继承父类的，一般很难检查到；例如：

ul{

font-size：18px；}

.ly1{

color：#666666；} 这是最外层的文本 这是第一层的文本 这是第二层的文本

这里的每一个列表都会继承上一层的属性，即使定义单独样式，也会毫无明显效果。解决这类问题的方法是，重新定义相关属性来覆盖继承值或默认值。同时，要有清晰的嵌套结构和合理的命名，便于问题的发现和解决。

网页内容需要随时更新，所以外部CSS的使用使其变得很高效，在引用外部css的时候有个小技巧就是在href元素后面加一个“？V=5536”类似的标志，这样确保在浏览器运行时自动识别并获取新的页面[5]。例如：

在HTML源代码中需要言简意赅的命名各个id或者class的名字，以便在后期的修改过程中能够快速的查找出来以及进行修改；每一处的地方写好注释。

4 小结

当今HTML的最新版本已经是HTML5，它已经包含很多的新特性，打破了传统的HTML做法，它的内容更加丰富，不必在依赖其他的插件。使其变得更加的灵活、高效。所以可以看出网页制作在未来的发展前景是不可估量的。而网页制作中会不断出现新的创意，提升到另一个平台。但在这之前都需要我们不断的在实践中总结经验，只有踩在这些基石上才能够更上一个阶梯。

参考文献：

[1]龙马工作室.新编HTML网页设计[M].北京：人民邮电出版社，2008.

[2]陈俊荣.网页程序设计——HTML、JavaScript、CSS、XHTML、Ajax[M].北京：清华出版社，2008.

[3]张鸣.关于网页设计与制作方法的探讨[J].长春大学学报，2003，13（4）：9-10.