第十讲DreamweaverPPT课件

（5）站点监测。
可以安全、高效地管理站点，保证编辑的文件与站点的同步，确保使用的 文件是最新的。登记和注销功能可以跟踪使用这些文件的人，能够有效防 止修改其他人的工作文件。
（6）Dreamweaver站点与远程服务器可以紧密结合。
Dreamweaver站点可以模拟服务器环境，可以保证制作和测试网页时，站
2021/3/10
授课：XXX
9
Dreamweaver中提供了3种视图：设计、代码和拆分。当要改变编辑视图时，只需 单击对应按钮，即可转换到目标视图模式下。图中所示为单击“代码”按钮后切 换到的代码视图。本书中大部分工作是在设计视图中完成的，因此在后面的学习 中，可以单击“设计”按钮，切换到设计视图。
2021/3/10
授课：XXX
6
启动Dreamweaver后，Dreamweaver的起始页面中提供了一些常用操作命令。可以 直接单击起始页中的目标按钮完成相关的操作，如新建文件等操作。
右侧的文件面板会列出上一次编辑的文件所在站点，因为这里是第一次打开 Dreamweaver，所以显示的是桌面。
2021/3/10
授课：XXX

（1）网站管理功能。 Dreamweaver不仅能够编辑网页，还能够实现本地站点与服务器站点之间的文件
同步。利用库、模板和标签等功能，可以进行大型网站的开发。对于需要多人维 护的大型网站，拥有文件操作权限方面的限制，具有一定的安全保护功能。 （2）多种视图模式。 Dreamweaver提供了代码、设计和拆分3种视图模式。设计视图可以满足用户的设 计需求，即使不懂HTML语言，不会书写网页源代码，也能创建出漂亮的网页；代 码视图可以直接以HTML等语言形式编写网页，能够对源代码进行精确控制；拆分

