项目十六 项目实践：正邦网站制作（三）
实践目标
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） 第43-81行：定义主体部分的DIV盒子，id名为"listmain"；
2） 第44-67行：定义主体部分右边的DIV盒子，id名为"listright"；
3） 第46-51行、第69-74行：插入一个一行两列的盒子，宽度定义为100%，样式设定为tableunderline，在第一列中输入文字，设定样式为xbt；
4） 第52-63行：采用ul、li的列表添加列表标题，日期添加span标签；
5） 第68-81行：定义主体部分右边的DIV盒子，id名为"listpageleft"；
6） 第64行：为页面添加p标签，并且定义样式为pageliststyle；
7） 第66行：清除左右浮动；
8） 第75-79行：为同级栏目添加p标签，定义样式为bt；
CSS源代码：
(mystyle.css)
代码解析：
1） 第1-7行: 定义listright盒子，最小高度为410像素，高度自动，宽度为720像素，左填充为10像素；
2） 第4-11行：定义logo盒子高70像素，宽960像素，上边距为零，右边距自适应，下边距零，左边距自适应；
3） 第12-14行：定义logo盒子内的img标记中的元素左浮动；
4） 第15-26行：定义telno盒子右浮动，高20像素，宽200像素，上填充距为30像素，右填充距为40像素，下填充距为20像素，字体黑体14像素，粗体，颜色为#BF0000(红色)；
5） 第27-34行：定义menu盒子高50像素，宽960像素，上下边距为零，左右自适应；
6） 第35-45行：定义menuys盒子字号14像素，颜色为#fff(白色)，背景颜色为#D92621(红色)，左浮动，高20像素，宽120像素，文本居中，上填充距为15像素，下填充距为15像素。
任务三：分析正邦文章页架构
任务描述：
正邦的文章页和列表页一样，我这里只详细讲解和首页不同的部分。
8号框：文章页的主体部分listmain，分左右两个小块。
9号框：文章页主体部分的左侧小块listpageleft，相关文档列表。
10号框：文章页主体部分的右侧小块listright，文章内容。
任务四：制作正邦文章页主体部分
HTML 源代码：
(index.html)
代码解析：
1) 第50-83行：定义主体部分的DIV盒子，id名为"listmain"；
2) 第51-65行：定义主体部分右边的DIV盒子，id名为"listright"；
3) 第52-63行：定义主体部分右边的DIV盒子中的listpage1盒子。
4) 第53-57行：插入一个一行一列的盒子，宽度定义为100%，样式设定为tableunderline，在第一列中输入文字，设定样式为xbt；
5) 第58-60行：定义产品标题和内容的DIV盒子，id名为"wzbtp"；
6) 第61行：定义DIV盒子，id名为"wzxjie"，在盒子中填写作者、来源、点击量等内容；
7) 第62行：在p标签中插入文章内容；
8) 第66-81行：定义主体部分右边的DIV盒子，id名为"listpageleft"；
9) 第67-72行：插入一个一行两列的盒子，宽度定义为100%，样式设定为tableunderline，在第一列中输入文字，设定样式为xbt；
10) 第73-79行：为相关文档标题添加p标签，为日期添加span标签，并且定义样式为ar_right；
CSS源代码：
（index.css）
代码解析：
1） 第1-11行:定义wzbtp盒子高20像素，宽960像素，上下边距为10像素，左右自适应，上下填充距离为10像素，文本位置为居中，颜色设为#D92621；
2） 第12-26行：定义wzxjie盒子高15像素，宽400像素，上下边框宽度为1像素，虚线，颜色为#F1F1F1，上下填充距离为5像素，左右边距为自动，文本位置为居中；
