(精品)第3章 添加网页基本对象.ppt

《(精品)第3章 添加网页基本对象.ppt》由会员分享，可在线阅读，更多相关《(精品)第3章 添加网页基本对象.ppt（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第3章章 添加网页基本对象添加网页基本对象 3.1 操作网页文件3.2 操作文本3.3 插入图像3.4 插入Flash对象3.5 插入其他基本对象3.6 创建超连接 3.1 操作网页文件操作网页文件 文件的创建和存储是文档操作中最基本的部分。通常首先创建本地站点，然后根据站点设计规划添加各种空白文件，接着对这些文件进行编辑。本节讲述网页文件的基本操作包括：创建网页、打开网页、保存网页以及将网页设置为首页、设置网页属性等。3.1.1 创建、保存网页文件创建、保存网页文件 1创建网页文件创建网页文件 在Dreamweaver MX 2004中，可通过3种方法创建网页。(1)启动Dreamweav

2、er MX 2004后，窗口中会出现一个启动页面，单击【创建新项目】下面的选项即可创建网页。(2)单击【文件】【新建】命令，弹出【新建文档】对话框，选定【常规】选项卡中【类别】下的【基本页面】选项，单击【创建】按钮，即可新建一个页面，默认名称为“Untitled-1”。(3)通过工具栏按钮创建网页：单击【视图】【工具栏】【标准工具栏】命令，打开标准工具栏，单击标准工具栏上的【新建】按钮。打开【新建文档】对话框，按上面的步骤操作，即可新建文件。2保存网页保存网页 编辑好的网页可以将其保存起来。在Dreamweaver MX 2004中，用户可以保存文件、另存为文件，还可以将文件保存为模板。(1)

3、保存文件：单击【文件】【保存】命令，弹出【保存为】对话框，在【保存在】下拉列表框中选择保存文件的位置；在【文件名】文本框中输入保存文件的名称，并单击【保存】按钮。(2)另存为文件：另存为文件就是将已经保存的文件另存倒其他位置，或以其他名称保存起来。操作步骤如下：单击【文件】【另存为】命令，弹出【保存为】对话框，在【保存在】下拉列表框中选择保存文件的位置；在【文件名】文本框中输入保存文件的名称，并单击【保存】按钮。(3)保存为模板：将文件保存为模板文件后，该文件将以模板的形式存在，如果其他文件应用该模板，则其格式会与之相同。在第一次将文件保存为模板文件之前，首先要建立一个站点。操作步骤如下：单击

4、【文件】【另存为模板】命令，弹出【另存为模板】对话框，在【站点】下拉列表框中选择站点；在【另存为】文本框中输入保存模板的名称，并单击【保存】按钮。3.1.2 设置网页属性设置网页属性 设置网页属性包括设置网页标题、网页中文本的颜色、网页背景颜色及背景图片、网页边距等。设置网页属性通过设置【页面属性】来完成。通过单击【修改】【页面属性】命令，即可打开【页面属性】对话框，通过该对话框，用户可以设置页面、链接、网页标题等项的属性。在【分类】列表中选择某一项，对话框右侧即会出现有关该选项的属性。然后进行各选项地设置。设置完成后，单击【确定】按钮。3.2 操作文本操作文本 文字在网页中的应用十分普遍，与

5、其他文本处理相比网页文本处理有许多相似的部分，例如标题、段落、列表、对齐方式等，但网页文本有它独特的要求，即必须努力地精简代码，必须尽可能使样式和内容分离，必须尽可能使样式保持一定的规律。3.2.1添加文本添加文本 若要在网页文档中添加文本，首先应光标移到要添加文本的位置，直接输入内容或在其他应用程序中复制文本，然后切换到Dreamweaver 的文档窗口，进行粘贴即可。输入文字时，如果需要分段，则按Enter键。按常规方法，在DreamweaverMX2004中不能输入多个空格，只能输入一个。如果用户想要输入多个空格，则将输入法提示框上的【半角】改为【全角】即可。3.2.2设置文本属性设置文

6、本属性 设置文本属性主要包括设置文本的字体、字号、文字颜色、对齐方式、间距。设置方法为：选定需要设置文本属性的文本，然后选择【窗口】【属性】命令，打开属性面板，通过属性面板进行设置或选择【文本】【字体】菜单中的相应命令即可3.3 插入图像插入图像 在网页中添加精致、美观的图像，会使网页变得丰富多彩。在插入图像时，首先考虑图像在页面中的整体效果，其次应综合考虑图像的质量和下载速度。图片的格式有多种，但不是所有格式的图像都可以放在网页上。目前，网络上支持的图像格式有3种：JPEG、GIF和PNG。所以如果要将其他格式的图像放到网页上，首先需要转换成这3种格式。3.3.1插入图像插入图像 1插入一般

