购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

4.1 入门
——基本概念与基本操作

文本是在页面里不可缺少的东西,文本的格式化可以充分体现文档所要表达的重点,比如:在页面里制作一些段落的格式;在文档中构建丰富的字体;让文本达到赏心悦目的效果。这些对于专业网站来说,是不可缺少的要求。

4.1.1 插入文本

输入文本的步骤说明如下。

1 在网页编辑窗口的空白区域单击鼠标,窗口中出现闪动的光标,标示输入文字的起始位置。

2 选择适当的输入法并输入文字。

在编辑窗口下,选择“窗口”→“属性”命令,打开属性面板。用鼠标选中要修饰的文字,属性面板上显示的就是当前文字的属性。选中文字时属性面板的外观如图4-1所示。

图4-1 文字属性

网页的文本分为段落和标题两种格式。

在Dreamweaver CS6主窗口中选中一段文本,在属性面板“格式”后的下拉列表框中选择“段落”,即把选中的文本设置成段落格式。段落格式在Dreamweaver CS6主窗口中的效果如图4-2所示。

段落格式在浏览器中的效果如图4-3所示。

图4-2 段落

图4-3 段落在浏览器中的效果

“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分。对应字体由大到小,同时文字全部加粗(如图4-4所示)。打开源代码编辑窗口,当使用“标题1”时,文字两端应用<h1></h1>标记,使用“标题2”时,文字两端应用<h2></h2>,以下依次类推。手工删除这些标记,文字的样式会消失。

在浏览器中查看文本的“标题1”、“标题2”、“标题3”、“标题4”、“标题5”和“标题6”格式,效果如图4-5所示。

图4-4 标题字

图4-5 标题字在浏览器中的效果

设置完文本格式后,可以设置文本的字体。使用属性面板“字体”下拉列表框可以给文本设置字体组合。

Dreamweaver CS6默认的字体设置是“默认字体”,如果选择“默认字体”,则网页在被浏览时,文本字体显示为浏览器默认的字体。Dreamweaver CS6预设的可供选择的字体组合都是英文字体(如图4-6所示)要想使用中文字体,必须重新编辑新的字体组合。在“字体”后的下拉列表框中选择“编辑字体列表…”,弹出“编辑字体列表”对话框,如图4-7所示。

图4-6 选择字体

图4-7 编辑字体列表

4.1.2 文字的其他设定

1.文本换行

要使文本换行,可以用键盘操作。按“Enter”键或“Enter+Shift”组合键可实现文本换行。按“Enter”键,换行的行距较大,如图4-8所示。按“Enter+Shift”组合键,换行的行距比较小,如图4-8所示。

图4-8 使用“Enter”键换行

图4-9 使用“Enter+Shift”组合键换行

2.文本空格

要实现文本的空格,可以按键盘上的空格键,这和很多文本编辑软件都一样。但在Dreamweaver CS6里,每个位置空格键只能使用一次,否则没有效果,也就是说,每个位置只能有一个空格。

要使每个位置能有一个以上的空格,需要采用另外的方法。调出任意一种输入法,切换到全角设置,然后键入空格就可以了。

3.特殊字符

即使在文本中使用多种字体,有时候访问者也会看不到其中的一些字体,这时因为在访问者的计算机上没有安装网页中使用的字体,而这些字体会显示成Windows自带的基本字体。因此,为了正确体现这些与网页气氛融合的字体,有时会将这些文字制作成图像形式表现出来,这种情况就需要更多的网页载入时间。

普通的文字直接输入即可,有些特殊的符号以及空格需要使用HTML单独进行定义。

如果想要向网页中插入特殊字符,可以在“插入”面板“文本”分类中的“字符”下拉列表中选择要向网页中插入的特殊字符。

如果需要插入更多的特殊字符,在该下拉列表中选择“其他字符”选项,打开“插入其他字符”对话框。在该对话框中,单击相关字符,或者在“插入”文本框中输入特殊字符的编码,然后单击“确定”按钮,即可在网页中插入相应的特殊字符,如图4-10所示。

图4-10 插入其他字符

说明 特殊字符的编码是以“&”开头,以“;”结尾的特定数字或英文字母。例如,版权标志符©的编码是“&copy;”或“&#169;”。

表4-1列出了所有特殊字符的数字编码和字母编码。

表4-1 特殊字符的编码

(续表)

(续表)

4.检查拼写

