DreamweaverCS6第2章文本与课件.pptx

1、 本章简介：不管网页内容如何丰富，文本自始至终都是网页中最基本的元素。由于文本产生的信息量大，输入、编辑起来方便，并且生成的文件小，容易被浏览器下载，不会占用太多的等待时间，因此掌握好文本的使用，对于制作网页来说是最基本的要求。第2章文本与文档课堂学习目标u 掌握文字的输入、连续空格的输入u 掌握页边距、网页的标题、网页的默认格式的设置u 掌握设置文字的大小、颜色、字体、对齐方式和段落样式等的设置u 掌握项目符号或编号、文本缩进、插入日期、特殊字符和换行符的使用u 掌握水平线、显示和隐藏网格和标尺的应用2.1文本与文档u 课堂案例青山别墅网页u 输入文本u 设置文本属性u 输入连续的空格u 设

2、置是否显示不可见元素u 设置页边距u 设置网页的标题u 设置网页的默认格式u 课堂案例机电设备网页u 改变文本的大小u 改变文本的颜色u 改变文本的字体u 改变文本的对齐方式u 设置文本样式u 段落文本2.1.1课堂案例青山别墅网页使用“页面属性”命令设置页面外观、网页标题效果；使用“首选参数”命令设置允许多个连续空格、显示不可见元素效果。效果图2.1.2输入文本应用Dreamweaver CS6编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在

3、光标后面输入输入文字后的效果图2.1.3设置文本属性利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。选择“窗口 属性”命令，弹出“属性”面板，在HTML和CSS属性面板中都可以设置文本的属性。“属性”面板2.1.4输入连续的空格在默认状态下，Dreamweaver CS6只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。1设置“首选参数”对话框2直接插入多个连续空格2.1.5设置是否显示不可见元素在网页的设计视图中，有一些元素仅用来标志该元素的位置，而在浏览器中是不可见的。例如，脚本图标是用来标志文档正文中的 Javasc

4、ript 或 Vbscript 代码的位置，换行符图标是用来标志每个换行符 的位置等。在设计网页时，为了快速找到这些不可见元素的位置，常常需要改变这些元素在设计视图中的可见性。2.1.6设置页边距按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。修改页边距的具体操作步骤如下。（1）选择“修改 页面属性”命令，弹出“页面属性”对话框。（2）根据需要在对话框的“左边距”“右边距”“上边距”“下边距”“边距宽度”和“边距高度”选项的数值框中输入相应的数值。“页面属性”对话框2.1.7设置网页的标题HTML 页面的标题可

5、以帮助站点浏览者理解所查看网页的内容，并在浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中显示的信息。更改页面标题的具体操作步骤如下。（1）选择“修改 页面属性”命令，弹出“页面属性”对话框。（2）在对话框的“分类”选项框中选择“标题/编码”选项，在对话框右侧“标题”选项的文本框中输入页面标题，单击“确定”按钮，完成设置。2.1.8设置网页的默认格式用户在制作新网页时，页面都有一些默认的属性，比如网页的标题、网页边界、文字编码、文字颜色和超链接的颜色等。若需要修改网页的页面属性，可选择“修改 页面属性”命令，弹

6、出“页面属性”对话框。“页面属性”对话框2.1.9课堂案例机电设备网页使用使用“属性属性”面板，设置文字大小、颜色及字体。面板，设置文字大小、颜色及字体。效果图Dreamweaver CS6提供两种改变文本大小的方法，一种是设置文本的默认大小，另一种是设置选中文本的大小。2.1.10改变文本的大小丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到16 777 216种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，所以，通常在216种网页色彩中选择文字的颜色。2.1.11改变文本的颜色Dreamweaver CS6提供了两种改变文本字体的方法，一

7、种是设置文本的默认字体，一种是设置选中文本的字体。2.1.12改变文本的字体文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。对齐方式按钮有以下4种。“左对齐”按钮：使文本在浏览器窗口中左对齐。“居中对齐”按钮：使文本在浏览器窗口中居中对齐。“右对齐”按钮：使文本在浏览器窗口中右对齐。“两端对齐”按钮：使文本在浏览器窗口中两端对齐。2.1.13改变文本的对齐方式文本样式是指字符的外观显示方式，如加粗文本、倾斜文本和文本加下划线等。2.1.14设置文本样式段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按Enter键，这段文字就显示在标签中。2.1.1