7、图像插入一般图像 在Dreamweaver中插入图像后，系统会在HTML中自动生成对该图像文件的引用，要确保引用正确，插入的图像文件必须位于当前站点内，如果没在当前站点中，预览时图片将无法显示。插入一般图像有两种方法，第一种方法：可以通过菜单命令插入，将光标放到要插入图像的位置，然后选择【插入】【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择一幅图片，单击【插入】按钮，即可在网页中插入图片。第二种方法：可以通过按钮插入图像，单击【常用】子面板上的【图像】按钮，从下拉列表中选择【图像】，从弹出的【选择图像源文件】对话框中选择要插入的图像，单击【确认】按钮，即可插入图像。2插入交互图像插

8、入交互图像 操作步骤如下：（1）将插入点放置到要插入交换图像的位置，单击【插入】【图像对象】【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。（2）在对话框中首先给此交换图像命名，然后在【原始图像】框和【鼠标经过图像】框中分别通过单击【浏览按钮】，选择交换前的图像和鼠标指向时交换的图像。选中【预览鼠标经过图像】复选框，其作用是在浏览器加载页面时首先下载交换图像，以保证图像交换功能的正常实现。然后再在【按下时，前往的URL】框中设定此交换图像的超链接地址，最后单击确定按钮即可。3.3.2设置图像属性设置图像属性 选定图像，窗口最下方会出现图像属性面板。属性面板中各项的设置如下：l图像：图像文

9、本框用来输入图像的名称，以方便在使用脚本语言时引用。l宽：设置图像宽度。l高：设置图像高度。l源文件：此框用来设置插入图像的路径及名称。单击右端的按钮，打开【选择图像源】对话框，选择一幅图片，可以替换原来的图像。l链接：设置图像的链接属性。l替代：用于输入说明文本。在该文本框中输入的内容会显示在图像将要显示的位置。l类：从已定义的样式中选择为图片定义的样式。l编辑：“编辑”后面集合了一些常用的图片编辑工具，通过这几个工具可以在Fireworks窗口中编辑和优化图像、裁剪图像、重设图像、设置图像的亮度和对比度，以及锐化图像。l垂直边距：是图像左、右两侧与网页其他元素的距离。l水平边距：是图像上、

10、下两侧与网页其他元素的距离。l目标：表示链接的目标文件在浏览器中的打开方式。其中包括4种方式：_blank表示将链接文件在新的窗口中打开；_parent表示将链接文件在上级框架集或包含该链接的窗口中打开；_self表示将链接文件载入到相同框架或窗口中；_top表示将链接文件载入到整个浏览器窗口中，将删除所有框架。l边框：改变“边框”的数值可以使图片添加指定数值的边框，而边框的颜色将与当前文档的文本默认颜色一致。有时为图片添加链接时，会突然出现一个蓝色的边框，这时只要将“边框”值设为0即可消除这个边框。l对齐：与普通文字的“左”、“中”、“右”对齐方式相比，图片还增加了更多的对齐选择，这个选项主

11、要是指定图片与周围的文本的排版方式。其中设定此参数为“左对齐”和“右对齐”，可以使图片与周围的文本混合起来排列。3.4 插入插入Flash对象对象 使用Dreamweaver MX 2004可以在文档中插入Flash动画、带有样式的Flash按钮和Flash文本。3.4.1插入并设置插入并设置Flash动画动画 1 1插入插入FlashFlash动画动画插入Flash动画有两种方法。第一种：可以通过菜单插入Flash动画，首先将光标放到要插入Flash动画的位置，然后选择【插入】【媒体】【Flash】命令，打开【选择文件】对话框，在其中选择Flash文件，选择完成后，单击【确定】按钮，将文件图

12、表插入到文档中。第二种：可以通过按钮插入Flash动画，首先将光标放到要插入Flash动画的位置，然后单击【插入】面板上【常规】子面板上的【媒体】按钮，打开下拉列表，选择Flash，从弹出的【选择文件】对话框中选择一幅Flash动画文件，单击【确定】按钮即可。插入Flash动画文件后按F12键可以浏览动画。2 2设置设置FlashFlash动画属性动画属性 选定文件中的Flash动画图标，打开Flash属性面板，Flash属性面板上各属性的设置如下：lFlash：指定Flash动画的名称。l宽：指定Flash动画被装进浏览器时的宽度。l高：指定Flash动画被装进浏览器时的高度。l文件：指定F

