资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,本章简介：,不管网页内容如何丰富，文本自始至终都是网页中最基本的元素。由于文本产生的信息量大，输入、编辑起来方便，并且生成的文件小，容易被浏览器下载，不会占用太多的等待时间，因此掌握好文本的使用，对于制作网页来说是最基本的要求。,第,2,章文本与文档,本章简介：第2章文本与文档,1,课堂学习目标,掌握文字的输入、连续空格的输入,掌握页边距、网页的标题、网页的默认格式的设置,掌握设置文字的大小、颜色、字体、对齐方式和段落样式等的设置,掌握项目符号或编号、文本缩进、插入日期、特殊字符和换行符的使用,掌握水平线、显示和隐藏网格和标尺的应用,课堂学习目标掌握文字的输入、连续空格的输入,2,2.1,文本与文档,课堂案例,青山别墅网页,输入文本,设置文本属性,输入连续的空格,设置是否显示不可见元素,设置页边距,设置网页的标题,设置网页的默认格式,课堂案例,机电设备网页,改变文本的大小,改变文本的颜色,改变文本的字体,改变文本的对齐方式,设置文本样式,段落文本,2.1文本与文档课堂案例青山别墅网页改变文本的大小,3,2.1.1,课堂案例,青山别墅网页,使用“页面属性”命令设置页面外观、网页标题效果；使用“首选参数”命令设置允许多个连续空格、显示不可见元素效果。,效果图,2.1.1课堂案例青山别墅网页使用“页面属性”命令设,4,2.1.2,输入文本,应用,Dreamweaver CS6,编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入,输入文字后的效果图,2.1.2输入文本应用Dreamweaver CS6编辑网,5,2.1.3,设置文本属性,利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。,选择“窗口,属性”命令，弹出“属性”面板，在,HTML,和,CSS,属性面板中都可以设置文本的属性。,“属性”面板,2.1.3设置文本属性利用文本属性可以方便地修改选中文本的,6,2.1.4,输入连续的空格,在默认状态下，,Dreamweaver CS6,只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。,1,设置“首选参数”对话框,2,直接插入多个连续空格,2.1.4输入连续的空格在默认状态下，Dreamweave,7,2.1.5,设置是否显示不可见元素,在网页的设计视图中，有一些元素仅用来标志该元素的位置，而在浏览器中是不可见的。例如，脚本图标是用来标志文档正文中的,Javascript,或,Vbscript,代码的位置，换行符图标是用来标志每个换行符,的位置等。在设计网页时，为了快速找到这些不可见元素的位置，常常需要改变这些元素在设计视图中的可见性。,2.1.5设置是否显示不可见元素在网页的设计视图中，有一些,8,2.1.6,设置页边距,按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。,修改页边距的具体操作步骤如下。,（,1,）选择“修改,页面属性”命令，弹出“页面属性”对话框。,（,2,）根据需要在对话框的“左边距”“右边距”“上边距”“下边距”“边距宽度”和“边距高度”选项的数值框中输入相应的数值。,“页面属性”对话框,2.1.6设置页边距按照文章的书写规则，正文与纸的四周,9,2.1.7,设置网页的标题,HTML,页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中显示的信息。更改页面标题的具体操作步骤如下。,（,1,）选择“修改,页面属性”命令，弹出“页面属性”对话框。,（,2,）在对话框的“分类”选项框中选择“标题,/,编码”选项，在对话框右侧“标题”选项的文本框中输入页面标题，单击“确定”按钮，完成设置。,2.1.7设置网页的标题HTML 页面的标题可以帮助站点浏,10,2.1.8,设置网页的默认格式,用户在制作新网页时，页面都有一些默认的属性，比如网页的标题、网页边界、文字编码、文字颜色和超链接的颜色等。若需要修改网页的页面属性，可选择“修改,页面属性”命令，弹出“页面属性”对话框。,“页面属性”对话框,2.1.8设置网页的默认格式用户在制作新网页时，页面都,11,2.1.9,课堂案例,机电设备网页,使用“属性”面板，设置文字大小、颜色及字体。,效果图,2.1.9课堂案例机电设备网页使用“属性”面板，设置文,12,Dreamweaver CS6,提供两种改变文本大小的方法，一种是设置文本的默认大小，另一种是设置选中文本的大小。,2.1.10,改变文本的大小,Dreamweaver CS6提供两种改变文本大小的方法,13,丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到,16 777 216,种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，所以，通常在,216,种网页色彩中选择文字的颜色。,2.1.11,改变文本的颜色,丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是,14,Dreamweaver CS6,提供了两种改变文本字体的方法，一种是设置文本的默认字体，一种是设置选中文本的字体。,2.1.12,改变文本的字体,Dreamweaver CS6提供了两种改变文本字体的方,15,文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。对齐方式按钮有以下,4,种。,“左对齐”按钮：使文本在浏览器窗口中左对齐。,“居中对齐”按钮：使文本在浏览器窗口中居中对齐。,“右对齐”按钮：使文本在浏览器窗口中右对齐。,“两端对齐”按钮：使文本在浏览器窗口中两端对齐。,2.1.13,改变文本的对齐方式,文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的,16,文本样式是指字符的外观显示方式，如加粗文本、倾斜文本和文本加下划线等。,2.1.14,设置文本样式,2.1.14设置文本样式,17,段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按,Enter,键，这段文字就显示在,标签中。,2.1.15,段落文本,段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输,18,2.2,项目符号和编号列表,课堂案例,电器城网店,设置项目符号或编号,修改项目符号或编号,设置文本缩进格式,插入日期,特殊字符,插入换行符,2.2项目符号和编号列表课堂案例电器城网店,19,2.2.1,课堂案例,电器城网店,使用“项目列表”按钮创建列表。,效果图,2.2.1课堂案例电器城网店使用“项目列表”按钮创建,20,通过项目列表或编号列表按钮设置项目符号或编号，步骤如下。,（,1,）选择段落。,（,2,）在“属性”面板中，单击“项目列表”按钮 或“编号列表”按钮 ，为文本添加项目符号或编号。设置了项目符号和编号后的段落。,通过列表设置项目符号或编号，步骤如下。,（,1,）选择段落。,（,2,）选择“格式,列表”命令，弹出其子菜单，选择“项目列表”或“编号列表”命令。,2.2.2,设置项目符号或编号,通过项目列表或编号列表按钮设置项目符号或编号，步骤如下。2.,21,（,1,）将插入点放在设置项目符号或编号的文本中。,（,2,）通过以下几种方法启动“列表属性”对话框。,单击“属性”面板中的“列表项目”按钮。,选择“格式,列表,属性”命令。,2.2.3,修改项目符号或编号,（1）将插入点放在设置项目符号或编号的文本中。2.2.3修,22,设置文本缩进格式有以下几种方法。,在“属性”面板中单击“内缩区块”按钮 或“删除内缩区块”按钮 ，使段落向右移动或向左移动。,选择“格式,缩进”或“格式,凸出”命令，使段落向右移动或向左移动。,按,Ctrl+Alt+,组合键或,Ctrl+Alt+,组合键，使段落向右移动或向左移动。,2.2.4,设置文本缩进格式,设置文本缩进格式有以下几种方法。2.2.4设置文本缩进格式,23,（,1,）在文档窗口中，将插入点放置在想要插入对象的位置。,（,2,）通过以下几种方法弹出“插入日期”对话框。,单击“插入”面板“常用”选项卡中的“日期”按钮 。,选择“插入,日期”命令。,（,3,）选择相应的日期和时间的格式，单击“确定”按钮完成设置。,2.2.5,插入日期,2.2.5插入日期,24,在网页中插入特殊字符，有以下几种方法。,单击“字符”展开式工具按钮 。,单击“插入”面板“文本”选项卡中的“字符”展开式按钮 ，弹出,13,个特殊字符按钮。在其中选择需要的特殊字符的工具按钮，即可插入特殊字符。,2.2.6,特殊字符,在网页中插入特殊字符，有以下几种方法。2.2.6特殊字符,25,为段落添加换行符有以下几种方法。单击“插入”面板“文本”选项卡中的“字符”展开式按钮，选择“换行符”按钮。,按,Shift+Enter,组合键。,选择“插入,HTML,特殊字符,换行符”命令。,2.2.7,插入换行符,为段落添加换行符有以下几种方法。单击“插入”面板“文本”选,26,2.3,水平线、网格与标尺,课堂案例,休闲度假村网页,水平线,显示和隐藏网格,标尺,2.3水平线、网格与标尺课堂案例休闲度假村网页,27,2.3.1,课堂案例,休闲度假村网页,使用“水平线”命令，在文档中插入水平线；使用“属性”面板，改变水平线的高度和宽度；使用代码命令，改变水平线的颜色。,效果图,2.3.1课堂案例休闲度假村网页使用“水平线”命令，,28,分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割开。一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明，便于阅读。,1,创建水平线,单击“插入”面板“常用”选项卡中的“水平线”按钮 。,选择“插入,HTML,水平线”命令。,2,修改水平线,在文档窗口中，选中水平线，选择“窗口,属性”命令，弹出“属性”面板，可以根据需要对属性进行修改。,2.3.2,水平线,“属性”面板,分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割,29,使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。,1,显示和隐藏网格,选择“查看,网格设置,显示网格”命令，此时处于显示网格的状态，网格在“设计”视图中可见。,2,设置网页元素与网格对齐,选择“查看,网格设置,靠齐到网格”命令，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。,2.3.3,显示和隐藏网格,显示网格,使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至,30,3,修改网格的疏密,选择“查看,网格设置,网格设置”命令，弹出“网格设置”对话框。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成网格线间隔的修改。,4,修改网格线的形状和颜色,选择“查看,网格设置,网格设置”命令，弹出“网格设置”对话框。在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或“点”单选项，最后单击“确定”按钮，完成网格线颜色和线型的修改。,“网格设置”对话框,“网格设置”对话框,3修改网格的疏密“网格设置”对话框“网格设置”对话框,31,标尺显示在文档窗口的上方和左侧，用以标志网页元素的位置。标尺的单位分为像素、英寸和厘米。,1,在文档窗口中显示标尺,2,改变标尺的计量单位,3,改变坐标原点,4,重置标尺的坐标原点,2.3.4,标尺,标尺显示在文档窗口的上方和左侧，用以标志网页元素的位置。标尺,32,2.4,课堂练习,葡萄酒网页,使用“属性”面板，改变文字的大小。,效果图,2.4课堂练习葡萄酒
展开阅读全文