第4章 网页设计高级应用 制作：蔡宗吟.

Presentation on theme: "第4章 网页设计高级应用 制作：蔡宗吟."— Presentation transcript:

1 第4章 网页设计高级应用 制作：蔡宗吟

2 第4章 Dreamweaver CS5网页制作基础
4.1 表单 4.2 模板 4.3 网页特效

3 表单概述 表单是用于实现浏览者与网站之间信息交互的一种网页对象。在Internet中，使用表单可以帮助服务器从用户那里收集信息与反馈，例如收集用户资料、获取用户订单等。 一个完整的表单包含两个部分：一个是在网页中进行描述的表单对象；另一个是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。

4 表单对象 1．插入表单对象的方法 （1）选择“插入”面板中“表单”列表中的相关命令来插入表单对象。 （2）选择“插入”→“表单”命令，在其中选择要插入对象的相应按钮，如图所示。

5 表单对象 2．表单对象介绍 （1）表单 ：在网页中插入表单域。 （2）文本字段 ：在表单中插入文本域。文本域可以接受任何类型的字母数字项。输入的文本可以显示为单行、多行、项目符号或星号（用于保护密码）。 （3）隐藏域 ：存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。 （4）文本区域 ：可以输入多行文本。在创建多行文本字段时，指定用户可以输入的文本行数。 （5）复选框 ：在表单中插入复选框。复选框允许在一组选项中选择多项，有选中和未选中两种状态。 （6）单选按钮 ：在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。

6 4.1.2 表单对象 （7）单选按钮组 ：插入共享同一名称的单选按钮的集合。在一组选项中只能选择其中一个。
表单对象 （7）单选按钮组 ：插入共享同一名称的单选按钮的集合。在一组选项中只能选择其中一个。 （8）列表/菜单 ：可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。 （9）跳转菜单 ：插入可导航的列表或弹出式菜单。跳转菜单允许插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。 （10）图像域 ：可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。 （11）文件域 ：在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传到服务器。 （12）按钮 ：在表单中插入文本按钮。按钮在单击时执行任务，如提交、重置表单或调用某个函数。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。 （13）标签 ：在文档中给表单加上标签，以<label></label>形式开头和结尾。 （14）字段集 ：在文本中设置文本标签。

7 表单对象 3．设置表单对象 将插入点放在希望表单出现的位置，选择“插入”→“表单”→“表单”命令，或者选择“插入”工具栏中的“表单”类别，然后单击“表单”按钮。 其代码结构如下： <form id="form1" name="form1" method="post" action=""> 表单控件 </form>

8 表单应用实例

9 表单应用实例 1．新建网页 新建一个网页文件，名为register.html，在“文档”工具栏中将网页的标题设置为“用户注册”。 2．插入表单 单击“插入”面板中“表单”区域中的“表单”图标，在该页中插入一个表单域，如图所示。

10 表单应用实例 3．插入布局表格 （1）在表单域中插入一个10行2列的表格。表格宽度为720像素，表格间距设置为1像素，填充为5像素。 （2）将第一行合并，插入register_title.png，并输入“用户注册”文字信息，设置图片的对齐方式为“绝对居中”。 （3）在第2～7行的第1列的单元格中分别输入文本信息：用户昵称、创建密码、确认密码、性别、爱好、电子邮箱、出生年月。水平居右对齐。

11 表单应用实例 4．插入单行文本框 （1）插入文本字段。 文本框的标记为<input>，其基本格式如下： <input type="text" name="文本框名称" id="文本框ID值" value="默认值" />

12 4.1.3 表单应用实例 （2）选中文本框，在“属性”面板中修改文本框属性，将此文本框命名为“username”
表单应用实例 （2）选中文本框，在“属性”面板中修改文本框属性，将此文本框命名为“username” 文本域：文本域下方的文本框中可以输入文本框的名称。在命名时最好使用英文或数字，不能包含特殊字符和空格，可以使用下划线“_”。不能与网页中的其他对象重名。名称最好具有代表性，如账号文本框可以命名为“name”。 字符宽度：用来设置文本字段的宽度，默认状态为24个字符长度。 最多字符数：设置单行文本所能填写的最多字符数。 初始值：用于设置默认状态下在文本框中显示的字符。

13 表单应用实例 5．插入密码文本框 控件密码框也是使用<input>标记，只是“type”值为“password”。其格式如下： <input type="password" name="密码框名称" id="密码框ID值" value="初始值" /> 6．插入单选按钮 单选按钮的标记为<input>，“type”值为“radio”。其格式如下： <input type="radio" name="radio名称" id="radio的ID值" value="radio" value="提交于服务器端的值" />

