中职 Dreamweaver CC网页设计与制作（3版）模块4（课件) .pptx

《中职 Dreamweaver CC网页设计与制作（3版）模块4（课件) .pptx》由会员分享，可在线阅读，更多相关《中职 Dreamweaver CC网页设计与制作（3版）模块4（课件) .pptx（60页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中职 Dreamweaver CC网页设计与制作（3版）模块4（课件)工信版Dreamweaver CC网页设计与制作（3版）01模块1 网页基础知识03模块3 网页布局05模块5 网站的测试与发布02模块2 初级应用04模块4 高级应用06模块6 综合应用任务描述 通过使用jQuery Mobile技术建立一个jQuery Mobile页面，学会jQuery Mobile元素的插入方法及属性设置。任务11 我的家乡建立jQuery Mobile页面任务解析 创建jQuery Mobile页面；学会jQuery Mobile列表视图的插入方法及属性设置；学会jQuery Mobile滑块的插入

2、方法及属性设置；任务11 效果图具体操作：（1）启动Dreamweaver CC，新建站点“我的家乡”，网站文件夹为素材库chapter4中的renwu11文件夹。（2）新建文件jq.html，在状态栏中页面大小处选择移动端页面大小“iphone 7 plus”，如图4-1所示。（3）创建jQuery Mobile页面。选择“插入-jQuery Mobile-页面”命令插入jQuery Mobile页面，如图4-2所示。图4-1选择页面大小 图4-2 插入jQuery Mobile页面（4）在弹出的“jQuery Mobile”对话框，如图4-3所示，选择连接类型和CSS类型，本任务以Drea

3、mweaver自带库源为例，单击确定后，系统弹出“页面”对话框，如图4-4所示，单击“确定”按钮。（5）“jQuery Mobile”的安装。可以从“jQuery Mobile文件”对话框中更新jQuery Mobile库，也可以从CDN中载入jQuery Mobile。（6）插入“jQuery Mobile”页面后，如图4-5所示。图4-3“jQuery Mobile文件”对话框 图4-4“页面”对话框 图4-5 jQuery Mobile页面（7）修改“jQuery Mobile”页面信息。修改头部。单击jQuery Mobile头部，编辑标题内容为“我的家乡”，如图4-6所示。修改内容。

4、单击jQuery Mobile内容栏，单击“插入-jQuery Mobile-列表视图”命令，“列表视图”对话框如图4-7所示，对列表选项进行编辑，分别输入文本：“地域文化、地方美食、过去未来和浓情亲人”，如图4-8所示。修改底部。单击jQuery Mobile底部，单击“插入-jQuery Mobile-滑块”命令，并编辑滑块元素，如图4-9所示。（8）按F12键保存并浏览网页，在浏览器窗口显示网页jq.html，如图4-10所示。图4-6 修改jQuery Mobile头部 图4-7“列表视图”对话框 图4-8 编辑“列表视图”图4-9 编辑“滑块”元素 图4-10 浏览试图任务描述 通过

5、使用jQuery Mobile技术建立一个jQuery Mobile页面，学会jQuery Mobile元素的插入方法及属性设置。任务11 我的家乡建立jQuery Mobile页面任务解析 创建jQuery Mobile页面；学会jQuery Mobile列表视图的插入方法及属性设置；学会jQuery Mobile滑块的插入方法及属性设置；任务11 效果图jQuery Mobile此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 jQuery是Dreamweaver CC制作手机浏览界面的主力插件。在Dreamweaver CC中有两个基于jQuery的子

6、项目，分别是jQuery Mobile和jQuery UI。其中jQuery Mobile主要用于主题的设计、网页的设计以及网页中的换页实践等功能的设计，并为所有的主流移动操作平台提供了高度统一的接口。而jQuery UI主要用做制作用户界面，如拖放、对话框、标签等功能的实现。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 页面即移动设备屏幕上看到的画面，执行“插入-jQuery Mobile-页面”命令，弹出“页面”对话框，如图4-11所示。图4-11“页面”对话框页面设置必须设置ID，默认情况下包括三部分：头部栏、内容栏和底部栏，其中头部栏和底部栏为可

