VB.net 2010 视频教程 VB.net 2010 视频教程 c#入门经典教程
当前位置:
主页 > 网站开发 > 网页设计 >
  • Dreamweaver教程之效率篇

  • 2015-06-12 21:55 来源:未知
效率篇
信息爆炸已经成为互联网的一个特点,各个网站都有着数不清的信息等待浏览者的访问和获得,信息的多少已经成为一个网站的基础。当你面对你的网站,想要创建大量的Web页面以便将信息传递给浏览者时,也许你会发现这种重复性的工作正在变得枯燥和乏味,别愁,静下心来,仔细看看Dreamweaver给我们提供的工具,你会发现有许多可以节约你时间的工具,模板和库就是最基本和有效的途径,同时也是保持你的站点具有统一风格的利器。此外合理的利用查找于替换功能也能极大的改善你的工作效率。
一、 模板的使用。利用Dremweaver的模板我们可以创建具有相同页面布局的一系列文件,同时模板最大的好处还在于后期维护方便,可以快速的改变整个站点的布局和外观。
(一)、模板的原理。模板是由可编辑区域和不可编辑区域两部分组成。不可编辑区域包含了在所有页面中共有的元素,即构成页面的基本框架;而可编辑区域是为添加相应的内容而设置的。在后期维护中我们通过改变模板的不可编辑区,即构成页面的框架部分,可以快速的更新整个站点中所有使用了模板的页面布局。
(二)、创建模板的过程。
1、 定义模板页面。创建模板首先要创建一个基本的页面,这个页面应该包含你的所有页面里都共有的导航、版权、Logo等部分,并在将来要添加内容的区域先放置一些临时的元素,如图所示;
2、 转换为模板。创建好基本的页面后,我们执行File|Save as Template命令将此页面转存为模板。Dreamweaver会将模板文件保存在站点的Templates目录下,此时的页面与刚才没有任何区别。以为我们还没有定义可编辑区和不可编辑区。
3、 定义可编辑区域。没有定义可编辑区的模板是不能被使用的,因为它的所有部分都是锁定的。我们必须定义至少一个可编辑区,有两种方法,一种是选择已有的一部分页面内容将它指定为可编辑区域,另一种是在当前光标处插入一个空的可编辑区,定义模板时,程序会要求你指定一个名称给这个可编辑区。需要注意的是,将已有内容转换为可编辑区时,必须选择成对的标签,例如常用的<table></table>,或者<td></td>,当然也可以使用<div></div>等容器,但是不能使用包含多个单元格的<tr></tr>。选定此区域后,执行Modify|Templates|New Editable Region命令,命名此可编辑区。如果需要,我们可以创建多个可编辑区,创建完可编辑区后执行Save命令再次保存模板,此时模板才真正的可以使用。
Dreamweaver会用浅蓝色标记出可编辑区域的范围,并标明它的名称。
4、 修改可编辑区域。定义好可编辑区域后,我们还可以取消指定的可编辑区域,将其变为不可编辑区。执行Modify|Templates|Remove Editable Region,选择一个命名的可编辑区后点确定,此部分现在变为不可编辑区。
(三)、使用模板。创建模板只是为了我们以后使用模板搭下良好的结构,我们可以在此基础上分别添加内容,从而创建一系列具有相同外观的页面。
1、 从模板创建新文件。最简单的方法是从模板开始创建一个新文件,File|New From Templates命令可以自动新建一个文件,并提示你选择你需要的模板。此时你会发现前面我们定义的不可编辑区中鼠标不可用,呈现 状态。而在可编辑区鼠标可用,我们可以直接在其中输入特定的内容。
2、 对已有页面套用模板。在很多时候,我们已经有了大量未使用模板的页面,我们想将其转换为统一的外观。此时可以打开Templates面板,
我们可以从模板列表中选择一个当前站点已有的模板,点击Apply按钮,当前页面就套用上了我们选定的模板。
3、 更新模板。当我们对当前站点中的所有文件套用了模板后,我们还可以随时修改模板的外观,改变模板的布局,但要保持模板里可编辑区域不被删除,当修改完毕保存此模板时,Dreamweaver会提示是否更新所有使用了此模板的文件,并在对话框中列出使用了此模板的文件列表。我们选择Update则整个站点的文件会按照新模板的布局自动更新。
二、 库项目的运用。在我们的站点中除了具有相同外观的许多页面外,还有一些需要经常更新的页面元素,例如版权声明、站点导航条,这些内容与模板不同,他们只是页面中的一小部分,在各个页面中的摆放位置可能不同,但内容却是一致的。我们可以将此种内容保存为一个库文件,在需要的地方插入,在需要的时间快速更新。
(一)、什么是库文件。与模板主要是为了保持页面统一外观不同,库文件不仅是为了保持相同的一小部分内容,更主要的是为了满足经常需要修改的需要,而且它比模板更加灵活,可以放置在页面的任意位置,而不是固定在同一位置。
(二)、创建库文件。
我们一般是将页面中已有的一部分转换为库文件,首先打开库面板,在当前文档中选择需要转换为库项目的内容,点击库面板上的添加库项目按钮,一个新的库被添加到库面板中,上面的窗格显示出库项目的内容,而库文件被保存在当前站点的Library目录中。
(三)、在Web页面中插入库文件。在Web页面中添加库项目非常简单,首先将光标定位在需要插入库项目的位置,从库面板中将已有的库项目拖动到当前文档窗口即可。也可以点击库面板的Insert按钮将当前库项目插入页面中。
(四)、修改库文件。选定页面中的库项目时,我们可以看一下此时的属性面板
点击Open按钮可以打开相应的库文件进行编辑,编辑完保存时,Dreamweaver会自动提示更新当前站点中所有使用了此库项目的文件。
点击Detach from Original,可以使插入的库项目与库文件分离,成为单独的页面元素,它将不再受库项目的影响。
(五)、更新库文件。除了在编辑完库文件后及时更新所有的页面外,我们还可以在任何时候手动更新所有包含库文件的文档。执行Modify|Library|Update Current Page可以立即更新当前文件中的库项目。执行Modify|Library|Update Pages将打开更新页面对话框,
首先从Look In下拉列表中选择Entire Site(整个站点),并在右边的下拉列表中选择要更新站点的名称,勾选下方的Show Log可以使我们看到更新的过程,点击Done将自动更新指定站点的库文件。
三、 使用查找替换功能。上面我们介绍的提高效率的两个工具在我们的站点建设过程中非常重要,是一种整体性的提高效率方法。下面我再介绍另一个重要的工具——查找与替换功能。
(一)、简介。我们知道,HTML文件是由大量的标签组成,如<a>、<td>、<img>等等,而每个标签又由各种属性组成,因此必然存在着大量具有相同属性或相同标签的内容,利用Dreamweaver中的查找替换功能我们就可以快速的改变具有相同属性的一些内容。
(二)、查找替换面板介绍。
上图是查找替换的基本面板,
1、 执行范围(Find):这里可以设定此操作的执行范围。包括
Current Document:只作用在当前文档;
Entire Local Site:作用在整个站点;
Selected Files In Site:作用在站点窗口已选定的文件中;
Folder:对指定的文件夹中所有内容进行操作。
2、 搜索范围(Search):设定查找替换在何种层次。
Source Code :仅在源代码中执行查找替换;
Text:在源代码的所有范围中;
Text Advanced:高级文本范围;此选项的选项面板会发生一些变化,上方是Inside Tag或Not Inside Tag设定搜索是在指定标签内或在指定标签外发生。通过点击“+”号可以添加当前标签的多个属性作为搜索条件。
例如按照我们图中的设定条件,可以在所有的具有任意Class的链接中进行搜索。
Specific Tag:特定标签。
这个选项是最复杂的搜索方式,通过设定我们自定义的搜索条件,可以对所有的页面元素进行查找和替换。例如上图设定的搜索条件可以将所有链接的Class属性清除掉。
小结:关于Dreamweaver中提高效率的工具我就介绍这么多,良好的工作方式和合理的利用工具是提高工作效率的基石,只有熟悉每个工具并综合的运用他们,才可以用最少的操作最快的达到目的。因此深入研究每个命令会对你的工作有巨大的帮助,记住:存在的就是有用的,别浪费了工具。
技巧提示:
1、清理Word文件技巧。我们经常需要将一些Word文件转换为HTML文件,但这种转换的结果是生成的HTML文件非常的大,里面包含了许多重复代码,综合利用Dreamweaver的几个功能可以方便的清理掉无用代码。首先打开Word生成的HTML文件,执行Commands菜单下Clean Up Word HTML命令,程序会自动识别原来Word的版本,并将无用的代码清除。但此时的文件仍就有许多重复代码,主要是包含了大量的<span>和<p>标签,我们可以再次执行Commands菜单下的Clean up HTML命令,在弹出的对话框中选定Specific Tag(s) 选项,并输入span 和p标签,中间用空格分开,执行命令后,所有的span和p标签都被清除掉。
但此时文件中的每个图片属性中还包含了类似v:shapes="_x0000_i1025"的属性,我们还需将这些属性清除。打开查找替换面板,按下图的设置设定替换规则,执行后即可清除所有图片的这些属性。如图;
2、快速替换文件标题。前面我曾经介绍了可以在站点窗口替换文件标题,但是只能一次替换一个文件的标题,我们可以尝试着利用上一步介绍的查找替换命令一次替换多个文件的标题。通常我们新建的文件标题都是Untitled Document,可以打开Edit—Find And Replace命令,进行如下设置,将当前站点所有文件标题为Untitled Document的都替换为我们自己的标题。
3、设置默认文档格式。上面的方法虽然快捷,但是我们每次新建一个文件时,默认的文件标题仍旧是Untitled Document。因为新建文档时,Dreamweaver会调用一个默认的页面作为缺省格式,这个文件是\Dreamweaver 4\Configuration\Templates\Default.html,这样我们就可以将我们站点中统一的一些格式设置好,如背景色、字体大小、文件标题等,然后将它保存覆盖上面的Default.html文件。在以后我们新建文件时,Dreamweaver会自动套用我们设定好的格式,这可以提高很大的工作效率。
相关教程
关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们       黑ICP备07002182号