电子商务网页制作项目框架网页与样式表培训课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,10/16/2017,#,DW,项目,六,电子商务,网页,制作,框架网页与样式表,说出什么是框架；,会建立框架与框,架,架集，为各个框架,填,填充内容；,会调整框架的外观；,熟悉,CSS,样式表的功能；,能够完成,样,样式表的创建,和,和编辑；,会创建外部样式表并应用,到,到页面上,。,。,项目目标,框架网页,的,的含义,框架是一,种,种布局技,术,术，它是,将,将浏览器,窗,窗口划分,为,为若干个,独,独立的区,域,域，每个,区,区域中都,有,有各自的,内,内容，这,些,些区域称,为,为“框架,”,”。框架,本,本身并不,包,包含具体,的,的网页元,素,素，它只,是,是存放文,档,档的容器,，,，每个框,架,架显示不,同,同的页面,，,，并且可,以,以互不干,扰,扰地变化,。,。这样的,一,一组框架,就,就构成了,框,框架集。,框,框架集本,身,身不包含,任,任何内容,，,，它只是,一,一个,HTML,文件，告,诉,诉浏览器,如,如何显示,一,一组框架,。,。,框架常用于站,点,点导航系,统,统，如网,页,页的导航,按,按钮、网,页,页,LOGO,和标题等,，,，对于一,个,个网站而,言,言，其中,的,的许多网,页,页一般都,具,具有相同,的,的导航、,LOGO,等部分，,这,这时我们,可,可以将这,些,些相同的,部,部分做成,框,框架网页,，,，这样就,可,可以在每,个,个页面中,重,重复使用,，,，从而大,大,大提高网,页,页制作的,效,效率。,在进行框架,网,网页设计,时,时，应先,花,花一些时,间,间进行版,面,面的安排,，,，分清各,个,个框架页,面,面内容的,主,主次，把,最,最重要的,页,页面放置,在,在面积最,大,大、位置,最,最醒目的,框,框架中。,创建框架,和,和框架集,在,DreamweaverCS5,中可以通,过,过两种方,法,法插入框,架,架集：,1,通过“,插,插入”栏,，,，在现有,网,网页中直,接,接插入框,架,架。,选择“插入”,工,工具栏的,“,“布局”,选,选项中的,“,“框架”,选,选项，可,以,以随意选,择,择自己需,要,要的框架,集,集类型。,创建框架,和,和框架集,2,使用“,新,新建文档,”,”对话框,创,创建新的,空,空框架集,。,。,使用“新建文,档,档”对话,框,框创建新,框,框架集的,一,一般步骤,如,如下：,（,1,）打开“,文,文件”菜,单,单，选择,“,“新建”,命,命令，将,打,打开“新,建,建文档”,对,对话框，,在,在“示例,中,中的页”,类,类别中选,择,择“框架页,”,”。,创建框架,和,和框架集,（,2,）在“示,例,例页”列,表,表中选择,框,框架集类,型,型，可以,在,在对话框,右,右端看到,该,该框架集,的,的预览效,果,果和相关,描,描述。,（,3,）单击“,创,创建”按,钮,钮，在文,档,档窗口可,以,以看到新,创,创建的框,架,架集，同,时,时,DreamweaverCS5,会打开一,个,个“框架,标,标签辅助,功,功能属性,”,”对话框。,（,4,）为每个,框,框架输入,恰,恰当的标,题,题名称，,然,然后点击,“,“确定”,即,即可成功,创,创建框架,页,页。,框架的标题即,框,框架的名称，,它,它用于识别不,同,同的框架，在,指,指定打开链接,目,目标的目标框,架,架或脚本在引,用,用该框架时，,框,框架名称就派,上,上用场了。一,般,般情况下使用,系,系统提供的默,认,认值，如,mainFrame,，,topFrame,，,leftFrame,等，这些名称,都,都是约定俗成,的,的。当然，你,也,也可以使用自,己,己定义的名称,。,。,小贴士,选择框架和框,架,架集,对框架和框架集,进,进行操作，首,先,先必须选中它,。,。我们可以在,文,文档窗口中选,择,择框架或框架,集,集，也可以通,过,过“框架”面,板,板进行选择。,1,在文档窗口,中,中选择框架或,框,框架集,（,1,）选择框架,在“设计”视图,中,中，按住,Alt,键的同时单击,某,某个框架内部,，,，即可选中该,框,框架，此时该,框,框架的边框被,虚,虚线环绕。,（,2,）选择框架集,单击框架集的某一,内,内部框架边框,即,即可选中该框,架,架集，此时该,框,框架集的所有,边,边框被虚线环,绕,绕。,要执行这一操,作,作，框架边框,必,必须是可见的,。,。如果看不到,框,框架边框，你,可,可以通过打开,“,“查看”菜单,，,，选择“可视,化,化助理”子菜,单,单中的“框架,边,边框”使框架,边,边框可见。,小贴士,选择框架和框,架,架集,2,在“框架”,面,面板中选择框,架,架或框架集,在文档窗口中选,择,择框架和框架,集,集有时候不是,很,很方便，,DreamweaverCS3,提供了“框架,”,”面板，便于,对,对框架和框架,集,集进行选择操,作,作。打开“窗,口,口”菜单，选,择,择“框架”命,令,令，或按快捷,键,键,Shift+F2,，可以打开“,框,框架”面板。,（,1,）选择框架,在“框架”面板,中,中单击框架即,可,可选中该框架,，,，此时在文档,窗,窗口中该框架,的,的边框被虚线,环,环绕，在“框,架,架”面板中该,框,框架周围会显,示,示一个选择轮,廓,廓。,（,2,）选择框架集,在“框架”面板,中,中单击环绕框,架,架集的边框，,即,即可选中该框,架,架集，此时该,框,框架集的所有,边,边框被虚线环,绕,绕，在“框架,”,”面板中该框,架,架集周围会显,示,示一个选择轮,廓,廓。,保存框架和框,架,架集,对于初学者来说，,为,为了避免出现,混,混乱，在创建,完,完框架和框架,集,集后，最好立,刻,刻保存框架和,框,框架集。使用,了,了框架的页面,包,包含若干个文,件,件。用户在保,存,存网页时不仅,需,需要保存框架,中,中的网页，还,要,要保存框架集,文,文件。在具体,操,操作中可以分,别,别保存或者一,次,次保存所有文,件,件。,1,分别保存,将光标定位在要,保,保存的框架中,，,，打开“文件,”,”菜单，选择,“,“保存框架”,命,命令，将打开,“,“另存为”对,话,话框，输入要,保,保存的文件名,，,，点击“保存,”,”即可。按此,方,方法依次保存,其,其它框架。,在保存了所有的,框,框架后，还需,要,要保存框架集,。,。在“框架”,面,面板或文档窗,口,口中选中框架,集,集，打开“文,件,件”菜单，选,择,择“保存框架,页,页”命令，单,击,击“保存”按,钮,钮，将保存该,框,框架集。,保存框架和框,架,架集,2,一次保存,打开“文件”菜单,，,，选择“保存,全,全部”命令，,DreamweaverCS5,将打开“另存,为,为”对话框，,依,依次提示要保,存,存的内容。首,先,先要保存的是,主,主框架集，在,文,文档窗口中会,以,以斜线框包围,整,整个框架，并,同,同时弹出“另,存,存为”对话框。,输入要保存的,框,框架集名，单,击,击“保存”后,，,，将打开第二,个,个“另存为”,对,对话框，提示,将,将要保存第一,个,个框架文件，,在,在文档窗口中,也,也会以斜线框,包,包围要保存的,框,框架。,输入要保存的,框,框架文件名称,，,，单击“保存,”,”后，将打开,第,第三个“另存,为,为”对话框，,提,提示将要保存,第,第二个框架文,件,件。就这样，,依,依次保存所有,的,的框架文件。,设置框架和框,架,架集属性,1,设置框架的,属,属性,设置框架属性主要,是,是通过设置框,架,架的“属性”,面,面板中的相应,参,参数实现的，,当,当选择某个框,架,架时，“属性,”,”面板中将显,示,示该框架的属性。,框架名称：决,定,定用来作为超,级,级链接目标和,脚,脚本引用的当,前,前框架名称。,源文件：设置,框,框架的源文档,。,。,滚动：设置在,没,没有足够空间,显,显示当前框架,中,中的内容时是,否,否使用滚动条,。,。,不能调整大小,：,：使浏览者不,能,能调整框架大,小,小。,边框：控制当,前,前框架的边框,是,是否显示。,边框颜色：设,置,置所有和当前,框,框架相邻的边,框,框颜色。,边界宽度：设,置,置框架左右边,框,框和内容之间,的,的距离（单位,为,为像素）。,边界高度：设,置,置框架上下边,框,框和内容之间,的,的距离（单位,为,为像素）。,设置框架和框,架,架集属性,2,设置框架集,的,的属性,要设置框架集,的,的属性，可以,选,选择该框架集,，,，在“属性”,面,面板里设置相,应,应的属性。,边框：控制当前框,架,架集内框架的,边,边框。,选择“是”可,以,以显示三维灰,色,色的边框；,选择“否”可,以,以显示扁平灰,色,色的边框；,选择“默认”,可,可以由浏览器,确,确定如何显示,边,边框。,边框宽度：设置当,前,前框架集中边,框,框的宽度。,边框颜色：设置当,前,前框架集中所,有,有边框的颜色,。,。,值：指所选择的,行,行或列的大小,。,。,单位：指所选择的,行,行或列大小的,单,单位。,行列选定范围：选,取,取框架集的行,或,或列。,CSS,样式表,CSS,样式表是网页,设,设计中非常重,要,要的技术，运,用,用,CSS,样式表我们可,以,以实现很多网,页,页的样式和效,果,果，还可以大,大,大提高制作网,页,页的效率，同,时,时运用,CSS+DIV,进行网页布局,则,则是更为高级,和,和先进的网页,布,布局技术。,什么是,CSS,样式表,CSS,是层叠样式表,单,单（,Cascading Style Sheets,）的缩写，是,用,用于控制网页,样,样式并允许将,样,样式信息与网,页,页内容分离的,一,一种标记性语,言,言。因此它最,基,基本的概念就,是,是层叠。层叠,的,的意思是指在,同,同一个,HTML,文档中可以有,多,多种样式表存,在,在，不同层次,样,样式表根据其,所,所在的位置拥,有,有不同的优先,级,级。要理解“,层,层叠”的概念,，,，首先应该了,解,解一下,CSS,样式表的三种,定,定义和使用的,优,优先级。,1,CSS,样式表的三种,定,定义,（,1,）外部样式表,：,：,将一些样式信,息,息定义在一个,单,单独的外部文,件,件中，其扩展,名,名为,.CSS,。整个网站的,所,所有文件都可,以,以链接此文件,，,，并使用其中,定,定义的样式。,（,2,）内嵌样式表,：,：,内嵌式样式表,只,只在当前网页,中,中起作用，位,于,于,区，与网页文,件,件一起保存。,只,只对当前网页,文,文件起作用。,（,3,）内联样式表,：,：,将样式信息直,接,接定义在网页,中,中特定的标记,和,和元素上，只,对,对该标记和元,素,素起作用。,什么是,CSS,样式表,2,三种定义之,间,间的关系,这三种定义中内,联,联样式表最优,先,先，其次是内,嵌,嵌样式表，最,后,后是外部样式,表,表。它们之间,是,是互相影响、,互,互相继承的关,系,系。网页元素,最,最终显示的样,式,式是优先级最,高,高的样式定义,，,，同时各元素,会,会自动继承上,级,级父元素中定,义,义的样式。,3,CSS,样式表的功能,没有使用,CSS,样式表的网页,只,只能算是初级,作,作品，,CSS,样式表为网页,创,创新奠定了基,石,石。,CSS,样式表的功能,如,如下：,（,1,）对布局、字,体,体、颜色、背,景,景和其它图文,效,效果实现更加,精,精确的控制。,（,2,）只通过修改,一,一个文件就可,以,以改变多个网,页,页的外观和格,式,式。,（,3,）在所有浏览,器,器和平台之间,具,具备兼容性。,不,不像其它的网,络,络技术，样式,表,表的代码有很,好,好的兼容性，,也,也就是说，即,使,使浏览者丢失,了,了某个插件也,不,不会发生中断,，,，使用老版本,的,的浏览器时，,代,代码也不会出,现,现杂乱无章的,情,情况。,（,4,）