网页制作与实训 教学课件 作者 谭建辉 主编 宋爱林 副主编第3章.ppt

《网页制作与实训 教学课件 作者 谭建辉 主编 宋爱林 副主编第3章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章制作简单网页本章要点内容：在网页中直接输入文本、导入文本。对导入的文本进行设置。插入图片。设置图片。本章学习目标了解文本和图像在网页中的重要作用。掌握文本和图片的插入和设置等基本操作方法。学会文本和图片的其他使用技巧。本章学前要求对基本网页操作有所了解，已经学会了创建网页，并熟悉DreamweaverMX软件。3.1输入文本3.1.1直接添加文本在Dreamweaver文档中添加文本的方法有很多种，用户可以直接在Dreamweaver文档的窗口中键入所要添加的文本，也可以从其它文档中剪切或复制，然后粘贴或导入到Dreamweaver

2、的文档中。可以通过下面的任意一种方法在Dreamweaver文档中添加文本。1）在文档窗口的设计视图下，先将光标定位在需要插入文本的位置，切换输入法后就可以直接输入文本了。2）使用复制、粘贴命令。先从其它程序中复制文本，回列Dreamweaver，将插入点置于文件窗口的设计视图中，然后选择“编辑”菜单中的“粘贴”命令，或者使用粘贴快捷键的Ctrl+V，就可以将文本粘贴到窗口中了。3.1.2导入文本除了直接在文档窗口的设计视图中直接加入文本外，Dreamweaver还提供了导入文本的方法。Dreamweaver不但可以将普通的文字处理软件中的文

3、本导入到文档窗口中，还可以将表格式的数据记录及Excel文档导入到Dreamweaver的文档中，但是后两者涉及到表格的制作，将在第6章中详细介绍，本章只介绍从Word中导入文本文件。具体步骤如下。步骤1：在Dreamweaver中，选择“文件”菜单“导入/Word文档”命令，打开如图3.1所示的“打开”对话框。步骤2：在图3.1所示的对话框中选择要导入的Word文档。步骤3：单击“打开”按钮，用户选择的Word文档将自动导入到Dreamweaver文档中。图3.1“打开”对话框3.1.3添加空格在网页设计中，我们常常需要通过输入多个空格来调

4、整版面，但是在Dreamweaver文档中，相邻字符之间只允许包含有一个空格，即使输入再多的空格键，也只能显示一个空格，若要在Dreamweaver的文档中添加多个空格，必须进行相应的设置使得在文档中允许多个连续空格的存在。具体的设置步骤如下。步骤1：在Dreamweaver中，选择“编辑”菜单的“首选参数”命令，打开“首选参数”对话框，如图3.2所示。步骤2：在“首选参数”对话框的“分类”列表中选中常规选项，则弹出“常规”设置内容，如图3.2所示。步骤3：在“编辑选项”选项区，选中“允许多个连续的空格”复选框（默认情况下是未选中的）。步骤4

5、：单击“确定”按钮，允许输入多个连续空格的设置完毕。图3.2“首选参数”对话框3.1.4添加换行符虽然Dreamweaver与众多文字处理软件有很多相似之处，但在换行与分段之间有着更细致的区别。在Dreamweaver中，直接按下回车键时可以进行文本的分段，Web浏览器会在两个段落之间自动插入一个空白空格行，而在源代码中会将原来的文本和新的文本都加上段落标记

6、示。图3.4换行的“拆分”视图3.1.5查找替换文本当完成文本的输入之后，设计者也许会发现有错误的文本内容，但是由于文本太多，手工查找起来比较困难，因此Dreamweaver提供了自动查找和替换文本的功能。下面仍然以本章的提供的文本为范例进行讲解，步骤如下。步骤1：打开“本章实例”目录下的“样本原文.html”，选择Dreamweaver的“编辑”菜单下的“查找和替换”命令，弹出“查找和替换”对话框，如图3.5所示。图3.5“查找和替换”对话框步骤2：在“查找范围”下拉列表中选择查找的范围，本实例选择“当前文档”，步骤3：“搜索”的下拉列表主

7、要是提供候选的搜索类型，步骤4：在“查找”的文本框中输入要搜索的文本，本实例填写“文本”。步骤5：在“替换”文本框中填写需要替换的内容，本实例填写“文字”。步骤6：在“选项”中，选择附加的搜索条件，包括：“区分大小写”、“全字匹配”、“忽略空白”、“使用正则表达式”。本实例不做任何改动。步骤7：选择对设定内容的操作，本实例选择替换全部，结果如图3.8所示。图3.8“替换全部”结果3.1.6检查拼写一个页面制作完毕之后难免会出现拼写方面的错误，DreamweaverMX2004提供了简单的英文拼写检查功能，具体方法如下。选择“文本”菜单的“检查

8、拼写”命令，则Dreamweaver对页面中的拼写进行检查。如果文件中有错误的单词，则会弹出“拼写检查”对话框，如“student”拼写成了“studert”，弹出