7、选项。头部栏：一般包括页面标题或一两个按钮。内容栏：定义页面的内容，如文本、图像、表单和按钮等。底部栏：比头部栏灵活，样式也与头部栏不同，可以包含多个按钮。图3-19 表格的结构 页面jQuery Mobile中的列表是标准的HTML列表，可以设定有序列表和无序列表。执行“插入-jQuery Mobile-列表视图”命令，弹出“列表视图”对话框，如图4-12所示。列表类型：可以选择有序列表和无序列表。项目：表示序列中添加几个列表项。凹入：表示项目四周自动增加外边距，样式为圆角等。文本说明：添加一些对列表内容的说明性文字，使其更加丰富，显示在左侧。文本气泡：气泡数字是用来显示列表项相关的数字，有

8、计数功能如邮箱的邮件的个数。侧边：作为主要内容的附属信息部分，显示在右上角。拆分按钮：在jQuery Mobile的列表中,当选项内容需要做出两种不同操作时,会用到该选项,其作用是对链接按钮进行分割。实现分割的方法是在元素中再增加一个元素。分割后jQuery Mobile会自动设置第二个链接为蓝色箭头图标,图标的链接文字将在用户将鼠标悬停在图标上时显示。拆分按钮图标:当“拆分按钮”被选择后,“拆分按钮图标”才可选用,其作用是加按钮的可视性。列表视图3.布局网格:jQuery Mobile提供了一套样式分列布局。但由于手机的屏幕宽度限制,一般不建议使用分栏分列布局。如果将较小的元素(如按钮或导航

9、标签)并列排序,则可以使用分列布局。4.可折叠块:可折叠块的作用是隐藏或显示内容,应用于存储部分信息。5.复选框:执行“插入-jQuery Mobile-复选框”命令,弹出“复选框”对话框,如图4-13所示,有名称、复选框个数及布局等选项。6.单选按钮:执行“插入-jQuery Mobile-单选按钮”命令,弹出“单选按钮”对话框,图4-14所示。图4-13“复选框”对话框 图4-14“单选按钮”对话框布局网格、可折叠块、复选框和单选按钮执行“插入-jQuery Mobile-按钮”命令,弹出“按钮”对话框,如图4-15所示。按钮:添加按钮的个数。按钮类型：jQuery Mobile中的按钮可

10、以通过以下3种办法创建，如图4-16所示。链接:元素按钮:元素输入:元素jQuery Mobile中的按钮会自动获得样式，而或元素用于表单提交。输人类型：当按钮类型为输入时，输入类型被激活。jQuery Mobile提供了4种类型,如图4-17所示。位置:当按钮的个数大于1时,位置按钮被激活。默认情况下,以“组”的形式垂直排列,因为jQuery Mobile按钮都是块级元素,所以个按钮都填补了屏幕的宽度。如果位置选择“组”,布局选“水平排列”时,按钮会横向一个挨着一个地水平排列并设置按钮的排列适应内容的宽度。位置选择“内联”时,布局不可选,多个按钮会并列在同一行。图标:为按钮添加图标。图标位置

11、:图标在按钮中的位置。图4-16“按钮”类型 4-17 输入类型按钮图4-15“按钮”对话框8.滑块从一定范围的数字中选取值,滑块样式如图4-18所示。9.翻转切换开关翻转切换开关常用于开/关或对/错按钮。翻转切换开关样式如图4-19所示。图4-18滑块样式 图4-19翻转切换开关滑块、翻转切换开关任务描述 通过为“美丽中国”网站添加行为，实现网页特效，了解行为的概念、组成及作用，学会弹出信息、交换图像、打开浏览器窗口、显示/隐藏元素等行为的使用。任务12“美丽中国”行为的使用任务解析 添加“弹出信息”行为；添加“交换图像”行为；添加“显示/渐隐”行为。具体操作：（1）启动Dreamweave

12、r CC，新建站点“美丽中国”，网站文件夹为素材库chapter4的renwu12文件夹，打开网页文件index.html。（2）选择“窗口行为”命令或按Shift+F4快捷键，打开“行为”面板，如图4-21所示。选中网页中的图像“发现双创之星 走进上海”，单击“行为”面板上的“添加行为”按钮，在弹出的菜单中选择“弹出信息”命令，打开“弹出信息”对话框，输入文本“该图片不能被下载！”，如图4-22所示，单击“确定”按钮。图4-21“行为”面板 图4-22“弹出信息”对话框（3）在“事件”列表中单击默认的事件，出现一个 按钮，单击 按钮，在弹出的“事件”列表中选择“OnClick”，如图4-23

