添加网页基本对象.ppt

第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)启动Dreamweaver MX 2004后，窗口中会出现一个启动页面，单击【创建新项目】下面的选项即可创建网页。 (2)单击【文件】【新建】命令，弹出【新建文档】对话框，选定【常规】选项卡中【类别】下的【基本页面】选项，单击【创建】按钮，即可新建一个页面，默认名称为“Untitled-1”。 (3)通过工具栏按钮创建网页：单击【视图】【工具栏】【标准工具栏】命令，打开标准工具栏，单击标准工具栏上的【新建】按钮。打开【新建文档】对话框，按上面的步骤操作，即可新建文件。,2保存网页 编辑好的网页可以将其保存起来。在Dreamweaver MX 2004中，用户可以保存文件、另存为文件，还可以将文件保存为模板。 (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对象 使用Dreamweaver MX 2004可以在文档中插入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属性面板上各属性的设置如下： l Flash：指定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创建命名锚链接 利用命名锚可以在文档中特定位置上设置链接的目标端点。使用命名锚可以跳转到其他文