电子商务网页制作04课件

1、主编：谢嵘在我们所知道的网页中，有着丰富的内容，其中文字是必不可少的。在看这些文字的过程中，大家会发现，网页上的有各种各样的文字，大的、小的、红的、蓝的、粗的、细的等等，这些不同样式的文字，使得原本很单调的文本内容丰富了起来，人们在阅读的时候，对着不同的文字，有着不同的心态。那么这些不同的文字是如何做出来的呢？本项目从文字方面入手，介绍了文本添加的方式以及对添加的文本如何来进行编辑。 项目4 美化网页文本 项目导学 体验活动一：在网页中添加“本站信息”页面文本活动任务：在网页中直接输入文本信息；粘贴其他文本中已经存在的文字信息到网页中；导入外部文档。活动指导：文字是从什么地方来的呢？第一种，可

2、以通过直接在网页上输入文字来获得；另外，还可以通过复制其他文本信息（如 Word、记事本和 Excel 等），然后粘贴在网页中来添加“本站信息”页面文本；除了以上两种插入文本信息之外，还可以通过直接导入已经存在的Word文档信息来输入网页内容。 项目4 美化网页文本 体验活动一：在网页中添加“本站信息”页面文本 活动步骤：启动Dreamweaver CS4软件。新建一个HTML网页，在“设计”页面中直接键入中文内容。将其他应用程序（如Word）中的文本内容进行复制，然后在“设计”页面中将复制的内容进行粘贴。 项目4 美化网页文本 体验活动一：在网页中添加“本站信息”页面文本 活动步骤：在“设计

3、”页面中，点击“文件”菜单，选择“导入”，在出现的下一级菜单中选择“Word文档”。在弹出的“导入Word文档”对话框中，选择需要添加的一个Word文档，然后点击“打开”，即可将文档导入到网页中。 项目4 美化网页文本 体验活动一：在网页中添加“本站信息”页面文本 活动步骤：最终效果，如图所示。 项目4 美化网页文本 活动小结在完成了以上体验活动后，根据体验后的感受，写出以下三种文档分别选择哪种插入方式，填写下表 项目3 用表格布局网页 三种文字的插入方式从网页上找出的某段信息单独一行文字已经存在的Word中的个人日志体验活动二：设置“本站信息”中的文字的样式活动任务：设置字号、字体颜色和显示

4、位置。活动指导：设置标题“本站信息”为黑体，红色，24号字，居中显示；在以下讲解的设置中，如果弹出创建CSS的对话框，在“选择器类型”下拉菜单中，选择“类（可应用任何HTML元素）”，而“选择器名称”的下拉菜单中，输入“.style”，然后点击确定。 项目4 美化网页文本 体验活动二：设置“本站信息”中的文字的样式活动步骤：选中“本站信息”，在“属性”页面，点击“字体”的下拉列表，选择“编辑字体列表”。在弹出的“编辑字体列表”中，选择“黑体”，添加到“选择的字体”中。 项目4 美化网页文本 体验活动二：设置“本站信息”中的文字的样式活动步骤：在“颜色”下拉菜单中，选择红色，在“大小”选项框中，

5、选择字体大小为“24”号字，并点击“居中”按钮。最终显示效果如图所示。 项目4 美化网页文本 体验活动三：处理表格中的数据活动任务：用表格工具处理数据，对数据进行排序操作。活动指导：学习新的新建页面的方法和打开方法。在实际工作中，利用“文件”面板来完成这样的工作更便于对页面的管理，不容易造成页面保存路径的出错。 项目4 美化网页文本 体验活动三：处理表格中的数据活动步骤：选中需要编辑的段落，点击鼠标右键，在弹出的对话框中选择“段落格式”，在下一级菜单中选择“标题1”。选中需要编辑的段落，按照上面的方法，在弹出的“段落格式”中，选择“标题2”。 项目4 美化网页文本 体验活动三：处理表格中的数据

