Dreamweaver CS6网页设计与制作标准教程 (13)
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基础、案例、技巧实用教程课件第13章
13.1.3 检查目标浏览器兼容性
浏览器的种类繁多，不同的浏览器浏览同一个网站时，网页的 显示效果可能会存在差异。因此，网站的兼容性是非常重要的。
选择【文件】/【检查页】/【浏览器兼容性】命令或单击工具 栏上的按钮，则显示【浏览器兼容性】面板，在该面板中会显示检 测结果信息，如图所示。
13.2.3 设置远程主机信息
如果要连接远程服务器，需要打开站点管理窗口， 单击工具栏上的按钮，打开远程站点和本地站点窗口， 如图所示。
13.2.3 设置远程主机信息
在远程服务器窗口单击“定义远程服务器”超级链接，打开 【站点设置对象Mysite】对话框，选择【服务器】，单击右侧服 务器列表下的按钮，弹出添加服务器对话框，添加主机服务提供 商提供的FTP登录主机地址，如图所示。
13.2.1 申请网站域名
13.2.1 申请网站域名
在域名查询区域输入“NewMediaWP”，单击【查 询】按钮，显示查询结果窗口，如图所示。
13.2.2 申请网站空间
有了属于自己的域名后，还需要有存放网站文件的 空间，即Internet服务器，用户可以根据网站的内容设置 以及发展前景来确软、硬件技术，将每台计算机分 成一台“虚拟”的主机，在“中国网格”网的【虚拟主 机】栏目下可以看到各种虚拟主机产品的相关信息。
本章学习要点：
1．链接的测试 2．检查浏览器兼容性 3．站点上传与更新
13.1 站点测试
在网站上传到Web服务器之前，应该先在本地站 点进行完整的测试，包括检测站点在各种浏览器中 的兼容性、站点中的错误、断裂的链接等等。
13.1.1 检查链接
一个网站由众多的网页组成，各个页面通过超 级链接建立联系，使整个网站成为一个有机的整体。 网页中的多数元素包括图像、声音、视频、CSS样 式等，都是以链接的形式链接到网页中进行显示。 如果网页中存在错误的链接，将影响整个站点的浏 览体验。
《网页设计与制作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)教案(第2版 杨杰版)
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
Dreamweaver CS6网页设计与制作标准教程教学大纲教案
《Dreamweaver CS6网页设计与制作标准教程》教学大纲教案课程介绍：本课程是一门概念性和实践性都很强的面向实际应用的课程。
Dreamweaver CS6是由Adobe公司开发的网页设计与制作软件。
Adobe公司在Dreamweaver这一软件的版本上不断升级，是为了使广大从事网页制作和网页设计工作的用户拥有性能更完善的得力工具，同时也是为了使刚刚步入设计领域的初学者能够拥有更加优秀的学习软件。
本课程主要介绍的是Dreamweaver CC的基本操作方法和网页设计制作技巧，这是学习Dreamweaver的入门课程，也是必修课程，学员通过本课程的学习，应当能够熟悉软件功能和网页设计思路，为今后的专业学习或深入的设计打下基础。
培训目标：➢掌握网站建设基本流程和网页设计基础知识➢掌握Dreamweaver CC的工作界面和网站的建设基础➢掌握文本与文档的编辑➢熟练掌握插入图像和多媒体的方法和技巧➢掌握网页超链接的创建方法及应用技巧➢熟练掌握表格的使用方法及应用技巧➢熟练掌握框架集框架集的使用方法➢熟练掌握层的基本操作方法➢掌握层叠样式表（CSS）样式➢掌握模板和库的使用方法➢掌握CSS+DIV的布局方法及技巧➢掌握使用表单的方法➢了解行为的使用方法➢掌握网页代码的编写和修改➢掌握商业案例实训的设计方法及技巧培训内容：一、网页设计基础知识1、掌握互联网基础和网站建设基本流程2、掌握网站建设基础和网页设计基础3、掌握网页的制作常用软件和标准技术二、初识Dreamweaver CS61、掌握Dreamweaver CC的工作界面2、掌握站点管理器、创建文件夹、定义新站点、创建和保存网页3、掌握重命名、移动、删除文件和文件夹4、掌握站点的打开、编辑、复制、删除、导入和导出5、掌握关键字、作者和版权信息、刷新时间、描述信息等其他文件头的设置三、文本与文档1、掌握文字的输入、连续空格的输入2、掌握页边距、网页的标题、网页的默认格式的设置3、掌握对文字的大小、颜色、字体、对齐方式和段落样式等的设置4、掌握项目符号或编号、文本缩进、插入日期、特殊字符和换行符的使用5、掌握水平线、显示/隐藏网格和标尺的应用四、图像和多媒体1、掌握图像的格式2、掌握图像的插入、图像的属性、跟踪图像的应用3、掌握Flash动画、FLV、Shockwave影片、Applet程序、ActiveX控件的插入五、超链接1、掌握超链接的概念与路径知识2、掌握文本超链接、电子邮件超链接、下载文件链接的创建方法3、图片链接、鼠标经过图像链接的创建方法4、掌握锚点链接、热点链接的创建方法六、使用表格1、掌握表格的组成和插入方法2、掌握表格、单元格和行或列的属性设置3、掌握在单元格中输入文字、插入其他网页元素4、掌握选择整个表格、行或列、单元格的应用5、掌握复制、粘贴表格的应用6、掌握表格删除、缩放的应用7、掌握单元格的合并和单元格的拆分七、使用框架1、掌握框架与框架集的操作方法2、熟练掌握框架属性的设置方法八、使用层1、熟练掌握层的基本操作方法2、掌握应用层设计表格的技巧九、CSS样式1、掌握CSS样式的概念2、掌握CSS样式面板的使用方法3、掌握CSS样式选择器的应用4、掌握样式的类型和创建方法5、掌握CSS样式的属性十、模板和库1、掌握资源面板的使用方法2、掌握创建模板、可编辑区域、重复区域、重复表格的创建方法3、掌握模板的重命名、修改模板文件、更新站点和删除模板文件的方法4、掌握如何创建库文件5、掌握重命名、删除、修改和更新库项目的方法十一、CSS+DIV布局方法1、掌握CSS+DIV的概述2、掌握div和span标记的区别3、掌握盒子的概念和操作技巧十二、使用表单1、掌握表单的使用方法2、掌握单行、密码、多行和电子邮件文本域的创建方法3、掌握单选按钮、单选按钮组和复选框的创建方法4、掌握下拉菜单、滚动列表的创建方法5、掌握文件域、图像域和按钮的创建方法十三、使用行为1、掌握行为面板的使用2、掌握JavaScript、打开浏览器窗口和转到URL的创建方法3、掌握检查插件、检查表单和交换图像的创建方法4、掌握显示隐藏层的方法5、掌握容器的文本、状态栏文本和文本域文字的设置方法6、跳转菜单和跳转菜单开始的方法十四、网页代码1、掌握新建标签库、标签、属性的方法2、掌握常用HTML标签的使用3、掌握响应HTML事件的方法十五、商业案例实训1、掌握软件基础知识的使用方法2、了解软件的常用设计领域3、掌握在不同设计领域本书全面、系统地介绍Photoshop CC 2019的基本操作方法和图形图像处理技巧，并对Photoshop在设计领域的应用进行细致的讲解，具体内容包括图像制作基础、软件基础操作、插画设计、Banner设计、App设计、H5设计、海报设计、网页设计、包装设计、综合设计实训等。
Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件第13章 Dreamweaver CS6动态网页设计基础
13.6.3
定义数据库连接
如果用户的网页服务器和Dreamweaver CS6运 行在同一个Windows系统上，那么就可以使用系 统DSN来创建数据库连接，DSN是指向数据库的 一个快捷方式。
13.6.4
制作发布留言页面
发布留言页面主要利用插入表单对象和【插入记 录】服务器行为来实现，如图13.64所示。
13.4.3
插入记录
一般来说，要通过ASP页面向数据库中添加记录， 需要提供用户输入数据的页面，利用 Dreamweaver CS6的【插入记录】服务器行为， 就可以向数据库中添加记录。
13.4.4
更新记录
选择菜单中的【窗口】|【服务器行为】命令， 打开【服务器行为】面板，在面板中单击+按钮， 在弹出菜单中选择【更新记录】选项，打开【更 新记录】对话框，如图13.36所示。
HTML文本是由HTML标签组成的描述性文本， HTML标签可以说明文字、图形、动画、声音、表 格、链接等。HTML的结构包括头部（Head）、主 体（Body）两大部分，其中头部描述浏览器所需的 信息，而主体则包含所要说明的具体内容。
HTML是HyperText Markup Language的缩写， 即超文本标记语言，这是创建网页的脚本语言，它 提供了精简而有力的文件定义，可以设计出多姿多 彩的超媒体文件，通过HTTP（Hyper Text Transfer Protocol）通信协议，使得HTML文件可 以在全球互联网（World Wide Web）上进行跨平 台的文件交换。
13.1.2 HTML的基本语法
超文本文档分为头部和主体两部分，在文档头部里， 对这个文档进行了一些必要的定义，文档主体中才 是显示的各种文档信息。
《网设计课件：AdobeDreamweaverCS6基础教程》
想要成为一名出色的网页设计师吗？这份课件将带领你了解Dreamweaver CS6 的基本知识和技能，让你轻松入门网页设计。
了解Dreamweaver CS6
掌握Dreamweaver CS6的基本概念和功能。学习如何创建和管理网页项目，以 及如何使用Dreamweaver的多种工具。
图像和媒体
学习如何在网页中插入图像和媒体文件，并掌握调整图像大小、添加图像属性和优化网页加载速度的技巧。
表格和表单
掌握使用Dreamweaver创建和编辑表格，以及制作表单并进行表单验证的方法。
CSS样式和布局
学习如何使用CSS样式和布局来设计漂亮和响应式的网页，以吸引用户并提升 用户体验。
Байду номын сангаас
界面和工具导览
熟悉Dreamweaver CS6的用户界面和各种工具，并理解它们的作用和用法，提 高你的工作效率。
基本网页结构
学习创建基本网页结构的步骤，包括HTML标签和属性的使用，以及如何组织 和布局网页内容。
文本和超链接
了解如何在网页中添加文本内容和超链接，并学习使用CSS样式来美化文本和 超链接的外观。
《网页设计与制作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的安装、删除方法；
设置段落、换行和列表的方法
要求掌握
的知识点
创建网页文件的基本方法、添加文本的基本方式、分段和换行、定义和应用文档标题格式、文本的对齐方式、通过【页面属性】对话框设置文本属性、通过【属性】面板设置文本属性、文本样式、列表的应用、文本的缩进和凸出、网页背景和页边距、插入水平线、插入日期、设置浏览器标题
教学过程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
13.2.1 婚戒网页
使用“打开浏览器窗口”命令，制作在网页中显示指定大小
的弹出窗口。
效果图
13.2.2 调用 JavaScript
“调用 JavaScript”动作的功能是当发生某个事件时选择自 定义函数或 JavaScript代码行。
13.2.3 打开浏览器窗口
使用“打开浏览器窗口”动作在一个新的窗口中打开指定的 URL，还可以指定新窗口的属性、特征和名称。
效果图
13.4 课后习题——美味蛋糕网页
使用“设置状态栏文本”命令，设置在加载网页文档时在状 态栏中显示的文字。
效果图
“检查插件”对话框
13.2.7 检查表单
“检查表单”动作的功能是检查指定文本域的内容以确保用
户输入了正确的数据类型。若使用 onBlur 事件将“检查表单”动 作分别附加到各文本域，则在用户填写表单时对域进行检查。若使
用 onSubmit 事件将“检查表单”动作附加到表单，则在用户单
击“提交”按钮时，同时对多个文本域进行检查。将“检查表单” 动作附加到表单，能防止将表单中任何指定文本域内的无效数据提 交到服务器。
13.2.14 设置状态栏文本
“设置状态栏文本”动作的功能是设置在浏览器窗口底部左 侧的状态栏中显示的消息。访问者常常会忽略或注意不到状态栏中 的消息，如果消息非常重要，还是考虑将其显示为弹出式消息或层 文本。可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、 全局变量或其他表达式。若要嵌入一个 JavaScript 表达式，需将
“设置容器的文本”对话框
13.2.12 设置文本域文字
“设置文本域文字”动作的功能是用指定的内容替换表单文 本域的内容。可以在文本中嵌入任何有效的 JavaScript 函数调用、 属性、全局变量或其他表达式。若要嵌入一个 JavaScript 表达式， 将其放置在大括号 ({}) 中。若要显示大括号，在它前面加一个反斜 杠（\{}） 。
其放置在大括号 ({}) 中。
“设置状态栏文本”对话框
13.2.15
跳转菜单
跳转菜单是创建链接的一种形式，与真正的链接相比，跳转
菜单可以节省很大的空间。跳转菜单从表单中的菜单发展而来，通
过“行为”面板中的“跳转菜单”选项进行添加。
“跳转菜单”对话框
13.2.16 跳转菜单开始
“跳转菜单开始”动作与“跳转菜单”动作密切关联。“跳 转菜单开始”将一个“前往”按钮和一个跳转菜单关联起来，单击
“打开浏览器窗口”对话框
13.2.4 转到 URL
“转到URL”动作的功能是在当前窗口或指定的框架中打开一 个新页。此操作尤其适用于通过一次单击操作更改两个或多个框架
的内容。
13.2.5 课堂案例——开心烘焙网页
使用“交换图像”命令，制作鼠标经过图像发生变化效果。
效果图
13.2.6 检查插件
“检查插件”动作的功能是根据判断用户是否安装了指定的 插件，以决定是否将页面转到不同的页。
13.1.2 应用行为
将行为附加到网页元素上
将行为附加到文本上
13.2 动作
课堂案例——婚戒网页
调用 pt 打开浏览器窗口
课堂案例——爱心救助网页
显示隐藏层 设置容器的文本
转到 URL
课堂案例——开心烘焙网页 检查插件
设置文本域文字
设置框架文本 设置状态栏文本
检查表单
交换图像
跳转菜单
“设置文本域文字”对话框
13.2.13 设置框架文本
“设置框架文本”动作的功能是用指定的内容替换框架的内 容和格式设置。该内容可以是文本，也可以是嵌入任何有效的放置 在大括号 ({}) 中的JavaScript表达式，如JavaScript函数调用、属 性、全局变量或其他表达式。
“设置框架文本”对话框
“前往”按钮打开在该跳转菜单中选择的链接。通常情况下，跳转
菜单不需要一个“前往”按钮。但是如果跳转菜单出现在一个框架 中，而跳转菜单项链接到其他框架中的页，则通常需要使用“前往”
按钮，以允许访问者重新选择已在跳转菜单中选择的项。
13.3 课堂练习——摄影网页
使用“弹出信息”命令，制作弹出信息效果。
课堂学习目标
掌握行为面板的使用方法 掌握行为的应用方法和技巧 掌握动作面板的使用方法
13.1 行为概述
“行为”面板
应用行为
13.1.1 “行为” 面板
用户习惯于使用“行为”面板为网页元素指定动作和事件。
在文档窗口中，选择“窗口 > 行为”命令，或按Shift+F4组合键，
弹出“行为”面板。
“行为”面板
效果图
13.2.10 显示隐藏元素
“显示-隐藏元素”动作的功能是显示、隐藏或恢复一个或多 个层的默认可见性。利用此动作可制作下拉菜单等特殊效果
“显示-隐藏元素”对话框
13.2.11 设置容器的文本
“设置状态栏文本”动作的功能是设置在浏览器窗口底部左 侧的状态栏中显示的消息。访问者常常会忽略或注意不到状态栏中 的消息，如果消息非常重要，还是考虑将其显示为弹出式消息或层 文本。可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、 全局变量或其他表达式。若要嵌入一个JavaScript表达式，需将其 放置在大括号 ({}) 中。
“检查表单”对话框
13.2.8 交换图像
“交换图像”动作通过更改<img>标签的 src 属性将一个图 像和另一个图像进行交换。“交换图像”动作主要用于创建当鼠标 指针经过时产生动态变化的按钮。
“交换图像”对话框
13.2.9 课堂案例——爱心救助网页
使用“设置状态栏文本”命令，设置在加载网页文档时在状 态栏中显示的文字。
第13章 行为
本章简介：
行 为 是 Dreamweaver 预 置 的 JaveScript 程 序 库 ， 每 个 行 为 包 括一个动作和一个事件。任何一 个动作都需要一个事件激活，两 者相辅相成。动作是一段已编辑 好 的 JaveScript 代 码 ， 这 些 代 码 在特定事件被激发时执行。本章 主要讲解了行为和动作的应用方 法，通过这些内容的学习，可以 在网页中熟练应用行为和动作， 使设计制作的网页更加生动精彩。