网页制作项目03编排校园文学网页

1、主 讲 ：主 讲 ：网页设计与制作dreamweaver 8项目三 编排校园文学网页任务一 设置页面属性任务二 编排页眉文本项目三：项目三： 编排校园文学网页编排校园文学网页网 页 设 计 与 制 作dreamweaver 8任务一任务二任务三 编排网页主体文本任务四 编排页脚文本任务三小 结任务四实 训任务一 设置页面属性 本任务主要介绍在【页面属性】对话框中设置文本字体、大小、颜色、背景颜色、背景图像、页边距、网页标题及文档编码的基本方法。 通过本任务的学习，读者应对页面属性有一个全面的认识，并掌握参数的设置方法。dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校

2、园文学网页编排校园文学网页设置页面属性操作动画设置页面属性操作动画任务一任务二任务三小 结任务四实 训1. 设置【外观】分类 通过通过【页面属性页面属性】对话框的对话框的【外观外观】分类，可以设置当前网页文分类，可以设置当前网页文本的字体、大小、颜色以及网页的背景颜色、背景图像和页边距等。本的字体、大小、颜色以及网页的背景颜色、背景图像和页边距等。背景图像还可以通过背景图像还可以通过【重复重复】选项来决定背景图像是重复还是不重复，选项来决定背景图像是重复还是不重复，是横向重复还是纵向重复。是横向重复还是纵向重复。 dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文

3、学网页编排校园文学网页任务一 设置页面属性任务一任务二任务三小 结任务四实 训 通过通过【页面属性页面属性】对话框的对话框的【链接链接】分类，可以设置当前网分类，可以设置当前网页超级链接文本的字体、大小、不同状态下链接文本的颜色等属页超级链接文本的字体、大小、不同状态下链接文本的颜色等属性。性。2. 设置【链接】分类dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务一 设置页面属性任务一任务二任务三小 结任务四实 训 通过通过【页面属性页面属性】对话框的对话框的【标题标题】分类，可以设置当前网分类，可以设置当前网页标题页标题“标题标题1标

4、题标题6”的字体、大小、颜色等属性，通常保持的字体、大小、颜色等属性，通常保持默认设置。默认设置。 3. 设置【标题】分类dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务一 设置页面属性任务一任务二任务三小 结任务四实 训 通过通过【页面属性页面属性】对话框的对话框的【标题标题/ /编码编码】分类，可以设置当前网分类，可以设置当前网页在浏览器标题栏显示的标题以及文档类型和编码。文档类型和编码如页在浏览器标题栏显示的标题以及文档类型和编码。文档类型和编码如果在果在【首选参数首选参数】的的【新建文档新建文档】分类中已进行了设置，这里将显示原

5、分类中已进行了设置，这里将显示原设置值，如需要修改可以在此处进行重新设置。设置值，如需要修改可以在此处进行重新设置。4.设置【标题/编码】分类dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务一 设置页面属性任务一任务二任务三小 结任务四实 训 本任务主要是对网页页眉部分的文本进行编排。 通过学习，应该掌握的内容主要有文本字体、大小和颜色设置以及文本对齐方式等。dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务二 编排页眉文本编排页眉操作动画编排页眉操作动画任务一任务二任务三小 结任

6、务四实 训 广义的文本字体属性通常包括文本的字体、字号、颜色等，它可以广义的文本字体属性通常包括文本的字体、字号、颜色等，它可以通过通过【属性属性】面板中的面板中的【字体字体】、【大小大小】、【颜色颜色】等选项或等选项或【文本文本】菜单中的菜单中的【字体字体】、【大小大小】、【颜色颜色】等命令来设置。等命令来设置。1.设置【字体】、【大小】和【颜色】等dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务二 编排页眉文本任务一任务二任务三小 结任务四实 训 文本的对齐方式通常有文本的对齐方式通常有4 4种：种：【左对齐左对齐】、【居中对齐居中

