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

模块二 为网页添加文本 主讲老师：付建新Dreamweaver CS3网页制作任务实训教程学习目标u掌握添加普通文本、空格、水平线、日期及活动字幕的方法u掌握设置字体格式的操作u掌握设置段落格式的操作u熟悉创建各种列表的方法任务一 制作“公司介绍”网页的文本u任务目标为新建的空白网页添加文本等各种元素，完成后的最终效果如图2-1所示。“公司介绍”网页中的内容以及活动字幕滚动显示的效果任务一 制作“公司介绍”网页的文本u操作思路（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】键即可预览效果。分段文本输入代码任务二 制作“天府美食”网页的文本u任务目标在网页中输入相应文本，并进行适当的文本格式和段落格式设置，完成后的最终效果如图所示。设置“天府美食”网页文本格式后的效果任务二 制作“天府美食”网页的文本u操作思路（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浏览器中预览效果即可。设置段落缩进距离任务三 制作“汽车销售”网页的文本u任务目标在网页中输入相应文本，并创建各种文本列表，然后对文本进行适当格式设置，完成后的最终效果如图所示。设置“汽车销售”网页文本后的效果任务三 制作“汽车销售”网页的文本u操作思路（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】键进行预览，如图所示。设置网页背景颜色 预览效果实训一 制作“产品介绍”网页文本u实训目标综合利用本模块所讲的相关知识，制作出如图所示的网页文本效果。“产品介绍”网页效果实训一 制作“产品介绍”网页文本u实训分析（1）输入网页中需要的文本，进行分段处理，并在第2段文本前面插入8个不换行空格。（2）在第一段文本下面插入水平线，并设置其宽度为“1000”、高度为“3”。（3）选择最后4段文本，将其创建为项目列表，并更改项目符号的样式为正方形。（4）设置标题文本的格式为“字体-方正古隶简体、大小-80、居中对齐、颜色-#990033”。（5）设置其他文本的格式为“大小-80、加粗、颜色-#990033”。制作“产品介绍”网页文本的操作思路实训二 制作“听读看”网页文本u实训目标通过创建定义列表的方式制作出如图所示的网页文本效果。“听读看”网页文本效果实训二 制作“听读看”网页文本u实训分析（1）新建网页，并设置定义列表的输入模式（即在当前文本插入点处单击鼠标右键，在弹出的快捷菜单中选择【列表】【定义列表】菜单命令），并输入具体的内容。（2）利用“Enter”键逐步输入定义列表的各级内容。（3）设置定义列表中各级文本的格式，其中“听”、“读”和“看”的格式为“字体-方正卡通简体、大小-70、加粗、倾斜”，颜色依次设置为“#009900”、“#993300”和“#003366”；3个英语单词的格式为“字体-方正卡通简体、大小-70、加粗、颜色-#990000”；其余文本的格式为“字体-黑体、颜色-#990000”。制作“听读看”网页文本的操作思路