《添加网页基本对象》PPT课件.ppt

第3章添加网页基本对象,3.1操作网页文件3.2操作文本3.3插入图像3.4插入Flash对象3.5插入其他基本对象3.6创建超连接,3.1操作网页文件文件的创建和存储是文档操作中最基本的部分。通常首先创建本地站点，然后根据站点设计规划添加各种空白文件，接着对这些文件进行编辑。本节讲述网页文件的基本操作包括：创建网页、打开网页、保存网页以及将网页设置为首页、设置网页属性等。,3.1.1创建、保存网页文件1创建网页文件在DreamweaverMX2004中，可通过3种方法创建网页。(1)启动DreamweaverMX2004后，窗口中会出现一个启动页面，单击【创建新项目】下面的选项即可创建网页。(2)单击【文件】【新建】命令，弹出【新建文档】对话框，选定【常规】选项卡中【类别】下的【基本页面】选项，单击【创建】按钮，即可新建一个页面，默认名称为“Untitled-1”。(3)通过工具栏按钮创建网页：单击【视图】【工具栏】【标准工具栏】命令，打开标准工具栏，单击标准工具栏上的【新建】按钮。打开【新建文档】对话框，按上面的步骤操作，即可新建文件。,2保存网页编辑好的网页可以将其保存起来。在DreamweaverMX2004中，用户可以保存文件、另存为文件，还可以将文件保存为模板。(1)保存文件：单击【文件】【保存】命令，弹出【保存为】对话框，在【保存在】下拉列表框中选择保存文件的位置；在【文件名】文本框中输入保存文件的名称，并单击【保存】按钮。(2)另存为文件：另存为文件就是将已经保存的文件另存倒其他位置，或以其他名称保存起来。操作步骤如下：单击【文件】【另存为】命令，弹出【保存为】对话框，在【保存在】下拉列表框中选择保存文件的位置；在【文件名】文本框中输入保存文件的名称，并单击【保存】按钮。,(3)保存为模板：将文件保存为模板文件后，该文件将以模板的形式存在，如果其他文件应用该模板，则其格式会与之相同。在第一次将文件保存为模板文件之前，首先要建立一个站点。操作步骤如下：单击【文件】【另存为模板】命令，弹出【另存为模板】对话框，在【站点】下拉列表框中选择站点；在【另存为】文本框中输入保存模板的名称，并单击【保存】按钮。,3.1.2设置网页属性设置网页属性包括设置网页标题、网页中文本的颜色、网页背景颜色及背景图片、网页边距等。设置网页属性通过设置【页面属性】来完成。通过单击【修改】【页面属性】命令，即可打开【页面属性】对话框，通过该对话框，用户可以设置页面、链接、网页标题等项的属性。在【分类】列表中选择某一项，对话框右侧即会出现有关该选项的属性。然后进行各选项地设置。设置完成后，单击【确定】按钮。,3.2操作文本文字在网页中的应用十分普遍，与其他文本处理相比网页文本处理有许多相似的部分，例如标题、段落、列表、对齐方式等，但网页文本有它独特的要求，即必须努力地精简代码，必须尽可能使样式和内容分离，必须尽可能使样式保持一定的规律。,3.2.1添加文本若要在网页文档中添加文本，首先应光标移到要添加文本的位置，直接输入内容或在其他应用程序中复制文本，然后切换到Dreamweaver的文档窗口，进行粘贴即可。输入文字时，如果需要分段，则按Enter键。按常规方法，在DreamweaverMX2004中不能输入多个空格，只能输入一个。如果用户想要输入多个空格，则将输入法提示框上的【半角】改为【全角】即可。,3.2.2设置文本属性设置文本属性主要包括设置文本的字体、字号、文字颜色、对齐方式、间距。设置方法为：选定需要设置文本属性的文本，然后选择【窗口】【属性】命令，打开属性面板，通过属性面板进行设置或选择【文本】【字体】菜单中的相应命令即可,3.3插入图像在网页中添加精致、美观的图像，会使网页变得丰富多彩。在插入图像时，首先考虑图像在页面中的整体效果，其次应综合考虑图像的质量和下载速度。图片的格式有多种，但不是所有格式的图像都可以放在网页上。目前，网络上支持的图像格式有3种：JPEG、GIF和PNG。所以如果要将其他格式的图像放到网页上，首先需要转换成这3种格式。,3.3.1插入图像1插入一般图像在Dreamweaver中插入图像后，系统会在HTML中自动生成对该图像文件的引用，要确保引用正确，插入的图像文件必须位于当前站点内，如果没在当前站点中，预览时图片将无法显示。插入一般图像有两种方法，第一种方法：可以通过菜单命令插入，将光标放到要插入图像的位置，然后选择【插入】【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择一幅图片，单击【插入】按钮，即可在网页中插入图片。第二种方法：可以通过按钮插入图像，单击【常用】子面板上的【图像】按钮，从下拉列表中选择【图像】，从弹出的【选择图像源文件】对话框中选择要插入的图像，单击【确认】按钮，即可插入图像。,2插入交互图像操作步骤如下：（1）将插入点放置到要插入交换图像的位置，单击【插入】【图像对象】【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。（2）在对话框中首先给此交换图像命名，然后在【原始图像】框和【鼠标经过图像】框中分别通过单击【浏览按钮】，选择交换前的图像和鼠标指向时交换的图像。选中【预览鼠标经过图像】复选框，其作用是在浏览器加载页面时首先下载交换图像，以保证图像交换功能的正常实现。然后再在【按下时，前往的URL】框中设定此交换图像的超链接地址，最后单击确定按钮即可。,3.3.2设置图像属性选定图像，窗口最下方会出现图像属性面板。属性面板中各项的设置如下：l图像：图像文本框用来输入图像的名称，以方便在使用脚本语言时引用。l宽：设置图像宽度。l高：设置图像高度。l源文件：此框用来设置插入图像的路径及名称。单击右端的按钮，打开【选择图像源】对话框，选择一幅图片，可以替换原来的图像。l链接：设置图像的链接属性。l替代：用于输入说明文本。在该文本框中输入的内容会显示在图像将要显示的位置。l类：从已定义的样式中选择为图片定义的样式。,l编辑：“编辑”后面集合了一些常用的图片编辑工具，通过这几个工具可以在Fireworks窗口中编辑和优化图像、裁剪图像、重设图像、设置图像的亮度和对比度，以及锐化图像。l垂直边距：是图像左、右两侧与网页其他元素的距离。l水平边距：是图像上、下两侧与网页其他元素的距离。l目标：表示链接的目标文件在浏览器中的打开方式。其中包括4种方式：_blank表示将链接文件在新的窗口中打开；_parent表示将链接文件在上级框架集或包含该链接的窗口中打开；_self表示将链接文件载入到相同框架或窗口中；_top表示将链接文件载入到整个浏览器窗口中，将删除所有框架。,l边框：改变“边框”的数值可以使图片添加指定数值的边框，而边框的颜色将与当前文档的文本默认颜色一致。有时为图片添加链接时，会突然出现一个蓝色的边框，这时只要将“边框”值设为0即可消除这个边框。l对齐：与普通文字的“左”、“中”、“右”对齐方式相比，图片还增加了更多的对齐选择，这个选项主要是指定图片与周围的文本的排版方式。其中设定此参数为“左对齐”和“右对齐”，可以使图片与周围的文本混合起来排列。,3.4插入Flash对象使用DreamweaverMX2004可以在文档中插入Flash动画、带有样式的Flash按钮和Flash文本。,3.4.1插入并设置Flash动画1插入Flash动画插入Flash动画有两种方法。第一种：可以通过菜单插入Flash动画，首先将光标放到要插入Flash动画的位置，然后选择【插入】【媒体】【Flash】命令，打开【选择文件】对话框，在其中选择Flash文件，选择完成后，单击【确定】按钮，将文件图表插入到文档中。第二种：可以通过按钮插入Flash动画，首先将光标放到要插入Flash动画的位置，然后单击【插入】面板上【常规】子面板上的【媒体】按钮，打开下拉列表，选择Flash，从弹出的【选择文件】对话框中选择一幅Flash动画文件，单击【确定】按钮即可。插入Flash动画文件后按F12键可以浏览动画。,2设置Flash动画属性选定文件中的Flash动画图标，打开Flash属性面板，Flash属性面板上各属性的设置如下：lFlash：指定Flash动画的名称。l宽：指定Flash动画被装进浏览器时的宽度。l高：指定Flash动画被装进浏览器时的高度。l文件：指定Flash动画文件的路径。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插入Flash文本对象插入Flash文本对象有两种方法。第一种：可以通过菜单命令插入Flash文本，首先将光标放到要插入Flash文本对象的位置，然后选择【插入】【媒体】【Flash文本】命令，打开【插入Flash文本】命令，打开“插入Flash文本”对话框，在该对话框中设置Flash文本属性，单击“确定”按钮，应用设置。若要编辑输入的Flash文本对象，可选定对象，然后单击属性面板上的【编辑】按钮。,第二种方法：可以通过按钮插入Flash文本对象，首先将光标放到要插入Flash动画的位置，然后单击【插入】面板上【常规】子面板上的【媒体】按钮，打开下拉列表，选择【Flash文本】，在弹出的【插入Flash文本】对话框中设置文本属性，单击【确定】按钮即可。,3.4.3插入并设置Flash按钮对象插入Flash按钮对象有两种方法。第一种方法：可以通过菜单命令插入Flash按钮对象，首先将光标放到要插入Flash按钮对象的位置，然后选择【插入】【媒体】【Flash按钮】命令，打开【插入Flash按钮】对话框，对话框中各项的设置如下：l范例：显示按钮样式。l样式：设置按钮样式。l按钮文本：输入在按钮上显示的文本。l字体：设置按钮上文字的字体。l大小：设置按钮上文字的大小。,l链接：设置链接路径。l目标：定义链接的目标窗口。l背景色：设置按钮的背景颜色。l另存为：输入将要输出的Flash按钮文件名。在该对话框中设置Flash按钮属性，单击“确定”按钮，应用设置。若要对Flash按钮对象进行再编辑，可选定对象，然后单击属性面板上的【编辑】按钮。,第二种方法：通过按钮插入Flash按钮对象，首先将光标放到要插入Flash按钮对象的位置，然后单击【插入】面板上【常规】子面板上的【媒体】按钮，打开下拉列表，选择【Flash按钮】，在弹出的【插入Flash按钮】对话框中设置按钮属性，单击【确定】按钮即可。,3.5插入其它基本对象3.5.1插入日期插入日期有两种方法，第一种：可以通过菜单命令插入日期，首先将光标放到要插入日期的位置，然后选择【插入】【日期】命令，打开【插入日期】对话框，从中选择日期格式，单击“确定”按钮即可。第二种：可以通过按钮插入日期，首先将光标放到要插入日期的位置，然后单击【插入】工具栏上【常用】子工具栏上的【日期】按钮，打开【插入日期】对话框，从中选择一种日期格式，单击【确定】按钮即可。,3.5.2插入水平线水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。1插入水平线将光标放到要插入水平线的位置，将【插入】【HTML】【水平线】命令，便会直接插入一条水平线。2修改水平线通过属性面板可以设置水平线的高度、宽度及对齐方式。选定水平线，可以在属性面板中修改水平线的属性。,3.5.3插入文本列表列表可以清晰地创建可识别的大纲和目录结构。Dreamweaver中常用的列表有无序列表和有序列表两种形式。l无序列表：插入一个无序列表符号后，输入列表文字后按回车键，会自动添加下一个列表项。l有序列表：有序列表的优点是可以自动产生项目的编号。l嵌套列表：用户可以改变某个列表项的层次，选中一个列表项单击缩进按钮，当前列表项会自动成为上一个列表项的子内容列表，及多级列表，而前面的列表符号也自动与它的父级不同。,3.5.4插入特殊字符有时候需要在网页中插入一些特殊字符，操作步骤如下：（1）将光标移到要插入特殊字符的位置。（2）单击【插入】【HTML】【特殊字符】菜单项，在子菜单项中选择合适的字符，或者单击【插入】栏【文本】选项卡中的相应字符按钮。（3）如果没有相应的字符，可以选择子菜单中的【其他字符】，或者单击【插入】栏【文本】选项卡中的相应字符按钮，弹出对话框，在对话框中单击需要的字符，该字符的代码就会出现在【插入】文本框中。（4）最后单击【确定】按钮即可将字符插入到文档中。,3.6创建超链接超链接简单地说就是一种资料的链接方法，使用户更方便地找到阅读文件。超链接不仅可以链接不同的文件，而且还可以链接同一份文件中的某一部分。超链接正是Web的魅力所在。为了把Internet上众多的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，我们才能在信息海洋中尽情遨游。,3.6.1创建文本超链接1创建文本超链接创建文本超链接的操作步骤如下：（1）选择要创建链接的文本，然后单击【窗口】【属性】命令，打开属性面板。（2）在【链接】文本框中输入链接到的网页地址即目标端点的URL地址，或者单击【链接】文本框右端的【浏览文件】按钮，打开【选择文件】对话框，从中选择要链接到的网页地址。单击确定按钮后系统将自动生成相应的URL地址，并显示在【属性】面板的【链接】文本框中。,2删除超链接删除超链接的方法非常简单，操作步骤是：首先选择要删除超链接的文本，然后删除属性面板上“链接”文本框中的网址，即可删除超链接。3.6.2创建图像超链接图片超链接的建立与文本的超级链接方法相似，只是选择的不是文本而是图片。首先选择要创建链接的图片，然后选择【窗口】【属性】命令，打开属性面板。单击【链接】右端的【浏览文件】按钮，打开【选择文件】对话框，从中选择要链接到的文件。单击【确认】按钮，即可创建图片链接。,3.6.3创建其他类型超链接1创建邮件链接创建邮件链接有两种方法。第一种：通过菜单命令创建电子邮件的链接，首先将光标放到需要插入电子邮件链接的位置，然后选择【插入】【电子邮件链接】命令，打开【E-mail链接】对话框，在【文本框】中输入邮件链接要显示在业面上的文本；在E-mail文本框中输入要链接的邮箱地址。最后，单击确定按钮，邮件链接就加入到了当前文档中。,第二种：通过【插入】面板上的按钮创建电子邮件的链接，首先将光标放到需要插入电子邮件链接的位置，然后单击【常用】子面板上的【电子邮件链接】按钮，弹出【E-mail链接】对话框，其余操作与第一种方法相同。,2创建命名锚链接利用命名锚可以在文档中特定位置上设置链接的目标端点。使用命名锚可以跳转到其他文档中的指定位置，也可以跳转到当前文档中的指定位置。创建命名锚链接首先要创建锚，在文档中创建命名锚的方法如下：（1）将光标移到要放置命名锚的位置，或者选中要指定命名锚的文本。（2）单击【插入】【命名锚记】命令，或者在【插入】工具栏上的【常用】选项卡中单击【命名锚记】按钮，弹出对话框。（3）在对话框的【命名锚记】文本框中输入锚的名称。如果选择了文本，则选中的文字会出现在【锚记命称】文本框中。单击确定按钮完成操作。,（4）单击【编辑】【首选参数】命令，弹出【首选参数】对话框，在左侧的【分类】列表中选择【不可见元素】选项，在右侧的区域中选中【命名锚记】复选框激活【文件】窗口中对不可见元素的显示，则可以看到锚标记。（5）在文档中拖动锚标记可以修改其位置，单击锚标记可以在其【属性】面板中修改锚的名称属性。创建了命名锚之后，就可以链接到文档中锚所在的位置。要在文档中实现与命名锚的链接，可以按照以下的操作步骤进行。（1）选中要作为链接的文字。（2）在【属性】面板的【链接】文本框中输入锚名称及其相应前缀。如果目标锚位于当前文档，则应在【链接】框中输入“#”号，然后输入链接的锚名称。如果目标锚位于其他文档中，则在“#”前需要添加该文档URL的地址和名称。,3.6.4创建图像映射图像映射是将图像划分为若干个区域，每个区域被称为一个热区，每个热区分别设置不同的超链接。在图像属性面板左下方有一个“地图”选项，它是用来制作图像映射的。从“地图”选项中可以看出，热区可以是不同的形状，如圆形、矩形、不规则多边形等。制作图像映射的方法很简单：在图像上绘制一个热区，然后设置该热区的链接，单击热区即可链接到相应的地址。,