网页设计与制作教材课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网页设计与制作,老虎工作室,2012,年,12,月,网页设计与制作老虎工作室2012年12月,项目十 库和模板,制作职业学校主页,任务一,制作库,任务二 制作模板,实 训 制作,“,一翔学校,”,网页模板,任务三 制作网页,项目十 库和模板制作职业学校主页 任务一 制作库 任,在Dreamweaver 8中，可以使用库和模板来统一网站风格，提高工作效率。本项目以制作职业学校主页为例，介绍使用库和模板制作网页的基本方法。在项目中，首先制作库项目页眉和页脚，然后制作模板，最后根据模板制作主页。,在Dreamweaver 8中，可以使用库和,任务一 制作库,（一）创建库项目,（二）编排库项目,任务一 制作库（一）创建库项目,（一）创建库项目,需要掌握的内容主要有：,1,、库概念的理解,2,、,【,资源,】,面板,3,、创建库项目,4,、删除库项目,（一）创建库项目 需要掌握的内容主要有：,如果在一个站点的众多网页中，有些内容是完全相同的，就没有必要在每一页重复制作这些内容。在,Dreamweaver,中，可以将众多网页相同的某一部分内容做成库项目，然后将库项目插入到网页中。当需要修改时，只需修改库项目，使用库项目的网页就会自动进行更新，这样即省时又省力。,在,Dreamweaver,中，创建的库项目的文件扩展名为“.lbi”，保存在“Library”文件夹内，“Library”文件夹是自动生成的，不能对其名称进行修改。,1,、库概念的理解,如果在一个站点的众多网页中，有些内容是完全相,在主菜单中选择,【,窗口,】,【,资源,】,命令，打开,【,资源,】,面板。,【,资源,】,面板将网页的元素分为,9,类，面板的左边垂直并排着（图像）、（颜色）、（,URLs,）、（,Flash,）、（,Shockwave,）、（影片）、（脚本）、（模板）和（库）,9,个按钮，每一个按钮代表一大类网页元素。面板的右边是列表区，分为上栏和下栏，上栏是元素的预览图，下栏是明细列表。,在,【,库,】,和,【,模板,】,分类的明细列表栏的下面依次排列着（插入）或（应用）、（刷新站点列表）、（新建）、（编辑）和（删除）,5,个按钮。,2、【资源】面板,在主菜单中选择【窗口】【资源】命令，打开【,（,1,）创建空白库项目。,在主菜单中选择,【,窗口,】,【,资源,】,命令，打开,【,资源,】,面板。在,【,资源,】,面板中单击 （库）按钮切换至,【,库,】,分类，单击面板右下角的 （新建）按钮新建一个库，然后在列表框中输入库的名称并加以确认。,也可以在主菜单中选择,【,文件,】,【,新建,】,命令打开,【,新建文件,】,对话框，然后选择,【,常规,】,【,基本页,】,【,库项目,】,命令来创建空白库项目。,3、创建库项目,（1）创建空白库项目。3、创建库项目,（2）从已有的网页创建库项目,首先打开一个已有的文档，从中选择要保存为库项目的对象，如表格、图像等，然后在主菜单中选择【修改】【库】【增加对象到库】命令或在【资源】面板【库】分类模式下，单击右下角的 （新建）按钮，则该对象即被添加到库项目列表中，库项目名为系统默认的名称，修改名称后按Enter键确认即可。,（2）从已有的网页创建库项目,如果要删除库项目，只要先选中该项目，然后单击,【,资源,】,面板右下角的 （删除）按钮或按,Delete,键即可。,4、删除库项目,如果要删除库项目，只要先选中该项目，然后单击【资源】,（二）编排库项目,在,【,资源,】,面板中选中库项目，再单击,【,资源,】,面板右下角的 （编辑）按钮，或者双击库项目名称打开库项目进行添加内容。这和平常制作网页是一样的，不再详述。,在库项目中使用,CSS,样式时，尽量不要使用“标签”类型的,CSS,样式，因为,HTML,标签类型的,CSS,样式定义后，所有引用该样式表的文档中只要有该,HTML,标签，该样式就要自动起作用，容易引起混乱。,（二）编排库项目 在【资源】面板中选中库项目，,任务二 制作模板,（一）创建模板,（二）插入库项目,（三）插入模板对象,任务二 制作模板（一）创建模板,（一）创建模板,需要掌握的内容主要有：,1,、模板概念的理解,2,、创建模板文件,3,、删除模板文件,（一）创建模板 需要掌握的内,1、模板概念的理解,通常在一个站点的众多网页中，有许多网页的结构是相同的，这时就没有必要一页一页地重复制作这些网页。在,Dreamweaver,中，可以将网页结构相同的网页做成库模板，然后通过模板创建网页。当模板修改时，使用模板的网页也会自动进行更新。如果说库项目解决的是网页内容相同的问题，那么模板解决的恰恰是网页结构相同的问题。,在,Dreamweaver,中，创建的模板文件的文件扩展名为“,.dwt”,，保存在“,Templates”,文件夹内，“,Templates”,文件夹是自动生成的，不能对其名称进行修改。,1、模板概念的理解 通常在一个,2、创建模板文件,创建模板也有两种方法，即直接创建空白模板和将现有网页保存为模板。,（,1,）直接创建空白模板,在,【,资源,】,面板中切换到,【,模板,】,分类，然后单击,【,资源,】,面板右下角的 （新建）按钮来创建空白模板。,2、创建模板文件 创建模板也有,也可以在主菜单中选择,【,文件,】,【,新建,】,命令打开,【,新建文件,】,对话框，然后选择,【,常规,】,【,模板页,】,【HTML,模板,】,命令来创建空白模板。,创建空白模板后，还需要打开模板文件，在其中添加网页元素和模板对象。,（,2,）将现有网页保存为模板,首先打开一个已有内容的网页文档，根据实际需要在网页中选择网页元素，并将其转换为模板对象，然后在主菜单中选择,【,文件,】,【,另存为模板,】,命令将网页保存为模板。,也可以在主菜单中选择【文件】,3、删除模板文件,如果要删除模板，只要先选中该模板，然后单击,【,资源,】,面板右下角的 按钮或按,Delete,键即可。,3、删除模板文件 如果要删除模,需要掌握的内容主要有：,1,、插入库项目,2,、,修改库项目,3、分离库项目,（二）插入库项目,需要掌握的内容主要有：（二）插入库项目,在,【,资源,】,面板中切换至库分类，选中库文件，单击面板底部的,【,插入,】,按钮或者单击鼠标右键，在弹出的快捷菜单中选择,【,插入,】,命令，将库项目插入到文档中。,1,、插入库项目,在【资源】面板中切换至库分类，选中库文件，单,库项目是可以在多个页面中重复使用的页面元素。在使用库项目时，,Dreamweaver,不是向网页中插入库项目，而是向库项目中插入一个链接，,【,属性,】,面板的“,Src/Library/top.lbi”,可以清楚地说明这一点。,在网页中引用的库项目无法直接进行修改，如果要修改库项目，需要直接打开库项目进行修改。打开库项目的方式通常有两种：一种是在,【,资源,】,面板中打开库项目，另一种是在引用库项目的网页中选中库项目，然后在,【,属性,】,面板中单击 按钮，打开库项目。在库项目被打开修改且保存后，通常引用该库项目的网页会自动进行更新。如果没有进行自动更新，可以在菜单栏中选择,【,修改,】,【,库,】,【,更新当前页面,】,或,【,更新页面,】,命令进行更新。,2,、,修改库项目,库项目是可以在多个页面中重复使用的页面元素。,在,【,属性,】,面板中单击 按钮，可将库项目的内容与库文件分离，分离后库项目的内容将自动变成网页中的内容，网页与库项目不再有关联。,3,、分离库项目,在【属性】面板中单击,需要掌握的内容主要有：,1,、,重复区域,2、可编辑区域,3、重复表格,4、修改模板对象的名称,（三）插入模板对象,需要掌握的内容主要有：（三）插入模板对象,重复区域是指可以复制任意次数的指定区域。重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。在一个重复区域内可以继续插入另一个重复区域。整个被定义为重复区域的部分都可以被重复使用。,1,、,重复区域,重复区域是指可以复制任意次数的指定区域。重复,在主菜单中选择,【,插入,】,【,模板对象,】,【,重复区域,】,命令，,也可以在【插入】【常用】【模板】面板中单击 （重复区域）按钮，打开【新建重复区域】对话框，将当前选定的区域设置为重复区域。,在主菜单中选择【插入】【模板对象】【重复,可编辑区域是指可以对其进行添加、修改和删除网页元素等操作的区域。当创建了一个可编辑区域后，在该区域内不能再继续创建可编辑区域。,在主菜单中选择【插入】【模板对象】【可编辑区域】命令，也可在【插入】【常用】【模板】面板中单击 （可编辑区域）按钮，打开【新建可编辑区域】对话框，插入或者将当前选定区域设为可编辑区域。,2,、可编辑区域,可编辑区域是指可以对其进行添加、修改和删除网,网页设计与制作教材课件,重复表格是指包含重复行的表格格式的可编辑区域，可以定义表格的属性并设置哪些单元格可编辑。,重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。另外，不能将选定的区域变成重复表格，只能插入重复表格。,3,、,重复表格,重复表格是指包含重复行的表格格式的可编辑区域,在主菜单中选择,【,插入,】,【,模板对象,】,【,重复表格,】,命令，也可以在,【,插入,】,【,常用,】,【,模板,】,面板中单击 （重复表格）按钮，打开,【,插入重复表格,】,对话框，在当前区域插入重复表格。,在主菜单中选择【插入】【模板对象】【重复表,4、修改模板对象的名称,修改模板对象的名称可通过【属性】面板进行。这时首先需要选择模板对象，方法是单击模板对象的名称或者将鼠标光标定位在模板对象处，然后在工作区下面选择相应的标签，在选择模板对象时会显示其【属性】面板，在【属性】面板中修改模板对象名称即可。,4、修改模板对象的名称 修改模板对象的名称可通,任务三 制作主页,需要掌握的内容主要有：,1,、从模板新建网页,2,、在已存在页面应用模板,3,、,更新由模板生成的页面,4、分离模板,任务三 制作主页 需要掌握的内容主要有：,在主菜单中选择【文件】【新建】命令打开【新建文档】对话框，切换至【模板】选项卡，选择已创建的模板。,也可以在【资源】面板中切换到模板分类，在模板列表用鼠标右键单击需要的模板，在弹出的快捷菜单中选择【从模板新建】命令，基于模板的新文档即会在文档窗口中打开。,1、从模板新建网页,在主菜单中选择【文件】【新建】命令打开【新,首先打开要应用模板的网页文档，然后在主菜单中选择【修改】【模板】/【套用模板到页】命令，或在【资源】面板的模板列表框中选中要应用的模板，再单击面板底部的【应用】按钮即可应用模板。如果已打开的文档是一个空白文档，文档将直接应用模板，如果打开的文档是一个有内容的文档，这时通常会打开一个【不一致的区域名称】对话框，该对话框会提示读者将文档中的已有内容放在模板的什么区域。,2、在已存在页面应用模板,首先打开要应用模板的网页文档，然后在主菜单中,3、更新由模板生成的页面,通过模板生成的网页，在模板更新时可以对站点中所有应用同一模板的网页进行批量更新，这就要求在【从模板新建】对话框中勾选【当模板改变时更新页面】复选框。如果页面没有更新，可以在菜单栏中选择【修改】【模板】【更新当前页】或【更新页面】命令对由模板生成的网页进行更新。,3、更新由模板生成的页面 通过模板生成的网页，,通过【从模板中分离】命令将使用模板的网页脱离模板，脱离模板后，模板中的内容将自动变成网页中的内容，网页与模板不再有关联。,4、分离模板,通过【从模板中分离】命令将使用模板的网页脱离,实训,制作,“,一翔学校,”,网页模板,本项目主要介绍了使用库和模板制作网页的基本方法，本实训将让读者进一步巩固所学的基本知识。,要求：将素材文件复制到站点根