DreamweaverCS4教学与自学教程

合集下载

中文版Dreamweaver CS4入门与进阶ch05简明教程PPT课件

5.2.2
新建CSS样式规则
在Dreamweaver CS4中，可以很方便地创建、编辑CSS样式表定义，并且不需要直接编辑CSS代码，即使不懂CSS层叠样式表定义语法，也能轻松完成定义。在Dreamweaver CS4中新建CSS样式规则，可以在【新建文档】对话框中创建，也可以在【CSS样式】对话框面板中创建。
。
5.3
编辑CSS样式
对于创建的CSS样式，可以进行编辑操作，主要包括修改 CSS样式属性、设置CSS样式首选参数以及链接和导入CSS样式等。
5.3.1
修改创建的样式
CSS样式表通常包含一个或多个规则。可以在【CSS规则定义】对话框中修改已经创建的CSS样式表中的各个规则，也可以直接在【CSS样式】面板中操作。
5.3.2
移动CSS规则样式
在Dreamweaver CS4中的CSS规则，可以很方便地移动到不同位置，例如将规则在文档间移动、从文档头移动到外部样式表、在外部CSS文件之间移动等等。
5.3.3
链接与导入CSS样式
单击【CSS样式】面板中的【附加样式表】按钮，打开【链接外部样式表】对话框，可以链接和导入样式表。
本章重点
CSS样式的基础知识使用CSS样式编辑CSS样式设置CSS样式
5.1
CSS样式的基础知识
CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。
5.1.3
CSS样式规则
CSS样式规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如p、h1、类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1是选择器，大括号({})之间的所有内容都是声明块。 h1 { font-size: 12 pixels; font-family: Times New Roman; font-weight:bold; }

中文版Dreamweaver CS4入门与进阶ch06简明教程PPT课件

6.2.4
插入Flash Paper
在浏览器中打开包含FlashPaper文档的页面时，可以浏览 FlashPaper文档中的所有页面，并且不需要加载新的Web页。要在网页文档中插入FlashPaper，将光标移至要插入 Flash文本的位置，选择【插入】|【媒体】|FlashPaper命令，打开【插入FlashPaper】对话框。
Flash源文件(.fla)：使用Flash应用程序创建的项目的原始文件。这种类型的文件只能在Flash种打开，不能在Dreamweaver或浏览器种打开。但在Flash中打开该类型文件后，会自动生成可用于浏览器的SWF文件或SWT文件。 Flash电影文件(.swf)：Flash电影文件是一中压缩了的Flash源文件，可以浏览器中播放，也可以在Dreamweaver中预览，但不能进行编辑。当使用Flash按钮和文本对象时可以创建该类型文件。 Flash库文件(.swt)：用于修改或替换Flash电影文件中的信息。它允许使用文本或链接来修改模板，创建自定义SWF文件并插入到网页文档中。 Flash元素(.swc)：是一种Flash SWF文件，将该类型文件合并到网页中，可以创建丰富的Internet应用程序。Flash元素有可自定义的参数，修改这些参数可以执行不同的应用程序功能。
6.4.2
直接插入声音
要在网页中加入声音文件，将光标移至插入声音文件的位置，选中【插入】|【媒体】|【插件】命令，打开【选择文件】对话框，选择要插入的声音文件，单击【确定】按钮即可插入到网页中。
6.4.3
添加背景音乐
打开添加背景音乐的我那个也时，背景音乐会自动播放，为网页增色不少。要为网页添加背景音乐，可以在代码中输入代码完成操作。

中文版Dreamweaver CS4入门与进阶ch09简明教程PPT课件

在包含表单的页面中填写相关信息时，当信息填写出错，会自动显示出错信息，这是通过检查表单来实现的。在 Dreamweaver CS4中，可以使用【检查表单】行为和插入 Spry验证对象检查表单。
9.5.1
【检查表单】行为
使用【检查表单】动作，可以为文本域设置有效性规则，检查文本域中的内容是否有效，以确保输入数据正确。一般来说，可以将该动作附加到表单对象上，并将触发事件设置为onSubmit。当单击提交按钮提交数据时会自动检查表单域中所有的文本域内容是否有效。单击【行为】选项卡面板上的按钮，在弹出的菜单中选择【检查表单】命令，打开【检查表单】对话框。
本章重点
表单的基础知识插入文本域表单对象插入按钮表单对象插入列表和菜单表单检查表单
9.1
表单的基础知识
表单在网页中时提供给访问者填写信息的区域，从而可以收集客户端信息，使网页更加具有交互的功能。
9.1.1
表单的概念
表单一般被设置在一个HTML文档中，访问者填写相关信息后提交表单，表单内容会自动从客户端的浏览器传送到服务器上，经过服务器上的ASP或CGI等程序处理后，再将访问者所需的信息传送到客户端的浏览器上。几乎所有网站都应用了表单，例如搜索栏、论坛和订单等。
入门与进阶系列
《中文版Dreamweaver CS4 入门与进阶》
第09章
使用交互式表单
学习目标
表单允许服务器端的程序处理用户端输入的信息，通常包括哦能够与调查的表单、提交订购的表单和搜索查询的表单等。表单要求描述表单的HTML源代码和在表单域中输入信息的服务器端应用程序或客户端脚本。本章主要介绍了在 Dreamweaver CS4中使用表单的方法。

