第10章-Dreamweaver-CS3基础知识
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
《网页制作Dreamweaver CS3》目录基础篇第一章网页制作基础知识和Dreamweaver 软件基础活动一：初识网页活动二：认识HTML活动三：制作“我的第一章网页”本章实验：制作“我的个人介绍”网站第二章站点的建立和管理活动一：为个人网站做准备活动二：规划自己的网站活动三：打造自己的个性化站点活动四：编辑我的站点本章实验：制作“个人空间”网站第三章新建文档和对象活动一：初识网页活动二：给网页加入文字和特殊字符活动三：插入列表和其他网页元素本章实验：制作“中国民俗文化”网站第四章表格处理和网页布局活动一：利用表格布局页面活动二：编辑单元格活动三：数据表格的制作本章实验：制作“世锦赛”网站第五章图像的插入和编辑活动一：为网页添加图像活动二：设置图像的属性活动三：在网页中插入图像对象活动四：使用编辑器编辑网页中的图像活动五：为站点打造网站相册本章实验：制作“七彩云南”旅游网站第六章创建超级链接活动一：用不用的方式链接网页活动二：给网页添加邮件链接和书签链接活动三：巧用无址链接和脚本链接活动四：管理站点链接资源本章实验：制作“庐山风景”网站提高篇第七章建立框架网页活动一：初识框架网页活动二：设置框架属性活动三：创建内嵌框架和无框架内容本章实验：制作“中职教育网”网站第八章插入多媒体元素活动一：在网页中插入Flash元素活动二：给网页添加其他多媒体元素活动三：在网页中添加视频和音效本章实验：制作“时尚服饰网”网站第九章建立表单活动一：初识表单活动二：验证表单的输入结果并设置接收结果的方式活动三：Spry构件的使用本章实验：制作“彩虹部落购物商城”网站第十章使用模板和库活动一：网页模板的使用活动二：库项目的使用本章实验：制作“驴友俱乐部”网站第十一章CSS样式表活动一：初识样式表活动二：CSS样式的使用活动三：使用CSS布局页面及样式表的载入本章实验：制作“爱美特电子科技”网站精通篇第十二章AP Div 的使用活动一：AP Div 的创建及基本操作活动二：表格和AP元素的相互转换活动三：AP元素的综合使用本章实验：制作“电影频道”网站第十三章行为活动一：初识行为活动二：行为综合使用一活动三：行为综合使用二本章实验：制作“茶文化”网站第十四章编辑源代码活动一：快速编辑源代码活动二：导入Word和Excel文档活动三：设置源代码参数选项以及整理源代码本章实验：制作“手机销售网”网站综合篇第十五章Fireworks 在网页中的使用活动一：设计网页版面活动二：网页中的GIF动画活动三：切片导出网页本章实验：设计制作“上海美食”网站第十六章Flash在网页中的使用活动一：制作首页标题动画活动二：制作网页中的动画活动三：制作Flash导航栏活动四：在网页中加入Flash本章实验：为“上海美食”网站制作Flash。
Dreamweaver-CS3教案设计
《网页制作基础》教案第1章基础知识（5课时）教学目标1．掌握HTML的基本知识及作用；2．掌握安装和配置IIS的方法；3．熟悉Dreamweaver CS3的工作界面；4．掌握创建和设置Dreamweaver CS3站点的方法。
教学重点1．HTML语言2．熟悉Dreamweaver CS3的工作界面3．创建本地站点教学难点HTML的基本知识教学方法任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。
学生上机操作完成实例与实训。
任务1 认识网页教学目标：1．理解掌握网页的概念2．HTML的概念3．掌握HTML的基本知识及作用教学重点：1．网页的实质2．HTML的基础知识教学难点：HTML标记教学方法：任务驱动法，讲练结合法教具准备：多媒体教学教学内容：第1课时一、网页1、网页的概念：网页是网站的基本组成元素。
网页文件的扩展名通常为.htm或.html。
一般是由HTML 语言编写的文本文件。
2、网页的实质网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。
二、HTML1、Html的中文含义Html是Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。
2、Html的概念它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。
3、网页文档的组成一个HTML文档通常分为文档头和文档主体两部分。
三、标记1、标记的格式在HTML中定义了许多标记，这些标记用来描述文档。
这些标记使用“<”和“>”括起来。
标记通常分为开始标记和结束标记。
其格式为：<标记名属性名=属性值>标记内容</标记名>注意：若一个标记有多个属性，属性和属性之间要用空格隔开。
示例：简单的网页文档<html><!—文档头部—><head><title>我的第一个网页</title></head><!—文档主体—><body bgcolor=blue text=red><h1>这是我的第一个网页<p>欢迎大家</body></html>第2课时2、常用标记<html>…</html> 标记一个HTML文档的开始和结束。
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
Dreamweaver CS3 详解
Dreamweaver CS3 简介Dreamweaver CS3是一款功能强大的可视化的网页编辑与管理软件。
利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写一行源代码。
Dreamweaver CS3 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。
用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
1 Dreamweaver CS3概述Dreamweaver CS3是由Adobe公司在并购Macromedia之后推出的最新版本，它是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。
在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。
将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时良好的插件体系，使Dreamweaver CS3可通过第三方插件进行补充。
另外，Dreamweaver CS3还为开发人员提供了动态语言支持与丰富的模板。
另外值得称道的是，Dreamweaver CS3不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。
Dreamweaver CS3在功能强大与易用性之间具有很好的平衡，使用Dreamweaver CS3可以有效地提高Web开发的工作效率。
2 Dreamweaver CS3的新增功能相对于以前的版本Dreamweaver CS3的功能主要在以下方面进行了增强：1. Ajax 的Spry 框架通过Adobe Dreamweaver CS3，可以使用Ajax 的Spry框架进行动态用户界面的可视化设计、开发和部署。
Ajax 的Spry 框架是一个面向Web 设计人员的JavaScript 库，用于构建向用户提供更丰富体验的网页。
Dreamweaver CS3
1．了解网站所要传达的讯息和品牌 2．了解网站的目标人群 3．配色过程中不要滥用颜色 4．阅读主体内容部分建议使用对比色 6．配色要有时效性
网站的框架与布局 大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash 型、变化型。在做设计的时候要抓住客户的需求，把握网站的定位做出合理的框 架布局。下面列出了一些在网站的框架与布局设计时应该注意的地方。
网站开发流程
收集资料和素材 定义站点及配置服务器 网页制作 测试与调试 发布和维护
网站开发注意事项
网站的风格(style)是指站点的整体形象给浏览者的综合感受。一个拥有自己独 特风格的网站，就会使网站浏览者愿意花更多的时间去品尝该站。 网站的形象设计与配色 一个好的形象设计，首先要有一个好的视觉效果。检验网站是否有一个好的形 象设计，下面就介绍一种最为简单的方法——感观判别法。下面将介绍一些网站 形象设计中配色的使用技巧：
Dreamweaver CS3
学习概述
本部分内容是设计网页的基础。了解一些 与Internet和网页设计相关的基础知识，是设计 网页必不可少的知识。虽然利用DW可以不用 编写一行代码就能设计出专业水准的网页，但 理解和掌握HTML语言对网页设计很有帮助， 对以后学习服务器端的编程语言也大有裨益。 因为本课程定位于静态网页设计，所以只对 HTML语言最常用的标签元素作简单的讲解。
1．分辨率是设计网页时必须考虑的问题 2．空间的合理利用也极为重要 3．合理的广告布局
HTML简介
作为一名Web开发人员，是不可避免的要接触和使用HTML语言。HTML语法 非常简单。它通过各种标记来表示，可以先来看一个建立简单网页的例子如： 1. 实例代码 在记事本中输入以下代码（从<html>开始到</html>结束）： <html> <head> <title> HTML基础 </title> </head> <body> 一个简单的网页 </body> </html> 2. 保存文件 注意要保存为htm类型文件。 3. 查看所创建的文件 在桌面上找到它双击。此时windows默认的IE浏览器打开了它
Dreamweaver+CS
3.2 定义页面属性
4．标题/编码属性
3.3 保存和显示文档
执行“文件”|“另存为”命令，打开“另存为” 对话框， 在“另存为”对话框中可以定义文档的名称， 也可以选择保存文档的类型。选择“保存类型” 选项，打开“保存类型”下拉列表，从中选择 需要保存的文档类型。 保存后的文档可以在浏览器中预览。执行“文 件”|“在浏览器中预览”命令，可以打开浏览 器选择下拉菜单，在下拉菜单中显示的是操作 系统中当前安装的浏览器。
2 管理站点
一般在制作网页之前，都要在本地的计算 机中创建本地的测试站点。当测试完成之 后，再传到Internet服务器上。在 Dreamweaver CS3中，可以方便地构建和管 理站点。
2.1 新建站点
在新建站点之前，首先要在磁盘中新建一 个站点文件。新建文件时可以直接在磁盘 中建立，也可以在文件面板中建立。
1.4 文档窗口
2．“代码”视图
1.4 文档窗口
3．“拆分”视图
1.5 属性面板
属性面板用来定义页面元素或内容的相应 属性。由于选择的元素或者内容不同，属 性面板中显示的属性也有所区别。下面是 是选择图像内容后，属性Dreamweaver CS3中，面板都整合到面板组中，通过单击 面板的标题可以显示和隐藏相应的面板。面板和面板组处 于Dreamweaver CS3工作界面的右侧。当面板关闭时，面 板组的显示效果如图所示，打开某个面板后的显示效果如 图所示。
1.3 插入栏
插入栏用来插入各种常用和布局对象。根 据选择的选项不同，在插入菜单中显示的 内容也有所区别。选择“常用”和“布局” 选项时，插入栏的显示效果如图11-4和图 所示。
1.4 文档窗口
文档窗口用来显示当前文档。在文档窗口中，可以使用三种方式显示 文档内容：分别是“设计”视图、“代码”视图、“拆分”视图。下 面分别进行介绍。 1．“设计”视图
PhotoshopCS3FlashCS3DreamweaverCS3商业网站开发从入门到精通
23.1.2 时间轴
l 4．复制、粘贴、移动、清除帧（或关键帧） l 在Flash CS3中复制、粘贴、移动、清除帧（或关键帧）
的方法如下所示。
l 打开或者新建文件。
l 选择所要复制的帧。
l 执行下列操作之一，复制帧（或关键帧）。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
l 打开或者新建文档。
l 执行“插入”|“新建元件”命令。
l 打开“创建新元件”对话框，选择“影片剪辑”选项， 并定义新元件的名称为“影片剪辑元件1”。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
23.2.5 编辑和删除元件
l 创建各种元件之后，如果要修改元件的内容，或者某些 元件将不会再被使用时，就要编辑和删除已建立的元件， 编辑和删除元件的操作如下所示。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
23.2.8 创建补间形状
l 使用补间形状可以制作对象变形的动画，例如由一种形 状变为另一种形状，或由一种颜色变为另一种颜色等， 创建补间形状的操作如下所示。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
l 单击图层（或者图层文件夹）名称，选择图层（或者图 层文件夹）。
l 执行“编辑”|“时间轴”|“复制帧”命令，复制图层（或 者图层文件夹）内容。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
23.1.3 图层
l 5．移动图层或文件夹
l 在制作Flash文档时，有时会更改图层（或者图层文件 夹）的顺序，具体方法如下所示。
CS3基本概述
Dreamweaver CS3网页设计商业应用篇1.1 Dreamweaver CS3基本概述Dreamweaver CS3是Adobe公司最新推出的网页制作软件版本，也是网络浏览文件的一个开发工具，它具有强大的功能和简便的操作平台，是一款所见即所得的网页制作软件。
该软件集网页制作、网站管理、程序开发于一身，可以帮助用户在同一个软件中完成所有网站建设的相关工作。
Dreamweaver是由美国著名的软件开发厂商Adobe公司推出的一套专业可视化网页开发工具。
它与该公司的另外两个网页制作软件Flash、Fireworks并称“DreamTeam”，在国内被人们称做“网页三剑客”。
其中Flash用来生成矢量动画，Fireworks完成Web图像制作。
当然，在最新的Adobe CS3软件系统中，Photoshop取代了Fireworks成为最主要的Web图像制作工具，对于比较熟悉Photoshop 的用户来说，也可以把它们称为“新网页三剑客”。
因此，在Adobe CS3软件中，Adobe公司将Photoshop作为首选集成图像编辑软件，而Dreamweaver则是进行各类素材的集成和发布。
由于Dreamweaver支持多种浏览器，可跨平台开发网页，实现了可视化动态HTML编程，方便地集成了Flash、ShockWave、ActiveX等众多外部媒体，加上使用简便，可扩展性强，到目前为止，全世界范围内超过60%的专业网页设计师都在选用Dreamweaver作为网页开发工具，编织他们的梦想。
Dreamweaver支持跨浏览器开发，能够做出既适合Internet Explorer又适合Netscape浏览的精美页面来。
另外Dreamweaver强大的编辑功能和简洁实用的用户界面也受众多用户所钟爱，独特而富有亲和力的体贴设计理念让你能够方便地实现对页面创作的所有灵感。
网页制作人员可以利用Dreamweaver操作环境面板提供的层叠样式表（CSS）格式化文本、利用AP Div定位网页元素、利用时间轴和行为实现网页的动画效果、利用对象库（Library）实现代码的重复使用，甚至可以用Dreamweaver来进行本地和远程站点的管理和异地网页编辑。
网页制作与网站设计_03Dreamweaver CS3 基础
•
如果要打开网页文件，可以选择菜单“文件”|“打开”命令，在 “打开”对话框中选择需要打开的网页文件
Dreamweaver CS3基础
任务五描述：建立站点 站点是建立和管理网站文件的一种方式和方法，因此，建立站点 是创建网站的一个重要前提之一。Dreamweaver CS3是一个站点创 建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的 站点。 解决方案 在使用Dreamweaver CS3制作网页前，最好先定义一个新站点， 这是为了更好地利用站点对文件进行管理，尽可能减少错误，如路径出 错、链接出错等。我们可以使用【站点定义向导】按照提示快速创建本 地站点
Dreamweaver CS3基础
知识讲解及操作步骤 1. Dreamweaver特点： 2. 灵活编写网页的特点
3. 可视化编辑界面
4. 强大的Web站点管理功能 • • • • 业界领先的网页设计工具 集成的工作流 整的CSS支持 轻松的Spry
Dreamweaver CS3基础
任务二描述：了解Dreamweaver CS3创建Web站点的工作流程 经过对Dreamweaver CS3特点、新特性的了解，小刚已经对 Dreamweaver CS3有了基本的认识，下面我们来学习如何利用 Dreamweaver CS3创建Web站点的流程。
DreamweaverCS3网页设计培训教程电子教案01
1.2.1 知识讲解
在学习Dreamweaver CS3之前应先安装 Dreamweaver CS3，安装方法与其他应 用程序的安装基本相同，这里不再赘述。
Dreamweaver CS3网页设计培训教程
1.2.1 知识讲解
1. Dreamweaver CS3的工作界面 2. Dreamweaver CS3的基本设置
Dreamweaver CS3网页设计培训教程
本课导读
网页是构成网络的主体，是互联网信息的 主要载体。在学习网页制作前，需要了解 网页制作的相关知识，以便在以后的学习 及工作中运用。另外，我们还需要认识网 页制作工具Dreamweaver CS3的工作界 面、基本设置以及一些简单的应用，如启 动与退出Dreamweaver CS3、新建、保 存、预览及打开网页文档等。
Dreamweaver CS3网页设计培训教程
1.3 上机练习
1.3.1 用“记事本”创建“Good
morning. html”网页
1.3.2 用Dreamweaver CS3制作
“Good morning2.html”网页
Dreamweaver CS3网页设计培训教程
1.3.1 用“记事本”创建“Good morning. html”网页
Dreamweaver CS3网页设计培训教程
2.网页常见部分的称谓及规范
通常情况下，网页的基本组成部分有 Logo、Banner、导航条、超链接和版权 信息等 。
Dreamweaver CS3网页设计培训教程
3.网页制作的流程
制作网页不像编辑文档那样轻松，需要遵 循一定的流程：收集资料和素材、规划站 点、制作网页、测试站点、发布站点、更 新和维护站点等。
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基础知识
第1章Dreamweaver的基础知识本章内容•了解D r e a m w e a v e r的基本原理•Dreamweaver是如何设计的•在D r e a m w e a v e r中使用传统的H T M L命令•了解下一代特性•自动化的We b页创作过程•用D r e a m w e a v e r维护We b站点D r e a m w e a v e r是M a c r o m e d i a公司推出的一套专业的We b站点开发程序。
D r e a m w e a v e r拥有诸多优点，例如，它是第一个利用最新一代浏览器性能的We b开发程序，并且非常便于开发者利用诸如层叠样式单(Cascading Style Sheets)和动态H T M L等先进特性。
事实上，D r e a m w e a v e r是We b开发者为自已量身定做的设计工具。
从设计的依据到开发者使用的专业程度看，D r e a m w e a v e r能够加速站点建设，并使站点的维护简单有效。
通过本章的讲述，你可以了解到这套程序的基本原理，充分感受 D r e a m w e a v e r是如何把传统的H T M L和前沿技术结合起来的。
当然，你还可以学习到一些 D r e a m w e a v e r的先进特性并用于自己的We b站点管理。
1.1 Dreamweaver的真实世界D r e a m w e a v e r是一套与现实世界紧密相关的程序。
举例来说， D r e a m w e a v e r认识到不同种类的浏览器之间存在着不兼容的命令，就通过开发交叉浏览器可兼容代码来解决这个问题。
D r e a m w e a v e r甚至包括了不同浏览器的H T M L验证功能，这样你就可以看到现有的或新的代码如何工作于特定的浏览器。
Dreamweaver 3把现实世界的概念进一步扩展到工作区中。
诸如D r e a m模板之类的附件使得大型We b站点的创建和维护更加简洁有效。
项目二 Dreamweaver CS3简介
2.1 Dreamweaver CS3的界面组成
2.1.1选择工作界面 可以选择【设计者】和【代码编写者】 两种工作界面中的任意一种。
2.1.1 选择工作界面
设计者界面
2.1.1 选择工作界面
代码编写者界面
2.1.2 Dreamweaver CS3界面组成
2.2 新建文档
新建空白文档有三种方法： 选择【文件】｜【新建】命令，如图2-17 所示。 利用键盘组合键【Ctrl+N】键，新建文档。 打开【新建文档】对话框，在对话框左侧 的列表框中选择【空白页】选项，在【页 面类型】列表框中选择HTML选项，在【布 局】列表框中选择【无】选项，单击【创 建】按钮，即可创建一个空白网页文档。
2.5 关闭文档
关闭文档通常有以下四种方法 ： 单击【文件】菜单，选择【关闭】命令。 右击【文档窗口】的网页标签，选择菜单 中的【关闭】命令。 利用键盘组合键【Ctrl+W】键。 单击【文档窗口】上的关闭按钮。
2.6 项目训练
打开Dreamweaver CS3软件，新建一个 （空白页）网页文档，输入文字 “Hello,world!”，分别点击“文档”工具栏 中的按钮，观察【代码】、【拆分】和 【设计】三种视图模式下的不同效果，然 后将该文档保存命名为index.html，单击 “文档”工具栏中的“在浏览器中预览/调 试”按钮在浏览器中查看效果，最后关闭。
2.3 打开现有文档
打开现有文档，选择【文件】|【打开】命令，弹出 【打开】对话框，如下图所示，选择要打开的现有文档， 单击【打开】按钮即可打开文档。
2.4 保存文档
保存文档通常有以下三种方法： 单击菜单【文件】，选择【保存】命令。 右击【文档窗口】的网页标签，选择菜单 中的【保存】命令。 利用键盘组合键【Ctrl+S】键。
Dreamweaver CS3入门知识盘点
Dreamweaver CS3入门知识盘点一.选择题1.保存网页文档，可以使用快捷键（）A.Ctrl+AB.Ctrl+SC.Ctrl+OD.Ctrl+N2.定义站点时，存放网页的默认文件夹为（）A.C盘根目录B.D盘根目录C.我的文档D.没有默认文件夹，必须由用户指定3.键盘上的（）键用于快速浏览网页。
A.F2B.F8C.F10D.F124.在文本的【属性】面板中，不能设置（）A.背景色B.超链接在目录窗口打开的方式C.段落的缩进D.文本的无序列表和有序列表5.特殊符号包括（）A.版权B.注册商标C.商标D.破折线6.在Dreamweaver CS3中可以对表格进行（）操作。
A.插入行B.删除列C.合并单元格D.拆分单元格7.（）是表格的基本组成部分A.行B.图像C.单元格D.列8.利用表格制作彩色水平线时，下列操作中不需要进行的是（）A.在【代码】视图下将单元格中的“ ；”去掉B.选中相应单元格，在单元格【属性】面板的【高】文本框中输入2C.选中相应单元格，在单元格【属性】面板的【高】文本框中输入0D.设置单元格背景色9.在Dreamweaver CS3中，下面关于拆分单元格的说法错误的是（）A.用鼠标将鼠标指针定位于要拆分的单元格中，在【属性】面板中单击按钮B.用鼠标将鼠标指针定位于要拆分的单元格中，在【拆分单元格】对话框中选择“行”，表示水平拆分单元格。
C.用鼠标将鼠标指针定位于要拆分的单元格中，在【拆分单元格】对话框中选择“列”，表示垂直拆分单元格。
D.拆分单元格只能把一个单元格拆分成两个。
10.下面属于框架集属性的是（）A.行/列B.源文件C.边界高度和边界宽度D.不能调整大小二.填空题1.框架主要包括和两部分。
2.应用框架结构的页面被划分为若干个区域，每一个区域都是一个。
3.要使消失的框架边框可见，可在菜单栏选择【】>【】>【】命令4.在Dreamweaver CS3中，HTML标签是。
dreamweavercs3学习笔记一
Dreamweaver学习笔记一一、要紧内容一、dreamweavercs3概述二、练习用dreamweaver中的table（表格）方式制作百度主页。
3、学习最终功效，看到一个网站后能仿照出来。
二、网页制作概述一、网页制作所具有的条件软件：photoshop、dreamweaver、flash、firework等技术：HTML、DHTML、CSS+DIV、JS等美术功底等二、dreamweaver要紧功能：设计网页的布局、结构、框架等3、网页设计的进展对照：广西大学、北京大学、清华大学等官方网站可发觉，广西大学利用的是最先的表格（tr、td）排版网页的方式而且网站主页整个的排版的内容相当的多，而北京大学、清华大学通过更新后利用目前新型的DIV+CSS编码排版，制作主页上并无过量的把内容发在主页上，显得美观、简练。
因此，网页主页的简练、大气是目前网页制作的主流方向。
4、小贴士打开网站-菜单栏查看-代码源。
即可查看网站的代码编写方式。
三、制作仿真百度主页一、成立站点（如何生成文件夹）步骤：打开dreamweaver软件菜单栏/站点-新建站点-站点概念*注意事项：在整个建站进程中只有此处能是用中文外其他任何位置不可用中文概念。
在弹出的对话框的“您打算为您的站点起什么名字”输入“仿真百度”-下一步“否”-下一步：寄存位置不许诺显现中文。
-下一步：途径同上-下一步-完成。
二、成立分类文件夹（方便文件的治理和往后功效的上传）*注意事项：整个建文件夹的工程中不可显现中文成立分类文件夹的方式：A、能够直接在保留位置的根目录下直接成立分类文件夹B、在软件界面右边“本地文件”的根目录下右键单击-新建文件夹Image（图片）、flash（动画）、date（数据）、js（特效）等文件夹，文件夹及文件可增加亦可删除。
如以下图：3、成立主页文件*注意事项：主页名称要符合要求，一样用：、、。
其他页面名称可随意起，可用英文或拼音，但不可用中文。
网页制作基础教程(补充)(Dreamweaver_CS3
4．超链接
5．导航栏 6．表格 7．表单 8．其他常见元素
2、浏览者，除了色 彩的搭配、文字的变化、图片的处理等因素外， 还有一个非常重要的因素—网页的布局。
2、网页的设计
◇网页布局的基本概念
对于初学者，最好应先了解网页布局的基本概念。
◇页面尺寸
分辨率为800×600：页面的显示尺寸为：780×428个象素； 分辨率为1024×768：页面的显示尺寸为：1007×600个象素。
2、网页的设计
◇配色原则
3．色彩的心理感觉 自然界的各种色彩会在人的心中留下不同 的印象，产生不同的心理感觉， 例如：红色是一种激奋的色彩，具有刺激 效果，能使人产生冲动、愤怒、热情、活力的 感觉；
2、网页的设计
◇ 配色原则
4．色彩的分类 按照色彩对人们心理的影响可以进行以下分类。
暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、 热情。
1、Internet概述
通过Internet，用户可以与接入Internet 的任何一台计算机进行交流，如发邮件、聊天、 通话等。
在这一节中，主要介绍Internet的工作原 理、Internet发展简史及其提供的主要服务等 基础知识，让用户对Internet有个大致的了解。
1、Internet概述
◇ Internet提供的主要服务
1．电子邮件 2．文件的下载和上传 3．信息查询
4．文件传输
5．网上聊天 6．BBS电子公告栏
7．网上游戏
8．个人主页空间 9．电子商务
1、Internet概述
◇IP地址和域名 1、IP地址
在Internet上，每一个节点都依靠唯一的IP地址 互相区分和相互联系。IP地址共占用32位，一般以4个 十进制数字表示，每个数字之间用小圆点（.）隔开， 例如，“201.112.10.105”，这种记录方法称为 “点—数”记号法。通常用IP地址标识一个网络和与 网络连接的一台主机。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第10章Dreamweaver CS3基础知识课前导读Dreamweaver是绝大多数网页设计者使用的网页编辑软件。
Dreamweaver具有功能强大，操作性强的特点。
本章我们就学习使用Dreamweaver软件。
本章重点在本章我们将重点学习：☐Dreamweaver CS3的常用功能☐Dreamweaver CS3的使用10.1 Dreamweaver CS3简介Dreamweaver是Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver、Flash以及之后推出的针对专业网页图像设计的Fireworks，三者被称为“网页三剑客”，几乎是每个网页设计者必须学习使用的工具套件。
Dreamweaver总的特点是：1．最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于很多的常用操作都只要一个简单步骤便可完成。
Dremweaver只要单击便可自动开启Firework或Photoshop来进行编辑与设定图像文档的最佳化。
2．网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。
改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。
使用提示文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3．无可比拟的控制能力Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧(frames)和表格的制作速度快的惊人。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。
使用Dreamweaver在设计动态网页时，不需要透过浏览器就能预览网页。
建立网页外观的模板，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。
Macromedia公司于2005年被Adobe公司收购，收购后负责Dreamweaver开发的项目组又推出了Dreamweaver的最新版本Dreamweaver CS3 （以下简称DW CS3），DW CS3包含有一个崭新、简洁、高效的界面，且性能也得到了改进。
此外，还包含了众多新增的功能，改善了软件的易用性，其中最为主要的是增加了对Ajax技术的支持，推出了Spry 框架。
10.2 Dreamweaver CS3的新增功能由于Ajax技术的盛行，各种Ajax框架如雨后春笋一样被开发出来，Dreamweaver CS3也推出了自己的框架——Spry。
Dreamweaver CS3的新增功能主要以Spry框架为基础。
（1）适合于Ajax的Spry框架使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面。
在减少页面刷新的同时, 增加交互性、速度和可用性。
（2）Spry 数据使用XML从RSS服务或数据库将数据集成到Web页中。
集成的数据很容易进行排序和过滤。
（3）Spry窗口组件借助来自适合于Ajax的Spry框架的窗口组件, 轻松地将常见界面组件(如列表、表格、选项卡、表单验证和可重复区域) 添加到Web页中。
（4）Spry 效果借助适合于Ajax的Spry效果，轻松地向页面元素添加视觉过渡，以使它们扩大选取、收缩、渐隐、高光等等。
（5）Adobe Photoshop和Fireworks集成直接从Adobe Photoshop CS3或Fireworks CS3复制和粘贴到Dreamweaver CS3中以利用来自您的已完成项目中的原型的资源。
（6）浏览器兼容性检查借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。
生成识别各种浏览器中与CSS相关的问题的报告，而不需要启动浏览器。
（7）CSS Advisor网站借助全新的CSS Advisor网站（具有丰富的用户提供的解决方案和见解的一个在线社区），查找浏览器特定CSS问题的快速解决方案。
（8）CSS 布局借助全新的CSS布局，将CSS轻松合并到您的项目中。
在每个模板中都有大量的注释解释布局，这样初级和中级设计人员可以快速学会。
可以为您的项目自定义每个模板。
（9）CSS 管理轻松移动CSS代码：从行中到标题，从标题到外部表，从文档到文档，或在外部表之间。
清除较旧页面中的现有CSS从未像现在这样容易。
（10）Adobe Device Central CS3使用Adobe Device Central，设计、预览和测试移动设备内容。
以上的新增特性对于初学者可能还不能使用得上，我们在这里不进行详细说明，相信随着对网页设计方方面面技术的学习，最终会感受到DW CS3带给我们的优秀体验。
10.3 Dreamweaver CS3的工作界面DW CS3界面风格与以往版本没有太大变化，这使得使用过以往版本的用户可以毫无障碍地接受熟悉新版本的使用。
本节对DW CS3工作界面进行介绍，通过对界面各个部分的介绍，初学者会对DW软件的使用有大致的了解。
DW CS3工作界面如图10-1：图10-1 Dreamweaver CS3界面我们大致把其界面直观地划分为9个部分，以下我们将对这9个部分结合图例逐一进行详细说明，对这9个部分具体的功能掌握后，详细读者就已经掌握了该软件的使用。
10.3.1 文档窗口文档窗口有三种视图状态，分别是：代码、拆分和设计。
在文档工具栏部分有三个按钮，如图10-2，可以快速地切换三种视图。
图10-2 视图切换按钮代码视图状态下，文档窗口显示网页的代码，如图10-1中所示。
设计视图状态下，文档窗口显示网页的外观，即我们所说的“所见即所得”的编辑方式。
拆分视图状态下，文档窗口被拆分成上下两个窗口，两个窗口分别是代码视图状态和设计视图状态，而且在这种状态下，两个窗口是关联的，无论是你在代码窗口选定代码或是在设计窗口选定元素，另一个窗口都会定位到相应的位置。
10.3.2状态栏状态栏提示当前创建的文档的有关信息，如图10-3所示。
首先左侧显示当前编辑的内容所属的节点。
右侧提供的选取工具、手型工具、缩放工具是在设计视图下的快捷按钮，作用分别是选取页面元素，移动页面以方便浏览，放大或缩小页面的显示比例。
以图10-3所示状态栏为例，“100%”表示当前的显示比例，“524×159”表示当前文档窗口中页面显示部分的宽度和高度，“1K / 1秒”表示当前页面文件的大小，以及浏览时页面下载所需的时间（参照的下载速度可以自行设定）。
图10-3 状态栏10.3.3 插入工具栏插入工具栏提供的是部分操作或功能的快捷按钮，这些功能或操作是在编辑网页中频繁使用的，非常方便。
下面我们给出的图像展示了常用、布局、表单和文本四个部分，这四个部分的功能对于编写静态页面是最为常用的。
常用部分包含了在页面中插入超链接、图像、表格、锚标记、注释、脚本、日期等等操作的快捷按钮。
图10-4 插入工具栏（常用）布局部分提供了插入<div>元素、框架、以及借助Spry框架实现的菜单、选项卡面板等操作的快捷按钮。
图10-5 插入工具栏（布局）表单部分提供了插入表单标记及各个控件的快捷按钮。
此外提供了借助Spry框架实现的部分控件输入值验证的功能按钮。
图10-6 插入工具栏（表单）文字部分提供了插入特殊符号文本的快捷按钮。
如果不使用这些按钮我们就要在代码中输入相应的字符实体来实现。
图10-7 插入工具栏（文本）10.3.4 文档工具栏文档工具栏上有我们前面提到的文档视图切换按钮，同时还有新建、打开、保存、剪切、复制、粘贴、页面预览、上传、根据DTD声明验证HTML标记等快捷按钮。
此外DW CS3版本为文档工具栏增加了部分按钮，主要就是对不同媒体类型的支持。
我们前面学习过定义CSS样式表可以针对不同的媒体类型，比如说计算机、投影仪、手持设备等。
文档工具栏提供了不同媒体类型的切换按钮，以便根据你的样式表显示相应媒体下的效果。
图10-8 文档工具栏10.3.5 属性面板属性面板用于对网页中元素属性的设置，属性面板中的属性项动态关联至鼠标选定的网页元素。
如图，该图分别展示的是网页中文本的属性页和图像元素的属性页。
图10-9 属性面板（文本属性）图10-10 属性面板（图像属性）10.3.6 结果面板结果面板用于显示几种常用操作的操作结果，如图10-11。
图10-11 结果面板以下我们详细介绍结果面板中较为常用的几种功能：（1）搜索：DW提供的搜索十分强大。
如图，DW搜索的范围可以是鼠标选定的一段文字，当前文档，当前打开的几个文档，某个文件夹下的所有文档，甚至是整个站点的文档。
而且查找的内容可以是源代码，可以是文本，可以是某个标记。
图10-12 查找和替换功能（2）参考：参考部分准备了十余本参考书，大部分是O’REILL Y公司出版的有关Web 技术方面的手册，涉及HTML、JavaScript、ASP、PHP、JSP等。
对于英文基础比较好的学习者有很大的帮助。
（3）验证：我们知道HTML规范有着不同版本，我们编写网页时规范的做法是在第一行便声明页面代码遵循哪一个的HTML规范。
验证部分就是根据你的声明或在没有声明的情况下根据默认设置验证你的页面是否符合规范。
如果不符合规范则会在结果面板区域列示网页中不符合规范的标记或属性。
这对于我们编写符合W3C标准的网页十分有帮助。
（4）浏览器兼容性检查：近似与验证功能，预先设定所要编写的网页适合哪些浏览器类型及版本，通过此功能检查网页中使用的标记在这些浏览器中是否能够正常显示。
（5）链接检查器：检查选定的文档中的链接是否有效，无效链接将显示在结果面板区域。
10.3.7 文件面板文件面板（如图10-13）可以管理当前站点的文件和文件夹，无论它们是本地站点还是在远程服务器上。
文件面板还可以访问本地磁盘上的全部文件，类似于Windows 资源管理器。