基于div+CSS企业网站页面设计方案.pdfVIP

课题：DIV+CSS样式制作小型企业网页

：4

教学内容：应用DIV层进行网页布局，然后定义CSS样式表设计网页

教学目的与要求：

1.掌握DIV层进行网页布局、定义CSS样式表

2.熟悉制作的流程及步骤

3.了解HTML与XHTML

教学重点及难点：

1.DIV层布局网页

2.定义CSS样式表

教学课型：新授课

教学过程：

一、复习导入新课

1.上节课我们学习了DIV层和CSS样式表，今天我们把它两个结合起来做一个网页

2.打开我们今天要做的一个网页，这是用fireworks软件设计好的一个效果图，如图1-1所示。

图1-1

二、观察效果图

1、观察效果图的组成

在这个效果图上主要包含“标识”、“公司业务简介”、“语言选择”三个部分，如图1-2

所示。

图1-2

说明：

①带深浅颜色的横条纹背景图体现“现代”、“时尚”的气息。

②深浅渌色的搭配，不仅清晰地划分出页面各内容区域，而且使整体效果显得清新活

③对于页面的重点部业务简介”,采用了白色为背景色，使得其非常醒目突出;黑色

的文字清晰且容易辨认。

2、规划网页中的层

根据刚才的观察，可以对网页中的DIV层进行一个比较全面的设计规划，如图1-3所示。

图1-3

①用一个最外层(id=main)来放置所有的内容，实现内容的整体居中和背景图案;

②然后在main层的上面放置左右两个并列的层，左边为标识层(id=logo)用于放置标识，

右边为box层(id=box)用于放置重点内容层和语言选择层;

③重点内容层(id=h_text)和语言选择层(id=ver)为上下顺序。

④总结一下各层的关系：

logo层

main层

h_text层

box层

ver层

三、网页中布局DIV层

1、新建站点

①打开Dreamweaver软件新建一个站点，名称为web，站点建好后，并把准备好的素材拷贝

到站点文件夹中。

②新建一个静态网页。

2、DIV层布局网页

(1)main层的步骤：

①单击【】栏中的【Div】按钮，打开【Div】框，如图1-4

所示。

图1-4

②在【Div】框的【ID】下拉列表框内填入【main】。

③单击按钮，此时软件会自动HTML代码，如图1-5所示。