12.5.1 建立简单的文本页面
网页中漂亮的图像、生动的多媒体、规范的表格、交互式按钮虽然吸引人,但文本却是支撑网页的基础。Dreamweaver 8集网站管理、网页制作的诸多功能于一身,具有较强的编辑功能。
1.添加文本
直接将光标停留在空白的工作区内,通过键盘敲入文字,随着输入文本内容的增多,插入点将从左到右逐渐移动。Dreamweaver 8不会自动换行,这样可以通过输入文本的多少控制网页的横向宽度,如果显示器屏幕大小比网页横向内容小,浏览器就会出现横向的滚动条。
只有按“Enter”键之后,光标才会另起一行,但是这时候网页上会创建一个新的段落,并且在前、后两个段落之间自动地插入一个空行,如图12-27所示。这是 Dreamweaver 区别于其他文档编辑器的显著特征之一。
图12-27 网页文本中两种不同的换行方式
如果想要使光标换行但是不产生新的段落,可以按“Shift+Enter”组合键。如图 12-27下方所示。
※ 提示:
在普通文本编辑状态下是不能插入第 2 个空格的,如果想插入多个空格可以切换到全角状态后输入文本再单击空格键即可。
添加文本时,也可以在其他文本编辑器中编辑文本(例如 Word),然后将该文字部分复制,在 Dreamweaver 8中选择【编辑】→【粘贴】菜单命令。
在 Dreamweaver 8中也可以导入 Word 文档或 Excel 文档。选择【文件】→【导入】→【Word 文档】或【Excel 文档】菜单命令,在“打开”对话框中,找到要添加的文件,然后单击【打开】按钮即可。
2.设置文本属性
输入文本后,可以通过“属性”面板修改诸如文本颜色、字体大小等属性,如图 12-28 所示。首先选中要修改的文字,方法是在文本没有选中的情况下按住鼠标左键拖曳要选择的文字,所选中的文本为高亮显示,如图 12-29 所示。然后可以在工作区域下面的属性面板中修改其属性。
图12-28 “属性”面板
图12-29 高亮选中的文本
练一练:
这里选择一首古词:
千古江山,英雄无觅,孙仲谋处。
舞榭歌台,风流总被,雨打风吹去。
斜阳草树,寻常巷陌,人道寄奴曾住。
想当年,金戈铁马,气吞万里如虎。
通过属性设置,给它赋予不同的显示效果,例如:文字的大小(24)、颜色(红色)、对齐方式(左对齐)、字体(黑体)等,掌握文本的基本处理方法。
(1)设置文本字体
字体控制着文本的外观,常用的字体包括英文字体与中文字体两大类型。用户可以从Dreamweaver 8的字体列表中选择相应的字体项,如图 12-30 所示。默认情况下中文字体是“宋体”,如果计算机上安装了其他字体,用户还可将它们添加到字体列表中,扩充字体选择的范围。
添加字体的操作方法:
① 选择【字体】子菜单或者【属性】面板中【字体】下拉列表框的【编辑字体列表】命令,打开【编辑字体列表】对话框,如图 12-31 所示。
图12-30 字体子菜单
图12-31 编辑字体列表
② 在“可用字体”列表框中选择欲添加字体的名称,然后单击按钮,添加的字体将出现在“选择的字体”列表框中。选择“字体列表”中某个字体,单击“字体列表”左侧的
按钮时,将把所选的字体从字体列表中删除。为了改变所选字体在字体列表框中的排序,可单击列表框右侧向上
或向下
的箭头按钮。每次单击箭头按钮,将使所选的字体向上或向下移动一格。
③ 单击【确定】按钮,保存设置。
使用属性面板改变字体的操作方法:
① 选择应用字体的文本。
② 按“Ctrl+F3”组合键,打开“属性”面板。
③ 打开“字体”下拉列表框,从中选择所需要的字体。
(2)设置文本字号
使用属性面板设置字号的操作方法:
① 选择应用字号的文本。
② 打开“属性”面板,在“大小”下拉列表中选择相应的选项。在后面的“单位”下拉列表中选择相应的度量单位,即可设置所选文本的字号大小。度量单位有像素、厘米等。对不同的段落应用不同字号后的效果如图12-32所示。
(3)设置文本颜色
在默认的情况下,文本的颜色是普通的黑色,但丰富的色彩总能吸引人的注意,它一方面来源于图像的色彩,另一方面来源于文本的色彩。Dreamweaver 8为配置文本颜色提供了两种方法:一是执行“文本”菜单的“颜色”命令;二是打开“属性”面板的颜色框进行选择。
使用菜单命令配置颜色的操作方法:
① 选择网页内的文本。
② 选择菜单【文本】→【颜色】命令,打开“颜色”对话框,如图12-33所示。
③ 在“基本颜色”框内选择一种颜色。也可以从右侧色谱中选择需要的颜色。
④ 单击【确定】按钮。
图12-32 利用属性面板设置字号
图12-33 打开颜色对话框
使用属性面板配置颜色的操作方法:
① 选择网页内的文本。
② 按“Ctrl+F3”组合键,打开“属性”面板。
③ 单击“属性”面板颜色块,打开“颜色”面板,如图 12-34 所示。
④ 选择面板上的一种颜色。
图12-34 选择颜色
(4)设置文本对齐方式
对于网页内的文本对象,Dreamweaver 8提供了4种对齐方式,即左对齐、 居中对齐、右对齐和两端对齐。这里的对齐方式都是相对于水平位置,如果将文本或对象排列在表格内,还可以在垂直方向上定义它们的对齐方式。
使用菜单命令确定对齐方式的操作方法:
① 选择网页内的文本。
② 选择菜单【文本】→【对齐】,打开“对齐”子菜单,如图 12-35 所示。
③ 选择需要的对齐方式。
图12-35 打开“对齐”子菜单
使用属性面板确定对齐方式的操作方法:
① 选择网页内的文本,或者在段落内设置插入点。
② 按“Ctrl+F3”组合键,打开“属性”面板。
③ 单击面板中的 4 个对齐按钮之一(图12-31是以中间对齐方式制作的)。
通常水平对齐的最小单位是段落,也就是说,相同的段落只能有一种对齐方式。无论是选择整个段落,还是选择段落的一部分,所选的对齐方式都是针对整个段落来说的。
3.应用文本功能创建简单排版式页面
下面应用 Dreamweaver 8完全的文本功能创建一个排版页面。
(1)首先建立一个新的页面。
(2)进入页面属性设置对话框,设置页面的背景图像(或者颜色),如图12-34所示。
在这里选用一幅处理过的图像,如图12-36所示。大小是672×488像素,如果图像太大会有部分内容在浏览器中看不到;如果图像太小,会出现重复图像的结果;这一点在今后在学习CSS样式时,将学习到设置背景图像是否重复,背景图像的位置等复杂内容,这里暂不讨论。
图12-36 背景图片
(3)在 Dreamweaver 8中输入一篇网络故事,如图 12-37 所示。这里有些内容文字的颜色与背景色相近,所以需要改变颜色,以确保页面的清晰。所以,接下来将要对文字进行必要的文本排版。
图12-37 输入文本后的页面
(4)继续对网页文本的大小、颜色、位置等内容进行设置,结果如图 12-38 所示。
图12-38 完成设置后的页面
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。