第 9 章用 Dreamweaver 制作网页

佛山科学技术学院 Internet及多媒体应用第9章用Dreamweaver制作网页

主要内容 基本操作 1 编辑网页 2 使用表格 3 使用框架 4 CSS 样式 5 网页标准化设计 6 Internet及多媒体应用

主要内容 添加网页特效 7 使用表单 8 网站发布与测试 9 Internet及多媒体应用

9.1 基本操作 Internet及多媒体应用

9.1.1 管理站点 • 创建本地站点 • 创建站点文件夹 • 按照网站规划可事先创建站点根目录，再根据网站复杂程度创建若干子文件夹，至少要有images文件夹，并将准备好的图像文件复制到该文件夹中。 • 启动Dreamweaver CS5，定义本地站点 • 若是首次启动Dreamweaver，则在“欢迎屏幕”的“新建”区域中单击“Dreamweaver站点”，弹出“站点设置对象”对话框，在“站点名称”框中填写站点名称，如：“中国元素”，在“本地站点文件夹”框中直接填写或单击右侧“浏览文件夹”按钮选择文件夹为事先创建的站点根目录路径，如：“D:\chineseelements”，最后，单击“保存”按钮。 Internet及多媒体应用

9.1.1 管理站点 • 创建本地站点 • 启动Dreamweaver CS5，定义本地站点 • 若Dreamweaver已经启动，则选择菜单“站点”→“新建站点”命令，在弹出的“站点设置对象”对话框中，进行上述操作。 • 如果单击“站点设置对象”对话框左侧“高级设置”的下拉列表按钮，在展开的设置选项中选择“本地信息”，在“默认图像文件夹”框中设置默认图像文件夹的路径，则当用户插入站外图像文件时，系统将以原名自动复制站外图像文件到该默认图像文件夹中，而不再提示“是否复制图像文件到站点文件夹中” 。 Internet及多媒体应用

9.1.1 管理站点 • 管理站点 • 编辑站点 • 选择菜单“站点”→“管理站点”命令，会打开“管理站点”对话框，选择要编辑的站点，单击“编辑”按钮，即可重新打开“站点设置对象”对话框，对站点的本地信息、远程服务器、测试服务器信息等重新设置。 • 打开站点 • 选择菜单“站点”→“管理站点”命令，在打开的“管理站点”对话框中，选择要打开的站点，再单击“完成”按钮即可 • 启动Dreamweaver后，默认打开的站点是最近一次打开的站点。 Internet及多媒体应用

9.1.1 管理站点 • 管理站点 • 删除站点 • 在“管理站点”对话框中选择要删除的站点，单击“删除”按钮，在打开的提示框中单击“是”按钮。 • 删除站点操作只是删除站点信息，恢复站点文件夹为普通文件夹，并未真正删除该文件夹。可以通过资源管理器删除它，或再次设置为站点文件夹。 • 管理本地文件和文件夹 • 在“文件”面板（选择菜单“窗口”→“文件”命令可打开该面板）中，用户可以对各级文件和文件夹进行管理，如进行新建、选择、打开、复制、移动、删除、重命名等操作。具体操作方法类似于Windows资源管理器的操作，建议多采用单击右键快捷菜单命令的方式进行操作。 Internet及多媒体应用

9.1.2 新建网页文档 • 基于空白网页创建网页文档 • 选择菜单“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“空白页”、页面类型为“HTML”、布局为“无”，单击“创建”按钮，即可创建一个空白网页，如图所示。 Internet及多媒体应用

9.1.2 新建网页文档 • 基于网页布局模板快速建立网页 • 选择菜单“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“空白页”、页面类型为“HTML”、布局为某种自己所需要的布局，如“3列固定，标题和脚注”，单击“创建”按钮，即可按照该布局模板创建一个网页。用户可根据需要自行修改网页中的内容。 • Dreamweaver提供16种布局模板，布局中选用“列固定”方式时，指定页面宽度为固定像素值，不随浏览器窗口大小和屏幕分辨率高低而变化。而“列液态”方式则采用浏览器窗口大小的百分比来指定页面宽度。 Internet及多媒体应用

9.1.3 网页编辑与浏览方式 • “设计”视图 • 主要用于网页的可视化设计和编辑。 • “代码”视图 • 用于查看和修改网页的HTML源代码。 • “拆分”视图 • 将文档窗口拆分为“代码”视图和“设计”视图两个窗格，用户可以同时使用“代码”视图和“设计”视图。 • 选择菜单“查看”→“垂直拆分”命令，可将“拆分”视图分为左右或上下两个窗格。 Internet及多媒体应用

