动态网页设计与制作实用教程（第二版） -程伟渊 第12章.pptVIP

第12章 网页元素的添加与编辑 本章学习导读 本章主要讲述使用 Dreamweaver 8中的可视化工具， 向网页中添加和编辑文本、图像、表格、影片、声音和其他 元素的过程。通过本章学习，读者应该掌握以下内容： 添加文本和设置文本格式 图像的添加与编辑 媒体的添加与编辑 表单的添加与编辑 第12章 网页元素的添加与编辑 12.1 添加文本和设置文本格式 Dreamweaver 8提供了多种向文档中添加文本和设置文 本格式的方法。这里主要描述如何添加文本、设置字体类型、 大小、颜色和对齐属性，以及HTML样式和层叠样式（CSS） 的创建和应用。 12.1.1 文本元素的添加和编辑 1．将文本添加到文档 2．添加空格和段落 3．文本格式的编辑 4．编辑字体列表 5．创建新列表 6．日期的添加 7．水平线和特殊字符的添加 第12章 网页元素的添加与编辑 12.1.2 HTML样式的应用 通过设置HTML样式，可以快速一致地将字体格式应用 于文档中的文本。HTML样式可由单个或多个HTML字体标 签属性（如颜色、字体、大小）以及其他格式属性（如粗体 或斜体）组成。 1．HTML样式面板 显示“HTML样式”面板的方法有如下两种： （1）选择“窗口/HTML样式”菜单。 （2）按Ctrl+F11键。 第12章 网页元素的添加与编辑 2．创建HTML样式 可以用两种方法创建样式：基于所选文本创建样式或者在“HTML 样 式”面板中通过选择格式属性来创建样式。 （1）创建新的HTML样式。在“HTML样式”面板中，单击“新建样式” 图标（+）；也可以选择“文本/HTML样式/新建样式”菜单，出现 “定义 HTML样式”对话框。在对话框中设置样式属性，单击“确定”按钮，保存 样式。 （2）基于现有文本创建新的HTML样式。在文档中，选择包含新 HTML样式格式的文本。在“HTML样式”面板中，单击右下角的“新建样 式”图标（+），出现“定义HTML样式”对话框。在对话框中就显示出所 选文本的格式属性，根据需要编辑这些属性就可以将其保存为一个新的 样式。 3．编辑HTML样式的属性 （1）在“HTML样式”面板中，选择一种样式。 （2）右击鼠标从上下文菜单中选择“编辑”，或者双击HTML样式并 从上下文菜单中选择“编辑”。 （3）在“定义HTML样式”对话框中，查看或修改样式属性。 第12章 网页元素的添加与编辑 12.1.3 层叠样式（CSS）的应用 1．CSS样式概述 CSS样式表是一系列格式规则，它们控制网页内容的外观。使用CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特 定的字体和样式。 CSS样式可以控制许多仅用HTML无法控制的属性。例如，可以指定 自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。 CSS样式的主要优点是提供便利的更新功能；更新CSS样式时，使用 该样式的所有文档的格式都自动更新为新样式。 2．创建新的CSS样式 （1）单击“CSS样式”面板右上角的扩展按钮，选择下拉列表中的“新建” 菜单，打开“新建CSS规则”对话框。 （2）为新建CSS样式输入或选择名称、标记或选择器。 （3）在“定义在”区域选择定义的样式位置，可以是“新建样式表文件”或 “仅对该文档”。 （4）“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、 区块、方框、边框、列表、定位和扩展8项。 第12章 网页元素的添加与编辑 3．编辑CSS样式 选中需要编辑的样式类型，选择上图中的“编辑”项或直接单击“编辑 样式”按钮 ，在弹出的“CSS规则定义”对话框中修改相应的设置。编辑完 成后单击“确定”按钮，CSS样式就编辑完成了。 4．应用自定义（Class）CSS样式 鼠标右键单击在网页中被选中的元素，在弹出的快捷菜单中选择 “CSS样式”，在其子菜单中选择需要的自定义样式。 5．附加样式表 CSS样式表是一个包含样式和格式规范的外部文本文件。编辑外部 CSS样式表时，链接到该CSS样式表的所有文档全部更新以反映所做的 更改。可以导出文档中包含的CSS样式以创建新的CSS样式表，然后附 加或链接到外部样式表以应用那里所包含的样式。 第12章 网页元素的添加与编辑 12.2 图像的添加与编辑 图像通常用来添加图形界面（例如导航按钮）、形象直观的内容（例 如照片）或交互式设计元