中文版Dreamweaver实用教程.ppt

《中文版Dreamweaver实用教程.ppt》由会员分享，可在线阅读，更多相关《中文版Dreamweaver实用教程.ppt（276页珍藏版）》请在三一办公上搜索。

1、计算机基础与实训教材系列,中文版Dreamweaver实用教程,第 一 章,网页设计学前基础,:计算机基础与实训教材系列系列丛书官方网站 http:/:,学 习 目 标,Dreamweaver系列是专业的网页制作软件，Dreamweaver CS4是目前的最新版本，它强大的网页制作功能和简单易用的特性，受到广大用户的青睐。要制作精美的网页，除了要熟练使用Dreamweaver外，还必须了解一些有关网页制作的基础知识，本章主要介绍网页和网站的基础知识、网页的设计流程和Dreamweaver CS4学前的一些基本操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,本 章 重 点,网

2、站和网页的基础知识 网页的设计构思 认识Dreamweaver CS4,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.1 网站和网页的基础知识,随着互联网的迅猛发展，可以获取、交换和存错连接到网络上的各计算机上的信息。网络上存放信息和提供服务的地方就是网站。一个成功的网站离不开精美绚丽的网页，要制作出美观的网页，首先要学习网页制作的相关知识，例如制作网页的知识、制作网页元素的知识以及设计网页效果。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.1.1 主流网站解析,网站(Website)是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容

3、的相关网页集合，它建立在网络基础之上，以计算机、网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说的访问某个站点，实际上访问的是提供这种服务的一台或多台计算机。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.1.2 网页的概念,网页(web)是网站上的某一个页面，它是一个纯文本文件，是向访问者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.1.3 网页的基本元

4、素,网页是一个纯文本文件，通过HTML、CSS等脚本语言对页面元素进行标识、然后由浏览器自动生成的页面。一个网页的基本元素主要包括文本、图像和超链接，其他元素包括声音、动画、视频、表格、导航栏、表单等，如图所示。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.1.4 网页类型,目前，常见的网页有静态网页和动态网页两种。静态网页通常以.htm、.html、.shtml、.xml等形式为后缀；动态网页一般以.asp、.jsp、.php、.perl、.cgi等形式为后缀。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.2 网页的设计构思,在制作网页之前，首先要进行

5、网页的设计与构思，主要包括网页的布局、网页的配色、网设计原则，了解这些知识，是制作有别于其他网页的要点之一。网页的布局构思 网页的设计原则网页的配色技巧 网页大体构思网页制作一般流程,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.2.1 网页的布局构思,网页布局能决定网页是否美观。合理的布局，可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排网页空间，优化网页的页面效果和下载速度。在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布局、对比布局和POP布局等。,:计算机基础与实训教材系

6、列系列丛书官方网站 http:/:,1.2.2 网页的设计原则,网页的设计不仅涉及各种软件的操作技术，还关联到设计者对生活的理解和体验。网页设计就是要把适合的信息传达给适合的观众，遵循一些必要的原则。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.2.3 网页的配色技巧,颜色的使用在网页制作中起着非常关键的作用，色彩成功搭配的网站可以令人过目不忘。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.2.4 网页的大体构思,在制作网页之前，首先对网页大体上的设计有个系统的构思，主要包括网页的主题、网页的命名、网站标志、色彩搭配和字体等要素。,:计算机基础与实训教材

7、系列系列丛书官方网站 http:/:,1.2.5 网页的一般设计流程,在制作网页的过程中，要遵循一定的顺序才能协调分配整个制作过程的资源与进度。网页的制作流程主要如下。建立目标规划：在制作网页之前，必须首先明确要制作的网页目标，以及创建的网页将实现的效果。设计页面版式：在进行页面版式设计的过程中，需要安排网页中包括文本、图像、导航条、动画等各种元素在页面中显示的位置以及具体数量。收集与加工网页制作素材：制作网页所需要的素材。编辑网页内容：具体实施设计结果，按照设计的方案制作，通过Dreamweaver等网页编辑工具软件在具体的页面中添加实际内容。测试并发布网页：在完成网页的制作工作之后，需要对

8、网页效果进行充分的测试，以保证页面中各元素都能正常显示。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.3 认识Dreamweaver CS4,Dreamewaver CS4作为Dreamewaver系列中的最新版本，在增强了面向专业人士的基本工具和可视技术外，同时提供了功能强大、开放式且基于标准的开发模式，可以轻而易举地制作出跨平台和浏览器的动感效果网页。Dreamweaver简介 Dreamweaver CS4工作界面,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.3.1 Dreamweaver简介,Dreamweaver CS4是Adobe公司最新推出