13、所示。按Ctrl+S保存文件，按F12键浏览网页，鼠标单击“发现双创之星 走进上海”图片时，弹出如图4-24所示的消息框。图4-23 选择事件列表 图4-24 弹出消息框（4）选中图片推荐栏下的图像“美丽中国”，单击“行为”面板上的“添加行为”按钮，在弹出菜单中选择“交换图像”命令，在弹出的“交换图像”对话框中将images/19.jpg设置为交换图像，勾选“鼠标滑开时恢复图像”复选框，如图4-25所示，单击“确定”按钮，系统将自动生成“交换图像”和“恢复交换图像”2个行为，默认的事件分别为“onMouseOver”和“onMouseOut”，如图4-26所示。图4-25“交换图像”对话框 图

14、4-26 交换图像行为面板（5）按F12键保存并浏览网页，当鼠标指向图片“美丽中国”时，图像变换为19.jpg，如图4-27和4-28所示，鼠标离开时又恢复到原来的图像。图4-27 交换前图像效果 图4-28 交换后图像效果图（6）选择网页上的banner图片，单击“行为”面板上的“添加行为”按钮，在弹出菜单中选择“效果blind”命令，打开“blind”对话框，如图4-29所示，通设置效果持续时间为5000毫秒，可见性为“hide”，方向为“up”,单击“确定”按钮，设置“事件”为“Onclick”，按F12键保存并浏览网页时，单击banner 图片查看效果。图4-29“blind”对话框

15、图4-30“scale”对话框（7）选择网页上的文字“城市展播”，单击“行为”面板上的“添加行为”按钮，在弹出菜单中选择“效果scale”命令，打开“scale”对话框，如图4-30所示，通设置效果持续时间为5000毫秒，可见性为“hide”，方向为“up”,单击“确定”按钮，设置“事件”为“Onclick”，按F12键保存并浏览网页时，实现放大文字效果。添加行为此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 行为是Dreamweaver预置的JavaScript程序库。每个行为包括一个动作和一个事件，其中，事件是指引发动作产生的条件，即触发动态效果的原因

16、，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播放声音等。Dreamweaver 采用了“行为”面板来完成行为中动作和事件的设置，从而实现动态效果。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处单击“窗口行为”命令或按Shift+F4快捷键，可打开“行为”面板，如图4-31所示。“显示设置事件”按钮：仅显示附加到当前文档的那些事件。“显示设置事件”是默认的视图。“显示所有事件”按钮：按字母顺序显示属于特定类别的所有事件，也包括网页中已设置的事件，如图4-33所示。图4-

17、31“行为”面板 图4-32 显示已设置事件 图4-33 显示所有事件“添加行为”按钮：单击该按钮，打开动作菜单，其中包括可附加到当前所选元素的所有行为，当从该菜单中选择一个动作时，将出现一个对话框，可指定附加动作的相关参数。“删除事件”按钮：单击该按钮，可从行为列表中删除所选事件和动作。“增加/降低事件值”按钮 ：可将特定事件的所选动作在行为列表中向上或向下移动。行为面板此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 要创建一个行为，首先要确定添加行为的对象，可以是图像、热点、超级链接文本、多媒体文件或者网页本身等，然后指定一个动作，最后再确定触发该动作

18、的事件。（1）在页面上选择一个元素，例如一个图像或一个链接。若要将行为附加到整个页面，在“文档”窗口左下角的标签选择器中单击 标签选中整个网页。（2）选择“窗口行为”命令打开“行为”面板，单击“行为”面板上的“添加行为”按钮，弹出动作菜单，如图4-34所示，从动作菜单中选择一种动作，弹出相应的参数设置对话框，进行参数设置后，单击“确定”按钮。图4-34 动作菜单 图4-35 事件列表（3）在“事件”列表中显示动作的默认事件，单击该事件名称旁边的按钮，弹出一个下拉菜单，如图4-35所示，其中包含可以触发该动作的所有事件，从该菜单中选择一种事件。添加行为此处添加你的信息此处添加你的信息此处添加你的

