Dreamweaver网页制作基础教程项目九CSS+Div美化网页2教学教材.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目九 CSS+Div美化网页 任务一 网页中的文本 任务描述 CSS+Div技术是目前比较流行的网站布局技术，为保证网站中各页面的风格统一，一般外部CSS样式表的引用使用的更多一些。要求网站管理员为网站中的表格类应用建立统一的样式表，以方便其他网页中的同类表格的调用。以“下载专区”网页为例用CSS+Div技术进行设计，效果如图9.2.1所示。 图9.2.1 任务准备 （1）建立站点。 （2）将xzzq.html及素材导入站点。位于“项目9/任务二/ xzzq”文件夹中的原始xzzq.html网页如图9.2.2所示。 图9.2.2 网页素材文件 任务实施 图9.2.3 插入Div标签 步骤1：光标停留在“栏目导航”右侧空白处，选择菜单“插入记录”→“布局对象” →“Div标签”选项，打开“插入Div标签”对话框。在“类”和“ID”下拉列表框中输入Div的名称“main”，如图9.2.3所示。 步骤2：单击【新建css样式】按钮，打开“新建CSS规则”对话框。定义名为“xz.css”的CSS样式。设置边框：“上”、“左”、“右”均为实线，宽度为1像素，颜色为“#8BBFD5”（蓝色），如图9.2.4至图9.2.6所示。 图9.2.4 “新建CSS规划”对话框 图9.2.5 设置mail的CSS样式 图9.2.6 设计视图1 步骤5：新建样式表并保存为xz.css，为Div标签“top”定义一个CSS样式。要求设置如下：背景图片为xxjj_c4.jpg；字体为宋体，颜色为“#006600”，10磅且加粗；行高为34像素。具体设置如图9.2.9至图9.2.11所示。 图9.2.9 设置top CSS样式 图9.2.10 设置背景属性 图9.2.11 设计视图2 步骤6：将“此处显示class top id top的内容”改为“您的位置：本站首页→下载中心”，如图9.2.12所示。 图9.2.12 更改单元格内容 步骤7：在表格第二行再插入一个Div标签，“类”和“ID”都为“table”。在xz.css中为Div标签定义一个类，新建CSS样式表bgn.css，如图9.2.13和图9.2.14所示。 图9.2.13 设置bgn的CSS类型属性 图9.2.14 设置bgn的CSS边框属性 步骤8：在ID中插入12行4列的表格，设置宽度参数为80%，根据上级单元格实际大小，在表格两边各留出10%的空白，如图9.2.15所示。 图9.2.15 插入表格 步骤9：选中该表格，在“属性”面板中选择“样式”下拉按钮，应用bgn.css样式。 步骤10：重新设置表格第一行的属性，背景颜色为“#637312”，文件字体为宋体，大小为12磅，颜色为白色。 步骤11：在表格第三行再插入一个Div标签，“类”和“ID”都要为“bottom”。在xz.css中为Div标签定义一个类，如图9.2.16所示。 图9.2.16 设置bottom的CSS样式 步骤12：最终效果如图9.2.17所示。 图9.2.17 设计视图最终效果 知识拓展 1．CSS+Div简介 CSS是网页制作过程中经常用到的技术，在网页中采用CSS可以更轻松、有效地对页面的整体布局、颜色、字体、链接、背景，以及同一页面的不同部分，或不同页面的外观和格式等效果，实现更加精确的控制。 AP Div是网页内容的一个容器，在AP Div中可以旋转文本、图像或其他任何可在文件中插入的内容。由于AP Div 可以放置在网页中的任何位置，因而能有效地控制网页中的对象。 CSS是网页制作过程中经常用到的技术，在网页中采用CSS可以更轻松、有效地对页面的整体布局、颜色、字体、链接、背景，以及同一页面的不同部分，或不同页面的外观和格式等效果，实现更加精确的控制。 AP Div是网页内容的一个容器，在AP Div中可以旋转文本、图像或其他任何可在文件中插入的内容。由于AP Div 可以放置在网页中的任何位置，因而能有效地控制网页中的对象。 CSS+Div是现在最流行的一种网页布局格式。以前网页设计制作人员常用布局表格来进行布局，而现在一些较流行的网页设计全部采用CSS+Div来排版布局。用Div盒模型结构将各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。简单地说，Div用于搭建网站结构（框架），CSS用来创建网站表现（样式/美化）。CSS+Div的优点是可以使HTML代码更整齐，更容易被人理解，而且在浏览时速度也会比传统的布局方式快，最重要的是它的可控性要比表格布局强得多。 * *