中文版Dreamweaver CS4入门与进阶ch11简明教程PPT课件

11.5
定义记录集
记录集是根据查询关键字在数据库中查询得到的数据库中记录的子集。查询根据搜索准则，这些准则决定了包含在记录集中的内容。查询可以产生一个只包含特定域或特定记录的记录集。11.3.2Fra bibliotek创建数据库
Access数据库将数据按类别存储在不同的数据表中，以方便数据的管理和维护。要设计数据表，首先要创建一个数据库。启动Access 2003，然后选择【文件】|【新建】命令，打开【新建文件】对话框。在【新建文件】对话框中单击【空数据库】按钮，在打开的【文件新建数据库】对话框，选择数据库保存的路径以及文件名，单击【创建】按钮，即可创建数据库。
11.3.3
添加数据库数据
创建好Access数据库后，可以向数据表添加数据内容。
11.4
连接数据库
要在动态网页中使用数据库，就需要创建一个指向该数据库的连接。在Windows系统中，ODBC的连接主要是通过 ODBC数据库资源管理器来完成的。
11.4.1
DSN简介
DSN(Data Source Name)是将动态网页与某个数据库建立连接的信息集合。ODBC数据源管理器使用该信息来创建指向数据库的连接，通常DSN可以保存在文件或注册表中。
11.4.3
建立系统DSN连接
Dreamweaver CS4具有内置数据库功能。可以通过提供的可视化拖动方式即可完成数据库的操作，例如数据库连接的创建，数据变动和数据查询等。此外，Dreamweaver CS4还会在设置数据库操作的过程中自动产生ADO程序代码。要创建DSN数据库连接的设置方法，在Dreamweaver CS4 中打开一个网页文档，选择【文件】|【另存为】命令，将网页文档另存为ASP网页text.asp。

中文版Dreamweaver CS4入门与进阶ch08简明教程PPT课件

8.3.4
行为的概念
状态栏行为主要可以在浏览器窗口中的状态栏显示文本消息，用于优化网页细节。要对状态栏的文本进行编辑，或是对文本状态进行更多的控制，可以使用【行为】选项卡面板中的【设置状态栏文本】行为。单击【行为】选项卡面板上的按钮，在弹出的菜单中选择【设置文本】|【设置状态栏文本】命令，打开【设置状态栏文本】对话框。
本章重点
认识行为【行为】面板的使用添加常用行为添加其他行为
8.页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。在Dreamweaver中，行为由事件和动作两个基本元素组成。通常动作是一段JavaScript代码，利用这些代码可以完成相应的任务；事件则由浏览器定义，事件可以被附加到各种页面元素上，也可以被附加到HTML标记中，并且一个事件总是针对页面元素或标记而言的。
8.3.1
图像操作类行为
图像操作类行为主要是与图像元素有关的行为，包括【预先载入图像】行为、【交换图像】行为和【恢复交换图像】行为。
8.3.2
控制类行为
控制类行为主要是与控制元素有关的行为，包括拖动层行为和显示-隐藏元素行为。
8.3.3
导航栏行为
导航类行为主要是与导航有关的行为，例如设置导航栏图像等。要对导航栏的图像进行编辑，或是对图像状态进行更多的控制，可以使用【行为】选项卡面板中的【设置导航栏图像】动作。打开一个包含导航条的网页文档，在网页文档中选中导航条中的图像，单击【行为】选项卡面板上的按钮，在弹出的菜单中选择【设置导航栏图像】命令，打开【设置导航栏图像】对话框。默认打开的是【基本】选项卡对话框。
入门与进阶系列

中文版Dreamweaver CS4入门与进阶ch02简明教程PPT课件