7、对齐】、【右对齐右对齐】和和【两端对齐两端对齐】。可以依次通过单击。可以依次通过单击【属性属性】面板中面板中的的【左对齐左对齐】、【居中对齐居中对齐】、【右对齐右对齐】和和【两端对齐两端对齐】按钮按钮来实现，也可以通过在主菜单栏或右键快捷菜单中选择来实现，也可以通过在主菜单栏或右键快捷菜单中选择【文本文本】【对齐对齐】级联菜单命令来实现。如果设置多个段落的对齐方式，级联菜单命令来实现。如果设置多个段落的对齐方式，则需要先选中这些段落。则需要先选中这些段落。2.设置文本对齐方式dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务二 编排页眉文

8、本任务一任务二任务三小 结任务四实 训 本任务主要是对网页主体部分的文本进行编排，涉及到的知识点有文本标题格式，文本的字体、大小和颜色，文本对齐方式以及列表的应用等。dreamweaver 8网 页 设 计 与 制 作任务三 编排网页主体文本项目三：项目三： 编排校园文学网页编排校园文学网页编排网页主体操作动画编排网页主体操作动画任务一任务二任务三小 结任务四实 训操作一 编排左侧栏目文本 本操作主要是编排网页左侧栏目中的文本。通过本操本操作主要是编排网页左侧栏目中的文本。通过本操作的学习，应该掌握的内容主要有：作的学习，应该掌握的内容主要有： 1、设置文本段落的方法、设置文本段落的方法 在文

9、档窗口中，每按一次在文档窗口中，每按一次【enter】键就会生成一个段键就会生成一个段落。按落。按【enter 】键的操作通常称为键的操作通常称为“硬回车硬回车”，段落就是，段落就是带有硬回车的文本组合。由硬回车生成的段落，其带有硬回车的文本组合。由硬回车生成的段落，其html标标签是签是“文本文本”。使用硬回车划分段落后，段落与段。使用硬回车划分段落后，段落与段落之间会产生一个空行间距。落之间会产生一个空行间距。 如果以如果以css样式的方式设置了一个段落的字体、大小样式的方式设置了一个段落的字体、大小和颜色属性，按和颜色属性，按【enter】键后下一段文本会继承这一属性键后下一段文本会继承

10、这一属性。如果要取消这一属性，需要在。如果要取消这一属性，需要在【属性属性】面板的面板的【样式样式】下拉列表中选择下拉列表中选择“无无”。dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训操作一 编排左侧栏目文本 2、插入换行符的方法、插入换行符的方法 插入换行符可以在主菜单栏中选择插入换行符可以在主菜单栏中选择【插入插入】【html】【特殊字符特殊字符】【换行符换行符】命令，也可以按命令，也可以按【 shift 】 + 【 enter 】键。其键。其html标签是标签是“”。使用。使用换行符只能使文本换行

11、，但这不等于重新开始一个段落，换行符只能使文本换行，但这不等于重新开始一个段落，只有按只有按【 enter 】 键才是重新开始一个段落。键才是重新开始一个段落。dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页换行符任务一任务二任务三小 结任务四实 训操作一 编排左侧栏目文本 3、设置文本样式的方法、设置文本样式的方法 通过通过【文本文本】【样式样式】级联菜单命令可以对文本设级联菜单命令可以对文本设置简单的样式，如置简单的样式，如“下划线下划线”、“删除线删除线”等。在等。在【属性属性】面板中，单击面板中，单击【 b 】按钮或按钮或【 i 】

12、按钮也可以给文本设按钮也可以给文本设置粗体或斜体样式。置粗体或斜体样式。 dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页加下划线 任务一任务二任务三小 结任务四实 训 4 4、设置文本对齐方式的方法、设置文本对齐方式的方法 单击单击【属性属性】面板的面板的 【左对齐左对齐】、【居中对齐居中对齐】、【右对齐右对齐】和和【两端对齐两端对齐】按钮或选择按钮或选择【文本文本】/ /【对齐对齐】菜单中的菜单中的【左对齐左对齐】、【居中对齐居中对齐】、【右对齐右对齐】和和【两两端对齐端对齐】命令可分别使文本左对齐、居中对齐、右对齐和命令可分别使文本左

