For Dear Editors (2) 定位与编辑

Blog - 代码 Friday, 29 October 2010 17:20

已然不早了，今天够呛能完成第二篇，有多少算多少先写着。根据之前的一些反馈意见来看，东西还是做的更加简单易懂、贴近实际、图文并茂才好。也真是这么回事，平时自己写东西翻译东西没什么鸭梨，现在搞起这档子事还有些许紧张了。

说正经的了。在我看来，编辑(editor)与页面文件产生互动的过程中，主要的工作分为定位(locate)和编辑(edit)两部分。其中：

定位：包括使用已知的关键词对文案进行搜索，以及寻找页面中特定的元素或板块位置这两点。
编辑：包括对文案的添加、替换、删减、复制粘帖等操作，以及对超级链接和图片文件的替换等。

我们用比较常规的开发与编辑工具Dreamweaver说事儿；简称DW了啊。针对以上两大部分以及它们各自包含的目标任务来大致看下。

搜索文案或代码

使用快捷键Ctrl+F打开“查找和替换”窗口：

查找范围默认是“当前文档”，也可选择“所选文字”等选项，搜索范围保持“源代码”就OK。对于单纯的文案或代码查找需求，只在“查找”中填写关键词即可。最下面的4个选项通常可以将“忽略空白”选中，对于复制过来的首尾包含空格的文案来说，这个选项可以保证这些额外的空格不会影响搜索结果。

点击右侧的“查找下一个”，如果当前文档中包含至少一个搜索关键词，那么DW会自动在文档中选中找到的结果；连续点击“查找下一个”可以遍历整个文档。

如果点击“查找全部”，DW会在底部信息栏中显示所有的搜索结果，并包含其上下文特征；双击某个搜索结果，文档就会自动跳到该位置：

寻找页面中特定的元素或板块位置

比较常见的需求是，要替换页面中的某张图片；当然我们可以在页面中查到该图片的文件名然后作为关键词在HTML页面中使用前面说到的方法搜索到，不过更加直观一些的方法是使用DW的所见即所得编辑器来辅助定位。

在DW中，选择“代码和设计”视图模式，窗口默认会分为上下两个区域，上面是代码，下面是页面预览；很多时候这里所看到的与实际页面在样式方面相差很大，不必在意，只把这个窗口作为我们寻找页面元素的辅助工具就OK。

上面的示意图中，我在预览窗口中点击选择左侧第一张图片，相应的，DW会在上面的代码中高亮标出当前图片对应的代码。当然这种“点击预览视图->自动选中高亮”的方式同样可以用于文案等任何页面元素的查找。

编辑文案、替换超级链接及图片文件

了解了如何定位和选择编辑的对象，下面一步就是实际的编辑工作了。

首先再次强调一点，就是WYSIWYG(所见即所得)编辑器从原则上说，永远应该作为定位的辅助手段；不要直接在预览窗口中进行编辑操作，最安全快捷的方式，是通过预览窗口定位代码位置，然后直接修改代码中的文案或链接等元素。

对于常规的复制粘帖等操作，仍可在DW中使用Ctrl+C和Ctrl+V等快捷键。

对于批量替换文案或代码的需求，可以使用前面提到的“查找和替换”操作窗口，在“查找”中填写需要被替换掉的文案或代码，在下面的“替换”中填写新的就OK，然后点击右侧的“替换”(逐一手工替换)或“替换全部”(全部自动替换)即可。

正如前言中所述，用来生成超级链接的<a>标签对于编辑们来说最常见的操作需求就是替换链接地址，也就是href属性。该属性可以使用带有“http://”的绝对路径，也可以使用相对于站点根目录或是当前页面文档位置的相对路径。在开发的过程中，hret属性通常使用“#”来代替，在实际的编辑过程中要注意替换掉。

另外我们时常会对是否需要在新窗口中打开链接有比较具体的需求，需要的话，最直接的方法就是在这个链接的<a>标签中添加target=“_blank”