9.1.3 网页编辑与浏览方式 • 实时视图 • 在这种视图方式下，不能编辑网页，主要用于预览网页在浏览器中的显示效果，但不是所有的效果都能预览。 • 实时代码 • 用于查看网页的HTML源代码，但不能修改代码。 • 检查 • 在这种模式中，当鼠标在某一页面元素上悬停时，将以可视化方式详细显示该页面元素的CSS属性，包括填充、边框和边距等。 Internet及多媒体应用

9.1.4 页面属性设置 页面属性，主要是一些影响整个网页的参数。选择菜单“修改”→“页面属性”命令，可弹出“页面属性”对话框。在该对话框中包括外观、链接、标题、标题/编码和跟踪图像等属性类型设置项，可以设置Web页面的若干基本布局选项，如网页边距、字体、背景颜色、背景图像、网页标题、超链接样式等。 • 外观 • 外观属性包括“外观（CSS）”和“外观（HTML）”两种类别。选择“外观（CSS）”选项时，所设置的页面属性，会在文档的源代码中自动生成相应的CSS样式规则；而选择“外观（HTML）”选项时，所设置的页面属性会添加到HTML标签中。 Internet及多媒体应用

9.1.4 页面属性设置 • 链接 • 可进行整个页面超链接样式的设置，包括字体、大小、颜色、下画线等选项。 • 标题 • 可对页面各级标题的字体、大小、颜色、样式进行设置。 • 标题/编码 • 可以输入网页的标题，指定页面的文档类型（DTD）、编码、Unicode规范等，并显示站点文件夹等信息。 • 跟踪图像 • “跟踪图像”是在复制设计时作为参考的图像，该图像只供参考，当文档在浏览器中显示时并不出现。 Internet及多媒体应用

9.2 编辑网页 Internet及多媒体应用

9.2.1 添加文本 • 添加普通文本 • 直接输入文本 • Dreamweaver会自动换行，按Shift+Enter组合键强行换行。 • 按Enter键来分段。 • 粘贴文本 • 在其他文档中复制或剪切所需文本，再选择菜单“编辑”→“粘贴”或“编辑”→“选择性粘贴”命令，粘贴文本，并删除不必要的换行符和回车符。 • “选择性粘贴”时，一般不带格式，仅粘贴文本，以便用户使用符合标准化设计的CSS样式进行格式设置。 Internet及多媒体应用

9.2.1 添加文本 • 添加普通文本 • 导入文本 • 用户可以向页面导入Word、Excel等其他文档。如：选择菜单“文件”→“导入”→“Excel文档”命令，可导入Excel文档。 • 添加空格 • 按“Shift+Ctrl+空格”组合键一次可输入一个空格，重复该组合键可输入多个空格。 • 在中文输入方式下，输入全角空格。 • 设置首选参数：选择菜单“编辑”→“首选参数”命令，弹出“首选参数”对话框，在该对话框的“常规”类别中选中“允许多个连续的空格”。 Internet及多媒体应用

9.2.1 添加文本 • 添加特殊字符 • 在“插入”面板的“文本”类别中，单击“字符”按钮下拉箭头，并从子菜单中选择相应的特殊字符。 • 在菜单“插入”→“HTML”→“特殊字符”子菜单中选择字符名称。 • 若上述子菜单中没有所需的字符，可单击“其他字符”，弹出“插入其他字符”对话框，从中选择所需字符。 • 插入水平线 • 用菜单“插入”→“HTML”→“水平线”命令或在“插入”面板的“常用”类别中，单击“水平线”按钮，即可插入水平线。 Internet及多媒体应用

9.2.1 添加文本 • 插入水平线 • 单击水平线，切换到水平线属性检查器（即“属性”面板），可以进一步设置水平线的各项属性，宽度即水平线的长度，高度即水平线的粗细。 • 在水平线HTML代码的hr标签中添加color属性，或设置CSS规则，更全面地设置水平线的样式。 • 创建列表 • 新建列表 • 在文档中定位插入点，再在“插入”面板的“文本”类别中，单击“项目列表”、“编号列表”或“定义列表”按钮，即可在插入点处输入列表项目文本，每输完一项，都要按Enter键，若要完成整个列表，则按两次Enter键。 Internet及多媒体应用

