dreamweaver网页模板批量制作方法、技巧

  • 13,091 views

对于网页模板的出现,可以说在很大程度上节省了美工和程序人员的工作时间,并大幅度提高了工作效率,一个合格的网页模板的确让我们可以有一条更好的路径对待一些低端的客户,能够快速的去完成我们的一些任务,而且这也是网页模板的理念所在。

特别是大规模对网站进行更新和改版,如果不是用cms系统,手工工作量将是非常大的。其实只要我们能用好模板工具,就能很好地批量制作网页,尤其是那些经常需要做一些类似的网站,如果每次都是一个个的制作是很费时间的,今天分享dreamweaver网页模板批量制作方法、技巧:

一、建立模板

首先,我们需要利用dreamweaver工具来建立模板,这其中又分为2个步骤:创建模板页面和设定可编辑区域:

1、创建模板页面

最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹——Templates来保存该模板。

当然,也可以新建一个模板:Window→Templates,会出现的Templates面板,单击右下角的New Template按钮,输入文件名,就建立了一个空模板,再单击Open Template按钮打开该模板,保存后自动存放于网站模板文件夹Templates中。

新建、打开的模板页面和普通的网页没什么两样,同样可以加入表格、层、图片、动画、脚本,设置页面属性等。

举例:这里以制作一个模板为例来说明,在该页面中,我们希望左侧的网站标识图和底部的导航图出现在每个页面中。

其中标识图由两幅图片叠加而成,导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件,它们在每个页面中都不变。

右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁,我们用表格来布置这些元素,或为这些建立网站的样式指南(具体可查看王发利博客的《如何创建网站或应用程序的样式指南和标准》相关介绍)。

准确地说它只是一个没有可编辑区域的“准模板”,下面再设定可编辑区域。

2、设定可编辑区域

设定模板可编辑区域,一般来说有两种方法。

新建可编辑区域:选择命令:Modify→Template→New Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。

标记某一区域为可编辑区域:选择命令:Modify→Template→Mark Selectin as Editable Region。如果某区域已经有一些文字,并且希望在以后新建的超文本文件中部分保留其内容,先选中该区域再执行标记命令即可。

取消可编辑状态:选择命令:Modify→Template→Unmark Editable Region。执行该命令后会弹出一个对话框,其中有当前已有的可编辑区域列表,选中要取消的区域名称,确认即可。

举例:在大片空白区中随便单击一下,执行Modify→Template→New Editable Region命令,在弹出对话框中输入名称:Main;选中左下角本页说明下面的文字,执行Modify→Template→Mark Selectin as Editable Region命令,输入名称:exp。

可以看到可编辑区显示为浅蓝色,保存即完成模板制作(建议大家也要考虑一下手机端的显示样式,具体可查看王发利博客的《如何制作一个响应式网页》详细介绍)。

二、使用模板批量制作网页

接下来,我们就可以使用刚才所做的模板来批量制作网页了,具体步骤如下:

1、根据模板新建页面

命令:File→New From Template,弹出对话框,从模板列表中选取模板,出现的新页面中除可编辑区外均有淡黄色背景,是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作,Exp编辑区保留有原来的文字,修改或重新编辑均可。

2、对一个已经有内容的页面应用模板

命令:Modify→Template→Apply Template to Page。选择模板后还会弹出一个对话框,让您选择现有的孤立内容保存到哪个可编辑区域(Choose Editable Region for Orphaned Content)。要是不想保留则可以选择“(none)”。

举例:我们先新建一个普通页面,输入:“王发利SEO博客”,执行Modify→Template→Apply Template to Page命令,选择模板test,现有内容保存区域选择Main,确认后可看到页面自动变成了模板页的形式,而“王发利SEO博客”这一行字就出现在主编辑窗口中。

3、更新模板以全面更新站点

基于某一模板建立了一些页面后,对模板进行修改后保存时,就会自动弹出一个对话框,列出所有使用了该模板的页面,询问是否要更新。

另外一种方法是执行Modify→Template→Update Pages命令。从Update Pages对话框中选择一个站点或站点的某一种模板(同一站点中可以使用多个模板),单击右侧的Start按钮,软件会自动搜索与模板相关联的网页并进行更新,非常方便!

举例:Test模板左侧图形中的图片是用一个图层叠加在另一幅图片之上的,现在不想要它,同时还想将所有页面中的该图片均删除。就可以打开模板test.dwt,删除该图层,保存模板,单击右侧的“Update”按钮即可。

另外,提醒大家一点:新建和使用模板前需定义站点。其方法是:执行命令,Site→Define Sites;指定站点名称和本地根目录(Local Root)。模板使用的是相对路径,如果没有指定网站在本地的位置,软件就不能准确找到并保存模板文件,并且应用模板新建和更新页面时,页面中的超链接也不能随页面文件保存位置的不同而相应变化。

王发利SEO博客说:在网站建设行业中,王发利经常会听说自助建站,智能建站,就是说网站的提供商已经提供了模板以及该模板带有的一套网站系统,网站系统有可能是asp的,有可能是php的,或者其它的语言。

确切的说,这类成品模板网站是可以无数次的使用被使用,用户在购买了提供商的模板后只有使用权,不拥有版权,而网站的提供商拥有最终对网站模板以及系统源代码的版权,这点就需要被使用者多加注意了。

weinxin
我的微信
分享SEO优化、SEM营销、新媒体知识,交流营销运营经验,提供网站制作、SEO、竞价托管和公众号代运营服务。
王发利
  • 本文由 发表于 2016 年 9 月 25 日
  • 转载请务必保留本文链接:http://wangfali.com/wzzz/4815.html
网页制作常用代码中的20个功能代码 网站制作

网页制作常用代码中的20个功能代码

好的网页制作要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。那么在网站制作过程中有哪些代码功能能使我们的网站更加的个...
为自适应网站添加meta标签增强搜索友好性 网站制作

为自适应网站添加meta标签增强搜索友好性

自适应网页可以自动识别终端设备屏幕的大小从而做出相应调整,完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有提升用户体验,PC端和移动端保持一致;避免重复内容和出错内容、链接...
新手制作网页必知10大要点 网站制作

新手制作网页必知10大要点

在网站制作时,我们可能会遇到很多的问题,所以网页设计师通常要扮演多种角色,并且要掌握如何构建一个有效实用的网站布局知识。 所以,今天分享一下新手制作网页必知10大要点,这应该也是每位网页设计师新手都应...
提高网页访问速度的方法和技巧 网站制作

提高网页访问速度的方法和技巧

获得提高网页访问速度的方法和技巧,帮助网页打开速度加快,因为网页的加载速度是评估网站质量一个重要指标,大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 拉勾网 拉勾网 1

      很好,对于很多具有重复或改动不大的网站网页这样制作很快, :razz: