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的安装、删除方法；
设置段落、换行和列表的方法
要求掌握
的知识点
创建网页文件的基本方法、添加文本的基本方式、分段和换行、定义和应用文档标题格式、文本的对齐方式、通过【页面属性】对话框设置文本属性、通过【属性】面板设置文本属性、文本样式、列表的应用、文本的缩进和凸出、网页背景和页边距、插入水平线、插入日期、设置浏览器标题
教学过程
Dreamweaver CS6实例教程(第3版) (13)
项目创意及制作
使用“表格”按钮，插入表格；使用“图像”按钮，插入图像；使用 “CSS样式”命令，调整文字的颜色、大小、行距和为表格添加背景图像。
效果图
13.4 房产网页—新焦点房产网页
项目背景及要求
项目创意及制作
项目背景及要求
1．客户名称 新焦点房地产有限责任公司 2．客户需求 新焦点房产是一家经营房地产开发、物业管理、城市商品住宅、商 品房销售等全方位的房地产公司。公司为迎合市场需求，扩大知名度， 需要制作网站，网站设计要求厚重沉稳，并且设计精美，体现企业的高 端品质。 3．设计要求 （1）设计风格要求高端大气，制作精良。 （2）要求网页设计使用深绿色的背景，深沉的色彩表现出画面质感。 （3）网站设计围绕房产的特色进行设计搭配，分类明确细致。 （4）整体风格沉稳大气，表现出企业的文化内涵。 （5）设计规格均为1000px（宽）× 842px（高）。
项目创意及制作
使用“页面属性”命令，调整页面的属性；使用“表格”按钮，插入表格； 使用“SWF”按钮，插入Flash动画；使用“CSS样式”命令，制作导航条效果 和调整文字的颜色、大小、行距；使用“超链接”命令，创建超链接。
效果图
13.6 课堂练习1—设计时尚购物网页
项目背景及要求
项目创意及制作
项目背景及要求
1．客户名称 时尚SSCL女性时尚媒体 2．客户需求 时尚SSCL是一家社区型女性时尚媒体，网站提供应季最新单品， 各种风格的服饰搭配信息，并提供时尚、美容问答服务。致力于为女 性用户提供最美丽的时尚购物体验。目前网站需要进行改版，要求针 对网站的女性受众群体设计一款时尚、独特的网站。 3．设计要求 （1）网页设计要求使用深色的背景，体现神秘魅惑的女性魅力。 （2）网页画面分为休闲之旅与时尚购物两个板块，要求设计独特， 搭配合理。 （3）网页设计紧紧围绕网站主题，将女性、时尚、服饰等元素在页 面上充分表现。 （4）网页能够运用插画元素，导航栏设计简单直观。 （5）设计规格均为1003px（宽）× 1028px（高） 。
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网页设计教程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 标准实例教程课件第13章宠物网站设计综合实例
13.1 实例介绍
状态栏显示“欢迎光临iDog爱犬联盟宠物网!”。
迎光临 iDog宠物市场！”；光标停留在“宠物Show”按钮上时，状态栏 显示“欢迎参加至IN狗狗show选美大赛！”，单击该按钮，显示 的宠物选美相关内容将覆盖掉“宠物市场”的页面。
Dreamweaver cs6 标准实例教程课件第13章宠物网站设计综合实例
本实例将详细介绍在Dreamweaver CS6中制作宠物网站的具体步 骤。本例用到的知识点主要有AP元素和动作，此外还有表格、表单对 象、链接、图像、电子邮箱链接和JavaScript等知识。整张页面使用 AP元素进行布局，所有的网页元素均放到AP元素里面。利用AP元素的 显示和隐藏功能达到在一个较小的窗口里显示较多内容的目的。
13.2 准备工作
1、新建pet目录，在pet目录下创建images子目录。
2、新建一个名为pet的本地站点，指向创建的pet目录。
13.3 制作首页
首页布局
插入logo
插入导航按钮 添加“交换图像”行为 插入栏目图片
拆分单元格 并输入文本
<script Language ="JavaScript"> today=new Date(); function initArray(){ this.length=initArray.arguments.length for(var i=0;i<this.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray( "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); document.write(today.getYear(),"年 ",today.getMonth()+1,"月",today.getDate(),"日 ", d[today.getDay()+1] ); </script>
- 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 代 码 ， 这 些 代 码 在特定事件被激发时执行。本章 主要讲解了行为和动作的应用方 法，通过这些内容的学习，可以 在网页中熟练应用行为和动作， 使设计制作的网页更加生动精彩。