实践目标

1、了解网页设计的流程。

2、了解网页设计中的注意事项。

3、熟悉网页设计和制作。

实训项目简介正邦网站是一个企业网站制作的综合实例，通过本项目的学习和锻炼可以帮助学员了解到公司企业站的特点，也是对前面章节学习到知识点不断进行巩固，同时为后续课程打下基础，帮助学生贯穿大学所有的课程内容。在本项目中，我们不仅要运用到前面所学习的网页布局理念，同时也是需要建立在已经掌握了HTML基本标记和CSS基础以及DIV基础之上。通过本项目的锻炼和学习，学生能够制作大部分企业网站。实训流程任务一分析正邦网站列表页架构任务描述在第十四、十五章节中，我们对正邦网站的首页进行了详细的布局排版分析，同样的，列表页和文章页我们也来先分析布局结构及页面内容，了解整体框架，这两个页面的头部、导航、banner和底部与首页是一样的，所以对于这两个页面我们只详细讲解和首页不同的部分。

8号框列表页的主体部分listmain，分左右两个小块。

9号框列表页主体部分的左侧小块listpageleft，同级栏目列表。

10号框列表页主体部分的右侧小块listright，文章列表。任务二制作正邦列表页主体部分在list.html页面的body/body中头部和底部之间输入以下代码，新建CSS文件名为mystyle.css，用于编写公众样式的CSS代码，保存到根目录的images文件夹。HTML源代码(list.html)代码解析1）第81行定义主体部分的DIV盒子，id名为"listmain"；

2）第67行定义主体部分右边的DIV盒子，id名为"listright"；

3）第51行、第74行插入一个一行两列的盒子，宽度定义为100%，样式设定为tableunderline，在第一列中输入文字，设定样式为xbt；

4）第63行采用ul、li的列表添加列表标题，日期添加span标签；

5）第81行定义主体部分右边的DIV盒子，id名为"listpageleft"；

6）第64行为页面添加p标签，并且定义样式为pageliststyle；7）第66行清除左右浮动；

8）第79行为同级栏目添加p标签，定义样式为bt；CSS源代码(mystyle.css)代码解析

1）第7行定义listright盒子，最小高度为410像素，高度自动，宽度为720像素，左填充为10像素；

2）第11行定义logo盒子高70像素，宽960像素，上边距为零，右边距自适应，下边距零，左边距自适应；3）第14行定义logo盒子内的img标记中的元素左浮动；

4）第26行定义telno盒子右浮动，高20像素，宽200像素，上填充距为30像素，右填充距为40像素，下填充距为20像素，字体黑体14像素，粗体，颜色为#BF0000(红色)；

5）第34行定义menu盒子高50像素，宽960像素，上下边距为零，左右自适应；

6）第45行定义menuys盒子字号14像素，颜色为#fff(白色)，背景颜色为#D(红色)，左浮动，高20像素，宽120像素，文本居中，上填充距为15像素，下填充距为15像素。任务三分析正邦文章页架构任务描述正邦的文章页和列表页一样，我这里只详细讲解和首页不同的部分。8号框文章页的主体部分listmain，分左右两个小块。9号框文章页主体部分的左侧小块listpageleft，相关文档列表。10号框文章页主体部分的右侧小块listright，文章内容。

任务四制作正邦文章页主体部分HTML源代码(index.html)代码解析

1)第83行定义主体部分的DIV盒子，id名为"listmain"；

2)第65行定义主体部分右边的DIV盒子，id名为"listright"；

3)第63行定义主体部分右边的DIV盒子中的listpage1盒子。

4)第57行插入一个一行一列的盒子，宽度定义为100%，样式设定为tableunderline，在第一列中输入文字，设定样式为xbt；

5)第60行定义产品标题和内容的DIV盒子，id名为"wzbtdiv"；

6)第61行定义DIV盒子，id名为"wzxjie"，在盒子中填写作者、来源、点击量等内容；

7)第62行在p标签中插入文章内容；8)第81行定义主体部分右边的DIV盒子，id名为"listpageleft"；

9)第72行插入一个一行两列的盒子，宽度定义为100%，样式设定为tableunderline，在第一列中输入文字，设定样式为xbt；

10)第79行为相关文档标题添加p标签，为日期添加span标签，并且定义样式为arright；CSS源代码（index.css）代码解析

1）第11行定义wzbtdiv盒子高20像素，宽960像素，上下边距为10像素，左右自适应，上下填充距离为10像素，文本位置为居中，颜色设为#D；

2）第26行定义wzxjie盒子高15像素，宽400像素，上下边框宽度为1像素，虚线，颜色为#F1F1F1，上下填充距离为5像素，左右边距为自动，文本位置为居中；