1、第 7 章 HTML 和 CSS 样式在 Dreamweaver 8 中，使用 HTML 标记和 CSS 级联样式可以很方便的进行文本格式化。HTML（Hypertext Markup Language）即超文本置标语言是一种用来制作超文本文档的简单置标语言。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台。在文本菜单中的命令以及在属性面板中的操作都可以使用标准 HTML标记来实现文本格式化。CSS 是 HTML 装扮器，一个漂亮的 Web 页面不可能没有它。HTML 页面中有多种引用 CSS 的方法，不同的方法导致的效率也不一样。Dreamweaver 8 提供
2、了新的、统一的 CSS 面板，将所有 CSS 的功能都整合到一个面板设置上，同时增加其性能，以便轻松有效地使用 CSS。本章学习要点： HTML 基础 XHTML 代码 HTML 信息 HTML 标记种类 CSS 样式基 础 CSS 样式属性176 Dreamweaver 8 网 页 制作与网站开 发标 准教程7.1 HTML 基本样式HTML 为一种普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。是在 SGML 定义下的一个描述性语言，或可说 HTML 是SGML 的一个应用程序，HTML 不是程序语言，如 C+和 Java 之类，它只是标示语言，只要
3、明白了各种标记的用法便算学懂了 HTML。HTML 的格式非常简单，只是由文字及标记组合而成，任何文字编辑器都可以对其进行编辑，只要能将文件另存为 ASCII纯文本格式即可，当然最好使用专业的网页编辑软件。7.2 HTML 标记在浏览器中，任何 HTML 标记都看不到，但是在浏览器中所看到的网页效果却都是由这些标记生成的。在大多数情况下，创建站点时并不需要对 HTML 标记进行掌握，因为像在 Dreamweaver 8 这样的网页编辑软件中， HTML 的处理是在后台进行的，因而就掩盖了该语言的复杂性。如果需要查看网页的 HTML 标记，可以选择代码视图模式。各种 HTML 标记名称与功能 。
4、7-1 标记 类型 译名或意义 作用 备注文件标记 文件声明 让浏览器知道这是 HTML 文件 开头 提供文件整体资讯 标题 定义文件标题，将显示于浏览顶端 本文 设计文件格式及内文所在排版标记 说明标记 为文件加上说明，但不被显示 段落标记 为字、画、表格等之间留一空白行 换行标记 令字、画、表格等显示于下一行 水平线 插入一条水平线 居中 令字、画、表格等显示于中间 反对 预设格式 令文件按照原始码的排列方式显示 区隔标记 设定字、画、表格等的摆放位置 不折行 令文字不因太长而绕行 建议折行 预设折行部位字体标记 加重语气 产生字体加粗 Bold 的效果 粗体标记 产生字体加粗的效果 强调
5、标记 字体出现斜体效果 斜体标记 字体出现斜体效果 打字字体 Courier 字体，字母宽度相同 加上底线 加上底线 反对 一级标题标记 变粗变大加宽，程度与级数反比第 7 章 第 7 章 HTML 和 CSS 样式 177 二级标题标记 将字体变粗变大加宽 三级标题标记 将字体变粗变大加宽 四级标题标记 将字体变粗变大加宽 五级标题标记 将字体变粗变大加宽 六级标题标记 将字体变粗变大加宽 字形标记 设定字形、大小、颜色 反对 基准字形标记 设定所有字形、大小、颜色 反对 字体加大 令字体稍微加大 字体缩细 令字体稍微缩细 画线删除 为字体加一删除线 反对 程序代码 字体稍微加宽如 键盘字
6、字体稍微加宽，单一空白 范例 字体稍微加宽如 变数 斜体效果 传记引述 斜体效果 引述文字区块 缩排字体 述语定义 斜体效果 地址标记 斜体效果 下标字 下标字 上标字 指数（平方、立方等）列表标记 顺序列表 清单项目将以数字、字母顺序排列 无序列表 清单项目将以圆点排列 列表项目 每一标记标示一项清单项目 选单列表 清单项目将以圆点排列，如 反对 目录列表 清单项目将以圆点排列，如 反对 定义列表 清单分两层出现 定义条目 标示该项定义的标题 定义内容 标示定义内容表格标记 表格标记 设定该表格的各项参数 表格标题 做成一打通列以填入表格标题 表格列 设定该表格的列 表格栏 设定该表格的栏
7、表格表头 相等于 ，但其内之字体会变粗表单标记 表单标记 决定单一表单的运作模式 文字区块 提供文字方盒以输入较大量文字 输入标记 决定输入形式 选择标记 建立 pop-up 卷动清单 选项 每一标记标示一个选项图形标记 图形标记 用以插入图形及设定图形属性链接标记 链接标记 加入链接178 Dreamweaver 8 网 页 制作与网站开 发标 准教程 基准标记 可将相对 URL 转绝对及指定链接目标框架标记 框架设定 设定框架 框窗设定 设定框窗 页内框架 于网页中间插入框架 IE 不支援框架 设定当浏览器不支援框架时的提示影像地图 影像地图名称 设定影像地图名称 链接区域 设定各链接区域
8、多媒体 背景声音 于背景播放声音或音乐 IE 多媒体 加入声音、音乐或影像其他标记 走动文字 令文字左右走动 IE 闪烁文字 闪烁文字 NC 页内寻找器 可输入关键字寻找于该一页 反对 开头定义 让浏览器知道这是 HTML 文件 关系定义 定义该文件与其他 URL 的关系StyleSheet 样式表 控制网页版面 自订标记 独立使用或与样式表同用7.2.1 排版标记7.2.2 字体标记7.2.3 列表标记顺序列表的数目种类 。7-2 Type 种类 编号方式 举例说明。 。 。 7-8。 第 7 章 第 7 章 HTML 和 CSS 样式 1791 阿拉伯数字 1，2，3，a 小写英文字母 a
9、，b ，c ， A 大写英文字母 A，B，C，i 小写罗马字母 I，ii，iii，I 大写罗马字母 I，II，III，7.2.4 图像标记7.2.5 表格标记7.2.6 链接标记7.3 XHTML 可扩展超文本置标语言HTML 就是 Web 世界的语言。现在，一种版本更新的语言，也就是所谓的可扩展超文本置标语言 XHTML（Extended Hypertext Markup Language）正在变得日益普及而且大有取代 HTML 之势。有些新制定的标准就有助于解决 HTML 在某些领域所存在的问题。HTML 本身还缺乏某些关键要素，比如扩展性等。所以，在 HTML 还没有被废弃之前为其增强可
10、用特性的 XHTML 置标语言诞生了。7.3.1 XHTML 代码规则7.3.2 使页面符合 XHTML180 Dreamweaver 8 网 页 制作与网站开 发标 准教程7.4 CSS 样式CSS（Cascading Style Sheet，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。7.4.1 CSS 样式简介7.4.2 CSS 语法7.4.3 在网页中插入 CSS7.5 创建和修改 CSS 在文档中定义的样式只要符合 CSS 标准，Dreamweaver 8 就能识别该样式。在Dreamweaver 8 中有三种类型的样式：7.5
11、.1 创建 CSS 规则7.5.2 链接和编辑外部 CSS 样式7.5.3 设置 CSS 样式参数CSS 样式子面板参数名称及功能描述 。7-3 名称 功能描述当创建 CSS 规则时使用速记 设 置 Dreamweaver 8 以 速 记 形 式 编 写 CSS 样 式 属 性 。 在 这几 种 选 项 中 可 根 据 需 要 设 置 ， 选 中 各 项 参 数 前 的 复 选 框即 可当编辑 CSS 规则时使用速记 控制 Dreamweaver 8 是否以速记形式重新编写现有样式。第 7 章 第 7 章 HTML 和 CSS 样式 181选择【如果原来使用速记】Dreamweaver 8 将
12、所有样式保留原样；选择【依据以上设置】Dreamweaver 8 以速记形式重新为【使用速记】中选择的属性编写样式使用 CSS 对话框编辑 双击 CSS 面板会弹出 CSS 规则定义面板，然后进行编辑使用“属性”窗格编辑 双 击 CSS 面 板 可 在 CSS 样 式 面 板 的 属 性 窗 格 中 直 接 进行 编 辑当在 CSS面板中双击时使用代码视图编辑 双击 CSS 面板，会切换到 Dreamweaver 8 的代码视图进行编辑 CSS 样式7.6 CSS 样式属性设置CSS 样式可以控制许多 HTML 无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、
13、点数等） 。通过使用 CSS 样式和以像素为单位设置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文本周围的浮动文本等，下面就详细介绍一下 CSS 样式的各个属性。7.6.1 设置字体属性【类型】属性的名称及含义 。7-4 选项名称 选项含义字体 设置字体系列，浏览器使用字体系列中的第一种字体显示文本大小 定义文本的字号大小，可以通过选择数字和度量单位选择特定的大小续表 选项名称 选项含义样式 指定字体的显示样式，包括正常、斜体和偏斜体，默认为正常行高 设置文本所在行的高度，选择【正常
14、】将自动计算字体的行高粗细 对字体应用特定或相对的粗细量，正常=400，粗体=700变量 设置文本的变量，IE 浏览器支持变量属性，但 Navigator 浏览器不支持大小写 将选定内容中的首字母大写或者将文本设置为全部大/小写颜色 设置文本颜色下划线 为文字添加下划线，链接的默认设置是下划线上划线 给文字添加上划线删除线 给文字添加删除线闪烁 闪烁文字修饰无 常规文字的默认设置为无182 Dreamweaver 8 网 页 制作与网站开 发标 准教程7.6.2 设置背景属性【背景】属性的名称及含义 。7-5 选项名称 选项含义背景颜色 设置元素的背景颜色背景图像 在列表框中选择作为背景图像的
15、文件不重复 不会重复显示背景图像重复 在横向和纵向上都重复显示背景图像，直到对象背景被充满横向重复 在横向上重复显示背景图像重复纵向重复 在纵向上重复显示背景图像附件 确定背景图像是固定在原始位置还是随内容一起滚动水平位置 在下拉列表中选择背景水平排列的方式垂直位置 在下拉列表中选择背景垂直排列的方式7.6.3 设置区块属性【区块】选项卡的具体属性 。7-6 属性名称 功能单词间距 用于在文字之间添加空格。此选项可能会受到页边距调整的影响，可以指定负值，但是其显示取决于浏览器字母间距 用于在文字之间添加空格。可以指定负值，但是其显示取决于浏览器。和单词间距不同的是，字母间距可以覆盖有页边距调整
16、产生的字母之间的多余空格垂直对齐 用于指定元素的纵向对齐方式，通常是相对于其上一级而言的文本对齐 决定文本如何在元素内对齐文字缩进 用于指定首行缩进的距离。指定为负值时相对于创建了文本突出，但是其显示取决于浏览器用于决定元素中的白色间隔如何处理，有 3 种选择正常 不使用白色间隔保留 将文本用 PRE 标记括起来空格不换行 指定只有遇到 BR 标记时文本才可以重叠显示 选择一些可显示的对象第 7 章 第 7 章 HTML 和 CSS 样式 1837.6.4 设置方框属性7.6.5 设置边框属性【边框】选项卡中的各个参数名称以及功能 。7- 参数 功能样式 用于决定边框样式，选择【无】选项则取消
17、边框样式。其中还有样式点划线、虚线、实线、双线、槽状、脊状、凹陷和凸出等用于设置元素边框的粗细。 【上】 、 【下】 、 【左】 、 【右】列表框分别用来设置边框的四周，下拉列表中有选择项细 细边框中 中等粗细边框粗 粗边框宽度值 设置具体的边框粗细值颜色 用于设置边框对应位置的颜色。可以分开设置每条边框的颜色，但是其显示则取决于浏览器7.6.6 设置列表属性7.6.7 设置定位属性【定位】属性的名称及含义 。7-8 选项名称 选项含义绝对 根据【定位】选项组中的数值来确定层的绝对位置相对 根据【定位】选项组中的数值来确定层的相对位置类型静态 将层放置在文本所在位置继承 继承父层的显示属性可见
18、 显示层的内容，而忽略父层的显示属性显示隐藏 隐藏层的内容，而忽略父层的显示属性Z 轴 设置层的堆叠顺序，选中【自动】表示由系统自动安排可见 增加 CSS 层的大小，使其所有内容能够完全显示隐藏 保持 CSS 层的大小并且剪切任何超出层的内容，不提供滚动条滚动 在 CSS 层中添加滚动条，不论内容是否超出层的大小溢出自动 使滚动条仅在 CSS 层的内容超出它的边界时才出现定位 该选项组用于设置层的位置和大小184 Dreamweaver 8 网 页 制作与网站开 发标 准教程剪辑 该选项组用于定义层的可见部分7.6.8 设置扩展属性【光标】的类型名称和功能 。7-9 光标名称 功能 视觉效果
19、光标名称 功能 视觉效果crosshairtextwaitdefaulte-resizene-resizen-resize十字准心文字/编辑等待/沙漏系统默认向右改变大小（East ）向上右改变大小（North East）向上改变大小（North）nw-resizew-resizesw-resizes-resizese-resizeauto向上左改变大小（North West）向左改变大小（West ）向下左改变大小（South West）向下改变大小（South）向下右改变大小（South East）自动滤镜名称和功能及其参数 。7-10 名称 功能 语法 参数Alpha设置透明层次 Alp
20、ha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity 表示透明度、FinishOpacity 表示目标值BlendTrans 设置图片淡进淡出 BlendTrans(Duration=?) Duration 表示过渡时间blur 创建高速度移动效果，即模糊效果Blur(Add=?, Direction=?, Strength=?)Add 一般为 1 或 0、Direction 表示角度、Strength 表示效果增长的数值，一般为 5Chroma 制作专用颜色透明 Chr
21、oma(Color=?) Color 表示颜色DropShadow 创建对象的固定影子 DropShadow(Color=?, OffX=?, OffY=?, Positive=?)Offx 表示 X 轴偏离值、Offy 表示 Y 轴偏离值、Positive 为 1 或0。FlipH 创建水平镜像图片 FlipH 无FlipV 创建垂直镜像图片 FlipV 无glow 加光晕在附近对象的边外Glow(Color=?, Strength=?)Color 表示发光颜色、Strength 表示强度gray 把图片灰度化 Gray 无invert 反色 Invert 无light 创建光源在对象上 Light 无mask 创建透明掩模在对 Mask(Color=?) Color 表示颜色
