基于HTML5技术企业网站设计.docx

?

?

基于HTML5技术企业网站设计

?

?

郑华君

摘要：主要围企业网站为开发主题，在页面的布局时使用了最基本也是最必须的三个技能：HTML将元素进行定义，CSS对展示的元素进行定位，再通JavaScript以及jQuery实现相应的效果和交互。在进行开发前，需要对这些概念弄清楚，这样在开发的过程中才会得心应手。

关键词：HTML5；网站；前端技术

中图分类号：TP311文献标识码：A文章编号：1007-9416（2017）04-0156-01

计算机技术日新月异，HTML已经经历了由HTML4向XHTML发展，到近几年来的由HTML4到HTML5的发展历程。HTML5因具有一些优异的新功能，得到越来越多开发人员的青睐。可以说，HTML5就是Web的未来，也是Web开发者的新希望，所以作为专业的网页制作等相关人员有必要了解HTML5，以便在Web技术的发展潮流中立于不败之地。

1初识HTML5

HTML（HypertextMarkupLanguage，超文本标记语言）是一种文本类、解释执行的标记语言，用于编写要通过WWW显示的超文本文件。HTML是用于设计网页的主要语言。网页中的文本、图像、表格、超链接等内容都是由HTML中的标签定义和组织的。HTML诞生于20世纪90年代，经历过HTML2.0，HTML4.0，之后推出修改版XHTML1.0，其中X代表扩展。之后推出XHTML1.1和XHTML2，2014年HTML5标准规范总要最终制定完成。

2HTML5的优势

2.1解决了跨浏览器问题

在HTML5之前，各种浏览器对HTML，JavaScript的支持都不统一，这样就造成了同一个网页在不同浏览器中的显示效果不一样，HTML5的目标是分析各种浏览器所具有的功能，并以此制定一个通用规范，要求各个浏览器都能支持这个通用标准。支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器）、Safari、Opera等；国内的浏览器（Maxthon），以及基于IE或Chormium所推出的360浏览器，搜狗浏览器，QQ浏览器，猎豹浏览器等同样支持HTML5。

2.2增强了web应用程序的功能

HTML5提供了前所未有的数据与应用接入开发接口，使外部应用可以直接与浏览器内部的数据直接连接，如视頻影音可直接与话筒及摄像头相连。

3基于HTML5的网页设计与实现

本文介绍一个企业网站的设计与制作，通过对本网站的制作，可以让读者对HTML5+CSS网站制作过程有所了解。

（1）网站规划：网站规划，即网站定位，主要是明确网站的类型。经过策划，我们确定将创建的网站是一个企业网站，主要用于宣传企业形象，企业文化和产品。并为企业提供与用户的在线交流。网站主要面对的用户是单位。（2）网站素材收集：根据上面的策划，在网站制作前，需要收集网站中需要用到的一些素材，如网站标志（logo）。Flash广告，公司简介，产品图片及信息等资料。（3）网页规划：网页规划包括网页版面布局和颜色规划。为了让尽可能多的浏览器能在一个窗口中完整的显示网页，本网站将网页宽度设定为800px，根据之前的网站规划，可确定网站包括的栏目主要有首页，公司简介，新闻中心，产品展示，合作伙伴，网上订购，人才招聘和联系我们。网页涉及的版块主要包括logo，导航条，flash广告，侧边栏，主内容区和页脚，页面的总体效果如下图所示通常在规划网页时，会将网站logo、导航条和flash广告作为页面的头部内容，这样整个网页的结构就分成四大板块，分别是头部，侧边栏，主体和页脚。使用DIV+CSS布局页面。接下来是颜色规划。颜色规划需要从两个方面考虑，一是网页内容，二是访问者。在网站规划之中已知道，网站面向的用户主要是一些单位，因而网站可以做到简洁、大方。为此，将网站的背景色调定位白色，前景主色调定为中灰色，对某些需强调或希望引起浏览者注意的地方则使用橙色，整个网页的眼神尽可能不超过三种。（4）网站目录设计：根据网站策划，该网站的目录可包括首页index.htm，保存网站公共图片的images目录，保存样式的CSS目录，保存脚本文件的JS目录，保存多媒体文件的media，以及针对导航栏目设置的一些目录。（5）网页制作：我们可以使用任何文本编辑工具制作网页，但为了提高网页的制作效率，建议大家使用Dreamweaver这个可视化的网站管理和制作工具，使用Dreamweaver工具时，首先使用它的“站点”菜单创建一个文本站点，然后在这个站点中把第四步设计好的目录一一创建好，最后就可以开始制作网页了。

4HTML5前端技术使用心得

HTML5前端开发是一个较新的职业，它是在web2.0的热潮下成熟起来的，要求开发者掌握较综合的技能，除了