Dreamweaver CS3网页设计案例教程 (11)
DreamweaverCS3网页设计与制作网页布局.
能力目标 1．能使用fireworks软件切图 2．能使用dreamweaver软件建立表格、调整表格 3．能插入图片及进行属性设置 4．能录入文字及排版 5．能进行图文混排
知识目标 1．了解切图的技巧 2．表格设置的知识 3．图文混排知识
学时分配 10（讲课4课时，实践6课时）
任务分析：
设计师在设计之前对社会、教师、学生需求进行详细的分析，并定
位网站内容，为吸引浏览者，设计师决定使用图片制作导入页，首先使 用photoshop设计好导入页效果图，然后使用fireworks切图，最后使用表 格布局，并把切好的图片置入网页内。
重点、难点： 1、fireworks切图 2、使用表格布局的设置
任务1制作导入页
任务背景： 为了加强社会、教师及学生之间的交流，某学校决定建立 “网络教学平台”网站，通过教学平台，互相了解、互相沟通 ，起到一个很好的桥梁作用，并创建导入页，与浏览者进行互动，如图3-1所示。
任务要求： 为更好的体现“网络教学平台”，需要为网站制作一个吸引浏览者
的导入页，而从给浏览者留下深刻的印象，并提高网站的浏览量。
创建网页链接
知识储备
１、插入表格、设置表格及单元格属性 ２、插入图片、设置单元格属性 3 、插入文字、设置图文混排
模拟制作任务
任务1、制作导入页 任务2、制作banner图与导航条 任务3、制作“专业介绍”网页
知识点拓展
1、了解切片 2、网页设计切图技巧
独立实践任务
任务 制作“首页”网页
知识储备
１、插入表格、设置表格及单元格属性 ２、插入图片、设置单元格属性 3 、插入文字、设置图文混排 4、了解表格布局 5、了解切图
操作步骤
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
网页设计Dreamweaver CS3教程1-6章(基础篇)
网页效果
活动三：打造自己的个性化站点
活动小结：
在这次活动中我们完完整整的制作了一个个人的网站，
是不是比想象中的容易啊！在本次制作中使用了“高级”
选项卡来建立网站，这比使用向导建立更快捷。 在制作中，网页间的链接是很重要的，作为一个设计者
值得注意的是，你的设计要让使用者能方便的在你的站点
中的任何网页之中进行跳转。
件的特点。
活动一：初识网页
活动小结：
网页中使用的最多的元素是文字和图片。图 片的一般格式为jpg或gif文件。flash的使用能使网 页增加动感。 动态网页能对用户提交的信息作出及时的反 馈，使网页更具人性化。 Dreamweave有着可视化的操作界面，特别在 与flash和fireworks的相互配合，成为网页创意组 件中最重要的一员。
活动三：制作 “我的第一张网页”
制作完成后的 效果图
活动三：制作 “我的第一张网页”
活动小结：
制作网页的基本流程可以分为：建立
站点->创建网页->插入网页元素->编辑网
页元素->保存网页->预览效果。
第一章实验：制作“我的个人介 绍”
实验要求：
一、建立站点目录mysitelx，并将站点指定至站点目录。 二、制作网页“我的个人介绍”，在网页中加入背景图片、文字、 水平线、图片和超级链接。 三、通过记事本打开网页，修改现有的HTML代码，比较前后效果。
活动四：编辑我的站点
教学目标：
掌握编辑站点的方法。
知识要点：
网站地图，管理网站文件、链接检查、添加和 删除站点。
活动四理功能 （2）站点视觉地图 （3）添加和删除站点
视图工具栏
“管理站点”对话框
Dreamweaver网页制作实训教程(CS3版)教学课件
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
边做边学——Dreamweaver CS3网页设计案例教程01
2.插入作者和版权信息
要设置网页的作者和版权信息，可选择“插入记录 > HTML > 文件头标 签 > Meta”命令，启用“META”对话框。
“META”对话框
3.设置刷新时间
要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新 时间项，具体操作步骤如下。 （1）选中文档窗口中的“代码”视图，将鼠标指针放在<head>标签中， 选择“插入记录 > HTML > 文件头标签 > 刷新”命令，启用“刷新”对话 框。
开始页面
“首选参数”对话框
2.不同风格的界面
Dreamweaver CS3的操作界面新颖淡雅，布局紧凑，为用户提供了一 个轻松、愉悦的开发环境。 若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择 “窗口 > 工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器” 或“设计器”命令，页面则会显示不同的界面风格。
在站点地图中，可以进行选择网页、打开网页进行编辑、向站点添加新 页、创建文件之间的链接、更改网页标题等操作。
3.在文件列表中创建网页
除了可以在站点地图中新建网页外，还可以在文件列表窗口中新建网 页。
1.3 管理站点
操作目的 操作步骤 相关工具
1.3.1 操作目的
通过站点管理命令，熟练掌握创建站点的方法。通过新建站点，
创建本地站点的步骤 本地站点主要选项的作用
1.4 网页文件头设置
操作目的 操作步骤 相关工具
1.4.1 操作目的
通过刷新命令，熟练掌握如何使用该命令制作网页自动刷新效果。
1.4.2 操作步骤
1
2
3
4
1.4.3 相关工具
1.插入搜索关键字
精品文档-新编Dreamweaver CS3动态网页设计与制作教程-第11章
1. 操作步骤 可以在“AP元素”面板中创建AP元素。 1) 创建AP元素 创建AP元素的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口中，单击【布局】 类别中的【绘制AP Div】按钮，如图11.1所示。
第11章 AP元素和时间轴在网页中的应用 图11.1 【AP Div按钮】绘制窗口
第11章 AP元素和时间轴在网页中的应用 图11.29 播放时间变长视图
第11章 AP元素和时间轴在网页中的应用
(9) 若要实现曲线运动，需要添加关键帧。例如，将动画 条末端的关键帧标签拖放到第50帧，选择动画条的第30帧，然 后按住Ctrl键并单击动画条，即添加了一个关键帧，如图 11.30所示。
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用
11.1 项目1：创建、操作和管理AP元素 11.2 项目2：利用AP元素布局网页 11.3 项目3：制作AP元素动画 11.4 项目4：控制时间轴动画 11.5 课堂综合训练 11.6 小结 习题
第11章 AP元素和时间轴在网页中的应用
5) 更改AP元素的堆叠顺序 更改AP元素堆叠顺序的具体操作如下： (1) 在Dreamweaver CS3中选择【窗口】→【AP元素】项， 打开【AP元素】面板，如图11.6所示。
第11章 AP元素和时间轴在网页中的应用 图11.6 【AP元素】面板
第11章 AP元素和时间轴在网页中的应用
(2) 将AP元素向上或向下拖动至所需的堆叠顺序，如图 11.7所示。
6) 显示和隐藏AP元素 显示和隐藏AP元素的具体操作如下： (1) 选择【窗口】→【AP元素】，打开【AP元素】面板。 在AP元素的眼形图标列内单击可以更改其可见性，如图11.8所 示。
Dreamweaver网页设计案例教程 第11章 综合设计实训
11.1.2 【项目创意及制作】
1．设计素材 2．设计作品效果图ຫໍສະໝຸດ 11.1.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.2 游戏娱乐网页——锋七游戏网页
【项目背景及要求】 【项目创意及制作】
11.2.1 【项目背景及要求】
1．客户名称 锋七游戏公司。 2．客户需求 锋七游戏公司是全球领先的游戏互动娱乐平台、游戏玩家的网上乐园，汇集 最新最热门的网络游戏、最好玩的大型游戏、玩家真实交友等服务，现推出几款 新的游戏，要为其前期的宣传做准备，网站内容要求能够表现公司的特点，达到 宣传效果。 3．设计要求 （1）以浅色的背景与深色图像形成对比，突出前方的宣传主体。 （2）以观感强烈的游戏画面瞬间抓住人们的视线，让人印象深刻。 （3）整体设计整洁干净，方便人们的操作。 （4）以沉稳严谨的设计体现出公司的经营特色。 （5）设计规格为1600像素（宽）×1206像素（高）。
11.4.2 【项目创意及制作】
1．设计素材 2．设计作品
效果图
11.4.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.5 电子商务网页——家政无忧网页
【项目背景及要求】 【项目创意及制作】
11.5.1 【项目背景及要求】
1．客户名称 家政无忧服务有限公司。 2．客户需求 家政无忧服务有限公司是一家以日常保洁、家电清洗、干洗服务、新居开荒 为主要经营项目的专业家政服务公司。公司为扩大服务范围，使服务更便捷，需 要制作网站，网站要突出公司的优势，整体风格简洁大气。 3．设计要求 （1）网页整体风格简洁大气，突出家政服务的专业性。 （2）网页的内容以家居为主，画面和谐，具有特色。 （3）向客户传达真实的服务信息内容。 （4）画面表现出空间感与层次感，图文搭配协调。 （5）设计规格为1400像素（宽）×2082像素（高）。
Dreamweaver CS3 网站设计指南说明书
1 DESIGNING WEBSITES WITH DREAMWEAVER CS3 20:311 Comparing Web Design Options2 Appreciating CSS Advantages3 Reviewing Old School Designs4 Creating Dynamic Sites5 Reviewing Site Di erences2 CREATING A NEW WEBSITE 43:441 Creating a New Site2 Creating a New Page3 Adding Images with Alternate Text4 Inserting & Formatting Text5 Aligning Images with the Property Inspector6 Using the Page Properties Dialog Box7 Linking to Pages in a Site8 Creating an Email Link9 Linking to Other Websites10 Testing & Targeting Links11 Organizing Files & Folders3 CUSTOMIZING THE INTERFACE 24:331 Introducing the Workspace2 Opening an Existing Site3 Working in Code, Design & Split Views4 Customizing the Insert Bar5 Use the Properties Inspector & the Tag Selector6 Reviewing Menu Options & Preferences7 Comparing the Macintosh® & PC Interfaces8 Previewing in Browsers & Device Central4 CREATING & INSERTING IMAGES 22:301 Optimizing Images for the Web2 Saving GIFs & PNGs in Photoshop®3 Inserting GIFs in Dreamweaver4 Adjusting Transparency Settings5 Saving JPGs for the Web6 Edit Images in Dreamweaver & Photoshop7 Changing Editor Preferences5 CREATING CSS LAYOUTS 1:201 Getting Started with Styles2 Creating Tag & Class Styles3 Creating Styles to Format Images4 Reviewing CSS Code5 Previewing Page Styles6 Understanding Page Properties7 Creating Divs with ID Styles8 Adding Images & Lists to Divs9 Creating a Series of Divs10 Aligning Divs Side by Side11 Using the Clear Option in CSS12 Adding Borders with CSS13 Creating an Image Border14 Using Margins for Positioning15 Creating Navigation Links16 Styling a List for Navigation17 Creating a Rollover E ect in CSS18 Duplicating Existing Styles19 Changing Page Properties Styles20 Reviewing Style Selectors6 DESIGNING WITH CSS 57:061 Understanding the Box Model2 Comparing Margins & Padding3 Viewing CSS in Various Browsers4 Creating a Page from a Template5 Using Paste Special6 Using Styles to Align Images7 Creating a Two Column Layout8 Calculating CSS Spacing9 Styling Headlines10 Understanding Font Sizes11 Using External Style Sheets12 Viewing Styles13 Reviewing CSS Options7 CREATING LAYOUTS WITH ABSOLUTE POSITIONING 53:431 Explaining Absolute Positioning2 Comparing Absolute & Centered Positioning3 Warnings about Using AP Divs4 Using a Tracing Image5 Creating a Layout with AP Divs6 Naming AP Divs7 Nesting AP Divs8 Aligning AP Divs9 Inserting Images into Divs10 Calculating Page Layouts11 Re ning an AP Layout12 Setting the Z-Index8 DESIGNING ACCESSIBLE TABLES 31:521 Understanding Tables & Accessibility2 Using Tables for Tabular Data3 Styling a Table4 Editing Table Layouts5 Adding Style to a Table Using CSS9 CREATING WEBSITES WITH FRAMES 20:301 Introducing Frames2 Creating a Frameset3 Opening Pages into Frames4 Controlling Scrollbars & Borders5 Targeting Links in Frames6 CreditsPart 1 –Part 2 –1 USING BEHAVIORS TO ADD INTERACTIVITY 43:051 Viewing Behaviors in a Browser2 Introducing the Behaviors Panel3 Inserting Rollover Images4 Using the Swap Image Behavior5 Altering Swap Image Options6 Using the Show-Hide Elements Behavior7 Using the Open Browser Behavior8 Downloading More Behaviors2 SURVIVAL HTML & CSS 23:471 Writing HTML: The Fundamentals2 Understanding Doctypes3 Recognizing HTML Tags4 Understanding Links5 Working in Split View 3 USING & CREATING TEMPLATES 30:451 Using CSS Layouts2 Editing CSS Layouts3 Altering CSS Styles4 Creating a Dynamic Web Template5 Editing Dynamic Web Templates4 CREATING WEB FORMS 25:111 Creating & Inserting a Form2 Inserting Text Fields3 Adding Drop-Down Lists4 Inserting Radio Buttons5 Inserting Check Boxes & a Submit Button6 Connecting a Form to a Script5 ADDING FLASH® TO YOUR PAGES 25:371 Working with Flash2 Inserting Flash Video3 Creating Flash Buttons & Text4 Troubleshooting the Flash Options6 TESTING & PUBLISHING A WEBSITE 18:351 Using the Check Page Feature2 Testing & Fixing Links3 Running Site Reports4 Con guring FTP Settings5 Publishing a Site to a Server7 DREAMWEAVER TIPS & TRICKS 07:291 Registering a Domain Name2 Finding Fonts & Photos3 Learning More Online4 Final Comments & Credits | 800-980-1820。
Dreamweaver_CS3实用教程完整版
Dreamweaver_CS3实用教程完整版DreamweaverCS3实用教程第1章网站的设计与制作简述第2章DreamweaverCS3的基本操作第3章使用表格规划网页布局第4章插入文本和图像第5章插入多媒体内容和超链接第6章使用框架、层和时间轴第7章使用CSS样式和插入行为第8章使用表单第9章使用模板和库第10章发布、管理和维护站点第11章综合实例第1章网站的设计与制作简述DreamweaverCS3是一款专业的网页制作软件，它具有简单易学、操作方便以及适用于网络等优点。
通过对DreamweaverCS3的学习，即使没有任何网页制作经验的用户，也能很容易上手，制作出精美的网页。
本章主要介绍了网页的基本概念、网页设计的构思和设计流程，以及DreamweaverCS3的新增特色功能和工作环境等。
教学重点与难点AutoCAD的基本功能网页制作的基础知识网页和网站的概念网页的基本元素网页的设计构思申请网站DreamweaverCS3的基础知识DreamweaverCS3的工作环境1.1网页的基础知识随着互联网的迅猛发展，网络已经逐渐成为人们工作和生活中不可缺少的一部分。
通过网络，可以获取、交换和存错连接到网络上的各计算机上的信息。
网络上存放信息和提供服务的地方就是网站。
网页和网站的概念网页的基本元素网页的常见类型1.1.1网页和网站的概念网页(web),也就是网站上的某一个页面，它是一个纯文本文件，是向浏览者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、某ML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。
网站(Webite),它是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。
平时所说的访问某格站点，实际上访问的是提供这种服务的一台或多台计算机。
DreamWeaver实例教程中11例
DW网页设计100例6：Dreamweaver轻松制作Flash元素漂亮的Flash动画人人喜欢，不过制作起来的确有一些技术难度。
你知道吗，Dreamweaver 作为一个网页制作工具，还可以创建好玩的Flash相册。
今天我们就来利用它来制作一个简单、漂亮的Flash相册，最终效果如图1。
图1插入Flash元素运行Dreamweaver，点击菜单“插入”→“媒体”→“图像查看器”，系统会自动弹出“保存Flash元素”对话框，键入保存的文件名，例如：“Photo.swf”，点击“保存”按钮完成。
现在一个Flash元素就被插入网页中了，为满足实际需要，下面我们需要进行简单的参数设置。
鼠标点击编辑窗口中的“Flash元素”，在属性面板中重新设置动画的宽、高值为实际所需，如图2。
图2(点击看大图)Flash元素参数设置下面我们还需要设置“Flash元素”的参数，为Flash相册指定调用的图片、设置相册外观。
点击菜单“窗口”→“标签检查器”，现在我们可以Dreamweaver右栏中看到一个“Flash 元素”面板，如图3。
图3这里可供选择的参数很多，下面我们主要讲几个基本的设置值。
imageURLs，该值用于设置调用的图片位置，我们一般将调用的图片放在同保存的“Photo.swf”文件同一文件夹为佳。
鼠标点击imageURLs项目的值，系统自动在参数右侧增加“编辑数组值”按钮，点击进入，如图4。
图4进入“编辑"imageURLs"数组对话框”，系统默认内置了三组数值，我们可以点击“+”号增加新的数值，每一组的数值同需要调用的图片文件名一一对应即可，如图5。
图5其它“Flash元素”的参数设置方法基本同上，下面我们列一下几个重要的参数：imageLinks，设置点击每张图片后访问的网址。
showControls，定义是否显示Flash相册的播放控制按钮。
slideAutoPlay，定义Flash相册是否自动播放。
DreamweaverCS网页制作实用教程第章综合实例完美版资料
上传到空间中，设置相应的域名地址。
中文版Dreamweaver CS实用教 程
11.4 制作新闻网页
参照某网站新闻页面，在“布局模式”中规划网页布局，插入页面内容，制作 新闻网页，如图所示。
中文版Dreamweaver CS实用教 程
11.5 上传网页
制作好网页后，可以将它上传到网络中，以供在网络中的其他用户访问。要上 传网页，首先需要注册一个域名地址，然后申请一个免费空间，较为便利的方 法就是申请一个免费的文件上传空间，将网页文档上传到空间中，设置相应的 域名地址。在IE浏览器中输入正确的URL地址，即可连接到该网页。
要上传网页，首先需要注册一个域名地址，然后申请一个免费空间，较为便利的方法就是申请一个免费的文件上传空间，将网页文档 上传到空间中，设置相应的域名地址。 本段介绍了使用框架规划网页布局。 参照某网站新闻页面，在“布局模式”中规划网页布局，插入页面内容，制作新闻网页，如图所示。 在制作网页的过程中，可以综合、系统地回顾前面各章节所介绍的内容。
要上传网页通，过首先制需作要注表册单一个网域页名地，址制，然作后网申请站一注个免册费页空间面，，较为如便图利的所方示法就。是申请一个免费的文件上传空间，将网页文档
上传到空间中，设置相应的域名地址。 通过创建个人网站主页模板的制作过程，练习创建本地站点，规划网页布局，然后制作个人网站主页，并将主页保存为模板。 2 制作网站注册页面 本段介绍了制作网页的方法，制作的网页如图所示。 3 制作游戏类网页 参照某网站新闻页面，在“布局模式”中规划网页布局，插入页面内容，制作新闻网页，如图所示。 在制作网页的过程中，可以综合、系统地回顾前面各章节所介绍的内容。
制作好网页后，可以将它上传到网络中，以供在网络中的其他用户访问。
《Dreamweaver CS3实例与操作》教学课件 11
11.4.3 应用复选框
复选框常用于制作调查和信息反响类栏目，它允许用 户在一组选项中选择一个或多个选项。
11.4.8 应用按钮
对表单而言，按钮是不可缺少的元素，它能提交或 重置表单中的内容。
综合实例——创立留言板模块
在学习了动态网页的根底知识后，本例通过创立一 个留言板模块，来学习使用Dreamweaver制作简单 动态网页的方法〔具体操作见视频11-1-1、11-1-2、 11-1-3、11-1-4、11-1-5-1、 11-1-5-2、 11-1-5-3、 11-1-6和11-1-7〕。
第11章 动态网页制作入门
安装和配置IIS 配置动态站点 表单的应用 表单对象的应用
11.1 安装和配置IIS
11.1.1 安装IIS
在安装Windows XP操作系统时，默认状态下是不 会安装IIS的，所以需要单独安装。
11.1.2 配置IIS
安装IIS后，还需要进行简单的设置〔将网站与IIS 联系起来〕才能用于测试网页，本节我们就来看看 具体的设置方法。
11.3.2 创立表单
表单的创立比较简单，但由于创立后的表单是以 100%的宽度显示的，所以在创立表单前一般都 要创立一个表格，并将表单插入到单元格中。
11.3.3 设置表单属性
将插入点置于表单区域中，“属性〞面板中将显 示表单属性。
11.4 表单对象的应用
我们可以把表单看做一个容器，表单对象就是放在 这个容器里的东西，在网页文档中插入表单后，就 可以在其中插入表单对象了。常用的表单对象有文 本字段、单项选择按钮、复选框、列表框和菜单等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.事件
事件是附加在浏览器中元素上的特殊过程，每个浏览器都提供一组事件。 事件可以与单击“行为”控制面板的“添加行为”按钮后弹出菜单中列出的动 作相关联。实际上，事件是浏览器生成的消息，以通知计算机该网页的访问者 选择了某种操作。当某个事情发生时，系统有一个事件处理机制会自动选择事 件过程中的行为代码。 行为一定要与相应的事件相关联，因此，必须知道每个事件都在哪种情况 下触发选择。
第11章
使用行为
本章简介：
Dreamweaver CS3 的行为 是 将 内 置 的 JavaScript 代 码放置在文档中，以实现 Web 页的动态效果。下面从如何 使用行为并为其应用相应的 事件来讨论如何实现网页动 态、交互的效果。
课堂学习目标
行为的使用 动作的使用
11.1 美丽女人购物网页
4.播放声音
“播放声音”动作的功能是在完全加载网页后播放声音或当鼠标指针对 某个网页元素操作时播放声音。 使用“播放声音”动作的具体操作步骤如下。 （1）选择一个网页元素对象并启用“行为”控制面板。 （2）在“行为”控制面板中单击“添加行为”按钮，并从弹出的菜单 中选择“播放声音”动作，弹出“播放声音”对话框，在对话框的“播放 声音”选项中设置声音文件的路径和文件名，单击“确定”按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。 （4）按<F12>键浏览网页
1.调用JavaScript
“调用 JavaScript”动作的功能是当发生某个事件时选择自定 义函数或 JavaScript代码行。 使用“调用 JavaScript”动作的具体操作步骤如下。 （1）选择一个网页元素对象，如“刷新”按钮。启用“行为”控制面 板。 （2）在“行为”控制面板中，单击“添加行为”按钮 ，从弹出的菜 单中选择“调用 JavaScript”动作，弹出“调用 JavaScript”对话框， 在文本框中输入JavaScript 代码或用户想要触发的函数名，单击“确定” 按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件 （4）按<F12>键浏览网页，当单击“关闭”按钮时，用户可以看到效 果。
将行为附加到网页元素上 将行为附加到文本上
11.1.5 实战演练-儿童美食网页
使用弹出信息命令制作当浏览儿童美食网页时，弹出提示信息。
效果图
11.2 车行天下网页
案例分析 设计理念 操作步骤 相关工具
11.2.1 案例分析
汽车已经成为了人们不可缺少的交通工具。本例是为一家汽车
公司制作展示和销售网页，页面的设计要表现出汽车的精美设计和
在网页设计、制作过程中，采用紫红色和彩色条状图形作为背
景颜色，充分演绎现代女性对自由、浪漫、感性和健康的追求。左
侧是时尚的女性图案，使用了插画的绘制手法，表现出时尚高贵的 女性气质。右上方是女性时尚产品的导航栏，为女性提供了海量的 时尚产品。右下方通过文字的编排，把女性的魅力展现于页面之上。
美丽女人购物网页效果图
2.打开浏览器窗口
“打开浏览器窗口”动作的功能是在一个新的窗口中打开指定网页。此 行为可以指定新窗口的属性、特性和名称，是否可以调整窗口大小，是否 具有菜单栏等。
3.转到URL
“转到URL”动作的功能是在当前窗口或指定的框架中打开一个新页。 此操作尤其适用于通过一次单击操作更改两个或多个框架的内容。 使用“转到URL”动作的具体操作步骤如下。 （1）选择一个网页元素对象并启用“行为”控制面板。 （2）单击“添加行为”按钮，并从弹出的菜单中选择“转到URL”动 作，弹出“转到URL”对话框，在对话框中根据需要设置相应选项，单击 “确定”按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。 （4）按<F12>键浏览网页。
11.1.3 操作步骤
1
2
3
11.1.4 相关工具
1. 行为
无论是直接编写代码还是添加Dreamweaver CS3行为，都要求用户了 解行为、事件驱动和VBScript的基础知识。只有掌握了这些基本知识和 原理，才能随心所欲地设计、制作出具有友好的交互界面和吸引用户的 网页。 行为可理解成在网页中选择的一系列动作，以实现用户与网页间的交 互。行为代码是Dreamweaver CS3提供的内置代码，运行于客户端的浏览 器中。
澎湃动力。
11.2.2 设计理念
在网页设计、制作过程中，采用蓝色作为背景，通过闪电图形
和汽车内部的构造作为装饰，充分体现出汽车的极佳速度和性能。
左侧为网页菜单，便于客户浏览。下方是厂家最新推出的汽车展示 图和广告语。整个设计现代时尚，精致完美。
车行天下网页效果图
11.2.3 操作步骤
1
2
3
4
11.2.4 相关工具
5.控制Shockwave或Flash
Shockwave电影是Adobe公司开发的网上交互多媒体的标准，是用 Director软件创建的交互式多媒体文件，能快速地下载并能被大多流行浏 览器播放。当用户插入一个Shockwave电影时，Dreamweaver CS3将同时使 用object标签和embed标签，以便在所有的浏览器类型中获得最佳的效果。 “控制 Shockwave 或 Flash”动作的功能是播放、停止、后退或转到 Adobe Shockwave 或 Adobe Flash SWF文件中的帧。
3. “行为”控制面板
用户习惯于使用“行为”控制面板为网页元素指定动作和事件。在文档窗 口中，选择“窗口 > 行为”命令，启用“行为”控制面板。
“行为”控制面板的组成 修改浏览器版本
事件
动作
“行为”控制面板
4.应用行为
通常情况下，选择某网页元素后在“行为”控制面板中选择一个动作， 再将它与一个事件关联，行为便附加到页面元素上。行为运行于浏览器中， 而不是服务器上。一个事件可以选择多个动作，在实际运作中，系统根据 设置的次序逐次选择动作。
案例分析 设计理念 操作步骤 相关工具
11.1.1 案例分析
美丽女人购物网是全球最大的中文女性网上购物网站，在线销
售超过60万种品牌服装以及时尚饰品。是女性购买时尚女装、配饰、
家居、健康美容等用品的首选。在网页设计上要表现出时尚柔情的 女性魅力，并方便浏览者浏览和购买自己喜欢的时尚产品。
11.1.2 设计理念