资源描述
,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,第,3,讲 使用文本和图像,教学目标,3.1,使用文本,3.1.1,功能讲解,3.1.2,范例解析设置“大和小”文本格式,3.1.3,课堂实训,设置“天山天池”文本格式,3.2,使用图像,3.2.1,功能讲解,3.2.2,范例解析,设置“九寨沟”网页中的图像,3.2.3,课堂实训,设置“青海湖”网页中的图像,3.3,综合案例编排“选择”网页,教学目标,掌握设置页面属性的方法。,掌握添加文本的方法。,掌握设置文本格式的方法。,掌握插入图像的方法。,掌握设置图像属性的方法。,返回目录,3.1,使用文本,3.1.1,功能讲解,3.1.2,范例解析,设置“大和小”文本格式,3.1.3,课堂实训,设置“天山天池”文本格式,返回目录,3.1.1,功能讲解,创建网页文档后，还要对文档设置页面属性，同时添加文本并设置其基本格式。具体内容如下。,设置页面属性。,添加文本。,设置字体属性。,设置段落版式。,插入日期、水平线和空格。,返回目录,一、设置页面属性,在当前文档中，选择,【,修改,】/【,页面属性,】,命令或在,【,属性,】,面板中单击 按钮，将打开,【,页面属性,】,对话框。在,【,页面属性,】,对话框中，可以设置外观、链接、标题、标题,/,编码、跟踪图像等内容。,返回目录,（,1,）设置外观,外观主要包括页面的基本属性，如页面字体大小、字体类型、字体颜色、网页背景样式、页边距等。,Dreamweaver CS4,的,【,页面属性,】,对话框提供了两种外观设置方式：,【,外观（,CSS,）,】,和,【,外观（,HTML,）,】,，如图所示。,通过,【,外观（,CSS,）,】,分类，可以设置页面字体类型、粗体和斜体样式、文本大小、文本颜色、背景颜色、背景图像、重复方式以及页边距等。需要注意的是，通过,【,页面属性,】,对话框设置的字体、大小和颜色，将对当前网页中所有的文本都起作用。,返回目录,（,2,）设置链接,通过,【,链接,】,分类，可以设置超级链接文本的字体、大小、链接文本的状态颜色和下划线样式，如图所示。,返回目录,（,3,）设置标题,为了使文档标题醒目，,Dreamweaver CS4,提供了,6,种标题格式“标题,1”,“标题,6”,，可以在,【,属性,】,面板的,【,格式,】,下拉列表中进行选择。当将标题设置成“标题,1”,“标题,6”,中的某一种时，,Dreamweaver CS4,会按其默认格式显示。但是，读者可以通过,【,页面属性,】,对话框的,【,标题（,CSS,）,】,分类来重新设置“标题,1”,“标题,6”,的字体、大小和颜色属性，如图所示。设置文档标题的,HTML,标签是“,标题文字,”,，其中,n,的取值为,1,6,，,n,越小字号越大，,n,越大字号越小。,（,4,）设置标题,/,编码,在,【,标题,/,编码,】,分类中，可以设置浏览器标题、文档类型和编码方式，如图所示。其中，浏览器标题的,HTML,标签是“,”,，它位于,HTML,标签“,”,之间。,（,5,）跟踪图像,在,【,跟踪图像,】,分类中，可以将设计草图设置成跟踪图像，铺在编辑的网页下面作为参考图，用于引导网页的设计，如图所示。除了可以设置跟踪图像，还可以设置跟踪图像的透明度，透明度越高，跟踪图像显示得越明显。,如果要显示或隐藏跟踪图像，可以选择,【,查看,】/【,跟踪图像,】/【,显示,】,命令。在网页中选定一个页面元素，然后选择,【,查看,】/【,跟踪图像,】/【,对齐所选范围,】,命令，可以使跟踪图像的左上角与所选页面元素的左上角对齐。选择,【,查看,】/【,跟踪图像,】/【,调整位置,】,命令可以通过设置跟踪图像的坐标值来调整跟踪图像的位置。选择,【,查看,】/【,跟踪图像,】/【,重设位置,】,命令，可以使跟踪图像自动对齐编辑窗口的左上角。,二、添加文本,在创建的网页文档中，添加文本的方法主要有以下几种。,输入文本：将光标定位在要输入文本的位置，使用键盘直接输入。,复制文本：使用复制（,Ctrl+C,）,/,粘贴（,Ctrl+V,）的方法从其他文档中复制,/,粘贴文本，此时将按,【,首选参数,】,对话框的,【,复制,/,粘贴,】,分类选项的设置进行粘贴文本，如果选择,【,选择性粘贴（,Ctrl+Shift+V,）,】,命令，将打开,【,选择性粘贴,】,对话框，如图所示，此时可以根据需要选择相应的选项进行粘贴即可。,导入文本：选择,【,文件,】/【,导入,】/【Word,文档,】,或,【Excel,文档,】,或,【,表格式数据,】,命令直接将,Word,文档、,Excel,文档或表格式数据导入网页文档中。,添加特殊符号：选择,【,插入,】,【HTML】,【,特殊字符,】,中的相应命令可以插入版权、商标等特殊字符，如果还要插入其他一些特殊字符，可以选择,【,其他字符,】,命令打开,【,插入其他字符,】,对话框进行选择插入即可，如图所示。,返回目录,返回目录,三、设置字体属性,字体属性包括字体类型、颜色、大小、粗体、斜体等内容。除了可以使用,【,页面属性,】,对话框对页面中的所有文本设置字体属性外，还可以通过,【,属性,】,面板或,【,格式,】,菜单中的相应命令对所选文本进行字体属性设置，如图所示。,返回目录,（,1,）设置字体类型,通过,【,格式,】/【,字体,】,中的相应命令或,CSS【,属性,】,面板的,【,字体,】,下拉列表可以设置所选文本的字体类型，如图所示。,返回目录,（,2,）设置字体颜色,通过,【,格式,】/【,颜色,】,命令或单击,CSS【,属性,】,面板的按钮可以设置所选文本的颜色，如图所示。,返回目录,（,3,）设置文本大小,通过,CSS【,属性,】,面板的,【,大小,】,下拉列表可以设置所选文本的大小。,【,大小,】,下拉列表可以选择设置文字大小，也可以由用户直接输入数字，然后在后边的下拉列表中选择单位。,返回目录,（,4,）设置文本加粗等样式,通过,【,格式,】/【,样式,】,中的相应命令或单击,CSS【,属性,】,面板的按钮或按钮可以设置所选文本的粗体、斜体等样式，如图所示。,返回目录,（,5,）使用,CSS,规则,无论是使用菜单命令还是通过,CSS【,属性,】,面板来设置文本的字体、大小、颜色属性，如果是第,1,次都将打开,【,新建,CSS,规则,】,对话框。在,【,选择器类型,】,下拉列表中选择选择器类型（在本讲建议读者选择第,1,项，这也是默认项），然后在,【,选择器名称,】,文本列表框中输入名称，如图所示。,返回目录,单击 按钮后，在,【,属性,】,面板的,【,目标规则,】,下拉列表中自动出现了样式名称，此时再定义其他属性都将在此,CSS,样式中进行，除非在,【,目标规则,】,下拉列表中再选择,【】,，如图所示。,返回目录,所设置的文本效果及源代码如图所示。,如果要对其他文本应用该样式，可以选中这些文本，然后在,CSS【,属性,】,面板的,【,目标规则,】,下拉列表中选择该样式。也可以在,HTML【,属性,】,面板的,【,类,】,下拉列表中选择该样式，如图所示。,返回目录,四、设置段落版式,段落与换行。,文本对齐方式。,文本缩进和凸出。,列表。,返回目录,（,1,）段落与换行,通过,HTML【,属性,】,面板的,【,格式,】,下拉列表，可以设置正文的段落格式，即,HTML,标签,所包含的文本为一个段落，可以设置文档的标题格式“标题,1”,“标题,6”,，还可以将某一段文本按照预先格式化的样式进行显示，即选择,【,预先格式化的,】,选项，其,HTML,标签是,，如果要取消已设置的格式，选择,【,无,】,选项即可，也可以选择,【,格式,】/【,段落格式,】,菜单中的相应命令来进行设置。另外，在文档中输入文本时，直接按,Enter,键，也可以形成一个段落，如果按,Shift+Enter,键或选择,【,插入,】/【HTML】/【,特殊字符,】/【,换行符,】,命令，可以在段落中进行换行，其,HTML,标签是,。默认状态下，段与段之间是有间距的，而通过换行符进行换行，不会像段落那样在两行之间形成大的间距，如图所示。,返回目录,（,2,）文本对齐方式,文本的对齐方式通常有,4,种：左对齐、居中对齐、右对齐和两端对齐。可以在,CSS【,属性,】,面板中分别单击按钮、按钮、按钮和按钮来进行设置，也可以通过,【,格式,】/【,对齐,】,菜单中的相应命令来实现。这两种方式的效果是一样的，但使用的代码是不一样的。前者使用,CSS,样式进行定义，后者使用,HTML,标签进行定义，如图所示。如果同时设置多个段落的对齐方式，则需要先选中这些段落。,返回目录,（,3,）文本缩进和凸出,在文档排版过程中，有时会遇到需要使某段文本整体向内缩进或向外凸出的情况。单击,HTML【,属性,】,面板上的按钮（或按钮），或者选择,【,格式,】/【,缩进,】,（或,【,凸出,】,）命令，可以使段落整体向内缩进或向外凸出。如果同时设置多个段落的缩进和凸出，则需要先选中这些段落。,返回目录,（,4,）列表,列表的类型通常有编号列表、项目列表、定义列表等，最常用的是项目列表和编号列表。在,HTML【,属性,】,面板中单击（项目列表）按钮或者选择,【,格式,】/【,列表,】/【,项目列表,】,命令可以设置项目列表格式，在,【,属性,】,面板中单击 （编号列表）按钮或者选择,【,格式,】/【,列表,】/【,编号列表,】,命令可以设置编号列表格式，如图所示。,返回目录,可以根据需要设置列表属性，方法是，将光标置于列表内，然后通过以下任意一种方法打开,【,列表属性,】,对话框进行设置即可，如图所示。,选择,【,格式,】/【,列表,】/【,属性,】,命令。,在鼠标右键快捷菜单中选择,【,列表,】/【,属性,】,命令。,在,HTML【,属性,】,面板中单击 按钮。,返回目录,列表可以嵌套，方法是，首先设置,1,级列表，然后在,1,级列表中选择需要设置为,2,级列表的内容，使其缩进一次，并根据需要重新设置其列表类型，如图所示。,返回目录,五、插入日期、水平线和空格,插入日期。,插入水平线。,插入空格。,返回目录,（,1,）插入日期,插入日期：许多网页在页脚位置都有日期，而且每次修改保存后都会自动更新该日期。可以选择,【,插入,】/【,日期,】,命令打开,【,插入日期,】,对话框，并进行参数设置即可，如图所示。需要注意的是，只有在,【,插入日期,】,对话框中选中,【,储存时自动更新,】,复选框，才能在更新网页时自动更新日期，而且也只有选择了该选项，才能使单击日期时显示日期的,【,属性,】,面板，否则插入的日期仅仅是一段文本而已。,返回目录,（,2,）插入水平线,在制作网页时，经常需要插入水平线，方法是选择,【,插入,】,【HTML】,【,水平线,】,命令。选中水平线，在,【,属性,】,面板中可以设置其属性，如图所示。在水平线,【,属性,】,面板中，可以设置水平线的,id,名称、宽度和高度、对齐方式、是否具有阴影效果等，如,。如果仅仅插入一条水平线不设置任何属性，只需要使用“,”,即可。在上面的代码中，,align,表示对齐方式，其值有,left,（左对齐）、,center,（居中对齐）和,right,（右对齐）。,width,表示宽度，,size,表示高度，,id,表示水平线的,id,名称。,返回目录,（,3,）插入空格,选择,【,插入,】,【HTML】,【,特殊字符,】,【,不换行空格,】,命令或按,Ctrl+Shift+Space,组合键可以添加空格，反复选择该命令或按该键可以连续添加空格。在,Word,文档中，可以反复按,Space,键添加空格，在,Dreamweaver,中却是有条件的，即在,【,首选参数,】,的,【,常规,】,分类中勾选了,【,允许多个连续的空格,】,复选项，否则在文本中只能输入一个空格，不能输入连续的空格。,返回目录,3.1.2,范例解析
展开阅读全文