动态网页设计与制作实用教程（第三版）电子教案程伟渊 第12章.pptVIP

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