模块四-Dreamweaver高级应用课件.ppt

1、本章要点本章导读学习任务上机实训模块四模块四 DreamweaverDreamweaver高级应用高级应用本本 章章 要要 点点4.1 spry布局控件布局控件 SprySpry菜单栏菜单栏 SprySpry选项卡式面板选项卡式面板 Spry Spry折叠式折叠式 Spry Spry可折叠面板可折叠面板4.2 添加行为添加行为 “行为行为”面板面板 添加行为添加行为 更改或删除行为更改或删除行为 动作名称及其作用动作名称及其作用 事件名称及其作用事件名称及其作用4.3 模板模板 创建模板创建模板 建立和取消可编辑区域建立和取消可编辑区域 创建基于模板的网页创建基于模板的网页 更新模板及基于模板

2、的网页更新模板及基于模板的网页 将网页从模板中分离将网页从模板中分离4.4 动态网页设计基础动态网页设计基础 静态网页和动态网页静态网页和动态网页 动态网页的特征动态网页的特征 4.5 Web服务器的安装与配置服务器的安装与配置 安装安装IISIIS 配置配置IISIIS4.6 插入表单插入表单 表单的组成表单的组成 插入表单插入表单 表单属性设置表单属性设置 插入文本字段插入文本字段 插入文本区域插入文本区域 插入复选框插入复选框 插入单选按钮插入单选按钮 插入单选按钮组插入单选按钮组 插入选择（列表插入选择（列表/菜单）菜单）插入文件域插入文件域 插入按钮插入按钮 检查表单检查表单4.7

3、数据库的基本操作数据库的基本操作 创建数据库创建数据库 创建数据库连接创建数据库连接 向数据库插入记录向数据库插入记录 查询数据库中的记录查询数据库中的记录 验证用户登录验证用户登录 本章主要通过本章主要通过使用使用spryspry布局控件制作动态导航栏，可以实布局控件制作动态导航栏，可以实现利用行为实现动态效果，利用模板快速制作风格统一功能现利用行为实现动态效果，利用模板快速制作风格统一功能相似的网站；利用相似的网站；利用IISIIS配置动态站点；利用表单实现网页用户配置动态站点；利用表单实现网页用户与服务器之间信息的交流；利用与服务器之间信息的交流；利用AccessAccess创建数据库并

4、在创建数据库并在DREamwaverDREamwaver中利用动态页面实现记录插入、查询及用户身份中利用动态页面实现记录插入、查询及用户身份验证等操作。验证等操作。本本 章章 导导 读读1、学会、学会spryspry布局控件的使用布局控件的使用；2、学会行为的添加方法及常用行为的使用；、学会行为的添加方法及常用行为的使用；3、学会网站的创建、应用及更新等操作；、学会网站的创建、应用及更新等操作；4、学会配置、学会配置IIS，在，在Dreamweaver中连接数据库、插入表中连接数据库、插入表单、检查表单；单、检查表单；5、学会制作动态网页，实现查询、插入、登录等操作。、学会制作动态网页，实现查

5、询、插入、登录等操作。学学 习习 任任 务务 Spry是一组用标准是一组用标准HTML、CSS和和JavaScript编写的可重用控件。在利用编写的可重用控件。在利用Dreamweaver制作网页时，可以方便地插入这些控件（采用最简单的制作网页时，可以方便地插入这些控件（采用最简单的HTML和和CSS代码），然后设置控件的样式。常用的代码），然后设置控件的样式。常用的Spry布局控件有：布局控件有：Spry菜单栏、菜单栏、Spry选项卡式面板、选项卡式面板、Spry折叠式、折叠式、Spry可折叠面板。可折叠面板。1Spry菜单栏菜单栏 选择选择“插入插入spryspry菜单栏菜单栏”命令，打开

6、命令，打开“spry菜单栏菜单栏”对话框，对话框，4.1 spry布局控件布局控件 Dreamweaver 允许插入两种菜单栏控件：垂直菜单栏和水平菜单栏，允许插入两种菜单栏控件：垂直菜单栏和水平菜单栏，各属性含义如下：各属性含义如下：“菜单条菜单条”：用于输入：用于输入Spry菜单的名称，该名称可在脚本语言中使用。菜单的名称，该名称可在脚本语言中使用。“项目项目1”：用于设置：用于设置Spry菜单的主菜单。菜单的主菜单。“项目项目1.1”：用于设置相应：用于设置相应Spry主菜单的下一级菜单。主菜单的下一级菜单。“文本文本”：指定相应菜单的名称。：指定相应菜单的名称。“链接链接”：指定相应菜

7、单的链接文件。：指定相应菜单的链接文件。“标题标题”：指定相应菜单的标题。：指定相应菜单的标题。“目标目标”：指定相应菜单的目标属性，同页面链接的目标属性一样，共有：指定相应菜单的目标属性，同页面链接的目标属性一样，共有四个属性值：四个属性值：_blank、_parent、_top和和_self。4.1 spry布局控件布局控件 2Spry选项卡式面板选项卡式面板选择选择“插入插入spryspry选项卡式面板选项卡式面板”命令，命令，“属性属性”面板如图所示面板如图所示4.1 spry布局控件布局控件 各选项含义如下：各选项含义如下：“选项卡面板选项卡面板”：用于输入：用于输入Spry控件的名

8、称，该名称可在脚控件的名称，该名称可在脚本语言中使用。本语言中使用。“标签标签”：用于设置：用于设置Spry选项卡名称。选项卡名称。“默认面板默认面板”：用于设置选项卡面板默认打开的面板。：用于设置选项卡面板默认打开的面板。根据需要修改根据需要修改SpryTabbedPanels.css样式表，为选项卡样式表，为选项卡面板控件中的主容器（面板控件中的主容器（TabbedPanels）元素定义属性。）元素定义属性。3Spry折叠式折叠式 选择选择“插入插入spryspry折叠式折叠式”命令，命令，“属性属性”面板如图所示面板如图所示4.1 spry布局控件布局控件 各选项含义如下：各选项含义如下

9、：“折叠式折叠式”：用于输入：用于输入Spry控件的名称，该名称可在脚本语控件的名称，该名称可在脚本语言中使用。言中使用。“标签标签1”：用于设置：用于设置Spry折叠面板的名称。折叠面板的名称。根据需要修改根据需要修改SpryAccordion.css样式表，为选项卡面板样式表，为选项卡面板控件中的主容器（控件中的主容器（AccordionPanel）元素定义属性。）元素定义属性。4Spry可折叠面板可折叠面板 选择选择“插入插入spry可折叠面板可折叠面板”命令，命令，“属性属性”面板如图所示面板如图所示4.1 spry布局控件布局控件 各选项含义如下：各选项含义如下：“可折叠面板可折叠面

10、板”：用于输入：用于输入Spry控件的名称，该名称可在脚控件的名称，该名称可在脚本语言中使用。本语言中使用。“显示显示”：用于设置：用于设置Spry可折叠面板的显示状态，有可折叠面板的显示状态，有“打开打开”和和“已关闭已关闭”两个属性值。两个属性值。“默认状态默认状态”：用于设置：用于设置Spry可折叠面板的默认状态，有可折叠面板的默认状态，有“打开打开”和和“已关闭已关闭”两个属性值。两个属性值。根据需要修改根据需要修改SpryCollapsiblePanels.css样式表，为选项样式表，为选项卡面板控件中的主容器（卡面板控件中的主容器（CollapsiblePanel）元素定义属性。）

11、元素定义属性。行为是行为是DreamweaverDreamweaver预置的预置的JavaScriptJavaScript程序库。每个行为包括一个动程序库。每个行为包括一个动作和一个事件，其中，事件是指引发动作产生的条件，即触发动态效果作和一个事件，其中，事件是指引发动作产生的条件，即触发动态效果的原因，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后的原因，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播放声音等。窗口、弹出信息、播放声音等

12、。Dreamweaver Dreamweaver 采用了采用了“行为行为”面板来完成行为中动作和事件的设置，从面板来完成行为中动作和事件的设置，从而实现动态效果。而实现动态效果。4.2 添加行为添加行为 1 1“行为行为”面板面板单击单击“窗口窗口行为行为”命令或按命令或按Shift+F4Shift+F4快捷键，可打开快捷键，可打开“行为行为”面板，面板，如图如示：如图如示：面板各选项含义：面板各选项含义：“显示设置事件显示设置事件”按钮按钮 ：仅显示附加到当前文档的那些事件。：仅显示附加到当前文档的那些事件。“显显示设置事件示设置事件”是默认的视图，如图是默认的视图，如图1 1所示。所示。“

13、显示所有事件显示所有事件”按钮按钮 ：按字母顺序显示属于特定类别的所有事件，：按字母顺序显示属于特定类别的所有事件，也包括网页中已设置的事件，如图也包括网页中已设置的事件，如图2 2所示。所示。4.2 添加行为添加行为“添加行为添加行为”按钮按钮 ：单击该按钮，打开动作菜单，其中包括可附加：单击该按钮，打开动作菜单，其中包括可附加到当前所选元素的所有行为，当从该菜单中选择一个动作时，将出现到当前所选元素的所有行为，当从该菜单中选择一个动作时，将出现一个对话框，可指定附加动作的相关参数。一个对话框，可指定附加动作的相关参数。“删除事件删除事件”按钮按钮 ：单击该按钮，可从行为列表中删除所选事件和