19、信息此处添加你的信息此处添加你的信息此处 3更改或删除行为附加了行为之后，可以更改触发动作的事件、添加或删除动作以及更改动作的参数。（1）选择一个附加有行为的对象。（2）选择“窗口行为”命令，打开“行为”面板。（3）可进行以下更改操作：若要编辑动作的参数，双击动作的名称或将其选中并按 Enter，弹出参数设置对话框，进行参数更改后，单击“确定”按钮。若要更改给定事件的多个动作顺序，选择某个动作然后单击“增加/降低事件值”按钮 或，或者选择该动作，将其剪切并粘贴到其它动作之间的合适位置。若要删除某个行为，将其选中然后单击“删除事件”按钮 或按 Delete键。更改或删除行为此处添加你的信息此处添

20、加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 所谓动作就是设定播放声音、更换图片、弹出警告消息框等特殊的JavaScript效果，在设定的事件发生时运行该动作。Dreamweaver 中预设了二十多种动作，下面介绍几种常用的动作。交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图像”动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像”时选择了“恢复”选项，就不再需要手动选择“恢复交换图像”动作。效果：为选中的对象添加增大/收缩、挤压、显示/隐藏、晃动、滑动、遮帘等效

21、果。弹出信息：可显示一个带有用户指定信息的JavaScript警告框和一个“确定”按钮，使用此动作只能提供信息，而不能为用户提供选择。打开浏览器窗口：可在一个新的窗口中打开URL，可指定新窗口的大小、特性和名称。改变属性：可通过改变图像、AP Div、表单等的某个属性来实现动态效果，例如，层的背景颜色或图像的宽或高。具体可更改哪个属性由当前选用的浏览器来决定。设置文本：可用于设置框架文本、状态栏文本和表单元素中的文本域文本。预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。检查表单：可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确

22、保用户输入正确的数据类型，防止表单提交到服务器后，文本域中包含无效的数据。显示/隐藏元素：显示、隐藏或恢复一个或多个AP元素的默认可见性。调用JavaScript：发生事件时，调用特定的JavaScript函数。动作名称及作用此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 事件用于指定选定的行为在何种情况下发生。例如想打开网页后立即播放音乐文件，则需要把事件指定为onLoad。下面介绍几种常见的事件。onLoad：载入对象时触发。onClick：鼠标单击时触发。onDblClick：鼠标双击时触发。onMouseDown：按下鼠标左键时触发。onMouse

23、Up：鼠标左键按下后释放时触发。onMouseOver：鼠标指针移到某对象时触发。onMouseMove：鼠标移动时触发。onMouseOut：鼠标离开某对象时触发。onKeyPress：当键盘上某个键按下并且放开时触发。onKeyDown：当键盘上某个键按下时触发。onKeyUp：当键盘上某个键松开时触发。事件名称及作用任务描述 通过使用模板快速布局“传工匠精神，筑职业梦想”网站，了解模板的概念及作用，学会模板文件的创建、可编辑区域的创建、模板的应用、分离与更新等操作。任务13“传工匠精神，筑职业梦想”模板的应用任务解析 创建模板文档；在模板中插入可编辑区域；使用模板新建网页文件；将模板应用

24、于已有的网页文件；使用模板快速更新网站。具体操作：（1）将素材库chapter4 中的renwu13文件夹复制到D盘根目录下。启动Dreamweaver CC，新建站点“传工匠精神，筑职业梦想”，站点文件夹为D:renwu13。在“文件”面板中双击打开站点文件夹中的index.html网页文件，如图4-36所示。（2）选择“文件另存为模板”命令，弹出“另存模板”对话框，如图4-37所示，在“站点”框中选择“传工匠精神，筑职业梦想”，在“另存为”框中输入名称index，单击“保存”按钮。系统将在站点根目录中自动创建名为templates的文件夹，并将模板文档ymsh.dwt保存到该文件夹中，“文