13、对齐、居中对齐、右对齐和两端对齐。两端对齐。dreamweaver 8网 页 设 计 与 制 作操作一 编排左侧栏目文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 5 5、【文本文本】工具面板和插入特殊字符的方法工具面板和插入特殊字符的方法 在在【插入插入】面板中选择面板中选择【文本文本】选项，将出现选项，将出现【文本文本】工具面板。工具面板。【文本文本】工具面板的最后一项为工具面板的最后一项为【字符字符】，单击该项将出现字符列表下，单击该项将出现字符列表下拉菜单，其中所列符号都可以通过选择插入到文本中。选择拉菜单，其中所列符号都可以通过选择插入到文

14、本中。选择【其他字符其他字符】选项，将打开选项，将打开【插入其他字符插入其他字符】对话框，可以从中插入一些特殊符号。对话框，可以从中插入一些特殊符号。插入特殊字符也可以通过插入特殊字符也可以通过【插入插入】【htmlhtml】【特殊字符特殊字符】级联菜单级联菜单命令进行。命令进行。dreamweaver 8网 页 设 计 与 制 作操作一 编排左侧栏目文本项目三：项目三： 编排校园文学网页编排校园文学网页【文本】工具面板 字符列表 【插入其他字符】对话框 任务一任务二任务三小 结任务四实 训 本操作主要是编排网页右侧栏目中的文本。通过本操作的学习本操作主要是编排网页右侧栏目中的文本。通过本操作

15、的学习，应该掌握的内容主要有：，应该掌握的内容主要有： 1、设置文档标题的方法、设置文档标题的方法 文档标题主要用来对页面内容进行概括或分类。文档标题主要用来对页面内容进行概括或分类。dreamweaver提供了提供了6种标准的样式种标准的样式“标题标题1”“标题标题6”，可以在，可以在【属性属性】面板的面板的【格式格式】下拉列表中进行选择。下拉列表中进行选择。“标题标题1”“标题标题6”对应的对应的html标标签是签是“”“”。当将标题设置成。当将标题设置成“标题标题1”“标题标题6”中的中的某一种时，某一种时，dreamweaver会按其默认设置显示。当然也可以通过会按其默认设置显示。当然

16、也可以通过【页面属性页面属性】对话框的对话框的【标题标题】分类来重新设置分类来重新设置“标题标题1”“标题标题6”的字体、大小和颜色属性。的字体、大小和颜色属性。dreamweaver 8网 页 设 计 与 制 作操作二 编排右侧正文文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 2 2、设置文本缩进或凸出的方法、设置文本缩进或凸出的方法 在文档排版过程中，有时会遇到需要使某段文本整体向内缩在文档排版过程中，有时会遇到需要使某段文本整体向内缩进或整体向外凸出的情况。在主菜单栏或右键快捷菜单中选择进或整体向外凸出的情况。在主菜单栏或右键快捷菜单中选择【

17、文本文本】【缩进缩进】命令或命令或【文本文本】【凸出凸出】命令，或者单击命令，或者单击【属性属性】面板上的面板上的【缩进缩进】按钮或按钮或【凸出凸出】按钮，可以使段落整按钮，可以使段落整体向内缩进或整体向外凸出。体向内缩进或整体向外凸出。dreamweaver 8网 页 设 计 与 制 作操作二 编排右侧正文文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 3 3、列表的应用、列表的应用 列表是一种简单而实用的段落排列方式，最经常使用的两种列表是项列表是一种简单而实用的段落排列方式，最经常使用的两种列表是项目列表和编号列表。通过目列表和编号列表。通过【

