第3章简单网页设计.ppt

1、,1、请大家在桌面上新建文件夹myweb; 2、启动Dreamweaver,创建站点,并将该站点的路径指向myweb; 3、将所传的images文件夹保存到myweb文件夹下； 4、以上完成的同学先自学第三章的内容,第3章 制作简单网页,本章要点内容： 在网页中直接输入文本、导入文本。 对导入的文本进行设置。 插入图片。 设置图片。, 本章学习目标 了解文本和图像在网页中的重要作用。 掌握文本和图片的插入和设置等基本操作方法。 学会文本和图片的其他使用技巧。 本章学前要求 对基本网页操作有所了解，已经学会了创建网页，并熟悉Dreamweaver MX 软件。,3.1 输 入 文 本,3.1.1

2、 直接添加文本 在Dreamweaver文档中添加文本的方法有很多种，用户可以直接在Dreamweaver文档的窗口中键入所要添加的文本，也可以从其它文档中剪切或复制，然后粘贴或导入到Dreamweaver的文档中。 可以通过下面的任意一种方法在Dreamweaver文档中添加文本。 1）在文档窗口的设计视图下，先将光标定位在需要插入文本的位置，切换输入法后就可以直接输入文本了。 2）使用复制、粘贴命令。先从其它程序中复制文本，回列Dreamweaver，将插入点置于文件窗口的设计视图中，然后选择“编辑”菜单中的“粘贴”命令，或者使用粘贴快捷键的Ctrl+V，就可以将文本粘贴到窗口中了。,3.

3、1.2 导入文本 除了直接在文档窗口的设计视图中直接加入文本外，Dreamweaver还提供了导入文本的方法。Dreamweaver不但可以将普通的文字处理软件中的文本导入到文档窗口中，还可以将表格式的数据记录及Excel文档导入到Dreamweaver的文档中，但是后两者涉及到表格的制作，将在第6章中详细介绍，本章只介绍从Word中导入文本文件。 具体步骤如下。 步骤1：在Dreamweaver中，选择“文件”菜单“导入/Word文档”命令，打开如图3.1所示的“打开”对话框。 步骤2：在图3.1所示的对话框中选择要导入的Word文档。 步骤3：单击“打开”按钮，用户选择的Word文档将自动

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

5、：在“编辑选项”选项区，选中“允许多个连续的空格”复选框（默认情况下是未选中的）。 步骤4：单击“确定”按钮，允许输入多个连续空格的设置完毕。,图3.2 “首选参数”对话框,3.1.4 添加换行符 虽然Dreamweaver与众多文字处理软件有很多相似之处，但在换行与分段之间有着更细致的区别。在Dreamweaver中，直接按下回车键时可以进行文本的分段，Web浏览器会在两个段落之间自动插入一个空白空格行，而在源代码中会将原来的文本和新的文本都加上段落标记，对比情况如图3.3所示。,图3.3 分段的“拆分”视图,通常情况下，我们不需要直接给文本分段，而是要用段内强制换行来实现文本的版面布局变化

6、，其HTML标记是，如图3.4所示。,图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 检查拼写 一个页面制作完毕之后难免会出现拼写方面的错误，Dreamweaver MX 2004提供了简单的英文拼写检查功能，具体方法如下。 选择“文本”菜单的“检查拼写”命令，则Dreamwe

8、aver对页面中的拼写进行检查。如果文件中有错误的单词，则会弹出“拼写检查”对话框，如“student”拼写成了“studert”，弹出对话框，如图3.9所示。,图3.9 “检查拼写”对话框,3.2 格式化文本,为了让文本能够充分明了地表明其所包含的内容，需要将文本的格式设置尽可能美观，以激发浏览者的兴趣。文本的格式化设置主要包括字体、样式、段落、颜色以及字体的对齐与缩进。 3.2.1 设置文本格式 如果要格式化文本，必须首先选中要设置的文本，此时“属性”面板就变成了文本的“属性”面板，如图3.10所示。文本字体格式的设置可以通过的“属性”面板或“文本”菜单中相应的选项来完成。网页的文本分为标

