《Dreamweavercs基础与实例教程第2章PPT课件》由会员分享,可在线阅读,更多相关《Dreamweavercs基础与实例教程第2章PPT课件(25页珍藏版)》请在金锄头文库上搜索。
1、第第2 2章章 设置文字设置文字第第2 2章章 设置文字设置文字 n2.1 2.1 文字的应用文字的应用n2.2 2.2 制作一个简单的网页制作一个简单的网页n2.3 CSS2.3 CSS样式样式n2.4 2.4 应用应用CSSCSS样式实例样式实例n2.52.5插入滚动字幕插入滚动字幕22.1 2.1 文字的应用文字的应用n2.1.1 2.1.1 文字的输入文字的输入n2.1.2 2.1.2 插入水平线插入水平线n2.1.3 2.1.3 插入日期插入日期n2.1.4 2.1.4 文字的编辑文字的编辑32.1.1 2.1.1 文字的输入文字的输入1.1.普通字符普通字符普通字符可以直接在页面上
2、输入:用鼠标单击网页编辑窗口中的空白区域,窗口中随即出现闪动的光标,标识输入文字的超始位置。选择适当的输入法即可输入文字。也可以在其他文本编辑软件(例如,在记事本、写字板、Word)中输入后,将其复制,然后在Dreamweaver 8.0中选择“编辑”菜单中的“粘贴”命令。也可以把word文件直接导入到编辑窗口,单击“文件”菜单中“导入”选项,在弹出的子菜单中选择“word文档”,打开“导入Word文档”对话框,在对话框中选择要导入的文档,单击“打开”按钮,即可导入文本。 42.2.特殊字符特殊字符定位光标后,单击“窗口”菜单中的“插入”命令,打开“插入”面板,在面板中的下拉列表中选择“文本”
3、选项,单击其它字符图标下拉按钮,从中选择要插入的特殊字符,如果这里没有,单击“其他字符”命令,此时出现“插入其它字符”对话框,在其中可以选择所需要的字符。也可以单击“插入”菜单中选项“HTML”,在弹出的子菜单中单击“特殊字符”,在“特殊字符”的级联菜单中选择需要插入的特殊字符插入所需要的特殊字符。 52.1.2 2.1.2 插入水平线插入水平线n在文档编辑区将插入点定位到所需位置,选择“插入”菜单中的“HTML”子菜单下的“水平线”命令或单击“插入”栏中的“HTML”选项卡,在其中单击水平线按钮即可添加水平线。初始绘制的水平线的格式往往不能满足实际需要,此时可通过属性面板对其进行修改。62.
4、1.3 2.1.3 插入日期插入日期n插入日期的方法很简单,首先定位光标,然后单击“常用”插入工具栏中的插入日期图标,或者单击“插入”菜单“日期”选项,打开“插入日期”对话框,如图所示,在对话框中选择合适的格式即可插入当前的日期。72.1.4 2.1.4 文字的编辑文字的编辑在Dreamweaver 8.0编辑窗口中,单击“窗口”菜单中的“属性”命令可以打开属性面板,然后用鼠标选中要格式化的文本,此时属性面板上显示的就是当前文字的属性。 82.2 2.2 制作一个简单的网页制作一个简单的网页n在认识了Dreamweaver之后,接下来我们将利用文字和图片,完成“数学与计算机”系网站主页的内容,
5、学习在Dreamweaver中输入并设置文字格式的基本操作,完成效果如图所示。 92.3 CSS2.3 CSS样式样式n2.3.1 2.3.1 创建创建CSSCSS样式样式n2.3.2 2.3.2 将外部样式表导入到当前文档将外部样式表导入到当前文档n2.3.3 2.3.3 重新编辑和删除重新编辑和删除CSSCSS样式样式n2.3.4 2.3.4 应用应用CSSCSS样式样式102.3.1 2.3.1 创建创建CSSCSS样式样式n步骤1:将插入点放在文档中,然后执行以下操作之一打开“新建CSS规则”对话框。(1)通过单击“文本”菜单中“CSS样式”子菜单的“新建”命令,打开“新建CSS规则”
6、对话框, (2)使用菜单“窗口”中“CSS样式”打开“设计”面板组中的“CSS样式”面板,单击CSS面板下面的新建CSS规则按钮,打开“新建CSS规则”对话框。 11n步骤2:定义您要创建的 CSS 样式的类型: (1)若要创建可作为 class 属性应用于文本范围或文本块的自定义样式,请选择“类”选项,然后在“名称”文本框中输入样式名称。类名称必须以句点开头,并且可以包含任何字母和数字组合(例如,.myhead1)。如果您没有输入开头的句点,Dreamweaver 将自动为您输入。(2)若要重定义特定 HTML 标签的默认格式设置,请选择“标签”选项,然后在“标签”文本框中输入一个 HTML
7、 标签,或从弹出式菜单中选择一个标签。 (3)若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置,请选择“高级”选项,然后在“选择器”文本框中输入一个或多个 HTML 标签,或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器(称作伪类选择器)包括 a:active、a:hover、a:link 和 a:visited。 12n步骤3:选择定义样式的位置: (1)若要创建外部样式表,请选择“新建样式表文件”。 (2)若要在当前文档中嵌入样式,请选择“仅对该文档”。 n步骤4:单击该对话框中的“确定”按钮,即可退出该对话框,弹出“CSS规则定义”对话框。132.3.2 2.3.
8、2 将外部样式表导入到当前文档将外部样式表导入到当前文档n步骤1:在CSS面板上,单击附加样式表按钮,打开“链接外部样式表对话框”,单击对话框中“浏览”按钮,浏览到外部 CSS 样式表,或者直接在“文件/URL”框中键入该样式表的路径。14n步骤2:在“添加为”中,选择其中的一个选项: 若要创建当前文档和外部样式表之间的链接,请选择“链接”。如果希望导入而不是链接到外部样式表,请选择“导入”。 n步骤3:在“媒体”弹出式菜单中,指定样式表的目标媒介。 n步骤4:单击“预览”按钮确认样式表是否将所需的样式应用于当前页面。 n步骤5:单击“确定”,完成导入操作。 152.3.3 2.3.3 重新编
9、辑和删除重新编辑和删除CSSCSS样式样式n首先在CSS样式面板中选择一种不需要的样式,然后单击“编辑样式”按钮,就可以重新编辑CSS样式了;如果单击“删除CSS规则”按钮,就可以删除“CSS 样式”面板中的所选样式,并从应用该规则的所有元素中删除格式。 162.3.4 2.3.4 应用应用CSSCSS样式样式n定义了CSS样式后,可以将这些CSS样式应用于网页中的文本、图像、Flash等对象。具体的方法如下。(1)利用“CSS样式”面板首先选中要应用CSS样式的对象,可以是文本、图像和Flash等对象。然后鼠标右键单击“CSS样式”面板中相应的样式名称,弹出它的快捷菜单,再单击该菜单中的“套
10、用”菜单命令。(2)利用“属性”栏选中要应用CSS样式的文本对象,在其“属性”栏的“样式”下拉列表框中选择需要的CSS样式名称,即可将选中的CSS样式应用于选中的文本对象。172.4 2.4 应用应用CSSCSS样式实例样式实例n通过本例制作,要学会如何创建、修改、应用及删除样式,我们设置“数学与计算机系”网站中网页为例,利用CSS样式设置网页中文字的行距设置为1.5倍行距。 182.52.5插入滚动字幕插入滚动字幕n2.5.12.5.1滚动文字基础知识滚动文字基础知识n2.5.22.5.2文字移动的实例文字移动的实例192.5.12.5.1滚动文字基础知识滚动文字基础知识1.1.基本语法基本
11、语法滚动文字 2.2.文字移动属性的设置文字移动属性的设置(1)滚动方向属性direction 可以设定文字滚动的方向,分别为向左(left)、向右(right)、向上(up)、向下(down),使滚动的文字具有更多的变化。基本语法:滚动文字20(2)滚动方式属性behavior通过这个属性能够设定不同方式的滚动文字效果。如滚动的循环往复、交替滚动、单次滚动等。基本语法:滚动文字(3)滚动循环属性loop通过这个属性能够让文字滚动循环进行。基本语法:滚动文字 21(4)滚动速度属性scrollamout通过这个属性能够调整文字滚动的速度。基本语法:滚动文字(5)滚动延迟属性scrolldela
12、y通过这个属性,可以在每一次滚动的间隔产生一段时间的延迟。基本语法:滚动文字223.3.外观外观(Layout)(Layout)设置设置(1)滚动文字对齐方式align基本语法:滚动文字对方方式=top、middle、bottom,对齐上沿、中间、下沿。(2)滚动背景颜色属性bgcolor在滚动文字的后面,可以添加背景颜色。基本语法:滚动文字23(3)滚动范围属性width、height对于各种方式的滚动方式,可以设定文字滚动的区域。基本语法:滚动文字242.5.22.5.2文字移动的实例文字移动的实例n通过本例制作,要学会,如何使网页中的文字运动起来,并学会使用滚动标识 中的各种属性,如滚动文字的方向、速度、延迟、背景颜色、区域等等。25