模块六 综合案例设计与开发 任务5：制作网站模板.pdfVIP

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

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

课程名称可修改

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

COURSECOURSETITLETITLE

COURSETITLE

任务5：制作网站模板

NAMENAME白会肖可修改可修改

二级页

面具有

相同的

页面布

局，可

以使用

模板来

设计二

级页面

top区

图片展示区域

right区域

left区域

主体内容区

企业信息及版权信

息区

二级页面的结构属于四行两列式布局。顶部用于显示网站banner和导航信息，下面是图片展示区，主体部分分

为左右两列，左侧为导航菜单，右侧为菜单对应的内容，最下面一行显示网站版权信息。

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

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

如图所示。

top及banner区

图片展示区

left左侧菜单right右侧内容

企业信息bottom及版权信息

教师示范

实现任务：打开首页文件：index.html，将其另存为模板，命名为moban.dwt，此

时会自动创建文件夹Templates。

教师示范

实现任务：修改模板页中的轮播区域，将图片删除，只保留div，使用类：lunbo。

选中图片所在的div，插入“模板对象”中的“可编辑区域”。

divclass=lunbo/div

教师示范

实现任务：将“可编辑区域”命名为“tupian”。

教师示范

实现任务：将moban.dwt主体区域内容删除，保留div并修改div的样式

主体内容区域：

divclass=“main”

divclass=left/div

divclass=right/div

/div

调

整

为

主体内容区域：

divclass=moban_main

divclass=moban_left/div

divclass=moban_right/div

/div

教师示范

实现任务：选中class为“moban_main”的div，插入“模板对象”中的“可编辑区域”，将

“可编辑区域”命名为“neirong”。

教师示范

实现任务：CSS控制div样式

/*模板中的样式定义*//*模板右侧菜单样式定义*/

.moban_main{