【id段落标记】web前端工程师7天0基础开始熟练(项目实习：本国web制作(1))

项目14项目实践：正方形网页制作(1)

实践目标

1、了解网页设计流程。

2、了解网页设计的考虑因素。

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

培训项目简介：

正方网站是企业网站制作的综合案例，通过本项目的学习和锻炼，可以帮助学员了解公司企业所的特点，不断巩固上一章的学习知识点，同时为后续课程奠定基础，帮助学生贯穿大学的全部课程内容。这个项目不仅需要应用以前学习的网页布局概念，还需要基于已掌握的HTML基本标签以及基于CSS和DIV。通过本项目的锻炼和学习，学生可以制作大多数企业网站。

课程体系：

任务1:正邦网站主页架构分析

作业说明：

在进行正式的网页制作之前，必须明确网站的整体色调、风格、版面结构和页面内容，了解网站的整体框架，才能为下一页的设计做好充分准备。

第框：网页的头部，在一对DIV标签内插入网站的徽标中。

第2框：网页的导航部分、ul标签和Li标签的使用，以及Li标签左侧浮动，以便搜索引擎轻松抓住。

框3:网页横幅部分。

4号框：产品二次导航，两侧包含5个文本链接。

第5框：网页的主体部分，左中右三个小块，左DIV块包含标题、图片、新闻标题和新闻摘要。以下是新闻清单。中间的DIV块包含一个标题，右侧的DIV块包含一个标题，并包含几行文字和两幅图片。

6号框：包含产品目录、列表标记制作的三张产品照片和标题。

框7:底部版权。

任务2:制作正方形主页头部和导航条

通过在 index.html页的body/body中输入以下代码，新的CSS文件名为my，创建公共样式的CSS代码存储在根目录的images文件夹中：

HTML源代码：

()

解析代码：

1)第9-11行：定义了名为“logo”的DIV标签对，在此块中插入logo.jgp，设置图342像素，高70像素。Logo框内嵌套着id为“telno”的框，其中包含联系人的文本信息。

2)第13-25行：定义导航条部分的DIV框，id名称“Menu”；

CSS源代码：

(my)

解析代码：

1)第1-3行：将所有HTML标签的默认外部边距定义为0。

2)第4-11行：徽标框高度70像素、宽度960像素、上边距0、右边距可变、下边距0、左边距可变定义

3)第12-14行：定义logo框内img标记内元素的左浮点。

4)第15-26行：Telno框右侧浮动，高度20像素，宽度200像素，顶部填充30像素，右侧填充40像素，底部填充20像素，字体黑体14像素，粗体，颜色#BF0000(红色

5)第27-34行：menu框高度50像素，宽度960像素，上下边距0，左右可变定义。

6)第35-45行：menuys框大小为14像素、颜色#fff(白色)、背景颜色#D92621(红色)、左侧浮动、高度为20像素、宽度为120像素、文本中心、上方填充定义

任务3:浏览用于制作本国主页的Banner产品分类(Banner product class ification navigation)

HTML源代码：

()

解析代码：

1)第26行：定义了名为“jsnews”的DIV标签对，在其中插入图片，将图片宽度设置为100%，高度设置为350像素。

2)第27行：定义一对DIV标签。id称为“redbg”，包含文本内容。

3)第28行：定义一对段落标签，包括空格字符；

CSS源代码： (

index.css)

解析代码：

1) 46-53行：定义了jsnews盒子的高度350像素、宽度960像素、上下间距为0、左右适应性。

2)第54-67行：定义redbg框的高度为15像素、宽度为910像素、上边距和下边距为0、左右可变、上边距为7像素、下边距为8像素、背景色为#D92621(红色)、大小为12像素。