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

模块二为网页添加文本,主讲老师：付建新,DreamweaverCS3网页制作任务实训教程,学习目标,掌握添加普通文本、空格、水平线、日期及活动字幕的方法掌握设置字体格式的操作掌握设置段落格式的操作熟悉创建各种列表的方法,任务一制作“公司介绍”网页的文本,任务目标为新建的空白网页添加文本等各种元素，完成后的最终效果如图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）在第一段文本下面插入水平线，并设置其宽度为“1000”、高度为“3”。（3）选择最后4段文本，将其创建为项目列表，并更改项目符号的样式为正方形。（4）设置标题文本的格式为“字体-方正古隶简体、大小-80、居中对齐、颜色-#990033”。（5）设置其他文本的格式为“大小-80、加粗、颜色-#990033”。,制作“产品介绍”网页文本的操作思路,实训二制作“听读看”网页文本,实训目标通过创建定义列表的方式制作出如图所示的网页文本效果。,“听读看”网页文本效果,实训二制作“听读看”网页文本,实训分析（1）新建网页，并设置定义列表的输入模式（即在当前文本插入点处单击鼠