站点的概念
在Dreamweaver CS4中创建本地站点，也就是在本地计算机中创建的站点，所有的站点内容都保存在本地计算机中，本地计算机可以看成是网络中的站点服务器。简单地说，网站建立在互联网基础之上，是以计算机、网络和通信技术为依托，通过一台或多台安装了系统程序、服务程序及相关应用程序的计算机，向访问者提供相应的服务。
入门与进阶系列
《中文版Dreamweaver CS4 入门与进阶》
第02章
创建站点和网页文档
学习目标
网页文件和网页中插入的元素都是保存在网站中的，网站可以分为本地网站和远程网站。本地网站存放在本地计算机或网络服务器上，远程网站位于运行Web服务器的计算机上。使用Dreamweaver CS4制作网页时，首先要创建本地站点，创建本地站点后可以创建网页文档。本章介绍了本地站点的创建和网页文档的基本操作。
2.2.2
编辑站点文件
编辑站点文件操作主要包括重命名文件或文件夹以及删除文件或文件夹。
2.3
网页文档基本操作
Dreamweaver CS4提供了多种创建文档的方法，可以创建一个新的空白HTML文档，或使用模板创建新文档。
2.3.1
创建空白网页文档
空白网页文档是学Dreamweaver CS4最常用的文档。下面通过实例来介绍创建空白网页文档的方法。
2.4
查看和编辑页面头部内容
一个完整的HTML网页文件包含head和body两个部分，head部分包括许多不可见的信息，例如语言编码、版权声明、关键字等。下面介绍有关页面头部内容的设置操作。
2.4.1
显示文档头部信息
头部信息除了文档Title外，其余都是不可见的，要查看这些头部信息，可以使用【查看】菜单，或在代码视图中查看。显示头部信息打开一个网页文件，选择【查看】|【文件头内容】命令，文档头部中的元素将以图标的形式显示在文档窗口的设计视图左上角。

初识Dreamweaver CS4

2.4 页面总体设置
要设置页面属性，可在不选择网页文档中任何对象的前提下，单击“属性检查器”上的“页面属性”按钮，或者选择“修改”菜单下的“页面属性”命令，或按【Ctrl+J】组合键，打开“页面属性”对话框。
2.4.1 设置页面属性
2.4.2 设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。如果希望自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常使用的词语。
2.2 网站规划、创建与管理
2.2.1 规划网站结构
规划网站结构主要包括确定网站栏目和本地目录结构。本节以“草根视频”网站为例，来具体学习这方面的知识。
2.2.2 定义站点
定义站点的目的是把本地磁盘中的站点文件夹同 Dreamweaver建立一定的关联，从而方便用户使用Dreamweaver管理站点和编辑站点中的网页文档，以及上传或下载站点内容等。
2.3.3 打开、预览和关闭网页文档
若要对已有的文档进行编辑，就需要在 Dreamweaver中打开该文档。另外，在 Dreamweaver中打开网页文档并执行相应操作后，如果想查看它在浏管理站点文件和文件夹
一般在定义站点后，都会利用“文件”面板来创建、重命名或打开站点中的网页文档和文件夹。
2.1.4 文档工具栏
文档工具栏位于文档标签下方，包括各种可对文档进行操作的按钮。
2.1.5 状态栏
状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。
2.1.6 属性检查器
使用“属性检查器”可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。“属性检查器”中的内容会根据选定元素的变化而变化。下图为分别选中文本和图像时的属性检查器。

Dreamweaver_CS4_课件与自学教程 6共7

第5章 Dreamweaver与网络课件
1．插入AP Div ．插入 AP元素通常是绝对定位的Div标签，它是分配有绝对位置的HTML网页元素，在Dreamweaver CS4中可以轻松地创建AP Div。在网页中插入AP Div的操作比较简单，只需在【插入】工具栏的【布局】标签中单击按钮，然后按住
CSS是层叠样式表的简称，它是一组格式设置规则，用于控制网页内容的外观。使用CSS可以非常灵活地控制页面的外观，可以控制许多文本属性，如字体、大小、粗体、下划线、文本阴影等，还可以确保在多个浏览器中以更加一致的方式处理页面外观。除此之外，CSS还可以控制网页中块级别元素的格式与定位，这将涉及到DIV标签。DIV标签是用来定义网页内容中的逻辑区域的标签，使用DIV标签可以将内容居中、创建列效果、创建不同的颜色区域等，另外还可以绝对定位，这时的DIV标签视为AP元素。AP Div元素与以前版本中的图层有一定的相似性，可以用于绝对定位网页元素。
第5章 Dreamweaver与网络课件
■选择【不能调整大小】复选框时，浏览者在浏览页面时不能通过拖曳框架边框改变框架大小。 ■ 【边框】：用于设置是否显示框架的边框。选择 “是”选项时，将显示框架的边框；选择“否”选项时，将隐藏框架的边框；选择“默认”选项时，将显示默认的框架边框。 ■ 【边框颜色】：用于设置框架边框的颜色。该颜色将覆盖框架集的边框颜色。 ■ 【边界宽度】：用于设置框架中的内容距框架左右边界之间的空白宽度。 ■ 【边界高度】：用于设置框架中的内容距框架上下边界之间的空白宽度。
第5章 Dreamweaver与网络课件
图5-65 【网格设置】子菜单
第5章 Dreamweaver与网络课件
■选择【显示网格】命令，可以在编辑窗口中显示网格。 ■选择【靠齐到网格】命令，可以使要移动的AP Div自动吸附到网格线上。 ■选择【网格设置】命令，可以打开【网格设置】对话框，如图5-66所示。在该对话框中可以设置网格线的颜色、网格线的间隔大小以及网格线的显示方式等选项。

