第5章 样式与行为.ppt

1、5.1样式表及其分类。样式表是网页制作中广泛使用的技术。它通过设置HTML代码标签来格式化字体、颜色、填充、边距和单词间距。如果您想使用样式表更改网页中某些特定文本的样式，可以直接使用自定义样式表，而不是经常使用属性面板。特别是，使用样式表还有另一个优势。当人们浏览您的网页时，无论您选择显示何种字体，网页中文本的大小都不会改变。样式表可以分为HTML样式表和CSS样式表。5.2使用超文本标记语言样式，超文本标记语言样式表可以设置整个段落或选择相应的文本。首先，您应该选择相应的段落或文本，然后在“HTML样式”浮动面板中选择相应的样式，最后单击“应用”按钮。单击窗口右侧浮动面板组中“设计”左侧的

2、箭头，然后单击打开面板中的“超文本标记语言样式”选项卡将其打开。在“超文本标记语言样式”选项卡上，单击“添加超文本标记语言样式”，打开“定义超文本标记语言样式”对话框。在“定义超文本标记语言样式”对话框中，设置各种格式。输入名称，然后单击确定完成设置。确定光标的位置，然后单击样式表中的样式将该样式应用于文本。5.3使用CSS样式，这是级联样式表的缩写。它允许作者给超文本标记语言文档添加样式。对于设计师来说，这是一个非常灵活的工具。不需要在文档结构中编写复杂的样式定义，它可以分离文档的所有样式规范，在行中定义它们，在标题中定义它们，甚至可以将它们作为外部样式文件用于HTML调用。CSS已经成为当

3、前网页设计中不可或缺的技术。5.3.1使用CSS样式将行距增加1。单击窗口右侧“浮动面板”中“设计”左侧的箭头，然后单击打开面板中的“CSS样式”选项卡将其打开。在“CSS样式”选项卡上，单击“新建CSS样式”按钮以打开“新建CSS样式”对话框。在名称字段中输入样式名称。单击后，弹出“将样式表文件另存为”对话框。在文件名右侧的文本框中输入hangjv。单击“确定”，在网站目录中生成一个名为hangjv.css的样式表文件。5.3.1使用CSS样式增加行距。2、在行式CSS样式定义对话框中，点击行式高度框，在下拉选项中选择(值)，然后点击其右边的文本框，并在下拉选项中选择双行式高度。删除“行高”

4、右侧文本框中的“(值)”，输入“1.5”，然后单击“确定”。单击鼠标使光标出现在第一段文字中，单击样式表中的样式“杭嘉图”，第一段文字的行距变为1.5倍。5.3.2使用CSS样式移除超链接下划线，单击窗口右侧“浮动面板”中“设计”左侧的箭头，然后单击打开面板中的“CSS样式”选项卡将其打开。在“CSS样式”选项卡上，单击“新建CSS样式”按钮以打开“新建CSS样式”对话框。在“新建CSS样式”对话框中，选择“使用CSS选择器”。然后单击选择器右侧下拉框中的箭头，从下拉选项中选择a :链接，单击确定，在将样式表另存为对话框中输入文件名，在a :链接的CSS样式定义对话框中选择无，然后单击确定。在

5、网页中，您可以发现所有超链接热区文本都没有下划线。5.4行为的简单应用，所谓的“行为”是响应网页中的事件而采取的动作。当一个动作被给予网页中的一个对象时，一个动作及其对应的事件被定义。事件可以是鼠标移动、网页打开和关闭、键盘使用等。操作可以是弹出问候、刷新页面、播放声音、检查用户的浏览器等。5.4.1行为，即所谓的“行为”，是响应网页中的事件而采取的动作。，将行为添加到网页以将行为附加到整个文档，并且网页中的所有元素，包括链接、图像、表格或任何其他超文本标记语言对象，都被赋予该行为。一个事件可以与多个动作相关联，并且每个动作的执行由浮动面板中的排列顺序决定。更改“行为”浮动面板中的行为顺序也会

6、更改行为的执行顺序。5.4.2向网页添加背景音乐，打开网页文件，点击窗口右下角的按钮，选择整个网页。在窗口右侧的浮动面板中，单击“设计”左侧的箭头，打开“设计”面板。在“设计”面板中，单击“行为”以打开“行为”选项卡。然后点按“添加行为”按钮，并从弹出式菜单中选择“播放声音”，以打开“播放声音”对话框。单击浏览按钮，找到音乐文件，然后单击确定。保存网页后，您可以通过在浏览器中打开网页来听音乐。5.4.3使用行为弹出对话框1。第一种方法是打开网页文件，点击窗口右下角的按钮选择整个网页。单击窗口右侧浮动面板中“设计”左侧的箭头，打开“设计”面板。在“设计”面板中，单击“行为”以打开“行为”选项卡。然后单击“添加行为”按钮，并从弹出菜单中选择“弹出信息”。在弹出的信息对话框中，输入要显示的信息，然后单击确定。完成设置。5.4.3使用行为弹出对话框2，第二种方法：使用“调用JavaScript”行为也可以带来同样的效果。重复上述操作，在创建行为时选择命令“调用JavaScript”，在对话框中输入：提醒(“显示内容”)，最后点击“确定”完成设置。5.4.4使用行为弹出网页窗口。首先，创建一个新的网页文件弹出。打开网页文件，点按窗口右下角的按钮，并选择整个网页。在窗口右侧的浮动面板中，单击“设计”左侧的箭头，打开“设计”面板。在“设计