9、题和段落两种格式。,图3.10 “属性”面板,3.2.2 设置文本特性 在Dreamweaver中设置文本特性包括文本的字体选择、大小设置、颜色设置、字体样式设置，本书以“样本原文.html”所示的文字为例分别说明。 具体的步骤如下。 步骤1：设置字体。在3.2.1中已经设置了标题“文本格式设置”，本步骤选中正文的文本，在属性面板的“字体”下拉列表中选择“默认”字体。如果要选择其它字体，可以通过“文本”菜单的“字体/编辑字体列表”命令来选择，新增的字体将出现“属性”面板的“字体”下拉列表中。 步骤2：设置字体大小。选中正文，在“属性”面板的“大小”下拉列表中选择“14”，说明字体大小设置为14

10、像素。在字体右面的下拉列表中还可以选择字体大小的单位，可以是“像素”、“厘米”、“英寸”、“点数”等。,步骤3：设置字体颜色。选中正文，点击“属性”面板的“文本颜色”选择窗，弹出各种候选颜色。本实例选择黑色。即“文本颜色”选择框的右侧以十六进制的数“#000000”来表示黑色。 步骤4：设置字体样式。在“属性”面板中有“样式”的下拉列表，列表中有备选的CSS样式，在本书第4章中将详细介绍CSS的使用。选中正文文本，单击“属性”面板中的按钮，可以将字体样式更改为粗体或斜体，本实例选择粗体。,3.2.3 设置段落特性 正常输入文本的时候，Dreamweaver是不给文本加上“标题”或“段落”格式的

11、，但即使不把文本设置成为段落，一样可以设置对齐方式、项目列表、编号列表和缩进，本书仍然以图3.7所示的文本正文为例逐一说明。 步骤1：对齐文本，选择正文或将光标定位到要进行对齐操作的文本中，单击“属性”面板中四个对齐按钮的左对齐按钮，则将正文左对齐。本操作也可通过“文本”菜单的“对齐”命令来设置。 步骤2：设置项目列表，熟悉Word的读者比较熟悉项目编号的概念，其实Dreamweaver中设置项目列表也是同样的含义，首先选中正文或将光标定位在需要设置项目列表的段落中，点击 ，则设置了项目列表。项目列表是无序的列表，它的HTML标记是 。,步骤3：设置编号列表，与Word的项目编号功能类似，选中

12、文本，点击“属性”面板上的 按钮，它的HTML标记是 。 步骤4：设置缩进，缩进的概念也类似于Word，方法是选中文本，单击“属性”面板上的按钮组中的第一个“向左凸出”，点击第二个按钮则是“缩进”。“文本缩进”的HTML标记是 ，一对符号中间就是正文；“文本凸出”的设置就是相应的取消一 。,3.3 插入其他相关内容,3.3.1 插入日期 在Dreamweaver中可以方便地插入当前日期对象，而且插入的日期对象可以有多种显示形式。另外，当用户保存文件时，还可以自动更改所插入的日期对象的时间。 在Dreamweaver文档中插入日期对象的步骤如下。,步骤1：在Dreamweaver文档窗口的设计视

13、图中，将光标定位到要插入日期对象的位置。 步骤2：通过选择“插入”菜单“日期”命令，或将“插入”工具栏切换到标准工具选项，然后再单击按钮，打开如图3.18所示的“插入日期”对话框。 步骤3：设置完毕后单击“确定”按钮，可以看到当前的日期插入到文档窗口中光标所在的位置。,图3.18 “插入日期”对话框,3.3.2 插入水平线 在浏览器的页面中插入水平线对于组织页面信息、增强页面层次感有很强的作用。在Dreamweaver中可以在网页文档中使用一条或多条水平线并以可视方式分隔文本和对象，提高页面的整体质量。 1. 添加水平线 在Dreamweaver文档窗口的设计视图中添加水平线的一般步骤如下。

