《中文版Dreamweaver CS3网页制作实用教程》课件第7章
Dreamweaver CS3网页制作基础教程-教学大纲
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
《中文版Dreamweaver CS3网页制作实用教程》课件第7章
更改行为
在添加行为之后，可以更改触发动作的事件、添加或删除动作以及更改动作 的参数。这时应首先选择一个有附加行为的对象，接着选择“窗口”|“行为” 命令打开“行为”面板，具体操作方法如下。 要编辑动作的参数，双击该行为名称，然后更改相应对话框中的参数并单击 “确定”按钮。 要更改动作的顺序，可以在选中该行为后单击上下箭头按钮。 要删除某个行为，可以在选中该行为后单击按钮或按 Delete 键。
7.3.2 使用行为
在Dreamweaver CS3中，可以将行为附加给整个文档、链接、图像、表单 元素或其他任何HTML元素。并由浏览器决定哪些元素可以接收行为，哪些元 素不能接收行为。在对象附加行为动作时，可以一次为每个事件关联多个动作， 动作的执行按照在“行为”面板的动作列表中的顺序执行。
中文版Dreamweaver CS3实用教程
中文版Dreamweaver CS3实用教程
7.1.1 CSS的基本概念
CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用 CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免 重复操作。CSS样式表是对HTML语法的一次重达革新，它位于文档的<head> 区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现 有的文档，只要其中的CSS样式符合规范，Dr3实用教程
7.3
认识行为
行为是指在网页中进行的一系列动作，通过这些动作，可以实现用户同网页 的交互，也可以通过动作使某个任务被执行。在Dreamweaver中，行为由事 件和动作两个基本元素组成。通常动作是一段JavaScript代码，利用这些代码 可以完成相应的任务；事件则由浏览器定义，事件可以被附加到各种页面元素 上，也可以被附加到HTML标记中，并且一个事件总是针对页面元素或标记而 言的。 行为的概念 使用行为 更改行为
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
Dreamweaver_CS3网页设计培训教程电子教案07
Dreamweaver CS3网页设计培训教程
2.插入Flash动画
制作网页时必须考虑到网络的下载速度， 所以在插入Flash动画文件之前最好将其 压缩为.swf格式。在网页中插入Flash动 画后，可在【属性】面板中对其进行大小 调整和预览等操作。插入Flash动画的具 体操作请教师参照软件和书中内容进行讲 解。
4.插入插件
如果想在浏览器中访问更多类型的媒体对 象，就必须借助插件。利用插件可以在网 页中插入各种类型的媒体元素。插件包括 的范围很广，如视频文件、音乐文件和动 画文件等。前面介绍的Shockwave影片 就是插件中的一员。 插入插件的具体操作请教师参照软件和书 中内容进行讲解。
Dreamweaver CS3网页设计培训教程
7.2.1 知识讲解 7.2.2 典型案例——在线影院
Dreamweaver CS3网页设计培训教程
7.2.1 知识讲解
下面讲解在Dreamweaver CS3 中插入 Shockwave影片、Java Applet及背景音 乐等的方法。
Dreamweaver CS3网页设计培训教程
7.2.1 知识讲解
1.插入Shockwave影片 2.插入Java Applet 3.插入背景音乐 4.插入插件
Dreamweaver CS3网页设计培训教程
1.插入Shockwave影片
Shockwave影片具有文件小、下载速度 快、被目前主流的浏览器所支持等优点， 广泛应用于网页制作中。它是使用 Director制作的多媒体影片文件。 在Dreamweaver CS3中插入Shockwave 影片的具体操作请教师参照软件和书中内 容进行讲解。
Dreamweaver网页制作实训教程(CS3版)教学课件
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
Dreamweaver_CS3实用教程完整版
1.1.1 网页和网站的概念
网页(web)，也就是网站上的某一个页面，它是一个纯文本文件，是向浏览 者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语 言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览 器进行解析，从而向浏览者呈现网页的各种内容。 网站(Website)，它是指在互联网上，根据一定的规则，使用HTML等工具 制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、 网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或多台计算机。
第1章 网站的设计与制作简述
Dreamweaver CS3是一款专业的网页制作软件，它具有简单易学、操作 方便以及适用于网络等优点。通过对Dreamweaver CS3的学习，即使没有任 何网页制作经验的用户，也能很容易上手，制作出精美的网页。本章主要介绍 了网页的基本概念、网页设计的构思和设计流程，以及Dreamweaver CS3的 新增特色功能和工作环境等。
1.2.2 网页的设计构思
在制作网页之前，首先要进行网页的设计与构思，主要包括网页的主题、 网页的命名、网站标志、色彩搭配和字体等要素。
1.2.3 网页的布局
网页布局的好坏是决定网页美观与否的一个重要方面。通过合理的布局， 可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排 网页空间，优化网页的页面效果和下载速度。反之，如果页面布局不合理，网 页在浏览器中的显示将十分糟糕，页面中的各个元素显示效果可能会重叠或丢 失。因此，在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝 视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布 局、对比布局和POP布局等。
Dreamweaver CS3网页制作
本章任务
1. 能够申请免费的网站空间和域名； 2. 学会配置远程站点； 3. 能将本地站点内容上传到远程服务器中； 4. 能从远程站点中获取网站和文件； 5. 学会设置本地站点与远程站点的同步。
4
7.1 申请网站的空间和域名
1．申请网站空间
收费空间和免费空间的申请方法基本相同，以5944网为例，申请 免费空间，方法是：
14
7.2 上传网站
4．设置站点文件同步
(1) 启动DreamWeaver,在“文件”面板中选择要同步的站点， 单击“文件”面板中的同步按钮，打开“同步文件”对话框，如图 所示 。
“同步文件”对话框
(2) 在“同步”下拉列表中选择其中一个选项。 ·整个“站点名称”站点：同步整个站点。 ·仅选中的本地文件：只同步选择的文件。
15
7.2 上传网站
(3) 在“方向”下拉列表中选择同步时复制文件的方向。 (4) “删除本地驱动器上没有的远端文件”复选框用于选择是否在 目的站点上删除在原始站点上没有对应文件的文件。如果在“方向” 列表中选择了“获得和放置较新的文件”时，该选项不可用。 (5) 单击“预览”按钮，系统开始对每个文件进行检查，完毕后， 出现“Synchronize(同步)”对话框，单击“确定”按钮，开始文件同 步。
“Synchronize”对话框
16
上机实训
实训18 网上安家 申请网Hale Waihona Puke 空间，将本地站点上传到远程服务器。
效果图
17
“希网网络”网站
用户注册页面
7
7.1 申请网站的空间和域名
(3) 打开“希网动态域名_系统提示”页面。启动IE浏览器，打开 注册时输入的邮箱，接收“希网动态域名服务致用户信”并打开，记 下用户名及密码。
零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第7课
7.1 站点维护
7.1.1 知识讲解 7.1.2 典型案例——检测snsp站点
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.1.1 知识讲解
本节将介绍链接和浏览器兼容性的检测方 法。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
2. 检测浏览器的兼容性
在【结果】面板中单击【浏览器兼容性 检查】选项卡，如下图所示。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.1.2 典型案例——检测snsp站点
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.2 上传站点内容
7.2.1 知识讲解 7.2.2 典型案例——上传snsp站点内容
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
7.2.1 知识讲解
7.3.1 检测网站链接
操作思路：
打开自己制作的站点中的任意页面。 打开【结果】面板，在【链接检查器】选项卡 中指定检测的对象。对当前网页中的断开的链 接、孤立文件和外部链接进行检测。 对整个站点进行断开的链接、孤立文件和外部 链接的检测，并修复链接。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 申请域名
域名申请有两种方式：一是到域名代理申请机 构申请购买，二是在网络上申请。 除了有收费的域名，还有免费的域名。但这些 免费的域名可能有附加的条件，如不支持整个 网站的上传，只允许在该空间中输入一些内容； 或允许用户上传，但必须在该页面上有广告等。 如果用户需要一个自由上传的空间，在申请时 还需要查看给定的空间是否支持ASP，JSP和 PHP上传，如果支持，用户就可以上传相应的 内容到网络中。