Dreamweaver CS3网页设计培训教程电子教案11

Dreamweaver CS3网页设计培训教程电子教案11 Dreamweaver CS3网页设计培训教程11?本课要点?具体要求?本课导读?上机练习Dreamweaver CS3网页设计培训教程?模板的创建与?模板的应用Dreamweaver CS3网页设计培训教程?熟悉模板的创建?熟悉可区域的设置?掌握如何从模板新建网页?掌握如何为网页应用模板?掌握如何更新网页模板Dreamweaver CS3网页设计培训教程同一个网站中的所有网页一般都具有统一的风格?即采用大致相同的网页布局结构、版式、导航条和Logo等?如果在制作每一个网页时都重复制作这些内容?不仅会增加工作量?而且也不能统一对版式进行修改?利用模板可以很好地解决这个问题。 Dreamweaver CS3网页设计培训教程11.1模板是Dreamweaver中提供的一种特殊的网页文档?其方法和普通网页的方法一样?只是可以在其中添加可区域。 所有应用了模板的网页都具有和模板相同的版式和内容?并可以在可区域中输入新的内容。 对模板进行修改后?所有应用模板的网页也会做相同的修改。 Dreamweaver CS3网页设计培训教程11.1.2Dreamweaver CS3网页设计培训教程11.1.1在模板中添加可区域后?便可通过修改这个区域创建其他网页。 如果对模板的内容?如Logo、Banner和导航条?进行了修改?则使用该模板创建的所有网页都会被更新?从而提高网页制作的效率。 Dreamweaver CS3网页设计培训教程11.1.11.模板的创建2.模板的Dreamweaver CS3网页设计培训教程1.模板必须保存在站点中?因此在创建模板前应先创建站点。 在创建模板时?有将现有网页另存为模板和新建空白模板两种方法。 1?将网页另存为模板2?创建空白模板Dreamweaver CS3网页设计培训教程2.模板创建好后?即可对模板进行。 模板的包括创建可区域、更改可区域的名称和取消可区域的标记。 1?创建可区域2?更改可区域的名称3?取消可区域的标记Dreamweaver CS3网页设计培训教程11.1.2?本案例将练习制作“校园新闻”网页模板。 该模板中有两个可区域?其中一个用于输入新闻标题?另一个用于输入新闻内容。 Dreamweaver CS3网页设计培训教程11.1.2?操作思路?1?完成站点“Templates”的创建?然后打开素材文件夹“11.1.2”中的网页“index.html”。 ?2?将其保存成模板文档“index.dwt”。 ?3?在该模板中创建可区域。 在创建可区域时?需要对一些文本格式进行设置。 ?4?对创建了可区域的模板文档进行保存。 Dreamweaver CS3网页设计培训教程11.1.2?具体操作步骤请教师参照软件和书中内容进行讲解。 Dreamweaver CS3网页设计培训教程11.1.2?本案例制作了一个网页模板?主要练习了创建模板、在模板中添加可区域以及保存模板等操作。 使用模板能提高制作网页的效率?需要注意的是?一个网站并非只能创建一个模板?可根据需要创建多个模板?以适用于不同的网页。 Dreamweaver CS3网页设计培训教程11.2完成了模板的创建和后?就可以利用模板创建网页或对已有的网页应用模板了。 一旦对模板进行修改?只需对应用了该模板的网页进行更新?即可对应用了该模板的网页一同进行修改?从而大大方便了整个网站中同类网页的制作。 Dreamweaver CS3网页设计培训教程11.2.2Dreamweaver CS3网页设计培训教程11.2.1若要用模板创建新网页?可以使用【新建文档】对话框?并从任意站点中选择模板进行创建?也可以在【资源】面板中使用已有模板创建新网页。 Dreamweaver CS3网页设计培训教程11.2.11.在【新建文档】对话框中使用模板新建网页2.在【资源】面板中使用模板创建新网页3.更新应用模板的网页Dreamweaver CS3网页设计培训教程1.在【新建文档】对话框中?可选择任一站点的模板创建新网页?其具体操作步骤如下?1?选择【文件】【新建】命令?打开【新建文档】对话框。 ?2?单击【模板中的页】选项?在【站点】列表框中选择相应的站点?然后在右侧的列表框中选择所需的模板。 ?3?单击【创建】按钮?即可通过模板创建新网页。 Dreamweaver CS3网页设计培训教程2.在【资源】面板中?只能使用当前站点的模板创建网页?其具体操作步骤如下?1?选择【窗口】【资源】命令或按【F11】键?打开【资源】面板。 ?2?在【资源】面板中单击左侧的【模板】按钮?查看当前站点中的模板。 ?3?用鼠标右键单击所需的模板?在弹出的快捷菜单中选择【从模板新建】命令?即可使用模板新建一个网页文档。 Dreamweaver CS3网页设计培训教程3.修改模板后?需对应用了该模板的网页进行更新?其具体操作步骤如下?1?打开需的模板?并进行所需的修改。 ?2?选择【文件】【保存】命令?打开【更新模板文件】对话框?如图11.22所示。 ?3?单击【更新】按钮?更新通过该模板创建的所有网页?单击【不更新】按钮?则只保存该模板而不更新通过该模板创建的网页。 Dreamweaver CS3网页设计培训教程11.2.2?11.1.2index.dwt”Dreamweaver CS3网页设计培训教程11.2.2?操作思路?1?使用11.1.2节制作的“index.dwt”模板新建一个网页。 ?2?在可区域中添加新闻标题和新闻内容。 ?3?将网页保存为“news.html”。 ?4?打开模板“index.dwt”?并关闭网页“news.html”。 ?5?模板网页。 ?6?保存模板网页并更新使用该模板创建的网页“news.html”?得到最终的网页效果。 Dreamweaver CS3网页设计培训教程11.2.2?Dreamweaver CS3网页设计培训教程11.2.2?本案例使用模板新建了一个网页?主要练习使用模板新建网页、修改模板以及更新应用模板的网页等操作。 用户从中可以了解到模板的独特之处?对模板中的公用部分进行修改后?所有应用该模板的网页都可以自动进行更新?因此?掌握模板的相关操作是非常有用的。 Dreamweaver CS3网页设计培训教程11.3.2Dreamweaver CS3网页设计培训教程11.3.1Dreamweaver CS3网页设计培训教程11.3.1?index.html”?index.dwt”?index.dwt”title”img”txt”txt2”4?Dreamweaver CS3网页设计培训教程11.3.2Dreamweaver CS3网页设计培训教程11.