dreamweaver cs4

一、Dreamweaver cs4基础知识二、HTML基础知识三、文本的处理与控制四、建立超级链接五、在网页中使用图像六、在网页中使用多媒体八、使用AP Div布局页面九、使用框架布局页面三、网站的创建与管理二、HTML基础知识1．概念：HTML是HyperText Mark-up Language的缩写，即超文本标记语言，是用来制作网页的一种计算机语言。

HTML是一种信息组织方式，使浏览者可以自行选择阅读路径，浏览感兴趣的内容。

HTML也被称为标记语言，它对文件各部分功能进行分类的主要途径是通过特定的标记来完成，在HTML中，每个用来标记的符号都可以看作是一条命令，告诉浏览器应该如何显示文件的内容，HTML代码显示在浏览器中就是我们看到的“网页”。

2．元素HTML是由元素组成的，用于组织文件的内容和指导文件的输出格式。

大多数元素具有起始标记“<”和结尾标记“>”，在起始链接标签和结尾链接标签中间的部分就是元素体，如<body>…</body>。

每一个元素都有名称和可选择的属性，在起始链接标签内标明。

如，<body background=” background.gif”><h2>内容</h2>另一个内容<p></body>“<”表示起始链接标签，”body”是元素的名称，“<” 与”body”之间不能有空格，元素名称不分大小写，“background”是属性名，用来指明用什么方式填充背景，“=”指的是属性值，” background.gif”表示用文件” background.gif”来填充背景，完整的属性：属性名=”属性值”，一个元素可以有多种属性，各个属性用空格分开，“>”表示链接标签结束，第二三行是“body”元素的元素体，</body>是“body”元素的结尾标签链接，以” </”开始+元素名称，以“>”结束，一个元素体内可以有另外的元素（<h2>…</h2>标题元素，<p>分段元素）。

DreamweaverCS4教学与自学教程

框，其中显示了用户的设置概要，如图5-14所示。
7) 单击
站点。
按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面
板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图5-15所示。现在我们已经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实际内容，因此必须向站点中添加相关的内容。
第5章 Dreamweaver与网络课件
图5-15 【文件】面板
第5章 Dreamweaver与网络课件
2．添加网页文件与站点文件夹
新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。
第5章 Dreamweaver与网络课件
图5-4 【文档】工具栏
第5章 Dreamweaver与网络课件
【文档】工具栏中的前三个按钮用于切换视图模式。单
击按钮可以进入代码视图，这是一个用于编写和编辑按钮 HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。

Dreamweaver_CS4_课件与自学教程 7共7

便于以后修改超链接时作为参考。
第5章 Dreamweaver与网络课件
3．在浏览器中测试网页的正确性．通过在浏览器预览网页的方法来测试网页是一个非常有效的途径，这种方法可以贯穿于整个网页设计和创建过程中，通过它可以及时发现网页中存在的错误，避免重复出现相同的错误，也有利于及时纠正不妥之处。在Dreamweaver中，可以在任何时间通过目标浏览器预览网页，而不必首先保存文档，这时浏览器中的所有功能都将发挥作用，包括JavaScript、相对链接、绝对链接、 ActiveX控件等。使用这种方法测试网页的最大好处是可以及时地改正网页中存在的错误。
下拉菜单中选择【设置】命令，则弹出【目标浏览器】对话框，如图5-76所示。
第5章 Dreamweaver与网络课件
图5-76 【目标浏览器】对话框
第5章 Dreamweaver与网络课件
3) 在对话框中选择要测试的浏览器，然后单击按钮。 4) 单击菜单栏中的【文件】\【检查页】\【浏览器兼容性】命令，则打开【浏览器兼容性】面板，如图5-77所示。 5) 在【浏览器兼容性】面板中罗列了浏览器不支持的功能，并且显示了标记所在的行。根据面板中显示的检测结果，可以更改页面中相应的内容。修改之后再进行测试，直到没有错误为止。
第5章 Dreamweaver与网络课件
■单击AP元素的Z轴值，输入新的Z值，可以改变其叠放顺序。 ■在【AP元素】面板中按住AP元素的名称拖曳鼠标，可以改变其位置。 ■如果按住Ctrl键的同时将一个AP元素拖曳到另一个AP 元素位置处，则可以将被拖曳的AP元素变为子级。
第5章 Dreamweaver与网络课件
第5章 Dreamweaver与网络课件
图5-80 【管理站点】对话框

Dreamweaver_CS4_课件与自学教程 2共7