一个页面完成之后难免会有单词拼写错误,Dreamweaver CS6对文档中的英文内容提供了简单的拼写检查功能。

执行“命令”→“检查拼写”命令,即可对文档进行检查。如文档中有出错单词的话,即会弹出如图4-11所示的对话框。

在“字典中找不到单词”文本框中,显示当前文档中查找到的可能存在拼写错误的单词。

在“建议”列表框中,显示可能正确的几种单词拼写。

在“更改为”文本框中,显示Dreamweaver CS6建议将该单词修改为某个单词,你也可以在“建议”列表框中选择其他单词,或是自行在该文本框中输入修正的单词。

要修正出现拼写错误的单词,可以单击“更改”按钮,这时当前的单词就被修改为“更改为”文本框中的单词。如果希望对文档中所有的该单词都进行修正,可以单击“全部更改”按钮。

如果希望忽略该可能存在拼写错误的单词,不对其进行修正,可以单击“忽略”按钮;如果希望忽略文档中所有该单词,不再检查其拼写,可以单击“忽略全部”按钮。

最后,Dreamweaver CS6会显示检查拼写完成,如图4-12所示。

图4-11 “检查拼写”对话框

图4-12 检查拼写完成

4.1.3 插入水平线

水平线起到分隔文本的排版作用,在页面上,可以使用一条或多条水平线以可视方式分隔文本和对象。单击Dreamweaver CS6“插入”面板“常用”分类下的“水平线”按钮,即可向网页中插入水平线,如图4-13所示。

在Dreamweaver CS6主窗口中选中某条水平线,可以用“属性”面板对这个水平线的属性进行设置,如图4-14所示。

图4-13 插入水平线

在“水平线”下的文本框中可填入这个水平线的ID,一般来说都不填。

图4-14 设定水平线属性

“宽”用来设置该水平线的宽度,可填入数值。紧跟其后的下拉列表框用来设置宽度的单位,有“像素”和“%”两个选项。“像素”是像素单位,“%”是百分比单位。例如,50像素表示宽度为50个像素,50%表示宽度占打开浏览器窗口的50%,宽度的默认值为100%。

“高”文本框用来设置该水平线的高度,可填入数值,单位是像素。

“对齐”下拉列表框用来设置水平线的对齐方式共有4个选项——“默认”、“左对齐”、“居中对齐”和“右对齐”。

选中“阴影”前的复选框,则给水平线设置阴影效果。水平线设置阴影前后的效果对比如图4-15所示。在图4-15中,左图的水平线有阴影效果,右图的水平线没有阴影效果。

图4-15 水平线设置阴影前后的效果对比

4.1.4 插入时间

一般对网页进行了更新后都会加上更新日期。Dreamweaver CS6使插入日期的步骤大为简化,只需选择日期显示的格式,即可向网页中加入当前的日期和时间。而且通过设置,每次保存网页时都能自动更新该日期。

在Dreamweaver CS6主窗口中,将光标移动到要插入日期的位置,单击“插入”面板“常用”分类中的“日期”按钮(如图4-16所示),弹出“插入日期”对话框,如图4-17所示。

图4-16 插入日期

图4-17 “插入日期”对话框

在“插入日期”对话框中,“星期格式”下拉列表框用来设置星期的格式,有7个选项——“[不要星期]”、“星期四”、“星期四,”、“Thu”、“Thu,”、“thu”和“thu,”。选中其中一个选项,则星期的格式依照所选项的格式插入到网页中。因为星期格式对中文的支持不是很好,一般情况下在这里都选择“[不要星期]”,这样在插入的日期里不显示当前是星期几。

在“插入日期”对话框中,“日期格式”选框用来设置日期的格式,有13个选项。选中其中一个选项,则日期的格式依照所选项的格式插入到网页中。

在“插入日期”对话框中,“时间格式”下拉列表框用来设置时间的格式,有3个选项——“[不要时间]”、“10:18 PM”和“22:18”。选中其中一个选项,则时间的格式依照所选项的格式插入到网页中,如果选择“[不要时间]”,则插入到网页的日期中不包含时间。

如果选中“储存时自动更新”复选框,则插入的日期将在网页每次保存时自动更新为最新的日期。 glTjjlse1ZDE0TU/DNPloDQT1u2rE6EGREIxnAow376XeOuwazn4vKcfSJsAB+Ie

点击中间区域
呼出菜单
上一章
目录
下一章
×