电子教案-《动态网页设计与制作实用教程(第二版)》-程伟渊.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,第10章,Dreamweaver 8,基础知识,本章学习导读,Dreamweaver 8,是,Macromedia,公司推出的可视化网,页编辑工具,Macromedia Studio 8 Web,开发套件的一个组,成部分。它采用了多种先进技术，能够方便快捷地创建极具,表现力和动感效果的网页。本章主要讲解,Dreamweaver 8,的基本知识和技巧。通过本章学习，读者可以掌握以下内容：,Dreamweaver 8,的新增功能,Dreamweaver 8,的工作界面,Dreamweaver 8,本地站点的建设,Dreamweaver 8,的文件操作,第10章,Dreamweaver 8,基础知识,10.1 认识,Dreamweaver 8,10.1.1 Dreamweaver 8,的新增功能,改进的工作流程,扩展的,CSS,支持,快速的文件传输,对,XML/XSLT,的远景支持,第10章,Dreamweaver 8,基础知识,10.1.2,Dreamweaver 8,的工作区,1工作区布局,（1）设计器和编码器,（2）双重屏幕,2工作区布局的切换,选择“窗口/工作区布局”菜单，可以在设计器、编码器和双重屏幕三,种布局之间切换。,第10章,Dreamweaver 8,基础知识,3,Dreamweaver 8,设计器布局下的集成开发环境,第10章,Dreamweaver 8,基础知识,10.2 本地站点的建立,10.2.1 关于站点的规划和设计,在,Dreamweaver 8,中，站点这个术语可以指,Web,站点，也可以指用,来存储属于,Web,站点文档的本地硬盘上的文件夹。当开始考虑创建,Web,站点时，应该按照一系列的规划步骤进行，才能确保成功地使用站点。,1确定目标,确定站点的目标是创建,Web,站点时应该采取的第一步。明确的目标,使我们可以集中注意力，针对特定的需要来设计和规划,Web,站点。,2选择目标用户,确定了站点实现的目标之后，需要确定站点的浏览客户。创建世界上,每个人都能使用的,Web,站点是不可能的。人们使用不同的浏览器，以不,同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，,根据用户的特点来设计站点。,第10章,Dreamweaver 8,基础知识,3组织站点结构,组织站点结构时，应注意以下3个问题：,（1）将站点分成类别，把相关的页面放在同一文件夹中。,（2）将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找,定位。例如，将所有图像放在,Images,文件夹中，当在页面中插入图像时，,就可以方便地找到它。,（3）本地站点和远程,Web,站点应该具有完全相同的结构。如果使用,Dreamweaver 8,创建本地站点，然后将全部内容上传到远程站点，则,Dreamweaver 8,确保在远程站点中精确拷贝本地结构。,4设计外观,5设计导航方案,6规划和收集资料,完成了设计和布局后，就可以创建和收集需要的资源了。资源可以是,图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项,目并做好了准备。否则，可能为找不到一幅图像而中断开发过程。,第10章,Dreamweaver 8,基础知识,10.2.2 本地站点的建立与编辑,1创建本地文件夹,本地文件夹是,Dreamweaver 8,站点的工作目录。此文件夹可以位于,本地计算机上，也可以位于网络服务器上，它是为,Dreamweaver 8,站,点存储“过程”文件的位置。本地文件夹的结构要满足站点的设计和规划,要求。,2定义本地站点,本地文件夹创建完成后，要通过,Dreamweaver 8,的站点管理工具对,它进行设置才能成为一个合法的,Dreamweaver 8,本地站点。,3编辑,Dreamweaver 8,站点,第10章,Dreamweaver 8,基础知识,10.3 网页的建立与保存,（1）选择网页格式。选择“文件/新建”菜单或使用“标准工具栏”的,“新建”按钮，则打开一个对话窗口，如图所示。选择“基本页”中的,HTML,模式。单击右下角的“创建”按钮，打开一个新的文件窗口。,第10章,Dreamweaver 8,基础知识,（2）设置网页属性。在编辑新网页前应该先设置页面属性，也就是对页,面进行整体规划。选择“修改/页面属性”或在工作区按鼠标右键选择弹出,菜单中的“页面属性”选项，激活属性设置面板，如图所示，设置完毕单击,“确定”按钮。,第10章,Dreamweaver 8,基础知识,（3）编辑网页元素。在网页上添加文本、图片、表格等网页元素。,（4）在网页中加注释。,1）选中插入注释的位置。,2）选择“插入/注释”菜单，在窗口中输入注释内容。,3）编辑注释：双击页面中的注释图标即可进入编辑界面。,（5）保存网页，选择“文件/保存”菜单，给网页命名并存入相应文件夹。,第11章 设计页面布局,本章学习导读,在编辑网页前应该首先对网页进行整体布局设置。合理,的布局使网页看起来美观大方，并且便于网页元素的插入与,编辑。本章主要讲述在,Dreamweaver 8,中利用表格、布局,视图、框架和层等可视化设计工具进行页面布局的过程。通,过本章学习，读者应该掌握以下内容：,使用表格对页面进行布局,在布局模式中对页面进行布局,使用框架对页面进行布局,使用层对页面进行布局,第11章 设计页面布局,11.1 使用表格对页面进行布局,表格是用在,HTML,页上显示表格式数据以及对文本和图,形进行布局的强有力的工具。表格由一行或多行组成，每行,又由一个或多个单元格组成。在创建表格之后，可以方便地,修改其外观和结构。,11.1.1 创建表格,1插入表格,可以使用“插入”栏或“插入”菜单来创建一个新表格，具体步骤如下：,（1）在文档窗口的设计视图中，将插入点放在需要表格的位置。,（2）单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/表格”菜,单。,（3）按需要设置表格参数，完成表格的创建。,第11章 设计页面布局,2向单元格中添加内容,可以像,Word,等文本编辑器一样在表格单元格中添加文,本和图像等元素。,3导入表格式数据,可以将在另一个应用程序（例如,Microsoft Excel）,中,创建的表格式数据导入到,Dreamweaver 8,中并设置为表格,的格式,第11章 设计页面布局,11.1.2 表格的编辑,1选择表格元素,可以一次选择整个表、行、列或在表格中选择一个连续的单元格块，,还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。,（1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任,意位置。,（2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边,缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行,或列。,（3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。,（4）选择不相邻的单元格：按住,Ctrl,键的同时单击要选择的单元格、,行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它,从选择中删除。,第11章 设计页面布局,2设置表格和单元格的格式,可以通过设置表格及表格单元格的属性或将预先设置的,设计应用于表格来更改表格的外观。若要设置表格中文本的,格式，可以对所选的文本应用格式设置或使用样式。,3调整表格的大小,通过拖动选择控制点可以调整整个表格或单个行和列的,大小，当调整整个表格的大小时，表格中的所有单元格按比,例更改大小。,4更改列宽和行高,通过使用属性检查器或拖动列或行的边框，可以更改列,宽或行高。还可以使用代码视图直接在,HTML,代码中更改单,元格的宽度和高度。,第11章 设计页面布局,5元件的应用,在场景中应用元件包括应用本影片元件库中的元件和应用其他影片,元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板，,将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通,过菜单“文件/作为库打开”打开相应的元件库，再应用其中的元件。,第11章 设计页面布局,5添加和删除行和列,添加、删除行和列应首先确定操作的位置，即选定当前的行或列。,（1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。,（2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其,右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入行或,列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。,（3）清除完整的行或列时，可以直接按,Delete,键，整个行或列将从表格,中删除。,6拆分或合并单元格,拆分或合并单元格可使用“修改/表格”子菜单中的命令。,第11章 设计页面布局,7嵌套表格,嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何,表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的,限制。,8剪切、拷贝和粘贴单元格,可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元,格的格式设置。,第11章 设计页面布局,11.1.3 对表格进行排序,可以根据单个列的内容对表格中的行进行排序，还可以,根据两个列的内容执行更加复杂的表格排序。但不能对包含,COLSPAN,或,ROWSPAN,属性的表格（即包含合并单元格的,表格）进行排序。,第11章 设计页面布局,11.2 在布局模式中对页面进行布局,11.2.1 布局模式简介,在布局模式中，可以在添加内容之前对页面进行布局。例如，可以沿,页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放,置导航条，在右边绘制第三个单元格放置内容。,当不在布局表格中绘制布局单元格时，,Dreamweaver 8,会自动创建,一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。可,以在一个布局表格中使用多个布局单元格对页进行布局，这是进行,Web,页布局最常用的方法，也可以使用多个布局表格进行更复杂的布局。,第11章 设计页面布局,11.2.2 布局模式的切换,在绘制布局表格或布局单元格之前，必须先切换到布局模式。,布局模式的切换操作如下：,（1）如果“设计”视图不可见，请选择“查看/设计”或“查看/代码和设计”,菜单。在代码视图中不能启用或禁用布局模式。,（2）选择“查看/表格模式/布局模式”菜单或单击插入栏“布局”类别中的,“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的绿色,栏，指示当前正处于“布局”模式中。如果页面上存在表格，则它们显示,为布局表格。,第11章 设计页面布局,11.2.3 绘制布局单元格和表格,在布局模式中，可以在页面上直接绘制布局单元格和布局表格。当不,在布局表格中绘制布局单元格时，,Dreamweaver 8,会自动创建一个布局表,格以容纳该单元格。布局单元格不能存在于布局表格之外。,说明：当,Dreamweaver,自动创建布局表格时，该表格最初显示为填,满整个设计视图，即使我们更改文档窗口的大小也是如此。这种全窗默认,布局表格使我们可以在设计视图中的任意位置绘制布局单元格。可以将该,表格设置为特定的大小，方法是单击表格边框，然后拖动表格的调整大小,控制点。,第11章 设计页面布局,11.2.4 向布局单元格中添加内容,在布局模式中可以将文本、图像和其他内容添加到布局单元格中。但,在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加,内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时,，该单元格自动扩展。,11.2.5 布局单元格的调整,为了调整页面布局，可以对布局单元格和嵌套布局表格进行移动并调,整它们的大小，（最外面的布局表格只能调整大小）。布局单元格不能重,叠，对单元格进行移动或调整大小之后，该单元格不能跨越包含它的布局,表格的边框。,11.2.6 设置布局单元格的格式,可以通过使用属性检查器来更改任何布局单元格或表格的多种属性，,包括宽度和高度、背景颜色以及单元格内容的对齐方式。,第11章 设计页面布局,11.2.7 设置布局视图参数,使用“编辑/首选参数”对话框中的“布局模式”分类项可以指定有关间,隔图像文件和有关布局表格和布局单元格的颜色信息。,第11章 设计页面布局,11.3 使用框架对页面进行布局,11.3.1 框架（集）概述,1框架（集）的作用,就像“画中画”彩电一样，框架提供了将一个浏览器窗口划分为多个区,域、每个区域都可以显示不同,HTML,文档的方法。使用框架的最常见的情,况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容,的文档，如图11-4所示。,2什么是框架,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余,部分中所显示内容无关的,HTML,文档。,第11章 设计页面布局,3什么是框架集,框架集是,HTML,文件，它定义一组框架的布局和属性，包括框架的数,目、框架的大小和位置以及在每个框架中初始显示的页面的,URL。,框架集,文件本身不包含要在浏览器中显示的,HTML,内容，但,noframes,部分除外；,框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显,示哪些文档的有关信息。,4框架页面的构成文档,如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际,上至少由4个单独的,HTML,文档组成：框架集文件和3个网页文档，这3个,文档包含在这些框架内初始显示的内容。当在,Dreamweaver 8,中设计使,用框架集的页面时，必须保存全部这4个文件，以便该页面可以在浏览器,中正常工作。,第11章 设计页面布局,5框架页面的使用原则,并不是所有的浏览器都提供良好的框架支持，框架对于无法导航的访,问者而言难以显示。所以，如果要使用框架，应始终在框架集中提供,noframes,部分，以方便不能查看这些框架的访问者。最好还要提供指向,站点的无框架版本的显式链接，以用于那些虽然其浏览器支持框架但不喜,欢使用框架的访问者。,第11章 设计页面布局,11.3.2 创建框架和框架集,在,Dreamweaver 8,中有两种创建框架集的方法：既可以自己设计框,架集，也可以从若干预定义的框架集中选择。选择预定义的框架集将自动,设置创建布局所需的所有框架集和框架。预定义的框架集只能在“文档”窗,口的“设计”视图中插入。,11.3.3 选择框架和框架集,要更改框架或框架集的属性，首先要选择框架或框架集。可以在“文,档”窗口中选择框架或框架集，也可以通过“框架”面板进行选择。当选择,框架或框架集时，在“框架”面板和“文档”窗口的“设计”视图中都会在框架,或框架集周围显示一个选择轮廓。,第11章 设计页面布局,1在“框架”面板中选择框架和框架集,（1）选择“窗口/其他/框架”菜单，显示“框架”面板。,（2）在“框架”面板中单击选择框架。,（3）在“框架”面板中单击环绕框架集的边框，选择一个框架集。,2在“文档”窗口中选择框架和框架集,（1）要在当前选定内容的同一层次级别上选择下一框架（框架集）或前,一框架（框架集），请在按住,Alt,键的同时按下左箭头键或右箭头键。,（2）选择父框架集（包含当前选定内容的框架集），请在按住,Alt,键的同,时按上箭头键。,（3）要选择当前选定框架集的第一个子框架或框架集（即按其在框架集,文件中定义顺序中的第一个），按住,Alt,键的同时按下箭头键。,第11章 设计页面布局,11.3.4 在框架中打开文档,通过将新内容插入框架的空文档中，或通过在框架中打开现有文档，,来指定框架的初始内容。,要在框架中打开现有文档，操作步骤如下：,（1）将插入点放置在框架中。,（2）选择“文件/在框架中打开”菜单。,（3）选择要在框架中打开的文档并单击“确定”按钮，该文档随即显示在,框架中。,（4）要使文档成为在浏览器中打开框架集时在框架中显示的默认文档，,请保存该框架集。,第11章 设计页面布局,11.3.5 保存框架和框架集文件,1保存框架集文件,操作步骤如下：,（1）在“框架”面板或“文档”窗口中选择框架集。,（2）选择下列项目之一：,a）,保存框架集文件，请选择“文件/保存框架集”菜单。,b）,将框架集文件另存为新文件，请选择“文件/框架集另存为”菜单。,如果以前没有保存过该框架集文件，则这两个命令是等效的。,2保存在框架中显示的文档,操作步骤如下：,在框架中单击，然后选择“文件/保存框架”菜单或“文件/框架另存为”菜单。,第11章 设计页面布局,11.4 使用层对页面进行布局,层是一种,HTML,页面元素，可以将它定位在页面上的任意位置。层像,一个可移动的粘贴板，可以包含文本、图像或其他任何可在,HTML,文档正,文中放入的内容。利用层可以非常灵活地放置网页内容。,11.4.1 层的创建,1创建层,（1）单击插入栏上“布局”标签下的“绘制层”图标。,（2）在文档窗口的设计视图中通过拖动鼠标来绘制层。,2层面板,通过“层”面板可以管理文档中的层。选择“窗口/层”菜单，打开“层”面板，层,显示为按,Z,轴顺序排列的名称列表。先创建的层出现在列表的底部，新创建的层出,现列表的顶部。嵌套的层显示为连接到父层的名称。单击加号（+）或减号（）,图标显示或隐藏嵌套的层。,3设置层参数,使用“编辑/首选参数/层”对话框中的“层”类别可指定新建层的默认设,第11章 设计页面布局,11.4.2 层的基本操作,当处理页面布局时，可以对层进行选择、移动、大小调整和对齐。,在对一个层进行移动、大小调整或对齐之前，必须先选择该层。,1选择层,2调整层大小,3移动层,4对齐层,5将层靠齐到网格,11.4.3 向层添加内容,在层中放置元素之前，必须在层中放置插入点。插入操作的过程与层,外插入元素相同。,第11章 设计页面布局,11.4.4 修改现有层的属性,1查看和设置层的属性,在属性检查器中查看和设置层属性的操作步骤如下：,（1）选择一个层。,（2）选择“窗口/属性”菜单，打开属性检查器。,（3）通过设置属性来更改层的属性,当选择两个或更多个层时，层属性检查器会显示文本属性以及全部层属性,的一部分，从而允许我们同时修改多个层。,2更改层的层叠顺序,使用属性检查器或“层”面板可以更改层的层叠顺序。“层”面板列表顶,部的层将位于层叠顺序的顶部，并且会出现在其他层之前。在属性检查器,的“,Z,轴”文本框中输入层叠序号，可直接改变层叠顺序。,第11章 设计页面布局,3更改层可见性,当处理文档时，可以使用“层”面板手动显示和隐藏层，以查看页如何,在不同的条件下显示。,第11章 设计页面布局,11.4.5 层和表的转换,层和表之间转换的操作步骤如下：,（1）如果想把层转换为表，选择“修改/转换/层到表”菜单，然后在出现,的对话框中选择所需的选项，最后单击“确定”按钮。,（2）如果想把表转换为层，选择“修改/转换/表到层”菜单。然后在出现,的对话框中选择所需的选项，最后单击“确定”按钮。,第12章 网页元素的添加与编辑,本章学习导读,本章主要讲述使用,Dreamweaver 8,中的可视化工具，,向网页中添加和编辑文本、图像、表格、影片、声音和其他,元素的过程。通过本章学习，读者应该掌握以下内容：,添加文本和设置文本格式,图像的添加与编辑,媒体的添加与编辑,表单的添加与编辑,第12章 网页元素的添加与编辑,12.1 添加文本和设置文本格式,Dreamweaver 8,提供了多种向文档中添加文本和设置文,本格式的方法。这里主要描述如何添加文本、设置字体类型、,大小、颜色和对齐属性，以及,HTML,样式和层叠样式（,CSS）,的创建和应用。,12.1.1 文本元素的添加和编辑,1将文本添加到文档,2添加空格和段落,3文本格式的编辑,4编辑字体列表,5创建新列表,6日期的添加,7水平线和特殊字符的添加,第12章 网页元素的添加与编辑,12.1.2,HTML,样式的应用,通过设置,HTML,样式，可以快速一致地将字体格式应用,于文档中的文本。,HTML,样式可由单个或多个,HTML,字体标,签属性（如颜色、字体、大小）以及其他格式属性（如粗体,或斜体）组成。,1,HTML,样式面板,显示“,HTML,样式”面板的方法有如下两种：,（1）选择“窗口/,HTML,样式”菜单。,（2）按,Ctrl+F11,键。,第12章 网页元素的添加与编辑,2创建,HTML,样式,可以用两种方法创建样式：基于所选文本创建样式或者在“,HTML,样,式”面板中通过选择格式属性来创建样式。,（1）创建新的,HTML,样式。在“,HTML,样式”面板中，单击“新建样式”,图标（+）；也可以选择“文本/,HTML,样式/新建样式”菜单，出现“定义,HTML,样式”对话框。在对话框中设置样式属性，单击“确定”按钮，保存,样式。,（2）基于现有文本创建新的,HTML,样式。在文档中，选择包含新,HTML,样式格式的文本。在“,HTML,样式”面板中，单击右下角的“新建样,式”图标（+），出现“定义,HTML,样式”对话框。在对话框中就显示出所,选文本的格式属性，根据需要编辑这些属性就可以将其保存为一个新的,样式。,3编辑,HTML,样式的属性,（1）在“,HTML,样式”面板中，选择一种样式。,（2）右击鼠标从上下文菜单中选择“编辑”，或者双击,HTML,样式并,从上下文菜单中选择“编辑”。,（3）在“定义,HTML,样式”对话框中，查看或修改样式属性。,第12章 网页元素的添加与编辑,12.1.3 层叠样式（,CSS）,的应用,1,CSS,样式概述,CSS,样式表是一系列格式规则，它们控制网页内容的外观。使用,CSS,样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特,定的字体和样式。,CSS,样式可以控制许多仅用,HTML,无法控制的属性。例如，可以指定,自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。,CSS,样式的主要优点是提供便利的更新功能；更新,CSS,样式时，使用,该样式的所有文档的格式都自动更新为新样式。,2创建新的,CSS,样式,（1）单击“,CSS,样式”面板右上角的扩展按钮，选择下拉列表中的“新建”,菜单，打开“新建,CSS,规则”对话框。,（2）为新建,CSS,样式输入或选择名称、标记或选择器。,（3）在“定义在”区域选择定义的样式位置，可以是“新建样式表文件”或,“仅对该文档”。,（4）“,CSS,规则定义”对话框中设置,CSS,规则定义。主要分为类型、背景、,区块、方框、边框、列表、定位和扩展8项。,第12章 网页元素的添加与编辑,3编辑,CSS,样式,选中需要编辑的样式类型，选择上图中的“编辑”项或直接单击“编辑,样式”按钮，在弹出的“,CSS,规则定义”对话框中修改相应的设置。编辑完,成后单击“确定”按钮，,CSS,样式就编辑完成了。,4应用自定义（,Class）CSS,样式,鼠标右键单击在网页中被选中的元素，在弹出的快捷菜单中选择,“,CSS,样式”，在其子菜单中选择需要的自定义样式。,5附加样式表,CSS,样式表是一个包含样式和格式规范的外部文本文件。编辑外部,CSS,样式表时，链接到该,CSS,样式表的所有文档全部更新以反映所做的,更改。可以导出文档中包含的,CSS,样式以创建新的,CSS,样式表，然后附,加或链接到外部样式表以应用那里所包含的样式。,第12章 网页元素的添加与编辑,12.2 图像的添加与编辑,图像通常用来添加图形界面（例如导航按钮）、形象直观的内容（例,如照片）或交互式设计元素（例如鼠标经过图像或图像地图）。在,Dream,weaver 8,中，可以在“设计”视图或“代码”视图中将图像添加到文档。,12.2.1 添加图像,在将图像添加到文档时，,Dreamweaver 8,自动在,HTML,源代码中生成,对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当,前站点中。如果图像文件不在当前站点中，,Dreamweaver 8,会询问是否,要将此文件拷贝到当前站点中。,12.2.2 图像的编辑,1对齐图像,2调整图像大小,3创建鼠标经过图像,第12章 网页元素的添加与编辑,12.3,媒体的添加与编辑,Dreamweaver 8,可以方便地向,Web,站点添加声音和影片，且可以添,加和编辑多媒体文件和对象。,12.3.1 添加,Flash,动画,1添加,Flash,2,添加,Flash,文本,3插入,Flash,按钮,4插入,FlashPaper,5,插入,Flash Video,第12章 网页元素的添加与编辑,12.3.2 添加,Shockwave,影片,Shockwave,是,Web,上用于交互式多媒体的,Macromedia,标准，是一,种经压缩的格式。它使在,Macromedia Director,中创建的多媒体文件能够,被快速下载，而且可以在大多数常用浏览器中进行播放。,添加,Shockwave,影片的操作步骤如下：,（1）在文档窗口中，将添加点放置在要添加,Shockwave,影片的地方，,然后执行以下操作之一：,a）,在插入栏中，选择“媒体”，然后单击,Shockwave,图标。,b）,在插入栏中，选择“媒体”，然后将,Shockwave,图标拖到文档窗口,中。,c）,选择“添加/媒体/,Shockwave”,菜单。,（2）在显示的对话框中，选择一个影片文件。,（3）在属性检查器中，分别输入影片的宽度和高度。,第11章 设计页面布局,12.3.3 向页面添加视频,可以通过不同方式和使用不同格式将视频添加到,Web,页面。视频可被,下载，或者被处理成流式以便在下载它的同时播放它。,Web,上用于视频,文件传输的最常见流式处理格式有,RealMedia、QuickTime,和,Windows,Media。,必须下载辅助应用程序以查看这些格式。使用这些格式，可以同,时对音频和视频进行流式处理。,12.3.4 向页面添加声音,可以采用不同的方法将多种类型的声音文件和格式加入,Web,页面。,在确定采用哪一格式和方法添加声音前，需要考虑以下一些因素：添加,声音的目的、观众、文件大小、声音品质和不同浏览器中的差异。,第12章 网页元素的添加与编辑,1关于音频文件格式,下面介绍常见的音频文件格式以及每一种格式在,Web,设计上的一些优,缺点。,（1）.,midi,或.,mid（,乐器数字接口）格式用于器乐。许多浏览器都支持,MIDI,文件并且不要求插件。尽管其声音品质非常好，但根据访问者声卡,的不同，声音效果也会有所不同。很小的,MIDI,文件也可以提供较长时间,的声音剪辑。,MIDI,文件不能被录制并且必须使用特殊的硬件和软件在计,算机上合成。,（2）.,wav（Waveform,扩展名）格式文件具有较好的声音品质，许多浏,览器都支持此类格式文件并且不要求插件。可以从,CD、,磁带、麦克风等,录制自己的,WAV,文件。但是，其较大的文件限制了在,Web,页面上使用声,音的长度。,（3）.,aif（,音频交换文件格式，即,AIFF）,格式与,WAV,格式类似，也具有,较好的声音品质，大多数浏览器都可以播放它并且不要求插件。可以从,CD、,磁带、麦克风等录制,AIFF,文件。但是，较大的文件限制了在,Web,页,面上使用声音的长度。,第12章 网页元素的添加与编辑,（4）.,mp3（,运动图像专家组音频，即,MPEG-,音频层-3）格式是一种压缩,格式，它可令声音文件明显缩小。其声音品质非常好：如果正确录制和压,缩,MP3,文件，其质量甚至可以和,CD,质量相媲美。这一新技术使你可以对,文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该,文件。若要播放,MP3,文件，访问者必须下载并安装辅助应用程序或插件，,例如,QuickTime、Windows Media Player,或,RealPlayer。,（5）.ra、.ram、.rpm,或,Real Audio,格式具有非常高的压缩程度，文件大,小要小于,MP3。,全部歌曲文件可以在合理的时间范围内下载。其声音品质,比,MP3,文件声音品质要差，访问者必须下载并安装,RealPlayer,辅助应用程,序或插件才可以播放这些文件。,第12章 网页元素的添加与编辑,2链接到音频文件,链接到音频文件是将声音添加到,Web,页面的一种简单而有效的方法。,这种集成声音文件的方法可以使访问者能够选择他们是否要收听该文件，,并且使文件可用于最广范围的观众（某些浏览器可能不支持嵌入的声音,文件）。,创建音频文件链接的操作步骤如下：,（1）选择要用作指向音频文件的热点文本或图像。,（2）在属性检查器中，单击文件夹图标以进行浏览来找到音频文件，,或者在“链接”域中键入文件的路径和名称。,3嵌入声音文件,嵌入音频将声音播放器直接并入页面中，但访问者具有所选声音文件,的适当插件后，声音才可以播放。如果要将声音用作背景音乐，或者想要,对声音演示本身进行更多控制，则可以嵌入文件。例如，可以设置音量、,播放器在页面上显示的方式以及声音文件的开始点和结束点。,第12章 网页元素的添加与编辑,12.4 表单的添加与编辑,表单提供了访问者与,Web,站点进行信息交互的窗口。通过它一方面用,户可以从服务器查询信息，另一方面,Web,页可以从用户收集信息，然后,将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各,种对象。这些表单对象包括文本域、列表框、复选框和单选按钮等。,12.4.1 表单及表单对象,1认识表单,通常表单的工作过程如下：,（1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交,”按钮。,（2）这些信息通过,Internet,传送到服务器上。,（3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误,信息，并要求纠正错误。,（4）当数据完整无误后，服务器反馈一个输入完成信息。,第12章 网页元素的添加与编辑,一个完整的表单包含两个部分：,（1）一个是在网页中进行描述的表单对象。,（2）二是应用程序，它可以是服务器端的，也可以是客户端的，用于对,客户信息进行分析处理。,在创建表单对象之前，必须首先在页面中添加表单，操作步骤如下：,（1）将光标放在希望插入表单的位置。,（2）选择“插入/表单”菜单，或选择插入栏上的“表单”类别，然后单击,“表单”图标。,（3）在文档窗口中，单击该表单轮廓以选择该表单，或者在标签选择器,中选择,标签。,（4）在“属性检查器”的“表单名称”域中，键入一个惟一名称以标识该表,单。,第12章 网页元素的添加与编辑,（5）在属性检查器的“动作”域中，指定服务器上处理该表单的动态页或,脚本的路径。可以在“动作”域键入完整路径，也可以单击文件夹图标选,择应用程序页。,（6）在“方法”弹出式菜单中，选择将表单数据传输到服务器的方法。,（7）“,MIME,类型”弹出式菜单使你可以指定对提交给服务器进行处理的,数据使用,MIME,编码类型。,（8）“目标”弹出式菜单指定一个窗口，在该窗口中显示调用程序所返回,的数据。,第11章 设计页面布局,2文本域,文本域是用户在其中输入文本的表单对象。添加文本域的步骤如下：,（1）将添加点放在表单轮廓内。,（2）在插入栏中选择“表单”标签，单击“文本区域”图标。,（3）启动属性检查器，设置文本域属性。,（4）选择文本域类型。,（5）选择类型后，进行以下操作完成了对文本域的设置：,a）,在“文本域”标签下，为文本域输入一个惟一名称。,b）,输入文本域的长度和显示最大字符数（多行文本指定行数、字符,宽度等）。,c）,输入文本域初始值。,（6）若要为页面内的域添加标签，请将添加点放在该对象的旁边，然后,输入需要的任何文本。,第12章 网页元素的添加与编辑,3复选框,复选框允许用户从一组选项中选择多个选项。,4单选按钮（组）,在要求用户从一组选项中只能选择一个选项时，要使用单选按钮。单,选按钮通常成组地使用。一个组中的所有单选按钮必须具有相同的名称，,而且必须包含不同的域值。,5滚动列表,滚动列表可以在有限的空间中显示多个选项。用户可以滚动整个列表,并选择其中的选项。,6标准表单按钮,标准表单按钮为浏览器的默认按钮样式，它包含要显示的文本。标准,表单按钮通常标记为“提交”、“重置”或“发送”。,第13章 链接、库与模板,本章学习导读,一个站点一般由许多页面构成，只有把页面链接起来，,才便于用户浏览。链接是互联网的核心技术。库与模板是网,页设计的有力工具，通过它们可以充分利用共享资源提高设,计效率。本章主要讲述如何将各页链接到一起，并在各页之,间重复使用设计元素的相关知识。通过本章学习，读者应该,掌握以下内容：,文档路径的类型,链接的建立与管理过程,库与模板的建立与使用,第13章 链接、库与模板,13.1 链接,13.1.1 链接的创建与管理,在设置了存储,Web,站点文档的,Dreamweaver 8,站点和创建了,HTML,页后，需要创建从一个网页向另一个网页跳转的链接。链接一般由链接,热点、链接目标和链接指示标志3部分构成。,Dreamweaver 8,提供多种创建超文本链接的方法，可创建由文本、,图像等链接热点到文档、图像、多媒体文件或可下载软件等链接目标的,链接；也可以建立到文档内任意位置的任何文本或图像（包括标题、列,表、表、层或框架中的文本或图像）的链接。,若要直观地查看文件是如何链接在一起的，可使用站点地图。在站,点地图中，可以向站点添加新文档、创建和删除文档链接以及检查到相,关文件的链接。,第13章 链接、库与模板,1关于文档位置和路径,每个网页都有一个惟一的地址，称作统一资源定位器（,URL）。,当创建本地链接（即从一个文档到同一站点上另一个文档的链接）时，,通常不指定要链接到的文档的完整,URL，,而是指定一个起自当前文档,或站点根文件夹的相对路径。使用,Dreamweaver 8，,可以方便地选择,链接创建路径的类型。,（1）绝对路径。绝对路径提供所链接文档的完整,URL，,而且包括所使,用的协议,。,例：,contents.html,就是一个绝对路径。,（2）文档相对路径。文档相对路径对于大多数,Web,站点的本地链接来,说，是最适用的路径。在当前文档与所链接的文档处于同一站点内，而,且可能保持这种状态的情况下，文档相对路径特别方便。,（3）站点根目录相对路径。站点根目录相对路径提供从站点的根文件,夹到文档的路径。,第13章 链接、库与模板,2创建链接,在一个文档创建链接前必须把该文档存盘，这样才能确定相对路径,的基点。创建链接的基本方法如下：,（1）创建到其他文档或文件的链接：,在“文档”窗口中，选择热点文本或页面元素，然后使用“修改/建立,链接”菜单，选择要链接到的文件。,（2）创建跳转到文档内特定位置的锚链接：,a）,将光标插入要跳转到的位置，选择“插入/命名锚记”菜单，命名、,插入锚标记。,b）,在属性检查器的“链接”域中输入“#+锚标记名”（如标记名为,a，,则应输入“#,a”）,或拖动点到文件图标，指向锚标记。,c）,如需要，可通过属性检查器修改锚标记名称。,第13章 链接、库与模板,（3）创建电子邮件链接，此类链接新建一个收件人地址已经填好的空白,电子邮件。,a）,将光标插入要建立电子邮件链接处，单击插入栏“常用”标签中的,电子邮件链接图标，弹出如图所示的对话框。,b）,在对话框中填入链接文本和要链接的电子邮件地址，单击“确定”,按钮完成设置。可建立电子邮件链接。,第13章 链接、库与模板,3管理链接,在本地站点内移动或重命名文档时，,Dreamweaver 8,可自动更新链,接。在,Dreamweaver 8,中启用链接管理的操作步骤如下：,（1）选择“编辑/首选参数”，出现“首选参数”对话框。,（2）从左侧的分类列表中选择“常规”，出现“常规”参数选择选项。,（3）在“文档选项”部分，从“移动文件时更新链接”弹出式菜单中选择,“总是”或者“提示”。,选择“总是”，则每当移动或重命名选定文档时，将自动更新所有链接。,选择“提示”，则每当移动或重命名选定文档时，将首先显示一个对话