8、5段落文本2.2项目符号和编号列表u 课堂案例电器城网店u 设置项目符号或编号u 修改项目符号或编号u 设置文本缩进格式u 插入日期u 特殊字符u 插入换行符2.2.1课堂案例电器城网店使用“项目列表”按钮创建列表。效果图通过项目列表或编号列表按钮设置项目符号或编号，步骤如下。（1）选择段落。（2）在“属性”面板中，单击“项目列表”按钮 或“编号列表”按钮 ，为文本添加项目符号或编号。设置了项目符号和编号后的段落。通过列表设置项目符号或编号，步骤如下。（1）选择段落。（2）选择“格式 列表”命令，弹出其子菜单，选择“项目列表”或“编号列表”命令。2.2.2设置项目符号或编号（1）将插入点放在设

9、置项目符号或编号的文本中。（2）通过以下几种方法启动“列表属性”对话框。单击“属性”面板中的“列表项目”按钮。选择“格式 列表 属性”命令。2.2.3修改项目符号或编号设置文本缩进格式有以下几种方法。在“属性”面板中单击“内缩区块”按钮 或“删除内缩区块”按钮 ，使段落向右移动或向左移动。选择“格式 缩进”或“格式 凸出”命令，使段落向右移动或向左移动。按Ctrl+Alt+组合键或Ctrl+Alt+组合键，使段落向右移动或向左移动。2.2.4设置文本缩进格式（1）在文档窗口中，将插入点放置在想要插入对象的位置。（2）通过以下几种方法弹出“插入日期”对话框。单击“插入”面板“常用”选项卡中的“日

10、期”按钮 。选择“插入 日期”命令。（3）选择相应的日期和时间的格式，单击“确定”按钮完成设置。2.2.5插入日期在网页中插入特殊字符，有以下几种方法。单击“字符”展开式工具按钮 。单击“插入”面板“文本”选项卡中的“字符”展开式按钮 ，弹出13个特殊字符按钮。在其中选择需要的特殊字符的工具按钮，即可插入特殊字符。2.2.6特殊字符为段落添加换行符有以下几种方法。单击“插入”面板“文本”选项卡中的“字符”展开式按钮，选择“换行符”按钮。按Shift+Enter组合键。选择“插入 HTML 特殊字符 换行符”命令。2.2.7插入换行符2.3水平线、网格与标尺u 课堂案例休闲度假村网页u 水平线u

11、 显示和隐藏网格u 标尺2.3.1课堂案例休闲度假村网页使用“水平线”命令，在文档中插入水平线；使用“属性”面板，改变水平线的高度和宽度；使用代码命令，改变水平线的颜色。效果图分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割开。一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明，便于阅读。1创建水平线 单击“插入”面板“常用”选项卡中的“水平线”按钮 。选择“插入 HTML 水平线”命令。2修改水平线在文档窗口中，选中水平线，选择“窗口 属性”命令，弹出“属性”面板，可以根据需要对属性进行修改。2.3.2水平线“属性”面板使用网格可以更加方便地定位网页元素，在网页布局时

12、网格也具有至关重要的作用。1显示和隐藏网格选择“查看 网格设置 显示网格”命令，此时处于显示网格的状态，网格在“设计”视图中可见。2设置网页元素与网格对齐选择“查看 网格设置 靠齐到网格”命令，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。2.3.3显示和隐藏网格显示网格3修改网格的疏密选择“查看 网格设置 网格设置”命令，弹出“网格设置”对话框。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成网格线间隔的修改。4修改网格线的形状和颜色选择“查看 网格设置 网格设置”命令，弹出“网格设置”对话框。在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或“点”单选项，最后单击“确定”按钮，完成网格线颜色和线型的修改。“网格设置”对话框“网格设置”对话框标尺显示在文档窗口的上方和左侧，用以标志网页元素的位置。标尺的单位分为像素、英寸和厘米。1在文档窗口中显示标尺2改变标尺的计量单位3改变坐标原点4重置标尺的坐标原点2.3.4标尺2.4课堂练习葡萄酒网页使用“属性”面板，改变文字的大小。效果图2.5课后习题休闲旅游网页使用“项目列表”按钮，设置项目列表效果；使用“CSS样式”命令，改变文字的颜色。效果图