25、件”面板如图4-38所示。图4-36 index.html网页文件 图4-37“另存模板”对话框 图4-38“文件”面板具体操作：（3）打开index.dwt模板文档，将表格中第三行中的嵌套表格删除，将光标定位在第三行单元格中，选择“插入模板对象可编辑区域”，弹出“新建可编辑区域”对话框，如图4-39所示，采用默认名称框EditRegion3，单击“确定”按钮，即可在模板中插入一个可编辑区域，如图4-40所示，保存并关闭模板文档index.dwt。（4）选择“文件新建”命令，打开“新建文档”对话框，如图4-41所示，在左边栏中选择“网站模板”，“站点”列表中选择“传工匠精神，筑职业梦想”，“模

26、板”列表中选中index模板，单击“创建”按钮，即可创建一个基于该模板的新文档。图4-39 “新建可编辑区域”对话框 图4-40 插入可编辑区域的模板 图4-41“新建文档”对话框具体操作：（5）将光标定位到可编辑区域中，删除其中的区域名称，选择“插入图像”命令，在弹出的“选择图像源文件”对话框中选择images/2.jpg，单击“确定”按钮，结果如图4-42所示，以wy1.html为名进行保存并关闭文档。（6）以同样的方式创建wy2.html和wy3.html文件，在可编辑区域中分别插入images文件夹中的3.jpg和4.jpg，如图4-43、4-44所示。图4-42 wy1.html文档

27、 图4-43 wy2.html文档 图4-44 wy3.html文档具体操作：（7）打开wy4.html，选择“工具模板应用模板到页”命令，弹出“选择模板”对话框，如图4-45所示，在“站点”下拉列表中选择“传工匠精神，筑职业梦想”，在“模板”列表中选择index，单击“选定”按钮，弹出“不一致的区域名称”对话框，如图4-46示。选择“Document body”，在“将内容移到新区域”列表中选择可编辑区域，选择“Document head”，在“将内容移到新区域”列表中选择“head”，单击“确定”按钮。（8）此时模板文档index.dwt被应用于wy4.html，结果如图4-47所示，保存

28、并关闭文档。图4-45“选择模板”对话框 图4-46“不一致的区域名称”对话框 图4-47 wy4.html文档 具体操作：（9）在“文件”面板中，双击打开index.dwt模板文档，将“中国梦实践者”和“匠心传世”分别链接到wy3.html和wy2.html，按【Ctrl+S】键保存模板，弹出“更新模板文件”对话框，如图4-48所示，单击“更新”按钮，出现“更新页面”对话框，更新完成后单击“关闭”按钮。（10）打开站点文件夹中的index.html，按【F12】键进行预览。图4-48“更新模板文件”对话框模板此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

29、 一个网站的大多数网页一般都要求风格一致、功能相似。对于这种类型的网页，如果逐一制作，不但效率低而且不便于网页的更新。Dreamweaver中模板的应用，很好地解决了这一问题。模板是一种用于设计统一风格页面的特殊类型文档，使用模板既能快速创建风格一致的各个网页，还能快速改变整个站点的布局和外观，为后期的网站维护提供方便。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）在空白文档中创建模板文件选择“文件新建文档HTML模板”，如图4-49所示，单击“创建”按钮，即可创建一个空白模板文档。图4-49 新建模板 创建模板此处添加你的信息此处添加你的信息此处添

30、加你的信息此处添加你的信息此处添加你的信息此处（2）从现有文档创建模板打开要转存为模板的网页文件，执行下列操作之一，弹出“另存模板”对话框，如图4-50所示。选择“文件另存为模板”命令。在“插入”面板选择“模板”中的“创建模板”，如图4-51所示。图4-50“另存模板”对话框 图4-51 创建模板 选择“插入模板创建模板”命令。在对话框的“站点”下拉列表中选择一个用来保存模板的站点，在“另存为”文本框中为模板输入一个唯一的名称，单击“保存”按钮，即可将网页文件保存为模板。提示:Dreamweaver会自动将模板文档以.dwt为扩展名保存在站点根目录的Templates文件夹中。如果Templa

