项目十五 项目实践：正邦网页制作(二)
实践目标
1、 了解网页设计的流程。
2、 了解网页设计中的注意事项。
3、 熟悉网页设计和制作。
实训项目简介：
正邦网站是一个企业网站制作的综合实例，通过本项目的学习和锻炼可以帮助学员了解到公司企业站的特点，也是对前面章节学习到知识点不断进行巩固，同时为后续课程打下基础，帮助学生贯穿大学所有的课程内容。在本项目中，我们不仅要运用到前面所学习的网页布局理念，同时也是需要建立在已经掌握了HTML基本标记和CSS基础以及DIV基础之上。通过本项目的锻炼和学习，学生能够制作大部分企业网站。
实训流程：
任务一：制作正邦首页主体部分
在前面已经分析过，主体框架部分分为左中右三部分，因此我们先搭建主体的DIV框架，再从左至右制作各个小块。主体DIV框架如下所示：
HTML 源代码：
(index.html)
代码解析：
1) 第29-39行:定义主体框架id名为main的盒子；
2) 第30-32行：定义主体内左侧盒子id名为"mainleft"；
3) 第33-35行：定义主体内的中间盒子，id名为"mainmid"；
4) 第36-38行：定义主体内的右侧盒子，id名为"mainright"
对应主体部分的CSS样式如下：
CSS源代码：
(mystyle.css)
代码解析：
1) 第68-76行:定义main盒子最小高度为300像素，高度自适应，宽960像素，上下边距为零，左右自适应；
接下来分别制作左中右三个模块。
1、左侧头条新闻模块制作
HTML 源代码：
(index.html)
代码解析：
1) 第31-40行:定义的mainleft盒子内嵌套一个id名为xwbt的盒子，盒子内使用一个一行两列的表格来制作模块标题，一个单元格放"头条新闻"，并且调用"xbt"的CSS样式，一个单元格放"更多"，调用"more"的CSS样式；
2) 第38行：定义一对段落标记，里面插入一张图片，设置图片宽154像素，高83像素；
3) 第39行：定义一对段落标记，里面是新闻标题，调用"bt"的CSS样式；
4) 第41-48行：使用ul标记以及li标记制作新闻列表；
CSS源代码：
(mystyle.css)
代码解析：
1) 第77-82行:定义的mainleft盒子左浮动，高300像素，宽320像素，右填充距为10像素；
2) 第83-86行：定义xwbt盒子高150像素，宽310像素；
3) 第87-98行：定义所有调用类名为xbt的盒子样式为，宽140像素，字体为粗体，颜色为黑色，下边框宽1像素，红色实线，宽40%，高10像素，上下填充距为6像素；
4) 第99-105行：定义xwbt盒子内的img标记样式为左浮动，上边距10像素，右边距10像素，高100像素，宽100像素；
5) 第106-109行：定义所有的div标记内的字号12像素，字体颜色为#333(深灰色)；
6) 第110-115行：定义所有条用类名为bt的盒子的样式为，字体粗体，字体颜色为#F30(红色)，上边距为5像素，下边距为5像素；
7) 第116-119行：定义mainleft盒子内的ul标记的列表符号无，上下左右的填充距均为零；
8) 第120-129行：定义mainleft盒子内的li标记样式为高20像素，下边框宽1像素，白色点线，上边距3像素；
9) 第130-135行：定义调用类名为tableunderline的盒子的样式为，有一像素#F60(橙色)实线；
10) 第136-141行：定义调用类名为more的盒子的样式为字号12像素，字体颜色为#030(深灰色)，文本右对齐，右填充距为20像素；
2、中间关于我们模块制作
HTML 源代码：
(index.html)
代码解析：
1) 第50-61行:定义中间盒子，id名为"mainmid"；
2) 第51-60行：在mainmid盒子内嵌套一个盒子，id名为gywm；
3) 第52-57行：在gywm盒子内定义一个一行两列的表格，一个单元格为"关于我们"并且调用类选择符xbt的样式，一个单元格为"更多"，调用类选择符more的样式；
4) 第58-59行：插入一张宽690像素，高306像素的图片，以及一段文字；
CSS源代码：
(mystyle.css)
代码解析：
1) 第142-148行: 定义id为gywm的盒子中img的样式为：左浮动，高100像素，宽200像素，右边距为10像素，上边距为10像素；
2) 第150-153行：定义id为gywm的盒子中p的样式为：行高为180%，上边距为10像素；
3) 第154-166行：定义id为mainmid的盒子中样式为：左浮动，宽408像素，高为300像素，右填充为10像素，左填充也为10像素，右边框宽为1像素、灰色，点线，左边框宽为1像素、灰色、点线；
3、右侧联系我们模块制作
HTML 源代码：
(index.html)
代码解析：
1) 第62-81行:定义中间盒子，id名为"mainright"；
2) 第64-69行:定义一个宽度为100%的一行两列的表格，样式定义为tableunderline；一个单元格为"关于我们"并且调用类选择符xbt的样式，一个单元格为"更多"，调用类选择符more的样式；
3) 第71行：在p标签中插入文字，调用类选择符bt的样式；
4) 第72-77行：在p标签中插入文字；
5) 第78行：在p标签中插入文字，调用类选择符bt的样式；
6) 第79-80行：在p标签中插两张图片，设定宽度高度；
CSS源代码：
(mystyle.css)
代码解析：
1) 第167-172行: 定义id为mainright的盒子样式为：右浮动，高300像素，宽190像素，左填充为10像素；
2) 第173-175行：定义id为mainright的盒子中p标签样式为：行高为140%；
3) 第176-180行：定义id为mainright的盒子中img标签样式为：宽度为50像素，左边距为25像素；
任务二：制作正邦首页的产品列表
HTML 源代码：
(index.html)
代码解析：
1) 第85-91行:定义产品列表盒子，id选择符为piclist；
2) 第86-90行：插入ul、li列表标签，在每个li标签中插入一张图片，定义宽度为283，高度为159，换行符之后，在span标签中插入文字；
3) 第92行:在p标签中加入空格符；
CSS源代码：
(mystyle.css)
代码解析：
1) 第240-247行: 定义id为piclist的盒子样式为：高220像素，宽960像素，上下边距为0，左右为居中；
2) 第248-252行：定义id为piclist的盒子中ul样式，边距为0，填充为0，设置列表项符号为none；
3) 第253-255行：定义id为piclist的盒子中span样式：文本方向为居中；
4) 第257-261行：定义id为piclist的盒子中ul li样式：浮动居左，文本居中，高为190像素；
5) 第262-265行：定义id为piclist的盒子中ul li中类选择符mid的样式：左右边距为25像素；
6) 第267-272行：定义id为piclist的盒子中ul li中标签选择符img的样式：宽为300像素，高为150像素，上下边距为10像素；
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