14 表单应用实例 7．插入复选框 复选框可以提供多个选择项，而单选按钮只能选择一个。如果需要选择多项，可以用复选框来制作。复选框标记为<input>，“type”值为“checkbox”，格式如下： <input name="checkbox名称" type="checkbox" id="checkbox的ID值" value="提交于服务器端的值" />

15 表单应用实例 8．插入下拉菜单和列表项 在出生年月对应的“月份”设置下拉菜单，其方法是在“表单”区域单击“列表/菜单”按钮 ，效果如图所示。

16 表单应用实例 列表值：单击该按钮，会弹出“列表值”对话框，如左图所示。设置方式同单选按钮组的类似。在“列表值”对话框中添加项目标签：[选择月份]、一月、二月……，得到如右图所示的效果。

17 表单应用实例 （2）插入列表。列表插入方式同菜单一样。选择刚才插入的菜单，在“属性”面板中将类型设置为“列表”，这时“高度”和“选定范围”两项均可使用了，如图所示。

18 4.1.3 表单应用实例 9．插入按钮 “提交“按钮：其功能是将用户填写内容发送至服务器。其格式如下：
表单应用实例 9．插入按钮 “提交“按钮：其功能是将用户填写内容发送至服务器。其格式如下： <input type="submit" name=按钮名称" id="按钮ID值" value="按钮上的信息" /> “重写”按钮：其功能是将用户填写内容恢复到初始值。其格式如下： <input type="reset" name=按钮名称" id="按钮ID值" value="按钮上的信息" /> “普通“按钮：本身不具备特殊功能，但能与其他语言配合使用，能发挥强大的作用。其格式如下： <input type="button" name=按钮名称" id="按钮ID值" value="按钮上的信息" />

19 表单应用实例 10．插入多行文本区域 如果需要输入多行文本，可以使用多行文本区域来实现。其格式如下： <textarea name="文本区名称" id="文本区ID值" cols="宽度" rows="高度"> 文本区信息 </textarea>

20 表单应用实例 11．CSS规则定义 完成以上步骤后，为了达到美观效果，还需使用CSS进行风格设置。 （1）标签选择器table。“背景”类别中“背景”颜色为“#060”。 （2）标签选择器td。文字大小为14像素，行高为30像素，背景色为白色，方框高度为30像素。 （3）类名选择器title_style。“用户注册”文字大小为16像素，加粗。 （4）类名选择器input_style。对单行文本框、密码文本框进行边框设置，宽度为200像素，高度为25像素。边框风格为实线，宽度为1像素，边框颜色为“#999”。

21 4.2 模板 4.2.1 模板概念 模板的作用是基于Dreamweaver站点生成具有相似结构和外观的网页。
4.2 模板 模板概念 模板的作用是基于Dreamweaver站点生成具有相似结构和外观的网页。 模板由两类区域组成：可编辑区域和锁定区域。当模板刚被创建时，所有区域都为锁定区域。通过定义模板指定一部分区域为可编辑区域，当页面从模板创建时，只能在可编辑区域进行内容的更改。

22 创建模板 1．新建模板文件 创建模板有两种方式，可以从现有网页创建，也可以直接新建模板文件。前者操作方法是选择“文件”→“另存为模板”命令。后者的操作步骤如下。 （1）选择“文件”→“新建”命令。 （2）在弹出的“新建文件”对话框中选择“空模板”类别，在“模板类型”列表中选择“HTML模板”选项，如图所示。在“布局”列表中选择“无”选项，则创建空的模板，需设计者自己设置结构和风格，也可以选择Dreamweaver提供的模板样式。 （3）单击“创建”按钮，新建的模板显示在“设计视图”中，模板文件的后缀名为dwt。

23 创建模板 2．定义可编辑区域 （1）插入可编辑区域。 选择菜单“插入”→“模板对象”→“可编辑区域”命令 弹出如图所示的对话框，可编辑区域的名称可以自定义。

24 创建模板 （2）删除可编辑区域。如果将模板文件中的可编辑区再次锁定，可以使用“删除模板标记”命令完成。其步骤如下： 单击可编辑区域的左上角以选中区域。 选择“插入”→“模板”→“删除模板标记”命令。

25 4.2.2 创建模板 3．保存模板 （1）选择“文件”→“另存为模板”命令。
创建模板 3．保存模板 （1）选择“文件”→“另存为模板”命令。 （2）如果模板不包含可编辑区域，将弹出如左图所示的对话框。如果单击“取消”按钮，则弹出右图所示的对话框。