框，如图5-13所示。该对话框询问用户如何连接到远程服务器，这里从下拉列表中选择“无”。
第5章 Dreamweaver与网络课件
图5-12 第三个向导对话框
第5章 Dreamweaver与网络课件
图5-13 第四个向导对话框
第5章 Dreamweaver与网络课件
6) 单击按钮，进入站点定义向导的第五个对话
框，其中显示了用户的设置概要，如图5-14所示。 7) 单击站点。按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图5-15所示。现在我们已经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实际内容，因此必须向站点中添加相关的内容。
第5章 Dreamweaver与网络课件
●单击按钮，可以打开【CSS样式】面板。
● 【字体】：用于选择所需的字体。如果字体列表中没有所需的字体，可以选择列表中的【编辑字体列表】选项，这时将打开【编辑字体列表】对话框，如图5-22所示。在对话框的【可用字体】列表框中选择所需的字体后单击将其添加到【字体列表】中，单击将出现在【属性】面板的字体列表中。按钮，
按钮，则该字体
第5章 Dreamweaver与网络课件
图5-22 【编辑字体列表】对话框
第5章 Dreamweaver与网络课件
●【大小】：用于设置文本的字号大小。 ●单击文本颜色块文本的颜色。 ●单击斜。 ●分别单击按钮，可以使光标所在的段落按钮和按钮，可以将所选文本加粗和倾，在弹出的颜色列表中可以选择

中文版Dreamweaver CS4入门与进阶ch03简明教程PPT课件

3.3.3
表格的其他操作
表格除了常用的编辑操作外，还可以进行设置表格排序、复制剪切和导入导出操作。
3.3.4
【扩展表格】模式
【扩展表格】模式是临时向网页文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。在该模式中，可以选择表格中的项目或者精确地放置插入点，从而避免无意中选中该图像或表格单元格。
3.4
使用框架布局网页
框架是将浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页，并且各个框架之间不存在干扰，在网页模板出现之前，框架技术是最常用的布局网页工具之一。
3.4.1
框架的概念
框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。
3.1.1
使用【标尺】功能
在设计页面时需要设置页面元素的位置，可以使用【标尺】功能。选择【查看】|【标尺】|【显示】命令，可以在文档中显示【标尺】，。重复操作，可以隐藏显示标尺。
3.1.2
使用【网格】功能
【网格】功能的作用是在【设计】视图中对AP Div进行绘制、定位或大小调整做可视化向导，可以对齐页面中的元素。选择【查看】|【网格】|【显示网格】命令，可以在网页文档中显示网格。重复操作，可以隐藏显示网格。
本章重点
图像文件的颜色模式使用可视化助理使用表格编辑表格使用表格规划网页布局使用框架规划网页布局
3.1
可视化助理
Dreamweaver CS4提供了【标尺】和【网格】功能，用于辅助设计网页文档。【标尺】功能可以辅助测量、组织和规划布局。【网格】功能可以绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。

Dreamweaver_CS4_课件与自学教程 4共7

第5章 Dreamweaver与网络课件
■【状态图像】：用于输入一般状态下要显示的图像的
路径和文件名。 ■ 【鼠标经过图像】：用于输入鼠标经过时要显示的图像的路径和文件名。 ■ 【按下图像】：用于输入按下鼠标时要显示的图像的路径和文件名。 ■ 【按下时鼠标经过图像】：用于输入单击一般状态
图像后将光标移过时所显示的图像的路径和文件名。
图5-45 【表格】对话框
第5章 Dreamweaver与网络课件
3) 在对话框中进行选项设置。
■【行数】和【列】：用于设置插入表格的行数和列数。 ■ 【表格宽度】：用于设置表格的宽度，选择“像素” 为单位时，表格的宽度为固定像素的宽度；选择“百分比” 为单位时，表格的宽度与浏览器窗口的宽度将保持相同的百分比。 ■ 【边框粗细】：用于设置表格的边框宽度。
是控制页面整体布局的重要工具。
第5章 Dreamweaver与网络课件
1．插入表格
在网页中插入表格的操作步骤如下： 1) 在网页中要插入表格的位置处定位光标。 2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，则弹出【表格】对话框，如图5-45所示。
第5章 Dreamweaver与网络课件
立热点，如图5-38所示。
第5章 Dreamweaver与网络课件
图5-38 建立的热区
第5章 Dreamweaver与网络课件
■选择工具后在图像上拖曳鼠标，可以建立矩形热
点。按住Shift键的同时拖曳鼠标，可以建立正方形热点。
■选择工具
点。
后在图像上拖曳鼠标，可以建立圆形热
■选择工具
多边形热点。 ■选择工具
第5章 Dreamweaver与网络课件
■【单元格边距】：用于设置表格中单元格内的元素距

中文版Dreamweaver CS4入门与进阶ch07简明教程PPT课件

