为网页添加文本(模块二)

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,模块二 为网页添加文本,主讲老师：付建新,Dreamweaver CS3,网页制作任务实训教程,学习目标,掌握添加普通文本、空格、水平线、日期及活动字幕的方法,掌握设置字体格式的操作,掌握设置段落格式的操作,熟悉创建各种列表的方法,任务一,制作“公司介绍”网页的文本,任务目标,为新建的空白网页添加文本等各种元素，完成后的最终效果如图,2-1,所示。,“公司介绍”网页中的内容以及活动字幕滚动显示的效果,任务一,制作“公司介绍”网页的文本,操作思路,（,1,）输入网页中的所有文本。,（,2,）对文本进行分段和换行，并通过插入不换行空格调整文本。,（,3,）在文本中插入日期并在标题下插入水平线。,（,4,）通过输入代码的方式添加活动字幕。,制作“公司介绍”网页文本的操作思路,操作一,添加文本并换行,（,1,）新建“公司介绍,.html”,网页文件。,（,2,）切换至合适的中文输入法，输入相关文本信息，如图所示。,输入文本内容,操作一,添加文本并换行,（,3,）将文本插入点定位到开始处的“公司介绍”文本后面，按“,Enter”,键强制分段，效果如图所示。,（,4,）将文本插入点定位到“美学价值”文本后面，按“,Shift+Enter,”,键使文本换行，效果如图所示。,分段文本,换行文本,操作一,添加文本并换行,（,5,）用相同方法在“营销体系”文本后进行换行操作，如图所示。,（,6,）将文本插入点定位到第,2,段文本开始处，选择,【,插入记录,】【HTML】【,特殊字符,】【,不换行空格,】,菜单命令，如图所示。,换行文本,选择命令,操作一,添加文本并换行,（,7,）此时在“博瑞”文本左侧将插入一个空格符号，如图所示。,（,8,）用相同方法或按“,Ctrl+Shift,+,空格”键快速插入另外,7,个不换行空格符号，效果如图所示。,插入不换行空格,插入多个不换行空格,操作一,添加文本并换行,（,9,）选择插入的,8,个不换行空格符号，按“,Ctrl+C,”键进行复制操作，然后分别在下方的各段落开始处按“,Ctrl+V,”键进行粘贴，完成调整文本的操作，效果如图所示。,复制不换行空格,操作二,添加日期和水平线,（,1,）将文本插入点定位到标题下第,1,段文本中“成立于”文本后面，然后选择,【,插入记录,】【,日期,】,菜单命令，如图所示。,（,2,）打开“插入日期”对话框，在“日期格式”列表框中选择“,1974,年,3,月,7,日”格式选项，单击“确定”按钮，如图所示。,插入日期,选择日期格式,操作二,添加日期和水平线,（,3,）此时将在文本插入点处插入当前操作系统中显示的日期文本，且处于选中状态，效果如图所示。,（,4,）将插入的日期文本根据实际需要进行修改，方法与在,Word,中修改文本相同，这里修改为“,2001,年,1,月,28,日”，效果如图所示。,插入的日期,修改日期文本,操作二,添加日期和水平线,（,5,）将文本插入点定位到标题文本后面，然后选择,【,插入记录,】【HTML】【,水平线,】,菜单命令，如图所示。,（,6,）此时即可在标题段落下方插入默认格式的水平线，如图所示。,选择命令,插入的水平线,操作三,添加活动字幕,（,1,）将文本插入点定位到文本最后，按“,Enter,”键分段，如图所示。,（,2,）单击文档工具栏中的“代码”按钮，在第,14,行“,”下输入如图所示的代码（包括,15,行,17,行的内容），保存设置后按,【F12】,键即可预览效果。,分段文本,输入代码,任务,二,制作“天府美食”网页的文本,任务目标,在网页中输入相应文本，并进行适当的文本格式和段落格式设置，完成后的最终效果如图所示。,设置“天府美食”网页文本格式后的效果,任务,二,制作“天府美食”网页的文本,操作思路,（,1,）在网页中输入具体的文本内容。,（,2,）分别对各段落的文本格式进行设置。,（,3,）设置段落的对齐方式和缩进距离。,制作“天府美食”网页文本的操作思路,操作一,输入文本,（,1,）新建空白网页，并在其中输入具体的文本内容，如图所示。,（,2,）利用“,Enter,”键和“,Shift+Enter,”键对文本进行分段和换行设置，其中前两段为分段操作，后,4,段为换行操作，效果如图所示。,输入文本,分段与换行设置,操作二,设置文本格式,（,1,）单击属性检查器中“字体”下拉列表框右侧的下拉按钮，在弹出的菜单中选择“编辑字体列表”命令，如图所示。,（,2,）打开“编辑字体列表”对话框，在“可用字体”列表框中选择需添加的字体，这里选择“方正准圆简体”选项，单击该列表框左侧的“添加”按钮，如图所示。,选择命令,选择字体,操作二,设置文本格式,（,3,）此时所选字体将添加到“选择的字体”列表框中，完成后单击“确定”按钮，如图所示。,（,4,）拖动鼠标选择标题中的“天府美食”文本，单击属性检查器中的“字体”下拉列表框右侧的下拉按钮，在弹出的菜单中选择前面添加的“方正准圆简体”选项，如图所示。,添加字体,应用字体样式,操作二,设置文本格式,（,5,）此时所选文本将应用字体样式，保持文本的选中状态，在属性检查器的“大小”下拉列表框中选择“特大”选项，设置所选文本的字号大小，如图所示。,（,6,）继续保持文本的选中状态，在属性检查器的“大小”下拉列表框右侧单击颜色色块，在弹出的列表中选择编码为“,#FF0000,”的颜色选项，如图所示。,设置字体大小,设置文本颜色,操作二,设置文本格式,（,7,）拖动鼠标选择除标题外的所有文本，在属性检查器中的“大小”下拉列表框中选择“,18,”选项，如图所示。,（,8,）保持文本的选中状态，通过属性检查器中的颜色色块将文本颜色设置为“,#003399,”所对应的颜色，如图所示。,设置字体大小,设置文本颜色,操作二,设置文本格式,（,9,）选择“特点”文本，将其颜色设置为“,#FF0000,”对应的颜色，如图所示。,（,10,）保持文本的选中状态，单击属性检查器中的“加粗”按钮，加粗所选文本的外观，如图所示。,设置文本颜色,加粗文本,操作二,设置文本格式,（,11,）按设置“特点”文本格式的方法，依次对“调味方法”、“烹调方法”和“代表菜”文本进行相同格式设置，如图所示。,设置其他文本格式,操作三,设置段落格式,（,1,）拖动鼠标选择标题“天府美食”文本，单击属性检查器中的“居中对齐”按钮，如图所示。,（,2,）将文本插入点定位到第,2,段文本的开始处，按,7,次“,Ctrl+Shift+,空格”键调整文本位置，如图所示。,设置段落对齐方式,添加多个不换行空格,操作三,设置段落格式,（,3,）选择最后,4,段文本，单击属性检查器中的“文本缩进”按钮，增加所选文本的缩进距离，如图所示。,（,4,）将网页以“天府美食”为名进行保存，最后在,IE,浏览器中预览效果即可。,设置段落缩进距离,任务三,制作“汽车销售”网页的文本,任务目标,在网页中输入相应文本，并创建各种文本列表，然后对文本进行适当格式设置，完成后的最终效果如图所示。,设置“汽车销售”网页文本后的效果,任务三,制作“汽车销售”网页的文本,操作思路,（,1,）在网页中输入具体的文本内容。,（,2,）为输入的文本创建编号列表并设置编号样式。,（,3,）在编号列表下进一步创建项目列表。,（,4,）对文本和段落进行适当格式设置并美化网页背景。,制作“汽车销售”网页文本的操作思路,操作一,输入文本并创建编号列表,（,1,）新建空白网页，在其中输入如图所示的文本内容。,（,2,）利用“,Enter,”键将输入的文本内容分为,4,段，效果如图所示。,输入文本内容,为输入的文本分段,操作一,输入文本并创建编号列表,（,3,）拖动鼠标选择后,3,段文本，单击属性检查器中的“编号列表”按钮，如图所示。,创建编号列表,操作一,输入文本并创建编号列表,（,4,）此时所选的文本段落将变为编号列表的形式。保持段落的选中状态，在其上单击鼠标右键，在弹出的快捷菜单中选择,【,列表,】【,属性,】,菜单命令，如图所示。,（,5,）打开“列表属性”对话框，单击“样式”下拉列表框右侧的下拉按钮，在弹出的下拉列表中选择大写罗马字母对应的选项，如图所示。,设置编号列表属性,选择编号样式,操作一,输入文本并创建编号列表,（,6,）设置了编号样式后单击“列表属性”对话框中的“确定”按钮，如图所示。,（,7,）此时创建的编号列表的样式将显示为设置的大写罗马字母编号，如图所示。,确定设置,更改编号样式后的效果,操作二,创建项目列表,（,1,）在“乘用车”文本后单击鼠标定位文本插入点，然后按“,Enter,”键，效果如图所示。,（,2,）在新增的列表段落中输入如图所示的文本内容。,增加列表段落,输入列表内容,操作二,创建项目列表,（,3,）用相同方法继续输入如图所示的列表内容。,（,4,）选择新增列表段落，单击属性检查器中的“项目列表”按钮，如图所示。,添加列表内容,选择新增的列表,操作二,创建项目列表,（,5,）此时编号列表将变为项目列表的显示。保持所选对象的选中状态，单击属性检查器中的“文本缩进”按钮，如图所示，使所选项目列表成为已经创建的编号列表的嵌套列表。,（,6,）继续保持所选对象的选中状态，在其上单击鼠标右键，在弹出的快捷菜单中选择,【,列表,】【,属性,】,菜单命令，如图所示。,更改为项目列表,缩进列表段落,操作二,创建项目列表,（,7,）打开“列表属性”对话框，在“样式”下拉列表框中选择“正方形”选项，单击“确定”按钮，效果如图所示。,（,8,）关闭对话框后，所选嵌套的项目列表的项目符号样式即更改为正方形效果，如图所示。,更改项目符号样式,更改后的效果,操作二,创建项目列表,（,9,）在“商用车”文本后定位插入点，按“,Enter,”分段，并按照前面相同的操作新增列表内容，如图所示。,（,10,）选中新增的列表内容，将其更改为项目列表，如图所示。,新增列表内容,更改为项目列表,操作二,创建项目列表,（,11,）将更改的项目列表通过“文本缩进”按钮 更改为编号列表的嵌套列表，如图所示。,（,12,）利用“列表属性”对话框将项目列表的项目符号更改为正方形样式，如图所示。,缩进列表距离,更改项目符号样式,操作二,创建项目列表,（,13,）按照相同的方法在“新能源汽车”编号列表下创建嵌套的项目列表，如图所示。,新增项目嵌套列表,操作三,美化网页文本,（,1,）选择标题“业务范围”文本，将其文本格式设置为“字体,-,方正粗倩简体、大小,-,特大、颜色,-#660000”,，如图,所示。,（,2,）选择除标题文本以外的所有文本段落，将其文本颜色设置为“,#003300,”，如图所示。,设置标题格式,设置文本颜色,操作三,美化网页文本,（,3,）利用“加粗”按钮 将编号列表的文本加粗显示，如图所示。,（,4,）选择,【,修改,】【,页面属性,】,菜单命令或按“,Ctrl+J,”键，如图所示。,加粗文本,选择命令,操作三,美化网页文本,（,5,）打开“页面属性”对话框，选择“分类”列表框中的“外观”选项，将右侧的“背景颜色”参数设置为“,#99CCFF,”，单击“确定”按钮，如图所示。,（,6,）完成页面设置后将新建的网页以“汽车销售业务范围”为名进行保存，然后按,【F12】,键进行预览，如图所示。,设置网页背景颜色,预览效果,实训一,制作“产品介绍”网页文本,实训目标,综合利用本模块所讲的相关知识，制作出如图所示的网页文本效果。,“产品介绍”网页效果,实训一,制作“产品介绍”网页文本,实训分析,（,1,）输入网页中需要的文本，进行分段处理，并在第,2,段文本前面插入,8,个不换行空格。,（,2,）在第一段文本下面插