第2天上午 轻松创建多彩的文本网页
本章学习流程图
知识导读
一般来说,网页中显示最多的就是文字,它们通过不同的排版方式和设计风格排列在网页上,并提供丰富的信息。所以对文本的控制及布局在设计网页中占了很大的比重,能否对各种文本控制手段运用自如,是决定网页设计是否美观、富有创意及提高工作效率的关键。今天上午我们将主要介绍网页中文字的基本操作方法、设置文字的格式、页面格式和网页文本的创建等相关知识。
完成今天上午的内容后,您将能够
◎ 设置页面属性
◎ 输入文本
◎ 设置文本格式
◎ 创建项目列表和编号列表
◎ 设置头信息
◎ 创建基本文本的网页
实例展示
插入水平线
创建基本文本网页
3.1 网页的创建和保存
网页的创建和保存是Dreamweaver CS4网页操作中最基础的部分,创建HTML网页的步骤如下。
1 启动Dreamweaver CS4,执行“文件”|“新建”命令,在“新建文档”对话框的“空白页”选项中选择“页面类型”,在其下拉列表框中选择“HTML”,如图3-1所示。单击“创建”按钮,显示新HTML网页的编辑窗口,如图3-2所示。
图3-1 “新建文档”对话框
图3-2 创建空白网页
2 执行“文件”|“保存”命令,打开“另存为”对话框,在“保存在”下拉列表中选择保存路径,在“文件名”文本框内输入文件名称“index”,如图3-3所示。
图3-3 “另存为”对话框
3 单击“保存”按钮,返回网页编辑窗口,在文档工具面板上显示文件名为“index.htm”,如图3-4所示,网页创建完成。
图3-4 文档工具面板显示保存的文件名
3.2 设置页面属性
创建文档之后,在编辑文档前还需要对页面属性进行必要的设置,主要是一些影响整个网页的参数。Dreamweaver“页面属性”对话框中包括“外观(CSS)”、“链接(CSS)”、“标题(CSS)”、“标题/编码”和“跟踪图像”等CSS规则。
3.2.1 外观
可使用“页面属性”对话框指定Web页面的若干基本布局选项,包括字体、背景颜色和背景图像。
执行“修改”|“页面属性”命令,弹出“页面属性”对话框,在“分类”选项中选择“外观(CSS)”选项,如图3-5所示。
图3-5 “外观(CSS)”页面属性
指点迷津
怎样将页面的上边距和下边距都设置为0呢?
要使页面中的上下部分不留白,需要将页面的上边距与下边距都设置为0。在Dreamweaver CS4中可以打开“页面属性”对话框,在“外观”页面属性中将页面的上边距与下边距都设置为0。
“外观(CSS)”类别主要设置以下各个选项。
◎ 在“页面字体”右边的文本框中可以设置文本的字体。
◎ 在“大小”右边的文本框中可以设置网页中文本的字号。
◎ 在“文本颜色”右边的文本框中可以设置网页文本的颜色。
◎ 在“背景颜色”右边的文本框中可以设置网页的背景颜色。
◎ 单击“背景图像”右边的“浏览”按钮,会弹出“选择图像源文件”对话框,在对话框中可以选择一个图像作为网页的背景图像。
◎ 在“重复”右边的下拉列表中指定背景图像在页面上的显示方式。选择“横向重复”选项即可横向平铺图像。选择“纵向重复”选项即可纵向平铺图像。
◎“左边距”和“右边距”指定页面左边距和右边距的大小。
◎“上边距”和“下边距”指定页面上边距和下边距的大小。
提示
如果不设置左边距和上边距,就会看到顶部和左边有明显的空白。
在“页面属性”对话框的此类别中设置属性会导致页面采用HTML格式,而不是CSS格式。执行“修改”|“页面属性”命令,弹出“页面属性”对话框,在“分类”选项中选择“外观(HTML)”选项,如图3-6所示。
图3-6 “外观(HTML)”页面属性
“外观(HTML)”类别主要设置以下各个选项。
◎ 单击“背景图像”右边的“浏览”按钮,会弹出“选择图像源文件”对话框,在对话框中可以选择一个图像作为网页的背景图像。
◎ 在“背景”右边的文本框中可以设置页面的背景颜色。单击“背景颜色”框并从颜色选择器中选择一种颜色。
◎ 在“文本”右边的文本框中可以指定显示字体时使用的默认颜色。
◎“链接”指定应用于链接文本的颜色。
◎“已访问链接”指定应用于已访问链接的颜色。
◎“活动链接”指定当鼠标(或指针)在链接上单击时应用的颜色。
◎“左边距”和“上边距”指定页面左边距和上边距的大小。
◎“边距宽度”和“边距高度”指定页面边距的宽度和高度。
3.2.2 链接(CSS)
可以定义默认字体、字体大小、链接颜色、已访问链接的颜色以及活动链接的颜色。
在对话框中的“分类”选项中选择“链接(CSS)”选项,如图3-7所示。
图3-7 “链接(CSS)”页面属性
“链接(CSS)”类别主要设置以下各个选项。
◎ 在“链接字体”右边的文本框中可以设置页面中超链接文本的字体。
◎ 在“大小”右边的文本框中可以设置页面中超链接文本的字体大小。
◎ 在“链接颜色”右边的文本框中可以设置页面中超链接的颜色。
◎ 在“变换图像链接”右边的文本框中可以设置页面中变换图像后的超链接文本颜色。
◎ 在“已访问链接”右边的文本框中可以设置网页中访问过的超链接的颜色。
◎ 在“活动链接”右边的文本框中可以设置网页中激活的超链接的颜色。
◎ 在“下画线样式”右边的文本框中可以自定义网页中鼠标上滚时采用的下画线样式。
3.2.3 标题(CSS)
指点迷津
这里所说的“标题”指的并不是页面的标题内容,而是可以应用在具体文本中各级不同标题上的一种“标题字体样式”。在分类中可以定义“标题字体”及6种预定义的标题字体样式,包括粗体、斜体、大小和颜色。
在“页面属性”对话框的“分类”选项中选择“标题(CSS)”选项,如图3-8所示。
图3-8 “标题(CSS)”页面属性
“标题(CSS)”类别主要设置以下各个选项。
◎ 在“标题字体”文本框中可以设置标题文字的字体。
◎ 在“标题1”文本框中可以设置一级标题字的字号和颜色。
◎ 在“标题2”文本框中可以设置二级标题字的字号和颜色。
◎ 在“标题3”文本框中可以设置三级标题字的字号和颜色。
◎ 在“标题4”文本框中可以设置四级标题字的字号和颜色。
◎ 在“标题5”文本框中可以设置五级标题字的字号和颜色。
◎ 在“标题6”文本框中可以设置六级标题字的字号和颜色。
3.2.4 标题/编码
标题/编码页面属性类别可指定特定于制作Web页面时所用语言的文档编码类型,以及指定要用于该编码类型的Unicode范式。
在“页面属性”对话框的“分类”选项中选择“标题/编码”选项,如图3-9所示。
图3-9 “标题/编码”页面属性
“标题/编码”类别主要设置以下各个选项。
◎ 在“标题”文本框中可以输入网页的标题。
◎ 在“文档类型(DTD)”下拉列表中指定文档类型定义。
◎ 在“编码”下拉列表中可以设置网页的文字编码。通常设置为中文,应用“简体中文(GB2312)”。
◎“重新载入”按钮用于转换现有文档或者使用新编码重新打开它。
◎“Unicode标准化表单”仅在选择UTF-8作为文档编码时启用。
◎“包括Unicode签名(BOM)”可在文档中包括字节顺序标记(BOM)。
指点迷津
怎样定义网页语言(字符集)?
在制作网页过程中,首先要定义网页语言,而设计者用所见即所得的HTML工具时,我们通常都没有注意到这个问题,因为它是默认设置。要设置的语言可以在HTML代码状态下找到。
<meta http£?equiv="Content Type" content="text/html; charset=gb2312">表示把charset=gb2312改换成其他语言代码,如英文charset=en。
3.2.5 跟踪图像
在“页面属性”对话框的“分类”选项中选择“跟踪图像”选项,如图3-10所示。
图3-10 “跟踪图像”页面属性
“跟踪图像”类别主要设置以下各个选项。
◎“跟踪图像”指定在复制设计时作为参考的图像。该图像只供参考,当文档在浏览器中显示时并不出现。
◎“透明度”确定跟踪图像的不透明度,可以设置为从完全透明到完全不透明。
知识要点
可以在“跟踪图像”文本框中选择一幅图像,它将显示在网页编辑窗口的背景中,这样在排版时可以提供引导网页的设计。但是有一点一定要明确,“跟踪图像”只是起辅助编辑的作用,最终并不会显示在浏览器中,所以千万不要把它当作页面的背景图像来使用。
3.3 输入文本
网页文本的编辑是网页制作最基本的操作,灵活应用各种文本属性可以排版出更加美观、条理清晰的网页。文本属性较多,各种设置比较详细,在学习时不要着急,可以一点点实验体会。在Dreamweaver中可以通过直接输入、复制和粘贴的方法将文本插入到文档中,可以在文本的字符与行之间插入额外的空格,还可以插入特殊字符和水平线等。
提示
在HTML语法中分段所使用的标注为<p>,而强迫分行的标注为<br>。
3.3.1 添加普通文本
文本是基本的信息载体,是网页中的基本元素,浏览网页时,文本是获取信息最直接、最直观的方式。在Dreamweaver中添加文本的方法非常简单,如图3-11所示是添加文本后的效果,具体操作步骤如下。
图3-11 添加文本
起始文件:CD-ROM/起始文件/第2天上午/3.3.1/index.htm
完成文件:CD-ROM/完成文件/第2天上午/3.3.1/index1.htm
1 打开网页文档,如图3-12所示。
图3-12 打开网页文档
2 将光标置于要输入文本的位置并输入文本,如图3-13所示。
图3-13 输入文本
提示
在记事本中复制的文字段落,除非段落之间有空行,否则均以强迫分行来进行处理。所以如果是将纯文本文件复制到Dreamweaver中,要注意分行的问题。
3 保存文档,按F12键在浏览器中预览,效果如图3-11所示。
3.3.2 添加特殊字符
制作网页时,有时要输入一些键盘上没有的特殊字符,如日元符号、注册商标等,这就需要使用Dreamweaver的特殊字符功能。下面通过实例讲述特殊字符的添加,效果如图3-14所示,具体操作步骤如下。
起始文件:CD-ROM/起始文件/第2天上午/3.3.2/index.htm
完成文件:CD-ROM/完成文件/第2天上午/3.3.2/index1.htm
1 打开网页文档,如图3-15所示。
图3-14 特殊字符的添加效果
图3-15 打开网页文档
2 将光标置于要插入特殊字符的位置,执行“插入”|“HTML”|“特殊字符”|“版权”命令,弹出Dreamweaver提示框,如图3-16所示。
图3-16 Dreamweaver提示框
3 单击“确定”按钮,插入特殊字符,如图3-17所示。
图3-17 插入特殊字符
4 保存文档,按F12键在浏览器中预览,效果如图3-14所示。
高手支招
插入特殊字符的方法还有以下两种:
◎ 单击“文本”插入栏中 按钮右侧的小三角形,在弹出的菜单中选择要插入的特殊符号。
◎ 执行“插入”|“HTML”|“特殊字符”|“其他字符”命令,弹出“插入其他字符”对话框,在对话框中选择相应的特殊符号,单击“确定”按钮,也可以插入特殊字符。
3.3.3 添加空格
在制作网页的时候,有时需要输入空格,但有时却无法输入。导致无法正确输入空格的原因可能是输入法错误,只有正确使用输入法才能够解决这个问题。在字符之间添加空格的方法非常简单,效果如图3-18所示,具体操作步骤如下。
图3-18 在字符之间添加空格效果
起始文件:CD-ROM/起始文件/第2天上午/3.3.3/index.htm
完成文件:CD-ROM/完成文件/第2天上午/3.3.3/index1.htm
1 打开网页文档,如图3-19所示。
图3-19 打开网页文档
2 将光标置于要添加空格的位置,切换到代码视图,输入“ ”,如图3-20所示。
图3-20 输入代码
3 在代码视图中输几次代码,在设计视图中就会出现几个空格。保存文档,按F12键在浏览器中预览,效果如图3-18所示。
高手支招
我们还可以使用以下两种方法插入空格。
◎ 如果使用智能ABC输入法,按“Shift+空格”组合键,这时输入法的属性栏上的半月形就变成了圆形,然后再按空格键,空格就出来了。
◎ 切换到“文本”插入栏,在“字符”下拉列表选择“不换行空格”选项,就可直接输入空格。
3.3.4 插入水平线
很多网页在其下方会显示一条水平线,以分割网页主题内容和底端的版权声明等,根据设计需要,也可以在网页任意位置添加水平线,达到区分网页中不同内容的目的。下面通过实例讲述在网页中插入水平线,效果如图3-21所示,具体操作步骤如下。
图3-21 插入水平线效果
起始文件:CD-ROM/起始文件/第2天上午/3.3.4/index.htm
完成文件:CD-ROM/完成文件/第2天上午/3.3.4/index1.htm
1 打开网页文档,如图3-22所示。
图3-22 打开网页文档
2 将光标置于要插入水平线的位置,执行“插入”|“HTML”|“水平线”命令,选择命令后,插入水平线,如图3-23所示。
图3-23 插入水平线
3 保存文档,按F12键在浏览器中预览,效果如图3-21所示。
高手支招
如何更改水平线的颜色?
如果需要设置水平线的颜色,只要在代码中添加颜色属性即可,如<hr color="#FF0000">。
3.4 设置文本格式
文本属性检查器中包括“HTML”和“(CSS)”两种定义文本的格式。应用“HTML”格式时,Dreamweaver会将属性添加到页面正文的“HTML”代码中;应用“CSS”格式时,Dreamweaver会将属性写入文档头或单独的样式表中。Dreamweaver将两个属性检查器(CSS属性检查器和HTML属性检查器)集成为一个属性检查器。
3.4.1 在HTML属性检查器中设置文本格式
选中要设置格式的文本,在“属性”面板中的“格式”下拉列表中选择“标题4”选项,如图3-24所示。
图3-24 选择“标题4”选项
知识要点
在HTML属性检查器中设置文本格式的选项如下。
◎ 格式:设置所选文本的段落样式。
◎ ID:为所选内容分配一个ID。
◎ 类:显示当前应用于所选文本的类样式。如果没有对所选内容应用过任何样式,则弹出菜单显示“无CSS样式”。如果已对所选内容应用了多个样式,则该菜单是空的。
◎ 粗体:根据“首选参数”对话框的“常规”类别中设置的样式首选参数,将<b>或<strong>应用于所选文本。
◎ 斜体:根据“首选参数”对话框的“常规”类别中设置的样式首选参数,将<i>或<em>应用于所选文本。
◎ 项目列表:创建所选文本的项目列表。如果未选择文本,则启动一个新的项目列表。
◎ 编号列表:创建所选文本的编号列表。如果未选择文本,则启动一个新的编号列表。
◎ 缩进和凸出:通过应用或删除blockquote标签,缩进所选文本或删除所选文本的缩进。在列表中,缩进创建一个嵌套列表,而删除缩进则取消嵌套列表。
◎ 链接:创建所选文本的超文本链接。可以单击文件夹图标浏览站点中的文件,也可以输入URL,还可以将“指向文件”图标拖到“文件”面板中的文件上,或将文件从“文件”面板拖到框中。
◎ 标题:为超级链接指定文本工具提示。
◎ 目标:指定将链接文档加载到框架或窗口:
_blank:将链接文件加载到一个新的、未命名的浏览器窗口。
_parent:将链接文件加载到该链接所在框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的,则将链接文件加载到整个浏览器窗口中。
_self:将链接文件加载到该链接所在的同一框架或窗口中。此目标是默认的,因此通常不需要指定它。
_top:将链接文件加载到整个浏览器窗口,从而删除所有框架。
3.4.2 在属性检查器中编辑CSS规则
Dreamweaver使用层叠样式表(CSS)设置文本格式。这样能更好地控制网页设计,同时改进功能以提供辅助功能并减小文件大小。CSS属性检查器能够访问现有样式,也能够创建新样式。
1 选中要设置的文本,在“属性”面板的“字体”下拉列表中选择“宋体”,如图3-25所示。
图3-25 设置文本字体
2 弹出“新建CSS规则”对话框,在“选择器名称”中输入名称,如图3-26所示。
图3-26 “新建CSS规则”对话框
指点迷津
在CSS属性检查器中设置文本格式的选项如下。
◎编辑规则:打开目标规则的“CSS规则定义”对话框。如果从“目标规则”弹出菜单中选择“新建CSS规则”并单击“确定”按钮,Dreamweaver会打开“新建CSS规则”对话框。
◎ CSS面板:打开“CSS样式”面板并在当前视图中显示目标规则的属性。
◎ 字体:更改目标规则的字体。
◎ 大小:设置目标规则的字体大小。
◎ 文本颜色:将所选颜色设置为目标规则中的字体颜色。
◎ 粗体:向目标规则添加粗体属性。
◎ 斜体:向目标规则添加斜体属性。
◎ 左对齐、居中对齐和右对齐:向目标规则添加各个对齐属性。
3 单击“确定”按钮,设置字体。
3.4.3 添加字体
Dreamweaver CS4中自带的字体比较少,不能满足编辑网页文本的要求,在Dreamweaver的字体列表中可以添加更多的字体,具体操作步骤如下。
1 在“属性”面板的“字体”下拉列表中选择“编辑字体列表”选项,弹出“编辑字体列表”对话框,在对话框中的“可用字体”列表框中选择要添加的字体,单击 按钮添加到左侧的“选择的字体”列表框中,在“字体列表”中也会显示新添加的字体,如图3-27所示,重复以上操作即可添加多种字体。若要取消已添加的字体,可以选中该字体并单击 按钮。
图3-27 “编辑字体列表”对话框
2 完成一个字体样式的编辑后,单击 按钮即可进行下一个样式的编辑。若要删除某个已经编辑的字体样式,可以选中该样式并单击 按钮。
3 完成字体样式的编辑后,单击“确定”按钮关闭该对话框。
高手支招
也可以执行“文本”|“字体”|“编辑字体列表”命令,在弹出的“编辑字体列表”对话框中添加新字体。
3.4.4 设置字体的大小
在文本属性面板左侧下拉列表中可以选择常用的字号大小,没有合适选项的话还可以在文本框中输入自己想要的字号,之后右侧的下拉列表变成可编辑状态,可以从中选择字号的单位,“像素(px)”和“点数(pt)”是较为常用的单位。在目前的网页中,文本大小通常设置为9pt。选中要设置文字大小的文本,在“属性”面板中的“大小”下拉列表中选择12,如图3-28所示。
图3-28 设置文字大小
3.4.5 设置字体颜色
在Dreamweaver CS4中不仅可以设置文本的字体和大小,还可以设置文本颜色。文本的颜色被用来美化版面与强调文章的重点,具体操作步骤如下。
1 选中设置颜色的文本,在“属性”面板中单击“文本颜色”按钮,弹出如图3-29所示的调色板。
图3-29 调色板
2 在调色板中选中所需的颜色,鼠标变为形状,单击鼠标左键即可选取该颜色。
如果调色板中的颜色不能满足需要时,单击按钮,弹出“颜色”对话框,如图3-30所示,在对话框中选择需要的颜色即可。
图3-30 “颜色”对话框
高手支招
设置文本的颜色也可以在“属性”面板的“文本颜色”输入框中输入颜色的十六进制代码,如常见的#FF0000(红色)、#00FF00(绿色)和#0000FF(蓝色)等。
3.4.6 对齐段落
在“属性”面板中有4种对齐方式,每一个对齐方式分别对应一个按钮。 按钮表示“左对齐”;按钮表示“居中对齐”;按钮表示“右对齐”;按钮表示“两端对齐”。选中要设置对齐方式的文本,在“属性”面板中单击“右对齐”按钮,效果如图3-31所示。
图3-31 设置为右对齐
提示
为什么让一行字居中,其他行也居中?
在Dreamweaver中进行对齐操作时,默认的区域是P、H1~H6、DIV等格式标识符,如果语句没有用上述标识符隔开,Dreamweaver会将整段文字都进行居中处理,解决方法就是将居中文本用P隔开。
3.4.7 缩进段落
所谓缩进主要是相对于文档窗口左端而言,将文字缩进,以表示与普通段落的区别。将光标置于缩进的段落中,执行“格式”|“缩进”命令,即可将当前段落向前缩进,如图3-32所示。
图3-32 当前段落向前缩进
提示
将光标置于缩进的段落中,在“属性”面板中单击“文本缩进”按钮 ,即可将当前的段落向左缩进。
3.5 创建项目列表和编号列表
列表分为项目列表和编号列表两种,列表常应用在条款或列举等类型的文件中,用列表的方式进行罗列可以使内容更直观。
3.5.1 创建项目列表
项目列表又称为无序列表,这种列表的项目之间没有先后顺序。项目列表前面一般用项目符号作为前导字符,如图3-33所示是创建项目列表的效果,具体操作步骤如下。
图3-33 创建项目列表的效果
起始文件:CD-ROM/起始文件/第2天上午/3.5.1/index.htm
完成文件:CD-ROM/完成文件/第2天上午/3.5.1/index1.htm
1 打开网页文档,如图3-34所示。
图3-34 打开网页文档
2 将光标置于要创建项目列表的位置,执行“文本”|“列表”|“项目列表”命令,即可创建项目列表,如图3-35所示。
图3-35 创建项目列表
3 保存文档,按F12键在浏览器中预览,效果如图3-33所示。
提示
单击“属性”面板中的“项目列表”按钮 ,也可以创建项目列表。
3.5.2 创建编号列表
编号列表又称为有序列表,其文本前面通常有数字前导字符,其中的数字可以是英文字母、阿拉伯数字或罗马数字等符号。将光标置于要创建编号列表的位置,执行“文本”|“列表”|“编号列表”命令,即可创建编号列表,如图3-36所示。
图3-36 创建编号列表
3.6 设置头信息
在网页文档中,<head>和</head>之间的内容是文件头,文件头一般包括Meta标签、关键字和说明等。
指点迷津
页面头部的元信息标签包括哪些?
<meta>标记的功能是定义页面中的信息,这些文件信息并不会出现在浏览器页面之中,只会显示在源代码中。<meta>标记是实现元数据的主要标记,它能够提供文档的关键字、作者、描述等多种信息,在HTML的头部可以包括任意数量的<meta>标记。
3.6.1 设置标题
执行“查看”|“文件头内容”命令,在文档窗口中的工具栏下方显示文件头窗口,如图3-37所示。在文件头窗口中单击 按钮,打开“属性”面板,如图3-38所示,在面板中输入网页的标题即可。
图3-37 显示文件头窗口
图3-38 设置网页标题
3.6.2 设置Meta
Meta元素用来描述网页文件自身的信息。Meta元素对网页非常重要,它可以用于记录有关当前页面的信息,也可以用来向服务器提供信息。插入Meta信息的具体操作步骤如下。
1 执行“插入”|“HTML”|“文件头标签”|“Meta”命令,弹出META对话框,如图3-39所示。
图3-39 META对话框
2 在对话框中进行相应的设置,单击“确定”按钮,在代码视图中就可以看到插入的Meta信息。
知识要点
Meta对话框中可以进行如下设置。
◎ 属性:在其下拉列表中包括“名称”和“http-equivalent”两个选项。
名称:主要用于说明网页,对应于内容,以便于搜索和分类。
http-equivalent:相当于HTTP文件头的作用,可以直接影响网页的传输。
◎ 值:表示Meta的类型。
◎ 内容:“值”选项所对应的Meta里的信息。
3.6.3 插入关键字
关键字也就是与网页的主题内容相关的简短而有代表性的词汇,这是给网络中的搜索引擎准备的。关键字一般要尽可能地概括网页内容,这样浏览者只要输入很少的关键字,就能最大程度地搜索网页。插入关键字的具体操作步骤如下。
1 执行“插入”|“HTML”|“文件头标签”|“关键字”命令,弹出“关键字”对话框,如图3-40所示。
图3-40 “关键字”对话框
2 在对话框中的“关键字”文本框中输入有关网页的关键字,单击“确定”按钮,即可插入关键字。
3.6.4 插入说明
如果关键字忌讳的是词汇的冗长,那么说明忌讳的是词汇的过于简短。关键字是为了让搜索引擎最大程度地捕捉到网页,说明是为设计者提供了可以详细说明网页内容的机会。插入说明文字的具体操作步骤如下。
1 执行“插入”|“HTML”|“文件头标签”|“说明”命令,弹出“说明”对话框,如图3-41所示。
图3-41 “说明”对话框
2 在对话框中的“说明”文本框中输入有关网页的说明信息,单击“确定”按钮即可。
3.6.5 插入刷新
在网页中插入刷新后,在浏览器里浏览这个网页文件时,每到设定的时间就会自动跳转到某个页面或刷新此文档。插入刷新的具体操作步骤如下。
1 执行“插入”|“HTML”|“文件头标签”|“刷新”命令,弹出“刷新”对话框,如图3-42所示。
图3-42 “刷新”对话框
知识要点
“刷新”对话框中可以进行如下设置。
◎ 延迟:网页被浏览器下载后所停留的时间,以秒为单位。
◎ 转到URL:通过单击右侧的“浏览”按钮,来输入动作所转向的网页或文档的URL。
◎ 刷新此文档:重新将当前的网页从服务器载入,将已经改变的内容重新显示给浏览器。
2 在对话框中进行相应的设置,单击“确定”按钮,完成设置。
3.7 综合练习——创建基本文本网页
今天上午主要讲述了网页的创建和保存、设置页面属性、输入文本、设置文本格式、创建项目列表和编号列表、设置头信息等相关知识,下面通过以上所学的知识讲述如何创建基本文本网页,效果如图3-43所示,具体操作步骤如下。
图3-43 创建基本文本网页效果
起始文件:CD-ROM/起始文件/第2天上午/综合练习/index.htm
完成文件:CD-ROM/完成文件/第2天上午/综合练习/index1.htm
1 打开网页文档,如图3-44所示。
图3-44 打开网页文档
2 将光标置于要输入文本的位置并输入文本,如图3-45所示。
图3-45 输入文本
3 选中输入的文本,在“属性”面板中将“大小”设置为14像素,如图3-46所示。
图3-46 设置文本的颜色
4 弹出“新建CSS规则”对话框,在“选择器名称”文本框中输入名称,如图3-47所示。
图3-47 “新建CSS规则”对话框
5 单击“确定”按钮,选中文本,将“字体”设置为宋体,并加粗,如图3-48所示。
图3-48 设置文本的字体
6 将光标置于相应的位置,执行“插入”|“HTML”|“特殊字符”|“版权”命令,弹出Dreamweaver提示框,如图3-49所示。
图3-49 Dreamweaver提示框
7 单击“确定”按钮,插入特殊字符,如图3-50所示。
图3-50 插入特殊字符
8 保存文档,按F12键在浏览器中预览,效果如图3-43所示。
3.8 本章小结
今天上午主要学习了创建简单的文本网页,包括新建网页文档和设置页面属性,同时还学习了文本的输入和设置,又深入讲解了信息头的设置。只有熟练掌握了这些基本功能,才能更好地结合后面章节的知识,创建出更切合实际需求且更具有吸引力的网页。读者学完了今天上午的内容后,可以说就已经向成功迈出了坚实的一步,相信创建一个基本的网页应该没有任何问题了。加油吧!明天你就能创建一个华丽的网页。
3.9 课后习题
1.填空题
(1)____是基本的信息载体,是网页中的基本元素,浏览网页时,获取信息最直接、最直观的方式就是通过____。
(2)在Dreamweaver中可以通过____、____的方法将文本插入到文档中。
2.操作题
给如图3-51所示的网页添加文本,并设置文本颜色(红色),效果如图3-52所示。
图3-51 起始文件
图3-52 修改文本颜色效果
起始文件:CD-ROM/起始文件/第2天上午/操作题/1/index.htm
完成文件:CD-ROM/完成文件/第2天上午/操作题/1/index1.htm
(1)将光标置于要输入文字的位置,输入文字。
(2)选中输入的文字,在属性面板中将“文本颜色”设置为#F00,如图3-53所示。
图3-53 设置文本颜色