6、活动步骤：在第二段文字后，按shift+enter键，换行输入以下文字，可以看出，换行和段落相比，换行的间距比段落小很多。也可以使用“文本”工具栏中的“BR”来进行换行。将光标插入到需要换行的文字前面。 项目4 美化网页文本 体验活动三：处理表格中的数据活动步骤：在弹出的下拉列表中，选择“换行符”。最终效果，如图所示。 项目4 美化网页文本 体验活动四：在网页中添加特殊字符活动任务：在网页上引用特殊字符。活动指导：我们在浏览网页的时候，可以看到网站上有一些特殊的符号，那这些符号又是怎么来的呢？ 项目4 美化网页文本 体验活动四：在网页中添加特殊字符活动步骤：在需要插入特殊字符的地方点击鼠标左键

7、，然后点击菜单“插入”中的“HTML”在下一级菜单中选择“特殊字符”。按照上面的方法，试一下其他的每一种特殊字符。 项目4 美化网页文本 体验活动五：设置“本站信息”内容为列表样式活动任务：在网页中使用列表。活动指导：在网页内容中，为了将主题或数据与文档分开，一般采用列表来区分它们。 项目4 美化网页文本 体验活动五：设置“本站信息”内容为列表样式活动步骤：项目列表。选中需要进行区分的文档，点击右键，选择“列表”，在出现的下一级菜单中选择“项目列表”。按照上面的方式，在“列表”弹出的下一级菜单中，选择“编号列表”。 项目4 美化网页文本 体验活动五：设置“本站信息”内容为列表样式活动步骤：最终

8、显示效果，如图所示，由此可见，列表只能针对段落有效，而对换行的文字，是不能形成列表样式的。 项目4 美化网页文本 活动小结在完成了以上体验活动后，根据体验后的感受，填写下表。 项目3 用表格布局网页 设置字体包括1、字体颜色2、3、粗细4、设置段落格式有三种形式1、2、换行3、项目列表和编号列表的直观区别：相关知识一、插入文本在网页的制作过程中，文字信息必不可少，这里介绍了3中插入文字的方法：在网页中键入文本；从其他应用程序（如 MS-Word、记事本和 MS-Excel 等）复制并粘贴文本；将 Word 文档导入 Dreamweaver； 项目4 美化网页文本 相关知识二、编辑文本在插入了文

9、本后，为了使文本更加生动，通常我们都会进行一定的修改，是文字呈现出不同效果。对文字的修改可以使用“常用”工具栏上的“文本”工具栏。 项目4 美化网页文本 相关知识二、编辑文本修改字体设置： 一般情况下，输入文字的字体都是设置为“默认字体”。若想要修改字体，选中需要修改的文字，点击图中“默认字体”的下拉箭头“”，选择其他的字体样式。 项目4 美化网页文本 相关知识二、编辑文本修改字体样式： 默认设置的字体都是没有样式的，如果想要将标题文字加粗，先选中标题文字，然后点击“B”，如果想使文字成为斜体，则点击“I”键。 项目4 美化网页文本 相关知识二、编辑文本修改字体样式： 如果想要设置文字对齐方式，则点击如图所示的按钮。 项目4 美化网页文本 相关知识二、编辑文本修改字体大小和颜色： 用户输入文字的大小，一般是默认的大小，想将输入的字体放大，选中需要放大的字体，点击图中“无”后的“”，选择“24”，即可将字体设置为24号字，注意选择后面的单位为“px”（像素）。 项目4 美化网页文本 相关知识二、编辑文本修改字体大小和颜色： 想要改变字体颜色，需要先选中字体，然后点击如图所示的下拉按钮，即可弹出色板，在色板中选择自己喜欢的颜色即可。 项目4 美化网页文本 相关知识二、编辑文本设置段落格式： 文本的段落有标题、换行和已编排格式三种，标题：一共有六级，