14、：单击该按钮，可从行为列表中删除所选事件和动作。动作。“增加增加/降低事件值降低事件值”按钮按钮 ：可将特定事件的所选动作在行为列表：可将特定事件的所选动作在行为列表中向上或向下移动。中向上或向下移动。2添加行为添加行为要创建一个行为，首先要确定添加行为的对象，可以是图像、热点、超要创建一个行为，首先要确定添加行为的对象，可以是图像、热点、超级链接文本、多媒体文件或者网页本身等，然后指定一个动作，最后再级链接文本、多媒体文件或者网页本身等，然后指定一个动作，最后再确定触发该动作的事件。确定触发该动作的事件。（1）在页面上选择一个元素，例如一个图像或一个链接。若要将行为附）在页面上选择一个元素，

15、例如一个图像或一个链接。若要将行为附加到整个页面，在加到整个页面，在“文档文档”窗口左下角的标签选择器中单击窗口左下角的标签选择器中单击 标标签选中整个网页。签选中整个网页。（2）选择）选择“窗口窗口行为行为”命令打开命令打开“行为行为”面板，单击面板，单击“行为行为”面板上面板上的的“添加行为添加行为”按钮按钮，弹出动作菜单，如图，弹出动作菜单，如图1所示，从动作菜单中选择所示，从动作菜单中选择一种动作，弹出相应的参数设置对话框，进行参数设置后，单击一种动作，弹出相应的参数设置对话框，进行参数设置后，单击“确定确定”按钮。按钮。4.2 添加行为添加行为（3 3）在）在“事件事件”列表中显示动

16、作的默认事件，单击该事件名称旁边列表中显示动作的默认事件，单击该事件名称旁边的按钮的按钮 ，弹出一个下拉菜单，如图，弹出一个下拉菜单，如图2 2所示，其中包含可以触发该动作所示，其中包含可以触发该动作的所有事件，从该菜单中选择一种事件。的所有事件，从该菜单中选择一种事件。3更改或删除行为更改或删除行为附加了行为之后，可以更改触发动作的事件、添加或删除动作以及更改附加了行为之后，可以更改触发动作的事件、添加或删除动作以及更改动作的参数。动作的参数。（1）选择一个附加有行为的对象。）选择一个附加有行为的对象。（2）选择）选择“窗口窗口行为行为”命令，打开命令，打开“行为行为”面板。面板。（3）可进

17、行以下更改操作：）可进行以下更改操作：若要编辑动作的参数，双击动作的名称或将其选中并按若要编辑动作的参数，双击动作的名称或将其选中并按 Enter，弹出参，弹出参数设置对话框，进行参数更改后，单击数设置对话框，进行参数更改后，单击“确定确定”按钮。按钮。若要更改给定事件的多个动作顺序，选择某个动作然后单击若要更改给定事件的多个动作顺序，选择某个动作然后单击“增加增加/降低降低事件值事件值”按钮按钮 或或，或者选择该动作，将其剪切并粘贴到其它动作之间的，或者选择该动作，将其剪切并粘贴到其它动作之间的合适位置。合适位置。若要删除某个行为，将其选中然后单击若要删除某个行为，将其选中然后单击“删除事件

18、删除事件”按钮按钮 或按或按 Delete键。键。4.2 添加行为添加行为 4动作名称及其作用动作名称及其作用所谓动作就是设定播放声音、更换图片、弹出警告消息框等特殊的所谓动作就是设定播放声音、更换图片、弹出警告消息框等特殊的JavaScript效果，在设定的事件发生时运行该动作。效果，在设定的事件发生时运行该动作。交换图像：通过更改交换图像：通过更改“img”标签的标签的“src”属性将一个图像和另一个图像进行交换。属性将一个图像和另一个图像进行交换。恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图交换图

19、像像”动作附加到某个对象时都会自动添加该动作；如果在附加动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像交换图像”时选择时选择了了“恢复恢复”选项，就不再需要手动选择选项，就不再需要手动选择“恢复交换图像恢复交换图像”动作。动作。效果：为选中的对象添加增大效果：为选中的对象添加增大/收缩、挤压、显示收缩、挤压、显示/隐藏、晃动、滑动、遮帘等效果。隐藏、晃动、滑动、遮帘等效果。弹出信息：可显示一个带有用户指定信息的弹出信息：可显示一个带有用户指定信息的JavaScript警告框和一个警告框和一个“确定确定”按钮，按钮，使用此动作只能提供信息，而不能为用户提供选择。使用此动作只能提供信

