网页设计与制作项目APDiv.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,.,*,单击此处编辑母版标题样式,电子工业出版社,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,.,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,AP Div,和行为的应用,项目,10,1,.,知识要点,了解,AP Div,的作用,1,掌握,AP Div,的基本操作方法,2,掌握,Div+CSS,布局方法,3,掌握使用,Spry,进行页面布局的方法,4,掌握内置行为的使用方法,5,2,.,10.1,网页展示：使用,AP Div+CSS,制作“酒店机票”栏目页面,“,酒店机票”栏目首页效果,运行,Dreamweaver CS6,，创建站点，使用,Div+CSS,布局方式制作“乐途网”的“酒店机票”栏目页面。该栏目包括两个页面，分别是“酒店机票”栏目首页,jdjpindex.html,和“机票预订”子页面,jpyd.html,。“酒店机票”栏目首页效果图如图所示，该页面使用,Div+CSS,布局实现，页面主要内容为酒店信息。,3,.,10.1,网页展示：使用,AP Div+CSS,制作“酒店机票”栏目页面,“,机票预订”子页面效果图,在“酒店机票”首页,jdjpindex.html,中点击左下角“机票预订”右侧的图片链接后，进入“机票预订”子页面，其内容为机票信息，页面效果如图所示。该页面也采用了,Div+CSS,布局方式，与“酒店机票”首页不同的是，该页面中的“便捷查询”和“国内特价机票”栏目采用了,Spry,框架制作。,4,.,10.2,网页制作,10.2.1,规划“酒店机票”首页布局,步骤,1,构思“酒店机票”首页,jdjpindex.html,页面的层布局。“酒店机票”页面由以下几部分组成：,顶部部分，包括站点,Logo,、,Banner,图片，以及导航菜单等内容。,页面内容部分，包括左侧查询部分和右侧主体内容部分。,底部，包括一些版权信息。,设计页面的布局，绘出层布局结构图，如图所示。,步骤,2,根据页面布局，画出实际的页面布局图，明确层与层的嵌套关系，如图所示。,5,.,10.2,网页制作,“,酒店机票”首页层布局结构,“,酒店机票”首页实际层布局图,6,.,10.2,网页制作,步骤,3,根据实际层布局图，得到页面的,Div,结构：,body,/*HTML,的,body,元素*,/,#Container,/*,页面层容器*,/,#Header,/*,页面头部*,/,#Menu /*,导航菜单*,/,#PageBody,/*,页面主体*,/,#Left,/*,左侧边栏*,/,#Right,/*,右侧主体内容*,/,#Footer,/*,页面底部*,/,7,.,10.2,网页制作,10.2.2,创建页面，使用,AP Div,布局页面,页面的,Div,布局规划好后，就可以在页面中插入,AP,元素，实现网页的布局。,步骤,1,运行,Dreamweaver,，新建,HTML,文档，命名为,jdjpindex.html,，保存在“乐途网”站点根目录中。,步骤,2,执行,【,插入,】|【,布局对象,】|【AP Div】,菜单命令，在,jdjpindex.html,中插入一个,AP,元素，在,【CSS-P,元素,】,属性面板中设置元素的名称为“,container”,，并适当调整元素的宽度和高度。,8,.,10.2,网页制作,步骤,3,将光标定位在“,container”,层中，按照“步骤,2”,的方法，在“,container”,层中再插入一个,AP,元素，命名为“,Header”,，并适当调整元素大小和位置。用同样的方法，根据在“,9.2.1,节”中规划的层架构，在网页中插入所需要的,AP,元素。,创建,AP Div,后，执行,【,窗口,】|【AP,元素,】,菜单命令，在,【AP,元素,】,浮动面板中可以看到,7,个,AP,元素的层次关系。,9,.,10.2,网页制作,10.2.3,定义,CSS,，设置,Div,显示样式,步骤,1,在站点根目录中新建一个外部样式表文件，命名为,style.css,，在代码视图中输入如图所示的内容。该文件定义了各,AP,元素的基本样式。,10,.,10.2,网页制作,步骤,2,将,jdjpindex.html,页面代码视图中的,里的样式删除，以避免样式的重复定义。,步骤,3,在,【CSS,样式,】,面板中，单击“附加样式表”按钮，将“步骤,1”,中创建的,style.css,附加到页面中。,11,.,10.2,网页制作,10.2.4,在,Div,中添加内容,通过上面的任务，已经实现,Div+CSS,的页面布局，下面将需要的内容添加到相应的,Div,中，完成页面的制作。,步骤,1,在,【,CSS,样式,】,面板中，点击,【,附加样式表,】,按钮，打开,【,链接外部样式表,】,对话框，将之前定义的“,mycss.css,”网站样式表文件附加到,jdjpindex.html,页面中，如图所示。,12,.,10.2,网页制作,步骤,2,在,Header,层中插入表格，将站点,Logo,、,Banner,图片等内容插入到对应的单元格中。,步骤,3,在,Menu,层中制作导航菜单。,步骤,4,在,Right,层中插入表格，制作“酒店搜索”、“酒店筛选”和“机票预订”等查询内容。将“机票预订”右侧的图片设置超链接，链接到“机票预订”,jpyd.html,页面。,步骤,5,在,Left,层中插入表格，制作“酒店推荐”内容。,步骤,6,在,Footer,层中，制作站点版权信息内容。,步骤,7,为文本和表格设置,CSS,样式。保存文档，完成“酒店机票”栏目首页的制作。,13,.,10.2,网页制作,10.2.5,使用,Spry,框架制作“机票预订”页面,步骤,1“,酒店机票”栏目页面,jdjpindex.html,制作完成后，将其另存为,jpyd.html,，并修改页面标题为“乐途旅行网：机票预订”。,jpyd.html,页面和,jdjpindex.html,页面布局结构一样，也采用,Div+CSS,布局，因此采用“另存为”方式可以提高页面制作效率。,步骤,2,将,jpyd.html,页面中,ID,名称为,Left,和,Right,的,Div,中的内容删除。分别在,Left,和,Right,层中插入表格。,步骤,3,拆分单元格或插入表格，并在表格中插入文字和图片，完成“机票预订”和“最新机票点评”两个栏目内容的制作。,14,.,10.2,网页制作,步骤,4,将光标定位到左侧“便捷查询”下的白色背景单元格中，使用“,Spry,折叠式”制作“便捷查询”内容。在,【,插入,】,面板中选择,【,Spry,】,项，在“,Spry,”面板中选择“,Spry,折叠式”。这样就会在光标指定位置插入“,Spry,折叠式”应用，如图所示。,15,.,10.2,网页制作,步骤,5,在页面中选中“,Spry,折叠式”，在属性面板中点击“,+,”按钮，再添加“标签,3,”和“标签,4,”两个标签。在页面中选中并修改“标签,1,”到“标签,4,”文本，并在“内容,1,”到“内容,4,”中添加相关内容。制作好后的页面效果如图所示。,16,.,10.2,网页制作,步骤,6,为“,Spry,折叠式”中内容设置,CSS,样式，完成“便捷查询”内容的制作。,步骤,7,将光标定位到右侧,Right,层“国内特价机票”下的单元格中，使用“,Spry,选项卡式面板”制作该栏目内容。在“,Spry,”浮动面板中，选择“,Spry,选项卡式面板”，在页面指定位置插入,Spry,现象卡式面板。,步骤,8,在页面中选中所插入的“,Spry,选项卡式面板”，在属性面板中点击“,+,”按钮，添加若干新的标签，如图所示。,17,.,10.2,网页制作,步骤,9,在页面中用鼠标拖动选择标签文字，将选项卡标题设置为主要城市名称，如图所示。,18,.,10.2,网页制作,步骤,10,在属性面板中选择并显示某个选项卡，删除默认内容，在内容区域插入表格，并录入相关数据，如图所示。,步骤,11,为选项卡标签文字及面板内容设置,CSS,样式，完成“国内特价机票”栏目内容的制作。将页面保存，完成,jpyd.html,页面的制作。,19,.,10.3,知识链接,AP Div,概述,AP Div,的创建及属性设置,AP Div,的基本操作,AP Div,与表格的相互转换,使用,Div+CSS,布局网页,Spry,框架,行为的基础知识,附加行为,管理行为,20,.,10.3.1 AP Div,概述,AP,元素（绝对定位元素）是分配有绝对位置的,HTML,页面元素，具体地说，就是,div,标签或其它任何标签。,AP,元素可以包含文本、图像或其它任何可放置到,HTML,文档正文中的内容。,通过,Dreamweaver,，您可以使用,AP,元素来设计页面的布局。您可以将,AP,元素放置到其它,AP,元素的前后，隐藏某些,AP,元素而显示其它,AP,元素，以及在屏幕上移动,AP,元素。您可以在一个,AP,元素中放置背景图像，然后在该,AP,元素的前面放置另一个包含带有透明背景的文本的,AP,元素。,21,.,10.3.1 AP Div,概述,AP,元素通常是绝对定位的,div,标签。,AP Div,是网页布局的一种方式，与表格布局相比，使用,AP Div,布局可以是使页面内容放置更加灵活，,AP Div,和,CSS,结合还可以精简,HTML,代码，提高页面的显示速度。,AP Div,具有可移动性，可以放置到页面中的任何一个位置。,AP Div,可以重叠，还可以设置是否显示。在,AP Div,中还可以插入文本、图像等其他网页元素。,22,.,10.3.2 AP Div,的创建及属性设置,1,创建,AP Div,创建,AP Div,有两种方法。,（,1,）用菜单命令创建,在菜单栏中执行,【,插入,】|【,布局对象,】|【AP Div】,菜单命令，即可在网页中插入一个,AP Div,。,（,2,）用工具栏创建,在,【,插入,】,工具栏中，选择,【,布局,】,选项卡，单击,【,绘制,AP Div】,按钮，此时，鼠标指针变为“,+”,形状，在编辑窗口拖动鼠标即可绘制,AP Div,。,23,.,10.3.2 AP Div,的创建及属性设置,2,创建嵌套,AP Div,和表格一样，,AP Div,也可以进行嵌套。在某个,AP Div,内部创建的,AP Div,成为子,AP Div,或嵌套,AP Div,。嵌套,AP Div,外部的,AP Div,成为父,AP Div,。子,AP Div,可以浮动在父,AP Div,之外的任意位置，其大小不受父,AP Div,的限制。创建嵌套,AP Div,的方法是将鼠标光标定位到所需的,AP Div,内，然后再创建新的,AP Div,即可。,24,.,10.3.2 AP Div,的创建及属性设置,3,设置,AP Div,属性,AP Div,的属性设置可以通过属性面板来实现。,（,1,）单个,AP Div,的属性设置,单个,AP Div,的属性设置如图所示。当选择要设置属性的某个,AP Div,后，在属性面板中就可以对该,AP Div,属性进行设置。,单个,AP Div,的属性面板,25,.,10.3.2 AP Div,的创建及属性设置,（,2,）多个,AP Div,的属性设置,如果要对多个,AP Div,设置相同的属性，可以先按住“,Shift,”键，接着用鼠标依次点击选中这些,AP Div,，然后在属性面板中进行设置。选择多个,AP Div,后的属性面板如图所示。,属性面板,26,.,10.3.3 AP Div,的基本操作,1,选择,AP Div,（,1,）选择单个,AP Div,方法一：通过边框选中,AP Div,，将鼠标指针移动到所需的,AP Div,边框单击左键即可选中该,AP Div,。,方法二：在,【AP,元素,】,面板中单击所需的,AP Div,的“,ID”,名称即可选中该,AP Div,。,方法三：按住,Ctrl+Shift,组合键，然后在,AP Div,内部单击鼠标左键，也可以选中该,AP Div,。,27,.,10.3.3 AP Div,的基本操作,（,2,）选择多个,AP Div,方法一：在,【AP,元素,】,面板中，按住,Shift,键，然后单击两个或多个,AP,元素“,ID”,名称，如图所示。,方法二：在文档窗口中，按住,Shift,键并在两个或多个,AP,元素的边框上（或边框内）单击鼠标，如图所示。,通过面板选择多个,AP Div,按住,Shift,键单击,AP Div,选择,28,.,10.3.3 AP Div,的基本操作,2,调整,AP Div,的大小,（,1,）调整单个,AP Div,的大小,在文档“设计”视图中选中要调整大小的,AP,元素，然后通过以下几种方式进行调整。,通过拖动,AP Div,元素的任一调整大小手柄来调整大小。,按住,Ctrl,键，同时按方向键，每按一次,AP Div,的右边框或下边框会向相应方向调整,1,像素的大小。若按住,Shift+Ctrl,键，则每次调整,10,像素大小。,在属性面板的“宽”和“高”文本框中输入所需的宽度和高度值，再按,Enter,键进行调整。,29,.,10.3.3 AP Div,的基本操作,（,2,）同时调整多个,AP Div,的大小,首先在文档“设计”视图中选中两个或多个,AP Div,，然后通过以下两种方法调整大小。,执行,【,修改,】|【,排列顺序,】|【,设成宽度相同,】,或,【,修改,】|【,排列顺序,】|【,设成高度相同,】,菜单命令，最先选定的,AP,元素将与最后选定的一个,AP,元素的宽度或高度一致。,选中多个,AP Div,，在属性面板的“多个,CSS-P,元素”中的“宽”和“高”文本框中输入值，按,Enter,键，所有选定的,AP Div,将设置为同样的宽度值和高度值。,30,.,10.3.3 AP Div,的基本操作,3,调整,AP Div,的位置,在,Dreamweaver,中，设计者可以根据,AP Div,灵活移动的特点，将其放置在网页的任何位置。操作方法是，选择要改变位置的,AP Div,，将鼠标移动到边框上，当光标变为形状时，按住鼠标左键不放，拖动鼠标，将,AP Div,移动到需要的位置上，释放鼠标，完成,AP Div,位置的调整。,31,.,10.3.3 AP Div,的基本操作,4,调整,AP Div,的层叠顺序,AP Div,可以重叠，要改变,AP Div,的上下排列顺序，可以调整,AP Div,的,Z,轴顺序值，,Z,轴顺序值较大的,AP Div,将覆盖在,Z,轴顺序值较小的,AP Div,上方。设置,AP Div,的层叠顺序可以在,【,属性,】,面板或,【AP,元素,】,面板中进行，也可以通过菜单命令来设置。,（,1,）在,【,属性,】,面板中调整层叠顺序,（,2,）在,【AP,元素,】,面板中调整层叠顺序,（,3,）用菜单命令改变层叠顺序,32,.,10.3.3 AP Div,的基本操作,5,改变,AP Div,的可见性,在,【AP,元素,】,面板中，通过鼠标点击改变,AP,元素左侧“眼睛”状态来调整,AP Div,的可见性，或者空白，表示可见，则表示隐藏。将鼠标移到,AP Div,的边框上，单击鼠标右键，在弹出快捷菜单中选择,【,可视性,】,，然后通过,【,可见,】,或,【,隐藏,】,等菜单命令调整,AP Div,的可视性。,33,.,10.3.3 AP Div,的基本操作,6,对齐,AP Div,在,Dreamweaver,中可以很方便地将多个,AP Div,进行左对齐、右对齐、对齐上边缘或对齐下边缘，方法是首先选中要对齐的两个或多,AP Div,，然后执行,【,修改,】|【,排列顺序,】,菜单命令中的相应子命令即可。,34,.,10.3.4 AP Div,与表格的相互转换,1,将,AP Div,转换为表格,步骤,1,新建,HTML,文档，在文档编辑区域中插入,AP Div,，如图所示。,步骤,2,执行,【,修改,】|【,转换,】|【,将,AP Div,转换为表格,】,菜单命令，打开如图所示的,【,将,AP Div,转换为表格,】,对话框，在该对话框中设置“表格布局”属性及“布局工具”属性，单击“确定”按钮，完成,AP Div,到表格的转换，如图所示。,35,.,10.3.4 AP Div,与表格的相互转换,待转换为表格的,AP Div,内容,【,将,AP Div,转换为表格,】,对话框,36,.,10.3.4 AP Div,与表格的相互转换,2,将表格转换为,AP Div,步骤,1,在编辑窗口中打开要将,AP Div,转换为表格的网页。这里将图所示的表格布局页面再转换为,AP Div,布局。,步骤,2,在菜单栏中选择,【,修改,】,|,【,转换,】,|,【,将表格转换为,AP Div,】,命令，打开,【,将表格转换为,AP Div,】,对话框，设置“布局工具”属性，如图,10-37,所示。单击“确定”按钮，完成表格到,AP Div,的转换，转换后的效果与图,10-37,所示效果一样。,37,.,10.3.4 AP Div,与表格的相互转换,转换为表格后的效果,【,将表格转换为,AP Div】,对话框,38,.,10.3.5,使用,Div+CSS,布局网页,1,认识,Div+CSS,布局,Div+CSS,是网站标准（或称,“WEB,标准,”,）中常用术语之一，,Div+CSS,是一种网页的布局方法，这一种网页布局方法有别于传统的,HTML,网页设计语言中的表格（,table,）定位方式，实现了内容与表现相分离。在,XHTML,网站设计标准中，不再使用表格定位技术，而是采用,Div+CSS,的方法实现各种定位。,Div,元素是用来为,HTML,文档内大块（,block-level,）的内容提供结构和背景的元素。,Div,的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由,Div标签,的属性来控制，或者是通过使用样式表格式化这个块来进行控制。,39,.,10.3.5,使用,Div+CSS,布局网页,在使用,Div+CSS,网页布局的过程中，真正起到定位作用的不是,Div,标签，而是,CSS,代码，,Div,只是一个区域标签，本身不能定位和布局。可以将,Div,块放置在页面上的任意位置，并用,CSS,为它们指定属性，如宽度、高度、边框、边距、背景颜色及对齐方式等。,使用,Div+CSS,布局，用,Div,来代替表格，减少了页面代码量，提高了页面布局的灵活性，也为页面的维护提供了便利。,在使用,Div+CSS,布局时，可以使用,AP Div,，也可以直接使用,Div,标签，,AP Div,本身是一个包含绝对位置（即设置,Div,标签的,position,属性为,ablolute,）的,Div,标签。,40,.,10.3.5,使用,Div+CSS,布局网页,2,使用,AP Div,进行布局,使用,AP Div,进行网页布局可以简单总结为三个步骤，首先，绘制,AP Div,进行大致布局，然后，定义,CSS,对,AP,元素的属性进行设置，最后，在,AP Div,内部插入相应网页内容并对其进行样式设置。,41,.,10.3.5,使用,Div+CSS,布局网页,步骤,1,新建页面，执行,【,插入,】|【,布局对象,】|【AP Div】,菜单命令，或者在,【,插入,】,栏的,【,布局,】,面板中选择“绘制,AP Div”,，在网页中插入所需要的,AP Div,，然后调整,AP Div,的位置和大小，布局出页面的大致内容，如图所示。,插入,AP Div,42,.,10.3.5,使用,Div+CSS,布局网页,步骤,2,选择单个,AP Div,，在属性面板中修改,AP,元素的,ID,名称，根据,AP Div,所在的位置，分别命名为“,Top”,、“,Left”,、“,Right”,。,步骤,3,插入,AP Div,后，在,【CSS,样式,】,面板中，单击“全部”按钮，显示“所有规则”，如图所示。鼠标选择相应的,AP Div,，在下方的属性列表中就可以设置该,AP Div,的,CSS,样式。也可以双击该样式名称，打开,【CSS,规则定义,】,对话框，对该,AP Div,的样式进行定义，如图所示。这里分别设置“,#Top”,、“,#Left”,、“,#Right”,的背景颜色。,43,.,10.3.5,使用,Div+CSS,布局网页,设置,CSS,样式 定义,CSS,规则,44,.,10.3.5,使用,Div+CSS,布局网页,步骤,4,在,AP Div,内部插入内容，保存网页，完成,AP Div,布局，效果如图所示。,AP Div,布局效果图,45,.,10.3.5,使用,Div+CSS,布局网页,3,使用,Div,标签布局,AP Div,与,Div,没有本质的区别，只是,AP Div,设置了,position,属性为,ablolute,。使用,Div,标签布局时，不能像,AP Div,那样直接在页面中绘制布局。这里采用,Div,标签来制作图所示的网页布局效果。,步骤,1,新建,HTML,文档，在编辑窗口打开该文档。,步骤,2,在,【,插入,】,工具栏中打开,【,布局,】,面板，单击,【,插入,Div,标签,】,按钮，或者执行,【,插入,】|【,布局对象,】|【Div,标签,】,菜单命令，打开,【,插入,Div,标签,】,对话框。,46,.,10.3.5,使用,Div+CSS,布局网页,步骤,3,在,【,插入,Div,标签,】,对话框中的“插入”下拉列表框中选择“在插入点”，在“,ID”,下拉列表框中输入名称“,Top”,。单击“新建,CSS,规则”按钮，打开,【,新建,CSS,规则,】,对话框，如图所示。在“规则定义”下拉列表框中选择“（新建样式表文件）”，将,CSS,样式定义在外部样式表文件中。,47,.,10.3.5,使用,Div+CSS,布局网页,步骤,4,单击,【,确定,】,按钮，打开,【,将样式表文件另存为,】,对话框，输入文件名，如,divstyle.css,，将,CSS,文件保存在站点文件夹中。,步骤,5,单击,【,保存,】,按钮，打开,【,#Top,的,CSS,规则定义,】,对话框，在“背景”分类中设置背景颜色为“,#00F,”，在“方框”分类中设置宽度和高度，如图所示。,48,.,10.3.5,使用,Div+CSS,布局网页,步骤,6,单击“确定”按钮，回到,【,插入,Div,标签,】,对话窗口，再单击“确定”按钮，完成“,Top”Div,的创建和样式设置。,步骤,7,按照“步骤,2”,的操作方法，再插入一个,Div,标签，在,【,插入,Div,标签,】,对话框中设置“插入”为“在标签之后”，并选择“,”,标签。在“,ID”,文本框中输入“,Left”,，如图所示。,插入“,Left”Div,标签,49,.,10.3.5,使用,Div+CSS,布局网页,步骤,8,单击“新建,CSS,规则”按钮，打开,【,新建,CSS,规则,】,对话框，在“规则定义”下拉列表框中选择已经保存的,CSS,样式表文件，如图所示。,【,新建,CSS,规则,】,对话框,50,.,10.3.5,使用,Div+CSS,布局网页,步骤,9,单击“确定”按钮，打开,【#Left,的,CSS,规则定义,】,对话框，在“背景”分类中设置背景颜色为“,#FC0”,，在“方框”分类中设置,Width,、,Height,、,Float,和,Clear,属性，如图所示。,【#Left,的,CSS,规则定义,】,对话框,51,.,10.3.5,使用,Div+CSS,布局网页,步骤,10,单击“确定”按钮，回到,【,插入,Div,标签,】,对话框，再单击“确定”按钮，完成“,Left”Div,的创建和样式设置。,步骤,11,与插入“,Left”Div,方法相同，在右侧再插入“,Right”Div,。在,【,插入,Div,标签,】,对话框中的设置如图所示。在,【#Right,的,CSS,规则定义,】,面板中，在“背景”分类中设置背景颜色为“,#FF9”,，在“方框”分类中设置,Width,、,Height,、,Float,和,Clear,属性设置如图所示。,52,.,10.3.5,使用,Div+CSS,布局网页,设置“,Right”Div,定义“,#Right”,样式,53,.,10.3.5,使用,Div+CSS,布局网页,步骤,12,完成,Div,标签的插入以及,CSS,样式的定义后，页面效果如图所示，将,Div,标签内的文本删除，再插入所需要的内容，完成,Div,布局。,使用,Div,标签布局效果,54,.,10.3.6 Spry,框架,Spry,框架是一个,JavaScript,库，,Web,设计人员使用它可以构建能够向站点访问者提供更丰富体验的,Web,页。有了,Spry,，就可以使用,HTML,、,CSS,和极少量的,JavaScript,将,XML,数据合并到,HTML,文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。,Spry,框架支持一组用标准,HTML,、,CSS,和,JavaScript,编写的可重用构件。您可以方便地插入这些构件（采用最简单的,HTML,和,CSS,代码），然后设置构件的样式。框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容、更改页面的外观（如颜色）、与菜单项交互等等。,55,.,10.3.6 Spry,框架,Spry,框架中的每个构件都与唯一的,CSS,和,JavaScript,文件相关联。,CSS,文件中包含设置构件样式所需的全部信息，而,JavaScript,文件则赋予构件功能。当您使用,Dreamweaver,界面插入构件时，,Dreamweaver,会自动将这些文件链接到您的页面，以便构件中包含该页面的功能和样式。,与给定构件相关联的,CSS,和,JavaScript,文件根据该构件命名，因此，您很容易判断哪些文件对应于哪些构件。（例如，与折叠构件关联的文件称为,SpryAccordion.css,和,SpryAccordion.js,）。当您在已保存的页面中插入构件时，,Dreamweaver,会在您的站点中创建一个,SpryAssets,目录，并将相应的,JavaScript,和,CSS,文件保存到其中。,56,.,10.3.6 Spry,框架,1,使用,Spry,菜单栏,菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。,Dreamweaver,中可以插入两种菜单栏构件：垂直构件和水平构件。使用,Spry,菜单栏步骤如下。,57,.,10.3.6 Spry,框架,步骤,1,在编辑页面中将光标放在需要插入“,Spry,菜单栏”的位置，在,【,插入,】,面板中单击“,Spry,菜单栏”按钮，或者执行,【,插入,】|【,布局对象,】|【Spry,菜单栏,】,菜单命令。在弹出的,【Spry,菜单栏,】,对话框中选择“水平”单选按钮，如图所示。,步骤,2,单击“确定”按钮，插入,Spry,菜单栏。选中,Spry,菜单栏，在,【,属性,】,面板中可以添加或删除菜单项以及子菜单项，选中相应项目，在右侧文本框中可以设置菜单显示文本以及超链接。如图所示。,58,.,10.3.6 Spry,框架,选择菜单栏布局 编辑,Spry,菜单栏,59,.,10.3.6 Spry,框架,步骤,3,按,Ctrl+S,组合键保存页面，在弹出的如图所示的,【,复制相关文件,】,对话框中单击“确定”按钮，保存,Spry,菜单栏所需的图片、,js,脚本文件以及,CSS,样式表文件。,步骤,4,将文档切换到,【,实时视图,】,，查看页面效果，如图所示。,复制相关文件,Spry,菜单栏效果,60,.,10.3.6 Spry,框架,2,使用,Spry,选项卡式面板,选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击需要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。在网页中插入,Spry,选项卡式面板的步骤如下。,61,.,10.3.6 Spry,框架,步骤,1,在编辑页面中，将光标置于需要插入“,Spry,选项卡式面板”的位置，在,【,插入,】,面板中单击“,Spry,选项卡式面板”按钮，或者执行,【,插入,】|【,布局对象,】|【Spry,选项卡式面板,】,菜单命令，插入,Spry,选项卡式面板，如图所示。,步骤,2,选择,Spry,选项卡式面板，在,【,属性,】,面板中可以添加或删除面板，调整面板顺序以及设置默认面板。在“面板”列表框中选中某个面板后在编辑区可以对该面板标题及面板内容进行设置。,62,.,10.3.6 Spry,框架,步骤,3,将文档切换到,【,实时视图,】,，查看页面效果，如图所示。当鼠标单击某个标签时，就会切换到相应面板并显示内容。,插入,Spry,选项卡式面板,Spry,选项卡式面板效果,63,.,10.3.6 Spry,框架,3,使用,Spry,折叠式,折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。在网页中插入折叠构件的步骤如下。,64,.,10.3.6 Spry,框架,步骤,1,在编辑页面中，将光标置于需要插入“,Spry,折叠式”的位置，在,【,插入,】,面板中单击“,Spry,折叠式”按钮，或者执行,【,插入,】|【,布局对象,】|【Spry,折叠式,】,菜单命令，插入,Spry,折叠式，如图所示。,步骤,2,选中,Spry,折叠式，在,【,属性,】,面板中可以添加或删除面板，还可以改变面板标签顺序。在“面板”列表框中选中某个标签后，在文档编辑窗口中可以对该标签文本以及面板内容进行设置。,65,.,10.3.6 Spry,框架,步骤,3,将文档切换到,【,实时视图,】,，查看页面效果，如图所示。当鼠标单击某个标签时，就会展开该面板，同时缩进其他面板。,插入,Spry,折叠式,Spry,折叠式效果,66,.,10.3.6 Spry,框架,4,使用,Spry,可折叠面板,可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。插入可折叠面板的步骤如下。,67,.,10.3.6 Spry,框架,步骤,1,在编辑页面中，将光标置于需要插入“,Spry,可折叠面板”的位置，在,【,插入,】,面板中单击“,Spry,可折叠面板”按钮，或者执行,【,插入,】|【,布局对象,】|【Spry,可折叠面板,】,菜单命令，插入,Spry,可折叠面板，如图所示。,插入,Spry,可折叠面板,68,.,10.3.6 Spry,框架,步骤,2,选中,Spry,可折叠面板，在,【,属性,】,面板中设置“显示”及“默认状态”等属性。在文档编辑窗口中对面板可以对该面板的标签文本以及内容进行编辑。,步骤,3,将文档切换到,【,实时视图,】,，查看页面效果，如图所示。当鼠标单击标签时，面板内容就会显示或隐藏。,插入,Spry,可折叠面板,69,.,10.3.7,行为的基础知识,1,行为的概念,行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为是由对象、事件和动作构成。,对象是产生行为的主体，大部分网页元素都可以称为对象，比如图片、文本、多媒体等，甚至整个页面。,事件是触发动作的原因，可以被附加到各种页面元素上，也可以被附加到,HTML,标记中。一个事件总是针对网页元素或标记而言的，例如：将鼠标移到图片上（,onMouseOver,事件）、把鼠标放在图片之外（,onMouseOut,事件）、单击鼠标（,onClick,事件）等等。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。,70,.,10.3.7,行为的基础知识,动作是最终产生的动态效果，如弹出信息、播放声音、翻转图片等。行为通过动作来完成动态效果。,行为是一中运行在浏览器中的,JavaScript,代码，是事件和动作的组合，因为其功能强大，而受到网页设计者的青睐。在,Dreamweaver,中使用,Dreamweaver,提供的,“,行为,”,机制，不需要编写,JavaScript,代码，在可视化环境中按几个按钮，填写几个选项就可以实现丰富的动态页面效果，实现用户与网页的简单交互。,71,.,10.3.7,行为的基础知识,2,【,行为,】,面板,使用,【,行为,】,面板可以为网页元素指定动作和事件。,【,窗口,】|【,行为,】,菜单命令，或者按快捷键,Shift+F4,，即可打开,【,行为,】,面板，如图,10-63,所示。,72,.,10.3.7,行为的基础知识,2,Dreamweaver,的内置行为,在,【,行为,】,面板中，单击添加行为按钮，打开下拉菜单，该下拉菜单中列出了,Dreamweaver CS6,中内置的几个行为。,73,.,10.3.8,附加行为,1,拖动,AP,元素,通过,【,插入,】,工具栏的,【,布局,】,选项卡，在网页中绘制一个,AP Div,元素。在,【,行为,】,面板中单击,按钮，在弹出的下拉菜单中选择,“,拖动,AP,元素,”,，弹出对话窗口，在对话窗口中选择要设置的,AP,元素，并设置移动范围，点击,【,确定,】,按钮完成,AP Div,的拖动设置。切换到“实时视图,”,，用户可以测试通过鼠标拖动来改变该,AP Div,元素的位置。,AP Div,中可以插入文本、图片、表格等内容，一个页面可以为多个,AP Div,设置拖动效果，读者可以进一步拓展出一些有趣的应用。,74,.,10.3.8,附加行为,2,显示,-,隐藏元素,在网页文档中绘制左右相邻的两个,AP Div,元素，调整大小并添加文本内容。左侧元素,ID,为,apDiv1,，右侧元素,ID,为,apDiv2,。在,【,AP,元素,】,面板中隐藏,apDiv2,。,绘制,AP Div,隐藏,apDiv2,75,.,10.3.8,附加行为,选择左侧,apDiv1,，在,【,行为,】,面板中单击添加行为按钮,，添加,“,显示,-,隐藏元素,”,行为，在弹出的,【,显示,-,隐藏元素,】,对话窗口中，将,apDiv1,和,apDiv2,均设置为,“,显示,”,。单击,【,确定,】,按钮后，在,【,行为,】,面板中，将事件设置为,onMouseOver,。,76,.,10.3.8,附加行为,在,【,AP,元素,】,面板中选中,apDiv2,，按照上面的方法为,apDiv2,附加两个“显示,-,隐藏元素”行为。当,onMouseOver,时，,apDive1,和,apDiv2,均显示，当,onMouseOut,时，,apDiv1,显示，,apDiv2,隐藏。,切换到“实时视图”，页面中首先只显示,apDiv1,元素。当鼠标移动到,apDiv1,时，右侧,apDiv2,显示。将鼠标移动到,apDiv2,上时，,apDiv2,仍然显示。将鼠标从,apDiv2,元素上移出后，,apDiv2,隐藏消失。,77,.,10.3.8,附加行为,3,增大,/,收缩效果,在页面文档“设计”视图中，绘制一个,AP Div,，,ID,设置为,apDiv1,。选中,apDiv1,，在,【,行为,】,面板中单击添加行为按钮,，在弹出的下拉菜单中选择,【,效果,】