模块四-Dreamweaver高级应用课件

,本章要点,本章导读,学习任务,上机实训,模块四 Dreamweaver高级应用,本章要点模块四 Dreamweaver高级应用,本 章 要 点,4.1 spry布局控件,Spry菜单栏,Spry选项卡式面板,Spry折叠式,Spry可折叠面板,4.2,添加行为,“行为”面板,添加行为,更改或删除行为,动作名称及其作用,事件名称及其作用,4.3 模板,创建模板,建立和取消可编辑区域,创建基于模板的网页,更新模板及基于模板的网页,将网页从模板中分离,4.4 动态网页设计基础,静态网页和动态网页,动态网页的特征,4.5 Web服务器的安装与配置,安装IIS,配置IIS,4.6 插入表单,表单的组成,插入表单,表单属性设置,插入文本字段,插入文本区域,插入复选框,插入单选按钮,插入单选按钮组,插入选择（列表/菜单）,插入文件域,插入按钮,检查表单,4.7,数据库的基本操作,创建数据库,创建数据库连接,向数据库插入记录,查询数据库中的记录,验证用户登录,本 章 要 点4.1 spry布局控件4.5 Web服务器的,本章主要,通过,使用spry布局控件制作动态导航栏，可以实现利用行为实现动态效果，利用模板快速制作风格统一功能相似的网站；利用IIS配置动态站点；利用表单实现网页用户与服务器之间信息的交流；利用Access创建数据库并在DREamwaver中利用动态页面实现记录插入、查询及用户身份验证等操作,。,本 章 导 读,本章主要通过使用spry布局控件制作动态导航栏，可以实,1、学会,spry布局控件的使用,；,2、学会,行为的添加方法及常用行为的使用,；,3、学会网站,的创建、应用及更新等操作；,4、学会配置IIS，在Dreamweaver中连接数据库、插入表单、检查表单；,5、学会制作动态网页，实现查询、插入、登录等操作。,学 习 任 务,学 习 任 务,Spry是一组用标准HTML、CSS和JavaScript编写的可重用控件。在利用Dreamweaver制作网页时，可以方便地插入这些控件（采用最简单的HTML和CSS代码），然后设置控件的样式。常用的Spry布局控件有：Spry菜单栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板。,1Spry菜单栏,选择“插入spryspry菜单栏”命令，打开“spry菜单栏”对话框，,4.1 spry布局控件,Dreamweaver 允许插入两种菜单栏控件：垂直菜单栏和水平菜单栏，,Spry是一组用标准HTML、CSS和JavaScript,各属性含义如下：,“菜单条”：用于输入Spry菜单的名称，该名称可在脚本语言中使用。,“项目1”：用于设置Spry菜单的主菜单。,“项目1.1”：用于设置相应Spry主菜单的下一级菜单。,“文本”：指定相应菜单的名称。,“链接”：指定相应菜单的链接文件。,“标题”：指定相应菜单的标题。,“目标”：指定相应菜单的目标属性，同页面链接的目标属性一样，共有四个属性值：_blank、_parent、_top和_self。,4.1 spry布局控件,各属性含义如下：4.1 spry布局控件,2Spry选项卡式面板,选择“插入spryspry选项卡式面板”命令，“属性”面板,如图所示,4.1 spry布局控件,各选项含义如下：,“选项卡面板”：用于输入Spry控件的名称，该名称可在脚本语言中使用。,“标签”：用于设置Spry选项卡名称。,“默认面板”：用于设置选项卡面板默认打开的面板。,根据需要修改SpryTabbedPanels.css样式表，为选项卡面板控件中的主容器（TabbedPanels）元素定义属性。,2Spry选项卡式面板4.1 spry布局控件 各选,3Spry折叠式,选择“插入spryspry折叠式”命令，“属性”面板,如图所示,4.1 spry布局控件,各选项含义如下：,“折叠式”：用于输入Spry控件的名称，该名称可在脚本语言中使用。,“标签1”：用于设置Spry折叠面板的名称。,根据需要修改SpryAccordion.css样式表，为选项卡面板控件中的主容器（AccordionPanel）元素定义属性。,3Spry折叠式4.1 spry布局控件 各选项含义,4Spry可折叠面板,选择“插入spry可折叠面板”命令，“属性”面板,如图所示,4.1 spry布局控件,各选项含义如下：,“可折叠面板”：用于输入Spry控件的名称，该名称可在脚本语言中使用。,“显示”：用于设置Spry可折叠面板的显示状态，有“打开”和“已关闭”两个属性值。,“默认状态”：用于设置Spry可折叠面板的默认状态，有“打开”和“已关闭”两个属性值。,根据需要修改SpryCollapsiblePanels.css样式表，为选项卡面板控件中的主容器（CollapsiblePanel）元素定义属性。,4Spry可折叠面板4.1 spry布局控件 各选项,行为是Dreamweaver预置的JavaScript程序库。每个行为包括一个动作和一个事件，其中，事件是指引发动作产生的条件，即触发动态效果的原因，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播放声音等。,Dreamweaver 采用了“行为”面板来完成行为中动作和事件的设置，从而实现动态效果。,4.2,添加行为,1“行为”面板,单击“窗口行为”命令或按Shift+F4快捷键，可打开“行为”面板，如图,如示：,4.2 添加行为 1“行为”面板,面板各选项含义：,“显示设置事件”按钮：仅显示附加到当前文档的那些事件。“显示设置事件”是默认的视图，如图,1,所示。,“显示所有事件”按钮：按字母顺序显示属于特定类别的所有事件，也包括网页中已设置的事件，如图,2,所示。,4.2,添加行为,“添加行为”按钮：单击该按钮，打开动作菜单，其中包括可附加到当前所选元素的所有行为，当从该菜单中选择一个动作时，将出现一个对话框，可指定附加动作的相关参数。,“删除事件”按钮：单击该按钮，可从行为列表中删除所选事件和动作。,“增加/降低事件值”按钮 ：可将特定事件的所选动作在行为列表中向上或向下移动。,面板各选项含义：4.2 添加行为“添加行为”按钮,2添加行为,要创建一个行为，首先要确定添加行为的对象，可以是图像、热点、超级链接文本、多媒体文件或者网页本身等，然后指定一个动作，最后再确定触发该动作的事件。,（1）在页面上选择一个元素，例如一个图像或一个链接。若要将行为附加到整个页面，在“文档”窗口左下角的标签选择器中单击 标签选中整个网页。,（2）选择“窗口行为”命令打开“行为”面板，单击“行为”面板上的“添加行为”按钮，弹出动作菜单，如图1所示，从动作菜单中选择一种动作，弹出相应的参数设置对话框，进行参数设置后，单击“确定”按钮。,4.2,添加行为,（3）在“事件”列表中显示动作的默认事件，单击该事件名称旁边的按钮，弹出一个下拉菜单，如图,2,所示，其中包含可以触发该动作的所有事件，从该菜单中选择一种事件。,2添加行为4.2 添加行为（3）在“事件”列表中显,3更改或删除行为,附加了行为之后，可以更改触发动作的事件、添加或删除动作以及更改动作的参数。,（1）选择一个附加有行为的对象。,（2）选择“窗口行为”命令，打开“行为”面板。,（3）可进行以下更改操作：,若要编辑动作的参数，双击动作的名称或将其选中并按 Enter，弹出参数设置对话框，进行参数更改后，单击“确定”按钮。,若要更改给定事件的多个动作顺序，选择某个动作然后单击“增加/降低事件值”按钮 或，或者选择该动作，将其剪切并粘贴到其它动作之间的合适位置。,若要删除某个行为，将其选中然后单击“删除事件”按钮 或按 Delete键。,4.2,添加行为,3更改或删除行为4.2 添加行为,4动作名称及其作用,所谓动作就是设定播放声音、更换图片、弹出警告消息框等特殊的JavaScript效果，在设定的事件发生时运行该动作。,交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。,恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图像”动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像”时选择了“恢复”选项，就不再需要手动选择“恢复交换图像”动作。,效果：为选中的对象添加增大/收缩、挤压、显示/隐藏、晃动、滑动、遮帘等效果。,弹出信息：可显示一个带有用户指定信息的JavaScript警告框和一个“确定”按钮，使用此动作只能提供信息，而不能为用户提供选择。,打开浏览器窗口：可在一个新的窗口中打开URL，可指定新窗口的大小、特性和名称。,改变属性：可通过改变图像、AP Div、表单等的某个属性来实现动态效果。,设置文本：可用于设置框架文本、状态栏文本和表单元素中的文本域文本。,预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。,检查表单：可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型，防止表单提交到服务器后，文本域中包含无效的数据。,显示隐藏元素：显示、隐藏或恢复一个或多个AP元素的默认可见性。,调用JavaScript：发生事件时，调用特定的JavaScript函数。,4.2,添加行为,4动作名称及其作用4.2 添加行为,5事件名称及其作用,事件用于指定选定的行为在何种情况下发生。例如想打开网页后立即播放音乐文件，则需要把事件指定为onLoad。下面介绍几种常见的事件。,onLoad：载入对象时触发。,onClick：鼠标单击时触发。,onDblClick：鼠标双击时触发。,onMouseDown：按下鼠标左键时触发。,onMouseUp：鼠标左键按下后释放时触发。,onMouseOver：鼠标指针移到某对象时触发。,onMouseMove：鼠标移动时触发。,onMouseOut：鼠标离开某对象时触发。,onKeyPress：当键盘上某个键按下并且放开时触发。,onKeyDown：当键盘上某个键按下时触发。,onKeyUp：当键盘上某个键松开时触发。,4.2,添加行为,5事件名称及其作用4.2 添加行为,模板是一种用于设计统一风格页面的特殊类型文档，使用模板既能快速创建风格一致的各个网页，还能快速改变整个站点的布局和外观，为后期的网站维护提供方便,。,1创建模板,（1）在空白文档中创建模板文件,选择“文件新建空白页HTML模板”，单击“创建”按钮，即可创建一个空白模板文档。,（2）从现有文档创建模板,打开要转存为模板的网页文件，执行下列操作之一，弹出“另存模板”对话框,：,选择“文件另存为模板”命令。,在“插入”面板的“常用”类别中，单击“模板”下拉菜单中的“创建模板”，,选择“插入模板对象创建模板”命令。,在对话框的“站点”下拉列表中选择一个用来保存模板的站点，在“另存为”文本框中为模板输入一个唯一的名称，单击“保存”按钮，即可将网页文件保存为模板。,提示,：,自动将模板文档以.dwt为扩展名保存在站点根目录的Templates文件夹中。如果Templates文件夹在站点中不存在，,将,自动创建。,4.3 模板,模板是一种用于设计统一风格页面的特殊类型文档，使,2建立和取消可编辑区域,（1）在模板文档中定义可编辑区域。,在模板文档中，选择要定义为可编辑区域的内容，或将光标定位到要插入可编辑区域的位置。,执行下列操作之一，打开“新建可编辑区域”对话框。,选择菜单“插入模板对象可编辑区域”命令。,按【Ctrl+Alt+V】组合键。,在“插入”面板的“常用”类别中，单击“模板”下拉菜单中的“可编辑区域”。,在“名称”文本框中输入名称，单击“确定”按钮，即可创建可编辑区域。,提示,命名一个可编辑区域时，不能使用单引号、双引号、尖括号和“&”等符号。,不能对同一模板中的多个可编辑区域使用相同的名称。,可将整个表格或单个单元格标记为可编辑区域，但不能将