20、息，而不能为用户提供选择。打开浏览器窗口：可在一个新的窗口中打开打开浏览器窗口：可在一个新的窗口中打开URL，可指定新窗口的大小、特性和名，可指定新窗口的大小、特性和名称。称。改变属性：可通过改变图像、改变属性：可通过改变图像、AP Div、表单等的某个属性来实现动态效果。、表单等的某个属性来实现动态效果。设置文本：可用于设置框架文本、状态栏文本和表单元素中的文本域文本。设置文本：可用于设置框架文本、状态栏文本和表单元素中的文本域文本。预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下

21、载而导致延迟。图像显示时由于下载而导致延迟。检查表单：可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保检查表单：可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型，防止表单提交到服务器后，文本域中包含无效的数据。用户输入正确的数据类型，防止表单提交到服务器后，文本域中包含无效的数据。显示显示隐藏元素：显示、隐藏或恢复一个或多个隐藏元素：显示、隐藏或恢复一个或多个AP元素的默认可见性。元素的默认可见性。调用调用JavaScript：发生事件时，调用特定的：发生事件时，调用特定的JavaScript函数。函数。4.2 添加行为添加行为 5事件名称及其

22、作用事件名称及其作用事件用于指定选定的行为在何种情况下发生。例如想打开网页后立即播放事件用于指定选定的行为在何种情况下发生。例如想打开网页后立即播放音乐文件，则需要把事件指定为音乐文件，则需要把事件指定为onLoad。下面介绍几种常见的事件。下面介绍几种常见的事件。onLoad：载入对象时触发。：载入对象时触发。onClick：鼠标单击时触发。：鼠标单击时触发。onDblClick：鼠标双击时触发。：鼠标双击时触发。onMouseDown：按下鼠标左键时触发。：按下鼠标左键时触发。onMouseUp：鼠标左键按下后释放时触发。：鼠标左键按下后释放时触发。onMouseOver：鼠标指针移到某对

23、象时触发。：鼠标指针移到某对象时触发。onMouseMove：鼠标移动时触发。：鼠标移动时触发。onMouseOut：鼠标离开某对象时触发。：鼠标离开某对象时触发。onKeyPress：当键盘上某个键按下并且放开时触发。：当键盘上某个键按下并且放开时触发。onKeyDown：当键盘上某个键按下时触发。：当键盘上某个键按下时触发。onKeyUp：当键盘上某个键松开时触发。：当键盘上某个键松开时触发。4.2 添加行为添加行为 模板是一种用于设计统一风格页面的特殊类型文档，使用模板既能快模板是一种用于设计统一风格页面的特殊类型文档，使用模板既能快速创建风格一致的各个网页，还能快速改变整个站点的布局和

24、外观，为后速创建风格一致的各个网页，还能快速改变整个站点的布局和外观，为后期的网站维护提供方便。期的网站维护提供方便。1创建模板创建模板（1）在空白文档中创建模板文件）在空白文档中创建模板文件选择选择“文件文件新建新建空白页空白页HTML模板模板”，单击，单击“创建创建”按钮，即可创按钮，即可创建一个空白模板文档。建一个空白模板文档。（2）从现有文档创建模板）从现有文档创建模板打开要转存为模板的网页文件，执行下列操作之一，弹出打开要转存为模板的网页文件，执行下列操作之一，弹出“另存模板另存模板”对话框：对话框：选择选择“文件文件另存为模板另存为模板”命令。命令。在在“插入插入”面板的面板的“常

25、用常用”类别中，单击类别中，单击“模板模板”下拉菜单中的下拉菜单中的“创建创建模板模板”，选择选择“插入插入模板对象模板对象创建模板创建模板”命令。命令。在对话框的在对话框的“站点站点”下拉列表中选择一个用来保存模板的站点，在下拉列表中选择一个用来保存模板的站点，在“另另存为存为”文本框中为模板输入一个唯一的名称，单击文本框中为模板输入一个唯一的名称，单击“保存保存”按钮，即可将按钮，即可将网页文件保存为模板。网页文件保存为模板。提示：自动将模板文档以提示：自动将模板文档以.dwt为扩展名保存在站点根目录的为扩展名保存在站点根目录的Templates文文件夹中。如果件夹中。如果Template

