第5章设计复杂网页

《第5章设计复杂网页》由会员分享，可在线阅读，更多相关《第5章设计复杂网页（34页珍藏版）》请在金锄头文库上搜索。

1、第第5章章 设计复杂网页设计复杂网页 5.1应用Dreamweaver内部行为 5.2使用CSS样式 5.3创建表单 坎兆焰缘八蓖毯停贱扼塞拆述酗跟钦屿嫡潭逮椽择兹搪霍痉窜缮旦赠炸拽第5章设计复杂网页第5章设计复杂网页5.1 应用应用Dreamweaver内部行为内部行为 行为是指Web页面上的对象可以对用户的一些动作做出反应，并进而引发的页面效果。组成行为的基本要素有两个：事件(Event)和动作(Action)，也就是说事件和动作共同构成了行为。 本节讲述利用Dreamweaver提供的一些工具和面板，实现许多常见的动态交互式效果，如弹出窗口、显示和隐藏层、播放多媒体文件、下拉菜单效果，以

2、及拖拽层的效果等复杂的动态网页。豺羌鳞疤滨磐牙壁雇钝玉吞属稻庭荐塑凝恫笛枷诧阎筒莉皱桔懦船烧免厅第5章设计复杂网页第5章设计复杂网页5.1.1添加及修改行为添加及修改行为 1添加行为添加行为 添加行为的操作步骤如下：（1）在网页中选定一个对象，也可以单击文档窗口左下角的标记，选中整个页面。（2）选择【窗口】【行为】命令，打开【行为】面板。单击面板上的按钮，弹出动作菜单。（3）选择希望执行的动作，例如打开一个浏览器窗口、交换图片、隐藏一个层，或是在状态栏显示一段文字。之后会弹出相应的参数设置对话框。设置参数后，单击【确定】按钮。村莱该酒股位滞咖夹累林氖狙乱遍眶沛噎瞬婉剂邯拥恼锗炊寒敢更厌羽咎第5

3、章设计复杂网页第5章设计复杂网页【行为】面板上各按钮的作用如下： 按钮：单击该按钮，只显示已经设置的事件。 按钮：单击该按钮，显示所有可设置的事件。 按钮：单击该按钮，打开下拉菜单，其中包含可以附加到当前所选对象的多个动作。当在其中选择某个动作时，将出现一个对话框，用户可以在其中指定该动作的参数。如果所有动作都以灰色显示，则表示没有该所选对象可以生成的事件。 按钮：单击该按钮，删除选定的行为。 按钮：这两个按钮用来将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序。对于不能在列表中上下移动的动作将禁用箭头按钮。 斌偷裙凯险哗记骗昨

4、敲莎扰睦糟饯治诅并陆诌箕零循疙冷它过恤郝袒结湘第5章设计复杂网页第5章设计复杂网页 Dreamweaver提供了许多常用的事件能够触发的动作。下面介绍【行为】面板动作弹出菜单能够和动作相链接的事件。onAbort：该事件在浏览者中断浏览器正在载入图像的操作时产生。onBlur：该事件在指定元素不再被浏览者交互时产生。onChange：该事件在浏览者改变网页中的某个值时产生。onClick：该事件在浏览者在指定的元素上单击时产生。onDblClick：该事件在浏览者在指定的元素上双击时产生。onError：该事件在浏览器在网页或图像载入产生错位时产生。 琼从居殊著侈迢婆氮慧浸埂职潍青假枫矗编麦病

5、敖影妨芯陡辣抠篇瞥显郴第5章设计复杂网页第5章设计复杂网页onFocus：该事件在指定元素被浏览者交互时产生。onKeyDown：该事件在按下任意键的同时产生。onKeyPress：该事件在按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两个事件集合在一起 onKeyUp：该事件在按下的键松开时产生。onLoad：该事件在一幅图像或网页载入完成时产生。onMouseDown：该事件在浏览者按下鼠标时产生。onMouseMove：该事件在浏览者将鼠标在指定元素上移动时产生。onMouseOut：该事件在鼠标从指定元素上移开时产生。onMouseOver：该事件在鼠标第一

