项目七 项目实践：TABLE+CSS制作《互联世纪网》

实践目标

1、 熟悉CSS属性

2、 熟练运用CSS属性控制网页样式

3、 熟悉网页制作流程

项目简介：

通过上一章节的学习，我们了解了CSS样式能更加方便、有效地控制网页结构和布局网页元素，大大提高网页的排版效率，也方便后期的管理和维护。接下来将通过互联世纪网的制作来体会和加强对同学对于CSS的理解和运用。在本项目中我们将运用TABLE+CSS对网页进行布局，和美化网页。项目效果如下图：

任务一：项目解析

任务描述：

在前面的两个章节中，我们学习了CSS的基本语法和一些常用的基本属性，在本章的项目实践中，我们会把这些知识进行综合利用，使用table+CSS进行互联世纪网的页面布局，让大家对CSS的优点有更深刻的体会。

在本项目中，通过分析效果图，我们可以把互联世纪网分为五大部分：头部、主体1、主体2、主体3、底部版权。

其中头部包括互联世纪网的图片logo，本站首页、关于我们和会员服务。

主体1是一行两列的表格，分为左右两部分，左边是一大段文字，右边是2014。

主体2是特惠方案，一行三列的表格，每个单元格内采用ul、li的标签。

主体3采用了4行2列的表格，前三行，左边是标题，右边是文字描述。最后一部分内容合并两个单元格。

底部版权包括两部分，hr标签的一条细线，第二部分实际上就是一个一行一列的表格，里面放置了两段文字声明网页的版权信息。

在接下来的任务中我们将分别按照这个布局规划将互联世纪网逐步制作出来。

任务二：互联世纪网头部制作

任务要求：

1、 制作出互联世纪网头部，包括：logo，右边的三个文字链接。

2、 每个文字链接前面有图片小图标。

3、 布局整洁大方，配色协调美观。

实践目标：

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤：

1、 插入一行两列的表格，左边放logo，右边放三个文字链接。

2、 在每个文字链接前面插入小图标。

HTML 源代码：

CSS代码：

效果预览：

任务三：互联世纪网主体部分-1制作

任务要求：

1、 左右文字区域添加不同样式。

2、 文字下方为高为30像素的灰色区域。

3、 布局整洁大方，配色协调美观。

实践目标：

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤：

1、 新建一个两行两列的表格，第一行的左边放文字内容，右边放2014。

2、 为不同的文字添加不同的样式。

3、 合并表格第二行，添加样式为gray。

4、 在头部为样式添加属性和值。

HTML 源代码：

CSS代码：

效果预览：

任务四：互联世纪网主体-2制作

任务要求：

1、 每种套餐的边框为细双线。

2、 每种套餐内的价格列表用ul、li来定义。

3、 布局整洁大方，配色协调美观。

实践目标：

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤：

1、 新建一行三列的表格。

2、 在每个单元格内插入图片的标题，居中。

3、 每个单元格内插入ul、li标签，列表属性为小图片。

4、 用p标签插入马上申请的小图片，添加样式为right。

HTML 源代码：

CSS代码：

效果预览：

任务五：互联世纪网主体-3制作

任务要求：

1、 左边区域为三个小标题，边框为虚线。

2、 右边区域为对应的文字描述。

3、 布局整洁大方，配色协调美观。

实践目标：

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤：

1、 插入四行两列的表格。

2、 前三行，左边添加标题在span标签内部，为标题添加名为btbj的类型选择符。第二列单元格内在p标记内添加文字。

3、 第四行用ul、li的标签添加内容列表。

HTML 源代码：

CSS代码：

效果预览：

任务六：互联世纪网底部版权制作

任务要求：

1、 版权上方有一条细线。

2、 版权块以灰色的背景显示，文字居中。

3、 布局整洁大方，配色协调美观。

实践目标：

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤：

1、 用hr标签添加一条细线。

2、 版权内容添加一行一列的表格，背景设为灰色，添加文字。

HTML 源代码：

CSS代码：

效果预览：

项目总结：

本项目综合运用了多方面的知识和技能设计来制作网站的主页。详细介绍了该网页的主体布局和局部布局的设计过程。运用TABLE+CSS布局网页，该网页中应用了CSS中常见的属性：字体、颜色及背景、文本、边框、列表等属性。最终展示出这些网页元素的综合运用效果。通过该项目的制作，巩固table的基础知识，为接下来的CSS+DIV布局打下良好的基础。