31、tes文件夹在站点中不存在，则Dreamweaver自动创建该文件夹。创建模板此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）在模板文档中定义可编辑区域。在模板文档中，选择要定义为可编辑区域的内容，或将光标定位到要插入可编辑区域的位置。执行下列操作之一，打开“新建可编辑区域”对话框，如图4-52所示。选择菜单“插入模板可编辑区域”命令。按【Ctrl+Alt+V】组合键。在“插入”面板选择“模板”中的“可编辑区域”。在“名称”文本框中输入名称，单击“确定”按钮，即可创建可编辑区域。提示：命名一个可编辑区域时，不能使用单引号、双引号、尖括号和“&”等符号。

32、不能对同一模板中的多个可编辑区域使用相同的名称。可将整个表格或单个单元格标记为可编辑区域，但不能将多个单元格标记为单个可编辑区域。可编辑区域不能嵌套插入。（2）取消可编辑区域，如果要将模板文件中的某个可编辑区域重新锁定，可以将该可编辑区域取消。在打开的模板文档中，选择要取消的可编辑区域。执行以下操作之一，可删除可编辑区域，使该区域重新锁定。单击鼠标右键，从弹出的快捷菜单中选择“模板删除模板标记”命令。选择“工具模板删除模板标记”命令。建立和取消可编辑区域此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处模板创建完成后，就可以将其应用到网页文件中了，在Dream

33、weaver CC中，可以通过以下方法创建基于模板的网页文件。（1）选择“文件新建网站模板”选项，在“站点”列表中选择站点，在“模板”列表中选择相应的模板，单击“创建”按钮，即可使用该模板创建一个网页文件。（2）打开一个网页文件，选择“工具模板应用模板到页”命令，弹出“选择模板”对话框，如图4-53所示，从模板列表中选择一个模板，单击“选定”按钮。提示:将模板应用到包含内容的文档时，会尝试将其内容与模板中的区域进行匹配。当文档中内容不能自动指定到模板区域时，将弹出“不一致的区域名称”对话框，如图4-54所示。图 4-53“选择模板”对话框 图 4-54“不一致的区域名称”对话框选择“Docum

34、ent body”，在“将内容移到新区域”列表中选择要移动到的可编辑区域名称。选择“Document head”，在“将内容移到新区域”列表中选择“head”。若在“将内容移到新区域”列表中选择“不在任何地方”，则选定的未解析内容将从文档中删除。若要将所有未解析的内容移动到选定的区域，应单击“用于所有内容”按钮。创建基于模板的网页任务描述 通过制作在线调查表，学会IIS的配置及Dreamweaver动态网站的创建，能够正确插入表单及表单元素，学会表单元素的属性设置方法。任务14 制作在线调查表 表单的应用任务解析 安装与配置IIS；在Dreamweaver中创建动态站点；创建动态网页；插入表单

35、及表单对象。具体操作：（1）在D盘根目录创建renwu14文件夹，选择“开始Windows系统控制面板”，在打开的控制面板窗口中单击“程序”选项，在打开的程序设置页面中选择“启用和关闭Windows功能”，弹出“Windows功能”对话框，如图4-56所示，勾选“Internet Information Services”复选框，单击“确定”按钮，系统开始安装IIS和Web服务组件。图4-56“Windows功能”对话框 具体操作：（2）选择“开始Windows管理工具Internet Information Services（IIS）管理器”，打开“Internet Information

36、Services（IIS）管理器”窗口，在左侧窗格中展开“网站-Default Web Site”选项，右键选择“管理网站高级设置”，菜单如图4-57所示，打开“高级设置”对话框，设置物理路径为“D：renwu14”,如图4-58所示，单击“确定”按钮。再次右键选择“编辑绑定”，在IP地址列表中输入本机IP地址（本机IP地址可以通过ipconfig命令查看），如图4-59所示。图4-57“默认网站属性”对话框 图4-58“高级设置”对话框图 4-59“网站绑定”对话框 具体操作：（4）启动Dreamweaver CC,选择“站点新建站点”命令，设置站点名称为“制作在线调查表”，站点文件夹为D：

37、renwu14。单击“服务器”选项，分别在“基本”和“高级”项中完成如图4-60、4-61所示的设置。图4-60“服务器 基本”项设置 图4-61“服务器 高级”项设置具体操作：（5）选择“文件新建空白页ASP VBScript”创建一个动态网页，单击文档工具栏上的“设计”按钮，切换到设计视图，在“标题”框中输入“在线调查”。（7）选择“插入表单表单”命令插入一个表单，插入的表单在设计窗口中呈红色虚线显示。（8）将光标定位到表单中，选择“插入表格”命令，插入一个9行2列、宽度为600像素的表格，设置边距、间距、边框均为0。（9）选中表格第一行单元格，单击属性面板上的“合并单元格”按钮，在合并后