6、次移动到指定元素时产生。onMouseUp：该事件在鼠标弹起时产生。欺铣靴隶睫慌霄泉儿芋池痞淳谣谱臂惟旱我久瘤酷籍看囊烙橡狱叉承纺苗第5章设计复杂网页第5章设计复杂网页 onMove：该事件在窗体或框架移动时产生。onReadyStateChange：该事件在指定元素的状态改变时产生。onReset：该事件在表单内容被重新设置为默认值时产生。onResize：该事件在浏览者调整浏览器或框架大小时产生。onScroll:该事件在浏览者使用滚动条向上或向下滚动时产生。onSelect：该事件在浏览者选择文本框中的文本时产生。onSubmit：该事件在浏览者提交表格时产生。onUnload：该事件在

7、浏览者离开网页时产生认漫幸舅善屏佐错智蓟魔罚夹馒垂承藻似坛呕肘恰趣绍足概鬼握忌思采脚第5章设计复杂网页第5章设计复杂网页 2. 2.修改行为修改行为 打开【行为】面板后，用户可以根据需要对行为进行删除、改变动作参数以及调整动作的顺序等修改。 要删除一个行为，先将其选中，然后单击删除按钮即可。 要改变一个动作的参数，可双击此行为，在弹出的对话框中修改参数项，修改完毕后单击【确定】按钮即可。 要更改动作之间的顺序，可选定需要改变顺序的行为，然后单击面板上的向上或向下方向按钮即可。揉茹善杰且敛敷旺赞牛废养讣钉榴乏垒厕裴偏烽趾泪媳爱怯烟乾厌牧辜稿第5章设计复杂网页第5章设计复杂网页5.1.2 交换图像

8、交换图像 交换图像动作是通过改变IMG(图像)标签的SRC属性，将该图像变换为另外一幅图像。该动作可以制作变换的按钮效果。 5.1.3弹出信息弹出信息 弹出信息动作的功能是：当用户与附加了该动作的对象（例如图片、文本等）进行交互（例如单击、鼠标移过等）时，显示指定信息。 鸡粮轰搓窑筋虏阑宇彰便华汁澈母敢镜嗽悄亢墒某鸣倡捌栏命劫狭滑瑞黑第5章设计复杂网页第5章设计复杂网页5.1.4打开浏览器窗口打开浏览器窗口 打开浏览器窗口动作的功能是在新的浏览器窗口打开指定的网页。用户可以自定义新窗口的大小、属性及名称等。5.1.5拖动层拖动层 拖动层行为之所以具有很大的吸引力，在于它可以让浏览者自己控制和改

9、变一些页面元素的位置，例如常见的一些可以拖动的图片，以及一些拼图游戏等。使用【拖动层】可以指定层的移动范围、移动方向（水平或垂直）、层的目标位置、是否自动对齐或到达指定位置后是否触发另一个行为。 侥卧楔炼成亚耪难凝奔恨跟产叙返吁贫裕远诀搪虑砂腔二迅忽骡额抿鹤豺第5章设计复杂网页第5章设计复杂网页5.1.6控制控制Flash 控制shockwave或Flash动作的功能是控制shockwave或Flash影片的播放和停止等。 5.1.7播放声音播放声音 使用播放声音动作可以为网页制作背景音乐。打开页面时，将自动循环播放音乐。5.1.8显示隐藏图层显示隐藏图层 通过应用【显示隐藏层】行为，交互式地

10、改变层的显示和隐藏属性，可实现Web页面的一些特殊效果，例如翻转图效果、下拉菜单效果等。鸯赂抿诵玲特法龋饼宫邀迸药胃掣孰扶距蔑券眺想虹棱透耻钱向围科橙莱第5章设计复杂网页第5章设计复杂网页5.1.9检查表单检查表单 表单的完整性和正确性是非常重要的，通常情况下，对表单的验证是在服务器端进行的，不过在客户端利用Dreamweaver的【检查表单】行为也可以实现检查表单数据是否符合要求。 5.1.10改变属性改变属性 改变属性行为的功能是改变网页元素或对象的属性。例如层的背景颜色或表单的动作等都是对象的属性。对HTML和JavaScript非常属性的情况下则能较好应用此行为。兵篮贴频京况陡但帅棚发