9、的网页制作软件，用于对网站、网页和Web应用程序进行设计、编码和开发。它广泛用于网页制作和网站管理。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,1.3.2 Dreamweaver CS4工作界面,Dreamweaver CS4的工作界面秉承了Dreamweaver系列产品一贯的简洁、高效和易用性，多数功能都能在工作界面中很方便地找到。工作界面主要由【文档】窗口(设计区)、菜单栏、状态栏、面板组和【属性】面板组成，如图所示。,计算机基础与实训教材系列,中文版Dreamweaver实用教程,第 二 章,创建和管理站点,:计算机基础与实训教材系列系列丛书官方网站 http:/:,学

10、 习 目 标,在建立网站之前，首先应设计和规划好整个站点，继而才能进行具体的网页制作过程。创建好一个本地站点后，可以进行管理站点操作，还可以创建文档并将其保存在站点文件夹中。本章将主要介绍使用不同的方法创建和管理站点的方法，创建不同类型文档的方法以及网页制作的常用操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,本 章 重 点,创建本地站点 管理本地站点 网页文档的基本操作 设置文档视图,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.1 创建和管理本地站点,在Dreamweaver CS4中，可以创建本地站点，本地站点也就是在本地计算机中创建的站点，所有的站

11、点内容都保存在本地计算机中，本地计算机可以看成是网络中的站点服务器。创建本地站点后，可以管理创建的站点，并且可以再次编辑创建的站点。在创建站点之前，可以先规划好站点，明确创建站点的方向并采用的方法，同时也是确定本地站点所要实现的功能。站点的简介 规划站点,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.1.1 站点的简介,网站建立在互联网基础之上，是以计算机、网络和通信技术为依托，通过一台或多台安装了系统程序、服务程序及相关应用程序的计算机，向访问者提供相应的服务。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.1.2 规划站点,规划时要明确网站的主题，搜集需

12、要的信息等。规划站点主要是规划站点的结构。创建站点既可以创建一个网站，又可以创建一个本地网页文件的存储地址，规划好站点后即可开始创建站点。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.1.3 创建本地站点,在创建站点之前，一般在本地将整个网络完成，然后再将站点上传到Web服务器上。创建本地站点可以使用向导创建也可以使用高级面板创建。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.1.4 管理本地站点,创建好本地站点后，可以进行一些基本的编辑操作，例如重新编辑本地站点保存位置、名称、删除创建的本地站点等。,:计算机基础与实训教材系列系列丛书官方网站 http

13、:/:,2.1.5 创建本地站点文件,创建好本地站点后，可以根据需要创建各栏目文件夹和文件，对于创建好的站点，也可以进行再次编辑，或删除和复制这些站点。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.2 网页文档的基本操作,创建了本地站点后，就可以创建文档并将保存在站点文件夹中。Dreamweaver CS4提供了多种创建文档的方法，可以创建一个新的空白HTML文档，或使用模板创建新文档。同时，还提供了功能强大的【新建文档】对话框来满足用户创建不同类型的文档的需求。创建空白网页文档 打开和保存网页文档设置网页文档属性 设置网页文档头部信息,:计算机基础与实训教材系列系列丛书官

14、方网站 http:/:,2.2.1 创建空白网页文档,要使用Dreamweaver CS4创建空白网页文档，可以选择【文件】【新建】命令，或按下Ctrl+N键，打开【新建文档】对话框。在左侧的列表框中选择【空白页】选项，在【页面类型】列表框中选择HTML选项，在【布局】列表框中选择【无】选项，单击【创建】按钮，即可创建一个空白网页文档。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.2.2 打开和保存网页文档,在使用Dreamweaver CS4制作网页时，创建好所需类型的网页文档后，可以对网页文档进行适当的编辑操作，打开和保存文档是最常用的命令。,:计算机基础与实训教材系列

15、系列丛书官方网站 http:/:,2.2.3 设置网页文档属性,网页文档的属性主要包括页面标题、背景图像、背景颜色、文本和链接颜色、边距等。其中，【页面标题】确定和命名了文档的名称，【背景图像】和【背景颜色】决定了文档显示的外观，【文本颜色】和【链接颜色】帮助站点访问者区别文本和超文本链接等。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.2.4 设置网页文档头部信息,每一个网页都是由HTML脚本所组成的*.html文件，一个完整的HTML网页文件包含head和body两个部分，head部分包括许多不可见的信息，例如语言编码、版权声明、关键字等。,:计算机基础与实训教材系列系

16、列丛书官方网站 http:/:,2.3 设置视图,在Dreamweaver CS4中，可以根据需要切换【设计】、【代码】和【拆分】等视图，还可以使用标尺和网格来精确定位网页文档中的元素。此外，还延续了先前产品中的跟踪图像功能，可以参照跟踪图像设计网页文档内容。切换文档视图 使用可视化助理 使用跟踪图像,:计算机基础与实训教材系列系列丛书官方网站 http:/:,2.3.1 切换文档视图,文档窗口显示了当前文档，选择【查看】命令，在下拉菜单中文档视图，可以选择【设计】视图、【代码】视图、【拆分代码】视图、【代码】和【设计】视图。此外，还可以使用【实时视图】和【实时代码】视图。,:计算机基础与实训

17、教材系列系列丛书官方网站 http:/:,3.3.2 使用可视化助理,Dreamweaver CS4提供了【标尺】和【网格】功能，用于辅助设计网页文档。【标尺】功能可以辅助测量、组织和规划布局。【网格】功能可以绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3.3 使用跟踪图像,在Dreamweaver CS4中，使用跟踪图像功能可以载入某个网页的布局(或图片)，然后借助该网页的布局来安排正在制作的网页布局。,计算机基础与实训教材系列,中文版Dreamweaver实用教程,第 三 章,规划网

18、页布局,:计算机基础与实训教材系列系列丛书官方网站 http:/:,学 习 目 标,表格和框架是DreamweaverCS4中最常用的布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，使页面显得整齐有序、分类明确，便于浏览。使用框架规划网页，可以把网页分成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用表格和利用框架规划网页布局。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,本 章 重 点,可视化助理创建站点文件使用表格编辑表格使用框架布局网页,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.1 可视化助理

19、,Dreamweaver CS4提供了【标尺】和【网格】功能，用于辅助设计网页文档。【标尺】功能可以辅助测量、组织和规划布局。【网格】功能可以绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为使用【标尺】功能使用【网格】功能使用【跟踪图像】功能,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.1.1 使用【标尺】功能,在设计页面时需要设置页面元素的位置，可以使用【标尺】功能。选择【查看】|【标尺】|【显示】命令，可以在文档中显示标尺。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.1.2 使用【网格】功能,【网格】功能的作用是

20、在【设计】视图中对AP Div进行绘制、定位或大小调整做可化向导，可以对齐页面中的元素。选择【查看】|【网格】|【显示网格】命令，可以在网页文档中显示网格。重复操作，可以隐藏显示网格。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.1.3 使用【跟踪图像】功能,使用【跟踪图像】功能，只需载入某个网页的布局(或图片)，然后借助该网页的布局来安排正在制作的网页布局。选择【查看】|【跟踪图像】|【载入】命令，打开【选择图像源文件】对话框，如图所示，选择要载入的图片文件，单击【确定】按钮。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.2 实用表格,表格是网页中非常

21、重要的元素，是网页排版的主要手段，可以帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想，向浏览者提供条理、清晰的多样化信息。Dreamweaver中的表格插入表格插入嵌套表格,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.2.1Dreamweaver中的表格,表格在Dreamweaver中是用于在HTML页上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问

22、与表格相关的常用命令。可以启用或禁用宽度和菜单。如果未显示表格的宽度或列的宽度，则说明没有在HTML代码中指定该表格或列的宽度。如果出现两个数，则说明【设计】视图中显示的表格可视宽度与【HTML】代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.2.2 插入表格,Dreamweaver CS4提供了极为方便地插入表格的方法，并且可以设置插入表格的相关属性，例如边距、间距、宽度等。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.2.3 插

23、入嵌套表格,嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3 编辑表格,创建表格后，可以对表格进行编辑，包括合并和拆分单元格、添加和删除单元格、设置单元格和表格属性等。选择表格表格的编辑操作 表格的其他操作,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3.1 选择表格,选择表格是对表格进行编辑操作的前提。在Dreamewaver CS4中，可以一次选择整个表、行或列，也可以选择连续的单元格。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3.2 表格的编辑

24、操作,表格的编辑操作是通过设置表格单元格的属性来改变表格的外观，可以对网页中的表格及单元格进行调整大小、添加及删除行列、合并拆分单元格等操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3.3 表格的其他操作,表格除了常用的编辑操作外，还可以进行设置表格排序、复制剪切和导入导出操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4 使用框架布局网页,框架是将浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页，并且各个框架之间不存在干扰，在网页模板出现之前，框架技术是最常用的布局网页工具之一。框架的概念用框架布局网页保存框架创建嵌套框架设置框架属性

25、,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.1 框架的概念,框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.2 使用框架布局网页,Dreamweaver CS4提供了多种常用的框架结构方便对网页进行布局，可以创建框架网页，也可以在普通HTML网页中应用框架。,:计算机基础与实训教材系列系列丛书官方网站

26、 http:/:,3.4.3 保存框架,在浏览器中预览包含框架或框架集的网页文档之前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.3 创建嵌套框架,嵌套框架与嵌套表格相似，是在已经存在的框架中插入一个框架。一个框架集文件可以包含多个嵌套框架集。大多数使用框架的网页，实际上都使用了嵌套的框架，并且在Dreamweaver中的多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套框架。打开一个框

27、架网。将光标移至要创建嵌套框架集的框架中，选择【插入记录】|HTML|【框架】|【下方及左侧嵌套】命令，即可在选中框架中插入嵌套框架集。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.5 设置框架属性,选中框架或框架集后，可以在【属性】面板中设置框架或框架集不同属性。,计算机基础与实训教材系列,中文版Dreamweaver实用教程,第 四 章,插入文本和图像,:计算机基础与实训教材系列系列丛书官方网站 http:/:,学 习 目 标,文本和图像就可以组成一个基本网页，它们也是网页最基本的元素。文本是向浏览者传递信息的主要手段；图像起到了画龙点睛的作用，不仅可以美化网页，还

28、可以展现生动的视觉效果。本章将学习在网页中插入文本和图像，对文本和对象进行编辑操作，制作基本网页。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,本 章 重 点,在网页中插入文本编辑文本在网页中插入图像编辑图像,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.1 在网页中插入文本,文本是网页中最常见也是运用最广泛的元素之一，是网页内容的核心部分。在Dreamweaver CS4中可以直接输入文本，也可以从其他文档中复制文本和导入文本。认识【文本】插入栏插入文本导入文本插入特殊符号插入水平线插入日期,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.1

29、.1 认识【文本】插入栏,应用【文本】插入栏，可以在文档中快速插入各种类型的文本。选择【窗口】|【插入】命令，打开【插入】面板，拖动面板至【文档】窗口顶部的水平位置，可【插入】面板更改为【插入】工具栏。单击【文本】选项卡，打开【文本】插入栏，如图所示。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.1.2 插入文本,在网页中插入文本主要有以下几种方法。直接输入文本：输入文本的排列方式由左到右，跟其他软件都是相同的，遇到编辑口的边界时会自动换行，在表格中输入文本内容。复制文本：复制其他文档中的文本内容主要是为了提高工作效率。,:计算机基础与实训教材系列系列丛书官方网站 http

30、:/:,4.1.3 导入文本,此外，在Dreamweaver CS4中，可以导入XML模板、Word和Excel格式的文档，方法与导入表格式数据相同。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.1.4 插入特殊符号,在网页文档中常见的特殊符号有版权符号、货币符号、注册商标号以及直线等。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.1.5 插入水平线,当网页中的元素较多时，可以用水平线对信息进行组织。在网页中，可以使用一条或多条水平线来可视化分隔文本和对象，使用段落更加分明和更具层次感。插入日期对象，可以以任何格式插入当前的日期(可以包括时间)，并且在每

31、次保存文件时都会自动更新该日期。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.1.6 插入日期,使用Dreamweaver CS4可以直接在文档中插入当前时间和日期，还可以利用JavaScript代码来实现动态变化的时间和日期。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.2 编辑文本,编辑文本操作，可以将网页中的文本设置成色彩纷呈、样式各异的文本，使枯燥的文本更显生动。编辑文本的操作主要指设置文本的基本格式，例如文本字体、字体颜色、对齐方式等。设置文本样式设置文本段落格式设置列表,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.2.1

32、设置文本样式,网页文本的基本样式主要包括文本的字体、大小和颜色等，对这些样式的设置也就是对文本外观的设置。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.2.2 设置文本段落格式,文本的段落格式主要包括缩进方式、对齐方式和设置列表项等。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.2.3 设置列表,列表是指将具有相似特性或某种顺序的文本进行有规则的排列。通过列表阻止方式，可以明确的表现信息的层次关系，突出重点。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.3 在网页中插入图像,图像是网页上最基本的元素之一，制作精美的图像可以大大增强网页