9.2.1 添加文本 • 创建列表 • 使用现有文本创建列表 • 编辑现有文本，要作为一个列表项的文本均应设置为一个段落。选择要组成列表的一系列段落。 • 在HTML属性面板中，单击“项目列表”或“编号列表”按钮。 • 创建嵌套列表 • 定位插入点或选择要嵌套的列表项目。 • 按Tab键或单击HTML 属性面板中“文本缩进”按钮。 • 按Shift+Tab组合键或单击HTML 属性面板中“文本凸出”按钮。 Internet及多媒体应用

9.2.1 添加文本 • 创建列表 • 列表属性设置 • 选择“格式”→“列表”→“属性”，打开“列表属性”对话框，可在该对话框中设置整个列表或列表的个别项目的类别、样式、起始计数等。 • 文本格式设置 • 使用HTML设置文本格式 • 选择要设置格式的文本，在HTML属性面板中或选择“格式”菜单中的相应命令，来设置段落格式、对齐方式、缩进、凸出和粗体、斜体等样式。 • 有些格式设置，如：字体和文本颜色，需要用户创建CSS规则，才能设置文本格式，这部分将在后续章节中介绍。 Internet及多媒体应用

9.2.1 添加文本 • 文本格式设置 • 使用CSS内联样式设置文本格式 • 选择要设置格式的文本，并切换到CSS属性面板中，首先在“目标规则”框中选择“新内联样式”选项，再设置其他CSS属性，如字体、大小、颜色、对齐方式和加粗、斜体等。Dreamweaver会自动生成CSS样式属性，并添加到HTML代码行中。选择菜单“格式”→“字体”→“编辑字体列表”命令，在弹出的“编辑字体列表”对话框中，添加新字体或新字体组合。 Internet及多媒体应用

9.2.2 插入图像 • 插入图像 • 定位插入点，然后在“插入”面板的“常用”类别中，单击“图像”按钮，或选择菜单“插入”→“图像”命令，在弹出的“选择图像源文件”对话框中，选择要插入的图像文件，最后，单击“确定”按钮，在弹出的“图像标签辅助功能属性”对话框中的“替换文本”框里，输入提示文本（这是一个良好习惯）。 • 设置图像属性 • 单击图像选中它，在图像属性面板中设置图像显示的宽、高及对齐方式等属性。 • 注意：在此设置图像的宽、高尺寸只是其显示的大小，不会改变图像本身的原始尺寸。 Internet及多媒体应用

9.2.2 插入图像 • 图像处理 • 还可以在图像属性面板中单击相应的编辑按钮，对图像进行编辑处理，如，单击“编辑图像设置”按钮，在弹出的“图像预览”对话框中，可对图像的原始大小，格式、品质等进行更改。 • 插入图像占位符 • 如果需要插入的图像尚未准备好，可选择菜单“插入”→“图像对象”→“图像占位符”命令，插入图像占位符，当准备好图像后，双击图像占位符，再选择所需图像插入到网页中。 Internet及多媒体应用

9.2.3 使用超级链接 • 创建超链接 • 选定要添加的文本或图像（即超链接的源端点） • 切换到 “Html ”或“图像”属性面板，在“链接”框中设置超链接目标（即目标端点），超链接目标端点可以是以下几种情形： • 一个完整的URL（即网址），实现站点间链接 • 文档的路径和文件名，实现站内链接，可直接拖动“指向文件”图标，指向目标文件。 • 命名锚记，如“＃top”，实现页面内部链接 • 电子邮件地址，创建电子邮件链接 • 一个“＃”号或“javasccript:;”，创建空链接 • 脚本代码，如JavaScript代码，实现脚本链接 Internet及多媒体应用

9.2.3 使用超级链接 • 创建图像地图 • 可以在同一张图片上创建多个热点区域，分别链接到不同的目标端点，来实现在一张图片上创建多个超链接。 • 具体操作是：选中图片，选用图像属性检查器上的矩形、圆形或多边形热点工具，在图片上创建相应的热点区域；利用指针热点工具选择、移动、调整区域范围，再对每一个热点区域创建链接。 • 设置超链接目标和标题 • 在“标题”框中输入文本，以便浏览网页时，当鼠标指向超链接即显示该提示文本。 • 在“目标”框中选择目标网页的打开方式： _blank（新窗口）、_parent （上一级窗口）、_self （本窗口）、_top （顶层窗口） Internet及多媒体应用

9.2.3 使用超级链接 • 更改或取消超链接 • 更改超链接：在“链接”框中或择菜单“修改”→“更改链接”命令，在弹出的“选择文件”对话框中更改目标端点的具体内容即可。 • 取消超链接：选中要取消的链接，选择菜单“修改”→“移除链接”命令，或删除 “链接”框中的内容即可。 Internet及多媒体应用

9.2.4 添加多媒体元素 • 添加声音 • 插入声音链接 • 将链接的目标端点设置为声音文件，浏览时，单击超链接，即可打开用户端默认播放器并播放声音文件。 • 插入插件添加声音 • 选择菜单“插入”→“媒体”→“插件”命令，在弹出的“选择文件”对话框中找到相应文件并选中，单击“确定”按钮，但要注意，只有访问者计算机安装了所选声音文件的适当插件，声音才可以正常播放。 • 插入bgsound标签添加背景音乐 • 一般紧跟在“body”标签之后，通过选择菜单“插入”→“标签”命令，插入bgsound标签，来插入网页背景音乐。 Internet及多媒体应用

9.2.4 添加多媒体元素 • 添加Flash对象 • 插入普通Flash动画 • 定位插入点，选择菜单“插入”→“媒体”→“SWF”命令，在弹出的“选择SWF”对话框中找到相应文件并选中，单击“确定”按钮，在插入点处即出现SWF 文件占位符。 • 选中插入的Flash动画占位符，切换到“属性”面板，对Flash动画的显示大小、名称、播放参数等进行设置，当“Wmode” 参数设置为“透明”时，动画将透明显示，没有背景。 • 插入FLV视频 • 定位插入点，选择菜单命令 “插入”→“媒体”→“FLV” ，在弹出的“插入FLV”对话框中，设置视频类型（一般为“累进式下载视频” ）、FLV文件的路径和文件名或完整的URL、外观、大小等，最后，按“确定” 。 Internet及多媒体应用

9.2.4 添加多媒体元素 • 添加其他多媒体对象 • 在Dreamweaver网页文档中，还可以插入Shockwave影片、Java Applet、ActiveX控件，以及多种音、视频媒体对象。 • 在“插入”面板的“常用”类别中，单击“媒体”下拉箭头，选择下拉列表中相应的选项，并在弹出的“选择文件”对话框中找到需要的文件，单击“确定”按钮。 • 也可以通过插入插件方式插入多媒体对象。 • 注意：为了保证多媒体对象能正常播放，用户计算机应安装相应的播放器或插件，或具备相应的运行环境，如运行Java虚拟机。在网页中添加上述部分多媒体元素后， Dreamweaver会在网站文件夹下自动生成如Scripts文件夹、.swf、.js、.gif等文件，不能删除，上传网站时一并传送。 Internet及多媒体应用

9.3 使用表格 Internet及多媒体应用

9.3.1 表格结构 • 网页中的表格结构 • 一般意义上的表格是由水平表格线（横线）和竖直表格线（竖线）交织而成的，相邻两条横线构成表格的一行，相邻两条竖线构成表格的一列，行和列交叉处的小方格称为单元格。 • 不同于一般表格，网页中的表格在结构上是由一个大方框（表格的边框）包含若干个排成一行行（表格行）、一列列（表格列）的小方格（单元格）构成的，每一个单元格都有自己独立的四条边框，不相交叉，各单元格上、下、左、右之间都有间距。 Internet及多媒体应用

9.3.2 创建表格 • 创建表格 • 在“插入”面板的“常用”或“布局”类别中，单击“表格”按钮，在弹出的“表格”对话框中，根据需要设置各项属性，然后单击“确定”按钮，即可在插入点处创建一个表格。 • 设置各项属性值时，一般以像素为单位。 • 作为组织表格式内容的表格应该设置有边框、标题行、列等。 • 用于布局的表格，要求浏览器显示表格时不显示表格线、边距和间距，则应将“边框粗细”、“单元格边距”和“单元格间距”均设置为0，也不需要有标题。 Internet及多媒体应用

9.3.3 编辑表格 • 选择表格元素 • 一般操作方法：拖动鼠标。 • 移动鼠标指向表格的任意位置行或列的边框，当鼠标指针变成双向箭头时，单击鼠标即可选择整个表格。 • 单击表格的某个单元格，然后在“文档”窗口左下角的标签选择器中单击<td>、<tr>或<table>标签，可选定该单元格、单元格所在行或整个表格。 • 修改表格行列数 • 选中表格，然后在表格属性检查器中修改所需的行列数即可。 Internet及多媒体应用