26 创建模板 （3）如果模板包含可编辑区域，则弹出如左图所示的对话框，从中选择基于的站点名称。 （4）当单击“保存”按钮后，在“文件”面板上，Dreamweaver会在站点根目录下自动创建名为“Templates”的文件夹，里面包含所有的模板文件，如右图所示。此文件夹不得随意更改和移动，否则模板无法正常应用。

27 应用模板 应用现有模板可分为两种情况，一种是在新的空白网页上应用模板，另一种情况是对已有内容的网页应用模板。 （1）选择“文件”→“新建”命令，创建网页文件，或者直接在“文件”面板创建。 （2）选择“资源”面板，如图所示，单击“模板”图标 ，在右侧将出现站点内已有的模板。选中要应用的模板，再单击左下角的“应用”按钮 即可。

28 应用模板 （3）如果网页中已有内容，按照步骤（2）中的操作，将弹出“不一致的区域名称”对话框，要求指定已有内容放至模板的哪个区域，在“将内容移到新区域”下拉列表框中，选择模板的可编辑区域名称进行存放，如图所示。

29 模板应用实例 1．实例说明 “乐山乐水”网站需要有统一的结构和风格，其他页面要与首页有相似的结构和风格，网站要保持整体一致性。前面已完成了首页、乐山概况、旅游地图、乐山美食和用户注册等页面，每张页面需具有相似的结构，内容上要包括相同的页眉和页脚信息。

30 图1所示的页面是用于创建模板的页面，在此基础上可创建出如图2和图3所示的页面，分别为“乐山概况”和“乐山旅游地图”页面。

