Dreamweaver CS3网页设计案例教程 (10)
合集下载
Dreamweaver CS3网页设计案例教程 (11)
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>键浏览网页，当单击“关闭”按钮时，用户可以看到效 果。
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
Dreamweaver CS3网页制作基础教程第10章习题答案
第10章使用时间轴制作动画一、填空题1、通过（）可以让AP Div的位置、尺寸、可视性和重叠次序随着时间的变化而改变，从而创建出具有Flash效果的动画。
正确答案：时间轴2、选定AP Div后，在主菜单中选择【修改】／【（）】／【添加对象到时间轴】命令，将AP Div添加到【时间轴】面板。
正确答案：时间轴3、如果不想让时间轴动画条的各关键帧随着总长度的变化而变化，只要在拖动最后一个关键帧时按住（）键即可。
正确答案：Ctrl4、如果需要创建具有复杂运动路径的动画，一个一个地创建关键帧会花费许多时间。
还有一种更加高效而简单的方法可创建复杂运动轨迹的动画，这就是（）功能。
正确答案：记录AP元素的路径5、如果让时间轴动画能够自动循环播放，在【时间轴】面板中必须同时选择【自动播放】和【（）】两个复选框。
正确答案：循环二、选择题1、时间轴是与（）密切相关的一项功能，它可以在Dreamweaver中实现动画的效果。
A、AP DivB、表格C、框架D、模板正确答案：A2、下面关于时间轴的说法错误的有（）。
A、在主菜单中选择【窗口】/【时间轴】命令将打开【时间轴】面板B、在主菜单中选择【修改】／【时间轴】／【添加对象到时间轴】命令，将AP Div添加到【时间轴】面板C、在【时间轴】的动画条中，可以根据需要增加关键帧，但不能增加帧D、【时间轴】中的动画条可以加长也可以缩短正确答案：C三、问答题1、如何将对象添加到时间轴？答：在主菜单中选择【窗口】／【时间轴】命令打开【时间轴】面板，然后选定对象，并在主菜单中选择【修改】／【时间轴】／【添加对象到时间轴】命令将对象添加到【时间轴】面板或者将对象直接拖曳到【时间轴】面板。
2、如何改变时间轴动画的播放时间？答：在【时间轴】面板中拖动最后一个关键帧可以改变整个动画的播放时间，往右拖动是延长播放时间，往左拖动是缩短播放时间。
四、操作题根据操作提示使用AP Div和时间轴制作如图10-33所示“飘动的云”动画网页。
Dreamweaver网页制作实训教程(CS3版)教学课件
Fireworks：主要用于制作网页图像、网站标志、GIF 动画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告条、网站片 头动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而强大的图形 图像处理软件，起初它的应用领域主要是平面设计而 不是网页设计，但是它所具有的强大功能完全涵盖了 网页设计的需要（除了多媒体）。
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 确定站点目录结构
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,Flash_CS3应用基础案例教程
项目1 建站及创建基本网页
Dreamweaver CS3、Flash CS3应用基础案例教程
任务一：创建和管理站点
活动1 活动2 活动3 创建本地站点 管理站点文件 使用站点地图
知识延伸
Dreamweaver CS3、Flash CS3应用基础案例教程
1.合理规划站点：
合理的站点结构，能够加快对站点的设计，提高工作效率， 节省您的时间。如果您将一切网页都存储在一个目录下，当站 点的规模越来越大时，管理起来就会变得很不容易。因此，一 般来说，应该利用文件夹来管理文档。在规划站点结构时，一 般应该遵循如下一些规则： （1）用文件夹来保存文档 一般来说，应该用文件夹来合理构建文档的结构。首先为 站点创建一个根文件夹（根目录），然后在其中创建多个子文 件夹，再将文档分门别类存储到相应的文件夹下，必要时，可 以创建多级子文件夹。
知识延伸
Dreamweaver CS3、Flash CS3应用基础案例教程
2.使用站点地图 ：
Dreamweaver站点地图是理想的站点结构布局工具，使用它 可以将新文件添加到Dreamweaver站点，或者添加、修改或删 除链接。
小试身手
Dreamweaver CS3、Flaver CS3、Flash CS3应用基础案例教程
1. embed的使用方法：
controls 面板外观 否 console（正常面板，默认）smallconsole（小面板） playbutton（仅显示播放按钮）pausebutton（仅显示暂 停按钮）stopbutton（仅显示停止按钮）volumelever（ 仅显示音量调节） 随意（不与同一页面其它对象重复） 随意 color|color（中间用 | 分隔，颜色可取类似red的颜色名或 RGB颜色，或透明色transparent） center（控制面板居中）left（控制面板居左） right（控制面板居右）top（控制面板的顶部与当前行的 最高对象顶部对齐）bottom（控制面板的底部与当前行 中的对象的基线对齐）baseline（控制面板的底部与文本 的基线对齐）texttop（控制面板的顶部与当前行中的最高 的文字的顶部对齐）middle（控制面板的中间与当前行的 基线对齐）adbmiddle（控制面板的中间与当前文本或对 象的中间对齐）absbottom（控制面板的底部与文字的低 部对齐）
Dreamweaver-cs-基础与实例教程
（1）利用“CSS样式”面板 首先选中要应用CSS样式旳对象，能够是文本、图像和
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称，弹出它旳快捷菜单，再单击该菜单 中旳“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式旳文本对象，在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称，即可将选 中旳CSS样式应用于选中旳文本对象。
（2）若要重定义特定 HTML 标签旳默认格式设置，请选择“标签” 选项，然后在“标签”文本框中输入一种 HTML 标签，或从弹出 式菜单中选择一种标签。
（3）若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置，请选择“高级”选项，然后在“选择器”文本框中 输入一种或多种 HTML 标签，或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器（称作伪类选择器）涉及 a:active、 a:hover、a:link 和 a:visited。
环节3：选择定义样式旳位置： （1）若要创建外部样式表，请选择“新建样式表文件”。
（2）若要在目前文档中嵌入样式，请选择“仅对该文 档”。
环节4：单击该对话框中旳“拟定”按钮，即可退出该 对话框，弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1：在CSS面板上，单击附加样式表按钮，打开 “链接外部样式表对话框”，单击对话框中“浏览” 按钮，浏览到外部 CSS 样式表，或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置，选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称，弹出它旳快捷菜单，再单击该菜单 中旳“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式旳文本对象，在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称，即可将选 中旳CSS样式应用于选中旳文本对象。
（2）若要重定义特定 HTML 标签旳默认格式设置，请选择“标签” 选项，然后在“标签”文本框中输入一种 HTML 标签，或从弹出 式菜单中选择一种标签。
（3）若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置，请选择“高级”选项，然后在“选择器”文本框中 输入一种或多种 HTML 标签，或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器（称作伪类选择器）涉及 a:active、 a:hover、a:link 和 a:visited。
环节3：选择定义样式旳位置： （1）若要创建外部样式表，请选择“新建样式表文件”。
（2）若要在目前文档中嵌入样式，请选择“仅对该文 档”。
环节4：单击该对话框中旳“拟定”按钮，即可退出该 对话框，弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1：在CSS面板上，单击附加样式表按钮，打开 “链接外部样式表对话框”，单击对话框中“浏览” 按钮，浏览到外部 CSS 样式表，或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置，选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
网页设计-Dreamweaver CS3 项目教程
项目三 布局技术
任务六 布局技术之二—Div+CSS
3.1.1 使用Div+CSS搭建页面 3.1.2 问题探究—Div+CSS布局认识表格 3.1.3 知识拓展—使用预设CSS布局创建页 面
项目三 布局技术
任务六 Div+CSS —构建任务
工作流程
1. 在站点中新建一个页面并保存。 2. 插入一个Div并设置相关CSS规则，使之成为外部 容器。 3. 根据事先拟好的布局草图，定制四个Div标签并分 别设置相关CSS规则。 4. 在各Div窗口中插入相应页面元素。 5. 检查整个布局效果并加以调整，保存并预览布局 效果。
项目三 布局技术
任务六 Div+CSS —问题探究
CSS的盒子模式
• 要利用CSS进行网页布局，需要借助HTML的一个标签 元素Div，也就是目前比较流行的Div+CSS来布局网页 结构。需要接触到的知识点就是CSS的盒子模式，这也 是Div排版的核心所在，传统的表格排版是通过大小不 一的表格和表格嵌套来定位排版网页内容，而改用CSS 排版后，通过CSS定义的大小不一的盒子和盒子嵌套来 编排网页。
Dreamweaver CS3 项目教程
项目三 布局技术
任务六 布局技术之二—Div+CSS
• 技能目标
能够利用DreamweaverCS3预设的CSS布局创建页面。 能够理解Div+CSS所体现的表现和内容相分离特性。。
•
知识目标
理解CSS盒子模式。 熟练掌握Div的创建与设置方法。 掌握CSS规则设置方法。
项目三 布局技术
任务六 Div+CSS —问题探究
Байду номын сангаас
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
“属性”面板
3.单行文本域
通常使用表单的文本域来接收用户输入的信息，文本域包括单行文本域、 多行文本域和密码文本域 3种。一般情况下，当用户输入较少的信息时，使用 单行文本域接收；当用户输入较多的信息时，使用多行文本域接收；当用户 输入密码等保密信息时，使用密码文本域接收。
插入单行文本域 插入多行文本域 插入密码文本域 文本域属性
5.提义、无、重置按钮
按钮的作用是控制表单的操作。一般情况下，表单中设有“提交”按钮、 “重置”按钮和“普通”按钮3种按钮。“提交”按钮的作用是将表单数据 提交到表单指定的处理程序中进行处理；“重置”按钮的作用是将表单的 内容还原为初始状态。
10.2.5 实战演练-旅游用户登录网页
4.创建图像域
普通的按钮很不美观，为了设计需要，常使用图像代替按钮。通常使用 图像按钮来提交数据。 插入图像按钮的具体操作步骤如下。 （1） 将光标放在表单轮廓内需要插入的位置。 （2）启用“选择图像源文件”对话框，选择作为按钮的图像文件。 （3）在“属性”面板中出现图像按钮的属性，可以根据需要设置该图 像按钮的各项属性。 （4）若要将某个 JavaScript 行为附加到该按钮上，则选择该图像， 然后在“行为”控制面板中选择相应的行为。 （5）完成设置后保存并预览网页。
3.创建文件域
网页中要实现上传文件的功能，需要在表单中插入文件域。文件域的 外观与其他文本域类似，只是文件域还包含一个“浏览”按钮。用户浏览 时可以手动输入要上传的文件路径，也可以使用“浏览”按钮定位并选择 该文件。 若要在表单域中插入文件域，则先将光标放在表单轮廓内需要插入文 件域的位置，然后插入文件域。
课堂学习目标
使用表单和文本域 应用复选框和单选按钮 创建列表和菜单 创建文件域和提交按钮
10.1 咖啡厅会员注册网页
案例分析 设计理念 操作步骤 相关工具
10.1.1 案例分析
爱喝咖啡的人越来越多，咖啡除了它苦中有乐的口感，还有引
人入胜的香气以及提神醒脑的作用。本例是为喜爱喝咖啡的人群制
作的会员注册网，网站的会员可以享受多重优惠，网站还为会员提 供了最便捷的网络预订体验。在网页设计上要体现出清新自然，简 洁美观的风格。
童会员可获得餐厅提供的定期免费用餐券。在网页设计上要体现出 餐饮店的经营理念和企业文化。
10.2.2 设计理念
在网页设计、制作过程中，使用橘色和黄色作为网页背景，充
分体现饮食的特点，令人心情愉悦、胃口大开。中间的儿童会员注
册区域设计新颖独特，能吸引儿童的参与和消费。整个网页设计活 泼生动，简洁大方。
2.创建跳转菜单
利用跳转菜单，设计者可将某个网页的URL地址与菜单列表中的选项建 立关联。当用户浏览网页时，只要从跳转菜单列表中选择一菜单项，就会 打开相关联的网页。
在网页中插入跳转菜单的具体操作步骤如下。
（1）将光标放在表单轮廓内需要插入跳转菜单的位置。 （2）启用“插入跳转菜单”命令，调出“插入跳转菜单”对话框，在 对话框中进行设置，单击“确定”按钮完成设置。 （3）保存文档，在IE浏览器中单击“前往”按钮，网页就可以跳转到 其关联的网页上。
儿童会员注册网页效果图
10.2.3 操作步骤
1
2
3
4
10.2.4 相关工具
1. 创建列表和菜单
插入下拉菜单 若要在表单域中插入下拉菜单，先将光标放在表单轮廓内需要插入菜 单的位置，然后插入下拉菜单。 插入滚动列表 若要在表单域中插入滚动列表，先将光标放在表单轮廓内需要插入滚 动列表的位置，然后插入滚动列表。
4.隐Байду номын сангаас域
隐藏域在网页中不显示，只是将一些必要的信息存储并提交给服务器。 插入隐藏域的操作类似于在高级语言中定义和初始化变量，对于初学者而 言，不建议使用隐藏域。 若要在表单域中插入隐藏域，先将光标放在表单轮廓内需要插入隐藏 域的位置，然后插入隐藏域。
5.单选按钮
为了使单选按钮的布局更加合理，通常采用逐个插入单选按钮的方式。 若要在表单域中插入单选按钮，先将光标放在表单轮廓内需要插入单选按 钮的位置，然后插入单选按钮。
6.单选按钮组
先将光标放在表单轮廓内需要插入单选按钮组的位置，然后打开“单 选按钮组”对话框。 启用“单选按钮组”对话框有以下几种方法。 （2）选择“插入记录 > 表单 > 单选按钮组”命令。
（1）单击“插入”面板“表单”选项卡中的“单选按钮组”按钮。
7.复选框
为了使复选框的布局更加合理，通常采用逐个插入复选框的方式。若 要在表单域中插入复选框，先将光标放在表单轮廓内需要插入复选框的位 置，然后插入复选框。
10.1.2 设计理念
在网页设计、制作过程中，将背景设计为蓝色到浅黄色的渐变
效果，体现清新自然的氛围。标志的设计体现出咖啡屋的品位。导
航栏的内容结构清晰明确。中间是咖啡屋的写实照片，环境优雅宜 人。下方是简单的会员注册表。网页的整体设计简单大方，颜色清 朗明快，充满时尚的生活气息。
咖啡厅会员注册网页效果图
第10章 使用表单
本章简介：
随着网络的普及，越来越多 的人在网上拥有自己的个人网站。 一般情况下，个人网站的设计者 除了想宣传自己外，还希望收到 他人的反馈信息。表单为网站设 计者提供了通过网络接收用户数 据的平台，如注册会员页、网上 订货页、检索页等，都是通过表 单来收集用户信息。因此，表单 是网站管理者与浏览者间沟通的 桥梁。
10.1.3 操作步骤
1
2
3
10.1.4 相关工具
1. 创建表单
在文档中插入表单的具体操作步骤如下。 （1）在文档窗口中，将插入点放在希望插入表单的位置。
（2）启用“表单”命令，文档窗口中出现一个红色的虚轮廓线用来 指示表单域。
创建表单
2.表单的属性
在文档窗口中选择表单，“属性”面板中出现表单属性。
复选框
10.1.5 实战演练-化妆品用户登录网页
使用单行文本域按钮制作生日文本域，使用复选框按钮制作提
示信息效果，使用单选按钮组制作血型组选项。
效果图
10.2 儿童会员注册网页
案例分析 设计理念 操作步骤 相关工具
10.2.1 案例分析
筷乐餐饮是是中国餐饮业的领军企业之一，面向全国，拥有百
家连锁店。本例是为筷乐餐饮店制作的儿童会员注册网页，所有儿