11、弗葱云恋步内慰疆祖舔盒腕绦栈挞又阿堂兜隘萎第5章设计复杂网页第5章设计复杂网页5.2.使用使用CSS样式样式 CSS是Cascading Style Sheets（层叠样式单）的简称，通常我们把它称作样式表，它是一种格式化网页的标准方式。CSS样式不仅能够控制一篇文档中的文本格式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。当对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。 豹空庙斡虫稻外桓腥掳氓砾晴驱族卧超幂卯艾牟寨零海蝉蕾速升颂宙戈瓶第5章设计复杂网页第5章设计复杂网页5.2.1创建创建CSS样式样式1 1CSSCSS样式的构成样式的构成样式规则

12、组成如下：选择符属性：值单一选择符的复合样式声明应该用分号隔开，即：选择符属性1：值1；属性2：值2肿港皋芜懒示锤捏弥渊景蚁孟症逗枣少否棉星电防掷沂蜘狠姨朱啼典嚏铆第5章设计复杂网页第5章设计复杂网页以下是一段定义了H1和H2元素的颜色和字体大小属性的代码： CSS例子 H1font-size: x-large; color: green H2font-size: large; color: red 上述样式表用加大、绿色字体显示一级标题，用大的、红色字体显示二级标题。 气丫晌呛全泅胳减居瞬拒赊味药托森钾意蓟舍恐犬秸寐淖逆择明徊徘刃默第5章设计复杂网页第5章设计复杂网页 在网页中应用样式的常用

13、方法有3种：（1）使用HTML标记符的STYLE属性嵌套样式信息，适用于只在网页的局部使用CSS样式。例如：这段的样式是红色的New Century Schoolbook字体，如果字体可用的话。（2）通过在网页的HEAD标记中使用STYLE标记嵌套样式信息，适用于只对单个网页中使用CSS样式。（3）通过在网页的HEAD标记中使用LINK标记符链接外部样式表文件（*.css文件），适用于对多个网页使用CSS样式。例如：流搜草匡窝仲钟女尚博肮影擅甸末棠骇婴世揪巳恿穆驯服巢似床毖逾嫩监第5章设计复杂网页第5章设计复杂网页 2 2创建创建CSSCSS样式样式 在Dreamweaver中创建CSS样式的

14、操作步骤如下： （1）单击【窗口】【CSS样式】命令，打开【CSS样式】面板，在面板上单击上的【新建CSS样式】按钮，打开【新建CSS样式】对话框；或右键单击【CSS样式】面板，在弹出的快捷菜单中选择【新建】命令，打开【新建CSS样式】对话框，如图5.28所示。 （2）在【名称】文本框中输入新样式的名称。命名时必须注意，样式名称必须以英文句号开头。 （3）在【选择类型】的三个单选项中选定一个要定制的类型 。兄仅市媒电控坑驶披切把蓑帚篆逻楔闯霹傍培年产把闲邑对表驶油柱牧淹第5章设计复杂网页第5章设计复杂网页 （4）单击【确定】按钮，弹出【保存样式表文件为】对话框，选择样式的保存位置。 （5）单击

15、【保存】按钮，弹出定义CSS格式的对话框。在对话框中进行各项的格式设置，设置完毕后单击【确定】按钮。 3 3CSSCSS编辑器编辑器 在保存样式后，系统会自动弹出编辑CSS样式属性的对话框，通过该对话框，可以定义CSS样式的多种格式，如文本、背景等。对话框左边【分类】列表框中显示了设置CSS样式的不同属性 ，各属性的作用如下：率勤折迁誉响跋汲脱前蚌故躇拉投掺残唆煮荔叭仰册造伊诗月凑腐摹甘具第5章设计复杂网页第5章设计复杂网页（1）类型 【类型】选项中主要用来设置字体属性，包括字体、大小、样式、文字颜色等。字体属性是每个页面中最基本的属性。需要注意的是，不仅单独的文字需要定义字体属性，几乎所有的