26、s文件夹在站点中不存在，将自动创建。文件夹在站点中不存在，将自动创建。4.3 模板模板 2建立和取消可编辑区域建立和取消可编辑区域（1）在模板文档中定义可编辑区域。）在模板文档中定义可编辑区域。在模板文档中，选择要定义为可编辑区域的内容，或将光标定位到要插在模板文档中，选择要定义为可编辑区域的内容，或将光标定位到要插入可编辑区域的位置。入可编辑区域的位置。执行下列操作之一，打开执行下列操作之一，打开“新建可编辑区域新建可编辑区域”对话框。对话框。选择菜单选择菜单“插入插入模板对象模板对象可编辑区域可编辑区域”命令。命令。按【按【Ctrl+Alt+V】组合键。】组合键。在在“插入插入”面板的面板

27、的“常用常用”类别中，单击类别中，单击“模板模板”下拉菜单中的下拉菜单中的“可编辑区域可编辑区域”。在在“名称名称”文本框中输入名称，单击文本框中输入名称，单击“确定确定”按钮，即可创建可编辑区按钮，即可创建可编辑区域。域。提示提示命名一个可编辑区域时，不能使用单引号、双引号、尖括号和命名一个可编辑区域时，不能使用单引号、双引号、尖括号和“&”等符号。等符号。不能对同一模板中的多个可编辑区域使用相同的名称。不能对同一模板中的多个可编辑区域使用相同的名称。可将整个表格或单个单元格标记为可编辑区域，但不能将多个单元格标记为单个可将整个表格或单个单元格标记为可编辑区域，但不能将多个单元格标记为单个可

28、编辑区域。可编辑区域。可编辑区域不能嵌套插入。可编辑区域不能嵌套插入。（2）取消可编辑区域）取消可编辑区域在打开的模板文档中，选择要取消的可编辑区域。在打开的模板文档中，选择要取消的可编辑区域。执行以下操作之一，可删除可编辑区域，使该区域重新锁定。执行以下操作之一，可删除可编辑区域，使该区域重新锁定。单击鼠标右键，从弹出的快捷菜单中选择单击鼠标右键，从弹出的快捷菜单中选择“模板模板删除模板标记删除模板标记”命令，命令，选择选择“修改修改模板模板删除模板标记删除模板标记”命令。命令。4.3 模板模板3创建基于模板的网页创建基于模板的网页在在Dreamweaver 中，可以通过以下方法创建基于模板

29、的网页文件。中，可以通过以下方法创建基于模板的网页文件。（1）选择）选择“文件文件新建新建模板中的页模板中的页”选项，在选项，在“站点站点”列表中选择站列表中选择站点，在点，在“模板模板”列表中选择相应的模板，单击列表中选择相应的模板，单击“创建创建”按钮，即可使用该按钮，即可使用该模板创建一个网页文件。模板创建一个网页文件。（2）打开一个网页文件，选择）打开一个网页文件，选择“修改修改模板模板应用模板到页应用模板到页”命令，弹命令，弹出出“选择模板选择模板”对话框，从模板列表中选择一个模板，单击对话框，从模板列表中选择一个模板，单击“选定选定”按钮。按钮。提示：将模板应用到包含内容的文档时，

30、会尝试将其内容与模板中的区域提示：将模板应用到包含内容的文档时，会尝试将其内容与模板中的区域进行匹配。当文档中内容不能自动指定到模板区域时，将弹出进行匹配。当文档中内容不能自动指定到模板区域时，将弹出“不一致的不一致的区域名称区域名称”对话框，如图所示。对话框，如图所示。4.3 模板模板 选择选择“Document body”，在，在“将内容移到新区域将内容移到新区域”列表中选择要移动列表中选择要移动到的可编辑区域名称。选择到的可编辑区域名称。选择“Document head”，在，在“将内容移到新区域将内容移到新区域”列表中选择列表中选择“head”。若在若在“将内容移到新区域将内容移到新区

31、域”列表中选择列表中选择“不在任何地方不在任何地方”，则选定的未解析内容，则选定的未解析内容将从文档中删除。若要将所有未解析的内容移动到选定的区域，应单击将从文档中删除。若要将所有未解析的内容移动到选定的区域，应单击“用于所有用于所有内容内容”按钮。按钮。4更新模板及基于模板的网页更新模板及基于模板的网页（1）模板创建后，可以采用以下方法打开要更新的模板。）模板创建后，可以采用以下方法打开要更新的模板。在在“资源资源”面板中，单击面板中，单击“模板模板”按钮，在模板列表框中选择要更新的按钮，在模板列表框中选择要更新的模板，单击右下角的模板，单击右下角的“编辑编辑”按钮按钮。在在“文档文档”窗口

