Dreamweaver CS6网页设计与应用 (6)
Dreamweaver CS6网页设计与制作教学教案
《Dreamweaver CS6网页设计与制作标准教程》教学教案掌握互联网基础和网站建设基本流程。
掌握网站建设基础和网页设计基础。
掌握网页的制作常用软件和标准技术。
熟练掌握网站建设的基本流程。
熟练掌握网页设计基础知识。
软件的应用和标准技术。
掌握软件的工作界面和创建网站框架。
掌握管理站点文件和文件夹的方法。
掌握管理站点和网页文件头设置。
熟练掌握Dreamweaver CS6工作界面的基本操作。
熟练掌握Dreamweaver CS6的站点。
在Dreamweaver CS6中站点的建立及编辑。
第3讲掌握输入文本和设置文本属性的方法。
掌握项目符号和编号列表的创建方法。
掌握水平线、网格与标尺的使用方法。
熟练掌握文本的多种创建方法和编辑技巧。
熟练掌握项目符号、编号列表和水平线的使用方法。
能够正确输入文本并编辑相关属性。
3.1.14 设置文本样式3.1.15 段落文本3.2 项目符号和编号列表3.2.1 课堂案例——电器城网店3.2.2 设置项目符号或编号3.2.3 修改项目符号或编号3.2.4 设置文本缩进格式3.2.5 插入日期3.2.6 特殊字符3.2.7 插入换行符3.3 水平线、网格与标尺3.3.1 课堂案例——摄影艺术网页3.3.2 水平线3.3.3 显示和隐藏网格3.3.4 标尺3.4 课堂练习——有机果蔬网页3.5 课后习题——休闲旅游网页小结1、熟练掌握文本的使用方法和技巧。
2、了解并掌握项目符号和编辑列表的使用方法和技巧。
作业第4讲熟练掌握图像的插入方法。
掌握多媒体在网页中的应用。
熟练掌握图像的格式与模式。
熟练掌握Flash文件的插入与设置。
能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。
4.4 课后习题——房源网页小结1、熟练掌握图像的格式与插入方法和使用技巧。
2、掌握Flash动画的插入和属性的设置。
作业第5讲了解超链接的概念与路径知识。
掌握文本、图像超链接的创建方法。
利用Dreamweaver CS6设计网页
第五章 利用Dreamweaver CS6设计网页
引导案例
图5-2 网页组成示例
第五章 利用Dreamweaver CS6设计网页
了解网页制作的基础知识 熟悉Dreamweaver 8的工作环境 掌握创建和管理站点的方法 掌握在网页中创建文本的方法 了解网页中常见的图像格式 掌握使用局页面的方法 了解使用框架布局网页的方法
引导案例
分析网页组成部分
一般而言，比较规范的商业网站的网页由以下几个重要部分组成： 1）网站或企业的标志（Logo），宣传口号（slogan）。 2）主栏目导航。 3）形象图片或动画。 4）新闻或介绍。 5）版权信息（如果觉得有必要，还可以包括一些辅助的内容）。 6）辅助快捷导航。 7）显示当前所处在网站位置的文字。 8）推荐产品展示，或希望观众第一眼看到的比较重要的内容。 9）辅助的企业形象图片或动画。 10）计数器。 11）音乐控制（一般以商业为目的的公司很少使用）。 包括以上内容的网页如图5-2所示。
第五章 利用Dreamweaver CS6设计网页
一、网页基础知识
GIF为Graphic Interchange Format的缩写，被称为图像交换格式，采用LZW 无损压缩算法。
JPEG为Joint Photograhic Experts Group 的缩写，是由联合图像专家组开 发的图形标准，采用有损的压缩算法。
3）超链接 超链接（也称超级链接）是网页中最常用的一种元素。所谓超链接，是指从 一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同 网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是 一个应用程序。它表明网页文件之间所存在的相互链接关系。 4）动画
第五章 利用Dreamweaver CS6设计网页
【设计】中文版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 版面，可以创建跨平台和跨的兼容。
利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。
DreamweaverCS6网页设计教学教案
使用“项目列表”按钮，设置项目列表效果云盘/Ch02/使用“页面属性”命令，设置页面边距和标题；使用“首选参数”命令，设置允许多个云盘/Ch02/使用“图像”按钮，插入图像云盘/Ch03/使用“云盘/Ch03/使用“命名锚记”按钮，插入锚点制作文档底部移动到顶部的效果。
云盘/Ch04/使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作云盘/Ch04/使用“页面属性云盘/Ch05/使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高云盘/Ch05/使用云盘/Ch06/使用“对齐上缘”命令，制作网页的结构图效果云盘/Ch06/使用“绘制云盘/Ch07/使用“云盘/Ch07/使用“项目列表”按钮，创建无序列表云盘/Ch08/使用“云盘/Ch08/使用“另存模板”命令，将页面存为模板；使用“可编辑区域”按钮，添加可编辑区。
云盘/Ch09/使用“库”面板，添加库项目；使用库中注册的项目，制作网页文档。
云盘/Ch09/使用“文本字段”按钮，制作用户名、手机、密码和验证码文本框；使用“云盘/Ch10/使用“文本字段”按钮，插入文本字段；使用“图像域”按钮，插入图像域；使用“选云盘/Ch10/使用“弹出信息”行为命令，制作弹出信息效果；使用“状态栏文本”行为命令，制作云盘/Ch11/使用“交换图像”命令，制作鼠标经过图像发生变化效果。
云盘/Ch11/使用“插入标签”命令，制作浮动框架效果。
云盘/Ch12/使用“云盘/Ch13/使用“云盘/Ch13/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“图像”按钮，插云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch15/使用“页面属性”命令，改变页面字体、大小、颜色、背景颜色和页边距效果；使用“云盘/Ch15/使用“图像”按钮，添加网页标志和广告图；使用“云盘/Ch16/使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对云盘/Ch16/使用“页面属性”面板，更改页面属性；使用“云盘/Ch17/使用“页面属性”命令，设置页面字体、大小、颜色和页面边距；使用“属性”面板，云盘/Ch17/使用“表格”按钮，布局网页；使用“页面属性”命令，控制页面的整体字体、大小和云盘/Ch17/使用“页面属性”命令，设置网页背景颜色及边距；使用输入代码方式设置图片与文字云盘/Ch17/。
中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页
(2) 层效果
4. 设置对齐层
对齐层主要是对齐多个层。选中多个层后，选择【修改】|【排列顺序】命令，在子菜单中 选择对齐方式。如果选择【修改】|【排列顺序】|【设成高度相同】命令或【修改】|【排列顺 序】|【设成宽度相同】命令，将以最后一个选中的层的大小为标准，调整其他层的大小并对齐 层，如图 6-11 所示。
图 6-8 设置容器的文本
图 6-9 【设置容器的文本】对话框
3. 设置层可见性
在处理文档时，可以在【AP 元素】面板中手动设置层的可见性。以图 6-7 右图所示的 3 个层为例，单击【AP 元素】面板中的 按钮，如果显示为 图标，层为可见；当显示为 图 标，隐藏层的显示，如图 6-10 所示。
(1) 设置显示与隐藏层 图 6-10 设置层的可见性
-114-
(1) 输入层的叠堆顺序数值 图 6-7 调整层的顺序
(2) 层顺序修改效果
2. 设置层文本 在创建层的过程中，用户可以 章 使用层与 Spry 布局网页
【例 6-2】在 Dreamweaver CS6 中设置层文本。 (1) 选中要设置层文本的层，选择【窗口】|【行为】命令，打开【行为】面板。 (2) 单击【行为】面板上的 按钮，在弹出的菜单中选择【设置文本】|【设置容器的文本】 命令，如图 6-8 所示，打开【设置容器的文本】对话框。 (3) 在【设置容器的文本】对话框的【层】下拉列表中可以选择层的名称，如图 6-9 所示， 在【新建 HTML】文本框中可以输入文本内容，单击【确定】按钮即可设置层文本。
6 .2 层的基本操作
在 Dreamweaver 中选择【窗口】|【AP 元素】命令，打开【AP 元素】面板。在该面板中显 示了网页文档中所有插入的层，如图 6-3 所示，用户可以通过它管理网页文档中所有插入的层 元素。
《网页设计与制作Dreamweaver CS6》电子教案
XXX中等职业学校教案
适用年级： XXX 课程名称：网页设计与制作 Dreamweaver CS6 任课教师： XXX
XXXX学校计算机专业组制
第1-4课时讲授2学时实践2学时
第5-10课时讲授2学时实践4学时
第11-16课时讲授2学时实践4学时
第16-21课时讲授2学时实践4学时
第22--27课时讲授2学时实践4学时
第28-37课时讲授4学时实践6学时
第38--41课时讲授2学时实践2学时
第41--50课时讲授4学时实践6学时
第51--56课时讲授2学时实践4学时
第57--60课时讲授2学时实践2学时
第61--68课时讲授4学时实践4学时
第69--74课时讲授2学时实践4学时
第75--80课时讲授2学时实践4学时
第81--90课时讲授4学时实践6学时
第91--94课时讲授2学时实践2学时。
Dreamweaver CS6网页设计与制作标准教程 (6)
6.1 表格的简单操作
课堂案例——布艺沙发网页 表格的组成
插入表格
表格各元素的属性 在表格中插入内容
选择表格元素
复制、粘贴表格 删除表格和表格内容
缩放表格
合并和拆分单元格 增加和删除表格的行和列
6.1.1 课堂案例——布艺沙发网页
使用“属性”面板，设置页面边距及页面标题；使用“表格”
按钮，插入表格效果；使用“图像”按钮，插入图像。
6.1.6 选择表格元素
先选择表格元素，然后对其进行操作。一次可以选择整个表 格、多行或多列，也可以选择一个或多个单元格。
选择整个表格
选择整个表格有以下几种方法。
将鼠标指针放到表格的四周边缘，鼠标指针右下角出现图 标 ，单击鼠标左键即可选中整个表格。 将插入点放到表格中的任意单元格中，然后在文档窗口左下角 的标签栏中选择<table>标签 令。 在任意单元格中单击鼠标右键，在弹出的菜单中选择“表格 > 选择表格”命令。 。 将插入点放到表格中，然后选择“修改 > 表格 > 选择表格”命
选择不相邻的单元格 按住Ctrl键的同时单击某个单元格即选中该单元格，当再次单
击这个单元格时则取消对它的选择。
6.1.7 复制、粘贴表格
在Dreamweaver CS6中复制表格的操作如同在Word中一样。 可以对表格中的多个单元格进行复制、剪切、粘贴操作，并保留原 单元格的格式，也可以仅对单元格的内容进行操作。
导入Word文档过程图
将网页中的表格导入到其他网页或Word文档中 （1）将网页内的表格数据导出 选择“文件 > 导出 > 表格”命令，弹出“导出表格”对话框， 根据需要设置参数，单击“导出”按钮，弹出“表格导出为”对话 框，输入保存导出数据的文件名称，单击“保存”按钮完成设置。
dreamwerver cs6课程标准
Dreamwever是Adobe公司一款专业的网页制作工具，被广泛应用于网页设计和开发领域。
为了提高从业者的技能水平，许多培训机构都开设了Dreamwever CS6课程。
在这篇文章中，我们将对Dreamwever CS6课程的标准进行分析和总结，以期为学习者提供更清晰的学习目标和方向。
一、课程目标1.1 理解Dreamwever CS6的基本功能和操作界面通过课程学习，学员应能够熟练掌握Dreamwever CS6的基本功能，并能够独立完成网页的制作和编辑工作。
1.2 掌握网页布局和设计课程要求学员能够熟练掌握网页布局的原理和方法，能够运用CSS样式制作美观、舒适的网页设计。
1.3 学习响应式网页设计随着移动互联网的兴起，响应式网页设计成为了不可或缺的技能。
Dreamwever CS6课程应该包含响应式网页设计的相关内容，使学员能够熟练制作适配不同屏幕大小的网页。
1.4 掌握Javascript和jQuery在前端开发中，Javascript和jQuery是非常重要的技术。
Dreamwever CS6课程应该涵盖这两项技能的学习，使学员能够熟练运用它们完成丰富的网页效果和交互功能。
二、课程内容2.1 Dreamwever CS6基础课程内容应该包括Dreamwever CS6的安装和基本设置、操作界面和工具栏的介绍、常用功能的操作方法等。
2.2 网页布局和设计课程应该围绕网页布局的原理、DIV+CSS布局、常用样式的制作等内容展开，使学员掌握网页设计的基本技能。
2.3 响应式网页设计课程应该介绍响应式网页设计的原理和方法，涵盖媒体查询、弹性布局和流式布局等内容，让学员熟练制作适配不同设备的网页。
2.4 Javascript和jQuery课程应该包括Javascript和jQuery的基本语法和常用功能，以及如何在Dreamwever CS6中运用它们完成网页效果和交互功能。
三、教学方法3.1 理论教学课程应该结合理论和实践，通过讲解和示范，让学员掌握相关的知识和技能。
DreamweaverCS6网页设计与制作课程设计
Dreamweaver CS6网页设计与制作课程设计一、前言Dreamweaver CS6是一款功能强大的网页设计软件，无论是设计静态网页还是动态网页，都可以方便快捷地完成。
本课程旨在教授学生如何使用Dreamweaver CS6进行网页设计与制作。
通过本课程的学习，学生可以掌握基本的HTML、CSS和JavaScript知识，并且能够使用Dreamweaver CS6进行网页的设计、制作、发布和维护。
二、教学目的1.了解网页设计的基本知识和流程；2.掌握HTML、CSS和JavaScript的基础知识；3.熟练使用Dreamweaver CS6进行网页的设计、制作、发布和维护；4.培养学生的网页设计和制作能力。
三、教学内容1.网页设计基础知识–网页设计的概念和流程–网页设计的原则和规范2.HTML基础知识–HTML的基本语法和标签–HTML的常用标签和属性–HTML的表单和表格3.CSS基础知识–CSS的基本语法和选择器–CSS的常用属性和值–CSS的盒模型和浮动4.JavaScript基础知识–JavaScript的基本语法和数据类型–JavaScript的基本操作和事件–JavaScript的DOM和jQuery库5.Dreamweaver CS6的使用–Dreamweaver CS6的安装和配置–Dreamweaver CS6的界面和功能–Dreamweaver CS6的网页设计和制作–Dreamweaver CS6的发布和维护四、教学方法1.讲授：通过课堂讲授、演示和实例等形式，讲解课程内容，引导学生掌握基本知识和技能；2.实践：通过编写网页实例和课后作业等形式，加强学生的动手能力和实践能力；3.课程设计：通过小组或个人课程设计，让学生运用所学知识进行网站设计和制作，培养学生的创新能力和综合能力。
五、教材参考1.《Dreamweaver CS6网页设计与制作教程》2.《HTML与Web设计基础》3.《CSS网站布局基础》4.《JavaScript DOM编程艺术》六、考核方式1.平时成绩：包括作业和实验成绩等；2.期末考试：根据教学计划进行考试；3.课程设计：个人或小组完成网站设计和制作，进行答辩和评分。
《网页设计与制作Dreamweaver-CS6》电子教案
1、教师讲解站点的含义；
2、演示创建一个站点的基础操作步骤；
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
—
作业布置
作业：一～四
主 要
参考资料
《网页设计与制作——Dreamweaver cs6》，王君学、田明编著，人民邮电出版社
备注
章 节
项目八CSS──设置环境保护网页
讲授主
要内容
1.CSS样式的作用
2.创建和设置CSS样式的方法
3.-
4.附加样式表的方法
重 点
难 点
创建和设置CSS样式的方法
附加样式表的方法
要求掌握
的知识点
【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式
Dreamweaver cs6窗口界面、浮动面板组、【标准】工具栏、【文件】面板、【文档】工具栏、【属性】面板、【插入】面板、工作区布局简介页面，介绍Dreamweaver cs6的功能和作用。
2、简介Dreamweaver cs6的安装、删除方法；
设置段落、换行和列表的方法
要求掌握
的知识点
创建网页文件的基本方法、添加文本的基本方式、分段和换行、定义和应用文档标题格式、文本的对齐方式、通过【页面属性】对话框设置文本属性、通过【属性】面板设置文本属性、文本样式、列表的应用、文本的缩进和凸出、网页背景和页边距、插入水平线、插入日期、设置浏览器标题
教学过程
中文版_Dreamweaver_CS6网页设计教程_第6章
6.1.3 选择表格
1. 选择整个表格 2. 选择行或列
(1) 选择单行。 (2) 选择单列。
(3) 选择行/列。 3. 选择单元格
(1) 选择单个单元格 (2) 选择多个单元格
7
6.1.4 编辑表格
1. 调整表格大小
2. 设置表格属性
1)
设置表格属性
2)
设置单元格属性
3. 增加/删除行或列
件。图6-23所示为以制表符相隔的文本文件。 (3) 在Dreamweaver CS6中，选择“文件”|“导入
表格式数据”命令，打开“导入表格式数据”对话框， 如图6-24所示。
11
6.1.6 导入/导出数据
(4)设置完成后，单击“确定” 按钮，将外部数据导入，如图 6-25所示。
12
6.1.6 导入/导出数据
表格包含以下 3 个基本元素。
行。 列。 单元格。
3
6.1.1 插入表格
插入表格的基本步骤如下。
(1) 将插入点置于页面中要插入表格的位置。 (2) 在插入栏的“常用”选项卡中单击按钮。也可
以选择“插入”|“表格”命令；或使用快捷键 Ctrl+Alt+T 快速插入表格。 (3) 在弹出的“表格”对话框中设置表格的参数值， 如图6-1所示。单击“确定”按钮。
1)
增加行或列
2)
删除行或列
3) 设置“属性”面板
4. 复制/粘贴单元格
5. 拆分/合并单元格
1)
拆分单元格
2)
合并单元格
8
6.1.5 数据排序
和其他数据处理软件一样，Dreamweaver CS6 也可以将表格中的数据按照一定的规则排列， 其操作方法如下。
网页设计与制作(Dreamweaver CS6)教案(第2版 杨杰版)
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
Dreamweaver CS6网页设计案例教程(微课版)
读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层
DreamweaverCS6网页设计教学教案
使用“项目列表”按钮，设置项目列表效果云盘/Ch02/使用“页面属性”命令，设置页面边距和标题；使用“首选参数”命令，设置允许多个云盘/Ch02/使用“图像”按钮，插入图像云盘/Ch03/使用“云盘/Ch03/使用“命名锚记”按钮，插入锚点制作文档底部移动到顶部的效果。
云盘/Ch04/使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作云盘/Ch04/使用“页面属性云盘/Ch05/使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高云盘/Ch05/使用云盘/Ch06/使用“对齐上缘”命令，制作网页的结构图效果云盘/Ch06/使用“绘制云盘/Ch07/使用“云盘/Ch07/使用“项目列表”按钮，创建无序列表云盘/Ch08/使用“云盘/Ch08/使用“另存模板”命令，将页面存为模板；使用“可编辑区域”按钮，添加可编辑区。
云盘/Ch09/使用“库”面板，添加库项目；使用库中注册的项目，制作网页文档。
云盘/Ch09/使用“文本字段”按钮，制作用户名、手机、密码和验证码文本框；使用“云盘/Ch10/使用“文本字段”按钮，插入文本字段；使用“图像域”按钮，插入图像域；使用“选云盘/Ch10/使用“弹出信息”行为命令，制作弹出信息效果；使用“状态栏文本”行为命令，制作云盘/Ch11/使用“交换图像”命令，制作鼠标经过图像发生变化效果。
云盘/Ch11/使用“插入标签”命令，制作浮动框架效果。
云盘/Ch12/使用“云盘/Ch13/使用“云盘/Ch13/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“图像”按钮，插云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch15/使用“页面属性”命令，改变页面字体、大小、颜色、背景颜色和页边距效果；使用“云盘/Ch15/使用“图像”按钮，添加网页标志和广告图；使用“云盘/Ch16/使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对云盘/Ch16/使用“页面属性”面板，更改页面属性；使用“云盘/Ch17/使用“页面属性”命令，设置页面字体、大小、颜色和页面边距；使用“属性”面板，云盘/Ch17/使用“表格”按钮，布局网页；使用“页面属性”命令，控制页面的整体字体、大小和云盘/Ch17/使用“页面属性”命令，设置网页背景颜色及边距；使用输入代码方式设置图片与文字云盘/Ch17/。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
“属性”面板和“框架”控制面板。然后，在“框架”控制面
板中选择一个框架，在“属性”面板的“源文件”选项中查看 此框架的文件名。用户查看框架的名称后，在保存文件时就可 以根据“保存”对话框中的文件名信息知道保存的是框架集还 是某框架了。
6.1.4 框架的选择
在对框架或框架集进行操作之前，必须先选择框架或框架 集。 1．选择框架 选择框架有以下几种方法。
课堂学习目标
掌握创建框架集的方法
掌握为框架添加内容的方法
掌握设置框架和框架集属性的方法
6.1 创建框架和框架集
建立框架集
为框架添加内容
保存框架
框架的选择 修改框架的大小 拆分框架 删除框架 课堂案例—牛奶饮料网页
6.1.1 建立框架集
在Dreamweaver CS6中，可以利用可视化工具方便地创建框架集。 用户可以通过菜单命令实现该操作。
在文档窗口中，按Alt+Shift组合键的同时，用鼠标左键 单击欲选择的框架。
先选择“窗口 > 框架”命令，弹出“框架”面板。然后， 在面板中用鼠标左键单击欲选择的框架。此时，文档窗口中框 架的边框会出现虚线轮廓。
2．选择框架集
选择框架集有以下几种方法。 在“框架”控制面板中单击框架集的边框。
在文档窗口中用鼠标左键单击框架的边框。
1．通过“插入”命令建立框架集
2．通过拖曳自定义框架
6.1.2 为框架添加内容
因为每一个框架都是一个HTML文档，所以可以在创建框架
后，直接编辑某个框架中的内容，也可在框架中打开已有的
HTML文档，具体操作步骤如下。 （1）在文档窗口中，将光标放置在某一框架内。
（2）选择“文件 > 在框架中打开”命令，打开一个已有
文档。
6.1.3 保存框架
保存框架时，分两步进行，先保存框架集，再保存框架。 初学者在保存文档时很容易糊涂，明明认为保存的是框架，但 实际上保存成了框架集；明明认为保存的是某个框架，但实际 上保存成了框架集或其他框架。因此，在保存框架前，用户需 要先选择“窗口 > 属性”命令和“窗口 > 框架”命令，启用
“属性”面板
6.2.2 设置框架集属性
选择要查看属性的框架集，然后选择“窗口 > 属性”命令。
“属性”面板
课堂案例—建筑规划网页
使用“左对齐”命令，插入框架进行布局；使用“鼠标经过图 像”按钮，插入鼠标经过图像效果；使用“属性”面板，设置链接 效果。
效果图
课后习题—健康定制网页
使用“新建”命令，新建空白页面；使用“插入”菜单，插入新 建页；使用“保存全部”命令，将框架全部保存；使用“图像”按钮 制作完整的框架网页效果。
第6章 框架
本章简介：
框架的作用是把浏览器窗口划分 为若干个区域，每个区域可以分别显 示不同的页面。框架的出现大大地丰 富了网页的布局手段以及页面之间的 组织形式。本Fra bibliotek主要讲解了创建设置
框架和框架集的方法，通过这些内容
的学习，可以合理地来组织页面中的 框架，使浏览者通过框架可以很方便
地在不同的页面之间跳转及操作。
6.1.6 拆分框架
通过拆分框架，可以增加框架集中框架的数量，但实际上 是在不断地增加框架集，即框架集嵌套。拆分框架有以下几种 方法。
（1）先将光标置于要拆分的框架窗口中，然后选择“修 改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。
（2）选定要拆分的框架集，按Alt+Shift组合键的同时， 将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖 曳鼠标指针拆分框架。
效果图
6.1.7 删除框架
通过拆分框架，可以增加框架集中框架的数量，但实际上 是在不断地增加框架集，即框架集嵌套。拆分框架有以下几种 方法。
（1）先将光标置于要拆分的框架窗口中，然后选择“修 改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。
（2）选定要拆分的框架集，按Alt+Shift组合键的同时， 将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖 曳鼠标指针拆分框架。
6.1.5 修改框架的大小
建立框架的目的就是将窗口分成大小不同的子窗口，在不 同的窗口中显示不同的文档内容。调整子窗口的大小有以下几 种方法。
（1）在“设计”视图中，将鼠标指针放到框架边框上， 当鼠标指针呈双向箭头时，拖曳鼠标改变框架的大小。
（2）选择框架集，在“属性”面板中“行”或“列”选 项的文本框中输入具体的数值，然后在“单位”选项的下拉列 表中选择单位。
6.1.8
课堂案例—牛奶饮料网页
使用“对齐上缘”命令，制作的网页的结构图效果； 使用“属性”面板，改变框架的大小；使用“图像”按钮， 插入图像。
效果图
6.2
设置框架和框架集的属性
设置框架属性 设置框架集属性
6.2.1 设置框架属性
选中要查看属性的框架，选择“窗口 > 属性”命令，弹出
“属性”面板。