版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《网页制作基础教程（DreamweaverCS3）》
电子教案第9章使用CSS样式本章重点：创建、编辑CSS样式，创建、编辑、选用CSS外部样式表，常用CSS特效滤镜的使用方法。第9章使用CSS样式9.1使用CSS样式格式化页面
9.2
CSS样式概述9.3
【CSS样式】面板的使用9.4CSS布局
9.1
使用CSS样式格式化页面9.1.1案例综述
为了使网页具有同一的风格，我们通常在网页中使用CSS样式美化、格式化页面。
9.1
使用CSS样式格式化页面9.1.2案例分析
CSS样式的创建有三种方式：一、是使用【属性】检查器或菜单命令创建应用于文本的样式的CSS规则；二、是在【页面属性】对话框中设置；三、是使用“CSS样式”面板创建和编辑
CSS规则和属性。
9.1
使用CSS样式格式化页面9.1.3实现步骤一、打开HTML网页
二、设置页面属性――添加嵌入头部的CSS样式
三、用【CSS样式】面板创建CSS样式
四、在页面中应用CSS样式
五、链接样式表，统一网站风格。
9.2
CSS样式概述9.2.1CSS的特点其特点可以归结为以下3点：
1．
控制页面中的每一个元素（精确定位）。2．
对HTML语言处理样式的最好补充。3．
把内容和格式处理相分离，减少工作量。9.2
CSS样式概述9.2.2CSS的类型自定义CSS样式自定义CSS样式（也称为类样式），可以将样式属性设置为任何文本范围或文本块。HTML标签样式HTML标签样式，用于重新定义特定标签，如H1的格式。创建或更改H1标签的CSS样式时，所有用H1标签设置了格式的文本都立即更新。CSS选择器样式CSS选择器样式重定义特定标签组合的格式（如每当H2标题出现在表格单元格内时都应用tdh2），或重定义包含特定id属性的所有标签的格式。9.2
CSS样式概述9.2.3
CSS的存在方式1．
外部文件方式外部CSS样式文件，是一系列存储在一个单独的外部文件.css文件（并非HTML文件）中的CSS样式。
CSS文件的引用是在HTML的<head></head>标签之间编写下列语句：<head><linkrel=”stylesheet”href=”style.css”type=”text/css”media=”screen”></head>
其中的Style.css文件应为已编好的样式表文件。2.内部文档头方式内部（或嵌入式）CSS样式表，是一系列包含在HTML文档head部分的style标签内的CSS样式。将风格直接定义在文档头<head></head>之间，如：<head>
<styletype=”text/css”><!—
样式表的具体内容--></style></head>
9.2
CSS样式概述3.直接插入式
直接插入式很简单，只需在每个HTML标签后书写CSS属性即可。例如：规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：<Tablestyle=”color:red;font-size:10pt”>9.2
CSS样式概述9.2.4CSS在Dreamweaver中的创建方法1、在“页面属性”中设置
9.2
CSS样式概述切换到“代码”视图，可以看到对“页面属性”进行的设置，变成了一段CSS样式代码，嵌在文档头<head></head>之间2、文本编辑DreamweaverCS3在属性检查器中增加了“样式”选项，这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时，“样式”中套用样式；如果套用的CSS样式不是文字，而是表格，同样可以在属性面板中设置CSS。在属性面板中都有一个类别（Class），在这里就可以设计表格的CSS样式。
9.2
CSS样式概述3、CSS样式面板【CSS样式】面板集成在【CSS】面板组中，在此面板中可以方便地进行CSS样式的添加、编辑、查看属性和删除等样式的管理。9.2
CSS样式概述9.3【CSS样式】面板的使用9.3.1
认识CSS样式面板
附加样式新建样式编辑样式删除样式样式属性样式列表2、【CSS样式】面板的结构1、打开【CSS样式】面板【窗口】｜【CSS样式】命令9.3【CSS样式】面板的使用9.3.1认识CSS样式面板3、管理样式查看属性视图按钮
管理CSS规则按钮
9.3【CSS样式】面板的使用9.3.1CSS样式面板3、管理样式查看“属性”视图的按钮：
【类别】视图将
Dreamweaver支持的
CSS属性划分为8个类别。每个类别的属性都包含在一个列表中，您可以单击类别名称旁边的加号(+)按钮展开或折叠它。【列表】视图按字母顺序显示
Dreamweaver所支持的所有
CSS属性。“设置属性”（蓝色）将出现在列表顶部【设置属性】视图仅显示那些已设置的属性。“设置属性”视图为默认视图。9.3【CSS样式】面板的使用9.3.1CSS样式面板3、管理样式管理CSS样式按钮：【附加样式表】按钮：可调出“链接外部样式表”对话框，从中选择要链接到或导入到当前文档中的外部样式表。【新建CSS样式】按钮：单击后可弹出“新建CSS样式”对话框，使用“新建CSS样式”对话框可以选择要创建的样式类型。【编辑样式表】按钮：单击后可弹出“CSS样式定义”对话框。编辑当前文档或外部样式表中的任何样式。【删除CSS样式】按钮：删除“CSS样式”面板中的所选样式，并从应用该样式的所有元素中删除样式。
9.3【CSS样式】面板的使用9.3.2创建新的CSS样式
打开“新建CSS样式”对话框定义要创建的CSS样式的类型
创建自定义样式（Class）重定义标签使用CSS选择器“选择器”下拉列表中提供的选择器包括：a：active、a：hover、a：link
、a：visited。选择定义样式的位置
新建样式表文件：用于创建外部样式表。仅对该文档：在当前文档中嵌入样式。
9.3【CSS样式】面板的使用9.3.3编辑CSS样式
CSS样式有8种类型：定义CSS样式类型属性定义CSS样式背景属性
定义CSS样式区块属性
定义CSS样式方框属性
定义CSS样式边框属性定义CSS样式列表属性定义CSS样式定位属性定义CSS样式扩展属性
9.3【CSS样式】面板的使用1．定义CSS类型属性使用“CSS样式定义”对话框中的“类型”类别可以定义CSS样式的基本字体和类型设置。
9.3【CSS样式】面板的使用2．定义CSS样式背景属性使用“CSS样式定义”对话框中的“背景”类型，可以定义CSS样式的背景设置。可以网页中的任何元素应用背景属性。
9.3【CSS样式】面板的使用3．定义CSS样式区块属性使用“CSS样式定义”对话框中的“区块”类别，可以定义标签和属性的间距和对齐设置。
9.3【CSS样式】面板的使用4．定义CSS样式方框属性使用“CSS样式定义”对话框中的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。
9.3【CSS样式】面板的使用5．定义CSS样式边框属性使用“CSS样式定义”对话框中的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。
9.3【CSS样式】面板的使用6．定义CSS样式列表属性使用“CSS样式定义”对话框中的“列表”类别可以为列表标签定义列表设置（如项目符号大小和类型）
。
9.3【CSS样式】面板的使用7．定义CSS样式定位属性“定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。
9.3【CSS样式】面板的使用8．定义CSS样式扩展属性“扩展”样式属性包括过滤器、分页和指针选项，它们中的大部分不受任何浏览器的支持，或者仅受InternetExplorer4.0和更高版本的支持。
9.3【CSS样式】面板的使用1)
Alpha滤镜：设置透明度。其参数格式是：Alpha(Opacity=?,Finishopacity=?,Style=?,StartX=?,StartY=?,
FinishX=?,FinishY=?)2)
Blur滤镜：设置3D效果。其参数格式是：
8．定义CSS样式扩展属性Blur(Add=?,Direction=?,Strength=?)9.3【CSS样式】面板的使用3)
DropShadow滤镜：设置文本或图像的阴影效果，应用在文本上时，其效果更加明显。其参数格式是：
DropShadow(Color=?,OffX=?,OffY=?,Positive=?)4)
Glow滤镜：设置发光效果，其参数格式是：Glow(Color=?,Strength=?)8．定义CSS样式扩展属性9.3【CSS样式】面板的使用5）Shadow滤镜：设置阴影效果，其参数格式是：Shadow(Color=?,Direction=?)6）Wave滤镜：设置波纹效果，其参数格式是：Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)8．定义CSS样式扩展属性9.3【CSS样式】面板的使用9.3.4CSS样式的应用
在创建的3种CSS样式类型中“标签”和“高级”的应用
HTML标签与之相关联，因此它们的样式属性自动应用于文档中受定义样式影响的任何标签。“类”的应用“类”样式需在“属性”面板的“样式”或“类”选项中选择应用
。9.4
CSS布局9.4.1
Div+CSS布局
在CSS布局时只需要针对不同的元素使用不同的“块”元素进行包含，通过CSS定义这些“块”元素的位置就能快速组合成页面画面。
插入Div标签
①在“文档”窗口中，将插入点放置在要显示div标签的位置。②选择“插入”|“布局对象”|“Div标签”；或在“插入”工具栏的“布局”类别中，单击“插入Div标签”按钮。9.4
CSS布局9.4.1
Div+CSS布局
插入Div标签
③在弹出“插入Div标签”对话框中，设置以下选项：
插入：选择div标签的位置和标签名称类：显示了当前应用于标签的类样式。ID：可更改用于标识div标签的名称。9.4
CSS布局9.4.1
Div+CSS布局
CSS定义布局
①选中Div标签后，打开“CSS样式”面板，单击“新建CSS规则”按钮。②在弹出的“新建CSS规则”对话框中，选择“选择器类型”为“高级（ID、伪类选择器等）”，在“选择器”文本框中已自动选择了该Div的ID③单击“确定”按钮。9.4
CSS布局9.4.1
Div+CSS布局
CSS定义布局
④在弹出的“CSS规则定义“对话框中，可进行如下设置：区块背景：在分类列表中选择“背景”，在“背景颜色”选项中选择背景颜色。区块大小：在分类列表中选择“方框”，输入区块的“宽”和“高”。位置：在分类列表中选择“方框”，取消选中“边界”的“全部相同”，分别选择“左”和“右”的边界为“自动”，从而实现区块的居中。浮动：在分类列表中选择“方框”，可将“浮动”设置为“左对齐”或“右对齐”，或为“无”。清除：在分类列表中选择“方框”，可将“清除”设置为“左对齐”、“右对齐”或“两者”。
9.4
CSS布局9.4.2使用C
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 厂房转让合同范例 详细
- 会展项目合作合同范例
- 原圆木采购合同范例
- 农场承包协议合同范本
- 医院清退合同范例
- oem 保密合同范例
- 办酒席场地出租合同范例
- 叉车设备采购合同范例
- 劳动法合同范例
- 关于分配土地合同范例
- 《餐巾折花图示》课件
- 南京市、盐城市2025届高三年级第一次模拟考试（一模）英语试卷（含答案）+听力音频
- DB12T 676.3-2016 高速公路联网收费技术要求 第3部分：非现金收费
- 国家标准装修合同(2025年)
- 医院感染管理制度培训
- 电影《白日梦想家》课件
- 2024年中职高考数学计算训练 专题10 解三角形的相关计算
- 完整版：美制螺纹尺寸对照表（牙数、牙高、螺距、小径、中径外径、钻孔）
- 电石(碳化钙)安全技术说明书
- 四川省会计师事务所服务收费标准
- 中国品牌授权行业发展环境、市场运行态势及投资前景分析预测报告
评论
0/150
提交评论