9.3.3 编辑表格 • 调整表格、行或列大小 • 拖动相应边框即可。 • 插入、删除表格、行或列 • 将光标定位到相应的单元格，在“插入”面板的“布局”类别中，单击“在上面插入行”或“在下面插入行”按钮，即可在相应位置插入一行。如果单击“在左边插入列”或“在右边插入列”按钮，则可插入一列。 • 如果要添加多行或多列，先单击一个单元格，确定插入位置。选择菜单“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在该对话框中设置行数或列数，并指定新行或新列的插入位置后，单击“确定”按钮。 Internet及多媒体应用

9.3.3 编辑表格 • 拆分、合并单元格 • 选择要拆分的单元格，单击单元格属性检查器中的“拆分单元格”按钮，在弹出的“拆分单元格”对话框中设置所需行数或列数，单击“确定”按钮即可完成拆分单元格操作。 • 选择需要合并的单元格区块，单击单元格属性检查器中的“合并单元格”按钮，即可完成合并单元格操作。 • 编辑单元格内容 • 基本方法也是先选择编辑对象，再根据操作要求，选用“删除”、“剪切”、“复制”、“粘贴”或“选择性粘贴”等命令进行具体的编辑操作。 Internet及多媒体应用

9.3.4 设置表格属性 • 设置表格属性 • 选择表格，“属性”面板将切换为表格的属性检查器，在这里设置表格的名称、宽度、对齐方式、边框粗细、填充、间距等。 • 设置单元格属性 • 选择表格的单元格、行、列或单元格区块，属性面板将切换为单元格的属性检查器，在这里对所选择的表格对象进行各项属性的设置，如ID号、文本格式、宽度、高度、水平或垂直对齐方式、背景颜色等。 Internet及多媒体应用

9.3.5 制作细线表格 • 插入一个表格，并设置边框为0像素、单元格间距为1像素。 • 选定表格，设置“背景颜色”为将要创建的细线表格的表格线颜色，如黑色，单击“确定”按钮完成设置。 • 选择所有单元格，在单元格属性检查器中将它们的背景色设置为需要的颜色，如白色。 • 保存网页文档并预览，即可看到一个细线表格。 Internet及多媒体应用

9.3.6 利用表格布局页面 • 虽然Web标准化设计不建议用表格来布局整个页面，但是，页面中的一些局部内容对象，如超链接序列、图片序列、文本列表及一些表格式数据等，还是可以使用表格来布局的，另外，仍然有部分用户还习惯于使用表格来布局整个页面。 • 创建用于布局的表格时，要根据网页设计要求来设置表格的属性，如表格宽度、边框、边距和间距等。 • 在页面中布局各个相互独立的内容对象时，不要简单地只用一个表格的不同单元格来布局。必要时要用不同的嵌套表格来布局不同的内容对象，这样，可以相对独立地设置其格式样式，避免互相干扰。 Internet及多媒体应用

9.4 使用框架 Internet及多媒体应用

9.4.1 框架和框架集 • 框架结构 • 框架（frame）是浏览器窗口中的一个区域，它可以独立显示一个HTML网页文档。 • 框架集包含一组属于同一个浏览器窗口的框架。 • 框架集对应一个HTML文档，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的 URL。 • 框架结构提供了将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML网页文档的方法。使用框架的最常见情况就是：一个框架显示包含导航控件的文档，而另一个框架显示包含内容的文档。 Internet及多媒体应用

9.4.2 创建框架页面 • 创建框架 • Dreamweaver CS5提供了15种预定义的框架集，以便用户快速地创建框架页面。 • 选择菜单“文件”→“新建”命令，在打开的“新建文档” 对话框中，选择“示例中的页”类别，在“示例文件夹”列中选择“框架页”文件夹，再从“示例页”列表中选择一个框架集，最后单击“创建”按钮。 • 保存框架 • 选择菜单“文件”→“框架集另存”命令，弹出“另存为”对话框，输入文件名，单击“保存”按钮，即可将框架集保存为指定文件名的网页文档。 • 将光标依次定位于各个框架中，选择菜单“文件”→“保存框架”命令，在弹出的“另存为”对话框中输入相应的文件名后，单击“保存”按钮，分别保存三个框架的初始网页文档。 Internet及多媒体应用