32、中若已打开基于某个模板的文档，选择窗口中若已打开基于某个模板的文档，选择“修改修改模板模板打开附加模板打开附加模板”命令，可将该文档使用的模板打开。命令，可将该文档使用的模板打开。（2）自动更新与手动更新。）自动更新与手动更新。自动更新：模板内容修改后保存模板文档时，此时会弹出自动更新：模板内容修改后保存模板文档时，此时会弹出“更新模板文更新模板文件件”对话框，单击对话框，单击“不更新不更新”按钮，则不自动更新，以后可以手动更新。按钮，则不自动更新，以后可以手动更新。单击单击“更新更新”按钮，弹出按钮，弹出“更新页面更新页面”对话框，如图所示，自动更新相关对话框，如图所示，自动更新相关的所有网

33、页，更新完成后，单击的所有网页，更新完成后，单击“关闭关闭”按钮。按钮。4.3 模板模板手动更新。手动更新。在在“文档文档”窗口中打开要更新的文档，选择菜单窗口中打开要更新的文档，选择菜单“修改修改模板模板更新当前页更新当前页”命命令，可只对当前文档进行更新。令，可只对当前文档进行更新。选择选择“修改修改模板模板更新页面更新页面”命令，弹出命令，弹出“更新页面更新页面”对话框。若用所有被修对话框。若用所有被修改的模板更新整个站点中的所有相关网页，则在改的模板更新整个站点中的所有相关网页，则在“查看查看”下拉列表中选择下拉列表中选择“整个站整个站点点”，在右边的下拉列表中选择站点名称；若只更新应

34、用特定模板的所有网页，则，在右边的下拉列表中选择站点名称；若只更新应用特定模板的所有网页，则在在“查看查看”下拉列表中选择下拉列表中选择“文件使用文件使用”，在右边的下拉列表中选择模板的名称，在右边的下拉列表中选择模板的名称，单击单击“开始开始”按钮，即可更新整个站点或应用指定模板的所有网页。按钮，即可更新整个站点或应用指定模板的所有网页。5将网页从模板中分离将网页从模板中分离 将模板应用于网页文档后，网页文档便和模板相关联了，当修改模板后，将模板应用于网页文档后，网页文档便和模板相关联了，当修改模板后，相关联文档的内容也会随之发生改变。如果想让网页文档不关联模板，可相关联文档的内容也会随之发

35、生改变。如果想让网页文档不关联模板，可将该文档从模板中分离。分离后，模板中的内容依然会在网页文档中存在，将该文档从模板中分离。分离后，模板中的内容依然会在网页文档中存在，但整个文档会变得可以编辑。但整个文档会变得可以编辑。打开要从模板分离的网页。打开要从模板分离的网页。选择选择“修改修改模板模板从模板中分离从模板中分离”命令，即可将文档从模板中分离出命令，即可将文档从模板中分离出来。来。4.3 模板模板1 1静态网页和动态网页静态网页和动态网页（1 1）静态网页）静态网页静态网页是指纯粹静态网页是指纯粹HTMLHTML格式的网页，是网站建设初期经常采用的一种形式。网页格式的网页，是网站建设初期

36、经常采用的一种形式。网页设计者把内容设计成静态网页，向每位浏览者发送完全相同的页面，访问者只能设计者把内容设计成静态网页，向每位浏览者发送完全相同的页面，访问者只能被动地浏览网页内容，不涉及任何交互活动，其扩展名一般是被动地浏览网页内容，不涉及任何交互活动，其扩展名一般是htmhtm、htmlhtml、shtmlshtml、xmlxml等。等。（2 2）动态网页）动态网页动态网页是采用动态网站技术（如动态网页是采用动态网站技术（如ASPASP、JSPJSP、PHPPHP）生成的网页，以数据库技术）生成的网页，以数据库技术为基础，根据浏览者的输入信息提供不同的页面，与网页上的各种动画、滚动字为基

37、础，根据浏览者的输入信息提供不同的页面，与网页上的各种动画、滚动字幕等视觉上的幕等视觉上的“动态效果动态效果”没有直接关系，根据使用服务器技术不同，其扩展名没有直接关系，根据使用服务器技术不同，其扩展名一般为一般为aspxaspx、aspasp、jspjsp、phpphp等。等。4.4 动态网页设计基础动态网页设计基础2动态网页的特征动态网页的特征（1）动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量；）动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量；（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、）采用动态网页技术的网站可以实现更多的功能，如用

