模块六 综合案例设计与开发 任务2：制作网站首页导航栏.pdfVIP

网页设计与Web应用开发基础

课程名称可修改课程名称可修改

课程名称可修改

模块六综合案例设计与开发

COURSECOURSETITLETITLE

COURSETITLE

任务2：制作网站首页导航栏

NAMENAME白会肖可修改可修改

课堂案例：企业网站设计

网站首页效果图

实训目标

•使用DIV+CSS的布局模式；

•多个DIV的排列方式；

•CSS样式的定义。

menu

Logo区域banner区域

区域

top区

图片轮播区域

left区域right区域主体内容区

产品展示区

企业信息及版权信

息区

网页的结构属于五行两列式布局。顶部用于显示网站banner和导航信息，左右两列显示网站的主要内容，最下

面一行显示网站信息。

根据设计要求，将网站从上至下分为五个div区域：

.top、.lunbo、.main（包括left和right）、.products、.bottom。

如图所示。

top及banner区

广告图片轮播

left左侧内容right右侧内容

产品展示

企业信息bottom及版权信息

实现任务：div划分页面布局

页面布局的结构代码如下：

divclass=“top”!--顶部背景区域--

divclass=“banner

divclass=logo/div!--logo区域--

divclass=“nav/div!--菜单区域--

/div

/div

实现任务：div划分页面布局

页面布局的结构代码如下：

divclass=“lunbo”/div!--图片轮播区域--

divclass=“main”!--主体内容区域--

divclass=left/div

divclass=right/div

/div

divclass=“products”/div!--产品内容区域--

divclass=“bottom”!--企业信息区域--

divclass=“foot”/div!--版权信息区域--

/div

教师示范

实现任务：CSS控制div样式

*{

font-size:14px;

color:#333333;

text-decoration:none;

margin:0pxauto;

}

教师示范

实现任务：HTML中DIV的结构

divclass=top!--to