案例网站模板页的设计

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,www.,*,Click to edit Master title style,案例网站模板页的设计,教学设计,课型：新授,课时：2,教学目标,了解模板的根本概念,掌握模板的设计方法,重点,模板的设计方法,难点,模板的设计方法,关键,结合程序实例理解,教学方法：工程实例教学,教学准备,教具资料,网络教室、多媒体播送,环境准备,Dreamweavercs3,内容提要,1.模板的根底知识,2.,案例网站的模板设计,Dreamweaver,模板的概念,Dreamweaver 模板是一种特殊类型的文档，用于设计“锁定的页面布局。模板创作者设计页面布局，并在模板中创立可在基于模板的文档中进行编辑的区域。在模板中，设计者控制哪些页面元素可以由模板用户进行编辑。,模板最强大的用途之一在于一次更新多个页面。从模板创立的文档与该模板保持连接状态除非用户以后别离该文档。可以修改模板并立即更新所有基于该模板的文档中的设计。 模板控制基于模板的文档的可编辑区域和固定区域。可以在文档中包括数种类型的模板区域。,定义模板区域,模板确定文档的根本结构，并包含诸如文本、图像、页面布局、样式和可编辑区域之类的元素。,将文档另存为模板时，Dreamweaver 自动锁定文档的大局部区域。模板创作者定义基于模板的文档中的哪些区域可编辑，方法是在模板中插入可编辑区域或可编辑参数。创立模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。,有四种类型的模板区域：可编辑区域、重复区域、可选区域和可编辑标记属性。,可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的局部。模板创作者可以将模板的任何区域定义为可编辑的。要让模板生效，它应该至少包含一个可编辑区域；否那么，基于该模板的页面将无法编辑。,创立 Dreamweaver 模板,可以从现有文档如 HTML、Macromedia ColdFusion 或 Microsoft Active Server Pages 文档创立模板，或者从新建的空文档创立模板。,“新建文档对话框“文件“新建提供了用于创立新模板和基于模板的页面的几种选项。,Dreamweaver 用文件扩展名 .dwt 来保存模板。模板被保存在站点的本地根文件夹中的一个特殊 Templates 文件夹中。如果该 Templates 文件夹在站点中尚不存在，Dreamweaver 将在保存新建模板时自动创立该文件夹。,注意： 不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。此外，不要将 Templates 文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。,创立模板：,1、在“文档窗口中翻开想要另存为模板的文档，可以采用以下两种方法之一：,假设要翻开一个现有文档，请选择“文件“翻开并选择该文档。,假设要翻开一个新的空文档，请选择“文件“新建。在翻开的对话框中选择“根本页或“动态页。在文档列表中选择想要使用的页面类型，然后单击“创立。,2、文档翻开时，选择“文件“另存为模板。,注意： 除非您选择了“不再显示此对话框，否那么您将收到一个警告，表示您正在保存的文档中没有可编辑区域。单击“确定将文档另存为模板，或单击“取消退出此对话框而不创立模板。,3、在出现的对话框中，从“站点出式菜单中选择一个用来保存模板的站点，并在“另存为文本框中为模板输入一个唯一的名称。,4、单击“保存。,模板文件被保存在站点的 Templates 文件夹中，文件扩展名为 .dwt。,创立可编辑区域,“可编辑模板区域控制基于模板的页面中的哪些区域可以编辑。,可以将整个表格或单独的表格单元格标记为可编辑的，但不能将多个表格单元格标记为单个可编辑区域。如果, 被选定，那么可编辑区域中包括单元格周围的区域；如果未选定，那么可编辑区域将只影响单元格中的内容。,编辑和更新模板,保存模板时，Dreamweaver 会询问它是否应该更新所有附着到该模板的文档。可以使用“修改“模板“刷新页面命令。Dreamweaver 在该模板所在的站点中更新基于模板的文档。Dreamweaver 将自动更新基于该模板的文档，包括基于正在更新的模板的嵌套模板。,模板结构,通常在一个网站中会有几十甚至几百个风格根本相似的页面，如果每次都重新设定网页结构以及相同栏目下的导航条、各类图标就显得非常麻烦，因此我们可以借助Dreamweaver MX 的模板功能来简化操作。其实模板的功能就是把网页布局和内容别离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创立，因此能够极大提高工作效率。,案例网站“西部汽车王的模板设计,在网站工程进行规划之后，在动手设计网站具体页面之前，为了使网站整体风格统一，同时为了节省网站子页面的建设时间，那么需要设计案例网站的模板页面，案例网站的模板页面设计步骤如下：,1、制作模板,2、新建可编辑区域,3、删除可编辑区域,4、案例网站模板,Thank You !,课后小结,