第5章 熟悉Dreamweaver CS6的工作环境
- 格式：ppt
- 大小：2.35 MB
- 文档页数：30
下载文档原格式
合集下载
Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件第5章 图像和多媒体的使用
5.6.1
插入Shockwave影片
Shockwave多媒体格式是一种用于在Web上进行 媒体交互的标准，它采用压缩的格式，可以使用 Macromedia Director所创建的媒体软件快速下 载，并能够在大多数浏览器中播放。
5.6.2
插入Java小应用程序
Java是一种允许开发并可以嵌入Web页面的编程 语言。Java Applet是在Java的基础上演变而成的 应用程序，它可以嵌入到网页中用来执行一定的 任务。
在网页制作中，还有一个很重要的元素，那就是图 像。正是由于图像的存在，才使得网页内容变得丰 富多彩。
5.2.1
在网页中插入图像
在网页中插入图像的方法非常简单，具体操作步骤 如下。
5.2.2
设置图像属性
插入图像后，如果图 像的大小和位置并不 合适，还需要对图像 的属性进行具体的调 整，如大小、位置和 对齐方式等。
5.2.3
裁剪图像
Dreamweaver CS6中提供了直接在文档中裁剪图 像的功能，不再需要在其他图像编辑软件中进行操 作。
5.2.4
调整图像的亮度和对比度
调整图像的亮度和对比度的具体操作步骤如下。
5.2.5
锐化图像
锐化图像的具体操作步骤如下。
5.3
插入其他网页图像
下面讲述在网页中其他图像的使用，如设置背景 图像，插入鼠标经过图像。
5.3.1
背景图像
在网页中，可以把图像设置为网页的背景，这个 图像就是背景图。
5.3.2
创建鼠标经过图像
鼠标经过图像就是当鼠标经过图像时，原图像会 变成另外一张图像。
【设计】中文版DreamweaverCS6网页设计教程IT168文库
【关键字】设计第1章Dreamweaver CS6简介Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。
利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。
Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。
用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
本章主要内容●Dreamweaver CS6的新增功能。
●Dreamweaver CS6的安装、删除和启动。
●Dreamweaver CS6的工作界面。
●Dreamweaver CS6的一般操作。
本章重点●Dreamweaver CS6常用面板的使用方法。
●Dreamweaver CS6的文件操作。
1.1 Dreamweaver CS6概述Dreamweaver CS6 是世界顶级厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动的软件。
在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。
由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。
其成熟的代码编辑工具更适用于Web开发高级人员的创作。
CS6新版本使用了版面创建页面，在发布前可使用多预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。
“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。
1.2 Dreamweaver CS6的新增功能相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。
1. 可响应的自适应网格版面使用响应迅速的CSS 版面，可以创建跨平台和跨的兼容。
利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。
网页设计与制作Dreamweaver CS6标准教-ppt课件-05
创建锚点链接的步骤如下。 1．创建锚点 2．链接到锚点
网站链接设置好后，Dreamweaver还提供 了自动更新链接和链接检查功能，以便对网 站内的链接进行管理。
5.6.1练习案例-百适易得商城 5.6.2自动更新链接 5.6.3链接检查 5.6.4修复链接
案例学习目标：学习网站的链接管理。 案例知识要点：使用菜单【窗口】|【结果】| 【链接检查器】，打开【链接检查器】面板管 理网站链接。 素材所在位置：光盘/案例素材/ch05/课堂案 例-百事易得商城。 案例效果如图5-58所示。
案例练习目标：练习创建锚点链接。 案例操作要点： 1．在网页scie.html中的文字“鸟类”、“昆虫类” 和“植物类”前面，分别插入锚点bird、insect、 plant；在页面底部“快速导航”区域内，分别为“鸟 类”、“昆虫类”和“植物类”建立锚点链接指向锚 点bird、insect、plant。 2．在网页contact.html中的文字“联系我们”前插入 锚点us，在网页scie.html底部“快速导航”区域内， 为文字“联系我们”建立指向us的锚点链接。 3．在网页contact.html底部“快速导航”区域内，分 别为“鸟类”、“昆虫类”和“植物类”建立指向锚 点bird、insect、plant的锚点链接。 素材所在位置：光盘/案例素材/ch05/练习案例-生物 科普网，效果如图5-78所示。
源端点可以是文本按钮图像等对象目标端点可以是同一页面的不同位置也可以是一个其他页面一幅图像一个文件或一段程序511按超链接端点分类512按超链接路径分类按照源端点来划分超级链接可以分为文本超链接和非文本超链接两种
《网设计课件：AdobeDreamweaverCS6基础教程》
《网设计课件：Adobe Dreamweaver CS6基础教 程》
想要成为一名出色的网页设计师吗？这份课件将带领你了解Dreamweaver CS6 的基本知识和技能，让你轻松入门网页设计。
了解Dreamweaver CS6
掌握Dreamweaver CS6的基本概念和功能。学习如何创建和管理网页项目，以 及如何使用Dreamweaver的多种工具。
图像和媒体
学习如何在网页中插入图像和媒体文件，并掌握调整图像大小、添加图像属性和优化网页加载速度的技巧。
表格和表单
掌握使用Dreamweaver创建和编辑表格，以及制作表单并进行表单验证的方法。
CSS样式和布局
学习如何使用CSS样式和布局来设计漂亮和响应式的网页，以吸引用户并提升 用户体验。
Байду номын сангаас
界面和工具导览
熟悉Dreamweaver CS6的用户界面和各种工具，并理解它们的作用和用法，提 高你的工作效率。
基本网页结构
学习创建基本网页结构的步骤，包括HTML标签和属性的使用，以及如何组织 和布局网页内容。
文本和超链接
了解如何在网页中添加文本内容和超链接，并学习使用CSS样式来美化文本和 超链接的外观。
想要成为一名出色的网页设计师吗？这份课件将带领你了解Dreamweaver CS6 的基本知识和技能，让你轻松入门网页设计。
了解Dreamweaver CS6
掌握Dreamweaver CS6的基本概念和功能。学习如何创建和管理网页项目，以 及如何使用Dreamweaver的多种工具。
图像和媒体
学习如何在网页中插入图像和媒体文件，并掌握调整图像大小、添加图像属性和优化网页加载速度的技巧。
表格和表单
掌握使用Dreamweaver创建和编辑表格，以及制作表单并进行表单验证的方法。
CSS样式和布局
学习如何使用CSS样式和布局来设计漂亮和响应式的网页，以吸引用户并提升 用户体验。
Байду номын сангаас
界面和工具导览
熟悉Dreamweaver CS6的用户界面和各种工具，并理解它们的作用和用法，提 高你的工作效率。
基本网页结构
学习创建基本网页结构的步骤，包括HTML标签和属性的使用，以及如何组织 和布局网页内容。
文本和超链接
了解如何在网页中添加文本内容和超链接，并学习使用CSS样式来美化文本和 超链接的外观。
第一章 熟悉Dreamweaver+CS6的工作环境
H. W3C 验证
L. 实时视图选项
3 网站规划
网站结构
北京桑德环保集团网站首页
网站结构
我是谁
我有什么优势
我能提供的售后保障
ICP备案
□ 站点卫士
我是干什么的
怎么联系我
(内容管理系 统)
(资讯管理系 统)
(招聘管理系统) (智能地图系 (广告管理系
统)
统)
(论坛管理系 (会员信息发
统)
布)
有关的普通按钮和选项。
A. 显示代码视图
I. 检查浏览器兼容性
B. 显示代码视图和设计视图
J. 可视化助理
C. 显示设计视图
K. 刷新设计视图
D. 将设计视图切换到实时视图 L. 文档标题
E. 多屏幕预览
M. 实时代码视图
F. 在浏览器中预览/ 调试
N. 检查模式
G. 文件管理
O. 浏览器导航
(商品管理系 (网上调查系 (下载中心)
统)
统)
(留言管理系统)
公司简介 领导致辞 企业文化 组织结构 公司荣誉 联系我们
18
2.5应用程序工具栏
在Adobe Dreamweaver CS6 的窗口标题栏上整合了5 个网 页制作中最常用的命令，与CS5 不同的是，在Adobe CS6 系列中统一去除CS Live 服务。
2.6 文档工具栏
文档工具栏包含了一些与查看文档、在本地和远程站点间传输文档以及 调试JavaScript的代码
Dreamweaver CS6网页设计与网站建设
ቤተ መጻሕፍቲ ባይዱ
第一章 熟悉Dreamweaver CS6的工作环境
本章导读: 目前使用最广泛的就是Dreamweaver。Dreamweaver CS6用于对站点、页面和应用程序进行设计、编码和开 发，它不仅继承了前几个版本的出色功能，还在界面整 合和易用性方面更加贴近用户。
中文版DreamweaverCS6网页制作实用教程第五章使用表格布局网页
(1) 单击【表格】按钮
(2)【表格】对话框
图 5-4 打开【表格】对话框
【表格】对话框中比较重要的选项功能如下。
-93-
中文版 Dreamweaver CS6 网页制作实用教程
【行数】文本框：可以在文本框中输入表格的行数。 【列数】文本框：可以在文本框中输入表格的列数。 【表格宽度】文本框：可以在文本框中输入表格的宽度，在右边的下拉列表中可以选 择度量单位，包括【百分比】和【像素】两个选项。 【边框粗细】文本框：可以在文本框中输入表格边框的粗细。 【单元格边距】文本框：可以在文本框中输入单元格中的内容与单元格边框之间的距 离值。 【单元格间距】文本框：可以在文本框中输入单元格与单元格之间的距离值。
5 .2 在 Dreamweaver 中使用表格
在 Dreamweaver 中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便 地进行查看、修改或分析。表格不仅可以为网页页面进行宏观布局，还能够使页面中的文本、 图像等元素更有条理。在网页中插入表格后，还可以在表格中插入嵌套表格。
5 .2.1 在网页文档中插入表格
(1) 打开表格
图 5-5 插入嵌套表格
(2) 嵌套表格
5 .2.2 选择表格与单元格
选择表格是对表格进行编辑操作的前提。在 Dreamweaver 中，用户可以一次选择整个表、 行或列，也可以选择连续的单元格。
1. 选择整个表格 在 Dreamweaver 中，要选择整个表格对象，用户可以使用以下几种方法：
5 .1.1 表格简介
表格是用于在 HTML 页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一 行或多行组成，每行又由一个或多个单元格组成。
当选定栏表格或表格中有插入点时，Dreamweaver 将显示表格宽度和每个表格列的列宽，
Dreamweaver CS6-第5章使用表格课件
1．导入Excel文档中的表格数据 2．导入Word文档中的内容 3．将网页中的表格导入到其他网页或Word文档中
5.2.3 排序表格
日常工作中，常常需要对无序的表格内容进行排序，以便浏览者可以 快速找到所需的数据。表格排序功能可以为网站设计者解决这一难题。
将插入点放到要排序的表格中，然后选择“命令 > 排序表格”命令， 弹出“排序表格”对话框。根据需要设置相应选项，单击“应用”或“确定” 按钮完成设置。
5.2 网页中的数据表格
课堂案例——典藏博物馆网页 导入和导出表格的数据 排序表格
5.2.1 课堂案例—典藏博物馆网页
使用“导入表格式数据”命令，导入外部表格数据；使用“排序表格” 命令，将表格的数据排序。
效果图
5.2.2 导入和导出表格的数据
有时需要将Word文档中的内容或Excel文档中的表格数据导入到网 页中进行发布，或将网页中的表格数据导出到Word文档或Excel文档中进 行编辑，Dreamweaver CS6提供了实现这种操作的功能。
5.3 复杂表格的排版
当一个表格无法对网页元素进行复杂的定位时，需要在表格的一个单 元格中继续插入表格，这叫做表格的嵌套。单元格中的表格是内嵌入式表格， 通过内嵌入式表格可以将一个单元再分成许多行和列，而且可以无限地插入 内嵌入式表格，但是内嵌入式表格越多，浏览时花费在下载页面的时间越长， 因此，内嵌入式的表格最多不超过3层。
5.1.4 表格各元素的属性
插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到 它们的各项参数，修改这些参数可以得到不同风格的表格。
1．表格的属性 2．单元格和行或列的属性
5.1.5 在表格中插入内容
建立表格后，可以在表格中添加各种网页元素，如文本、图像和表格 等。在表格中添加元素的操作非常简单，只需根据设计要求选定单元格，然 后插入网页元素即可。一般当表格中插入内容后，表格的尺寸会随内容的尺 寸自动调整。当然，还可以利用单元格的属性来调整其内部元素的对齐方式 和单元格的大小等。
5.2.3 排序表格
日常工作中，常常需要对无序的表格内容进行排序，以便浏览者可以 快速找到所需的数据。表格排序功能可以为网站设计者解决这一难题。
将插入点放到要排序的表格中，然后选择“命令 > 排序表格”命令， 弹出“排序表格”对话框。根据需要设置相应选项，单击“应用”或“确定” 按钮完成设置。
5.2 网页中的数据表格
课堂案例——典藏博物馆网页 导入和导出表格的数据 排序表格
5.2.1 课堂案例—典藏博物馆网页
使用“导入表格式数据”命令，导入外部表格数据；使用“排序表格” 命令，将表格的数据排序。
效果图
5.2.2 导入和导出表格的数据
有时需要将Word文档中的内容或Excel文档中的表格数据导入到网 页中进行发布，或将网页中的表格数据导出到Word文档或Excel文档中进 行编辑，Dreamweaver CS6提供了实现这种操作的功能。
5.3 复杂表格的排版
当一个表格无法对网页元素进行复杂的定位时，需要在表格的一个单 元格中继续插入表格，这叫做表格的嵌套。单元格中的表格是内嵌入式表格， 通过内嵌入式表格可以将一个单元再分成许多行和列，而且可以无限地插入 内嵌入式表格，但是内嵌入式表格越多，浏览时花费在下载页面的时间越长， 因此，内嵌入式的表格最多不超过3层。
5.1.4 表格各元素的属性
插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到 它们的各项参数，修改这些参数可以得到不同风格的表格。
1．表格的属性 2．单元格和行或列的属性
5.1.5 在表格中插入内容
建立表格后，可以在表格中添加各种网页元素，如文本、图像和表格 等。在表格中添加元素的操作非常简单，只需根据设计要求选定单元格，然 后插入网页元素即可。一般当表格中插入内容后，表格的尺寸会随内容的尺 寸自动调整。当然，还可以利用单元格的属性来调整其内部元素的对齐方式 和单元格的大小等。
初识DreamWeaver cs6教案
B、点击站点→新建站点→找到桌面上的文件夹
C、点击高级设置→默认图像文件夹，创建新文件夹“images”
备注：
第2页
课题：
教学内容、过程：
D、新建文件→保存为1.1.html
注意：图像命名、网站命名、文件命名要用英文或数字命名，不要用中文
2、管理站点Aຫໍສະໝຸດ 打开站点B、复制站点C、删除站点
3、操作站点文件及文件夹
课题：初识DreamWeaver cs6
教学目标：通过本节课，让学生初步了解DreamWeaver cs6操作界面，并学会创建站点。
教学重点，难点：学生新接触的软件，对软件不太熟悉，操作起来会遇到一定的困难。
德育渗透：做任何事情都要仔细和认真，只要有一点出错，就不是想要的结果。
教学内容、过程
导入
回顾上周课的内容,提问几个知识点。
A、创建文件夹
B、创建文件
C、删除、复制、粘贴
课堂练习
1、熟悉DreamWeaver cs6界面
2、学生独立创建站点
总结
教师总结学生表现情况
教学感悟：
备注：
第3页
备注：
第1页
课题：
教学内容、过程：
使用多屏幕预览审阅设计,可大大提高工作效率。改善的ftp性能，更高效地传输大型文件。"实时视图"和"多屏幕预览"面板可呈现html5代码，更能够检查自己的工作。
二、认识Dreamweaver cs6操作界面
三、创建站点
1、创建站点的步骤：
A、在桌面上新建文件夹，命名为“网页一阶”
1、什么是网页？
2网页由哪些元素组成。
新授
一、简要介绍dreamweaver cs6
C、点击高级设置→默认图像文件夹，创建新文件夹“images”
备注：
第2页
课题：
教学内容、过程：
D、新建文件→保存为1.1.html
注意：图像命名、网站命名、文件命名要用英文或数字命名，不要用中文
2、管理站点Aຫໍສະໝຸດ 打开站点B、复制站点C、删除站点
3、操作站点文件及文件夹
课题：初识DreamWeaver cs6
教学目标：通过本节课，让学生初步了解DreamWeaver cs6操作界面，并学会创建站点。
教学重点，难点：学生新接触的软件，对软件不太熟悉，操作起来会遇到一定的困难。
德育渗透：做任何事情都要仔细和认真，只要有一点出错，就不是想要的结果。
教学内容、过程
导入
回顾上周课的内容,提问几个知识点。
A、创建文件夹
B、创建文件
C、删除、复制、粘贴
课堂练习
1、熟悉DreamWeaver cs6界面
2、学生独立创建站点
总结
教师总结学生表现情况
教学感悟：
备注：
第3页
备注：
第1页
课题：
教学内容、过程：
使用多屏幕预览审阅设计,可大大提高工作效率。改善的ftp性能，更高效地传输大型文件。"实时视图"和"多屏幕预览"面板可呈现html5代码，更能够检查自己的工作。
二、认识Dreamweaver cs6操作界面
三、创建站点
1、创建站点的步骤：
A、在桌面上新建文件夹，命名为“网页一阶”
1、什么是网页？
2网页由哪些元素组成。
新授
一、简要介绍dreamweaver cs6
1.Dreamweaver CS6 基础知识
E ：设置缩放比率 F ：手机屏幕、平板电脑屏幕和显示器屏幕切换 G ：窗口大小弹出菜单（在“ 代码” 视图中丌可用）
H ：文档大小和下载时间
I ：编码指示器
7. 状态栏参数设置
为状态栏设置参数时，可以执行“编辑→首选参数”命令，打开“首选参数”对话框。在左 边的“分类”列表框中选择“窗口大小”选顷，在右边就会显示出状态栏的相关设置。
1.2 Dபைடு நூலகம்EAMWEAVER CS6 的工作界面
网页创建中的站点管理流程其实就是插入元素（文本、图像戒者 AP 元素等）和修改已插入的元素两个过程的交替迚行。
1.2.1 界面布局
在Windows 系统中的集成Dreamweaver CS6 工作区预设布局不Dreamweaver CS5 的 布局种类相比，除了经典、编码器、编码人员( 高级)、设计器、设计人员（紧凑） 和双重屏幕几种布局模式外，还新增了Business Catalyst、流体布局、移劢应用程序 这三种布局模式。
4. 更新的实时视图
使用更新的“实时视图”功能在収布前测试页面。
5. 更新的多屏幕预览面板
利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所呈现的页面效果
6. CSS 过滤效果
使用新增的“CSS 过渡效果”面板，能使页面元素的发化平滑运劢起来。
7. 多 CSS 类选区
现在可以将多个 CSS 类应用于单个元素。
11. 对 FTP 传递的改迚
Dreamweaver 使用多线程传输选定文件
12. 站点管理面板改迚
该选顷卡主要用来添加不网站后台数据库相关的劢态交互元素，例如记录集、重复区域以及 插入表单和更新记录表单等。
5. “ Spry”选顷卡
H ：文档大小和下载时间
I ：编码指示器
7. 状态栏参数设置
为状态栏设置参数时，可以执行“编辑→首选参数”命令，打开“首选参数”对话框。在左 边的“分类”列表框中选择“窗口大小”选顷，在右边就会显示出状态栏的相关设置。
1.2 Dபைடு நூலகம்EAMWEAVER CS6 的工作界面
网页创建中的站点管理流程其实就是插入元素（文本、图像戒者 AP 元素等）和修改已插入的元素两个过程的交替迚行。
1.2.1 界面布局
在Windows 系统中的集成Dreamweaver CS6 工作区预设布局不Dreamweaver CS5 的 布局种类相比，除了经典、编码器、编码人员( 高级)、设计器、设计人员（紧凑） 和双重屏幕几种布局模式外，还新增了Business Catalyst、流体布局、移劢应用程序 这三种布局模式。
4. 更新的实时视图
使用更新的“实时视图”功能在収布前测试页面。
5. 更新的多屏幕预览面板
利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所呈现的页面效果
6. CSS 过滤效果
使用新增的“CSS 过渡效果”面板，能使页面元素的发化平滑运劢起来。
7. 多 CSS 类选区
现在可以将多个 CSS 类应用于单个元素。
11. 对 FTP 传递的改迚
Dreamweaver 使用多线程传输选定文件
12. 站点管理面板改迚
该选顷卡主要用来添加不网站后台数据库相关的劢态交互元素，例如记录集、重复区域以及 插入表单和更新记录表单等。
5. “ Spry”选顷卡
1.Dreamweaver CS6 基础知识解析
Dreamweaver 是一款专业的网站设计开发软件。Dreamweaver 以及Flash、Fireworks 最早是由Macromedia 公司开发的一套网 页设计软件。Flash 用来生成矢量动画，Fireworks 用来制作网页 图像，Dreamweaver 可以进行各种素材的集成和网络发布。这三 款软件在国内有“网页三剑客”之称。
A ：呈现屏幕媒体类型，显示页面在计算机屏幕上的显示方式。 B ：呈现打印媒体类型，显示页面在打印纸张上的显示方式。 C ：呈现手持型媒体类型，显示页面在手持设备（如手机或 BlackBerry 设备）上的显示方式。
D ：呈现投影媒体类型，显示页面在投影设备上的显示方式。
E ：呈现 TTY 媒体类型，显示页面在电传打字机上的显示方式。 F ：呈现 TV 媒体类型，显示页面在电视屏幕上的显示方式。 G：切换 CSS 样式的显示，用于启用或禁用 CSS 样式。此按钮可独立于其它媒体按钮之外工作。
jQuery Mobile 是也是一个JavaScript 库，是jQuery 在手机上和平板设备上的版本，具有页面、列表视 图、布局网格、可折叠区块、文本输入、密码输入 、滑盖、反转切换开关等元素，大大提高了移动设 备应用程序的开发效率。
H ：设计时样式表，可用于指定设计时样式表。
5. 编码工具栏
编码工具栏垂直显示在文档窗口的左侧，只出现在代码视图中。在使用编码工具栏时，不能 将其取消停靠或移动，但是可以将它隐藏起来。
6. 状态栏
状态栏位于窗口的底部，用于提供与当前文档有关的信息
A ：标签选择器 B ：选取工具 C ：手形工具
D ：缩放工具
E ：设置缩放比率 F ：手机屏幕、平板电脑屏幕和显示器屏幕切换 G ：窗口大小弹出菜单（在“ 代码” 视图中不可用）
A ：呈现屏幕媒体类型，显示页面在计算机屏幕上的显示方式。 B ：呈现打印媒体类型，显示页面在打印纸张上的显示方式。 C ：呈现手持型媒体类型，显示页面在手持设备（如手机或 BlackBerry 设备）上的显示方式。
D ：呈现投影媒体类型，显示页面在投影设备上的显示方式。
E ：呈现 TTY 媒体类型，显示页面在电传打字机上的显示方式。 F ：呈现 TV 媒体类型，显示页面在电视屏幕上的显示方式。 G：切换 CSS 样式的显示，用于启用或禁用 CSS 样式。此按钮可独立于其它媒体按钮之外工作。
jQuery Mobile 是也是一个JavaScript 库，是jQuery 在手机上和平板设备上的版本，具有页面、列表视 图、布局网格、可折叠区块、文本输入、密码输入 、滑盖、反转切换开关等元素，大大提高了移动设 备应用程序的开发效率。
H ：设计时样式表，可用于指定设计时样式表。
5. 编码工具栏
编码工具栏垂直显示在文档窗口的左侧，只出现在代码视图中。在使用编码工具栏时，不能 将其取消停靠或移动，但是可以将它隐藏起来。
6. 状态栏
状态栏位于窗口的底部，用于提供与当前文档有关的信息
A ：标签选择器 B ：选取工具 C ：手形工具
D ：缩放工具
E ：设置缩放比率 F ：手机屏幕、平板电脑屏幕和显示器屏幕切换 G ：窗口大小弹出菜单（在“ 代码” 视图中不可用）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
•
教学重点 Dreamweaver CS6工作区 Dreamweaver CS6工具栏 属性面板 插入栏 Dreamweaver CS6的菜单栏 Dreamweaver CS6的面板组
教学目标和基本要求 ___________________________________ ___________________________________ ___________________________________ 教学时间：本章共分_______课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample\第5章\ 练习文件：exercise\第5章\
5.1 DREAMWEAVER CS6工作区
Dreamweaver CS6的工作界面主要由菜单栏、 文档窗口、属性面板、插入栏、工具栏以及多 个浮动面板组成。
5.2 DREAMWEAVER CS6工具栏
Dreamweaver CS6中的菜单项有很多，其中 有一些需要经常使用的命令，如果每次都 从菜单中选择命令，显然会浪费时间。
5.5.8 站点菜单
站点菜单用来创 建与管理站点， 包括新建站点、 管理站点、上传 与获取等。
5.5.9 窗口菜单
窗口菜单用来打开 与切换所有的面板 和窗口，包括插入 栏、属性面板、站 点窗口及CSS面板等。
5.5.10帮助菜单
【帮助】菜单：内 含Dreamweaver帮 助、Spry框架帮助、 Dreamweaver支持 中心、产品注册和 更新等。
5.3
属性面板
在Dreamweaver工作界面的右侧排列着一些浮 动面板，这些面板集中了网页编辑和站点管理 过程中最常用的一些工具按钮。
5.4
插入栏
【插入】栏有两种显示方式：一种是以
菜单方式显示，另一种是以制表符方式 显示。
5.4.1 常用插入栏
【常用】插入栏是 在编辑文档时经常 用到的编辑工具。
5.4.6 数据插入栏
【数据】插入栏 可以插入Spry数 据对象和其他动 态元素，例如记 录集、重复区域 以及插入记录表 单和更新记录表 单。
5.4.7 收藏夹插入栏
【收藏夹】插入栏用 于将“插入”面板中 最常用的按钮分组和 组织到某一公共位置。 【收藏夹】插入栏。
5.5 DREAMWEAVER CS6的菜单栏
5.5.3 查看菜单
“查看”菜单：用来 查看对象，包括代码 的查看、网格线与标 尺的显示、面板的隐 藏和工具栏的显示等。
5.5.4 插入菜单
【插入】菜单：用来 插入网页元素，包括 插入图像、多媒体、 表格、布局对象、表 单、电子邮件链接、 日期和HTML等。
5.5.5 修改菜单
【修改】菜单：用 来实现对页面元素 修改的功能，包括 页面属性、CSS样式、 快速标签编辑器、 链接、表格、框架、 AP元素
第5章 熟悉DREAMWEAVER CS6 的工作环境
教学内容：Dreamweaver CS6是创建网站的专 业工具。它将网页可视化布局、应用程序开发 功能和代码编辑支持组合在一起、功能强大， 使得各个层次的开发人员和设计人员都能够基 于标准的网站和应用程序快速创建吸引人的界 面。
• • • • •
5.5.6 格式菜单
【格式】菜单：用来对文本进行操作，包括字 体、字形、字号、字体颜色、HTML/CSS样式、 段落格式化、扩展、缩进、列表、文本的对齐 方式等。
ห้องสมุดไป่ตู้
5.5.7 命令菜单
【命令】菜单：收集了 所有的附加命令项，包 括应用记录、编辑命令 清单、获得更多命令、 扩展管理、清除 HTML/Word HTML、检 查拼写和排序表格等。
5.2.1 标准工具栏 【标准】工具栏包括【新建】、【打 开】、【保存】、【剪切】、【复制】和 【粘贴】等一般文档编辑命令。
5.2.2
文档工具栏
【文档】工具栏包括了控制文档窗口视图的按钮和 一些比较常用的弹出菜单，用户可以通过【代码】、 【拆分】、【设计】和【实时代码】4个按钮使工作 区在不同的视图模式之间进行切换。
5.7.2
在本地电脑上安装Dreamweaver CS6，了解一些 Dreamweaver CS6的基本工作界面和菜单命令的使用。
操作题
5.6 DREAMWEAVER CS6的面板组
Dreamweaver中的面板被组织到面板组中，每 个面板组都可以展开与折叠，并且可以和其他 面板组停靠在一起或取消停靠，还可以停靠到 集成的应用程序窗口中。
经典习题
5.7.1 填空题 （1）Dreamweaver CS6为了方便用户的使用，将 一些使用频率比较高的菜单命令以图形按钮的形 式排放在一起，组成工具栏。工具栏位于文档窗 口的上方，由两行组成，一行是______工具栏， 一行是______工具栏。 （2）______包含用于创建和插入对象的按钮。 当鼠标移到一个按钮上时，会出现一个工具提示， 其中含有该按钮的名称。这些按钮被组织到几个 类别中，可以在______栏的左侧切换它们。
5.4.2 布局插入栏
【布局】插入栏是在网页编 辑中利用布局视图进行和标 准视图编辑的结合处理。
5.4.3 表单插入栏
【表单】插入栏是将 一些常用的表单列出 来，进行更好的编辑。
5.4.4 文本插入栏
【文本】插入 栏主要是对字 体文本段落的 调整辅助功能。
5.4.5 SPRY插入栏
【Spry】插入栏 包含一些用于构 建Spry页面的按 钮，包括Spry数 据对象和构件。
菜单栏在标题栏的下方，它包括【文件】、 【编辑】、【查看】、【插入】、【修 改】、【文本】、【命令】、【站点】、 【窗口】、【帮助】10个菜单项。
5.5.1 文件菜单
“文件”菜单： 用来管理文件， 包括创建和保存 文件、导入与导 出文件、浏览和 打印文件等。
5.5.2 编辑菜单
编辑菜单用来编辑文 本对象等，包括撤消 与重做、复制与粘贴、 查找与替换、参数设 置和快捷键设置等。