9.4.3 编辑框架页面 • 拆分、删除框架及调整框架大小 • 调整框架大小 • 拖动框架边框或在框架集属性面板中精确设置值 • 删除框架 • 将框架边框拖离页面或拖到父框架的边框上，就可以删除该框架。 • 如果要删除框架集，则必须先关闭显示它的“文档”窗口，然后再删除框架集文件。 • 拆分框架 • 定位插入点到要拆分的框架，选择菜单“修改”→“框架集”子菜单，从中选择拆分项。 Internet及多媒体应用

9.4.3 编辑框架页面 • 设置框架和框架集属性 • 在“框架”面板中（选择菜单“窗口”→“框架”命令，可打开或关闭该面板）单击相应的框架，可选中该框架，属性面板为该框架的属性面板。若单击环绕框架集的边框，则选中框架集，属性面板将切换为框架集的属性面板。 • 在框架集的属性面板中，可设置边框是否要显示，边框宽度、颜色，以及框架结构中各框架的尺寸等。 • 在框架的属性面板中，可设置该框架的名称、边框是否要显示、边框颜色、边界、是否显示滚动条，在“源文件”框中输入该框架初始网页文档的路径和文件名，勾选“不能调整大小”。 Internet及多媒体应用

9.4.3 编辑框架页面 • 编辑框架中的网页文档 • 当用户创建一个框架集以后，可以为每个框架新建网页文档，也可以为框架指定已经制作好的网页文档。然后，用户可独立打开各个框架中的网页文档进行编辑，也可直接在框架中一起编辑网页文档。 • 在创建超链接时，要注意设置链接打开时的目标框架，可在属性面板的“目标”栏中指定目标框架名称。 Internet及多媒体应用

9.4.4 插入嵌入式框架 • 用户可以根据需要，在自己的网页中插入一个嵌入式框架，用来显示另一个独立的网页或任意一个URL指定的网页/网站。框架自带滚动条，便于浏览其中网页。 • 选择菜单“插入”→“HTML”→“框架”→“IFRAME”命令或在“插入”面板的“布局”类别中，单击“IFRAME”按钮，可在光标处添加一个灰色方块的入式框架的占位符。 • 单击嵌入式框架的占位符，选中它，然后选择菜单“修改”→“编辑标签”命令，弹出“标签编辑器－iframe”对话框。在对话框中设置要显示网页的路径、文件名或URL、显示界面的宽度和高度等参数，单击“确定”按钮，保存网页即可。 Internet及多媒体应用

9.5 CSS 样式 Internet及多媒体应用

9.5.1 CSS语法规则 CSS（Cascading Style Sheets）即层叠样式表，是由W3C开发的一种HTML规范，可以用来统一页面的外观，对页面元素的显示效果进行精确控制Web技术。 “层叠”是指用户在浏览器中浏览网页的最终外观是由制作者为网页创建的各级样式、浏览器本身显示网页的默认样式，以及网页浏览者自定义的浏览样式（如设置浏览器用大字体显示网页等），这三种规则共同作用（或者说“层叠”）的结果，最后以最佳方式呈现网页。本节将介绍CSS样式的基本概念、语法结构和规则，以及在Dreamweaver中如何创建和应用CSS样式。 Internet及多媒体应用

9.5.1 CSS语法规则 • CSS基本语法 • 层叠样式表（CSS）由一组格式设置规则组成 • CSS样式规则基本格式如下： Selector ｛property : value｝（即选择符 {属性 : 值}）例如： p｛font-size : 12pt; color : blue; background-color : yellow;｝为便于阅读，常书写为如下结构化形式： p｛ font-size : 12pt; color : blue; background-color : yellow; ｝选择符（也称选择器）是p，p是一个表示段落的HTML标签，在此被重新定义，设置了段落的文字大小为12pt，文字颜色为蓝色，背景色为黄色。 Internet及多媒体应用

9.5.1 CSS语法规则 • CSS基本语法 • CSS选择符类型 • 类：定义的样式可以应用于任何元素 • ID：定义的样式可以应用于页面上指定ID的任何元素，但一般地，同一个页面上的某一种标签仅指定一个ID。 • 标签：重新定义特定标签（如h1）的格式。 • 复合内容：重新定义特定组合元素的格式，如选择器td h2规定的样式，仅应用于表格单元格内出现的h2标题标签。 Internet及多媒体应用

第 9 章用 Dreamweaver 制作网页