14、步骤1：将光标定位到文档中要添加水平线的位置。 步骤2：选择“插入”菜单“HTML/水平线”命令，或将“插入”栏切换到HTML分类，然后再单击 按钮，效果如图3.19所示。,2. 修改水平线 要修改Dreamweaver文档窗口中插入的水平线，操作步骤如下。 步骤1：在Dreamweaver的文档窗口中选择要修改的水平线。 步骤2：在如图3.19所示的“属性”面板中进行相应水平线属性的修改即可。,图3.19 插入水平线,3.3.3 插入特殊字符 在我们制作文本网页的时候经常还会碰到键盘输入不了的特殊字符，典型的如版权符号。因此，Dreamweaver MX 2004提供了插入特殊字符的功能，具

15、体操作如下。 步骤1：将光标定位在需要插入特殊字符的位置，如本例在正文文本的最后另起一行，并选择居中对齐。 步骤2：在插入栏上选择“文本”标签，则出现常用文本对象的插入按钮。 步骤3：单击 按钮，弹出特殊常用特殊字符的菜单，此时选择“版权”命令，则插入了版权符号，再输入文字“网页制作与实训编写组”。 步骤4：如果插入栏提供的特殊符号不能够满足需要，还可以单击图3.22所示菜单的“其他字符”命令，弹出“插入其他字符”对话框。在该对话框中设计者根据需要选择所需的特殊符号，然后单击“确定”按钮，就会在光标定位处插入选中的特殊字符。,3.3.4 插入HTML源代码 在某些时候，设计者需要将别的网页上分

16、析出来的HTML源代码应用到自己的网页上来，此时Dreamweaver提供了在设计视图下插入HTML源代码的功能，可以以文本的方式或仍然以HTML（含有标签）代码的方式粘贴到文档中。比如，有下面一段HTML代码，功能是将“世界你好！”的文本设置为16像素大小，颜色为红色： 世界您好! 如果设计者想将此段代码所要实现的功能应用到自己的网页上，他可以采取以下两种方法： 1）进入“代码”视图，将光标定位在需要插入此段代码的地方，直接使用Ctrl + V的快捷键方式粘贴，在设计视图中就得到了预期的效果。 2）进入“设计”视图，将光标定位在需要插入代码需要表现效果的地方，选择“编辑”菜单的“粘贴HTML

17、”命令，此时也可以实现预期的效果。,3.4 插 入 图 像,图像是网页不可或缺的元素，在Dreamweaver MX 2004中，设计者可以插入一般的图像，也可插入交替的图像，还可以巧妙的设置背景图像。浏览器能较好的支持JPG、GIF、PNG这三种格式的图像。其中JPG格式一般用于照片以及色彩位数高的图片，能保持要较好的色彩但是会产生像素失真。GIF能支持透明效果，从而很好地融合到网页中去，也能支持简单的动画效果，但容易产生色彩丢失的现象，所以适用于色彩不是很丰富的图片。PNG格式是Macromedia Fireworks的标准图片格式，也能提供透明度和Alpha通道的支持。,3.4.1 插入

18、图像文件 本书在第3章的“本章实例”中准备了实例图片，插入图像文件有两种办法，操作如下。 1. 通过插入命令插入图像 步骤1：选择“插入”菜单的“图像”命令或者单击插入栏的“常用”分类对象面板上的 “插入图像”按钮。 步骤2：弹出“选择图像源文件”对话框。单击需要插入的图像名，如果选中“预览图像”前的复选框，则在预览区显示图像文件的缩略图。“相对于”下拉列表的值用来确定图片URL地址的类型，选择“文档”则使用相对地址，选择“根目录”则使用基于根目录的地址。 步骤3：单击“确定”，图片插入到网页。,2. 从“文件”面板上拖放图像 展开“文件”面板，如下图所示，选择要插入的图片pig1.jpg，按

