网页制作讲网页设计高级技术.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,2025/5/10 周六,1,本章知识点和技能点：,CSS,样式、模板的创建与应用,站点管理,，进行检查超级链接、清理无用文件等,Dreamweaver,、,Fireworks,、,Flash,三者的连用,2025/5/10 周六,2,10.1CSS,样式表,CSS,（,Cascading Style Sheet,）即层叠样式表，是现在被广泛使用的格式控制技术。,层叠样式表的功能非常强大，可以将其定义在,HTML,的,TAG,（标签）里，也可以存储为一个独立的,.CSS,文件做为链接文件。,一个样式表文件可以作用于多个页面，甚至整个站点,，因此具有很好的易用性和扩展性，它可以精确地控制页面中的每一个元素,2025/5/10 周六,3,网页编辑器内设置的页面和浏览器中显示的页面实际效果往往有所差异，即使同一页面由于使用不同的浏览器或由于设置不同的分辨率，最终效果也都不同，这样设计者就很难让页面按自己的意愿精确布局，即便是掌握,HTML,语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版。,样式表可以解决这样的问题，使页面完全按照制作者的设想显示。,我们可以通过它对网页上元素进行精确的定位，轻易地控制文字、图片等各种对象。内容结构和格式控制相分离，使得网页可以只由内容构成，而将所有网页的格式控制指向某个,CSS,样式表文件，其好处表现在以下两个方面：,2025/5/10 周六,4,简化了网页的格式代码,，外部的样式表会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式只被保存一次）。,只要修改保存网站格式的,CSS,样式表就可以改变整个站点的风格特色。,在修改页面数量庞大的站点时非常有用。,使用样式表可以灵活地控制页面的布局和显示。,CSS,样式表的类型主要有：,外部样式：,当多个页面文件具有相同的样式时，可以将,CSS,样式保存为独立的文件，所有页面文件可共享该样式文件。,嵌入式样式,：通过,标记符，可将样式信息作为文档的一部分用于,HTML,。,内联式样式：,只包含在与它有关的标记内，对页面上其他的标记不起作用。,2025/5/10 周六,5,10.1.1,外部样式表,通过,Dreamweaver,的,CSS,样式面板可以很方便地创建和编辑样式表。,1.,创建外部样式表,这里我们以创建超级链接的样式为例说明,CSS,样式表的创建过程。超级链接的样式定义超级链接的四种状态，分别为：,a:link,定义链接普通状态的显示样式。,a:visited,定义被访问的链接的显示样式。,a:hover,定义将鼠标置于超级链接之上的显示样式。,a:active,定义超级链接即将点击时的显示样式。,默认的超级链接有下划线，此处我们将去掉下划线，并重新定义超级链接四个状态的样式，具体操作过程如下：,2025/5/10 周六,6,步骤,1,：打开,xiangce.htm,，单击左侧框架区域，执行,【,窗口,】【CSS,样式,】,命令打开,left.htm,文件的样式面板，如图所示。,2025/5/10 周六,7,步骤,2,：单击样式面板底部的,新增样式,按钮，弹出“新建,CSS,样式”对话框，设置“选择器类型”为高级，在“选择器”的下拉列表中选择“,a:link”,，“定义在”设置为“新建样式表文件”，“新建,CSS,样式”对话框的设置如图所示。然后单击,【,确定,】,按钮。,2025/5/10 周六,8,步骤,3,：进入如图所示的“,保存样式表文件为,”对话框，选择路径、命名为,mystyle,，然后单击,【,保存,】,按钮。,2025/5/10 周六,9,步骤,4,：进入“,CSS,样式定义”对话框。该对话框左侧共有,8,类选项，选择其中一类，右侧会出现相应的选项，在此定义样式的具体格式。此处不希望链接对象出现下划线，可将“修饰”设置为“无”，其他设置如图所示。单击,【,确定,】,按钮完成,a:link,状态的样式定义。,2025/5/10 周六,10,步骤,5,：定义链接,a:visited,状态的样式。单击样式面板底部的 编辑样式按钮，弹出如图,1,所示的,“编辑样式表”,对话框。在“编辑样式表”对话框中单击,【,新建,】,按钮也可进入“新建,CSS,样式”对话框，设置“选择器类型”为高级，“选择器”设置为“,a:visited”,，“定义在”选择为第,3,步中创建的外部样式文件,mystyle.css,，单击,【,确定,】,按钮进入“,CSS,样式定义”对话框，进行如图,2,所示的设置。单击,【,确定,】,按钮完成,a:visited,状态的样式定义。,2025/5/10 周六,11,步骤,6,：按照上述步骤分别设置,a:hover,状态和,a:active,状态的样式定义。字体、大小、修饰效果都不变，只改变字体的颜色，,a:hover,状态字体颜色为,#FF33CC,，,a:active,状态字体颜色为,#000000,。设置超级链接样式后的,CSS,面板如图所示。,2025/5/10 周六,12,步骤,7,：保存后预览效果，超级链接将无下划线，如图所示。,2025/5/10 周六,13,2.,应用外部样式表,我们以在,quwen.htm,文档中引用已经编辑好的,mystyle.css,样式文件为例进行介绍，具体操作过程如下：,步骤,1,：打开,quwen.htm,，选择,【,窗口,】【CSS,样式,】,命令打开样式面板。,步骤,2,：单击样式面板底部的,附加样式表,按钮，或在样式面板中右击从弹出的菜单中选择“附加样式表”，都可打开如图所示的对话框，通过,【,浏览,】,按钮选择样式表文件，然后单击,【,确定,】,按钮即可。,2025/5/10 周六,14,注意：,导入外部样式表与,链接外部样式表的不同在于：无论该网页是否应用了,CSS,样式表，其都将读取样式表；链接样式表则在该网页应用,CSS,样式表时才去读样式表。,import,导入的样式表优先级较高，当在文档标记内部定义的样式与导入的样式发生冲突，则内部定义的样式将不起作用。链接外部样式表文件使用以下的语句：,2025/5/10 周六,15,导入外部样式表文件使用以下的语句：,2025/5/10 周六,16,10.1.2,嵌入式样式,1.,创建嵌入式样式,这里我们以在新建,yangshi.htm,文档中创建,test,嵌入式样式为例进行介绍，具体的操作过程如下：,步骤,1,：新建,yangshi.htm,，执行,【,窗口,】【CSS,样式,】,命令打开样式面板。,步骤,2,：单击样式面板底部的 新增样式按钮，弹出“新建,CSS,样式”对话框，设置“选择器类型”为“类”，“名称”为“,.test”,，“定义在”设置为“仅对该文档”，然后单击,【,确定,】,按钮。,步骤,3,：进入“,.test CSS,样式定义”对话框，分别进行“类型”和“背景”选项的设置。然后单击,【,确定,】,按钮完成,test,内部样式义。,2025/5/10 周六,17,步骤,4,：切换到“代码”视图下，查看嵌入式样式的语句，在,中包含如下语句：,2025/5/10 周六,18,2.,应用嵌入式样式,步骤,1,：打开,yangshi.htm,，输入文字“动物的天堂、动物的世界！”，如图（,a,）所示，选中文字。,步骤,2,：在其属性面板的“样式”选项中选择创建的,test,样式，即可应用样式，如图（,b,）所示。,2025/5/10 周六,19,注意：,应用嵌入式样式时的语句为：,动物的天堂、动物的世界！,2025/5/10 周六,20,10.1.3,内联式样式,我们以在,yangshi.htm,文档中创建段落标记,的内联式样式为例进行介绍，具体的操作过程如下：,步骤,1,：打开,yangshi.htm,，在文档窗口中输入“欢迎来到动物天堂之门！”，并将其选中。,步骤,2,：单击文档工具栏中的,显示代码视图,按钮，切换到代码视图下。在选中的文本处输入以下代码,:,欢迎来到动物天堂之门！,步骤,3,：单击文档工具栏中的,设计视图按钮,，查看样式效果，如图所示。,2025/5/10 周六,21,10.2,模板,Dreamweaver,提供了模板功能，可以,一次更新多个页面。,修改模板后，所有基于该模板创建的文档会立即更新。,创建模板时，必须指定可编辑区。,2025/5/10 周六,22,10.2.1,创建模板,既可以从新建的文档中创建模板，也可以将现有的文档保存为模板。下面我们以将首页保存为模板为例进行介绍，具体操作过程如下：,步骤,1,：打开,index.htm,。,步骤,2,：定义可编辑区域。将光标置于需要添加可编辑区域的地方，单击,【,插入,】【,模板对象,】【,可编辑区域,】,命令，或单击,“常用”插入栏,中的,插入可编辑区按钮,，弹出如图所示的,“新建可编辑区”,对话框，在名称文本框中输入可编辑区域的名称,edit1,，然后单击,【,确定,】,按钮，这样就新建了一个名为,edit1,的可编辑区。同样再建立其他几个可编辑区，创建可编辑区的结果如图所示。,2025/5/10 周六,23,2025/5/10 周六,24,步骤,3,：选择,【,文件,】【,另存为模板,】,命令，弹出如图所示的对话框。,2025/5/10 周六,25,在“站点”选项的下拉列表框中列出了已定义的站点，选择需要的站点后，在“现存在的模板”列表框中会显示出该站点中已定义的模板，由于我们还没有定义任何模板，所以此时显示没有模板。,“另存为”文本框中是新建模板的名称，默认值是当前页面的文件名。设置好名称后单击,【,保存,】,按钮，就可保存模板。,系统会自动创建一个“,Templates”,文件夹，并将模板文件保存到这里，模板文件的扩展名为,.dwt,。,2025/5/10 周六,26,10.2.2,应用模板,我们将利用,index.dwt,模板创建一个有关动物知识的页面，具体操作过程如下：,步骤,1,：从模板新建文件。在,Dreamweaver,中，执行,【,文件,】【,新建,】,命令打开新建对话框，选择,“模板”选项卡,，如图所示。,左侧是站点列表，中间列出所选站点的模板文件，右侧为选中模板的预览效果。,选中所需的模板后，单击,【,创建,】,按钮即可新建一个基于该模板的文档。,在新建文档的右上角显示模板的名称。,THANK YOU,SUCCESS,2025/5/10 周六,27,可编辑,2025/5/10 周六,28,2025/5/10 周六,29,步骤,2,：编辑新建的文件。除了可编辑区域，其他区域都是不可编辑的。,在可编辑区域编辑文档，编辑后的文档如图所示，然后保存文档,zhishi.htm,即可。,2025/5/10 周六,30,10.2.3,更新模板,完成模板后还可以对其进行修改，例如增加、删除可编辑区，以及页面布局的修改等。修改完后选择,【,文件,】【,保存,】,命令,这时弹出如图所示的对话框，询问是否更新站点中所有应用该模板的页面。,2025/5/10 周六,31,单击,【,更新,】,按钮进入如图所示的“更新页面”对话框。,2025/5/10 周六,32,也可以利用资源面板来创建、编辑或更新模板。执行,【,窗口,】【,资源,】,命令，打开资源面板，在左侧列表中单击,按钮,，然后在面板的菜单选项中选择相应的操作，即可进行模板的创建、编辑和更新等，如图所示。,2025/5/10 周六,33,10.3,站点管理,站点管理的主要内容包括：,站点内文件及文件夹的管理,网页链接的管理,文件的上传和下载等。,可以利用站点窗口进行网站的管理。,2025/5/10 周六,34,10.3.1,站点地图,1.,查看站点地图,所谓的站点地图，是指由系统自动按网页之间的链接关系生成的一个示意图，从而使整个网站的组织一目了然。,要查看站点地图，可在站点窗口中执行,【,查看,】【,站点地图,】,命令，或单击工具栏中的,站点地图按钮,。,“动物天堂”网站的站点地图如图所示，站点地图显示在站点窗口的左侧，页面左侧有 符号的，说明该页面中还有链接页面，单击 可以展开这些链接。,2025/5/10 周六,35,图示的站点地图是以页面文件名显示的。通过执行,【,查看,】【,显示页面标题,】,命令，站点地图可以按页面标题显示。,2025/5/10 周六,36,2.,修改站点的布局,执行,【,查看,】【,布局,】,命令，在弹出的对话框中可以设置站点地图的布局，如图所示。此处将列数设置为,4,，结果如上图所示。,2025/5/10 周六,37,10.3.2,文件及文件夹的整理,在站点窗口中可以方便地进行新建、删除、修改和更新网页链接，以及检查整个站点中的链接等操作。下面介绍检查整个站点范围内的链接，然后删除无用文件（指没有链接的文件）。,步骤,1,：在“动物天堂”网站的站点窗口中，执行,【,站点,】【,检查站点范围的链接,】,命令，打开结果面板中的“链接检查器”选项，如图所示。此处可以检查断掉的链接、外部链接以及没有链接的文件。,步骤,2,：在“显示”下拉列表中选择,“孤立文件”,选项，按住,Shift,键选择文件框中的所有文件，然后按,Delete,键删除无用的文件。,2025/5/10 周六,38,2025/5/10 周六,39,10.4,综合技术应用,经过前面的章节学习，我们已经掌握了,Macromedia,公司推出网页三剑客的基本使用方法。他们各有侧重，只有以,Dreamweaver,为核心综合运用,Fireworks,及,Flash,，才能充分发挥出,Macromedia,网页三剑客的功能。,2025/5/10 周六,40,10.4.1 Dreamweaver,与,Fireworks,的综合应用,可以在,Dreamweaver,中直接启动,Fireworks,并使用,Fireworks,的工具对图片进行深层次的修改，返回到,Dreamweaver,中时，页面中的图形会自动更新。以修改,index.htm,文件中的,Logo,图标为例进行介绍，操作过程如下：,步骤,1,：在,Dreamweaver,打开,index.htm,文件，选中,Logo,图标后，单击其属性面板中的,按钮,步骤,2,：系统自动启动,Fireworks,，弹出如图所示的对话框，单击,【,使用此文件,】,按钮后，打开,logo.gif,文件，如图所示。,2025/5/10 周六,41,(a),修改前,(b),修改后,2025/5/10 周六,42,步骤,3,：在,Fireworks,中编辑好,logo.gif,，如图（,b,）所示，然后单击,【,完成,】,按钮即可返回,Dreamweaver,中，同时更新,Logo,图标,如图所示。,2025/5/10 周六,43,10.4.2 Dreamweaver,与,Flash,的的综合应用,众所周知，在当今网页制作上,Flash,动画的广泛使得网页变得更加生动活泼，从而给浏览者以赏心悦目的感觉。与其它传统的动画制作软件相比，,Flash,除具有矢量图的基本特征外，还更好地融合了音、视频等多媒体技术及交互功能，而且由于它本身是由,Macromedia,公司所开发，因此它能更好地与,Dreamweaver,相兼容，现在已经受到了专业人士及网页制作发烧友的普遍青睐。,以修改,index.htm,文件中的,Banner,动画为例进行介绍，操作过程如下：,2025/5/10 周六,44,步骤,1,：在,Dreamweaver,打开,index.htm,文件，选中,Banner,动画后，单击其属性面板中的,按钮,。,步骤,2,：系统自动启动,Flash,，弹出如图所示的对话框，选择,Flash,动画的原始文件,banner.fla,，单击,【,打开,】,按钮后，打开,banner.fla,文件，如图所示。,2025/5/10 周六,45,2025/5/10 周六,46,2025/5/10 周六,47,步骤,3,：在,Flash,中编辑好,banner.fla,，如图所示，然后单击,【,完成,】,按钮即可返回,Dreamweaver,中，同时更新,Banner,图标。在浏览器中预览，效果如图所示。,2025/5/10 周六,48,2025/5/10 周六,49,步骤,4,：将,Flash,文件的白色背景改为透明的。,选中,Flash,动画，切换到代码视图下，,Banner,动画的源代码如下：,只要在,和,之间的位置插入如下的一行代码就可以将,Flash,动画的背景设置为透明的，预览效果如图所示。,2025/5/10 周六,50,2025/5/10 周六,51,本章要点,CSS,是现在被广泛使用的格式控制技术。使用样式表可以灵活地控制页面的布局和显示。,CSS,样式表的类型主要有：外部样式、嵌入式样式、内联式样式。,2.,利用模板功能，可以一次更新多个页面。修改模板后，所有基于该模板创建的文档会立即更新。创建模板时，必须指定可编辑区。,3.,站点管理的主要内容包括：站点内文件及文件夹的管理、网页链接的管理、文件的上传和下载等。,2025/5/10 周六,52,4.,站点地图，是指由系统自动按网页之间的链接关系生成的一个示意图，从而使整个网站的组织一目了然。,5.,可以在,Dreamweaver,中直接启动,Fireworks,、,Flash,对图片或,Flash,动画进行编辑和修改，返回到,Dreamweaver,中时，页面中的图形或,Flash,动画会自动更新。,THANK YOU,SUCCESS,2025/5/10 周六,53,可编辑,