须放在来自点的根文件夹下网站页面布局
网页的构成 网页的基本内容通常包括：标题、标志、页眉、导航栏、 主内容区和页脚。
1. 标题是用来提示该页面内容的，通常显示在IE的标题栏。 是在页面属性中设置的。
2. 网站的标志：成功的网站标志有着独特的形象标识。 3. Banner(横幅广告）：大多数网站的创建者在此设置网
网页的制作浏览和修改
1. 网页文档的创建 在DR中进行编辑
2. 文档的保存 注意1.应将文档保存在站点文件夹中 2.一般只要建立了站点会默认存入站点文 件夹中
3. 网页的预览：需要在IE中 4. 网页文件的修改：需要在DR中 5. 关闭文档
视图方式
• 在Dreamweaver 中共有三种视图方式。 1. 代码 2. 设计 3. 代码和设计 • 它们之间的切换可以利用“查看”/…
• 将汉字的输入方式设制为全角方式，按SPACE键便 可连续输入空格。
• 用与背景颜色相同的字符来完成空格的输入。
分段与分行
• 回车是段落的结束标记，当需要分段时， 只需要回车就可以。
• 如果只需要换行而不分段，则需要同时 按下SHIFT+ENTER
• 段落间的距离要比行距大。 • 在HTML语言的标记中，分段为<p></p>
件夹）
站点规划要点
1. 用分级文件夹来保存文档 2. 使用合理的文件名 文件名要直观 3. 合理配置文档中的资源 4. 将本地站点和远程站点设置为同样的结
构 5. 整个站点要有一个整体的风格
设计站点和网页的注意事项
• 在网页设计中，不能使用中文作为文件 或文件夹名
• 网页中的文件命名区分大小写 • 每个网站都必须有一个主页 • 主页文件一般以index.htm文件名而且必

它们来划分网页的区域。
框架布局
03
介绍如何使用框架来布局网页，包括如何在框 架中嵌套其他元素，以及如何使用框架来实现
复杂的页面布局。
框架样式
02
介绍如何使用CSS来控制框架的外观，包括边 框、间距、背景色等。
框架数据
04
介绍如何使用框架来展示数据，包括如何在框 架中嵌入其他网页或网页元素，以及如何使用
Dreamweaver支持多种编程语言，包括HTML、CSS、 JavaScript等，并提供了丰富的插件和扩展，以帮助开发者 提高工作效率。
Dreamweaver的历史与发展
Dreamweaver自1997年首次发布以 来，已经经历了多个版本的更新和改 进。
目前，Dreamweaver已经成为一款功 能强大、易用性强的网页设计和开发 软件，被广泛应用于网页设计和开发 领域。
框架来实现数据的展示和交互。
04
网站开发与管理
网站的规划与设计
确定网站目标和定位
在规划阶段，需要明确网站的目的和定位，考虑网站的用户群体 、功能需求和内容构成。
网站布局与风格设计
根据目标用户的需求和喜好，进行网站的整体布局和风格设计，包 括色彩搭配、字体选择和页面元素布局。
网站导航与信息架构
设计易于理解和操作的导航系统，以及清晰的信息架构，以便用户 快速找到所需内容。
等，以及如何创建这些元素。
表单验证
讲解如何使用JavaScript进行表单 验证，包括验证用户输入的内容是 否符合要求，以及如何处理表单提 交等。
表单提交
介绍如何将表单数据提交到服务器 ，包括使用POST和GET方法进行提 交，以及如何处理表单提交的响应 等。
数据库的连接与操作

操作步骤：
①将光标定位在表格右侧，然后单击“插入”|“表单对象”|“跳转菜单”。 ②在出现的“插入跳转菜单”对话框中，修改默认的“文本”框中的“unnamed1”文 本，输入所需的跳转菜单项“跳转图片”，该项目将提示用户选择一个分支页面 ③选取“选项”右面的“更改 URL后选择第一个项目”复选框。 ④单击“+”号按钮，添加其他跳转菜单选项。 ⑤在“文本”框中输入第二个菜单选项“图片1”，然后 单击“选择时，前往URL”框右面的“浏览”按钮，选取素 材盘中的chapter10/materials中的图片文件“1.jpg”。 ⑥重复步骤4、5添加第二个菜单选项“图片2”，并将其 链接至图片文件“2.jpg”。 ⑦单击“确定”按钮，完成跳转菜单的设置。 ⑧保存所作修改，预览效果。 效果图 提示：上述操作是直接跳转到图片，但也可设置直接跳 转到网页文件。
10.2.3 设置表单元素的属性

实例（3）：设置表单元素的属性
操作步骤：
（1）设置文本域属性 （2）设置单选按钮属性 （3）设置列表/菜单属性 （4）设置按钮属性 （5）保存网页，预览效果 •提示：本实例只是添加了表单元素及设 置其属性，而表单的实际制作常常要与数 据库联系起来
效果图
10.2.4 设计表单元素样式
效果图
10.4 通过电子邮件接收表单结果
10.4 通过电子邮件接收表单结果
表单内的信息输入完毕后，需要将该信息提供给有关 的人员，通过电子邮件接收表单结果
实例（6）: 通过电子邮件接收表单结果
操作步骤：
①将光标停放在表单内，然后单击文档窗口左下 角的<form>标签，选中整个表单。 ②在“属性”面板的“动作”文本域中输入表单 动作“mailto:lu2004@”，在“方法” 下拉列表中选择“POST”选项。 ③在“MIME类型“中输入text/plain。该语句指 定表单信息按纯文本方式传送。 ④保存网页。

打开“外观”选项卡，在其中可设置各 菜单项的外观以及菜单项文本的字体。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
3． “高级”选项卡
打开“高级”选项卡设置各菜单项的单 元格属性。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
“行为”菜单中选择“显示弹出式菜单”命
令，打开“显示弹出式菜单”对话框，其中
包括“内容”、“外观”、“高级”和“位
电脑置基”础4·实个例选·上项机卡系列。丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.4.5 显示弹出式菜单
1．“内容”选项卡 2． “外观”选项卡 3． “高级”选项卡 4． “位置”选项卡
12.1.2 事件
onFinish onHelp onKeyDown onKeyPress。 onKeyUp onLoad onMouseDown onMouseUp
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.1.2 事件
onMouseMove onMouseOut onMousOver onMouseWheel onMove onPropertyChange
电脑基础·实例·上机系列丛
清华大学出版社
12.1
Dreamweaver中文版网页制作教程
行为简介
通过行为可以在页面上制作一些简单的交互 效果，行为是Macromedia预置的JavaScript程 序库。行为能实现用户与网页间的交互，通 过某个动作来触发某项计划。Dreamweaver MX 2004内置了21种行为，都是一些比较常 用的功能。如果用户有较高的JavaScript编写 能力也可以自己编写行为。

第7页
插入标题图像
使用前面介绍的方法插入网页的标题图像
第8页
选择“插 入”→“表 格”命令
在“表格” 对话框中设 置表格参数
创建表格
第9页
加入表格内容
在表格中插入图像 在表格中输入文字 改变表格的行宽与列高
第10页
选择表格
选择整个表格 选择一列 选择一行 选择单元格
第11页
选择所需要的选 项
选择“确定”按 钮开始转换
第20页
层切换为表格
选择“修 改”→“转 换”→“层到表格”
选择所需要的选项 选择“确定”按钮
开始转换
第21页
思考与练习
如何创建表格？ 怎样在表格内插入图像和文字？ 如何选择表格？ 怎样加入和删除表格行和列？
第22页
思考与练习
创建层有哪几种方式？ 如何相互转换表格和层？ 建立一个表格网页，应用表格和层进行精确
第16页
设置层属性
选中要设置的层 在属性面板中设置层属性
第17页
层的可见性 层的大小 层的对齐
调整层
第18页
层与表格
层比表格单元格更容易处理和操作 可以使用层创建复杂的页面，然后将其转换
成表格 也可以在层和表格之间来回切换
第19页
表格转换到层
选择“修 改”→“转 换”→“表格到 层”
第4页
表格与层
页面是按照逐行的顺序进行设置的。如果在 一行内需要多个起始点并且要定位各个起始 点，就需要表格和层
在网页中，如果需要定位文字和图像，必须 依靠表格和层
表格可以精确定位 层可以灵活地定位
Байду номын сангаас第5页
实例
标题图像 用表格定位的
文字与图像

详细描述
通过个人网站制作实例，学习者可以学习如何展示个人风格和兴趣，从页面布局、色彩搭配到内容编辑，全面提 升个人网站的专业度。
企业网站制作实例
总结词
传达企业文化和价值观
详细描述
企业网站制作实例可以帮助学习者了 解如何有效地传达企业文化和价值观 ，通过专业的页面设计和功能开发， 提升企业形象和市场竞争力。
它支持 HTML、CSS、JavaScript 等 多种网页开发技术，并且具有强大的 代码编辑和调试功能，可以帮助开发 者提高开发效率和网页质量。
Dreamweaver 的历史与发展
Dreamweaver 的前身是 Macromedia 的 HomeSite，它是一款基于文本的网页编辑器。随着网页 设计和开发技术的不断发展，HomeSite 逐渐演变为更加可视化和功能丰富的 Dreamweaver。
Dreamweaver 课件
目录
• Dreamweaver 简介 • Dreamweaver 基本操作 • CSS 和 HTML 在 Dreamweaver
中的运用 • 动态网页制作 • 实例和案例分析
01
Dreamweaver 简介
什么是 Dreamweaver
Dreamweaver 是一款由 Adobe 公 司开发的网页设计和开发软件，它提 供了可视化的设计和编辑工具，使开 发者能够快速创建和编辑网站和网页 。
电子商务网站制作实例
总结词
实现商品展示和在线交易
VS
详细描述
通过电子商务网站制作实例，学习者可以 学习如何实现商品展示和在线交易功能， 包括产品详情页设计、购物车系统开发等 ，为消费者提供便捷的购物体验。
学习心得和总结
总结词
提升技能和经验

kjkjkhjk 9
JSP与ASP的技术比较：
JSP和ASP从形式上非常相似，ASP程序员一眼就 能认出〈% %>以及〈%= %>。但是深入探究下 去会发现它们很多的差别，其中最主要的有以 下三点： 1）JSP的效率和安全性更高 2）JSP的组件（Component）方式更方便 3）JSP的适应平台更广
10
kjkjkhjk
Web网站服务器
Web服务器也称为WWW（World Wide Web） 服务器，是指驻留于因特网上某种类型计算机 的程序，主要功能是提供网上信息浏览服务。 当Web浏览器（客户端）连到服务器上并请求 文件时，服务器将处理该请求并将文件发送到 该浏览器上，附带的信息会告诉浏览器如何查 看该文件（即文件类型）。服务器使用HTTP （超文本传输协议）进行信息交流，这就是人 们常把它们称为HTTP服务器的原因。
kjkjkhjk
11
Web服务器在web页面处理中大致可分为三个 步骤：第一步，web浏览器向一个特定的服务 器发出Web页面请求;第二步，Web服务器接收 到web页面请求后，寻找所请求的web页面，并 将所请求的Web页面传送给Web浏览器;第三步， Web服务器接收到所请求的web页面，并将它 显示出来。
第十章
网站的开发与发布
kjkjkhjk
1
学习目标
1）web网站开发技术 2）web网站开发流程 3）域名服务
kjkjkhjk
2
10.1 web网站开发技术
静态网站和动态网站 web开发工具 Web网站编程语言 Web网站服务器
kjkjkhjk
3
静态网页的特点： 1）静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、等常见形式为后缀，而不含有“？”。 2）网页内容一经发布到网站服务器上，无论是否有用户 访问，每个静态网页的内容都是保存在网站服务器上 的，也就是说，静态网页是实实在在保存在服务器上 的文件，每个网页都是一个独立的文件。 3）静态网页的内容相对稳定，因此容易被搜索引擎检索。 4）静态网页没有数据库的支持，在网站制作和维护方面 工作量较大，因此当网站信息量很大时完全依靠静态 网页制作方式比较困难。

为文档应用模板
为已有的文档应用模板之前，首先应确保模板已定义了可编辑区域，否则在应用 模板时，Dreamweaver会弹出一个提示框，提示用户所应用的模板中没有任何可 编辑区域。
1．打开一个普通文档。 2．执行“修改”/“模板”/“应用模板到页”菜单命令，打开 “选择模板”对 话框。 3．在“站点”列表中选择要应用的模板所在的站点，然后在“模板”列表 中选择需要的模板。本例选择本章制作的模板navigator。 4．单击“选择模板”对话框底部的“当模板改变时更新页面”复选框。 5．单击“确定”按钮，弹出 “不一致的区域名称”对话框。提示用户此文 档中的某些区域在新模板中没有相应区域。
模板的制作方法与普通网页类似，不同之处在于模板制作完成后，还应定义可编 辑区域、重复区域等模板对象。
将网页保存为模板
将已编辑好的文档存储为模板，这样生成的模板中会带有现在文件中已编辑好 的内容，而且可以在该基础上对模板进行修改，使之满足设计需要。
执行“文件”/“另存为模板”菜单命令。 此时，文档的标题栏显示为<<模板>>XXXX.dwt，如图所示。表明该文档已不 是普通文档，而是一个模板文件。
将该文件在浏览器中预览，会发现该文档中无法键入文本或插入图像。这是因 为还没有为模板定义可编辑区域，所有的区域都是锁定的。
10.1.4 定义可编辑区域
可编辑区域用于在基于模板创建的HTML网页中改变页面内容，可以是文本、图像或其他 的媒体，如Flash动画或Java小程序。编辑完成之后，可以将该文档保存为独立的HTML文件。
第10章 模板库
本章重点
本章将介绍模板和库的基本知识及使用方法，内容包括：创建模板；定义模板的 可编辑区域、重复区域和可选区域；定义嵌套模板；应用模板建立网页；修改模板并 更新站点；库的创建及使用等。读者应该重点掌握模板的创建和使用；可编辑区域、 重复区域和可选区域区别和使用方法；库项目的建立和使用等内容。

为附加于文本，一个简单的方法是为文本添加一个空链接（在“链接”文本框中输 入javascript:;，或直接键入一个#），然后将行为附加于这个链接。
10.4 编辑行为
Dreamweaver预置的行为功能不仅很强大，而且很灵活。在附加了行为之后， 可以更改触发动作的事件、添加或删除动作以及更改动作的参数。修改行为的操作 步骤如下： 1．执行“窗口”/“行为”命令，打开“行为”面板。 2．选择一个附加了行为的对象。 3．在“行为”面板中双击要重新编辑的行为名称，然后在弹出的对话框中重新设 置动作的参数。
读者要注意的是，不同的页面元素定义了不同的事件，例如，在大多数浏览 器中，OnMouseOver和OnClick是与链接关联的事件，而OnLoad是与图像和文档 的body部分关联的事件。若要查看对于给定的页面元素及给定的浏览器支持哪些 事件，可以选中页面上的元素之后，单击“行为”面板上的“显示所有事件”按 钮，如图内置行为
改变属性 动态地改变某一个对象的属性值，例如AP元素的背景图像或背景色，
像的边框和样式。这些属性的具体效果由所使用的浏览器决定。
对象类型有如下几种：
DIV、SPAN：改变AP元素的属性。 IMG：改变一幅图像的属性。 FORM：改变表单的属性。 INPUT/CHEKBOX：改变复选框的属性。 INPUT/RADIO：改变单选按钮的属性。 INPUT/TEXT：改变单行文本输入框的属性。 INPUT/PASSWORD：改变口令输入框的属性。 TEXTAREA：改变多行文本输入框的属性。 SELECT：改变选择列表项的属性。
“行为”面板
10.3 附加行为到页面元素
行为被规定附属于用户页面上的某个特定的元素，可以是一个文本链接、一个 图像甚至<body>标识，但是不能将行为绑定到纯文本，诸如<p>和<span>等标签。