Dreamweaver网页设计

第8章 Dreamweaver CS4 网页制作技术v8.1 Dreamweaver CS4 基础v8.2 站点的创建与管理v8.3 创建网页基本元素v8.4 表格的应用v8.5 CSS样式的使用v8.6 框架的使用v8.7 添加多媒体元素8.1 Dreamweaver CS4 基础v（一）网页制作基础知识v（二）Adobe Dreamweaver CS4介绍（一）网页制作基础知识v一、网站与网页v由于互联网具备同时传送文字、动画、图形、声音等多媒体的能力，使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。那么什么是网页？什么是网站？网页与网站究竟有哪些异同？网页包含哪些基本构成要素？v网页（Web Page）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。v网站（Web Site）是由网页构成的一个具有相关联系的页面集合。一个网站少则由几个网页，多则由成百上千个网页组成。有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页（Home Page）。网页制作基础知识v二、网页类型v静态网页v所谓静态网页，就是网页里面没有程序代码。运行于客户端的程序、网页、插件和组件等都属于静态网页，在网络中看到的静态网页通常是以htm或html为后缀名的，俗称HTML文件。在浏览扩展名为htm的网页时，网站服务器不会执行任何程序就直接把文件传递给客户端的浏览器直接进行编译工作，除非网站管理人员更新过网页的内容，否则网页是不会因为执行程序而出现不同的内容的。v动态网页v所谓动态网页，就是网页内含有后台程序代码。运行于服务器端的程序、网页和组件等都属于动态网页，它们会随客户、时间及需求的不同，返回不同的页面。通常以扩展名asp或aspx存储，表示该网页是Active Server Pages(ASP)动态网页。此外还有以php或jsp作为后缀名的网页。在浏览这种网页时，必须由服务器端先执行程序，再将执行完的结果下载给客户端的浏览器。网页制作基础知识v三、网页的组成元素v1.文本v因为网页中的信息以文本为主，所以文本是网页中运用最广泛的元素之一。网页的设计与制作者可以通过设置字体、字号、颜色和底纹等属性来改变文本的视觉效果。v2.图像v在网页中使用图像可以丰富网页中的内容。在网页中的图像文件格式有很多种：GIF,JPEG,BMP,TIFF和PNG等，目前应用最为广泛的是GIF,JPEG和PNG。由于受网络速度的限制，网页中的图像往往被分割成多个部分，再利用排版技术将分割的图像拼合，以提高图像在浏览器中的显示速度。vGIF：Graphics Interchange Format，称为图像交换格式，采用LZW无损压缩算法。v GIF图像文件不仅支持透明的背景色和动画格式，还支持256种颜色。由于GIF特定的存储方式，故而它可以支持有大面积单色区域的图像。通常网站中的LOGO、按钮图片和文字图片都是用这种格式。vJPEG：Joint Photographic Experts Group，是由联合图像专家组开发的图形标准，采用有损的压缩算法。v JPEG图像文件不支持透明的背景色和动画格式，它只支持24位真彩色。JPEG用于表现色彩丰富、形状复杂的图像。网页制作基础知识v三、网页的组成元素v2.图像vJPEG：Joint Photographic Experts Group，是由联合图像专家组开发的图形标准，采用有损的压缩算法。v JPEG图像文件不支持透明的背景色和动画格式，它只支持24位真彩色。JPEG用于表现色彩丰富、形状复杂的图像。vGIF：Graphics Interchange Format，称为图像交换格式，采用LZW无损压缩算法。v GIF图像文件不仅支持透明的背景色和动画格式，还支持256种颜色。由于GIF特定的存储方式，故而它可以支持有大面积单色区域的图像。通常网站中的LOGO、按钮图片和文字图片都是用这种格式。vPNG：Portable Network Graphics，便携式网络图形，是一种无损压缩的位图图形格式，支持索引、灰度、RGBA三种颜色方案以及Alpha通道等特性。PNG使用从LZ77派生的无损数据压缩算法。v PNG存储灰度图像的深度可多到16位，存储彩色图像的深度可多到48位，并且还可存储多至16位的通道数据。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网中，一般应用于JAVA程序、网页或S60程序中，因为它压缩比高，生成文件容量小。v 网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，网页中不可能大范围的使用文件较大的bmp、jpg格式文件，gif格式文件虽然文件较小，但其颜色失色严重。而PNG格式图片因其高保真性、透明性及文件体积较小等特性，被广泛应用于网页设计和平面设计中。PNG格式图片通常被我们制作成图片素材来使用，因为PNG图片在网页加载过程中占带宽较小，颜色逼真，下载一次可重复使用。网页制作基础知识v三、网页的组成元素v3.动画vFlash动画：使用Flash制作出的动画质量较好，许多网页中的大型、复杂的动画一般使用Flash制作。Flash动画在浏览器中播放时需要安装插件Macromedia Flash Player等，否则不能播放。vGIF动画：不需要插件，GIF动画通常用于制作简单的、只有急诊图片的交替动画。如站标、广告条、友情链接的LOGO等。网页制作基础知识v三、网页的组成元素v4.超链接v超链接是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，可以使相同网页上的不同位置，也可以是一幅图片、一个电子邮件地址、一个文件，甚至是一个应用程序。v超链接是网页中最常用的一种元素。一个网站由若干个单独的网页文件组成，这些单独的网页由超链接结合起来，形成一个紧密联系的整体。v超链接可分为文本超链接，图像超链接，电子邮件超链接，锚点链接，多媒体文件超链接和空超链接等。当鼠标移动到超链接上时，会变成一只小手的形状。网页制作基础知识v三、网页的组成元素v5.表格vFlash对网页进行排版主要是用表格来完成，通过表格可以精确地控制各网页元素在网页中的位置。这里所说的表格并不是直观意义上的表格，它所指的范围更广泛。一般表格的边框不在网页中显示。v8.表单v表单是网页中实现交互的元素。v表单用来接收浏览者在浏览器端的输入，将这些信息发送到设计者设置的目标端。v表单由具有不同功能的表单对象组成。最简单的表单也要包含一个输入区域和一个提交按钮。浏览者填写表单的方式包括文本输入、单选按钮与复选框、下拉列表等。网页制作基础知识v四、网站建设的基本流程v规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图所示。网页制作基础知识v五、HTMLv1.HTML（Hypertext Markup Language）是一种Web网页元素的标记语言规范，称为超文本标记语言。所谓“超文本”，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓“标记”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，可以由任意文本编辑器编写，文件的扩展名为“html”。v2.HTML文档：一般使用3对HTML标签构成头部信息正文信息v3.HTML标签：单标签：,双标签：内容文本标签：,一级标题图像标签：表格标签：,（二）Adobe Dreamweaver CS4介绍v2005年，Macromedia公司被Adobe公司收购之后，不久发布了Dreamweaver CS3版本软件。到2009年，Adobe公司对Dreamweaver CS3版本做了全面的界面改版，增添许多新功能，发布了Dreamweaver CS4。vAdobe Dreamweaver CS4是一款专业的 HTML 编辑软件，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论是喜欢直接编写HTML代码还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供众多工具，丰富用户的Web创作体验。v利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。不过，如果您更喜欢用手工直接编码，Dreamweaver 还包括许多与编码相关的工具和功能。并且，借助 Dreamweaver，还可以使用服务器语言（例如 ASP、ASP.NET、JSP 和 PHP）生成支持动态数据库的Web应用程序。一、Adobe Dreamweaver CS4的特点和新增功能v特点：所见即所得所见即所得制作效率高制作效率高网站管理方网站管理方便便兼容性好兼容性好可扩展性强可扩展性强v相对于前期版本Dreamweaver CS4增加了一些新的功能：v1.全新的工作界面v2.新增【实时】视图v3.针对Ajax和Javascript框架的代码提示v4.新增【相关文件】v5.新增【代码导航器】v8.InContext Editingv7.CSS最佳做法v8.HTML数据集v9.Photoshop智能对象v10.Subversion集成二、Dreamweaver CS4的工作界面vDreamweaver CS4的工作界面与Dreamweaver 以前版本有所差别，主要由菜单栏、文档工具栏、编辑区、状态栏、属性检查器、面板组等部分组成，而插入栏则整合在面板组中，如图所示。8.2 站点的创建与管理v一、站点的概念v二、创建站点v三、管理站点中的文件v四、实践练习一、站点的概念v所谓站点，可以看做一系列文档的组合，这些文档之间通过各种链接关系，以目录树的形式将网站结构显示出来，使网站建设、网页设计人员能够一目了然地了解该网站和内容的嵌套层次。v站点是一个管理网页文档的场所。简单地讲，一个个网页文档连接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。v设计网页之前应先创建站点。vDreamweaver CS4具有强大的站点管理功能，可以实现站点的即时修改，帮助用户管理和维护整个站点的所有文档，它可以自动更新和修复文档中的链接和路径，以及实现远程站点和本地站点文档的同步与更新。vDreamweaver站点一般由3个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型。本地根文件夹：本地站点远程文件夹：远程站点测试服务器文件夹二、创建站点v用Dreamweaver制作网站，首先第一步就是创建站点，为网站指定本地的文件夹和服务器，使之建立联系。此外，Dreamweaver提供的“管理站点”功能，还可以对新创建的站点进行管理。v执行【站点】【新建站点】v执行【站点】【管理站点】1.创建本地站点和远程站点v本地站点是指在本地计算机上用来存放网站的所有文件的文件夹。远程站点是在服务器上存放网站所有文件的文件夹。通过设置远程站点的地址、登录名等信息，建立该服务器与本地站点的联系，在本地站点与远程站点之间传递文件。其具体操作步骤如下：2.使用“管理站点”对话框v在上一小节创建站点过程中，已经接触到“管理站点”对话框。使用“管理站点”对话框，可以管理多个站点，实现对站点的创建、编辑、复制、删除、导入和导出。导出的站点文件为*.ste。三、管理站点中的文件v学会如何创建站点后，新创建的站点是空的或杂乱的，下面将学习在Dreamweaver中如何管理站点中的文件，主要介绍两种方法：使用“文件”面板和使用“站点地图”。v一般站点由首页（index.html）、图像文件夹（images）、源文件夹（org）和web文件夹组成。文件夹作用图像文件夹放置网页中用到的图片源文件夹用于放置在Photoshop或Fireworks等设计工具中设计的界面和按钮等原始文件Web文件夹用于放置除index.html以外的其他链接文件表 站点文件夹使用“文件”面板管理文件v站点的所有文件在“文件”面板中以目录树的形式呈现，方便管理与查看。v选择“窗口”“文件”命令，打开“文件”面板，选中需要创建文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，在“文件”面板中将生成一个名称为“Untitled-1.htm”的文件，如图所示。v也可以选择“文件”“新建”命令，弹出“新建文档”对话框，默认选中“空白页”选项卡，选择“空白页”，从右侧的“页面类型”列表中选择“HTML”，单击“创建”按钮。Dreamweaver即创建一个新的HTML文件，并展开工作区界面。v对于站点中创建好的各种文档还可以通过“文件”面板进行相应的管理：移动文件、复制文件、重命名文件、删除文件。v页面标题、背景图像和颜色、文本和链接颜色、边距是每个Web文档的基本属性。在Dreamweaver中打开一个网页文件后，单击属性面板中的“页面属性”按钮或选择“修改”菜单“页面属性”命令，均可打开“页面属性”对话框进行设置或更改页面属性。Dreamweaver将页面属性分为外观（CSS）、外观（HTML）、链接（CSS）、标题（CSS）、标题/编码、跟踪图像6个类别。四、实践练习v配置IIS和创建远程站点v练习8.3 创建网页基本元素v一、文本v二、图像v三、超级链接 一、文本的输入和编辑1 输入文本插入普通文本 插入列表文本 2 设置文本属性（1）HTML方式（2）CSS方式3 输入特殊字符二、图像1 插入图像2 设置图像属性3 创建图像地图1 插入图像v根据图像在网页中作用的不同，可以将其分为普通图像、占位图像和鼠标经过图像3种，下面分别介绍它们的插入方法。v1）插入普通图像 v插入普通图像的方法如下：v（1）将鼠标指针置于需要插入图像的位置。v（2）选择“插入”“图像”命令，弹出“选择图像源文件”对话框，在该对话框中选择合适的图像，单击“确定”按钮即可。1 插入图像v2）插入占位图像 v插入占位图像的方法如下：v（1）将鼠标指针置于需要插入占位图像的位置。v（2）选择“插入”“图像对象”“图像占位符”命令，弹出“图像占位符”对话框。v（3）在“名称”文本框中输入占位图像的名称。v（4）在“宽度”和“高度”文本框中输入占位图像的宽度和高度。v（5）单击“颜色”按钮，在弹出的颜色面板中选择占位图像的颜色。v（6）在文本框中输入占位图像的替换文本。v（7）单击“确定”按钮即可插入占位图像。v在发布站点之前，应使用普通图像替换所有的占位图像，方法如下：v（1）双击占位图像。v（2）在弹出的对话框中选择要替换占位图像的普通图像。v（3）单击“确定”按钮，即可将占位图像替换掉，1 插入图像v3）插入鼠标经过图像 v鼠标经过图像是一种在浏览器中查看且使用鼠标指针经过时发生变化的图像，这种图像由主图像和次图像组成。v在网页中插入鼠标经过图像的方法如下：v（1）将鼠标指针置于需要插入鼠标经过图像的位置。v（2）选择“插入”“图像对象”“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框。v（3）在“图像名称”文本框中输入鼠标经过图像的名称。v（4）在“原始图像”文本框中输入主图像所在的路径，也可以单击其右侧的按钮，在弹出的相应对话框中进行选择。v（5）在“鼠标经过图像”文本框中输入次图像所在的路径，也可以单击其右侧的按钮，在弹出的相应对话框中进行选择。v（6）在“替换文本”文本框中输入替换文本。v（7）在“按下时，前往的URL”文本框中输入单击该图像时所链接到的文件的路径。v（8）单击“确定”按钮，完成鼠标经过图像的插入。v（9）按F12键，在浏览器中预览效果。主图像主图像 次图像次图像 2 设置图像属性v（1）更改图像的大小v（2）为图像添加边框v（3）裁剪图像v（4）调整图像的亮度和对比度v（5）锐化图像3 创建图像地图v图像地图就是在一幅图像中创建多个链接区域，单击链接区域可以跳转到链接对象中，这种链接区域也称为热点。选择需要创建链接区域的图像，打开图片“属性”面板，其中的热点工具如图所示。v在“地图”文本框中设置图像地图的名称。v使用指针热点工具选中图像热点后，在“属性”面板中将显示热点的相关属性。三、建立网页链接1 创建文字链接2 创建图像链接3 创建锚点链接4 创建电子邮件链接三、建立网页链接v链接的类型如果按链接目标分类，可以将超链接分为：内部链接、外部链接、锚点链接和电子邮件链接。v链接路径有3种类型的链接路径：（1）绝对路径，为文件提供完全的路径。（2）相对路径，相对路径最适合网站的内部链接。（3）根路径，是指从站点根文件夹到被链接文档经由的路径。1 创建文字链接v为文本添加超级链接的操作步骤如下：v（1）选中要创建超链接的文本，例如“现代技术教学部”。v（2）在“属性”面板的下拉列表中输入要链接网页的地址。v（3）在下拉列表中设置链接网页在浏览器中的打开方式。v（4）按F12键测试超链接的效果。2 创建图像链接v为图像添加超链接的操作步骤如下：v（1）选中要创建超链接的图像。v（2）在“属性”面板的文本框中输入要链接网页的地址。v（3）在下拉列表中设置链接网页在浏览器中的打开方式。v（4）按F12键测试超链接的效果。3 创建锚点链接v创建锚点链接的操作步骤如下：v（1）将鼠标指针定位到要创建锚点链接的位置。v（2）单击插入栏的“常用”类别栏中的“命名锚记”按钮，弹出“命名锚记”对话框。v（3）在文本框中输入锚记的名称，如“jszx”。v（4）单击“确定”按钮，则在页面中插入了锚记。v（5）在页面中选择要设置锚点链接的文本。v（6）拖动“属性”面板中的“指向文件”图标到所要链接的锚记上，则在下拉列表中将出现锚记名称，并在其之前添加了“#”号。v（7）按F12键，测试锚点链接的效果。4 创建电子邮件链接v将插入点放在希望出现电子邮件链接的位置，或者选中作为电子邮件链接出现的文本或图像，选择“插入”“电子邮件链接”命令，弹出“电子邮件链接”对话框。8.4 表格的应用v一、插入表格v二、表格的基本操作v三、行/列/单元格的基本操作v四、表格的高级操作8.4 表格的应用 表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让用户可以设计出漂亮的页面虽然一般用户在浏览网页时并没有看到什么表格，而实际上绝大多数的网页都是采用无边框的表格来实现的。1 插入表格v定位插入点，然后单击右侧“常用”类别中的表格按钮，或者选择“插入”“表格”命令，弹出“表格”对话框，如图。2 表格的基本操作v1）选中表格v2）设置表格属性3 行/列/单元格的基本操作v只要选中表格中的某个单元格，就可以在属性面板设置单元格的属性。图单元格的属性面板（图单元格的属性面板（HTML方式）方式）图图 单元格的属性面板（单元格的属性面板（CSS方式）方式）4 表格的高级操作v1）选中行v2）选中列v3）插入行或列v4）删除行、列v5）拆分单元格v8）合并单元格“插入行或列插入行或列”对话框对话框8.5 CSS样式的使用v一、CSS样式概述v二、创建CSS样式v三、编辑CSS样式v四、应用CSS样式v五、CSS的属性一、CSS样式概述vCSS是“Cascading Styles Sheets”的缩写，中文名称是层叠样式表。用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。CSS可将网页的内容与表现形式分开，使网页的外观设计从网页内容中独立出来单独管理。要改变网页的外观时，只需更改CSS样式。v通过CSS可以使用更丰富、更灵活的样式，更简单地设计出更美观的网页。同时，也让网页的设计与维护更有效率。CSS在网页设计中的作用尤为重要，是网页设计师必备的知识。vCSS是一系列格式设置规则，它们控制Web页面内容的外观。CSS格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语,声明用于定义元素样式。v声明由两部分组成：属性和值。v在HTML中，引入CSS的方法主要有内嵌式、导入式和链接式3种。一、CSS样式概述vCSS作为当前网页设计中的热门技术，具有以下优势：vCSS符合Web标准。W3C组织创建的CSS技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素。v提高页面浏览速度。使用CSS，比传统的web设计方法至少节约50%以上的文件大小。v缩短网页改版时间。只要修改相应的CSS文件就可以重新设计一个有成百上千页面的站点。v强大的字体控制和排版能力。CSS控制字体的能力比font标签好多了。有了CSS，我们不再需要用font标签来控制标题，改变字体颜色，字体样式等。vCSS非常容易编写。Dreamweaver也提供了相应的辅助工具。vCSS有很好的兼容性，只要是可以识别CSS样式的浏览器都可以应用它。v表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用它，省去在每一个网页文件中都要重复设定样式的麻烦。CSS的基本语法vCSS的样式规则由两部分组成：选择器和声明。选择器就是样式的名称，包括自定义的类，HTML标签和CSS选择器（高级样式）。v自定义的类（也称为“类样式”）：可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点（.）开头。例如，可以创建名称为.red的类样式，设置其color属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。vHTML标签：可以重定义特定标签（如p或h1）的格式。创建或更改h1标签的CSS规则时，所有用h1标签设置了格式的文本都会立即更新。vCSS 选择器（高级样式）：可以重定义特定元素组合的格式，或其他CSS允许的选择器形式的格式。例如，“a:link”就是定义未点击过的超链接的高级样式。高级样式还可以重定义包含特定id属性的标签的格式。例如，由#myStyle定义的样式可以应用到所有包含值id=myStyle 的标签。CSS的应用方式vCSS的应用方式有以下两种：v外部CSS样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。该文件可做为共享文件，让多个文档共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。v内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。使用CSS面板v利用“CSS”面板，可以轻松创建和管理CSS规则。本小节主要介绍“CSS”面板的基本操作，包括所有模式与当前模式的切换、移动CSS规则、删除CSS规则、重命名类等。在Dreamweaver CS4中，单击“窗口”|“CSS样式”命令菜单，打开“CSS”面板，如图所示。v注意：使用快捷键“Shift”+“F11”，也可以展开“CSS”面板，若再按下快捷键“Shift”+“F11”，则将“CSS”面板隐藏。“所有”模式与“当前”模式v（1）“CSS”面板默认情况下，是以“所有”模式展开。在“所有”模式下，“CSS”面板显示应用到当前文档的所有CSS规则。单击其中一个规则，该规则的属性出现在下方的列表框中，如图13.3所示，默认情况下属性以“类别视图”排列。v（2）在“CSS”面板中，单击“显示列表视图”按钮，属性以“列表视图”排列，如图13.4所示。v（3）在“CSS”面板中，单击“只显示设置属性”按钮，属性只显示已设置的属性，如图13.5所示。v（4）切换到“当前模式”。在“CSS”面板中，单击“切换到当前选择模式”按钮。此时，在“当前”模式中，“CSS”面板显示当前所选内容的属性的摘要，如图所示。v二、创建CSS样式vDreamweaver CS4提供了4种CSS样式表的类型，即类样式表、标签样式表、ID样式表和复合样式表。v（1）在菜单栏中依次选择“格式”|“CSS样式”|“新建”命令，如图所示。v（2）打开“新建CSS规则”对话框，在“选择器类型”中选择要建立的CSS规则类型，选择“ID”，接着在“选择器名称”中输入自定义的CSS样式名称“#menu”，再选中“规则定义”中的“仅限该文档”选项，单击“确定”按钮。v（3）弹出“#menu的CSS规则定义”对话框，如图所示，进行设置。v（4）单击“确定”按钮，完成CSS样式的定义。v三、编辑CSS样式v（1）选择需要编辑的样式类型，单击“编辑样式”按钮，如下图所示。v（2）在弹出的“CSS规则定义”对话框中进行相应的修改，然后单击“确定”按钮。v四、应用CSS样式v（1）选中要应用样式的文本。v（2）在CSS样式面板中，右击要应用的CSS选项，在弹出的快捷菜单中选择“套用”命令，如左图所示。另外，还可以通过“属性”面板的“ID”下拉列表框中选择刚才新建的样式“menu”，这样就可以将该样式应用到文本中了。如图所示。五、CSS属性v在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、方框、边框、列表、定位、扩展等八大类。根据CSS样式表的用途和要求，分别设置不同类型的参数。v1.类型属性：类型属性主要用来定义文字的字体、大小、样式、颜色等属性。下面以新建的类“.word”为例，来说明如何设置类型属性。v2.背景属性：背景属性主要用来定义页面的背景颜色或背景图像。v3.区块属性：区块属性主要用来定义间距和对齐方式。v4.方框属性：方框属性主要用来定义元素在页面上的位置。v5.边框属性：边框属性用来定义元素周围的边框，例如边框的宽度、颜色和样式等。v6.列表属性：列表属性主要用来定义列表各种属性，如列表项目符号、位置等。v7.定位属性：定位属性主要用来定义层的大小、位置、可见性、溢出方式、剪辑等属性。8.6 框架的使用v使用框架可以固定共同的部分，在单击菜单时把相关内容显示到可变换的区域中。框架就是通过划分浏览器的显示区域，把多个网页文档显示在一个浏览器中。v框架结构的优点有以下几点。v（1）统一风格。v（2）便于修改。v（3）方便访问。一、创建框架集二、框架和框架集的基本操作三、设置框架属性检查器选项四、在框架中使用超级链接一、创建框架集v（1）由新建文件创建框架集v（2）由插入工具栏“布局”类别创建框架集v（3）单击“创建”按钮之后，会弹出“框架标签辅助功能属性”对话框，在其中可以为每个框架设置标题二、框架和框架集的基本操作v1）选择框架与框架集 v选择框架与框架集的操作步骤如下：v（1）选择“窗口”“框架”命令，打开“框架”面板。v（2）在面板中单击框架名称选中框架，单击较粗的边框选中框架集。v2）保存框架与框架集三、设置框架属性检查器选项v1）查看或设置框架属性v（1）在“框架”面板中选择某个框架。v（2）在属性检查器中，单击右下角的展开箭头，查看所有框架属性。v2）查看或设置框架集属性v选中要设置属性的框架集，在“属性”面板中将显示该框架集的属性。四、在框架中使用超级链接v在属性面板的“目标”下拉菜单中可以指定目标文件的显示窗口。“目标”下拉菜单的选项如下:v（1）_blank：放在新窗口中。v（2）_parent：放到父框架集或包含该链接的框架窗口中。v（3）_self：放在相同窗口中（默认窗口无须指定）。v（4）_top：放到整个浏览器窗口并删除所有框架。8.7 添加多媒体元素一、插入网页背景音乐二、插入视频三、插入Flash动画演讲完毕，谢谢观看！