模块5 高级应用

DreamweaverCC网页设计与制作（4版）模块5高级应用01模块1网页基础知识03模块4网页布局05模块6网站的测试与发布02模块3初级应用04模块5高级应用06模块7综合应用07模块2HTML代码任务11我的家乡——建立jQueryMobile页面任务描述通过使用jQueryMobile技术建立一个jQueryMobile页面，学会jQueryMobile元素的插入方法及属性设置。。任务解析（1）启动Dreamweaver2021，新建站点“我的家乡”。（2）新建文件jq.html，在状态栏中页面大小处选择移动端页面大小“iphone7plus”。创建jQueryMobile页面。选择“插入→jQueryMobile→页面”命令插入jQueryMobile页面。（4）在弹出的“jQueryMobile”对话框，如图5-3所示，采用默认设置，单击“确定”按钮，系统弹出“页面”对话框，设置页面ID，单击“确定”按钮。任务11我的家乡——建立jQueryMobile页面（5）插入“jQueryMobile”页面。（6）修改“jQueryMobile”页面信息：①修改头部。单击jQueryMobile头部，编辑标题内容为“我的家乡”。②修改内容。单击jQueryMobile内容栏，单击“插入→jQueryMobile→列表视图”命令，打开“列表视图”对话框，对列表选项进行编辑，分别输入文本：“地域文化、地方美食、过去未来和浓情亲人”。③修改底部。单击jQueryMobile底部，单击“插入→jQueryMobile→滑块”命令，并编辑滑块元素。（8）按F12键保存并浏览网页，在浏览器窗口显示网页jq.html，如下图所示。任务12“零食食代”——行为的使用任务解析（1）启动Dreamweaver2021，新建站点“零食食代”，网站文件夹为任务renwu12文件夹，打开网页文件index.html。（2）选择“窗口→行为”命令或按Shift+F4组合键，打开“行为”面板。选中<body>标记选中整个页面，单击“添加行为”按钮，选择“弹出信息”命令，打开“弹出信息”对话框，输入文本“建议使用2560*1440分辨率浏览本网页！”，单击“确定”按钮。（3）在“事件”列表中选择“OnLoad”，按Ctrl+S组合键保存，按F12键浏览网页。任务描述通过为“零食食代”网站添加行为，实现网页特效，了解行为的概念、组成及作用，学会弹出信息、交换图像等常用行为的使用。任务12“零食食代”——行为的使用（4）选中网页中的Banner图像，单击“添加行为”按钮，选择“交换图像”命令，弹出“交换图像”对话框，，单击“设定原始档为”后浏览按钮选择banner2.jpg，勾选“鼠标滑开时恢复图像”复选框，单击“确定”按钮，系统将自动生成“交换图像”和“恢复交换图像”2个行为，默认的事件分别为“onMouseOver”和“onMouseOut”。（5）按F12键保存并浏览网页，当鼠标指向banner图像时，图像变换为banner2.jpg，鼠标离开时又恢复到原来的图像。（6）选择“热门食品”栏目中的第1幅图片，单击“添加行为”按钮，选择“效果→blind”命令，打开“blind”对话框，通设置效果持续时间为3000毫秒，可见性为“hide”，方向为“up”,单击“确定”按钮，设置“事件”为“Onclick”，同样的操作，为“热门食品”中其他图片也添加该行为，最后按F12键保存并浏览网页查看效果。（7）选择“最新关注”栏目中的第1幅图片，单击“添加行为”按钮，选择“效果→shake”命令，打开“shake”对话框，通设置效果持续时间为1000毫秒，方向为“left”,单击“确定”按钮，设置“事件”为“OnClick”。同样的操作，为“最新关注”中其他图片也添加该行为，最后按F12键保存并浏览网页查看效果。任务12“零食食代”——行为的使用（8）选择“插入→DIV”命令打开“插入DIV”对话框，设置ID为q1，单击“新建CSS规则”按钮，单击“确定”按钮。选择“定位”类别，设置Position为absolute，width、height为100px，单击“确定”按钮。（9）光标定位到DIV中，选择“插入→image”命令插入hd.jpg。（10）选择<body>标记，在“行为”面板单击“添加行为”按钮，选择“拖动AP元素”命令，打开“拖动AP元素”对话框，在“AP元素”列表中选择“divq1”，单击“确定”按钮，设置“事件”为“OnLoad”，按F12键保存并浏览网页，用鼠标拖动DIV到页面任意位置。（11）在表格最后一行文本“零食食代”的后面输入“【关闭窗口】”。选中刚输入的文本，在“行为”面板添加行为“调用JavaScipt”，在弹出的“调用JavaScipt”对话框中输入“window.close()”，，单击“确定”按钮，设置“事件”为“OnClick”，按F12键保存并浏览网页，单击“关闭窗口”即可关闭浏览器窗口。知识概述一、行为的概念及组成1.行为的概念行为是Dreamweaver预置的JavaScript程序库。2.行为的组成每个行为包括一个动作和一个事件，其中，事件是指引发动作产生的条件，即触发动态效果的原因，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果知识概述二、行为的创建与编辑1.创建行为（1）选择一个页面元素；（2）打开行为面板，单击“添加行为”按钮，选择一种动作，设置相应参数；（3）在“事件”列表中选择事件。2.更改或删除行为（1）编辑行为（2）调整行为顺序（4）删除行为知识概述三、常用动作名称及其作用（1）交换图像与恢复交换图像（2）弹出信息（3）打开浏览器窗口（4）拖动AP元素（5）效果：为选中的对象添加各种效果，包括Blind（百叶窗效果）、Bounce（弹跳效果）、Clip（裁剪效果）、Drop（掉落）、Fade（淡入淡出）、Fold（折叠）、Highlight（高亮）、Puff（膨胀消失）、Pulsate（脉动）、Scale（缩放）、Shake（抖动）、Slide（滑动）等。（6）改变属性（7）设置文本（8）预先载入图像（9）检查表单（10）显示/隐藏元素知识概述四、事件名称及其作用·onLoad：页面或元素加载完成时触发。·onunLoad：用户离开页面时触发。·onClick：鼠标单击时触发。·onDblClick：鼠标双击时触发。·onFocus：元素获得焦点时触发·onMouseDown：按下鼠标左键时触发。·onMouseUp：鼠标左键按下后释放时触发。·onMouseOver：鼠标指针移到某对象时触发。·onMouseMove：鼠标移动时触发。·onMouseOut：鼠标离开某对象时触发。·onKeyPress：当键盘上某个键按下并且放开时触发。·onKeyDown：当键盘上某个键按下时触发。·onKeyUp：当键盘上某个键松开时触发。任务13“传工匠精神，筑职业梦想”——模板的应用任务解析（1）启动Dreamweaver2021，新建站点“传工匠精神，筑职业梦想”，站点文件夹为renwu13。在“文件”面板中双击打开index.html。任务描述通过使用模板快速布局“传工匠精神，筑职业梦想”网站，了解模板的概念及作用，学会模板文件的创建、可编辑区域的创建、模板的应用、分离与更新等操作。任务13“传工匠精神，筑职业梦想”——模板的应用（2）选择“文件→另存为模板”命令，弹出“另存模板”对话框，选择“传工匠精神，筑职业梦想”，在“另存为”框中输入名称index，单击“保存”按钮。（3）打开index.dwt模板文档，选中“大国工匠是我们中华民族大厦的基石……”所在单元格，选择“插入→模板对象→可编辑区域”命令，弹出“新建可编辑区域”对话框，，输入名称“content”，单击“确定”。（4）选择“文件→新建”命令，打开“新建文档”对话框，在左边栏中选择“网站模板”，“站点”列表中选择“传工匠精神，筑职业梦想”，“模板”列表中选中index模板，单击“创建”按钮，即可创建一个基于该模板的新文档。（5）将光标定位到可编辑区域中，删除其内容，复制“文字素材.docx”中内容，设置项目符号，保存文件到web1.html，按F12浏览。任务13“传工匠精神，筑职业梦想”——模板的应用（6）以同样的方式创建web2.html和web3.html文件，在可编辑区域中分别插入pic2.jpg和pic3.jpg。（7）打开web4.html，选择“工具→模板→应用模板到页”命令，弹出“选择模板”对话框，在“站点”下拉列表中选择“传工匠精神，筑职业梦想”，在“模板”列表中选择index，单击“选定”按钮，弹出“不一致的区域名称”对话框。选择“Documentbody<未解析>”，在“将内容移到新区域”列表中选择content，单击“确定”按钮。（8）此时模板文档index.dwt被应用于web4.html，结果如图5-48所示，保存并关闭（9）打开index.dwt模板文档，更换第1行单元背景图像为bj2.jpg，按【Ctrl+S】键保存模板，弹出“更新模板文件”对话框，单击“更新”按钮，出现“更新页面”对话框，更新完成后单击“关闭”按钮。（10）在文件资源管理器中打开web1.html。分别打开web2.html、web3.htm和web4.html,观察网页变化。任务13“传工匠精神，筑职业梦想”——模板的应用（11）在“文件”面板打开web1.html，选择“工具→模板→从模板中分离”命令后，网页所有区域均可编辑，删除“工匠人物”栏目单元格。（12）打开index.dwt，更换第1行单元背景图像为bj1.jpg，按【Ctrl+S】键保存模板，弹出“更新模板文件”对话框，单击“更新”按钮。（13）在文件资源管理器中打开web1.html，效果如图所示。分别打开web2.html、web3.htm和web4.html,观察网页变化知识概述一、模板的概念和作用1.模板的概念模板是一种用于设计统一风格页面的特殊类型文档。2.模板的作用（1）统一网站整体风格（2）快速改变整个站点的布局和外观（3）便于后期网站的维护和更新二、模板的创建1.创建模板方法1：创建空白模板文件选择“文件→新建文档→HTML模板”，单击“创建”按钮，即可创建一个空白模板文档。方法2：从现有文档创建模板（1）打开要转存为模板的网页文件，选择“文件→另存为模板”命令。（2）选择站点，输入模板名称，单击“保存”按钮。知识概述2.建立可编辑区域①打开模板，选择要定义为可编辑区域的内容或区域；②选择“插入→模板→可编辑区域”命令或按Ctrl+Alt+V组合键；③输入可编辑区域名称，单击“确定”按钮。3.取消可编辑区域选择要取消的可编辑区域，右击选择“模板→删除模板标签”命令或选择“工具→模板→删除模板标签”命令。三、创建基于模板的网页选择“文件→新建→网站模板”，选择站点，选择相应的模板，单击“创建”按钮，即可使用该模板创建一个网页文件。四、更新模板及基于模板的网页1.更新模板及基于模板的网页2.将网页从模板中分离任务14制作在线调查表——表单的应用任务解析（1）选择“开始→Windows系统→控制面板”，在控制面板窗口中单击“程序→启用和关闭Windows功能”，弹出“Windows功能”对话框，勾选“InternetInformationServices”复选框，单击“确定”按钮，系统开始安装IIS和Web服务组件。（2）选择“开始→Windows管理工具→InternetInformationServices（IIS）管理器”，在左侧窗格中展开“网站-DefaultWebSite”选项，右单击选择“管理网站→高级设置”，菜单打开“高级设置”对话框，设置物理路径为“D:\task13”,单击“确定”按钮。再次右单击选择“编辑绑定”，如图5-59所示；在IP地址列表中输入本机IP地址（本机IP地址可以通过ipconfig命令查看）。任务描述通过制作在线调查表，学会IIS的配置，能够正确插入表单及表单元素，学会表单元素的属性设置方法任务14制作在线调查表——表单的应用（3）启动Dreamweaver2021,新建站点“制作在线调查表”，站点文件夹为renwu14。单击“服务器”选项，在“基本”选项中完成设置。（4）选择“文件→新建文档→HTML”创建一个网页，网页“标题”为“在线调查表”。（5）打开CSS设计器，单击“添加CSS源”按钮，选择“附加现有的CSS文件”，选择sytle.css，单击“确定”按钮。（6）选择“插入→表单→表单”命令插入一个表单，插入的表单在设计窗口中呈红色虚线显示。将光标定位到表单中，选择“插入→表格”命令插入一个8行2列、宽度为600像素的表格，设置边距、边框为0px，间距20px。（7）合并表格第一行单元格，在属性面板设置单元格内容水平居中，“类”样式为q3，输入文本“在线调查表”。（8）在表格第2至7行的第一列单元格依次输入“用户名:”、“密码:”等文本。任务14制作在线调查表——表单的应用（9）将光标定位在表格第2行第2列单元格中，选择“插入→表单→文本”命令插入一个文本字段，在属性面板设置“类”样式为q1，在PlaceHolder框中输入“请输入用户名”，允选“Required”复选框。（10）将光标定位在表格第3行第2列单元格中，选择“插入→表单→密码”命令插入一个文本字段，选中该文本字段，在属性面板设置“类”样式为q1，在PlaceHolder框中输入“请输入密码”，允选“Required”复选框。（11）将光标定位在表格第4行第2列单元格中，选择“插入→表单→单选按钮组”命令，弹出“单选按钮组”对话框，在“标签”及“值”下面分别输入“男”、“女”，，单击“确定”按钮。将光标移动到“男”的后面，按Delete键删除换行符。（12）将光标定位在表格第5行第2列单元格中，选择“插入→表单→选择”命令，在属性面板设置“类”样式为q1，单击“列表值”按钮，分别输入标签“网络技术”、“数字媒体”、“软件技术”，击“确定”按钮。（13）将光标定位在表格第6行第2列单元格中，选择“插入→表单→日期”命令，，在属性面板设置“类”样式为q1。任务14制作在线调查表——表单的应用个（14）将光标定位在表格第7行第2列单元格中，选择“插入→表单→文本区域”命令插入一个文本区域，选中该文本区域，在属性面板设置“类”样式为q1。（15）合并第9行单元格，设置单元格内容水平居中，选择“插入→表单→提交按钮”命令插入一个按钮，在属性面板设置“类”样式为q2;同样的操作，再插入一个“重置按钮”，设置“类”样式为q2。（16）保存网页到index.html,打开浏览器，在地址栏中输入本机IP地址，按Enter键浏览本网页。知识概述一、Web服务器的安装与配置1.IIS的基本概念2.安装IIS（1）选择“开始→Windows系统→控制面板”命令，选择“程序”，弹出“程序”对话框。（2）单击“程序和功能”选项，选择“InternetInformationServices”。2．配置IIS（1）选择“开始→Windows管理工具→InternetInformationServices（IIS）管理器”命令。（2）右单击“DefaultWebSite”，选择“编辑绑定”命令，可设置网站IP地址。IP地址可以设置为本机地址（3）选择“管理网站→高级设置”命令，打开“高级设置”对话框，可设置默认站点的物理路径（4）在右侧窗口中，双击“默认文档”，打开默认文档窗口，可设置站点的主页文件名。（5）打开浏览器，在地址栏中输入绑定的IP地址，可以预览网站首页。知识概述二、插入表单一个完整的表单系统由三部分组成，一是使用HTML编写的页面；二是服务器上的应用程序；三是数据库文件。网页中的表单有三部分组成：（1）<form>标记。（2）表单对象