模块二网页排版技术 单元8：DV+CSS技术的应用 一、css技术应用网页效果预览 贵光华面 取的景板 静人理 月女后顶 能素时害坊整 轴时得在务7量司 44 国 W下和 图2-8-1css技术应用网页效果图 打开示例烟页 二、实例制作步骤： 1.设置字体的css样式。 点击菜单栏格式css样式新建，或者在cs样式表面板中点击编 辑规则按钮。 国过 《》T 目标规则《氧Cg发心 css 编福规■CG的面顿) 弹出对话框，选择类输入一个英文名称，选择“仅对该文档”点 击确定按钮
模块二 网页排版技术 单元 8：DIV+CSS 技术的应用 一、css 技术应用网页效果预览 图 2-8-1 css 技术应用网页效果图 打开示例网页 二、实例制作步骤： 1.设置字体的 css 样式。 点击菜单栏格式|css 样式|新建，或者在 css 样式表面板中点击编 辑规则按钮。 弹出对话框，选择类输入一个英文名称，选择“仅对该文档”点 击确定按钮
建CSS规则 选样云典型： 请定 为多规透维上下文透择磬类型· 类（可应用于任何证L元素） 选罪暑名称 选择式缘入选挥器名称： 不大再体国 更具体国 飘则定义 选择定义规肌的拉活。 《伪限该文档】 根胎 弹出对话框 At的C5规世文 分典 典型 Tont-family(): Pont-aite (S): ” Fat-veight( Font-atyle () Fast-vrisnt() 山ae-bed ght) tgt-t灯atfoen0 Test deearation (D):onderLLae (T) Clw0:目 ■rlin0) line-tkrrteh ( biazk() □6EA00 若的0□ 姓□即消□两小 所有的css样式的参数为：
弹出对话框 所有的 css 样式的参数为：
2.设置超级链接的c5s样式。 点击菜单栏格式©ss样式新建，或者在cs样式表而板中点击新 建按钮。弹出对话框如图。途择复合内容，仅对该文档。从选择器的下 拉列表中选择hover。 新建CSS规则 选罪器类型： 定 为多规达年上下文达择整共型· 夏含内音（基于达择的内音》 卫消 选保暑名称 选择式紫入选挥器名称： a:hever 不太真体 更具体 氯则定义： 选择定义规即的位匮。 《限该文档) 点击确定按钮后弹出对话框，进行如图参数设置
2.设置超级链接的 css 样式。 点击菜单栏格式|css 样式|新建，或者在 css 样式表面板中点击新 建按钮。弹出对话框如图。选择复合内容，仅对该文档。从选择器的下 拉列表中选择 a:hover。 点击确定按钮后弹出对话框，进行如图参数设置
小ar的CSS规到宽义 分 型 Font-fmmily): Font-miee ) Fat制1) Fent-stple (T) Fat-Ye1M0的 Taort-tr forn c1e0国 酒werlise0 酒1ir好AL lik0) 酒aa0 标陆四 定□期消回男 3应用样式，首先选中要应用样式的文字，在属性面板中点击 样式的下拉菜单，弹出所有的样式，从中选择一个即可，也可以在Css 样式表而板当中右击要应用的样式，选择“套用”。 C)无 无 重命名 附加年式来 注意事项： 类需要在属性面板当中选择应用。而高级和标签不需要应用， 只要c5s样式被导入就会自动应用上去。 三、本例css样式的html语法结构分析
3.应用样式，首先选中要应用样式的文字，在属性面板中点击 样式的下拉菜单，弹出所有的样式，从中选择一个即可，也可以在 css 样式表面板当中右击要应用的样式，选择“套用”。 注意事项： 类需要在属性面板当中选择应用。而高级和标签不需要应用， 只要 css 样式被导入就会自动应用上去。 三、本例 css 样式的 html 语法结构分析
.rh font-size:9pt:/字号为9磅 color:FFFFFF:∥文字颜色 text-decoration:none:∥无修饰 2r{ font-size:9pt; color:#FF6600. text-decoration:none; 2r1{ font-size:9pt; color:#000066; z{ font-size:9pt; color:#006600 text-decoration:none: rk font-size:9pt; color:#009900:/文字颜色 text-decoration:none; background-.color:#FFFFFF/∥背景颜色为白色 height:16px/方框高度为16象素 border::1 px solid#o06600:/边框为实线，宽度为1象素，颜色代码 k{ font-size:9pt; color:#009900: text-decoration:none: border:Ipx solid #666666;
.rh { font-size: 9pt;//字号为 9 磅 color: #FFFFFF;//文字颜色 text-decoration: none;//无修饰 } .zr { font-size: 9pt; color: #FF6600; text-decoration: none; } .zr1 { font-size: 9pt; color: #000066; } .z { font-size: 9pt; color: #006600; text-decoration: none; } .rk { font-size: 9pt; color: #009900;//文字颜色 text-decoration: none; background-color: #FFFFFF;//背景颜色为白色 height: 16px;//方框高度为 16 象素 border: 1px solid #006600;//边框为实线，宽度为 1 象素，颜色代码 } .k { font-size: 9pt; color: #009900; text-decoration: none; border: 1px solid #666666; }
ahover{ font-size:9pt: color:#FF6600./超级链接的颜色 text-decoration:none; 四、建立css样式的html语法总结 CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻 松设定不同类型的CSS样式， 1.类（可用于任何标签） 可作为class属性应用于文本范围或文本块的自定义样式，注意 类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入 开头的句点，Dreamweaver将自动输入句点。 2.标签（重新定义特定标签的外观）】 重定义特定HTML标签的默认格式设置。当读者透择该透项 时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。 3.使用css选择器，用于对超级链接的四种状态进行设置。 A:active活动超级链接状态，即击下队标时的状态. A:hover鼠标指向超级链接时的状态
a:hover { font-size: 9pt; color: #FF6600;//超级链接的颜色 text-decoration: none; 四、建立 css 样式的 html 语法总结 CSS 类型包括三种：类、标签和高级。在 Dreamweaver 中可以轻 松设定不同类型的 CSS 样式。 1．类（可用于任何标签） 可作为 class 属性应用于文本范围或文本块的自定义样式。注意 类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入 开头的句点，Dreamweaver 将自动输入句点。 2．标签（重新定义特定标签的外观） 重定义特定 HTML 标签的默认格式设置。当读者选择该选项 时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。 3.使用 css 选择器，用于对超级链接的四种状态进行设置。 A:active 活动超级链接状态，即击下鼠标时的状态。 A:hover 鼠标指向超级链接时的状态
Ak默认的超级链接状态，即没有任何动作是的状态， A:visited被访问过的超级链接状态. 4“定义在”有两个单选项： 新建样式表文件，生成专门的.Css文件此样式可应用于多个文 档，即为外部链接式样式。 仅对该文档，只在当前文档中应用，即为嵌入式样式。 5链接一个外部样式表的操作步骤如下： (1)选择“窗口TCSS样式“命令，打开CSS样式面板. (2)单击该面板上的“附加样式表”按钮，或单击该面板顶部右 边的三角按纽，从弹出的菜单中选择“附加样式表“命令，出现“链接外 部样式表”对话框。 (3)在该对话框中选择添加为“链接”或“导入”，并在“文件URL” 文本框中输入外部样式表文件名，或单击“浏览”按钮选择外部样式表文 件（外部样式表文件必须以.css为扩展名），单击“确定按钮。 五、DIV4CSS实现网页排版 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML 等等。在下面的文章中我们将会用到一些有关于HTML的基本知识， 而在你学习这篇入门教程之前，请确定你己经具有了一定的HTML基 础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧
A:link 默认的超级链接状态，即没有任何动作是的状态。 A:visited 被访问过的超级链接状态。 4.“定义在”有两个单选项： .新建样式表文件，生成专门的.css 文件此样式可应用于多个文 档，即为外部链接式样式。 .仅对该文档，只在当前文档中应用，即为嵌入式样式。 5.链接一个外部样式表的操作步骤如下： （1）选择“窗口”|“CSS 样式”命令，打开 CSS 样式面板。 （2）单击该面板上的“附加样式表”按钮，或单击该面板顶部右 边的三角按钮，从弹出的菜单中选择“附加样式表”命令，出现“链接外 部样式表”对话框。 （3）在该对话框中选择添加为“链接”或“导入”，并在“文件/URL” 文本框中输入外部样式表文件名，或单击“浏览”按钮选择外部样式表文 件（外部样式表文件必须以.css 为扩展名），单击“确定”按钮。 五、DIV+CSS 实现网页排版 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML 等等。在下面的文章中我们将会用到一些有关于 HTML 的基本知识， 而在你学习这篇入门教程之前，请确定你已经具有了一定的 HTML 基 础。下面我们就开始一步一步使用 DIV+CSS 进行网页布局设计吧
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop 或FireWorks(以下简称Ps或FW)等图片处理软件将需要制作的界面布 局简单的构画出来，以下是我构思好的界面布局图。 Thiog.com.cn 日4nw ” “,月 8结w 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图， 我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片： 2、内容部分又可分为侧边栏、主体内容： 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图
所有的设计第一步就是构思，构思好了，一般来说还需要用 PhotoShop 或 FireWorks(以下简称 PS 或 FW)等图片处理软件将需要制作的界面布 局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图， 我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了 LOGO、MENU 和一幅 Banner 图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
fniog.com.cn Header层 *4 SideBar层 MainBody层 PageBody层 Footer层 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系， 这样理解起来就会更简单了。 body #containerO #Header PageBody SideBar MainBodyD #Footer 0 DIV结构如下： body{}*这是一个HTML元素，具体我就不说明了/
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系， 这样理解起来就会更简单了。 DIV 结构如下： │body {} /*这是一个 HTML 元素，具体我就不说明了*/
L#Container{}页面层容器◆/ Header{}*页面头部* PageBody{}*页面主体/ |#Sidebar{}座侧边栏/ L#MainBody体主体内容*/ L#Footer{}*页面底部/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写 HTML代码和CSS. 接下来我们在桌而新建一个文件夹，命名为DV+CSS布局练习”，在文 件夹下新建两个空的记事本文档，输入以下内容： stitle>无标题文档 这是XHTML的基本结构，将其命名为index.htm,另一个记事本文档 则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：
└#Container {} /*页面层容器*/ ├#Header {} /*页面头部*/ ├#PageBody {} /*页面主体*/ │ ├#Sidebar {} /*侧边栏*/ │ └#MainBody {} /*主体内容*/ └#Footer {} /*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写 HTML 代码和 CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS 布局练习”，在文 件夹下新建两个空的记事本文档，输入以下内容： 无标题文档 这是 XHTML 的基本结构，将其命名为 index.htm，另一个记事本文档 则命名为 css.css。 下面，我们在标签对中写入 DIV 的基本结构，代码如下：