38、的单元格中输入文本“在线调查表”，居中显示。同样的操作，将表格第9行单元格合并。（10）在表格第2至8行的第一列单元格依次输入“姓名”等，如图4-62所示。图4-62 在线调查表具体操作：（14）将光标定位在表格第5行第2列单元格中，选择“插入表单复选框组”命令，弹出“复选框组”对话框，在“名称”框中输入“ah”，在“标签”及“值”下面输入“体育”等选项，如图4-65所示，在“布局，使用”项中勾选“换行符(标签)”，单击“确定”按钮。将光标移动到各个标签的后面，按Delete键删除换行符。图4-65“复选框组”对话框 图4-66“列表值”对话框（15）将光标定位在表格第6行第2列单元格中，选择

39、“插入表单选择（列表/菜单）”命令插入一个列表/菜单。选中刚插入的列表/菜单，在属性面板设置“选择”名称为“zy”，单击“列表值”按钮，打开“列表值”对话框，输入图4-66所示的项目标签及值，单击“确定”按钮。（16）将光标定位在表格第7行第2列单元格中，选择“插入表单文件域”命令插入一个文件域，选中该文件域，在属性面板设置“文件域”名称为“photo”。具体操作：（17）将光标定位在表格第8行第2列单元格中，选择“插入表单文本区域”命令插入一个文本区域，选中该文本区域，在属性面板设置“文本域”名称为“jianli”，“行数”为6，“初始值”为“请填写你的简历及荣誉：”，如图4-67所示。（1

40、8）将光标定位在表格第9行的单元格中，选择“插入表单按钮”命令插入一个按钮，选中该按钮，在属性面板设置“值”为“完成”“，动作”为“提交表单”。同样的操作，再插入一个按钮，设置“动作”为“重设表单”。（19）选择“文件保存”命令，输入文件名index.asp，单击“保存”按钮。（20）打开IE浏览器，在地址栏中输入本机IP地址，按Enter键浏览本网页，如图4-68所示。图4-67“文本域”属性面板图 4-68 index.asp网页文件此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 1静态网页和动态网页：在网站设计中，网页根据其生成方式不同，分为静态网页

41、和动态网页。（1）静态网页：静态网页是指纯粹HTML格式的网页，是网站建设初期经常采用的一种形式。网页设计者把内容设计成静态网页，向每位浏览者发送完全相同的页面，访问者只能被动地浏览网页内容，不涉及任何交互活动，其扩展名一般是htm、html、shtml、xml等。（2）动态网页：动态网页是采用动态网站技术（如ASP、JSP、PHP）生成的网页，以数据库技术为基础，根据浏览者的输入信息提供不同的页面，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，根据使用服务器技术不同，其扩展名一般为aspx、asp、jsp、php等。2动态网页的特征（1）动态网页一般以数据库技术为基础，可以

42、大大降低网站维护的工作量。（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、后台管理等。（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。（4）采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。动态网页设计基础此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 网站要在服务器平台下运行，离开一定的平台，动态交互式网站就不能正常运行。要将本地计算机设置为Web服务器，必须在计算机上安装能够提供Web服务的应用程序，对于开发ASP页面来讲，安装IIS是最

43、好的选择。IIS的英文全称是“Internet Information Server”，中文含义是互联网信息服务，它是一种网页服务组件，其中包括Web服务器、FTP服务器和SMTP服务器等，分别提供网页浏览、文件传输和邮件发送等服务。Web服务器的安装与配置此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 IIS的作用是将客户端与服务器端进行连接，当访问者在浏览器中发出一个请求时，这个请求通过网络发送到服务器，然后服务器再将它交给IIS处理，并根据请求的文件进行相应的处理。安装IIS的具体操作步骤如下：（1）选择“开始Windows系统控制面板”命令，选择“