33、的视觉效果。在网页中插入图像通常是用于添加图形界面(例如按钮)、创建具有视觉感染力的内容(例如照片、背景等)或交互式设计元素(例如鼠标指针经过图像)。网页中的图像格式插入图像应用鼠标经过图像,:计算机基础与实训教材系列系列丛书官方网站 http:/:,4.3.1 选择表格,选择表格是对表格进行编辑操作的前提。在Dreamewaver CS4中，可以一次选择整个表、行或列，也可以选择连续的单元格。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3.2 表格的编辑操作,表格的编辑操作是通过设置表格单元格的属性来改变表格的外观，可以对网页中的表格及单元格进行调整大小、添加及删除行列

34、、合并拆分单元格等操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.3.3 表格的其他操作,表格除了常用的编辑操作外，还可以进行设置表格排序、复制剪切和导入导出操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4 使用框架布局网页,框架是将浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页，并且各个框架之间不存在干扰，在网页模板出现之前，框架技术是最常用的布局网页工具之一。框架的概念用框架布局网页保存框架创建嵌套框架设置框架属性,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.1 框架的概念,框架页面通过框架将网页分成多个独

35、立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.2 使用框架布局网页,Dreamweaver CS4提供了多种常用的框架结构方便对网页进行布局，可以创建框架网页，也可以在普通HTML网页中应用框架。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.3 保存框架,在浏览器中预览包含框架或框架集的网页文档之前，必须保存框架集文件以及要在框架中

36、显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.3 创建嵌套框架,嵌套框架与嵌套表格相似，是在已经存在的框架中插入一个框架。一个框架集文件可以包含多个嵌套框架集。大多数使用框架的网页，实际上都使用了嵌套的框架，并且在Dreamweaver中的多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套框架。打开一个框架网。将光标移至要创建嵌套框架集的框架中，选择【插入记录】|HTML|【框架】|【下方及左侧嵌套】命令，即可在选中框架

37、中插入嵌套框架集。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,3.4.5 设置框架属性,选中框架或框架集后，可以在【属性】面板中设置框架或框架集不同属性。,计算机基础与实训教材系列,中文版Dreamweaver实用教程,第 五 章,制作精美的网页,:计算机基础与实训教材系列系列丛书官方网站 http:/:,学 习 目 标,随着多媒体技术的发展，多媒体在网络上得到了广泛的应用。在网页文档中加入Flash动画、音乐和Java Applet等动态元素，可以使网页效果更具动感效果、让网页更加精彩。此外，还可以添加网页特效，制作别具一格的网页。本章主要介绍插入多媒体元素来设计精美的网页

38、。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,本 章 重 点,时间轴和帧的基础知识 应用导航条 在网页中插入Flash动画 插入其他媒体文件 在网页中插入声音 应用网页特效,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.1 应用导航条,导航条是由一个或多个图像组成，它的显示随着动作的改变而改变，它就像图书目录一样，在浏览网站时起到指引方向的作用，能够快速地找到所需的内容。插入导航条 编辑导航条,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.1.1 插入导航条,导航条其实就是一个图像集，根据鼠标的动作，【导航条】的图像通常有以下4种状态。【一

39、般】：尚未单击时所显示的初始图像。【滑过】：当指针从图像上经过时显示的图像。【按下】：单击导航条图像时显示的图像。【按下时鼠标经过】：单击图像后，当指针滑过该图像时显示的图像。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.1.2 编辑导航条,户在文档创建导航条后，选择【修改】|【导航条】命令，打开【修改导航条】对话框，如图所示。在该对话框中可以添加图像，或从导航条中删除图像。用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.2 在网页中插入FLASH动画,as

40、h动画是网页上最流行的动画格式。在Dreamweaver CS4中，Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中并能制作较好的动画效果，同时使用了优化的算法将多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。插入Flash SWF文件设置Flash动画属性插入Flash Paper插入Flv视频【骨骼】工具,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.2.1 插入SWF文件,将光标移至所需插入Flash动画的位置，选择【插入】|【媒体】|SWF命令，打开【选择文件】对话框。选择所需插入的Flash动画，单击【确定】按钮，即

41、可插入到网页文档中,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.2.2 设置FLASH动画属性,在网页文档中插入Flash动画文件后，选中SWF对象打开【属性】面板，如图所示。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.2.3 插入FLASH PAPER,在浏览器中打开包含FlashPaper文档的页面时，可以浏览FlashPaper文档中的所有页面，并且不需要加载新的Web页。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.2.4 插入FLV视频,FLV是Flash视频文件，在文档中插入的FLV文件是以SWF组件显示的，当在浏览器中