7.3
管理超链接
通过管理网页中的超链接，可以对网页进行相应的管理。管理超链接操作主要包括更新超链接、修改超链接和测试超链接。
7.3.1
自动更新超链接
在站点内移动或重命名文档时，Dreamweaver会自动更新指向该文档的链接，将整个站点存储在本地磁盘上时，自动更新链接功能最适用，但要注意的是，Dreamweaver不会更改远程文件夹中的相应文件。为了加快更新速度， Dreamweaver会创建一个缓存文件，用来存储跟本地文件夹有关的所有链接信息，在添加、删除或更改指向本地站点上的文件的链接时，该缓存文件会以可见方式进行更新。要设置自动更新链接，选择【编辑】|【首选参数】命令，打开【首选参数】对话框，在【分类】列表框中选择【常规】选项，打开该选项对话框。
本章重点
认识超链接创建超链接管理超链接使用层使用Spry框架
7.1
超链接简介
超链接是网页中最重要的组成部分。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送E-mail等。在Dreamweaver CS4中，可以将文档中的任何文字及任意位置的图片设置为超链接。
7.4.1
层的基本作用
层就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素，还可以插入嵌套层。在Dreamweaver中运用层，为设计者提供了强大的网页控制能力。层不但可以作为一种网页定位技术，也可以作为一种特效形式出现。熟练掌握层的使用方法，是网页制作中最重要关节之一格式为Access-method :// server-name:port / document-location 。

第一章_Dreamweaver_CS4基础

站点的规划与创建1就像人们在修建大楼之前都会先设计详细的图纸一样建立网站之前应该对网站的有一个清晰的全局的思路对网站的需求主题规模栏目设置整体风格等作详细的规确定网站的主题和名称网站的主题也就是网站的题材一个网站必须要有一个明确的主题所有的页面都应该围绕主题展开
第2章 Dreamweaver CS4基础
课后习题
一、选择题 1、保存网页文档，可以按（）组合键。 A.【Ctrl+A】 B.【Ctrl+W】 C.【Ctrl+S】 D.【Ctrl+N】 2、Dreamweaver CS4 可以编辑的文件类型有（） A．.htm,.html B..js C. .jpg D .asp 二、简答题 1、Dreamweaver CS4的新特性有那些？ 2、Dreamweaver CS4 站点的作用是什么？ 3、简述搭建一个本地站点的主要步骤。
5. 页面属性设置
在Dreamweaver CS4主窗口中，单击菜单“修改”→“页面属性”菜单命令就可以打开如图 2-列出了5中不同的类别，选择某一种类别后，该类别中所有可用的选项将会显示在对话框右边的属性设置区域，根据需要修改相应参数并单击“确定” 或“应用”按钮，即可完成页面属性设置。
3、站点的创建步骤（演示） 4、站点的管理站点管理应包含对站点自身的管理和对站点中文件和资源的管理，对站点自身的管理包括：站点的切换、添加、删除等操作。对站点文件和资源的管理，主要包括站点中文件、资源和文件夹的创建、复制、删除、移动等操作。 A、站点自身管理（1）站点切换（2）管理站点 B、站点文件夹和文件管理
第二章重点内容： 1、认识Dreamweaver CS4 2、 Dreamweaver CS4中工作界面的几个基本设置 3、创建网页文档及保存。 4、可以利用Dreamweaver CS4建立站点

第2章 Dreamweaver CS4的基本操作1

2011-5-2
11
第1篇网页设计与制作基础篇
2.管理站点 2.管理站点 ◆编辑站点在Dreamweaver CS4主窗口中，选择“站点” CS4主窗口中，选择“站点” →“站点管理”打开站点管理对话框，如图
2011-5-2
12
第1篇网页设计与制作基础篇
[新建]：可以新建一个站点。 [编辑]：可以选择对话框中的已有站点进行编辑。 [复制]：可以选择对话框中的已有站点，复制出一个新的站点。 [删除]：可以选择对话框中的已有站点，删除该站点。 [导出]：可以选择对话框中的已有站点，其配置文件可以.ste格式保存。 .ste [导入]：可以将.ste格式的配置文件导入。
第1篇网页设计与制作基础篇
本章小结
通过本章的学习，读者应首先了解Dreamweaver 通过本章的学习，读者应首先了解Dreamweaver 中站点建立的方法，中站点建立的方法，掌握如何建立站点文件和文件夹、通过文件面板对站点文件目录进行操作等。如通过文件面板对站点文件目录进行操作等。果要发布设计网站，掌握测试网站的方法，果要发布设计网站，掌握测试网站的方法，通过 Dreamweaver CS4上传本地站点。 CS4上传本地站点。
18
第1篇网页设计与制作基础篇
2.发布网站发布网站设置站点（1）选择“站点” →“管理站点”命令，打开“管理站点”对话框。）选择“站点” “管理站点”命令，打开“管理站点”对话框。主机” （2）根据设计网站设置好“远程信息”，设置好相应的“FTP主机”、）根据设计网站设置好“远程信息” 设置好相应的“ 主机 “登录”、“密码”等。登录” 密码”
2011-5-2
8
第1篇网页设计与制作基础篇

中文版Dreamweaver CS4入门与进阶ch04简明教程PPT课件