19、住鼠标左键，将图片拖放到需要插入的位置即可。,3.4.2 插入文档的背景图 文档的背景也可以是图片，在第2章中已经介绍了页面的设置，在 “页面属性”设置对话框中，单击“背景图像”右侧的“浏览”按钮，可以选择背景图片。 3.4.3 插入图像占位符 图像占位符是在准备好将最终图形添加到Web页之前使用 的图形，如动态变换的网页广告，制作的时候并不知道今后使用的是什么图片，因此往往是先插入占位符，网页对排版进行，运行时根据后台管理随时变换。若要插入图像占位符，请执行操作以下。 步骤1：选择“插入”菜单“图像占位符”命令，或者单击插入栏按钮的黑色三角，在下拉菜单中选择“图像占位符”命令，弹出“图像占位

20、符”对话框，如图3.32所示。,步骤2：在“图像占位符”对话框中设置占位符的名字、大小和颜色，并为占位符提供文本标签。本实例设置名称为“adver”，宽“480”，高“60”，颜色“#666666”，替换文本为“广告测试”。 提示： 其实图像占位符的HTML代码就是将路径src的值设置为空，代码如下： ,图3.32 “图像占位符”对话框,3.4.4 插入鼠标经过图像 在一些网页上常会见到鼠标经过图像的时候变成了另外一个图像，这就是我们要讲的鼠标经过图像效果，操作如下。 步骤1：选择 “插入”菜单“鼠标经过图像”命令，或者点击插入栏 按钮的黑色三角，在下拉菜单中选择“鼠标经过图像”命令，弹出“插

21、入鼠标经过图像”对话框。 步骤2：在“插入鼠标经过图像”对话框中设置“原始图像”为“本章实例”中的图片pic1.jpg，“鼠标经过图像”为“本章实例”中的pic2.jpg，选中“预载鼠标经过图像”复选框，替换文本填写“鼠标经过图像”，“按下时，前往的URL”填写“#”。确认之后浏览器效果如图3.36所示。,图3.36 浏览器中的鼠标经过效果,3.4.5 插入导航条 浏览网站时会发现网站一般都会提供栏目导航条，并且鼠标滑过会产生效果，在 “本章实例”目录下，我们准备了以“dh”打头的命名的图片组，下面介绍制作导航条的方法。 步骤1：单击插入栏 按钮的黑色三角，在下拉菜单中选择“导航条”命令，如图

22、3.37所示。,图3.37 选择“导航条”命令,步骤2：弹出“插入导航条”对话框，如图3.38所示。各设置如图3.38所示。,图3.38 “插入导航条”对话框,3.5 设置图像属性,3.5.1 设置图像属性 插入的图像一般不会满足设计者的需求，因此需要对图像属性进行设置。以本章实例“插入图像.html”为例，先选中图像，再设置图像的属性面板，如图3.42所示。,图3.42 图像属性面板,3.5.2 编辑图像 Dreamweaver提供了简单的图像编辑功能，主要体现在“属性”面板的“编辑”按钮上，如图3.45所示。 1. 使用Fireworks编辑 如果系统安装了Fireworks，单击 按钮将

23、弹出如图3.46所示的“查找源”对话框。如果有网页图像的Fireworks源文件，Fireworks将自动打开源文件编辑；否则，如果Fireworks不知道Fireworks源文件的具体位置，会询问是否编辑文件。,图3.45 Dreamweaver图像编辑按钮,图3.46 “查找源”对话框,2. 使用Fireworks优化 如果系统安装了Fireworks，单击 按钮也会弹出如图3.46所示的“查找源”对话框。选择是否直接开始优化图片。 优化操作可参考Fireworks的相关教材，优化完毕后，单击“更新”按钮，即可完成网页中图像的更新。 3. 裁切图像 单击 按钮，可使用内置的裁切工具进行图像的裁切。裁切的操作很简单，只需要拖动图像四周的操作柄就可以裁切图像的内容。,实训 “电影评论网页”,实训目的： 1. 掌握基本的文本和图像的插入方法。 2. 掌握文本和图像的基本设置方法。 3.