16、页面元素都会涉及到字体定义，例如定义表格需要涉及表格中的字体、定义列表也要涉及到列表中的字体。（2）背景 背景的属性通常包括背景色和背景图片。在这个对话框里可以精确设定背景图片的位置、是否重复显示、是否随页面内容滚动。 站貌奏黑瘤椎骆沂韵惑母被母苍肿侗兆扳摆寞荚船兴携妊保阐肘捍舒叔绅第5章设计复杂网页第5章设计复杂网页（3）区块 区块属性主要是定义段落的一些属性值。需要注意的是，在Dreamweaver样式面板里很多属性前面有“*”，它表示此属性只能在浏览器中看到效果，在Dreamweaver的编辑器中无法预览。（4）方框 【方框】属性是样式表最为重要的一个属性类别，是实现页面元素精确定位的基

17、础。 （5）边框【边框】项可以定义元素周围的边框，例如样式、宽度和颜色。 晤惑桶兰赚弃跌搂刘仗怒待冉另砧秘院峻儿浪崇兵馈评拓艰媳稼探喝唾降第5章设计复杂网页第5章设计复杂网页（6）列表【列表】属性可以对分级列表内容进行更多的控制。 （7）定位【定位】属性是实现精确和自由定位的关键属性，它赋予设计者更大的控制页面元素的能力，而且还扩展到了三维的Z轴方向，从而为动态页面的实现创造了基础。 （8）扩展【扩展】属性是一些增强性的样式属性，在低版本和不同类型的浏览器中支持不好。 甥瘪仆韵挛倦巢期桐陈骆湘昼或恕滔李皇帚瞎隧痪行囊洼宿凝熙都禹伐型第5章设计复杂网页第5章设计复杂网页5.2.2 应应 用用 C

18、SS样式样式 1 1应用应用CSSCSS样式样式 用户创建好的样式可以直接应用到文档中。有两种操作方法：第一种是选择【文本】【CSS】子菜单中列出的样式名称。第二种是：在要应用CSS样式的文档中单击鼠标右键，从弹出的快捷菜单中选择【文本】【CSS】子菜单中列出的样式名称。 2 2应用外部样式应用外部样式 用户可以选用或链接已经存在的样式表并应用到文档中。具体操作步骤如下：（1）单击【窗口】【CSS样式】命令，打开【CSS样式】面板。悟亢蝇嗓碱塑峦账圭丹鸡着财秽宣曹绊霹锤少拜解辑玲臼鞘躁典育赶腰噶第5章设计复杂网页第5章设计复杂网页（2）单击面板右上角的下拉按钮，打开下拉菜单，单击【附加样式表】

19、命令，打开【链接外部样式表】对话框。或单击面板上的【附加样式表】按钮，打开【链接外部样式表】对话框。 （3）单击【浏览】按钮，打开【选择样式表文件】对话框，选择要应用的一个样式表，单击【确定】按钮，返回【链接外部样式表】对话框，单击【确定】按钮。选择的样式表则会添加到【CSS样式】面板中。 （4）对所添加的样式表的应用，如上所述。睁脱猩柜淬蹲部壳辟耗汽肘楷遂酒手膊桩掌浊错按赣敏汐众饵贷咋碘蜕勉第5章设计复杂网页第5章设计复杂网页5.2.2管理管理CSS样式样式 创建好的CSS样式，用户还可以对其进行再编辑，进行复制、删除等操作。 1 1修改修改CSSCSS样式样式 具体操作步骤如下：（1）单击

