
模块二网页排版技术 单元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 的基本结构,代码如下: