Dreamweaver_CS3中文版标准培训教程教案.ppt

1、第一章 认识 Dreamweaver CS3,重点知识 Dreamweaver CS3的主要功能 Dreamweaver CS3的操作界面,1.1 Dreamweaver CS3简介,Dreamweaver CS3是Adobe公司用于网站设计与开发的业界领先工具的最新版本，提供了强大的可视化布局工具、应用开发功能和代码编辑支持，使设计和开发人员能够有效地创建非常吸引人的、基于标准的网站和应用。Dreamweaver CS3提供了多种新功能特性，包括适合于Ajax的Spry框架、浏览器兼容性检查，以及全新的CSS布局等。,Dreamweaver CS3 的特点,最佳的制作效率 方便的网站管理 无

2、可比拟的控制能力 所见即所得 模板的应用 全方位的呈现 业界领先的工具,集成的工作流 完整的CS样式支持 集成的编码环境 支持的领先技术 轻松使用XML 支持FLV视频 跨平台支持,1.2 安装Dreamweaver CS3的硬件要求,CPU：Intel Pentium4以上处理器或同等性能的兼容型处理器。 操作系统：Windows XP或Windows Vista Home Premium、Business、Ultimate或Enterprise。 内存：512M内存，建议用1G以上内存。 硬盘空间：1GB的可用硬盘空间。 显示器：16位色显示器，1024X768分辨率。 光盘驱动器：DVD

3、-ROM驱动器。 多媒体功能：需要QuickTime7多媒体软件。 产品激活：需要Internet或电话连接进行产品激活。,1.3 Dreamweaver CS3的操作界面,Dreamweaver CS3的操作界面包括以下几个部分：标题栏、菜单栏、插入栏、文档窗口、浮动面板、站点管理窗口和属性面板 。 Dreamweaver CS3的菜单栏上的主菜单共分10种，分别是【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】,第二章 网站设计基础,重点知识 Internet的发展历史与现状 网站主题的确定 网站颜色的规划 创建本地站点,2.3本地站点的创

4、建与管理,Internet简介 网站与网站地址 Web服务器,2.2 网站的规划,规划网站项目 网站风格定位 搜索网页制作素材,2.1 Internet 基础知识,创建本地站点 管理站点 管理站点文件 【站点】面板,2.4 网页的分类与布局,网页的分类 网页的布局,HTML 网页脚本语言JavaScript,2.5 HTML和JavaScript简介,Internet简介,Internet的产生和发展 ：Internet是一个理想的信息交流媒介 ；是一个庞大的信息资源库 ；是一个花样众多的娱乐厅 ；是一个即能省钱又能赚钱的场所 。 什么是Internet：是利用通信设备和线路计算机系统连接起来

5、。通过网络通信协议来实现网络资源共享和信息交换的数据通信网。 Internet的起源和发展：最早起源于美国国防部高级研究计划署的前身ARPAnet ，最初，ARPAnet主要是用于军事研究 ，Internet的第二次飞跃归功于Internet的商业化。 Internet的发展特点与趋势 ：经历了研究网、运行网和商业网3个阶段 ，已经构成全球信息高速公路的雏型和未来信息社会的蓝图。,网站与网站地址,网站是Internet发布和传播信息的计算机系统。一般地，网站是由网站的空间、网站的文件，网站的资源和网站的地址组成。用户可以通过各种浏览器对其进行访问，网站通常是由许多网页组成的，分为网站的各个栏目

6、。 网站地址是在网上浏览网页的唯一标识。网站地址被称为网站的域名，域名是为了方便记忆而专门建立的一套地址转换系统，要访问一台互联网上的服务器，最终还必须通过IP地址来实现，域名解析就是将域名重新转换为IP地址的过程。,Web服务器,Web服务器可以解析HTTP协议。通俗地讲，Web服务器传送页面使浏览器可以浏览。确切地说，Web服务器专门处理HTTP请求。在Internet上所浏览的各种网站，归根到底其实就是用浏览器打开存储于Web服务器上的网页文档及其他相关资源。 利用Dreamweaver，可以在本地计算机上创建出站点的框架，从整体上对站点全局进行把握。在站点设计完毕，可以利用各种上传工具

7、，例如FTP程序，将本地站点上载到Web服务器上以形成Web站点，供广大用户浏览。,网站的栏目规划应本着以下的几个要点来设计 ： 建立网站的目的：建立网站的目的也就是一个网站的目标定位问题，网站的功能和内容，以及各种网站推广都是为了实现网站的预期目的。 网站的主要功能：一般来说，网站都有几个主要的栏目，这些栏目是网站的核心内容，体现了网站的核心价值。所以，网站的主要功能和网站的栏目规划有着密不可分的关系。 网站的风格和内容：合理的栏目安排，使每个网站开发人员必须要做的第一个工作，合理的栏目安排，可以使网站的作用更大，效率更高，使浏览网站的用户更方便、直接的浏览到自己所需要的内容。,规划网站栏目

8、,网站风格定位,站点中的网页风格应该具有统一性，这样能够突出站点要表述的主题，也同时能够帮助用户快速了解站点的结构和浏览机制。,风格的统一体现在下面几个方面： 网站版式的统一 色彩在网页设计中统一 网页形式与内容的统一,搜索网页制作素材,网站素材的选择与制作，是网站前期准备的关键一步。 网页制作素材的搜索需要平时的积累。大量的素材可以保证在选择的时候不会局限在某一点上，会有更多的选择空间，也可能会有意外的惊喜。 网站的素材选择是跟网站的主题和风格密切相关的。网站的主题是一个网站的灵魂，风格就是这个网站的指挥棒，所有的素材都是为让这主题的灵魂，在风格这个指挥棒的指挥下，放到合适自己的位置上的。

9、在网站素材的选择时，应该注意细节上的处理。一个好的网站，在给人以视觉冲击感的同时，会给人以细腻的感觉。,创建本地站点,本地站点的概念：首先在本地计算机的磁盘上构建出整个网站的框架，编辑相应的文档，然后再将其放置到Interent服务器上。,用向导创建本地站点： 打开Dreamweaver CS3，在起始页中选择新建Dreamweaver站点 。 在打开的【定义新站点】对话框中，选择【基本】选项卡，并在【站点名称】文本框中输入网站名字。 单击下一步按钮，切换到定义新站点的第二步，选择【否，我不想使用服务器技术】单选钮 。,单击下一步按钮，切换到定义新站点的第三步，选择【编辑我的计算机上的本地副本

10、，完成后再上传到服务器】单选钮，并浏览本地文件存储的位置 。 单击下一步按钮，切换到定义新站点第四步，在如何连接到远程服务器下拉列表中选择选项“无”。 单击下一步按钮，切换到定义新站点完成对话框，在该对话框中可以看到站点定义的基本信息，包括本地信息、远程信息和测试服务器 。 单击按钮，完成新站点对话框的设置 。 切换到【文件】面板，可以看到新建立的本地站点 。,管理站点,在Dreamweaver CS3中，可以对本地站点进行多方面的管理，如打开、编辑、删除和复制等。,需要说明的是，删除操作，实际上只是删除了Dreamweaver CS3同该本地站点之间的关系，但是实际的本地站点的内容，包括文件

11、夹和文档等，仍然保存在磁盘相应的位置上，用户可以从新创建指向其位置的新站点。,管理站点文件,无论用户是创建空白的文档，还是利用已有的文档构建站点，都可能用到对站点中的文件夹或文件的操作。利用【站点】面板，可以对本地站点中的文件夹和文件夹进行创建、删除、移动和复制等操作。 在【站点】面板中可以设置本地站点的主页。在浏览网站时，如果直接在地址栏中输入网站地址，而不输入任何文档名称，则就会打开主页。,【站点】面板,对一些同【站点】面板本身相关的操作进行介绍：,设置站点地图的参数选项 显示站点地图：在站点地图中，通常是可以显示当前站点中文文档之间的链接关系，利用站点地图，也可以构建文档之间的链接。构建

12、站点地图前提是必须要有链接和主页。 改变显示区域：如果站点中文件列表过长，有限的【站点】面板空间就不能很好地显示这些文件列表，这时候可以利用【站点】面板的最大化功能。,网页的分类,从网页的功能上可以将网页分为主页和一般页面两种形式。 网页也可分为静态网页和动态网页两种：动态网页是指使用网页脚本语言，比如ASP、ASP.NET、JSP、PHP等。 网页制作者使用的不同技术来看，也可以将网页分为ASP、ASP.NET、JSP、PHP等等多个种类。,网页的布局,网页的布局就是将网页中的文字、图片、表格、标单、导航条、Flash等等这些网页的素材以一定的方式有效地排列起来。 通常网页的布局有三种方法：

13、层叠样式表布局，表格布局和框架布局。,CSS（层叠样式表）：能够完全精确地定位文本和图片。 表格布局：它的优势在于能对不同的对象加以处理，而有不用担心不同对象之间的影响。 框架布局：如同表格布局一样，把不同的对象放置到不同页面加以处理，但兼容性差，很少用。,HTML,HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体 。 HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页

14、面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。,网页脚本语言JavaScript,JavaScript的特点：使网页具有互动性；减少下载时间；及时响应用户的操作。 Java与JavaScript的不同：Java是预先编译好后嵌在网页中，而又有自己独立的运行窗口的小程序；JavaScript是一种“脚本，它直接把代码写到 HTML 文档中，浏览器读取它们的时候才进行编译、执行。JavaScript 没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。 开发Javacript所用的软件：一个 JavaScript 程序其实是一个文档，一个文本文件。因为它是嵌入到 HTML 文档

15、中的，所以任何可以编写HTML文档的软件都可以用来开发JavaScript。,第三章 使用表格布局网页,重点知识 创建和管理表格 属性面板对表格属性的设置 表格数据的导入方法 预置表格设计格式化表格 布局视图在网页布局中的应用,3.1 创建表格,插入表格：（快速插入法）设置行数、列数、宽度、边框粗细等。 查看和设置表格属性：如表格线的颜色、整个表格或某些单元格的北京图像、颜色等。 增减行与列：增加一行或一列；增加多行或多列。 改变行列的大小 合并和拆分行列,3.2 选择表格对象,选中表格的元素有以下几种可能： 选中整个表格 选中一行或列：按住Ctrl键，可选择不连续的行或列。 选中相邻或不相邻

16、的多个行或列：单击行或列的第一个单元格，然后按住Shift键并单击行或列的最后一个单元格。 选中一个单元格 选中相邻或不相邻的多个单元格：单击区域内第一个单元格，按住Shift键并单击区域内的最后一个单元格，就可以选中这两个单元格为左上和右下顶角的长方形区域内的所有单元格。,3.3 使用表格对页面进行布局,网页布局的基本概念,页头：定义页面的主题。 页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。 文本：在页面中出现都以行或者块（段落）的形式出现，它们的摆放位置决定着整个页面布局的可视性。 图片：图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和

17、文本的位置成了整个页面布局的关键。 多媒体：声音，动画，视频等其它媒体。在网页设计中，最常见的对媒体元件就是Flash和视频短片。,3.3 使用表格对页面进行布局,网页布局的基本概念,3.3 使用表格对页面进行布局,网页布局的基本概念,3.3 使用表格对页面进行布局,表格布局的操作和基本模式 以下为几种常见模式：,第四章 网页中的文本与图像,重点知识 输入和修改文本属性 段落文本的操作 列表和自定义列表 图像的插入、编辑和删除操作 图像的格式,第四章 网页中的文本与图像,重点知识 输入和修改文本属性 段落文本的操作 列表和自定义列表 图像的插入、编辑和删除操作 图像的格式,第四章 网页中的文本

18、与图像,重点知识 输入和修改文本属性 段落文本的操作 列表和自定义列表 图像的插入、编辑和删除操作 图像的格式,4.1 文本的输入与设置,输入文本 修改字体及样式：需要注意的是：在不同的浏览器中，对于字体的支持是不同的。所以，一定要将所用的字体控制在常用的字体范围之内。 设定文本字号 设定文本颜色,4.2 文本段落的编辑,网页上的大部分文档是由段落组成的。HTML中的段落用“”和“”这对标签来表示。,创建新段落并设置标题：标题和段落时文本的主要组成部分。HTML有6个级别的标题，标题标签的语法是：其中n是16中的一个数字。最大的标题为“”，最小的为“”。 对齐段落文本：段落文本的对齐方式有四种

19、：左对齐、居中对齐、右对齐和两端对齐。 缩进段落文本：HTML提供了一个标识“” ，使用户可以缩进整个段落。 创建表格：无序列表；有序列表；定义列表,4.3 在网页中插入图像,目前都能接受的图像文件是一个很有限的领域，因为只有GIF和JPEG两种文件格式，以及一个正在发展中的格式PNG。,GIF：GIF分为静态GIF和动画GIF两种。它们都支持透明背景图像，适用于多种操作系统，“体型”很小。 JPEG格式：最常用的图像文件格式。这是由一个软件开发联合会组织制定的一种有损压缩格式，能够将图像压缩在很小的储存空间。 PGN格式：全称是流式网络图形格式（Portable Network Graphi

20、c Format，PNG），其目的是替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。,4.4 编辑图像,插入图像：使用Dreamweaver CS3将一个图形放置到网页上有3种方法： 在【常用】面板中选择【图像】按钮。 在菜单栏中选择【插入】/【图像】菜单命令。 从【文件】面板组的【资源】面板上将图片直接拖到页面上。 调整图像大小：Dreamweaver CS3中图像的大小改变是通过高度和宽度值的改变而调整的，浏览器如果知道插入图像的大小和形状，创建网页的速度就会快一些。从新调整图像的大小只是改变其在屏幕上的外观，文件大小保持不变。,4.4 编辑图像,设置图像的排列方式

21、：图像的排列方式也是图像的对齐方式，图像可以向左、向右、向中间对齐，还可以以9种不同的方式进行垂直对齐。 使用外部图像编辑器：在Dreamweaver CS3中编辑图片时，可以使用外部图像编辑器来处理我们想要处理的图片。选择需要处理的图片，可以发现在图片的【属性】面板中有一个PS按钮，单击该按钮就可以打开系统中的Photoshop软件进行图片的编辑，当然，前提是在系统中存在Photoshop软件。,第五章 超链接,重点知识 URL的含义 超链接的意义 创建指向网站内部的超链接 创建指向其他网站的友情链接 为文字和图像添加超链接 添加邮件超链接,5.1 认识超链接,想了解什么是超链接，需要先了解

22、一下什么是URL。URL是Uniform Resource Locator的缩写，代表的是全球资源定位器。 通过URL就可以找到放置在世界各地的资源的位置 。统一资源定位符也有绝对URL和相对URL之分。超链接通俗的解释是，超链接是安排在网页上的URL管道，通过点击超链接，可以定位到这个超链接指向的URL。,绝对路径：是链接文档的完整的URL，包括所使用的传输协议（http:/）。从一个网站的网页链接到另一个网站的网页时，必须使用绝对路径。 相对路径：相对路径就是指以原来文档所在位置为起点到被链接文档经过的路径。这是用于本地链接最合适的路径。,5.1 认识超链接,5.2 超链接的形式,链接到其

23、他文档或文件： 可以用下面任何一种方法确定要添加的超链接： （1）在【链接】文本框中直接输入URL。 （2）单击文本框旁边的文件夹图标 ，打开【选 择文件】对话框。 （3）单击【指向文件】图标 ，并拖动鼠标到一个现存的页面或链接。,5.2 超链接的形式,去掉链接的下划线效果，可以执行下面的操作之一： （1）经典的方法是使用一个图像代替作为链接的本体。 用户必须确定图像的边框属性已经被设置为0，这是因为如果边框属性存在的话，一个链接图像通常显示一个蓝色边框。 （2）较新的方法是使用CSS层叠样式表。 这是一个一步到位的极好方法，但是只有较新的浏览器本才能读取（现在大部分都支持了）。 文本链接通常

24、是蓝色并加有下划线，用户可以改变文档链接的颜色。 用户还可以设置访问过的链接颜色，被激活的链接颜色等等。,5.3 创建电子邮件链接,一旦E-Mail链接被单击，将调用系统中的邮件程序（如Outlook），先是用于发送新邮件的窗口，在这个窗口中已经预设了收件人的地址，以方便用户使用。用户此时要做的只是添加一个主题，并输入一则消息，然后选择发送即可。,5.4 添加空链接和脚本链接,空链接：没有目标端点的链接。利用空链接，可以激活文档中链接对应的对象和文本。设置空链接的方法很简单，只要在文档中选中想要的链接的文本或图像，在【属性】面板中的【链接】文本框中输入一个“#”号即可。 脚本链接：脚本链接是执

25、行JavaScript代码或调用JavaScript函数的链接。使用脚本链接能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。,重点知识 框架的定义 框架集的定义 创建框架集 设置框架集的的属性 用框架集创建页面,第六章 框架和框架集,6.1 认识框架和框架集,框架可以被看成是由两个主要部分组成的：框架集和框架。框架集是定义框架结构的HTML文档，框架结构包括组成页面的单个框架的数目、其原始大小和供所有框架共享的属性，框架集从不单独显示；另一方面，框架是完整的HTML文档，既可以单独地查看和编辑，也可以在由框架集说明的结构中一起查看和编辑。,6.1 认识框架和框架集,行和列：框架集与

26、表格很像，也是由列和行组成的。列和行的属性是用逗号隔开的数值列表。数值的数目表示列或行的数目，但数值本身确定了列或行的大小。 设置框架大小：列宽度和行高度可以设置为以像素为单位的绝对尺寸，或者用整个屏幕的百分比来表示。HTML框架也支持一个指定与其它列或行相对大小的属性。,6.2 框架的基本操作,创建框架和框架集：在Dreamweaver CS3中，执行下列操作之一就可以创建框架集： 使用【文件】/【新建】命令创建一个新的空框架集，然后为框架添加内容。 从一个现有文档开始并使用拖放方式围绕该文档拖拽框架。 从一个现有文档开始并使用菜单命令或者【插入】栏，为该文档应用几种常用框架集布局之一。 创

27、建预定义框架集：Dreamweaver CS3包含了用于最常用框架集配置的框架对象。在【插入】栏中的【布局】类别中可以找到框架菜单，通过该菜单能够使用框架对象。,选择框架和框架集 拆分框架：使用菜单拆分现有框架；使用鼠标拆分框架。 删除一个框架：击框架边框并拖动它到封装框架（或父框架）的边框中即可。 调整框架大小： 设置框架集和框架属性：Dreamweaver CS3中建立的框架集都具有边框，并且在浏览器中查看时这些边框都是不可见的。很多情况下需要将其边框显示出来，并且需要改变其颜色和宽度。此时，需要在框架【属性】面板中进行处理。,6.2 框架的基本操作,6.2 框架的基本操作,指定链接目标框

28、架：框架的主要用于之一就是用于导航控制。框架作为导航中心，可以提供到一个站点中各种各样的Web页面的链接。当指定一个链接出现在Web页面的一个特定框架中时，可以认为正在为该链接指定一个“目标”。可以把Web页面中特定的框架作为目标，也可以把一个框架集的结构部件作为目标。在Dreamweaver CS3中，典型的文本链接或图像链接的目标是通过文本属性和图像属性检查器指定的。,第七章 层和时间轴,重点知识 层的定义 AP Div的创建 AP Div的操作 表格和AP Div的相互转换 时间轴的定义,7.1 创建层,创建层有以下几种方法。 插入层：把光标置于想插入层的位置，然后从菜单栏中选择【插入记

29、录】/【层】命令。 拖放层：将层图标从【插入】面板中拖放到【文档】窗口 。 在【插入】面板中的【布局】栏中单击按钮，在【文档】窗口中拖动鼠标即可绘制出一个图层 。,7.2 层的基本操作,当处理页面布局时，可以对层进行选择、移动、大小调整和对齐等操作。这些操作都是在【AP 元素】面板中完成的。,选定层：如果同时选择了多层，可以进行对齐层的操作，使它们的宽度和高度相同 调整层大小：可以同时调整多个层的代销以使它们具有相同的宽度和高度。 调整一个层的大小 同时调整多个层的大小 对齐层：对齐层的边缘；将层靠齐到网格,7.3 层与表格,层和表格都可以用来在页面中定位其他对象，Dreamweaver CS

30、3为用户提供了转换层为表格和转换表格为层的功能，同时还支持层的溢出排版。 将层转换为表格：在浏览器大小有所变化或显示器的分辨率变化时，层的位置都有所变动。这些都不是预期的效果，此时就需要将层与表格进行必要的转换。 将层转换为表格：表格与层的相互转换只适合于布局排版比较简单的页面。,7.2 层的基本操作,移动层：图层的移动有以下几种操作方法： 如果是通过拖定控制柄来移动层，那么可以拖动最后一个选定的层（黑色突出显示）的控制柄，如图7-15所示。 如果希望一次移动一个像素，可以使用方向键进行移动。按住Shift键的同时按方向键可以更快地移动层。 可以在【属性】面板中直接定位到想要的位置上，在【属性

31、】面板中的【左】和【上】连个文本框中输入自己想要的值。,7.4 时间轴,层是静态的，但可以通过Dreamweaver CS3提供的时间轴功能来改变层的位置、大小、可见性和叠放顺序等属性来使之具有“动态”效果，即创建动画。 时间轴面板：【时间轴】面板了显示层和图像随时间变化的属性。执行【窗口】/【时间轴】菜单命令，可以打开【时间轴】面板。 创建时间轴动画：时间轴只能移动层，如果要移动图像或文本，则要先使用【插入】栏【布局】类别中的【绘制AP Div】按钮创建层，再将图像、文本或其他类型的内容插入到层中，然后通过移动层来移动这些元素。,第八章 CSS格式,重点知识 CSS基本概念 CSS基本语法

32、创建CSS样式表 链接外部CSS样式表,8.1 认识CSS,CSS层叠样式表的基本概念 选择符：任何HTML的元素都可以成为CSS层叠样式表的选择符，选择符是指向特别样式的元素。 类选择符 属性：一个属性被指定到选择符是为了使用它的样式，属性可以包括颜色、边界和字体等 值：声明的值是一个属性接受的指定。 注解：样式表里的注解是用C语言编程中一样的约定方法去指定。 组合：网页设计者经常需要一次修改好几个样式属性。CSS允许使用分好来组合声明。 继承：CSS规则通过继承属性可以应用于多个标签。,8.1 认识CSS,CSS的语法 常用CSS样式： font-family：字体组系，如果确定了一个指定

33、的字体赋值，就应该有一个种类族系名紧随其后，以防第一个选择不存在。 font-style：字体风格，适用于所有对象，有normal、italic、oblique3个值可以选择。 border-color：边框颜色。 border-width：边框宽度。 text-indent：文本缩进。 background-color：背景颜色。,8.2 CSS的应用,CSS样式面板是Dreamweaver CS3中用来建立、修改和学习层叠样式表的组件。有两种不同的方法可以查看【CSS样式面板】：【全部】模式和【正在】模式。,【全部】模式：【全部】模式可以自动判定是外部样式表还是嵌入的样式表。 【全部】模式

34、下面有3种视图模式 ： 【显示类别】视图：将CSS属性和值分成与CSS的规则定义对话框相同的9个类别 。 【显示视图列表】视图 ：将属性按字母顺序列出，首先列出的是应用的属性 。 【只显示设置属性】视图 ：只显示当前设置的属性以及一个添加新属性的选项。,8.2 CSS的应用,【当前】模式：【当前】模式只关注当前的选择，它分为三个窗格，分别是【所选内容的摘要】、【规则】和【属性】窗格在【CSS样式】面板里从上到下拖拽分割边框可以调整任何窗格的大小。,创建CSS样式：Dreamweaver CS3使用三种基本的工具来实现层叠样式表：【CSS样式】面板、【编辑样式表】对话框和【样式定义】对话框。在D

35、reamweaver CS3中，不仅可以自动创建样式，还可以用一种智能的方式自动组织重复的样式。 应用CSS模式：在【应用样式】模式下，只有自定义CSS样式会显示在【CSS样式】面板中。,8.2 CSS的应用,编辑CSS样式： 文本样式的设置 背景样式的设置：在HTML语言中，背景只能使用单一的色彩或利用图像随瓶垂直方向平铺。使用CSS样式表之后，有了更加灵活的设置。 边框样式的设置：设置边框样式可以给对象添加边框，设置边框的颜色、粗细和样式。 列表样式的设置 在网页中导出CSS文件：,8.3 链接外部样式表,新建一个文档。 执行【窗口】/【CSS样式】菜单命令，打开【CSS样式】面板。 在【

36、CSS样式】面板底部，单击【附加样式表】按钮，弹出【链接外部样式表】对话框。 单击【浏览】按钮，弹出【选择样式表文件】对话框。,8.3 链接外部样式表,选择好样式文件后，返回【链接外部样式表】对话框。 在该对话框的【添加为：】选项区域中选择【链接】单选按钮，如图8-29所示。 选择【导入】单选按钮，将整个样式文件嵌入到文档中。 单击按钮，完成对外部样式文件的链接操作。,第九章 行为与事件,重点知识 行为的定义 事件的定义 事件的特点 创建行为,9.1 认识行为,Dreamweaver CS3中的行为是将JavaScript代码放置在文档中，允许访问者与Web页面进行交互，从而以多种方式更改页面

37、或引起某些任务的执行。行为是事件和由该事件触发的动作的组合。在【行为】面板上，可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中。 事件是浏览器生成的消息，指示该页的访问者执行某种操作。,9.2 认识事件,每个浏览器都提供一组事件，这些事件可以与【行为】面板的【动作】弹出菜单中列出的动作相关联。当网页的访问者与页面进行交互时（例如，单击某个图像），浏览器会生成事件；这些事件可用于调用执行动作的 JavaScript 函数。Dreamwaaver 提供多个可通过这些事件触发的常用动作。,9.3 应用 Dreamweaver CS3的内置行为,添加行为到Web页的四个基本步骤：

38、选取标识：所有的行为被链接到特定的HTML元素上。 选择用户的目标浏览器：不同的浏览器（和浏览器的不同版本）支持不同的事件。 选择一个动作：Dreamweaver CS3只能使那些可用于用户的特定页面的动作处于激活状态。 输入参数：行为的强大功能来自于其灵活性。每个动作都带有一个特定的设计来自定义JavaScript代码输出的参数表单。这些动作，可以使用户选择源文件，设置参数和启用特性。,9.3 应用 Dreamweaver CS3的内置行为,调用JavaScript：使用【调用JavaScript】动作，可以执行任何JavaScript函数。无论是标准的或是自定义的函数，【调用JavaScr

39、ipt】动作都可以进行调用和执行。【调用JavaScript】动作非常简单实用，将JavaScript代码或者用户想要出发的函数的名称输入到对话框中即可。 改变属性：【改变属性】动作可以动态地改变“”、“”、“”、“”、“”、“”、“”这些标识中任意一个的属性。,9.3 应用 Dreamweaver CS3的内置行为,检查浏览器：【检查浏览器】动作通常被指定到“”标识上，并且使用onLoad事件驱动。它的作用特别像网站的一个“网关”。使用【检查浏览器】动作可根据访问者所使用的浏览器类型和版本将他们转到不同的页面。【检查浏览器】动作十分灵活，允许使用十进制的数字来指定两个主要浏览器的版本号。 转

40、到URL：使用跳转URL设置，可以在一个网页在打开后自动跳转到另一个页面。在Dreamweaver CS3中，使用跳转到URL设置还可以实现特殊的链接，丰富了链接的方式，让过去的单一点击式链接变得更“炫”、更有特色。,9.3 应用 Dreamweaver CS3的内置行为,弹出消息：按下面的步骤进行： 在页面上加入一个按钮元素后选中该按钮对象，单击【行为】面板中的+按钮，在弹出的菜单中选择【弹出信息】选项。 弹出【弹出信息】对话框，在对话框中设置要显示的文本。 在文档中选中设置弹出信息的对象。 在行为面板中设置动作为onClick。 单击完按钮完成操作。,9.3 应用 Dreamweaver

41、CS3的内置行为,如何制作弹出窗口：按下面的步骤进行： 打开一个文件，将该文件作为弹出窗口。 打开另一文件，将这个文件作为主窗口 其中弹出窗口只是由一个表格和内嵌的Flash组成 将光标定位在“”标签中，打开【行为】面板，单击+按钮。 在弹出的菜单中选择【打开浏览器窗口】选项，弹出【打开浏览器窗口】对话框。 设置弹出窗口宽度和高度，同时设置窗口名称为“弹出广告窗口”，其余属性均为默认。 单击确定按钮，在【行为】面板中设置事件的动作为onload。,9.3 应用 Dreamweaver CS3的内置行为,设置状态栏文件：按下面的步骤进行： (1)打开文档，选择一个对象，打开【行为】面板。 (2)

42、单击+按钮，在弹出的菜单中选择【设置文本】/【设置状态栏文本】选项。 (3)弹出【设置状态栏文本】对话框。 在对话框中的【消息】文本框中输相关信息。 单击确定按钮，完成设置。,第十章 表单,重点知识 表单的定义 表单元素的定义 表单的插入 表单元素的插入,第十章 表单,重点知识 表单的定义 表单元素的定义 表单的插入 表单元素的插入,10.1 表单的基础知识,一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位

43、按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。,10.2 创建表单,在Dreamweaver CS3中，可以像插入其他对象一样插入表单。在表单中有几个应该注意的地方： 用户不能通过手动改变表单的尺寸，需要通过插入表单对象来进行。 表单的轮廓是隐藏的，不能将表单的轮廓显示出来。 表单能插入到层中去，多个表单能够插入到多个层中。但是，层必须完全包含表单。表单不能跨越多个层。 表单可以包含表格，表格也可以包含表单，前提是，两者必须完全包含才能够使用。不能是表单跨越部分表格。,10.3 添加表单对象,在Dreamweaver CS

44、3中，表单输入类型称为表单对象，表单对象是允许用户输入数据的机制。前面介绍了在表单中添加以下表单对象：文本域、列表/菜单、单选按钮、复选框、多行文本域、按钮、标签等等。,添加文本域：文本域能够保存任何数量的字母字符。Web设计者可以决定文本域是以一行还是多行显示。 添加列表/菜单：在Dreamweaver CS3中的表单对象中，有两个对象是提供选项最佳的方式，那就是表单的列表对象和菜单对象。,添加单选按钮：在【属性】面板中单选按钮的各项参数详细设置如下： 单选按钮：设置单选按钮的名称。 选定值：设置单选按钮的值。 类：设置单选按钮的显示样式，可通过CSS样式设置。 添加复选框 添加跳转菜单：与

45、真正的链接相比，跳转菜单的优点是为页面节省空间。使用跳转菜单最多的是网站设置站点之间的友情链接。,10.3 添加表单对象,第十一章 模板和库,重点知识 模板的定义 库的定义的定义 创建模板 创建库 更新库,模板可以理解为一种基础文档，在基础文档中添加细节信息就可以创建新的、独特的文档。模板是由两种区域所组成的：锁定区和可编辑区。当第一次创建模板时，所有的区域都是锁定的。定义模板过程的一部分就是制定和命名可编辑的区域。然后，当某个文档从某些模板中创建时，可编辑的区域则成为唯一可以被改变的地方。 库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素

46、称为库项目。库项目还可以包含行为，但对于编辑库项目中的行为有特殊要求。库项目不能包含时间轴和样式表,11.1 模板和库的概念,11.1 模板和库的概念,库具有一下特性： 库项目的应用范围很广，任何位于Web页主体中的项目都可以指定为库项目。 库项目的可复用性很高，一旦被创建，库项目就可以放置在站点的任何Web页面中，而用户无需重新输入，重新插入或者重新格式化文本和图形。 库项目的可更新性很好，可以在任何时候修改库项目。 如果用户正在对库项目进行大量的修改，那么可以等到所有的更新都完成之后，然后使用一个操作全面地进行更改。 用户可以一次更新一个页面，或者可以一次更新站点中的所有页面。,11.2

47、使用模板,模板的区域类型： 可编辑区域：基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。 重复区域：文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。可以在模板中插入的重复区域有两种：重复区域和重复表格。 可选区域：模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以不出现。在基于模板的页面上，模板用户通常控制是否显示内容。 可编辑标签属性：用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。,11.2 使用模板,创建模板：在Dreamweaver CS3中，用户可以将现有的HTML文档创建为模板，然后

48、根据需要加以修改，或创建一个空白的模板，在其中输入需要显示的文档内容。 创建模板可编辑区域：创建可编辑区域的具体操作步骤如下： 打开一天模板文档 将插入点放置在需要创建可编辑区域的位置。 选择【插入记录】/【模板对象】/【可编辑区域】命令，再弹出的【新建可编辑区域】对话框中的【名称】文本框中输入“可编辑单元” 单击确定按钮，即可在当前模板中创建编辑区域,创建模板重复区域：应用模板可以创建重复表格用以定义包括表格格式可编辑区域的重复区域。 嵌套模板：嵌套模板是应用模板进行网页设计的一种形式，可以更精确地进行网页的布局排版。可以通过保存于各应用模板的文档，然后将其另存为一个模板来创建嵌套模板。 模

49、板分离：应用模板创建的网页，有时需要在某个网页中针对不可编辑区域进行编辑，这时需要将当前页面脱离原来的模板。,11.2 使用模板,11.3 使用库项目,创建库项目：在Dreamweaver CS 3中，可以创建库文件，也可以使用现有的网页转化为库文件。 在文件中插入库项目： 打开文件，将光标定位在要插入库的位置。 将【资源】面板切换到【库】面板，在面板的列表中选择要插入的库文件名称，单击面板下方的【插入】按钮，插入库元素。 编辑库项目,第十二章 插件与多媒体,重点知识 插件的概念 插件的种类 插件的安装方法 Adobe Extension Manager功能 Flash对象的种类 Flash对

50、象的插入方法,12.1 插件,Dreamweaver CS3因其易用易学、功能强大，现在已经成为了许多网页制作者的必备工具。尤其是通过在Dreamweaver CS3添加一些插件，更是可以令网页锦上添花。 Dreamweaver CS3中的插件主要有4种：对象（object），行为（Behavior），命令（Command），套件（Suite）。命令可以用于网页编辑的时候实现一定的功能，例如设置表格的样式；对象用于在网页中插入元素，例如在网页中插入图片或者QuickTime电影；行为主要用于在网页上实现动态的交互功能，例如单击图片后，弹出窗口。套件（Suite）插件主要是产生一个完整的对立的对

51、象或一套完整的网页元素。,12.1.1常用的插件,在Dreamweaver CS3中经常使用到的插件有： ICQ status page transitions gradient text alternate table rows,12. 2插件的使用方法,在介绍插件的使用之前，需要先对Dreamweaver CS3的扩展管理器进行介绍。 插件的安装在以往的Dreamweaver的版本中是比较麻烦的，必须要复制到Dreamweaver的相应目录中才可以，还要在硬盘中花费很多时间才能找到相应的目录，而且删除插件也很麻烦。如果不知道插件的文件名，就无法将插件从目录里面删除。在Dreamweaver

52、 3以后的版本中诞生了插件的管理器Extension Manager，可以实现插件的全自动管理 。 用Dreamweaver插件制作动态下拉菜单 用插件实现随机出现的图片效果,12.3插入Flash,网页中的动画一般有两种形式：一种是GIF动画；另一种就是由Flash软件制作的SWF动画文件。Flash动画以其文件小、效果绚丽，并且是矢量动画而成为现今网页制作中不可或缺的网页元素，被越来越广泛地应用于网页的制作中。 Flash分为多种类型： Flash 文件 (.fla) Flash SWF 文件 (.swf) Flash 模板文件 (.swt) Flash 元素文件 (.swc) Flash

53、 视频文件格式 (.flv) Dreamweaver 附带了 Flash 对象，无论用户的计算机上是否安装了 Flash，用户都可以使用这些对象。,12.3插入Flash,插入Flash动画 插入透明Flash动画：介绍插入透明Flash动画的步骤 新建一个HTML文档。 插入一个表格，并将表格背景色设置成#006699；表格宽度546。 设置第1行表格高为25。 将第2行第1列的单元格宽度设置为70，高为200；第2行第2列单元格宽度设置为406，高为200，单元格背景颜色#003366；第2行第3列单元格的宽度设置为70，高为200。,12.3插入Flash,设置第2行的所有单元格的水平和

54、垂直都居中对齐。 设置第3行表格的高为25。 选择菜单命令【插入记录】/【媒体】/【Flash】，在弹出的【选择文件】对话框中选择动画文件。 单击确定按钮，弹出【对象标签辅助功能属性】对话框，在对话框中设置【标题】为【透明背景动画】。 在浏览器中浏览生成的页面：可以看到Flash是原来的白色，并没有显示出来单元格的背景色。 选中动画，切换到代码视图，(11)找到代码并在其中插入代码“”,插入Flash按钮：在Dreamweaver CS3软件中内置了许多种Flash按钮样式，应用内置的样式可以制作精美的Flash按钮。 插入Flah文字：如果想修改当前插入的Flash文本，只需在文档窗口中选中

55、Flash文本对象，然后双击或在【属性】面板中单击编辑按钮，在弹出的【插入Flash文本】对话框更改Flash文本的属性即可。 插入Flash视频：视频类型分为累进式下载视频和流视频。默认的选择是累进式下载视频。 插入Flash元素：可以在网页中插入Flash元素的内容，通过插入Flash元素来制作不同的图片交换效果。,12.3插入Flash,第十三章 动态网页,重点知识 数据库的基础知识 动态网页基础 创建数据库 安装IIS 创建记录集 绑定动态文本,13.1 数据库的基础知识,13.1.1 动态网页基础 13.1.2 数据库系统概述 Web数据库概念 数

56、据库的优点 数据库的开发环境 开放式数据库连接ODBC,13.1.1 动态网页基础,网络技术日新月异，细心的用户会发现许多网页文件扩展名不再是“.htm”，还有“.php”、“.aspx”等，这些都是采用动态网页技术制作出来的。用户可以使用不同的程序编写适合的CGI程序，如Visual Basic、Delphi或C/C+等。 几种目前颇受关注的新技术： PHP JSP ASP ASP.NET,13.1.2 数据库系统概述,数据库是按照一定的结构和规则组织起来的相关的数据的集合，是综合各个用户数据形成的数据集合，是存放数据的仓库。从根本上说，数据库不过是计算机

57、化的纪录集，是组织或个人保存的信息集。网络就使用通信设备和线路，将处在不同控件位置，操作相对独立的计算机连接起来，在配置一定的操作系统和应用软件，在原本独立的计算机之间实现软硬件资源共享和信息传递的计算机系统。数据库技术目前是计算机处理和存储数据的最有效、最成功的技术，使计算机和信息科学增长最迅速的领域之一。, Web数据库概念,Web数据库的定义是：以后台数据库为基础，加上一定的前台程序，通过浏览器完成数据存储、查询等操作的应用数据库系统。这个概念看上去很抽象，简单地说，一个数据库就是用户利用浏览器作为输入接口，输入所需要的数据，然后将这些数据传送给网络。然后网站再对这些数据

58、进行处理，例如将数据存入数据库，或者对数据库进行查询操作等。最后网站将操作结构传回给浏览器，通过浏览器将结果反馈给用户。, 数据库的优点,不再需要考虑数据库客户端的设计，软件更新更加方便。 数据库与浏览器完全独立。用户的操作不受影响。 标准统一。 具有跨平台特性。 实现数据共享。 减少数据的冗余度。 数据的独立性。 数据实现集中控制。, 数据库的开发环境,实现Web数据库系统的连接和应用的方法： 1.在Web服务器端提供中间件来连接Web服务器和数据库服务器。 2.把应用程序下载到客户端并在客户端直接访问数据库。 中间件负责管理Web服务器和数据库服务器之间的通

59、信并提供应用程序服务，它能够直接调用外部程序或脚本代码来访问数据库。因此可以提供与数据库相关的动态HTML页面，即执行用户查询，并将查询结果转化为HTML页面，通过Web服务器返回给Web浏览器。,Web数据库技术采用3层或多层体系结构,Web服务器端和中间件的数据库访问技术是采用CGI、ASP、JSP以及PHP等技术实现的。,13.2 创建数据库,数据库是结构化数据的集合，结构化指的是把数据按照一定的逻辑层次存放，使数据的管理变得更加容易，并使数据的一致性得到保证，利用数据库对数据进行管理，可以使用户对有关数据的查询更加容易和快捷，Access是Office系列办公软件的重要组成部分，是一种关系型数据库管理应用程序，Access配置简单、移植方便、易学易用，适合中小型网站。,13.2.1 创建空数据库,空数据库不包括任何对象，但是它包含Access对数据库及其对象的所有操作。创建空数据库有两种方法：一种是启动Access时创建；另一种是在Access程序窗口中使用菜单栏中的【文件】/【新建】命令创建。,13.2.2 创建表,