38、户注册、用户登录、在线调查、后台管理等。在线调查、后台管理等。（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。时服务器才返回一个完整的网页。（4）采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适）采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。应搜索引擎的要求。要将本地计算机设置为要将本地计算机设置为WebWeb服务器，必须在计算机上安装能够提供服务器，必须在计算机上安装能够提供WebWeb服服务的应用程序，对于开发务的应用程序

39、，对于开发ASPASP面来讲，安装面来讲，安装IISIIS是最好的选择。是最好的选择。IISIIS的英文全称是的英文全称是“Internet Information Server”“Internet Information Server”，中文含义是互联，中文含义是互联网信息服务，它是一种网页服务组件，其中包括网信息服务，它是一种网页服务组件，其中包括WebWeb服务器、服务器、FTPFTP服务器服务器和和SMTPSMTP服务器等，分别提供网页浏览、文件传输和邮件发送等服务。服务器等，分别提供网页浏览、文件传输和邮件发送等服务。1 1安装安装IISIIS（1 1）选择）选择“开始开始设置设置控

40、制面板控制面板添加或删除程序添加或删除程序”命令，弹出命令，弹出“添加或删添加或删除程序除程序”对话框，单击左侧对话框，单击左侧“添加添加/删除删除WindowsWindows组件组件”按钮，打开按钮，打开“Windows“Windows组组件向导件向导”对话框，如图对话框，如图4-754-75所示，在所示，在“组件组件”列表中选择列表中选择“Internet“Internet信息服务信息服务”；单击单击“下一步下一步”，系统开始安装，系统开始安装IISIIS和和WebWeb服务组件。在安装过程中需要提供服务组件。在安装过程中需要提供WindowsWindows系统安装光盘或指定文件路径。安装

41、完成后单击系统安装光盘或指定文件路径。安装完成后单击“完成完成”即可。即可。IISIIS安装完成后，打开安装完成后，打开“控制面板控制面板”的的“管理工具管理工具”，将会在打开的窗口中看到，将会在打开的窗口中看到“Internet“Internet信息服务信息服务”的工具，如图所示。的工具，如图所示。4.5 Web服务器的安装与配置服务器的安装与配置 2 2配置配置IISIISIISIIS安装完成后，必须对其进行配置才能正常使用。具体操作步骤如下：安装完成后，必须对其进行配置才能正常使用。具体操作步骤如下：（1 1）选择）选择“开始开始设置设置控制面板控制面板管理工具管理工具InternetI

42、nternet信息服务信息服务”命令，弹命令，弹出出“Internet“Internet信息服务信息服务”窗口，在左侧窗格中展开窗口，在左侧窗格中展开“网站网站”选项，便可显示选项，便可显示“默默认网站认网站”，如图所示。，如图所示。4.5 Web服务器的安装与配置服务器的安装与配置 （2）右单击）右单击“默认网站默认网站”，选择，选择“属性属性”命令，打开命令，打开“默认网站属性默认网站属性”对话对话框。框。（3）选择）选择“网站网站”选项卡，可设置网站描述与网站选项卡，可设置网站描述与网站IP地址。地址。IP地址可以设置地址可以设置为本机地址。若只希望进行本机的调试，可以将为本机地址。若只

43、希望进行本机的调试，可以将IP地址设置为地址设置为127.0.0.1。（4）选择）选择“主目录主目录”选项卡，可设置站点的目录及访问者权限等。默认的本选项卡，可设置站点的目录及访问者权限等。默认的本地路径是地路径是C:Inetpubwwwroot，单击，单击“浏览浏览”按钮可以选择其他目录；按钮可以选择其他目录；（5）选择）选择“文档文档”选项卡，可设置网站的默认文档。单击选项卡，可设置网站的默认文档。单击“添加添加”按钮可添按钮可添加默认文档，如图所示。在加默认文档，如图所示。在“默认文档默认文档”列表中单击列表中单击“”按钮，可调整当前按钮，可调整当前选定文档的顺序。选定文档的顺序。1 1

44、表单的组成表单的组成一个完整的表单由两部分组成，表单对象和应用程序。其中表单对象就一个完整的表单由两部分组成，表单对象和应用程序。其中表单对象就是是HTMLHTML源代码，起描述作用；应用程序是服务器和客户端的交互，通过源代码，起描述作用；应用程序是服务器和客户端的交互，通过它们实现对用户信息的处理，不使用处理脚本或应用程序就不能搜集表它们实现对用户信息的处理，不使用处理脚本或应用程序就不能搜集表单数据。单数据。一个完整的表单对象有三个基本组成部分：一个完整的表单对象有三个基本组成部分：（1 1）表单：包含了处理表单数据所用）表单：包含了处理表单数据所用CGICGI程序的程序的URLURL以及

