模块六 综合案例设计与开发 任务6：制作网站二级界面.pdfVIP

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

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

课程名称可修改

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

COURSECOURSETITLETITLE

COURSETITLE

任务6：制作网站二级界面

NAMENAME白会肖可修改可修改

二级页

面具有

相同的

页面布

局，可

以使用

模板来

设计二

级页面

top区

图片展示区域

right区域

left区域

主体内容区

企业信息及版权信

息区

教师示范

实现任务：单击“文件”菜单下的“新建”-”模板中的页”，选择moban.dwt文件，选中“当

模板改变时更新页面”复选框，当模板发生更改，使用模板的页面将自劢更新。

教师示范

以产品展示页为例介绍二级页面的创建过程：在”tupian”div区域添加相应的图片。

教师示范

实现任务：设计页面主体区域的div布局。

/*二级页面主体区域布局*/

divclass=moban_main

divclass=moban_left

h3产品中心/h3

ahref=#高跟鞋/a

ahref=#运动鞋/a

ahref=#坡跟鞋/a

/div

教师示范

实现任务：设计页面主体区域的div布局。

/*二级页面主体区域布局*/

divclass=moban_right

h4当前位置：高跟鞋/h4

tablewidth=700border=0cellspacing=0cellpadding=0

tr

tdimgsrc=../images/sucai/gao/gao4.jpgwidth=200height=200//td

tdimgsrc=../images/sucai/gao/gao3.jpgwidth=200height=200//td

tdimgsrc=../images/sucai/gao/gao1.jpgwidth=200height=200//td

/tr

…….

/table

教师示范

产品展示页设计效果如下图：

我学会了什么？

使用模板创建网站的二级页面。

使用DIV进行页面的布局。

谢谢！