电子商务网站设计与实现论文(php)

标记把网页区分成不同模块，包括header、content(其中有sidebar边栏区域和main主体区域)、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML文档代码：

设置CSS样式代码： #container{margin:0;width:90%;} #container{margin:0;width:90%;}

#header{height:200px;margin-top:20px;border:2px solid;} #content{height:500px;width:100%;margin-bottom:10px;} #sidebar{float:right;width:30%;height:500px;border:1px solid;} #main{float:left;width:70%;height:400px;border:2px solid;} #footer{height:60px;border:1px solid;}

其中，width属性设置为百分比形式，表示当窗口大小发生变化时，页面的宽度也随之变化。Container的margin属性为0 auto，表示上下边距为0像素，auto表示左右边距为自动，实现网页的居中显示。Sidebar的float属性为right，标识靠右对齐，main的float属性为left，表示靠左对齐，实现中间两列整栏的显示效果。Border属性为2px solid，表示2个像素宽的实线边框。

3.4 Div CSS排版对网站优化的影响

第一：spider爬行效率

第 11 页

内蒙古化工职业学院毕业设计（论文）用纸

Div CSS的代码精简是table无法比拟的，div CSS实现了样式和布局完全分离。

第二：网页打开速度

DIV CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在Spider爬行时是非常有利的。过多的页面代码可能造成爬行超时，Spider就会认为这个页面无法访问，影响收录及权重。题外：tale布局的页面打开原理：一般table布局的页面是大表格套中表格，中表格嵌套小表格，小表格再套小小表格。一般第一个表格（最外边的）要读取完才能显示出来，读取大表格的同时又要读取大表格中的小表格，大大加长了网页打开速度。 第三：对排名的影响

基于XTHML标准的DIV CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合 W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。

3.5 CSS和HTML的结合

CSS与HTML的结合使用完美的实现了网页表现与内容的分离。网页设计通常使用CSS来控制网页的样式，其中包括页面的布局、字体、背景等等信息。而HTML则用来罗列网页中的内容，其中包括文本、图片等。

CSS样式表可以以多种方式应用到HTML页面当中，但最常用最好的方式是外部连接。这种方式是将CSS样式代码放入一个外部文件中，再由HTML中的link元素进行调用。这样做的好处是可以使多个网页调用同一个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。

具体的使用方法为：在HTML页面中的head标签下使用link元素调用。

第 12 页

内蒙古化工职业学院毕业设计（论文）用纸

第四章 CSS+DIV的应用

4.1 企业板块的分析 1、企业板块页面布局简述

企业板块最重要的是公司简介，承担着反映企业的重要信息，包括企业概况、发展历史、主要业绩以及组织结构等，作用是让浏览者对企业的情况有一个明确的掌握。外界可以凭借企业网站了解认识企业的运营，包括业务范围、运营状况、性质和实力等等方面的信息，有一个了解的平台，促使更多的合作。公司简介的主要内容是准确并且完整地描述企业的业务范围、主要产品、相关服务等内容，并且全面介绍企业的性质、地址、联系方式等。最好是还可以提供企业的年度报表，利于访问者更好、更清晰地从具体的数据上了解企业的经营状况、方针和实力。

图4-1 企业板块

2、CSS+DIV布局

以企业简介为例，CSS代码如下： .pagewith{

第 13 页

内蒙古化工职业学院毕业设计（论文）用纸

width: 990px; } .content{ height:auto; }

.content_top_left{ width: 590px; height: 270px; float: left; margin-top: 8px;

padding:0px 20px 0px 20px; color:#727477; }

.content_top_right{ width: 270px; height: 270px; float: left; margin-top: 8px; text-align: left; }

.content_center{ padding-top: 10px; height: 200px; text-align: left; margin-top: 5px; margin-bottom: 10px; padding-left: 5px; margin-left: 2px; color:#727477; }

第 14 页