45、数据提交到服以及数据提交到服务器的方法。多数情况下，我们通常将表单标签称为表单。务器的方法。多数情况下，我们通常将表单标签称为表单。（2 2）表单域：包含了文本字段、密码字段、隐藏域、文本区域、复选）表单域：包含了文本字段、密码字段、隐藏域、文本区域、复选框、单选按钮、列表框、单选按钮、列表/菜单和文件域等。菜单和文件域等。（3 3）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传送到服务器上的送到服务器上的CGICGI脚本或者取消输入，还可以用表单按钮来控制其他脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工

46、作。定义了处理脚本的处理工作。4.6 插入表单插入表单2 2插入表单插入表单创建一个表单对象前应先插入一个表单，用于确定表单的范围，所有的创建一个表单对象前应先插入一个表单，用于确定表单的范围，所有的表单对象都应建立在表单中。要插入表单，首先将光标先定位到要插入表单对象都应建立在表单中。要插入表单，首先将光标先定位到要插入表单位置，然后使用以下操作之一：表单位置，然后使用以下操作之一：选择选择“插入插入表单表单表单表单”命令命令 单击插入面板单击插入面板“表单表单”类别中的表单按钮类别中的表单按钮 4.6 插入表单插入表单 插入的表单在文档窗口中以红色虚线表示。如果没有看到所创建的表单边插入的

47、表单在文档窗口中以红色虚线表示。如果没有看到所创建的表单边框，选择框，选择“查看查看可视化助理可视化助理不可见元素不可见元素”命令将边框线显示出来。命令将边框线显示出来。3 3表单属性设置表单属性设置单击表单轮廓线，或从文档窗口左下角的标签选择器中选择单击表单轮廓线，或从文档窗口左下角的标签选择器中选择“”“”标签，选中表单签，对应的表单属性面板如图所示标签，选中表单签，对应的表单属性面板如图所示4.6 插入表单插入表单（1）“表单表单ID”：标识表单的唯一名称，该名称可以在脚本语言中引用。：标识表单的唯一名称，该名称可以在脚本语言中引用。默认情况下，系统自动为表单命名为默认情况下，系统自动为

48、表单命名为form+N。（2）“动作动作”：设置用于处理表单内提交信息的后台处理文件，一般常见：设置用于处理表单内提交信息的后台处理文件，一般常见的是的是ASP或或PHP文件等。文件等。（3）“方法方法”：选择表单中数据向服务器发送的方法，包括默认、：选择表单中数据向服务器发送的方法，包括默认、POST和和GET选项。选项。默认：默认的发送方法。一般情况下，浏览器采用的是默认：默认的发送方法。一般情况下，浏览器采用的是GET方法。方法。POST：将发送的数据嵌入在：将发送的数据嵌入在HTTP请求中，可以发送大量的数据，安全性请求中，可以发送大量的数据，安全性比较高比较高GET：将发送的数据附加

49、到：将发送的数据附加到URL地址中，只能够发送少量的数据。地址中，只能够发送少量的数据。（4）“编码类型编码类型”：选择向服务器提交的数据类型所采用的编码处理方法，：选择向服务器提交的数据类型所采用的编码处理方法，如果要通过如果要通过“文件域文件域”上传文件，需要选择上传文件，需要选择“multipart/form-data”类型。类型。4 4插入文本字段插入文本字段文本字段是一种基本的表单对象，可以在文本字段中输入简单文本。文文本字段是一种基本的表单对象，可以在文本字段中输入简单文本。文本字段可以接受文本、字母或数字等内容，输入的内容可以显示为单行、本字段可以接受文本、字母或数字等内容，输入

50、的内容可以显示为单行、多行或密码形式多行或密码形式4.6 插入表单插入表单（1）光标定位到要插入文本字段位置，选择）光标定位到要插入文本字段位置，选择“插入插入表单表单文本域文本域”命令，或单击命令，或单击插入面板插入面板“表单表单”类别中的类别中的“文本字段文本字段”按钮按钮。（2）弹出）弹出“输入标签辅助功能属性输入标签辅助功能属性”对话框，可以用来为插入的文本字段添加标签，对话框，可以用来为插入的文本字段添加标签，如果无需设置文本标签，可直接单击如果无需设置文本标签，可直接单击“取消取消”按钮。按钮。“文本域文本域”：为该文本字段定义一个名称，该名称将在后台处理程序中引用，通过：为该文本