18、列表属性列表属性】对话框可以对列表的样式进行更改。对话框可以对列表的样式进行更改。当在当在【列表类型列表类型】下拉列表中选择下拉列表中选择“项目列表项目列表”时，对应的时，对应的【样式样式】下拉下拉列表中的选项有列表中的选项有“默认默认”、“项目符号项目符号”和和“正方形正方形”。当在。当在【列表类型列表类型】下拉列表中选择下拉列表中选择“编号列表编号列表”时，对应的时，对应的【样式样式】下拉列表中的选项发生下拉列表中的选项发生了变化，了变化，【开始计数开始计数】选项也处于可用状态，通过选项也处于可用状态，通过【开始计数开始计数】选项，可选项，可以设置编号列表的起始编号。以设置编号列表的起始编

19、号。dreamweaver 8网 页 设 计 与 制 作操作二 编排右侧正文文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 4 4、插入水平线的方法、插入水平线的方法 在主菜单栏中选择在主菜单栏中选择【插入插入】【htmlhtml】【水平线水平线】命令，在文档中插入一条水平线。如果对插入的水平线不命令，在文档中插入一条水平线。如果对插入的水平线不满意，可以通过满意，可以通过【属性属性】面板对其宽度、高度、对齐方式面板对其宽度、高度、对齐方式和是否有阴影进行修改。和是否有阴影进行修改。dreamweaver 8网 页 设 计 与 制 作操作二 编排右侧

20、正文文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 本任务主要是对网页页脚部分的文本进行编排。通过本任务的学习，本任务主要是对网页页脚部分的文本进行编排。通过本任务的学习，应该掌握的内容主要是插入日期的方法。应该掌握的内容主要是插入日期的方法。 在主菜单栏中选择在主菜单栏中选择【插入插入】【日期日期】命令，打开命令，打开【插入日期插入日期】对话对话框，可分别对框，可分别对【星期格式星期格式】、【日期格式日期格式】和和【时间格式时间格式】进行设置，并进行设置，并可选择是否可选择是否【储存时自动更新储存时自动更新】。如果对日期格式不满意，可用鼠标单击。如

21、果对日期格式不满意，可用鼠标单击插入的日期，显示日期插入的日期，显示日期【属性属性】面板，然后单击面板，然后单击【编辑日期格式编辑日期格式】按钮，按钮，打开打开【插入日期插入日期】对话框进行重新设置。对话框进行重新设置。dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务四 编排页脚文本任务一任务二任务三小 结任务四实 训 需要注意的是，只有在需要注意的是，只有在【插入日期插入日期】对话框中选择对话框中选择【储存时自动更新储存时自动更新】选项的前提下，才能够做到单击日期选项的前提下，才能够做到单击日期显示日期编辑显示日期编辑【属性属性】面板

22、，否则插入的日期仅仅是一段面板，否则插入的日期仅仅是一段文本而已。另外，只有第文本而已。另外，只有第1 1次打开次打开【插入日期插入日期】对话框时，对话框时，才显示才显示【储存时自动更新储存时自动更新】选项。以后每次对网页进行更选项。以后每次对网页进行更新或修改时，该日期都会自动进行更新。新或修改时，该日期都会自动进行更新。dreamweaver 8网 页 设 计 与 制 作项目三：项目三： 编排校园文学网页编排校园文学网页任务四 编排页脚文本任务一任务二任务三小 结任务四实 训实训 设置“郭沫若散文欣赏”文档格式 本实训将对网页文本编排的基本知识加以巩固，同时掌握本实训将对网页文本编排的基本知识加以巩固，同时掌握一些文本编排的基本技巧和基本操作。一些文本编排的基本技巧和基本操作。dreamweaver 8网 页 设 计 与 制 作实训结果文件见实训结果文件见“项目结果项目结果”文件夹中的文件夹中的“shixun .htm”。项目三：项目三： 编排校园文学网页编排校园文学网页【实训目的实训目的】l进一步巩固页面属性的设置方法。进一步巩固页面属性的设置方法。 l进一步巩固标题和字体的设置方法。进一步巩固标题和字体的设置方法。 l进一步巩固列表和文本缩进的