dreamweaver 做网站解析6

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,1,项目六 框架与,APDiv,教学任务要点：,学会框架的创建和属性设置。,能够用框架规划网页 ，掌握框架的基本操作。,掌握,AP Div,的创建与属性设置 。,能够用,AP Div,编排网页。,教学重点与难点：,用框架规划网页。,用,AP Div,编排网页。,2,框架与,AP Div,是网页制作时用来给网页布局的两个不同的,Dreamweaver,工具，使用框架规划网页可以统一网页风格，加快网页的下载效率，增加网站内容的可读性。使用,AP Div,编排网页灵活性强，提供弹性的画面设计功能，在其中可以放入任何的网页元素，且可以任意的移动位置与相互重叠。,3,6.1,任务,1,框架的使用,框架主要由两大部分组成：框架集与框架。框架是指浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余框架页中所显示内容无关的页面，只是针对自身文档。框架集是由若干框架组成的，通过设置这些框架的布局和属性（包括框架的数目、大小和位置以及在每个框架中初始显示的页面的文档路径）让框架集在外观上形成一个整体的页面。,使用框架可以让网页的风格统一，加快浏览速度。在浏览页面时，不需要将页面中含框架的窗口都重新加载，对于导航或不动的窗口在浏览网站时只需加载一次，这样就大大加快了浏览的速度。在网页中使用框架具有以下两个优点：,访问者的浏览器不需要为每个页面重新加载与导航相关的图形，这样毫无疑问使网页的下载速度加快了。,每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。,4,例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。,5,6.1.1,情境,1,框架的创建,学习使用框架首先要从创建框架开始，根据,Dreamweaver CS4,自带的框架布局可以创建多种框架。使用创建框架的功能为网页设计框架，可以方便实现网页的整体布局。下面来介绍如何创建如图所示的框架页，这是比较简单而且最为常用的网页布局结构。,6,上述框架页创建框架的方法如下：,在,Dreamweaver CS4,中创建框架有,4,中方法：,方法一：在菜单栏中选择,【,文件,】【,新建,】,命令，弹出,【,新建文档,】,对话框，在对话框中选择“示例中的页”“框架页”“垂直拆分”命令，单击,【,创建,】,按钮，可创建框架，如图所示。,7,方法二：在菜单栏中选择,【,查看,】【,可视化助理,】【,框架边框,】,命令，在网页中按,【Alt】,键后，用鼠标拖动框架边框，也可创建框架。,方法三：在菜单栏中选择,【,插入,】【HTML】【,框架,】【,次级菜单中框架类别,】,命令，在文档中创建框架。,方法四：切换,【,插入,】,面板的模式为,【,布局,】,，单击,【,框架,】,图标按钮,右侧的三角形展开式按钮 ，在下拉列表中选择相应的框架类别，创建框架。,在弹出的,【,框架标签辅助功能属性,】,对话框中设置每个框架的标题，如下图所示。,8,9,单击,【,确定,】,按钮，在文档中创建了左右形式的框架。,提示：在命名框架的标题时尽量用位置和相应的英文来命名，这样便于对整个框架集的控制理解。,10,6.1.2,情境,2,设置框架集属性,创建完框架以后，需要为生成的框架集设置属性。框架和框架集的属性都可以在,【,属性,】,面板进行设置。,设置框架集属性。具体操作步骤如下：,（,1,）按快捷键,Shift+F2,或在菜单栏中选择,【,窗口,】【,框架,】,命令，调出,【,框架,】,面板，如图所示。,11,（,2,）在,【,框架,】,面板中单击最外一层边框，在,【,属性,】,面板中设置框架集的属性，如图所示。,12,在,【,属性,】,面板中各项参数详细设置如下：,边框：设置框架集是否显示边框，选项包括“是”、“否”、“默认值”，默认显示边框。,边框宽度：如果选择显示边框，在此可以设置边框的宽度。,边框颜色：如果选择显示边框，在此可以设置边框的颜色。,列：单击,【,属性,】,面板右侧框架集的缩图，可以设置框架集的比例，一般设置一列框架的值为固定的像素或百分比，另一列的值为“,1,”，单位选择“相对”，这样可以保证让框架集未固定设置宽度的一列随浏览器而自动适应宽度。,13,6.1.3,情境,3,设置框架属性,框架集由若干个框架页组成，这些框架页需要设置相应的属性才能完成设定的页面效果。每一框架都会根据不同的位置设置不同的属性，不同的框架组合在一起成为了一个完整的网页框架。,设置框架属性。具体操作步骤如下：,（,1,）在,【,框架,】,面板中单击框架的名称，可以在相应的,【,属性,】,面板中设置框架的相关属性，如下图所示。,14,15,（,2,）在,【,属性,】,面板中可以进行下面的设置：,框架名称：在框架名称下方的文本框中可设置框架的名称，方便区别不同的框架。,源文件：在文本框中设置当前框架页内的文档名称，也可通过单击图标查找本地文件路径。,边框：设置当前框架是否有边框，默认为有。,边框颜色：如果设置有边框，可在此设置边框颜色。,滚动：设置当前框架是否显示滚动条，有,4,个选项：“是”、“否”、“自动”、“默认”，当选择“自动”时，当网页内容超出框架范围时自动显示滚动条。,不能调整大小：选中该复选框，框架将不能调整大小。,边界宽度：设置框架中的内容与左右边框之间的距离，单位是像素。,边界高度：设置框架中的内容与上下边框之间的距离，单位是像素。,16,6.1.4,情境,4,框架的基本操作,对于框架可以进行如下的操作：“选择框架”、“拆分框架”、“删除框架”和“打开框架中的一个网页”。下面结合图例来讲述这几种基本操作。,1.,选择框架,（,1,）要选择框架，只要单击一个框架内的任意地方，该框架就成为当前活动的框架，该框架中的网页就成为当前活动的网页。,（,2,）要选择所有的框架，把光标移动框架与框架之间的分隔线上，等光标改变形状为,后单击。,17,（,3,）要改变框架的尺寸，把光标移到框架的边框上，等光标改变形状为,后拖动边框，如图所示。,18,2.,拆分框架,（,1,）要把框架一分为二，按住,【Ctrl】,键不放然后拖动框架的边框。,（,2,）也可以在菜单栏中选择,【,修改,】【,框架集,】,的下级菜单选项命令来拆分框架。,（,3,）这里选择,【,拆分右框架,】,，则右侧的框架被拆分成了左右两个框架，如图所示。,19,菜单命令,【,修改,】【,框架集,】,的次级菜单的各项功能如下：,编辑无框架内容：编辑代码,之间的内容，即当浏览器不支持框架时网页所显示的内容。,拆分左框架：拆分后原框架在新生成的框架左侧。,拆分右框架：拆分后原框架在新生成的框架右侧。,拆分上框架：拆分后原框架在新生成的框架上面。,拆分下框架：拆分后原框架在新生成的框架下面。,提示：注意编辑无框架内容的使用，当浏览器不支持框架页时网页可以显示说明文本。,20,3.,删除一个框架,框架创建后如需要删除，具体操作步骤如下：,（,1,）在菜单栏中选择,【,查看,】【,可视化助理,】【,框架边框,】,命令，将框架边框设为显示。,（,2,）将框架边框拖离页面或拖到父框架的边框上。,（,3,）经过以上操作，框架成功删除，余下的框架将自动撑满文档窗口。如下图所示。,21,22,提示：如果框架的边框设为隐藏，是无法进行拖动并删除的；在删除时，要按住鼠标不放一直将要删除的框架边框拖离页面或拖到父框架的边框才可以。查看,【,框架,】,面板可以确认框架是否删除成功。,23,4.,在框架中打开网页,要在框架中打开一个网页，操作步骤如下：,（,1,）打开,【,框架,】,面板，单击框架。,（,2,）在相应的,【,属性,】,面板中设置框架中的页面。,（,3,）在,【,属性,】,面板的“源文件”中直接输入框架中的页面的路径和名称，或单击图标,，查找文件的本地路径。,24,6.1.5,情境,5,框架的保存,在预览或关闭当前文档中的框架时，必须对框架集和其中的每个框架页文件都是进行保存，在创建一个新的框架时，系统自动为框架集命名为“,UntitleFrame-1,”、“,UntitleFrame-2,”，这样的文件名一来不好记，二来也没有意义，在设计时也容易混淆。在保存时，要对其进行相应的重命名，一般用其所在框架集中的位置来进行命名，如,admin_left.htm,、,admin_right.htm,、,admin_top.htm,、,admin_bottom.htm,这样让人一看就知道哪个文件在哪个框架中。,与保存框架集有关的命令包括,【,保存框架页,】,、,【,框架集另存,】,和,【,保存全部,】,，与保存框架有关的命令包括,【,保存框架,】,、,【,框架另存,】,、,【,保存全部,】,，,【,保存全部,】,命令是将框架集和框架集中所有的框架页文件同时进行保存，如果要保存单个框架页中的文件，只需在菜单栏中选择,【,文件,】【,保存框架,】,命令即可。,【,框架另存,】,命令是将框架在保存时重新命名为一个新的文件。,25,6.1.6,情境,6,设置无框架内容,并不是所有的浏览器都支持框架文件，因此需要设置无框架内容进行说明。以保证当用户的浏览器不能显示框架时，有一个可以显示的内容。无框架内容应用,来完成。,设置无框架内容。具体操作步骤如下：,（,1,）打开文档,index_manager.htm,，在菜单栏中选择,【,修改,】【,框架集,】【,编辑无框架内容,】,命令。,（,2,）文档将显示无框架内容的编辑窗口，在这个工作区中可以进行无框架页的设计。,26,切换到框架集的源代码，可以看到下面的一段代码：,对不起，您的浏览器不支持框架，本页内容无法正常浏览！,(3),完成无框架的编辑后，再次在菜单栏中选择,【,修改,】【,框架集,】【,编辑无框架内容,】,命令，此时将退出无框架内容的编辑，返回文档视图。,提示：无框架内容的编辑不必做过多修饰，此处的内容只是为了提示用户的浏览器不支持框架。现在大多数的浏览器均可以支持框架，因此没必要在此处下太多功夫。,27,6.1.7,情境,7,为框架页设置链接,在网页制作中之所以使用框架，最主要还是因为框架页独特的链接方式。因为应用框架，可以在不同的框架中显示不同的页面，所以在设置框架页中某处文字或图像等元素进行连接时，会发现在,【,属性,】,面板中，链接的目标下拉列表中多了几个选项，如下图所示。,28,多出来的几项名称是当前框架集所组成的框架的名称，进行正确的链接目标设置，才能保证整个页面的导航无误，让页面显示正确的链接。,创建框架链接的步骤如下：,（,1,）打开文档,【d:haokech066.1index_manager.htm】,，在左侧框架页中选择要链接的对象，在此选择文本“添加新闻内容”。,（,2,）设置文件的链接路径。,（,3,）在“目标”下拉列表中选择“,main,”（,main,为右侧框架的名称，让链接的内容在文档右侧框架中显示）。,29,（,4,）,保存全部文件，在浏览器中进行浏览，单击连接时，在右侧显示相应的页面。,_,blank:,链接的页面在新的窗口打开。,_parent:,链接的页面在父框架中打开。,_self,：链接的页面在自身窗口打开。,_top,：链接的页面在最外层框架中打开。,_main,：链接的页面在所命名的框架中打开，这里,main,为框架的名称。,30,6.1.8,情境,8,框架的嵌套,上面谈到父框架，因为有时根据实际需要，会在框架集中创建多个框架，框架之间形成上下级关联，如下图所示为一个三层框架嵌套在,【,框架,】,面板的显示效果。按照,Dreamweaver,自带的框架布局创建的框架页以后，还可以在框架内继续创建框架，形成嵌套。,31,框架的嵌套,:,其中框架,main,与框架,bottom,同级。,框架,main,和框架,bottom,组成的框架集与框架,left,同级。,框架,top,与下面的,3,个框架,left,、,main,、,bottom,组成的框架集同级。,32,6.2,任务,2 AP Div,的使用,AP Div,（绝对定位元素）是分配有绝对位置的一种页面元素。在网页制作过程中，,AP Div,让页面元素向三维空间扩展，层与层之间可相互叠加，可放在网页的任一位置，在层内可放置各种网页元素。,AP Div,对于初学者来说可能有些陌生，其实它在,Dreamweaver CS4,中等同于早期版本的层，仍然是用,div,来做标识符。,AP Div,又称为,AP,元素，以下简称,AP,层。,在,Dreamweaver CS4,中，,AP,层可以用来设计网页的布局，可以进行隐藏和显示的控制，也可以在文档设计视图中移动,AP,层，也可以在利用两个,AP,层中设置层的背景图像。利用,AP,层可以让位置更加灵活和机动，同时,AP,层也可以实现和表格的相互转换。,33,6.2.1,情境,1,创建,AP Div,和创建嵌套,AP,层,AP Div,可以手工绘制，根据需要创建,AP,层，位置更加灵活。,1.,创建,AP Div,用此功能可以在网页的任意位置绘制,AP Div,层，在代码中也是以,开始，,结束。具体步骤如下：,(1),打开,【,文件,】,面板，双击文件名，打开文件,6-21-2.htm,。,(2),打开,【,插入,】,面板，选择,【,布局,】,模式，并切换至,【,标准,】,类别，单击,【,绘制,AP Div】,图标按钮，此时鼠标变成十字形，在文档中按住鼠标并拖动，即可以绘制出一个透明的矩形区。,或者在菜单栏中选择,【,插入,】【,布局对象,】【AP Div】,命令，即可插入,AP,层。,34,(3),松开鼠标，,AP,层即创建完成。,提示：在菜单栏中选择,【,编辑,】【,首选参数,】,命令，打开,【,首选参数,】,对话框。切换到,“,不可见元素,”,面板，选中,“,AP,元素的锚点,”,复选框，即能在页面编辑状态显示,AP,锚点。,35,AP,层可以像表格一样嵌套，并且根据嵌套关系互为影响。嵌套,AP,层是指创建在已有,AP,层之内的,AP,层，嵌套的子,AP,层可以与父,AP,层一起移动、隐藏、可见，即可完全继承父,AP,的可见性。,2.,创建嵌套,AP,层,(1),打开,【,文件,】,面板，双击文件名，打开文件,6-21-3.htm,。,(2),将光标定位于要插入,AP,层的位置，单击,【,插入,】,面板的,【,常用,】,模式中的,【,插入,Div,标签,】,按钮。,(3),弹出,【,插入,Div,标签,】,对话框，在“插入”下拉列表中选择“在开始标签之后”选项，默认选择,，如下图所示。,36,37,(4),单击,【,确定,】,按钮，将光标定位于这个新建,AP,层的左上角。,(5),在菜单栏中选择,【,插入,】【,布局,】【AP Div】,命令，插入一个默认大小的,AP,层，如下图所示。,38,39,用同样的方法，在,id=AP2,的,AP,层再创建一个,AP,层,切换到代码视图，可以看到嵌套,AP,层的源码如下：,此处显示,id,“,AP1,“的内容,此处显示,id,“,AP2,“的内容,此处显示,id,“,AP3,“的内容,40,6.2.2,情境,2 AP,层的属性,AP,层除了可以用,【AP,元素,】,面板来进行一些设置，更多的属性仍然要借助于,【,属性,】,面板。,选中层（单击层的外边框，即可选中层），可以在层的,【,属性,】,面板中设置层的属性，如图所示。,41,【,属性,】,面板中各项参数详细设置如下：,层编号：设置层的名称。在一个页面可以插入多个层，因此要为每一个层命名一个不同的名字，以便进行标识识别，在此命名为“,AP2,”。,“左”、“上”：用以设置层距离页面左上角的距离，在层中位置的控制均为绝对位置，会随浏览器显示分辨率的不同而位置有所变化，在此设置左“,545px,”、设置上“,59px,”。,“宽”、“高”：宽和高指定层的宽度和高度，默认插入层的宽和高为“,200px,”、“,115px,”，在此可以先不用设置具体的数值，在插入别的网页元素后根据插入元素的宽和高再来重新定义。,Z,轴：用来设置层的,Z,轴，可以为负值，此设置在一个页面有多个层时，并重叠时，根据,Z,轴值的大小来决定层的显示顺序，,Z,轴值最大的最前面显示，将覆盖,Z,轴值小的层。,可见性：在下拉列表中设置层的可视属性，层的可视属性如下表所示。,42,层的可视属性,可视属性,含义,Default,默认值，默认层为可见,Inherit,继承父层的可视属性,Visible,设置层为显示，不随父层属性的影响,Hidden,设置层为隐藏，不受父层属性的影响,43,背景图像：用来设置层的背景图像。,背景颜色：用来设置层的背景颜色。,溢出：当层中插入元素的内容超过层的设置大小时，显示层中的内容的显示方式如下表所示。,剪辑：用来设置层的可见区域，经过剪辑的层，只有指定的区域才可见，左、右、上、下后面的文本框用来设置可见区域的左边界距离层左、右、上、下的距离。,溢出方式,含义,Visible,当层中的内容超过层的大小时，层自动将大小扩展，直到可以容纳当前内容,Hidden,当层中的内容超过层的大小时，超过部分将隐藏,Scroll,当层中的内容超过层的大小时，层中将出现滚动条，拖动滚动条，可以看到层中的全部内容,auto,当层中的内容不超过层的大小时，滚动条不显示；超出时，自动显示滚动条,44,6.2.3,情境,3 AP,元素面板,通过,【AP,元素,】,面板可以设置,AP,层的显示、隐藏属性或是设置层的防重叠性，如图所示。,45,1.,层的可见性,层的可见属性默认是可见的，按,【F2】,键，或在菜单栏中选择,【,窗口,】【AP,元素,】,命令，调出,【AP,元素,】,面板组。,可以单击所在层左侧的眼睛图标,来设置层的可见性。打开,【AP,元素,】,面板，单击层前面的眼睛图标，眼睛图标显示为睁开状态时为可见，眼睛图标显示为闭合状态时为隐藏，无眼睛图标是默认状态，为可见可继承父,AP,层可见属性，单击眼睛图标，可以同时改变所有,AP,层的可见性。眼睛睁开，,AP,层可见；眼睛闭上，,AP,层隐藏。,46,2.,防止层重叠,要防止层重叠，有两种方法：,在菜单栏中选择,【,修改,】【,排列顺序,】【,防止,AP,元素重叠,】,命令。,打开,【AP,元素,】,面板，选中“防止重叠”复选框。,在文档中创建多个层时设置了防止层重叠，则在层拖动时也只能沿已有层的边界。,如果是在建立了重叠层之后曾选择此选项，则以前发生的层重叠是不能改变的。此时，需要通过选中层来进行移动的方法把重叠的层分开。,47,6.2.4,情境,4 AP,层的基本操作,1. AP,层的激活与选中,2.,在,AP,层内插入内容,3.,调整,AP,层的大小,4.,调整,AP,层的位置,5. AP,层的对齐,6.,设置,AP,层的背景,48,6.2.5,情境,5 AP,层与表格的相互转换,在上面对,AP,层的操作过程中，不难发现在浏览器大小有所变化或显示器的分辨率变化时，,AP,层的位置都有所变动，这些有时不是我们想要的效果，就需要将,AP,层与表格进行必要的转换。,AP,层与表格有着不可分割的联系，,AP,层可以转换为表格，表格也可以转换为,AP,层。,49,1. AP,层转换为表格,AP,层可以通过命令直接转换为表格。,在菜单栏中选择,【,修改,】【,转换,】【,将,AP Div,转换为表格,】,命令。,2.,表格转换为层,AP,层不仅可以转化为表格，同样，表格也能转换为层。,在菜单栏中选择,【,修改,】【,转换,】【,表格到层,】,命令。,50,6.3,上机项目实训,6.3.1,项目案例一,1.,实训题目,“,中国名胜,”,网页,2.,实训目的,通过该网页的制作，可以掌握创建框架来规划出风格统一的网页的方法。,51,3.,实训案例效果,52,单击左边的“故宫”文字图像后显示的网页,53,6.3.2,项目案例二,1.,实训题目,“,中国名胜,十三陵,”,网页,2.,实训目的,通过该网页的制作，可以掌握创建层的方法，层的基本设计过程。,54,3.,实训案例效果,55,6.4,小结,本项目介绍了框架与,AP Div,的使用。使用框架，可将一个浏览器窗口分成多个部分，并在每一部分中显示一个,HTML,文件，通过在各框架之间建立链接，可以实现网站风格的统一。使用,AP Div,对网页进行排版布局有着很大的灵活性，结合下项目的,JavaScript,和,HTML,可以轻松玩转网页的动态效果，同时生成的网页代码清晰明了，易于对网站进行维护更新。读者通过本项目的学习，可以掌握用框架与,AP,层来布局网页。,