基于Web标准的企业网站首页设计与实现

软件开发

基于Web标准的企业网站首页设计与实现

作者/傳翠玉，海南软件职业技术学院

摘要：在网站设计时，建设一个符合标准又易于维护的网站一直是网页设计的目标，Web标准的各项技术能帮助设计师分离网页结构与外观，使网站的访问及维护更加容易。本文基于企业网建设来探讨Web标准在网页设计中的应用。

关键词：网页设计；Web标准

1. Web标准的定义

Web标准不是指一种单一的标准规范，而是由W3C和 ECMA制定的_系列的技术标准规范的集合，目前主要包括 XHTML XML、CSS、DOM和 ECMA JavaScript等。其目的是在于为Web表现层创建_个统_的技术标准，以一种智能、便于实现的方式解决不同浏览器之间的兼容问题。

在Web标准里，网页主要由结构、表现和行为3部分组成。对应标准也分为3部分：结构化标准语言主要包括HTML、XHTML和XML；表现标准语言主要包括CSS；行为标准语言主要包括对象模型（如W3C、DOM)、ECMAScript等。

共轭亚油酸

2. 使用Web标准设计网页的优势

采用Web标准设计网站，因为页面结构清晰良好使得浏览器的搜索引擎能够迅速判断和评估信息建立精确的索弓丨，使其对浏览器引擎具有良好透明性，更容易被引擎搜索到，提高网站访问量。通过对样式表的重用，整个网站页面的代码量更少，降低了服务器宽带成本，使网页的下载速度更快。此外，Web标准的应用使得网站的维护、改版更方便。因此，建立符合Web标准的企业网站，提高了网站易用性、访问量，降低了宽带和维护成本，对于企业而言是十分必要的。

对于网站访问者而言，使用Web标准使得网页的下载与页面显示速度更快；内容表现的多样性能被更多的用户接受；用户可以通过样式表选择定制自己喜欢的表现界面，具有良好的用户体验；能被更广泛的终端设备所访问，从而实现了网站跨平台的可用性，为用户提供了多元化的访问方式。

3. 使用Web标准下网页开发流程

结合律(1)语义结构定义。根据企业网站设计需求和网页设计图，分析所需要的d iv块，使用XHTML中结构语义化的标签建立网页结构文档，在这一步设计中要考虑布局结构合理。

⑵网页内容添加。网页内容包括图片、文字、多媒体、表单、表格等元素，根据网页设计图把相应的元素添加在已经定义好的XHTML结构中。

(3)表现设计。对添加了内容的XHTML结构，使用CSS样式表为文档进行包括字体、段落、边框、边距、颜等样式的美化，实现页面布局的合理性和网页的美观性。

(4)网页调整与测试。对已经完成的网页时行调整测试、包括图文等网页元素能否正常显示，网页能否被不同浏览器兼容显示。

4.企此网首页设计与实现

■ 4.1结构布局

根据企业网站需求分析和首页设计效果图（如图1所示），设计网站布局结构草图（如下图2所示），整体页面被划分为6个div块，分别是top(logo、top_link)、menu、banner、main(left、r ig h t)、activity 和 footer，最外面包含一^N dox块。

图l首页设计效果图

建构建企业网站首页面的整体布局结构，代码如下:

核磁共振成像<body>

<divid=”box”>

<divid=”top”>

40|电子制作2017年7

月

软件开发

<divid=”logo”></div>

<divid=”top_link”></div>

</div>

</div id=" banner”></div>

<divid=”left”></div>

<divid=”right”></div>

</div>

官能度

<divid=”activity”></div>

<divid=" footer”></div>

</div>

</body>

■ 4.2内容添加

根据网站设计需求，在相应的d iv区块中添加图片、文本、表单、列表等内容。选择合适的标签添加内容时，要依照XHTML标准，对代码进行规范，例如用小写字母书写所有的标签，为图片添加alt属性，给所有属性值加引号，关闭所有标签等。

■ 4.3样式设置

结构与表现分离是Web标准的核心，也是检验一个网站是否符合Web标准的首要条件。Web标准不仅仅是 HTML向XHTML的转换，更重要的是html结构清晰、内容与表现相分离，而DIV+CSS技术能较好的实现这种思想。

networkntr

在本网站设计中，CSS样式表以独立文件的形式用<link>#签引入html结构文档。实现样式与结构分离，同时有利于代码得到重用和优化。

为了消除不同浏览器对margin,padding这些属性的默认表现，设计者更容易控制诸如对齐、间隙、边框等问题，我们先将页面中所有元素的margin、padding、border设置为Opx。同时把页面中的字体统一格式。

* {margin:Opx;padding:Opx;border:Opx;}

#box{width:100%; font-family:“ 宋体”；font-size: 12px;color:#474747; text-align:center;argin-top:34px;} #top,#menu,#banner,#main,# activity,#footer{ margin:Opxauto;}

下面分别设置整体布局中六个div块的布局样式，其中 #m ain的div块分为#right左右两个块，在布局排版中，应用浮动(float)来组织页面元素是C SS网页布局的重要手段，但并不总是希望内容过于“流动”在某些时候需要特意避免这样的行为，可以通过在要清除浮动元素的块前

设置一个空的div标签，再设置该空标签的clear属性来清

除浮动元素。

# to p{w id t h:1000px;h e ig h t:41px;marg i nbottom:20px;}

#menu{width:1000px;height:97px;}

#main{width:1000px;height:auto;text-align:left;}

#left{width:227px;height:376px;float:left;}

#right{width:730px;height:376px;float:left;padding-left:40px;}

#clear{clear:both;/* 清除浮动 */}

#activity{width:1000px;height:280px;}

#footer{width:lOOOpx;height:20px;}

以上是企业网首页整体布局块样式设计，这只是整个

首页效果实现的布局部分，还需要通过对网页中的元素进行

样式设计，每个细节的代码实现在这不再__详述。

■ 4.4调整与测试

最后需要对企业网站页面的整体调整、代码优化、Web

标准测试以及浏览器兼容测试等。主要分下面三个步骤：

(1)页面调整。对页面作_些细节上的调整、比较颜搭配、字体大小、字符间距、各块之间留白边距是否协调，

以及代码的优化等。

(2) HTML结构验证。利用火狐浏览器或W3C提供

的验证网站对页面中的HTML和CSS代码进行测试对提

出的错误和警告要修改，验证所完成的网站是否符合Web

标准。

(3)浏览器兼容测试。浏览器是Web系统中最核心的组成构件，不同浏览器或同一浏览器的不同版本对HTML

和CSS的支持与解析不同，对脚本的执行不_致，所以需

片基要在不同的浏览器中打开网页进行测试，主要是测试页面显

示和功能问题。

5.结束语

Web标准是当前国际上所推广的基本网站标准，应用 Web标准的网页设计开发实现了网页结构与表现分离，使

代码设计更加规范、提升代码重用性，减少企业开发和维护

的成本，同时加快网站访问速度，提升搜索引擎和用户体验

良好度。

参考文献

*⑴刘秀芹.基于Web标准的企业网站网页设计与实现电脑知识与技术 Vo丨9,No9,March2013.

www.elel69 | 41

本文发布于:2024-09-23 17:11:54，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/133636.html

上一篇：基于Web标准的企业网站网页设计与实现

下一篇：网站建设服务合同书标准简洁版

标签：网站网页标准设计结构

留言与评论（共有 0 条评论）