31 4.2.3 应用模板 2．制作步骤 （1）新建模板页面。创建一个名为travel.html的页面，该页面作为模板页面。
应用模板 2．制作步骤 （1）新建模板页面。创建一个名为travel.html的页面，该页面作为模板页面。 (2）将模板页面另存为模板。选择“文件”→“另存为模板”命令，在“另存模板”对话框中选择站点“lstravel”，“另存为”名为“travel”。单击“保存”按钮后，模板会自动保存于template文件夹内。

32 应用模板 （3）设置可编辑区。单击第2行，即主体内容所在的区域，选择“插入”→“模板对象”→“可编辑区域”命令，在弹出的“新建可编辑区域”对话框中输入“名称”为“content”，如左图所示。单击“确定”按钮后，可编辑区出现在了指定的位置，此区域由浅蓝色的边框包围，区域左上角是可编辑区的名称，如右图所示。

33 应用模板 （4）基于模板创建页面。 在弹出的“不一致的区域名称”对话框中，对不匹配的每一个区域进行新区域的指定。选中“document body”区域，在“将内容移到新区域”下拉列表框中选择“content”选项。选中“document head”区域，在“将内容移到新区域”下拉列表框中选择“不在任何地方”选项，如图所示。

34 应用模板 单击“确定”按钮后，模板应用完成。 用同样的方法可以制作“旅游地图”页面。 （5）保存并预览网页。选择“文件”→“保存全部”命令，将页面保存，按F12键查看页面效果。

35 4.3 网页特效 网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。
4.3 网页特效 网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。 目前，脚本语言JavaScript是最流行的用来创建各种网页特效的语言。

36 JavaScript基础 JavaScript是一种基于事件驱动的面向对象的脚本语言，当它放置于HTML页面中，对页面元素进行控制，可以实现很多交互式效果和各种特效。

37 JavaScript的三个元素 1．对象（Object） 网页中的所有元素都可以作为对象进行控制，如图片、文字、多媒体文件等。
2．事件（Event） 事件是触发效果的原因，它可以被附加于对象而存在。 3．动作（Action） 也称为结果，通过动作来完成动态效果，如图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JavaScript代码。

38 Dreamweaver的常用事件 onLoad：当网页加载时。 onMouseOver：当鼠标在上时。 onMouseOut：当鼠标从热字或图像上离开时。 onMouseMove：当鼠标在热字或图像上移动时。 onMouseDown：当在选定对象上按下鼠标左键时。 onMouseUp：当鼠标松开时。 onUnload：当离开网页时。 onBlur：当对象失去焦点（比如选择了其他窗口，其他文本框使刚才的窗口和文本框失去了焦点）。 onClick：当鼠标单击对象时。 onDblClick：当鼠标双击对象时。 onError：当载入图像等发生错误时。 onFocus：当对象得到焦点时。 onKeyDown：当按下键盘上光标键的向下键时。 onKeyPress：当焦点在对象上，按下键盘上的某个键时。 onKeyUp：当按上键盘上光标键的向下键时。

39 4.3.2 JavaScript网页应用实例 1．实例描述
在首页index.html中，“旅游新闻”版块信息实现从下往上的滚动效果，当鼠标停留在滚动文字上时，文字会停止滚动，但鼠标从上面移开后，文字会继续滚动，如图所示。

40 4.3.2 JavaScript网页应用实例 2．实例制作 （1）滚动效果要用<marquee>标记实现，其格式如下：
<marquee direction="方向" scrolldelay="滚动延时" behavior="滚动方式" > 其属性含义如下： direction：滚动方向。有四个方向：left（向左）、right（向右）、up（向上）和down（向下），默认为left。 behavior：滚动方式。有三个值：Scroll，由一端滚动到另一端；Slide，由一端快速滑向另一端，不重复滑动；Alternate，在两端之间来回滚动。 scrolldelay：滚动延时，整数值时，值越大，滚动越慢。

41 JavaScript网页应用实例 （2）涉及的事件是onMouseOver和onMouseOut，其格式是“onmouseover="this.stop()"”和“onmouseout="this.start()"” （3）完整代码。 <marquee direction="up" scrolldelay="150" onmouseover="this.stop()" onmouseout="this.start()"> <ul> <li class="news_list"><a href="#">不到乐山，枉来峨眉</a></li> <li class="news_list"><a href="#">畅游乐山自助体验游</a></li> <li class="news_list"><a href="#">乐山开展旅游市场集中专项治理</a></li> <li class="news_list"><a href="#">省旅游局来乐调研</a></li> <li class="news_list"><a href="#">峨眉山举行武林大赛</a></li> <li class="news_list"><a href="#">犍为——茉莉花都</a></li> <li class="news_list"><a href="#">峨眉张沟避暑好地方</a></li> <li class="news_list"><a href="#">沐川竹海敢与宜宾竹海媲美</a></li> </ul> </marquee>

42 行为面板的应用 行为是Dreamweaver内置的JavaScript程序库，由事件和动作组成，对行为的添加和控制是通过“行为”面板来实现的。

43 4.3.3 行为面板的应用 1．“行为”面板 在“行为”面板上可以进行如下操作：
行为面板的应用 1．“行为”面板 在“行为”面板上可以进行如下操作： “显示设置事件”按钮 ：列表中只显示当前正在编辑的事件名称。 “显示所有事件”按钮 ：列表中显示当前文档中所有事件的名称。 “添加行为”按钮 ：单击该按钮会打开行为菜单，在菜单中选择相应动作添加到当前选定的页面元素中。 “删除行为”按钮 ：单击该按钮会删除选定的行为。 “上移”按钮 和“下移”按钮 ：可将动作项向前移或向后移，改变动作执行的顺序。

44 2．创建行为 三个步骤：选择对象、添加动作、调整事件 操作： “景点推荐”版块上的 “交换图像”操作展示（P103）

45 图片的切换特效 3．“行为”面板应用实例 本实例将使用“显示和隐藏元素”制作“图片的切换”效果

46 图片的切换特效 （1）新建网页文件adv.html。
（2）页面布局。使用AP div（Absolute Position div，绝对定位div）实现图片的重叠存放。

47 图片的切换特效 （3）插入AP div。插入4个层，名称分别为adv1、adv2、adv3和number，前3个层分别插入3张图片（suifo.jpg、emei.jpg、leishan.jpg），number层输入数字“1，2，3”。 层的叠放效果 “AP元素”面板

48 图片的切换特效 （4）数字标记设置。切换到“代码”视图，分别对“1，2，3”数字进行标记设置，代码如下：
<div id="number"><span>1</span><span>2</span><span>3</span></div>

49 图片的切换特效 （5）切换图片效果设置。切换到“设计”视图中，选中数字1，在“标签选择器”面板添加行为“显示隐藏元素”，弹出“显示-隐藏元素”对话框，如左图所示，选择adv1显示，adv2和adv3隐藏。单击“确定”按钮后，在行为面板中将事件更改为onclick，如右图所示。

50 图片的切换特效 （6）页面美化。功能实现后，对数字进行CSS规则定义。设置类名选择器number，在“方框”类别中，设置填充为5像素，边距为10像素。在“类型”类别中，设置大小为12像素。在“背景”类别中，设置背景颜色为橙色“#F90”。 鼠标指标形状，当单击数字时，鼠标形状变为手形，为此，还需在“扩展”类别中设置光标“cursor”为“pointer”。

51 4．“行为”面板应用其他实例 （1）播放声音实例。 （2）设置状态行文本。