42、查看时，该组件显示所选的FLV文件以及一组播放控件。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.3 插入其他媒体文件,除了插入的Flash媒体文件外，还可以插入Shockwave影片、Java Applet和插件等，但这些元素并不常用，下面就简单介绍下这些元素的插入方法。插入Shockwave影片插入Java Applet,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.3.1 插入SOCKWAVE影片,Shockwave影片是多媒体影片文件，文件较小，广泛应用于制作多媒体光盘和游戏等领域。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.

43、3.2 插入JAVA APPLET,Java Applet是使用Java语言编写的一种应用程序，它具有动态、安全和跨平台等特点，能够在网页中实现一些特殊效果。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.3 插入其他媒体文件,除了插入的Flash媒体文件外，还可以插入Shockwave影片、Java Applet和插件等，但这些元素并不常用，下面就简单介绍下这些元素的插入方法。插入Shockwave影片插入Java Applet,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.3.1 插入SOCKWAVE影片,Shockwave影片是多媒体影片文件，文件较小

44、，广泛应用于制作多媒体光盘和游戏等领域。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.3.2 插入JAVA APPLET,Java Applet是使用Java语言编写的一种应用程序，它具有动态、安全和跨平台等特点，能够在网页中实现一些特殊效果。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.5 应用网页特效,在Dreamweaver CS4中，可以通过在【代码】视图中添加代码，添加一些特殊效果，例如鼠标特效、滚动条和页面特效等。网页中的声音格式直接插入声音添加背景音乐,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.4.1 网页中的声音格式

45、,在Dreamweaver CS4中，可以向网页文档添加多种不同类型的声音文件和格式，例如.wav、.midi和.mp3。根据要添加声音的目的、文件大小、声音品质等要素，来确定插入哪种格式和方法。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.4.2 直接插入声音,要在网页中加入声音文件，将光标移至插入声音文件的位置，选中【插入】|【媒体】|【插件】命令，打开【选择文件】对话框，选择要插入的声音文件，单击【确定】按钮即可插入到网页中,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.4.3 添加背景音乐,打开添加背景音乐的网页时，背景音乐会自动播放，为网页增色不

46、少。要为网页添加背景音乐，可以在代码中输入代码完成操作。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.5 应用网页特效,在Dreamweaver CS4中，可以通过在【代码】视图中添加代码，添加一些特殊效果，例如鼠标特效、滚动条和页面特效等。网页中的声音格式直接插入声音添加背景音乐,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.5.1 添加鼠标特效,在【代码】视图中输入代码，添加鼠标特效。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.5.2 插入滚动条,滚动条在Dreamweaver中是不常用到的元素，但在网页中经常能看到一些滚动信息，

47、要在Dreamweaver中创建滚动条，可以在【代码】视图中输入正却的代码，添加滚动条。滚动条代码如下，文本内容“暂无滚动信息”即为滚动条显示信息，可以插入其他元素代替。暂无滚动信息,:计算机基础与实训教材系列系列丛书官方网站 http:/:,5.5.3 应用网页特效,在【代码】视图中插入正确的代码，可以实现一些特殊的页面效果。,计算机基础与实训教材系列,中文版Dreamweaver实用教程,第 六 章,使用CSS样式美化,:计算机基础与实训教材系列系列丛书官方网站 http:/:,学 习 目 标,CSS是一种用来进行网页风格设计的样式表技术，使用CSS样式可以对页面的布局、字体、颜色、背景和

48、其他图文效果实现更加精确地控制，并且同一个样式可以应用于多个不同的对象，提高制作效率。本章介绍了使用CSS样式来美化网页的方法。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,本 章 重 点,CSS样式的基础知识使用CSS样式编辑CSS样式,:计算机基础与实训教材系列系列丛书官方网站 http:/:,6.1 CSS样式基础知识,CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。CSS样式的概念 CSS样式的功能 CSS样式规则,:计算机基础与实训教材系列系

49、列丛书官方网站 http:/:,6.1.1 CSS样式的概念,在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。要管理一个系统的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,6.1.2 CSS样式的功能,CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，

50、加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次革新，它位于文档的区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。,:计算机基础与实训教材系列系列丛书官方网站 http:/:,6.1.3 CSS样式规则,CSS样式规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如p、h1、类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1是选择器，大括号()之间的所有内容都是声明块。,:计算机基