本章重点
插入文本编辑文本插入图像编辑图像
4.1
在网页中添加文本
文本是网页中最常见也是运用最广泛的元素之一，是网页内容的核心部分。在Dreamweaver CS4中可以直接输入文本，也可以从其他文档中复制文本和导入文本。
4.1.1
【文本】插入栏
应用【文本】插入栏，可以在文档中快速插入各种类型的文本。选择【窗口】|【插入】命令，打开【插入】面板，拖动面板至【文档】窗口顶部的水平位置，可【插入】面板更改为【插入】工具栏。单击【文本】选项卡，打开【文本】插入栏。
4.4
编辑图像
在网页中插入图像后，可以进行设置图像属性、对齐方式等编辑操作，这些编辑操作可以直接影响网页的整体效果。
4.4.1
设置图像属性
在文档中插入图像后，需要经常对图像进行大小、对齐方式、边距等属性的设置可以在【属性】面板中对进行设置。
4.4.2
使用图像编辑器
图像编辑器，主要分为内部图像编辑器和外部图像编辑器。
4.3
在网页中插入图像
图像是网页上最基本的元素之一，制作精美的图像可以大大增强网页的视觉效果。图像所蕴涵的信息量对于网页而言越加显得重要。在网页中插入图像通常是用于添加图形界面(例如按钮)、创建具有视觉感染力的内容(例如照片、背景等)或交互式设计元素(例如鼠标指针式
网页文本的基本样式主要包括文本的字体、大小和颜色等，对这些样式的设置也就是对文本外观的设置。
4.2.2
设置文本段落格式
文本的段落格式主要包括缩进方式、对齐方式和设置列表项等。
4.2.3
设置列表
列表是指将具有相似特性或某种顺序的文本进行有规则的排列。通过列表阻止方式，可以明确的表现信息的层次关系，突出重点。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第5章 Dreamweaver与网络课件 5.3.2 创建站点的基本结构
创建站点的基本结构，是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的站点，其次是添加网页文件与站点文件夹。 1．创建站点 Dreamweaver CS4提供了两种创建站点的方法：一是在启动Dreamweaver时通过欢迎画面创建；二是在Dreamweaver 工作环境下，单击菜单栏中的【站点】\【新建站点】命令。这两种创建站点的方法都是通过向导完成的，非常直观。〖例5-1〗建立kejian站点。 1) 启动Dreamweaver CS4，则弹出欢迎画面，如图5-9所示。
第5章 Dreamweaver与网络课件
图5-9 欢迎画面
第5章 Dreamweaver与网络课件
2) 单击【Dreamweaver站点】选项，则弹出【„„的站
点定义为】对话框，在该对话框中有两个标签，其中【基本】标签就是站点定义向导，第一个对话框如图5-10所示，这里有两个选项，第一个选项要求输入站点名称，以便在 Dreamweaver中标识该站点，这里输入“kejian”。第二个选项要求输入站点的http地址，如果还没有域名，可以暂时不填。
第5章 Dreamweaver与网络课件
图5-4 【文档】工具栏
第5章 Dreamweaver与网络课件
【文档】工具栏中的前三个按钮用于切换视图模式。单
击按钮可以进入代码视图，这是一个用于编写和编辑按钮 HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。
第5章 Dreamweaver与网络课件
图5-7 切换后的【属性】面板
第5章 Dreamweaver与网络课件 5.2.5 面板组
面板组是指组合在一起的面板集合，它为我们编辑网页
提供了既直观又快速的操作方法，是设计制作网页时不可缺
少的工具。单击【窗口】菜单下的相应命令，可以打开或关闭面板。当我们打开一个面板时，与其成组的面板会同时出现，如图 5-8所示。
第5章 Dreamweaver与网络课件
以上三项工作完成以后，接下来需要收集与整理站点素
材，这是一项费时费力的工作，需要精心组织与筹备。例如，为了使教学站点具有生动性、吸引性，达到生动简洁、便于教学的目的，要求每一部分都要有内容文字、相关图像，甚至还要有动画、声音等装饰。因此在前期的准备工作中，搜集素材的工作量最大。
以“经典”界面模式介绍Dreamweaver CS4在网络课件中的应用，如图5-2所示。
第5章 Dreamweaver与网络课件
图5-1 “设计器”界面
第5章 Dreamweaver与网络课件
图5-2 “经典”界面
第5章 Dreamweaver与网络课件
由上图可以看出，Dreamweaver CS4的工作界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成，下面简单介绍各主要组成部分。
框，如图5-13所示。该对话框询问用户如何连接到远程服务器，这里从下拉列表中选择“无”。
第5章 Dreamweaver与网络课件
图5-12 第三个向导对话框
第5章 Dreamweaver与网络课件
图5-13 第四个向导对话框
第5章 Dreamweaver与网络课件
6) 单击按钮，进入站点定义向导的第五个对话
第5章 Dreamweaver与网络课件
图5-8 打开的面板组
第5章 Dreamweaver与网络课件
单击面板组中的标签，可以在不同的面板之间切换。另
外，将光标指向面板标签，按住鼠标左键向外拖动，可以把该面板从面板组中分离出来；分离出来的面板组还可以再放回去，只需拖动面板标签到面板组中即可。
对象添加到网页文件中，并可在网页中编辑添加的对象。
第5章 Dreamweaver与网络课件
图5-3 【插入】工具栏
第5章 Dreamweaver与网络课件 5.2.2 【文档】工具栏
【文档】工具栏中包含了代码视图、拆分视图、设计视
图、实时视图、实时代码、文档标题、文件管理、浏览器预
览、可视化选项等按钮，如图5-4所示。
第5章 Dreamweaver与网络课件
图5-10 第一个向导对话框
第5章 Dreamweaver与网络课件
3) 单击按钮，进入站点定义向导的第二个对话
框，如图5-11所示。该对话框询问用户是否要使用服务器技术，选择【否，我不想使用服务器技术】选项，表示该站点是一个静态站点，没有动态页。
第5章 Dreamweaver与网络课件
第5章 Dreamweaver与网络课件 5.2.3 状态栏
在Dreamweaver CS4状态栏中可以显示当前光标所在位置的HTML标记，通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度，如图5-5所示。
另外，Dreamweaver CS4的状态栏上新增了视图控制工
第5章 Dreamweaver与网络课件
5.2 Dreamweaver CS4的工作界面
Dreamweaver CS4提供了多种工作界面，以适合不同的
工作人员。第一次安装该软件并启动后，出现的工作界面如
图5-1所示，该工作界面称为“设计器”界面。对于老用户而言，如果不适应这种工作界面，可以通过
界面切换菜单进行切换，选择适合自己的界面模式。本章将
具，其中选取工具用于选择页面中的操作对象；手形工具用于平移视图；缩放工具用于放大或缩小视图显示；而
设置缩放比率选项框
的缩放。
可以通过确切的数值控制视图
第5章 Dreamweaver与网络课件
图5-5 状态栏
第5章 Dreamweaver与网络课件 5.2.4 【属性】面板
【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时，【属性】面板中将显示出不同对象的属性。例如选择了文字，在【属性】面板中显示的是文字的属性；如果选择了图像，则【属性】面板中将显示图像
其它形式的课件，以短小精悍为最高原则；其次，由于网络
课件的使用对象具有不可预知性，因此要求网络课件在语言上必须更规范、更精确，同时必须具有更好的引导性和交互
性。
第5章 Dreamweaver与网络课件
牢固掌握了网络课件的制作原则以后，接下来就是选择
网络课件的制作工具了。目前可以用于制作网络课件的工具很多，几乎所有的网页制作软件都可以用于制作网络课件，例如FrontPage、Dreamweaver等，本章主要介绍Dreamweaver CS4的应用技术。制作网络课件实质上就是建立教学站点，Dreamweaver CS4是目前最流行的一款所见即所得的网站开发与网页制作软件，在制作网络课件方面具有独到的优势。它是一款所见即所得的网页编辑工具，具有功能强大、界面简洁、简单实用等特点，是最好的网页制作软件，也是制作网络课件的首选软件。
框，其中显示了用户的设置概要，如图5-14所示。
7) 单击
站点。
按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面
板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图5-15所示。现在我们已经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实际内容，因此必须向站点中添加相关的内容。
第5章 Dreamweaver与网络课件
图5-15 【文件】面板
第5章 Dreamweaver与网络课件
2．添加网页文件与站点文件夹
新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。
第5章 Dreamweaver与网络课件
Dreamweaver CS4
此章节均为Dreamweaver CS4的学习以便于教学及自学者使用
第5章 Dreamweaver与网络课件
5.1 概述
5.2 Dreamweaver CS4的工作界面 5.3 建立教学站点
5.4 编辑教学网页
5.5 网页的布局方法 5.6 表单 5.7 教学站点的发布
第5章 Dreamweaver与网络课件
5.3 建立教学站点
5.3.1 规划站点
规划站点是建立站点的前期准备工作，主要包括规划站
点主题、规划站点结构、设计网页版面、收集站点素材等。例如，要建立一个教学网站，该网站主要介绍语文、历史、地理等学科的教学内容。我们首先要考虑站点的服务对象，确定主题内容，同样是介绍语文、历史、地理等学科的站点，我们是侧重课外辅导，还是侧重考试指南？这就是主题问题，只有确定了主题，才能有的放矢地进行工作。
第5章 Dreamweaver与网络课件
确定了站点主题以后，需要进行站点结构的规划，同一
个网站要介绍三个学科的内容，如何组织才能脉络清晰，这是动手制作站点之前必须做好的一项工作。当确定了站点主题、组织结构以后，接下来的工作就是设计网页版面，网页作为一种视觉语言，应十分注重其版式的设计，其中主要包括色彩、构图两大方面的内容，这完全取决于制作者的综合水平，包括审美能力、设计能力、文字能力等多方面的素质。