Dreamweaver CS6实例教程(第3版) (9)
合集下载
Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第9章应用表单
9.3 处理表单
一个完整的表单应该有两个重要组成部分：一是含有表单和表单 元素的网页文档，另一个是用于处理用户输入的信息的服务器端应用 程序或客户端脚本。因此，若要在网页中实现信息的真正交互，仅在 文档中创建表单及表单对象是不够的，还必须使用脚本或应用程序来 处理相应的信息。通常这些脚本或应用程序由<form>标记中的action 属性指定。如果需要完成的操作比较简单，可以放在客户端进行。
一般而言，当可用的页面空间非常小的时候，使用下拉菜单；当需要控制显 示的选项数时，通常使用滚动列表。
9.1.4 跳转菜单
跳转菜单的静态外观类似于下拉菜单，但它们的本质功能却是完全不同的。 跳转菜单一般用于选择一个网页地址，浏览器将会自动跳转到指定的页面。 这项功能特别适合于友情链接、导航系统等。
隐藏域占位符
在属性设置面板中设置隐藏域的参数值。 “隐藏区域”：用于设置隐藏域的名称。该名称可以被脚本或程序所引用。 “值”：用于设置隐藏域的参数值。该值将在提交表单时传递给服务器。
9.2 使用Spry表单验证控件
在Dreamweaver CS6中，Adobe预制了一系列表单验证构件（validation widgets），例如，Spry验证文本域、Spry验证文本区域、Spry验证密码、 Spry验证确认、Spry验证选择、Spry验证复选框和Spry验证单选按钮组等， 可以帮助用户更加轻松快捷地验证表单数据、构建AJAX页面。
Spry验证选择构件与列表/菜单相似，是一个下拉菜单。其中，“焦 点状态”表示当用户单击该选择构件时的状态。
Spry 验证复选框构件是 HTML 表单中的一个或一组复选框。例如本 例中，表单要求用户至少选择一项，但不能多于两项。如果用户没有 进行选择，或选择的项多于两项，则该构件会自动返回一条消息，声 明不符合最小选择数或最大选择数要求。
《边做边学——Dreamweaver CS6网页设计案例教程(第3版)(微课版)》配套教学教案
1．改变文本的大小
2．改变文本的颜色
3．改变文本的字体
4．改变文本的对齐方式
5．设置文Leabharlann 样式6．段落文本7．插入换行符
8．设置项目符号或编号
9．修改项目符号或编号
10．设置文本缩进格式
11．插入日期
12．特殊字符
2.2.5【实战演练】——快乐购物网页
2.3休闲度假网页
2.3.1【案例分析】
2.3.2【设计理念】
小结
1、熟练掌握Dreamweaver CS6界面的操作方法和技巧。
2、熟练掌握在Dreamweaver CS6中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。
第2讲
课时内容
文本与文档
授课时间
180分钟
课时
4
教学目标
了解文本与文档的创建方法和使用技巧。
掌握项目符号和编号列表使用方法和区别。
1.1操作界面
1.1.1【操作目的】
1.1.2【操作步骤】
1.1.3【相关工具】
1．开始页面
2．不同风格的界面
3．伸缩自如的功能面板
4．多文档的编辑界面
5．插入面板
6．更完整的CSS功能
1.2创建网站框架
1.2.1【操作目的】
1.2.2【操作步骤】
1.2.3【相关工具】
1.3管理站点
1.3.1【操作目的】
2、在Dreamweaver CS6中如何输入多个连续空格？
3、在Dreamweaver CS6中如何更改文字颜色、字号等设置？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
2.1轩宇门窗网页
2.1.1【案例分析】
2.1.2【设计理念】
2．改变文本的颜色
3．改变文本的字体
4．改变文本的对齐方式
5．设置文Leabharlann 样式6．段落文本7．插入换行符
8．设置项目符号或编号
9．修改项目符号或编号
10．设置文本缩进格式
11．插入日期
12．特殊字符
2.2.5【实战演练】——快乐购物网页
2.3休闲度假网页
2.3.1【案例分析】
2.3.2【设计理念】
小结
1、熟练掌握Dreamweaver CS6界面的操作方法和技巧。
2、熟练掌握在Dreamweaver CS6中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。
第2讲
课时内容
文本与文档
授课时间
180分钟
课时
4
教学目标
了解文本与文档的创建方法和使用技巧。
掌握项目符号和编号列表使用方法和区别。
1.1操作界面
1.1.1【操作目的】
1.1.2【操作步骤】
1.1.3【相关工具】
1．开始页面
2．不同风格的界面
3．伸缩自如的功能面板
4．多文档的编辑界面
5．插入面板
6．更完整的CSS功能
1.2创建网站框架
1.2.1【操作目的】
1.2.2【操作步骤】
1.2.3【相关工具】
1.3管理站点
1.3.1【操作目的】
2、在Dreamweaver CS6中如何输入多个连续空格？
3、在Dreamweaver CS6中如何更改文字颜色、字号等设置？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
2.1轩宇门窗网页
2.1.1【案例分析】
2.1.2【设计理念】
《Dw CC网页制作案例教程》教学课件 第9章 模板和库的应用
步骤 02
在“文档类型〞列表中选择 “网站模板〞，在“站点〞列 表中选择“ydjt〞，在“站点 ‘ydjt’的模板〞列表中选择 “xinwen〞。
第9章 模板和库的应用
24
案例实施
一、网页、网站和主页
步骤 03 单击“创立〞按钮，基于模板创立文档，如以下图所示。
第9章 模板和库的应用
25
案例实施
中文版Dreamweaver CC 网页制作案例教程
目录页
CONTENTS PAGE
第9章 模板和库的应用
案例一 案例二
创建并应用库项目制作新闻显示页面——库的基本操作
案例说明
使用模板可以高效率地制作同一网站 中结构相同的网页。本案例通过创立 模板，并应用模板制作网站新闻显示 页面，来学习模板的根本操作。
第9章 模板和库的应用
20
案例实施
在学习了模板的创立、编辑、应用和管 理后，下面通过在企业网站中创立一个 模板，并使用该模板制作一个网页，以 进一步学习模板的创立和应用，网页效 果如右图所示。
一、网页、网站和主页
第9章 模板和库的应用
21
案例实施
一一、、网创页立、模网板站和主页
步骤 01 在“文件〞面板中翻开“ydjt〞站点，并双击翻开其中的网页文档“xinwen.html〞。 步骤 02 翻开“另存模板〞对话框。在“另存为〞文本框中输入“xinwen〞作为模板名，然后单
CONTENTS PAGE
第9章 模板和库的应用
案例一 案例二
案例说明
使用库工程可以将网页中的常用页面元素保存起 来，然后在多个网页中重复使用。本案例主要学 习创立和应用库工程的根本操作。
第9章 模板和库的应用
dreamweaver cs6网页设计资料 项目九 使用表单 共66页PPT资料
（5）单击“测试”按钮，Dreamweaver 尝试连接到数据库。如果连接失 败，应复查该DSN。如果连接仍失败，应检查 Dreamweaver 用来处理动态 页的文件夹的设置。如果连接成功，会出现如图所示的对话框。
本任务使用 ASP作为服务器技术。根据所选择的服务器技术， Dreamweaver 处理数据库连接的方式也有所不同。在 Dreamweaver 中可供使用的服务器技术包括：ColdFusion、 、ASP、JSP、PHP 等。
创建数据库、源并与ODBC连接
“数据库”面板上的新连接
（1）打开 Access 软件，选择“文件”|“新建”|“空数据库”命令， 打开“文件新建数据库”对话框，在对话框中选择路径和文件名，如图所 示。然后单击“创建”按钮，新建数据库。
（3）根据对话框中的提示，建立站点并选择一种文档类型，在弹出的 “选择文档类型”对话框中选择一种文档类型，如图所示。
（4）单击+ 按钮，从下拉菜单中选择“数据源名称(DSN)”。在“连接名 称”文本框中为连接起一个名字，然后从“数据源名称(DSN)”下拉列表 中选择在前面创建的数据源userinfo，如图所示。如果有必要，在“用户 名”和“密码”文本框中输入用户名和密码。
（1）选择“开始”∣“控制面板”命令，打开“控制面板”对话框，如 图所示。
（2）在“控制面板”对话框中选择“系统和安全”，在打开的对话框中 选择“管理工具”，如图所示。
（3）在打开的对话框中双击“数据源(ODBC)”图标，如图所示。
（4）在打开的“ODBC 数据源管理器”对话框中，单击“系统 DSN”标签， 如图所示。
IIS安装完成后，就可以用其发布 Web应用程序。下面介绍配置 IIS的具体步骤。 （1）选择“开始”| “管理工具”| “Internet信息服务（IIS）管理器” 命令，打开“Internet 信息服务（IIS）管理器”窗口。在该窗口中，依 次展开“本地计算机”| “网站”| “默认网站”节点，如图所示。
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第9-10章
表单
服务器
数据库
数据表
10.2 创建表单
10.2.1 创建表单 将鼠标光标置于目标位置，选择【插入】/
【表单】/【表单】命令，即可在鼠标光标所在行 插入一个空白表单。在设计视图中，表单轮廓会 以红色虚线表示，如图所示。
10.3 添加并设置表单对象的属性
10.3.1 插入文本域 表单中的文本域分为文本域和文本区域，分别用于
9.3 定制库项目
通过引用库项目可以一次性更新站点中所有使用 了库的网页。例如，某些文本或图像已经创建成库项目， 并应用到站点文档中，当这些文本或图像都需要更新时， 只需更新库项目，系统就会自动更新任何包含插入的库 项目的页面中该库的实例。
9.3.1 创建库项目
1．将已有元素创建为库项目 使用以下方法均可以实现将文档中的某个已有元素创建为库项目。
模板是一种页面布局，而库则是一种用于放置 在网页上的资源。无论是更新哪个网页中的模板、 库，其他包含有该模板和库项目的网页都会随之更 新，方便更新和维护网站。
9.1.1 模板的概念
模板是一种特殊类型的文档，用于设计网页布局 。模板 的功能很强，通过定义和锁定可编辑区域来保护模板的格式 和内容不被修改，只有在定义了可编辑区域中才可以编辑新 的内容，通过模板可以一次性更新多个页面。从模板创建的 文档与该模板保持链接状态，可以修改模板并立即更新基于 该模板的所有文档中的设计。
➢选择【窗口】/【资源】命令，打开【资源】面板，单击按 钮，切换到库类别。在设计窗口将选定元素拖到库类别中，然 后为新建的库项目命名。 ➢在文档窗口选中要创建库项目的元素，单击【资源】面板库 类别底部的按钮，并为新的库项目命名。 ➢在文档窗口中选择要另存为库项目的元素，然后选择【修改】 /【库】/【增加对象到库】命令。Dreamweaver将自动显示 【资源】面板的库类别，并列出新创建的库项目，重新修改新 建库项目名称即可。
《网页制作基础(Dreamweaver CS6)(第3版)》项目2 创建和管理站点
qyw
images flash media
css
index.html
任务分析
一个网站通常包括根文件夹、存放各类文件 的子文件夹，还有网页文件。Dreamweaver CS6为我们提供了方便的站点管理。
本地站点
Dreamweaver 站点由三个部分（或文件夹）组成，具体取决于 开发环境和所开发的 Web 站点类型：
1）本地根文件夹 存储您正在处理的文件。Dreamweaver 将此文件夹称为“本地
站点”。此文件夹可以位于本地计算机上，也可以位于网络 服务器上。如果您直接在服务器上工作，每次您保存文件时 Dreamweaver 都会将文件上传到服务器。 2）远程文件夹 存储用于测试、生产和协作等用途的文件。Dreamweaver 在 “文件”面板中将此文件夹称为“远程站点”。远程文件夹 通常位于运行 Web 服务器的计算机上。 本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器 之间传输文件；这使您可以轻松管理 Dreamweaver 站点中 的文件。
复制站点
复制站点可省去重复建立多个结构相同站点 的操作步骤，可以提高用户的工作效率。在 “管理站点”对话框中可以复制站点，其具体 操作步骤如下。
（1）在“管理站点”对话框左侧的站点列 表中选择要复制的站点，单击“复制”按钮进 行复制。
（2）用鼠标左键双击新复制出的站点，在 弹出的“站点定义为”对话框中更改新站点的 名称。
导出站点 导入站点
二、知识链接
站点的概念
在 Dreamweaver 中，术语“站点” 指属于某个 Web 站点的文档的本地 或远程存储位置。Dreamweaver 站点 提供了一种方法，使您可以组织和管 理您所有的 Web 文档，将您的站点 上传到 Web 服务器，跟踪和维护您 的链接以及管理和共享文件。应定义 一个站点以充分利用 Dreamweaver 的功能。
dreamweaver cs6网页设计资料 项目九 使用表单
（6）绑定记录集。在“应用程序”面板中单击“绑定”标签，选择“记 录集(查询)”，打开如图所示的对话框。
在“名称”文本框中输入 Recordset1，在“连接”下拉列表中选择刚定 义好的“date”数据库，在“表格”下拉列表中选择此页面中要用到的 表“main”，单击“确定”按钮。 单击记录集 Recordset1 前的“+”按钮，将表中所有的字段全部显示出 来，然后将所要的字段拖到所要的位置，这样完成之后的页面效果如图所 示。
dreamweaver cs6网页设计资料 项目九 使用表单
本项目中，通过3个工作任务向大家介 绍数据库。交互式动态 HTML 页面的 实现需要以大量数据资源为基础，为 了对数据资源进行高效的存取，自然 会引入数据库系统。在一个服务器动 态网页上，用户需要把数据提交给服 务器并存入数据库，同时用户也需要 从服务器数据库中查询、浏览数据， 并不断地更新维护数据。利用 Dreamweaver 强大的动态开发环境， 可以很方便地实现这些功能。希望通 过这些任务，使读者掌握IIS的安装、 创建数据库、源并与ODBC连接等操 作。
（5）单击“测试”按钮，Dreamweaver 尝试连接到数据库。如果连接 失败，应复查该DSN。如果连接仍失败，应检查 Dreamweaver 用来处 理动态页的文件夹的设置。如果连接成功，会出现如图所示的对话框。
（5）单击“确定”按钮，回到“数据源名称(DSN)”对话框，再单击 “确定”按钮，完成数据源的连接。此时新连接出现在“数据库”面板上， 如图所示。
（9）要绑定 ICON字段的数据到图片地址，首先选中头像图片，单击属 性面板中源文件框后的“浏览文件”按钮，弹出对话框，并做如图 所示 的选择设置，单击“确定”按钮。
这样完成后主页面就如图 所示。
Dreamweaver CS6网页设计立体化教程第9章
9.3 项目实训 9.3.1 测试与发布“快乐旅游”网站 9.3.2 测试与发布“多肉植物”网站 9.4 课后练习 9.5 技巧提升
9.3.1
测试与发布“快乐旅游”网站
13
1. 实训目标 本实训的目标是本实训将对“快乐旅游”网站进行测试与发布，通过测试修复浏览器兼容性 和各种链接，然后对站点配置正确的远程信息，并将其上传至申请的主页空间。本实训的最终效 果如右图所示。
口，其中将显示文件的上传进度。文
件上传成功后将自动关闭该对话框。
行业提示：认识站点访问量
11
站点的访问量是衡量网站成功与否的重要指标之一，要想增加网站访问量，则需对网站进行宣 传。下面介绍几种在网站制作行业最常用的站点宣传技巧。 ①导航网站登录。对于流量不大，知名度不高的网站来说，进入导航网站是最有效的提高访问 量的方法之一。 ②友情链接。友情链接可以给一个网站带来稳定的访问量，同时也有助于提升网站在GOOGLE 等搜索引擎中的排名。进行友情链接时，最好能链接一些流量较高的知名网站，或是和网站内容互
9.3.1
测试与发布“快乐旅游”网站
14
2. 专业背景
网站发布标志着网页制作正式告一段落，在正式发布网站之前，必须对网页进行测试。本章只简 要地对网页进行了一些基本设置，在专业领域，网站测试包括了许多方面，如配置测试、兼容性测试、 易用性测试、文档测试以及安全性测试等。假如网站面向全球范围的浏览者，则还应包括本地化测试。 另外，使用不同技术制作的网站程序应该在不同的环境中进行测试。目前主流的一些网站程序，
9.1.3 检测下载速度
在“属性”面板上方的状态栏右侧可看到当前网页的下载速度为3秒。 按【Ctrl+U】组合 键打开“首选参数”对话框，在“分类”列表框中选择“窗口大小”选项，在右侧的“窗口大 小”列表框中可更改网页窗口的宽度和高度，在“连接速度”下拉列表框中可更改下载速度， 完成后单击 按钮即可。
9.3.1
测试与发布“快乐旅游”网站
13
1. 实训目标 本实训的目标是本实训将对“快乐旅游”网站进行测试与发布，通过测试修复浏览器兼容性 和各种链接，然后对站点配置正确的远程信息，并将其上传至申请的主页空间。本实训的最终效 果如右图所示。
口，其中将显示文件的上传进度。文
件上传成功后将自动关闭该对话框。
行业提示：认识站点访问量
11
站点的访问量是衡量网站成功与否的重要指标之一，要想增加网站访问量，则需对网站进行宣 传。下面介绍几种在网站制作行业最常用的站点宣传技巧。 ①导航网站登录。对于流量不大，知名度不高的网站来说，进入导航网站是最有效的提高访问 量的方法之一。 ②友情链接。友情链接可以给一个网站带来稳定的访问量，同时也有助于提升网站在GOOGLE 等搜索引擎中的排名。进行友情链接时，最好能链接一些流量较高的知名网站，或是和网站内容互
9.3.1
测试与发布“快乐旅游”网站
14
2. 专业背景
网站发布标志着网页制作正式告一段落，在正式发布网站之前，必须对网页进行测试。本章只简 要地对网页进行了一些基本设置，在专业领域，网站测试包括了许多方面，如配置测试、兼容性测试、 易用性测试、文档测试以及安全性测试等。假如网站面向全球范围的浏览者，则还应包括本地化测试。 另外，使用不同技术制作的网站程序应该在不同的环境中进行测试。目前主流的一些网站程序，
9.1.3 检测下载速度
在“属性”面板上方的状态栏右侧可看到当前网页的下载速度为3秒。 按【Ctrl+U】组合 键打开“首选参数”对话框，在“分类”列表框中选择“窗口大小”选项，在右侧的“窗口大 小”列表框中可更改网页窗口的宽度和高度，在“连接速度”下拉列表框中可更改下载速度， 完成后单击 按钮即可。
《中文版Dreamweaver CS3网页制作实用教程》课件第9章
中文版Dreamweaver CS3实用教程
9.2
使用模板创建文档
在Dreamweaver CS3中，可以以模板为基础创建新的文档，或将一个模板应 用于已有的文档。 创建基于模板的文档 在现有文档上应用模板 从模板中分离文档 更新基于模板的页面
中文版Dreamweaver CS3实用教程
中文版Dreamweaver CS3实用教程 教学重点与难点
设置文字样式 使用模板 定义模板的区域 使用模板创建文档 创建和编辑库项目
中文版Dreamweaver CS3实用教程
9.1 使用模板
在Dreamweaver CS3中有多种创建模板的方法，可以创建空白模板，也 可以创建基于现存文档的模板，除此之外，还可以将现有的HTML文档另存为 模板，然后根据需要加以修改。 创建模板 编辑模板 定义模板区域和设置模板参数
中文版Dreamweaver CS3实用教程
9.2.4
更新基于模板的页面
当改变文档模板时，系统会提示是否更新基于该模板的文档，同时也可以使 用更新命令来更新当前页面或整个站点。
中文版Dreamweaver CS3实用教程
9.3
创建、管理和编辑库项目
库用来存放文档中的页面元素，如图像、文本、Flash动画等。这些页面 元素通常被广泛使用于整个站点，并且能被重复使用或经常更新，因此它们被 称为库项目。 创建库项目 管理和编辑库项目
9.2.1 创建基于模板的文档
要创建基于模板的新文档，选择“文件”|“新建”命令，打开“新建文档” 对话框，单击“模板中的页”选项，打开该选项对话框，如图所示。在“站点” 列表框中选择模板所在的站点，在“站点的模板”列表框中选择所需创建文档 的模板，单击“创建”按钮，即可在文档窗口中打开一个基于模板的新页面， 在该页面中可以创建新的文档，如图所示。
边做边学——Dreamweaver CS6网页设计案例教程(第3版)(共12单元)10
4.隐藏域
隐藏域在网页中不显示，只是将一些必要的信息存储并提交给 服务器。插入隐藏域的操作类似于在高级语言中定义和初始化变量， 对于初学者而言，不建议使用隐藏域。
若要在表单域中插入隐藏域，先将光标放在表单轮廓内需要插 入隐藏域的位置，然后插入隐藏域。
5.单选按钮
为了使单选按钮的布局更加合理，通常采用逐个插入单选按钮 的方式。若要在表单域中插入单选按钮，先将光标放在表单轮廓内 需要插入单选按钮的位置，然后插入单选按钮。
6.单选按钮组
先将光标放在表单轮廓内需要插入单选按钮组的位置，然后打开“单选按 钮组”对话框。
打开“单选按钮组”对话框有以下几种方法。 （1）单击“插入”面板“表单”选项卡中的“单选按钮组”按钮 。 （2）选择“插入 > 表单 > 单选按钮组”命令。
“单选按钮组”对话框
单选按钮
7.复选框 为了使复选框的布局更加合理，通常采用逐个插入复选框的方
课堂学习目标
使用表单和文本域 应用复选框和单选按钮 创建列表和菜单 创建文件域和提交按钮 行为的使用
10.1 废品回收网页
案例分析 设计理念 操作步骤 相关工具
10.1.1 案例分析
废品回收的顾名思义是一种有偿性的废品处理生活服务，废品回 收这项服务对保护环境、节约能源和带动社会效益起着积极的作用。 网页设计方面要求体现出绿色环保的概念。
4.打开浏览器窗口
“打开浏览器窗口”动作的功能是在一个新的窗口中打开指定 网页。此行为可以指定新窗口的属性、特性和名称，是否可以调整 窗口大小，是否具有菜单栏等。
5.转到URL
“转到URL”动作的功能是在当前窗口或指定的框架中打开一个新 页。此操作尤其适用于通过一次单击操作更改两个或多个框架的内容。
网页制作实用教程(第3版)第9章
人民邮电出版社
9
中文版Dreamweaver CS6网页制作实用教程
“隐藏域”按钮 ：可用于存储用户输入的信息， 如姓名、电子邮件地址或常用的查看方式，以便于 在用户下次访问该网站的时候使用这些数据。 “文本区域”按钮 ：用于在表单域插入一个可输 入多行文本的文本域。 “复选框”按钮 ：用于在表单域中插入一个复选 框。复选框允许用户选择任意多个选项。 “复选框组Байду номын сангаас按钮 ：用于在表单域中插入一组复 选框。即直接插入两个或两个以上的复选框。 “单选按钮”按钮 ：用于在表单域中插入一单选 按钮。
人民邮电出版社
10
中文版Dreamweaver CS6网页制作实用教程
“单选按钮组”按钮 ：用于在表单域中插 入一组单选按钮。即直接插入两个或两个 以上的单选按钮。 “列表/菜单”按钮 ：用于在表单域中插 入一个列表或一个菜单。“列表”选项在 一个滚动列表中显示选项值，浏览者可以 从该滚动列表中选择多个选项。“菜单” 选项则是在一个菜单中显示选项值，浏览 者只能从中选择单个选项。
人民邮电出版社
11
中文版Dreamweaver CS6网页制作实用教程
“跳转菜单”按钮 ：用于在表单域中插入一 个可以进行跳转的菜单。跳转菜单中可导航的 列表或弹出菜单，它使用户可以插入一个菜单， 这个菜单中的每个选项都拥有链接的属性，单 击即可跳转至其他网页或文件。 “图像域”按钮 ：用于在表单域中插入一个 可放置图像的区域。该图像用于生成图形化的 按钮，例如“提交”或“重置”按钮。 “文件域”按钮 ：用于在表单域中插入一个 文本字段和一个“浏览”按钮。浏览者可以使 用文件域浏览本地计算机上的某个文件，并将 该文件作为表单数据上传。
Dreamweaver CS6
9
中文版Dreamweaver CS6网页制作实用教程
“隐藏域”按钮 ：可用于存储用户输入的信息， 如姓名、电子邮件地址或常用的查看方式，以便于 在用户下次访问该网站的时候使用这些数据。 “文本区域”按钮 ：用于在表单域插入一个可输 入多行文本的文本域。 “复选框”按钮 ：用于在表单域中插入一个复选 框。复选框允许用户选择任意多个选项。 “复选框组Байду номын сангаас按钮 ：用于在表单域中插入一组复 选框。即直接插入两个或两个以上的复选框。 “单选按钮”按钮 ：用于在表单域中插入一单选 按钮。
人民邮电出版社
10
中文版Dreamweaver CS6网页制作实用教程
“单选按钮组”按钮 ：用于在表单域中插 入一组单选按钮。即直接插入两个或两个 以上的单选按钮。 “列表/菜单”按钮 ：用于在表单域中插 入一个列表或一个菜单。“列表”选项在 一个滚动列表中显示选项值，浏览者可以 从该滚动列表中选择多个选项。“菜单” 选项则是在一个菜单中显示选项值，浏览 者只能从中选择单个选项。
人民邮电出版社
11
中文版Dreamweaver CS6网页制作实用教程
“跳转菜单”按钮 ：用于在表单域中插入一 个可以进行跳转的菜单。跳转菜单中可导航的 列表或弹出菜单，它使用户可以插入一个菜单， 这个菜单中的每个选项都拥有链接的属性，单 击即可跳转至其他网页或文件。 “图像域”按钮 ：用于在表单域中插入一个 可放置图像的区域。该图像用于生成图形化的 按钮，例如“提交”或“重置”按钮。 “文件域”按钮 ：用于在表单域中插入一个 文本字段和一个“浏览”按钮。浏览者可以使 用文件域浏览本地计算机上的某个文件，并将 该文件作为表单数据上传。
Dreamweaver CS6
Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第3章网站的构建与管理
3.4.2 配置浏览器
在Dreamweaver CS6中创建网页后，最好设置多个不同的主流浏览器（如 Internet Explorer、Netscape Navigator、NetCaptor等）分别对其进行预览，以查 看不同浏览器用户的浏览效果。
在Dreamweaver CS6中，按F12键可以在主浏览器中预览网页文件；按 Ctrl+F12组合键可以在次浏览器中预览网页文件。通过情况下，只要设置主浏览器 和次浏览器即可，如果需要，可以在“首选参数”对话框中设置多达20个浏览器。
1．建立 SVN 连接 由于Dreamweaver CS6只是集成了Subversion客户端，因此在进行存储库视图操作之
前，必须建立与 SVN 服务器的连接。 2．获取最新版本的文件 3．提交文件 提示：在“文件”面板的文件列表中，文件上的绿色选中标记表示此文件有更改，但尚
未提交到存储库。 4．更新文件或文件夹的SVN状态 5．锁定和解锁文件 6．向存储库添加新文件 提示：在“文件”面板中，文件上的蓝色加号表示 SVN 存储库中尚没有此文件。 7．解析冲突的文件
“管理站点”对话框
“站点设置”对话框
如果要创建动态网站，则还需要指定远程服务器和测试服务器。在Dreamweaver CS6中，用户可以在一个视图中指定远程服务器和测试服务器，从而使用户可以以前 所未有的速度快速建立网站，分阶段或联网站点甚至还可以使用多台服务器。
“站点设置”对话框
选择连接服务器的方法
本地站点和远程web站点应该具有完全相同的结构，在这两种站点之间传输 文件时，如果站点中不存在必需的文件夹，则Dreamweaver将自动创建这些文件 夹。如果使用Dreamweaver创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver能确保在远程站点中精确复制本地结构。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9.3.3 向页面添加库项目
当向页面添加库项目时，将把实际内容以及对该库项目的引 用一起插入到文档中。此时，无需提供原项目就可以正常显示。在
页面中插入库项目的具体操作步骤如下。
（1）将插入点放在文档窗口中的合适位置。 （2）选择“窗口 > 资源”命令，启用“资源” 面板。单击
“库”按钮 ，进入“库”面板。
9.3.4 更新库文件
果选择
不更新，那么文档将保持与库项目的关联，可以在以后进行更新。
对库项目的更改包括重命名库项目、删除库项目、重新创建 已删除的库项目、修改库项目、更新库项目。
1．重命名库项目
2．删除库项目 3．重新创建已删除的库项目
4．修改库项目
9.2.5 管理模板
创建模板后可以重命名模板文件、修改模板文件和删除
模板文件。 1．重命名模板文件
2．修改模板文件
3．更新站点 4．删除模板文件
9.3 库
课堂案例——老年生活频道
创建库文件
向页面添加库项目 更新库文件
9.3.1 课堂案例—老年生活频道
使用“资源”面板添加库项目并使用注册的项目制作网页文档。
3．定义可编辑的重复区域 4．定义可编辑的重复表格
5．取消可编辑区域标记
9.2.4 创建基于模板的网页
创建基于模板的网页有两种方法 ，一是使用“新建”命令创建
基于模板的新文档；二是应用“资源”控制面板中的模板来创建基于 模板的网页。
1．使用新建命令创建基于模板的新文档
2．应用“资源”控制面板中的模板创建基于模板的网页
5．更新库项目
9. 4 课堂练习—婚礼策划网页
使用“库”面板，添加库项目；使用库中注册的项目制作网页文档。
效果图
9.5 课堂练习—食谱大全网页
使用“另存为模板”命令，将网页页面存为模板；使用“重 复区域”和“可编辑区域”按钮，创建重复区域和可编辑区域。
效果图
9.6 课后习题—美女购物网页
使用“另存为模板”命令，将网页页面存为模板；使用“可编辑区 域”按钮，创建可编辑区域。
效果图
9.3.2 创建库文件
库目可以包含文档<body>部分中的任意元素，包括文本、表
格、表单、Java applet、插件、ActiveX元素、导航条和图像等。 库项目只是一个对网页元素的引用，原始文件必须保存在指定的位
置。
可以使用文档<body>部分中的任意元素创建库文件，也可新 建一个空白库文件。 1．基于选定内容创建库项目 2．创建空白库项目
课堂学习目标
掌握资源面板的使用方法 掌握创建模板、可编辑区域、重复 区域、重复表格的创建方法 掌握模板的重命名、修改模板文件、 更新站点和删除模板文件的方法 掌握如何创建库文件 掌握重命名、删除、修改和更新库 项目的方法
9.1 “资源”控制面板
“资源”控制面板用于管理和使用制作网站的各种元素，如
效果图
第9章 模板和库
本章简介：
网站是由多个整齐、规范、流 畅的网页组成的。为了保持站点中 网页风格的统一，需要在每个网页 中制作一些相同的内容，如相同栏 目下的导航条、各类图标等，因此 网站制作者需要花费大量的时间和
精力在重复性的工作上。为了减轻
网页制作者的工作量，提高他们的 工作效率，将他们从大量重复性工 作中解脱出来， Dreamweaver CS6 提 供了模板和库功能。
地根目录下的“Templates”子文件夹中，文件扩展名为.dwt。如果
此文件夹不存在，当存储一个新模板时，Dreamweaver CS6将自动生 成此子文件夹。 1．创建空模板 2．将现有文档存为模板
9.2.3 定义和取消可编辑区域
创建模板后，网站设计者需要根据用户的需求对模板的内容进行
编辑，指定哪些内容是可以编辑的，哪些内容是不可以编辑的。模板
的不可编辑区域是指基于模板创建的网页中固定不变的元素，模板的 可编辑模板区域是指基于模板创建的网页中用户可以编辑的区域。当 创建一个模板或将一个网页另存为模板时，Dreamweaver CS6默认将 所有区域标志为锁定，因此用户要根据具体要求定义和修改模板的可 编辑区域。 1．对已有的模板进行修改
2．定义可编辑区域
图像或影片文件等。选择“窗口 > 资源”命令，启用“资源” 控制面板。
“资源”面板
9.2 模板
课堂案例——水果慕斯网页
创建模板
定义和取消可编辑区域 创建基于模板的网页
管理模板
9.2.1 课堂案例—水果慕斯网页
使用“插入”面板“常用”选项卡中的按钮，创建模板网页效果。
效果图
9.2.2 创建模板
在Dreamweaver CS6中创建模板非常容易，如同制作网页一样。 当用户创建模板之后，Dreamweaver CS6自动把模板存储在站点的本