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

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

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

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

4、等属性，通常保持的字体、大小、颜色等属性，通常保持默认设置。默认设置。 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、设置文本样式的方法、设置文本样式的方法 通过【文本】【样式】级联菜单命令可以对文本设通过【文本】【样式】级联菜单命令可以对文本设置简单的样式，如置简单的样式，如“下划线下划线”、“删除线删除线”等。在【属性】等。在【属性】面板中，单击【面板中，

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

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

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

15、 本操作主要是编排网页右侧栏目中的文本。通过本操作的学习，本操作主要是编排网页右侧栏目中的文本。通过本操作的学习，应该掌握的内容主要有：应该掌握的内容主要有： 1、设置文档标题的方法、设置文档标题的方法 文档标题主要用来对页面内容进行概括或分类。文档标题主要用来对页面内容进行概括或分类。dreamweaver提供了提供了6种标准的样式种标准的样式“标题标题1”“标题标题6”，可以在【属性】面板的，可以在【属性】面板的【格式】下拉列表中进行选择。【格式】下拉列表中进行选择。“标题标题1”“标题标题6”对应的对应的html标标签是签是“”“”。当将标题设置成。当将标题设置成“标题标题1”“标题标题

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

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

18、使用的两种列表是项列表是一种简单而实用的段落排列方式，最经常使用的两种列表是项目列表和编号列表。通过【列表属性】对话框可以对列表的样式进行更改。目列表和编号列表。通过【列表属性】对话框可以对列表的样式进行更改。当在【列表类型】下拉列表中选择当在【列表类型】下拉列表中选择“项目列表项目列表”时，对应的【样式】下拉时，对应的【样式】下拉列表中的选项有列表中的选项有“默认默认”、“项目符号项目符号”和和“正方形正方形”。当在【列表类型】。当在【列表类型】下拉列表中选择下拉列表中选择“编号列表编号列表”时，对应的【样式】下拉列表中的选项发生时，对应的【样式】下拉列表中的选项发生了变化，【开始计数】选项

19、也处于可用状态，通过【开始计数】选项，可了变化，【开始计数】选项也处于可用状态，通过【开始计数】选项，可以设置编号列表的起始编号。以设置编号列表的起始编号。dreamweaver 8网页设计与制作操作二 编排右侧正文文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 4 4、插入水平线的方法、插入水平线的方法 在主菜单栏中选择【插入】【在主菜单栏中选择【插入】【htmlhtml】【水平线】【水平线】命令，在文档中插入一条水平线。如果对插入的水平线不命令，在文档中插入一条水平线。如果对插入的水平线不满意，可以通过【属性】面板对其宽度、高度、对齐方式满意，可

20、以通过【属性】面板对其宽度、高度、对齐方式和是否有阴影进行修改。和是否有阴影进行修改。dreamweaver 8网页设计与制作操作二 编排右侧正文文本项目三：项目三： 编排校园文学网页编排校园文学网页任务一任务二任务三小 结任务四实 训 本任务主要是对网页页脚部分的文本进行编排。通过本任务的学习，本任务主要是对网页页脚部分的文本进行编排。通过本任务的学习，应该掌握的内容主要是插入日期的方法。应该掌握的内容主要是插入日期的方法。 在主菜单栏中选择【插入】【日期】命令，打开【插入日期】对话在主菜单栏中选择【插入】【日期】命令，打开【插入日期】对话框，可分别对【星期格式】、【日期格式】和【时间格式】

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

22、注意的是，只有在【插入日期】对话框中选择【储存时自动更新】选项的前提下，才能够做到单击日期【储存时自动更新】选项的前提下，才能够做到单击日期显示日期编辑【属性】面板，否则插入的日期仅仅是一段显示日期编辑【属性】面板，否则插入的日期仅仅是一段文本而已。另外，只有第文本而已。另外，只有第1 1次打开【插入日期】对话框时，次打开【插入日期】对话框时，才显示【储存时自动更新】选项。以后每次对网页进行更才显示【储存时自动更新】选项。以后每次对网页进行更新或修改时，该日期都会自动进行更新。新或修改时，该日期都会自动进行更新。dreamweaver 8网页设计与制作项目三：项目三： 编排校园文学网页编排校园

23、文学网页任务四 编排页脚文本任务一任务二任务三小 结任务四实 训实训 设置“郭沫若散文欣赏”文档格式 本实训将对网页文本编排的基本知识加以巩固，同时掌握本实训将对网页文本编排的基本知识加以巩固，同时掌握一些文本编排的基本技巧和基本操作。一些文本编排的基本技巧和基本操作。dreamweaver 8网页设计与制作实训结果文件见实训结果文件见“项目结果项目结果”文件夹中的文件夹中的“shixun .htm”。项目三：项目三： 编排校园文学网页编排校园文学网页【实训目的】【实训目的】l进一步巩固页面属性的设置方法。进一步巩固页面属性的设置方法。 l进一步巩固标题和字体的设置方法。进一步巩固标题和字体的设置方法