13、lash动画文件的路径。l循环：选中此复选框，自动循环播放Flash动画。l自动播放：选中此复选框，自动播放Flash动画。l垂直边距：设置Flash动画的垂直边距。l品质：设置Flash动画播放的效果。l 比例：设置Flash动画文件的比例。l 对齐：确定Flash动画和页面的对齐方式。l 背景颜色：指定Flash动画区域的背景颜色。l ：编辑Flash动画的属性。l ：重置到原始尺寸。l ：单击该按钮，可以观察到Flash动画播放时的效果。l ：单击该按钮，在打开的对话框中可设置Flash动画的参数。3.4.2插入并设置插入并设置Flash文本对象文本对象 1 1插入插入FlashFlas

14、h文本对象文本对象 插入Flash文本对象有两种方法。第一种：可以通过菜单命令插入Flash文本，首先将光标放到要插入Flash文本对象的位置，然后选择【插入】【媒体】【Flash文本】命令，打开【插入Flash文本】命令，打开“插入Flash文本”对话框，在该对话框中设置Flash文本属性，单击“确定”按钮，应用设置。若要编辑输入的Flash文本对象，可选定对象，然后单击属性面板上的【编辑】按钮。第二种方法：可以通过按钮插入Flash文本对象，首先将光标放到要插入Flash动画的位置，然后单击【插入】面板上【常规】子面板上的【媒体】按钮，打开下拉列表，选择【Flash文本】，在弹出的【插入F

15、lash文本】对话框中设置文本属性，单击【确定】按钮即可。3.4.3插入并设置插入并设置Flash按钮对象按钮对象 插入Flash按钮对象有两种方法。第一种方法：可以通过菜单命令插入Flash按钮对象，首先将光标放到要插入Flash按钮对象的位置，然后选择【插入】【媒体】【Flash按钮】命令，打开【插入Flash按钮】对话框，对话框中各项的设置如下：l范例：显示按钮样式。l样式：设置按钮样式。l按钮文本：输入在按钮上显示的文本。l字体：设置按钮上文字的字体。l大小：设置按钮上文字的大小。l链接：设置链接路径。l目标：定义链接的目标窗口。l背景色：设置按钮的背景颜色。l另存为：输入将要输出的F

16、lash按钮文件名。在该对话框中设置Flash按钮属性，单击“确定”按钮，应用设置。若要对Flash按钮对象进行再编辑，可选定对象，然后单击属性面板上的【编辑】按钮。第二种方法：通过按钮插入Flash按钮对象，首先将光标放到要插入Flash按钮对象的位置，然后单击【插入】面板上【常规】子面板上的【媒体】按钮，打开下拉列表，选择【Flash按钮】，在弹出的【插入Flash按钮】对话框中设置按钮属性，单击【确定】按钮即可。3.5 3.5 插入其它基本对象插入其它基本对象3.5.1 插入日期插入日期 插入日期有两种方法，第一种：可以通过菜单命令插入日期，首先将光标放到要插入日期的位置，然后选择【插入

17、】【日期】命令，打开【插入日期】对话框，从中选择日期格式，单击“确定”按钮即可。第二种：可以通过按钮插入日期，首先将光标放到要插入日期的位置，然后单击【插入】工具栏上【常用】子工具栏上的【日期】按钮，打开【插入日期】对话框，从中选择一种日期格式，单击【确定】按钮即可。3.5.2 插入水平线插入水平线 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。1 1插入水平线插入水平线 将光标放到要插入水平线的位置，将【插入】【HTML】【水平线】命令，便会直接插入一条水平线。2 2修改水平线修改水平线 通过属性面板可以设置水平线的高度、宽度及对齐方式。选定水平线，可

18、以在属性面板中修改水平线的属性。3.5.3 插入文本列表插入文本列表 列 表 可 以 清 晰 地 创 建 可 识 别 的 大 纲 和 目 录 结 构。Dreamweaver中常用的列表有无序列表和有序列表两种形式。l无序列表：插入一个无序列表符号后，输入列表文字后按回车键，会自动添加下一个列表项。l 有序列表：有序列表的优点是可以自动产生项目的编号。l嵌套列表：用户可以改变某个列表项的层次，选中一个列表项单击缩进按钮，当前列表项会自动成为上一个列表项的子内容列表，及多级列表，而前面的列表符号也自动与它的父级不同。3.5.4 插入特殊字符插入特殊字符 有时候需要在网页中插入一些特殊字符，操作步骤

