马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网页制作 > 如何利用dreamweaver工具批量制作网页模板

如何利用dreamweaver工具批量制作网页模板

时间:2014-06-28   文章来源:马海祥博客   访问次数:

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

特别是大规模对网站进行更新和改版,如果不是用cms系统,手工工作量将是非常大的。其实只要我们能用好模板工具,就能很好地批量制作网页,尤其是那些经常需要做一些类似的网站,如果每次都是一个个的制作是很费时间的,今天,我就借助马海祥博客的平台给大家分享一下如何利用dreamweaver工具来批量制作网页模板:

如何利用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)。模板使用的是相对路径,如果没有指定网站在本地的位置,软件就不能准确找到并保存模板文件,并且应用模板新建和更新页面时,页面中的超链接也不能随页面文件保存位置的不同而相应变化。

马海祥博客点评:

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

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

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wyzz/651.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 制作网页   dreamweaver   网页模板  

上一篇:如何创建网站或应用程序的样式指南和标准
下一篇:新手制作网页过程中必知的10个要点

您可能还会对以下这些文章感兴趣!

  • 实现网页图片预加载效果的3种技术方法

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面。不过,在web2.0时代,更多人愿意用js来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片……【查看全文

    阅读:10775关键词: 图片预加载   图片效果   预加载技术   预加载方法   预加载   日期:2014-05-02
  • 网页制作中代码关于seo的18个小技巧

    网页设计 是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。 随着浏览器和W3C标准一致性的改善,XHTML/XML(可扩展标识语言)与CSS(层叠样式表)共同用作网页内……【查看全文

    阅读:971关键词: 网页制作   网页制作代码   seo技巧   日期:2012-10-09
  • 网页制作过程中常用的20个功能代码

    一个好的网页制作要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。那么在网页制作过程中有哪些代码功能能使我们的网站更加的个性化呢? 1、让背景图不滚动 IE浏览器支持一个Body属性……【查看全文

    阅读:2688关键词: 网页制作   网页功能代码   网页代码   日期:2014-01-13
  • 提高网页加载速度的一些方法和技巧

    许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系。另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素,因此,你网站的页面加载时间是至关重要的,从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加……【查看全文

    阅读:6368关键词: 网页速度   加载速度   日期:2016-07-24
  • 新手制作网页过程中必知的10个要点

    一个好的网站网页不光只是看起来好看而已,还要是用户友好型的,通常来说,一个干净、简单的网页设计最终会成为一个可用性高的网页设计,因为它在与用户的交互中不会使其产生混淆,当页面上有太多网站功能和组件时,将会分散网站用户的注意力而失去原本浏览网站的目的……【查看全文

    阅读:2242关键词: 制作网页   网页制作   日期:2014-11-30
  • 网站制作之前构建开发环境的具体操作步骤

    在制作网站,特别是开发网站数据库之前,首先应该认真构建好Dreamweaver MX 2004+ASP.NET开发环境。对于学习的新手,由于网上的配置方法都是很久之前的,及时性不高,环境配置往往令人很头疼,我初学php配置环境时配置了2个晚上,每次总是会出现这样或那样的问题,所以……【查看全文

    阅读:787关键词: 网站制作   日期:2017-06-27
  • 提高网站速度的6种网站前端优化方法

    最近有几个同事开通了个人博客,但却抱怨说因为的买的虚拟空间,所以个人博客网站打开速度很慢。对于这种现象,按照一般的情况来看,一个网站的访问打开速度的快与慢,全是看这个网站使用的空间配置,要是这个空间主机的配置不错,那么你的网站访问速度就会很快;相反,……【查看全文

    阅读:4974关键词: 提高网站速度   网站前端优化   优化方法   日期:2013-05-06
  • 如何创建网站或应用程序的样式指南和标准

    一般来说,专业的设计师在每个项目开始之前就会创建一套网站的设计指南与标准,这样可以优化工作流程,使设计保持统一,是每个严谨的设计该有的职业态度,也是成为专业设计师的奠基石之一。为每个项目创建指南可以优化你的工作流程,也能使你的设计保持统一,并采取正确……【查看全文

    阅读:1039关键词: 网站标准   应用程序   样式指南   标准样式   日期:2014-06-13
  • 如何制作一个响应式网页?

    总体来说,响应式网页设计是一种新的网页设计思路,我们需要满足不同设备下的浏览模式,达到俱佳的体验效果。所以要想做好一个响应式网页,首先必须要满足桌面各个浏览器版本下正常显示页面。其次才考虑以webkit为内核的手机终端浏览器效果。由于IOS和Android浏览器都是……【查看全文

    阅读:4968关键词: 响应式网页   网页制作   如何制作网页   响应式设计   日期:2013-09-18
  • 如何利用dreamweaver工具批量制作网页模板

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

    阅读:1877关键词: dreamweaver   制作网页   网页模板   日期:2014-06-28
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告