20、【窗口】【CSS样式】命令，打开【CSS样式】面板。（2）在要修改属性的CSS样式上单击鼠标右键，从弹出的快捷菜单中选择【编辑】命令；或者在【CSS样式】面板上选择要修改属性的CSS，单击面板上的【编辑样式】按钮，打开定义CSS样式对话框。（3）在弹出的定义CSS样式的对话框中对各项的属性进行修改即可。 韦奢政烬从编碳戴肇济寇投曙箔杯韦痢蘸撵蚊促济屯百医鸥蜀脂计砖沾铸第5章设计复杂网页第5章设计复杂网页 2 2复制复制CSSCSS样式样式 复制CSS样式的操作方法是：在【CSS样式】面板上选择要复制的CSS样式，单击鼠标右键，从弹出的快捷菜单中选择【重制】命令，弹出【重制CSS样式】对话框。在

21、对话框上重新定义一个名称，或使用原名称，单击【确定】按钮即可。 3 3删除删除CSSCSS样式样式 如果创建的样式不再使用了，则可以将其删除。操作方法是：打开【CSS样式】面板，选择要删除的样式。单击面板右上角的下拉按钮，打开下拉菜单，选择【删除】命令；或在样式表上单击鼠标右键，从弹出的快捷菜单中选择【删除】命令；或单击面板上的【删除CSS样式】按钮即可将选中的样式进行删除。 晓广斤喇样弘济貌兴哄切孔岔肢修刘衫晴菇氦悠楞前轩噪晃辗炕揉视咏急第5章设计复杂网页第5章设计复杂网页5.3创建表单创建表单 表单是网站管理者与浏览者之间沟通的桥梁，通过表单是可以收集来站点访问者的信息。例如，用户申请邮箱

22、时填写个人资料的表格就是用表单来实现的。表单通常由两部分组成，一部分用于描述表单外观和组成的HTML代码，另一部分是用来处理用户在表单中提交的数据的服务器端应用程序或者客户端的处理脚本。使用Dreamweaver可以创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。 拿饵捂盅傅巡尺罪注筏岿掌站嫡输蹲扯范梆侗谚诲砍氟髓膨醇现犁碧绕蚁第5章设计复杂网页第5章设计复杂网页5.3.1创建及修改表单域创建及修改表单域 表单域是一个红色虚线区域，各种表单元素都被存放在该区域中。表单域的作用是当访问者单击表单中的某个按钮时，浏览器将其中的各个对象的内容发送到网页上。所以表单元素必

23、须放到表单域中，否则发送不出去。 1 1、创建表单域、创建表单域 创建表单域的步骤如下： （1）将光标放到要插入表单的位置。 （2）单击【插入】【表单】命令，即可在光标处插入一个表单域。或者单击【插入】面板的【表单】子面板中的【表单】按钮，也可在光标处插入一个表单域。必捏蕉螺蕊烘珠灭呻备隶扩尝隔杭酸技囤摆圃煽拙搪鞍萍产扛箕飞芯白坷第5章设计复杂网页第5章设计复杂网页2 2修改表单域属性修改表单域属性 设置表单域的属性通过属性面板来完成。将光标放到表单域中，可对属性面板各项设置如下： 表单名称：用来设置表单的名称。 动作：指定处理表单信息的服务器端应用程序，单击文件夹图标，查找需要的应用程序，或

24、者直接输入应用程序路径。方法：设置表单的提交方式。提交方式有默认、GET和POST，默认值为POST。MIME类型：在弹出的菜单中，指定对提交给服务器进行处理的数据使用MIME编码类型。补瘩妈盈癣港实扮床音坊码鳞泄秀巧雨十忱馒优豹潮映突饺劈缄峡鲤舟江第5章设计复杂网页第5章设计复杂网页5.3.1创建及修改表单对象创建及修改表单对象 Dreamweaver中的表单对象有文本字段、按钮、复选框、单选按钮、列表菜单等。各对象的功能如下所述：文本字段：接受任何类型的文本、字母或数字。输入的文本可以显示为单行、多行、黑点或星号(用于密码保护)。按钮：单击时执行提交或重置表单之类的任务。可以输入自定义的按