44、程序”，弹出“程序”对话框，如图4-74所示。（2）单击“程序和功能”选项，打开“Windows功能”对话框，如图4-75所示，选择“Internet Information Services”，单击“确定”，系统开始安装IIS和Web服务组件。（3）IIS安装完成后，打开“开始Windows管理工具Internet Information Services（IIS）管理器”，将会在打开的窗口中看到“Internet Information Services（IIS）管理器”的工具，如图4-76所示。图4-74“程序”窗口 图4-75“Windows组件向导”对话框图 4-76“（IIS）管理

45、器”窗口 IIS安装此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处IIS安装完成后，必须对其进行配置才能正常使用。具体操作步骤如下：（1）选择“开始设置控制面板管理工具Internet信息服务”命令，弹出“Internet信息服务”窗口，在左侧窗格中展开“网站”选项，便可显示“默认网站”，如图4-77所示。（2）右单击“默认网站”，选择“属性”命令，打开“默认网站属性”对话框，如图4-78所示。（3）选择“网站”选项卡，可设置网站描述与网站IP地址。IP地址可以设置为本机地址。若只希望进行本机的调试，可以将IP地址设置为127.0.0.1。（4）选择“主目

46、录”选项卡，可设置站点的目录及访问者权限等。默认的本地路径是“C:Inetpubwwwroot”，单击“浏览”按钮可以选择其他目录，如图4-79所示。图4-77“Internet信息服务”窗口 图4-78“默认网站属性”对话框图 4-79 设置本地路径 图4-80设置默认文档（5）选择“文档”选项卡，可设置网站的默认文档。单击“添加”按钮可添加默认文档，如图4-80所示。在“默认文档”列表中单击“”按钮，可调整当前选定文档的顺序。配置IIS此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 表单是Internet用户和服务器之间进行信息交流的一种重要工具，它将

47、用户信息收集起来并提交给Web服务器上特定的程序进行处理。表单应用非常广泛，如制作网络调查、博客论坛、留言板、用户注册和网络购物等。1表单的组成一个完整的表单由两部分组成，表单对象和应用程序。其中表单对象就是HTML源代码，起描述作用；应用程序是服务器和客户端的交互，通过它们实现对用户信息的处理，不使用处理脚本或应用程序就不能搜集表单数据。一个完整的表单对象有三个基本组成部分：（1）表单标签：包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。多数情况下，我们通常将表单标签称为表单。（2）表单域：包含了文本字段、密码字段、隐藏域、文本区域、复选框、单选按钮、列表/菜单和文件域等

48、。（3）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。表单此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 创建一个表单对象前应先插入一个表单，用于确定表单的范围，所有的表单对象都应建立在表单中。要插入表单，首先将光标先定位到要插入表单位置，然后使用以下操作之一：选择“插入表单表单”命令，如图4-82所示。单击 插入面板“表单”类别中的表单按钮，如图4-83所示。插入的表单在文档窗口中以红色虚线表示，如图4-84所示。如果没有看到所创建的表单边框，选择“查看可

49、视化助理不可见元素”命令将边框线显示出来。图4-82插入表单菜单 图4-83 插入栏表单列表 图4-84 插入表单标签 插入表单此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 单击表单轮廓线，或从文档窗口左下角的标签选择器中选择“”标签，选中表单签，对应的表单属性面板如图4-85所示。图4-85“表单”属性面板（1）“表单ID”：标识表单的唯一名称，该名称可以在脚本语言中引用。默认情况下，系统自动为表单命名为form+N。（2）“动作”：设置用于处理表单内提交信息的后台处理文件，一般常见的是ASP或PHP文件等。（3）“方法”：选择表单中数据向服务器发送的

50、方法，包括默认、POST和GET选项。默认：默认的发送方法。一般情况下，浏览器采用的是GET方法。POST：将发送的数据嵌入在HTTP请求中，可以发送大量的数据，安全性比较高。GET：将发送的数据附加到URL地址中，只能够发送少量的数据。（4）“编码类型”：选择向服务器提交的数据类型所采用的编码处理方法，如果要通过“文件域”上传文件，需要选择“multipart/form-data”类型。表单属性设置此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 文本字段是一种基本的表单对象，可以在文本字段中输入简单文本。文本字段可以接受文本、字母或数字等内容，输入的内容