19、如下：（1）将光标移到要插入特殊字符的位置。（2）单击【插入】【HTML】【特殊字符】菜单项，在子菜单项中选择合适的字符，或者单击【插入】栏【文本】选项卡中的相应字符按钮。（3）如果没有相应的字符，可以选择子菜单中的【其他字符】，或者单击【插入】栏【文本】选项卡中的相应字符按钮，弹出对话框，在对话框中单击需要的字符，该字符的代码就会出现在【插入】文本框中。（4）最后单击【确定】按钮即可将字符插入到文档中。3.6 3.6 创建超链接创建超链接 超链接简单地说就是一种资料的链接方法，使用户更方便地找到阅读文件。超链接不仅可以链接不同的文件，而且还可以链接同一份文件中的某一部分。超链接正是Web的魅

20、力所在。为了把Internet上众多的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，我们才能在信息海洋中尽情遨游。3.6.1创建文本超链接创建文本超链接 1 1创建文本超链接创建文本超链接 创建文本超链接的操作步骤如下：（1）选择要创建链接的文本，然后单击【窗口】【属性】命令，打开属性面板。（2）在【链接】文本框中输入链接到的网页地址即目标端点的URL地址，或者单击【链接】文本框右端的【浏览文件】按钮，打开【选择文件】对话框，从中选择要链接到的网页地址。单击确定按钮后系统将自动生成相应的URL地址，并显示在【属性】面板的【链接】文本框中。2 2删除超链接删

21、除超链接 删除超链接的方法非常简单，操作步骤是：首先选择要删除超链接的文本，然后删除属性面板上“链接”文本框中的网址，即可删除超链接。3.6.2 创建图像超链接创建图像超链接 图片超链接的建立与文本的超级链接方法相似，只是选择的不是文本而是图片。首先选择要创建链接的图片，然后选择【窗口】【属性】命令，打开属性面板。单击【链接】右端的【浏览文件】按钮，打开【选择文件】对话框，从中选择要链接到的文件。单击【确认】按钮，即可创建图片链接。3.6.3创建其他类型超链接创建其他类型超链接1 1创建邮件链接创建邮件链接 创建邮件链接有两种方法。第一种：通过菜单命令创建电子邮件的链接，首先将光标放到需要插入

22、电子邮件链接的位置，然后选择【插入】【电子邮件链接】命令，打开【E-mail链接】对话框，在【文本框】中输入邮件链接要显示在业面上的文本；在E-mail文本框中输入要链接的邮箱地址。最后，单击确定按钮，邮件链接就加入到了当前文档中。第二种：通过【插入】面板上的按钮创建电子邮件的链接，首先将光标放到需要插入电子邮件链接的位置，然后单击【常用】子面板上的【电子邮件链接】按钮，弹出【E-mail链接】对话框，其余操作与第一种方法相同。2 2创建命名锚链接创建命名锚链接 利用命名锚可以在文档中特定位置上设置链接的目标端点。使用命名锚可以跳转到其他文档中的指定位置，也可以跳转到当前文档中的指定位置。创建

23、命名锚链接首先要创建锚，在文档中创建命名锚的方法如下：（1）将光标移到要放置命名锚的位置，或者选中要指定命名锚的文本。（2）单击【插入】【命名锚记】命令，或者在【插入】工具栏上的【常用】选项卡中单击【命名锚记】按钮，弹出对话框。（3）在对话框的【命名锚记】文本框中输入锚的名称。如果选择了文本，则选中的文字会出现在【锚记命称】文本框中。单击确定按钮完成操作。（4）单击【编辑】【首选参数】命令，弹出【首选参数】对话框，在左侧的【分类】列表中选择【不可见元素】选项，在右侧的区域中选中【命名锚记】复选框激活【文件】窗口中对不可见元素的显示，则可以看到锚标记。（5）在文档中拖动锚标记可以修改其位置，单击

24、锚标记可以在其【属性】面板中修改锚的名称属性。创建了命名锚之后，就可以链接到文档中锚所在的位置。要在文档中实现与命名锚的链接，可以按照以下的操作步骤进行。（1）选中要作为链接的文字。（2）在【属性】面板的【链接】文本框中输入锚名称及其相应前缀。如果目标锚位于当前文档，则应在【链接】框中输入“#”号，然后输入链接的锚名称。如果目标锚位于其他文档中，则在“#”前需要添加该文档URL的地址和名称。3.6.4创建图像映射创建图像映射 图像映射是将图像划分为若干个区域，每个区域被称为一个热区，每个热区分别设置不同的超链接。在图像属性面板左下方有一个“地图”选项，它是用来制作图像映射的。从“地图”选项中可以看出，热区可以是不同的形状，如圆形、矩形、不规则多边形等。制作图像映射的方法很简单：在图像上绘制一个热区，然后设置该热区的链接，单击热区即可链接到相应的地址。