Dreamweaver-CS5实例教程-课件2

本章简介：

不管网页内容如何丰富，文本自始至终都是网页中最基本的元素。由于文本产生的信息量大，输入、编辑起来方便，并且生成的文件小，容易被浏览器下载，不会占用太多的等待时间，因此掌握好文本的使用，对于制作网页来说是最基本的要求。第2章文本与文档课堂学习目标文本与文档项目符号和编号列表水平线、网格与标尺2.1文本与文档课堂案例——精装别墅网页输入文本设置文本属性输入连续的空格设置是否显示不可见元素设置页边距设置网页的标题设置网页的默认格式课堂案例——西点美食网页改变文本的大小改变文本的颜色改变文本的字体改变文本的对齐方式设置文本样式段落文本2.1.1课堂案例——精装别墅网页

使用“页面属性”命令设置页面外观、网页标题效果，使用“首选参数”命令设置允许多个连续空格、显示不可见元素效果。效果图2.1.2输入文本

应用DreamweaverCS5编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本。 2.1.3设置文本属性

利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。 2.1.4输入连续的空格

在默认状态下，DreamweaverCS5只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。2.1.5设置是否显示不可见元素

在网页的设计视图中，有一些元素仅用来标志该元素的位置，而在浏览器中是不可见的。例如，脚本图标是用来标志文档正文中的Javascript或Vbscript代码的位置，换行符图标是用来标志每个换行符<br>的位置等。在设计网页时，为了快速找到这些不可见元素的位置，常常改变这些元素在设计视图中的可见性。2.1.6设置页边距

按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。 修改页边距的具体操作步骤如下。 （1）选择“修改>页面属性”命令，弹出“页面属性”对话框。 （2）根据需要在对话框的“左边距”、“右边距”、“上边距”、“下边距”、“边距宽度”和“边距高度”选项的数值框中输入相应的数值。2.1.7设置网页的标题 HTML页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中显示的信息。 2.1.8设置网页的默认格式

用户在制作新网页时，页面都有一些默认的属性，比如网页的标题、网页边界、文字编码、文字颜色和超链接的颜色等。若需要修改网页的页面属性，可选择“修改>页面属性”命令，在弹出“页面属性”对话框中进行修改。2.1.9课堂案例——西点美食网页

使用属性面板设置文字大小、颜色及字体。 效果图 DreamweaverCS5提供两种改变文本大小的方法，一种是设置文本的默认大小，一种是设置选中文本的大小。2.1.10改变文本的大小

丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到16777216种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，所以，通常在216种网页色彩中选择文字的颜色。2.1.11改变文本的颜色 DreamweaverCS5提供了两种改变文本字体的方法，一种是设置文本的默认字体，一种是设置选中文本的字体。2.1.12改变文本的字体

文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。对齐方式按钮有以下4种。 “左对齐”按钮：使文本在浏览器窗口中左对齐。 “居中对齐”按钮：使文本在浏览器窗口中居中对齐。 “右对齐”按钮：使文本在浏览器窗口中右对齐。 “两端对齐”按钮：使文本在浏览器窗口中两端对齐。2.1.13改变文本的对齐方式

文本样式是指字符的外观显示方式，例如加粗文本、倾斜文本和文本加下划线等。2.1.14设置文本样式

段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按Enter键，这段文字就显示在<P>……</P>标签中。2.1.15段落文本2.2项目符号和编号列表课堂案例——快乐购物网页设置项目符号或编号修改项目符号或编号设置文本缩进格式插入日期特殊字符插入换行符2.2.1课堂案例——快乐购物网页

使用“项目列表”按钮创建列表。使用“属性”命令改变列表的样式。使用“文本缩进”和“文本凸出”按钮创建下级列表。 效果图

通过项目列表或编号列表按钮设置项目符号或编号，步骤如下。 （1）选择段落。 （2）在“属性”面板中，单击“项目列表”按钮或“编号列表”按钮，为文本添加项目符号或编号。 通过列表设置项目符号或编号，步骤如下。 （1）选择段落。 （2）选择“文本>列表”命令，弹出其子菜单，选择“项目列表”或“编号列表”命令。2.2.2设置项目符号或编号

（1）将插入点放在设置项目符号或编号的文本中。 （2）通过以下几种方法启动“列表属性”对话框。 单击“属性”面板中的“列表项目”按钮。 选择“文本>列表>属性”命令。2.2.3修改项目符号或编号

设置文本缩进格式有以下几种方法。在“属性”面板中单击“文本缩进”按钮或“文本凸出”按钮，使段落向右移动或向左移动。选择“格式>缩进”或“格式>凸出”命令，使段落向右移动或向左移动。按<Ctrl+Alt+]>快捷键或<Ctrl+Alt+[>快捷键，使段落向右移动或向左移动。2.2.4设置文本缩进格式

（1）在文档窗口中，将插入点放置在想要插入对象的位置。 （2）通过以下几种方法启动“插入日期”对话框。 选择“插入”面板的“常用”选项卡，单击“日期”工具按钮。 选择“插入记录>日期”命令。 （3）选择相应的日期和时间的格式，单击“确定”按钮完成设置。2.2.5插入日期

在网页中插入特殊字符，有以下几种方法。单击“字符”展开式工具按钮。选择“插入”面板的“文本”选项卡，单击“字符”展开式工具按钮，弹出12个特殊字符按钮。在其中选择需要的特殊字符的工具按钮，即可插入特殊字符。2.2.6特殊字符

为段落添加换行符有以下几种方法。选择“插入”面板的“文本”选项卡，单击“字符”展开式工具按钮，选择“换行符”。按<Shift+Enter>快捷键。选择“插入记录>HTML>特殊字符>换行符”命令。2.2.7插入换行符2.3水平线、网格与标尺课堂案例——办公用品网页水平线显示和隐藏网格标尺2.3.1课堂案例——办公用品网页

使用“水平线”命令在文档中插入水平线。使用“属性”面板改变水平线的高度和宽度。使用代码改变水平线的颜色。效果图

分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割开。一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明，便于阅读。2.3.2水平线

使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。2.3.3显示和隐藏网格

标尺显示在文档窗口的页面上方和左侧，用以标志网页元素的位置。标尺的单位分为像素、英寸和厘米。2.3.4标尺2.4课堂练习——美容精油网页

使用“页面属性”命令设置边距和文字大小。使用“首选参数”命令设置允许多个连续空格效果。

效果图2.5课堂练习——婚礼策划网页

使用“修改”命令设置页面