网页制作文字设置.ppt

1、第2章 设置文字,第2章 设置文字,2.1 文字的应用 2.2 制作一个简单的网页 2.3 CSS样式 2.4 应用CSS样式实例 2.5插入滚动字幕,2.1 文字的应用,2.1.1 文字的输入 2.1.2 插入水平线 2.1.3 插入日期 2.1.4 文字的编辑,2.1.1 文字的输入,1.普通字符 普通字符可以直接在页面上输入 也可以在其他文本编辑软件中输入后，将其复制到Dreamweaver 8.0中 也可以把word文件直接导入到编辑窗口,2.特殊字符 单击“窗口”菜单中的“插入”命令，打开“插入”面板，在面板中的下拉列表中选择“文本”选项，单击“其它字符”图标下拉按钮，从中选择要插入

2、的特殊字符，如果这里没有，单击“其他字符”命令，此时出现“插入其它字符”对话框，在其中可以选择所需要的字符。 也可以单击“插入”菜单中选项“HTML”，在弹出的子菜单中单击“特殊字符”，在“特殊字符”的级联菜单中选择需要插入的特殊字符插入所需要的特殊字符。,2.1.2 插入水平线,选择“插入”菜单中的“HTML”子菜单下的“水平线”命令 单击“插入”栏中的“HTML”选项卡，在其中单击水平线按钮即可添加水平线。,2.1.3 插入日期,“常用”插入工具栏中的插入日期图标； 单击“插入”菜单“日期”选项，打开“插入日期”对话框。,2.1.4 文字的编辑,用鼠标选中要格式化的文本，此时属性面板上显示

3、的就是当前文字的属性。 （如果属性面板没有打开，单击“窗口”菜单中的“属性”命令可以打开属性面板）,2.2 制作一个简单的网页,在认识了Dreamweaver之后，接下来我们将利用文字和图片，完成“数学与计算机”系网站主页的内容，学习在Dreamweaver中输入并设置文字格式的基本操作，完成效果如图所示。,2.3 CSS样式,2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式,2.3.1 创建CSS样式,步骤1 通过单击“文本”菜单中“CSS样式”子菜单的“新建”命令，打开“新建CSS规则”对话框， 使用菜单“

4、窗口”中“CSS样式”打开“设计”面板组中的“CSS样式”面板，单击CSS面板下面的新建CSS规则按钮，打开“新建CSS规则”对话框。,步骤2：定义您要创建的 CSS 样式的类型： （1）若要创建可作为 class 属性应用于文本范围或文本块的自定义样式，请选择“类”选项，然后在“名称”文本框中输入样式名称。 类名称必须以句点开头，并且可以包含任何字母和数字组合（例如，.myhead1）。如果您没有输入开头的句点，Dreamweaver 将自动为您输入。 （2）若要重定义特定 HTML 标签的默认格式设置，请选择“标签”选项，然后在“标签”文本框中输入一个 HTML 标签，或从弹出式菜单中选择

5、一个标签。 （3）若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置，请选择“高级”选项，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:hover、a:link 和 a:visited。,步骤3：选择定义样式的位置： （1）若要创建外部样式表，请选择“新建样式表文件”。 （2）若要在当前文档中嵌入样式，请选择“仅对该文档”。 步骤4：单击该对话框中的“确定”按钮，即可退出该对话框，弹出“CSS规则定义”对话框。,2.3.2 将外部样式表导入到当前文档,步骤1：在CSS面

6、板上，单击附加样式表按钮，打开“链接外部样式表对话框”，单击对话框中“浏览”按钮，浏览到外部 CSS 样式表，或者直接在“文件/URL”框中键入该样式表的路径。,步骤2：在“添加为”中，选择其中的一个选项： 若要创建当前文档和外部样式表之间的链接，请选择“链接”。如果希望导入而不是链接到外部样式表，请选择“导入”。 步骤3：在“媒体”弹出式菜单中，指定样式表的目标媒介。 步骤4：单击“预览”按钮确认样式表是否将所需的样式应用于当前页面。 步骤5：单击“确定”，完成导入操作。,2.3.3 重新编辑和删除CSS样式,首先在CSS样式面板中选择一种不需要的样式，然后单击“编辑样式”按钮，就可以重新编

7、辑CSS样式了；如果单击“删除CSS规则”按钮，就可以删除“CSS 样式”面板中的所选样式，并从应用该规则的所有元素中删除格式。,2.3.4 应用CSS样式,定义了CSS样式后，可以将这些CSS样式应用于网页中的文本、图像、Flash等对象。具体的方法如下。 （1）利用“CSS样式”面板 首先选中要应用CSS样式的对象，可以是文本、图像和Flash等对象。然后鼠标右键单击“CSS样式”面板中相应的样式名称，弹出它的快捷菜单，再单击该菜单中的“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式的文本对象，在其“属性”栏的“样式”下拉列表框中选择需要的CSS样式名称，即可将选中的CSS样

8、式应用于选中的文本对象。,2.4 应用CSS样式实例,通过本例制作，要学会如何创建、修改、应用及删除样式，我们设置“数学与计算机系”网站中网页为例，利用CSS样式设置网页中文字的行距设置为1.5倍行距。,2.5插入滚动字幕,2.5.1滚动文字基础知识 2.5.2文字移动的实例,2.5.1滚动文字基础知识,1.基本语法 滚动文字 2.文字移动属性的设置 （1）滚动方向属性direction 可以设定文字滚动的方向，分别为向左（left）、向右（right）、向上（up）、向下（down），使滚动的文字具有更多的变化。 基本语法： 滚动文字,（2）滚动方式属性behavior 通过这个属性能够设定

9、不同方式的滚动文字效果。如滚动的循环往复、交替滚动、单次滚动等。 基本语法： 滚动文字 （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： 滚动文字,（4）滚动速度属性scrollamout 通过这个属性能够调整文字滚动的速度。 基本语法： 滚动文字 （5）滚动延迟属性scrolldelay 通过这个属性，可以在每一次滚动的间隔产生一段时间的延迟。 基本语法： 滚动文字,3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： 滚动文字 对方方式=top、middle、bottom，对齐上沿、中间、下沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： 滚动文字,（3）滚动范围属性