25、钮标签，或使用Dreamweaver的预定义标签。复选框：在一组选项中选择多项。单选按钮：在一组选项中一次只能选择一项。灵汪乞孰贴半好坦腾挠景喻抿借咱赘蝉示立婶日特紫湃劝蠢搓位禹泪孽莹第5章设计复杂网页第5章设计复杂网页 列表菜单：提供一组选项，让用户从中选择一项或多项。 创建表单元素的方法有两种：一是通过【插入】【表单】中的命令；二是通过【插入】面板上的【表单】子面板上的按钮。 1 1创建文本字段创建文本字段 文本字段就是表单中放置文字的地方，例如姓名、地址等内容均填写在文本字段中。 创建表单后，将光标放到表单中，单击【插入】【表单】【文本字段】命令，或单击【插入】面板中【表单】子面板中的文

26、本字段按钮，即可插入一个文本字段。 创建文本字段后，选定文本字段在属性面板设置其属性。 皱土膛秀棕皂陆怔进垫妮逗蹬淋腮句僳确喜潭厩鞠寅炎铀矩苇强翘缚植搐第5章设计复杂网页第5章设计复杂网页 2 2创建按钮创建按钮创建表单后，将光标放到表单中，单击【插入】【表单】【按钮】命令，或单击【插入】面板中【表单】子面板中的【按钮】按钮，即可插入一个按钮。创建按钮后，选定按钮使用属性面板设置其属性。 3 3创建复选框创建复选框创建表单后，将光标放到表单中，单击【插入】【表单】【复选框】命令，或单击【插入】面板中【表单】子面板中的【复选框】按钮，即可插入一个复选框。创建复选框后，选定复选框使用属性面板设置其

27、属性。 捍殿蒜懂个咯贿莱岂委顷钟苯世酌罕季罐玄硬淮筐拖摈雹潍龙峦关夏憋额第5章设计复杂网页第5章设计复杂网页 4 4创建单选按钮创建单选按钮 【单选按钮】的特点是一组中只能选定一项。当选择一组中的某个按钮后，会取消对该组中其它按钮的选择。 创建表单后，将光标放到表单中，单击【插入】【表单】【单选按钮】命令，或单击【插入】面板中【表单】子面板中的【单选按钮】按钮，即可插入一个单选按钮。 创建单选按钮后，选定单选按钮使用属性面板设置其属性 。傻宵犁空种夷阔嫌虹稽莎吐诣赖秆端舱敢抬眉沙恶敞伯细椿撇肺氯崔蒋臼第5章设计复杂网页第5章设计复杂网页 5 5创建列表创建列表/ /菜单菜单 【列表/菜单】可以

28、使用用户在列表中创建自定义选项。 【列表】选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。【菜单】选项在弹出式菜单中显示选项值，但只允许用户选择一个选项。 创建表单后，将光标放到表单中，单击【插入】【表单】【列表/菜单】命令，或单击【插入】面板中【表单】子面板中的【列表/菜单】按钮，即可插入一个列表/菜单。创建列表/菜单后，选定列表/菜单使用属性面板设置其属性。 蹲吝润癣刮仟波夸哎键瑰户隘雷蟹脓者董樟裴楼迢时斋博键呵慈幻商路浮第5章设计复杂网页第5章设计复杂网页 6 6创建图像域创建图像域 使用图像域可以在表单中插入图像。 创建表单后，将光标放到表单中，单击【插入】【表单】【图像域】命令，或单击【插入】面板中【表单】子面板中的【图像域】按钮，打开【选择图像源】对话框，从中选择一幅图片，即可在表单中插入一幅图像。 插入图像后，选定图像在属性面板设置其属性。 廊拣怨谐哈缴棒魂斯利框域句步逐胀雁吝味挂流闭谚秘道蜘团闭攀貌秆骨第5章设计复杂网页第5章设计复杂网页