如何保存网页并编辑

前言：在网络如此发达是时代，浏览网页那是必然，作为一个IT工作者，经常会浏览一下编程网站，看一些技术文档(很多也是全英文的)，在学习的过程中，有些知识点是需要记录或者注释，一般以后再看时方便，所以想将碰到的网站上的各种文档原样的保存下来(一般来说，网页中的文本布局什么的是非常合理和舒服的，给人一种愉快的感觉)，之前也在一直寻找方法，但也一直没有找到。由于最近开始学习一些网页/网站制作的技术，这两天有在网上看一些全英文文档，由于自己英语水平不是很好，所以想做一些注释，并将重点标记下来等。于是开始不断的查找方法，最终算是找到了，所以跟大家分享一下，希望对大家有所帮助！

方法步骤：

第一步：下载IE浏览器(本人系统为Win8，自带了IE10,浏览器，先前一直用的IE9，但基本上差不多，IE浏览器个人一直觉得最舒服，非常简洁！)、Chrome浏览器(Google的啦)、Firefox浏览器(Mozilla的啦)等；注：IE浏览器现实的页面比较舒服，其他的浏览器显示的字体什么的感觉小一点，看着不是很舒服，所以浏览网页我都是用IE浏览器，其他的用于一些其他用途。在此，必须下载Chrome或者Firefox中的一个(因为IE保存后打开会布局混乱，对这点有点失望)，中国的那些浏览器应该还可以，没试过。

【下面以Chrome为例说明】

第二步：用Chrome打开要保存的网页，直接Ctrl+S保存，弹出“另存为”对话框，在对话框下面的“保存类型”选择“网页，全部”(这个很重要，因为你要讲网页中的所有东西全部保存，例如各种图片，css等等)(一般不会选择“网页，仅HTML”的，因为那样只是保存了HTML的东西，那么就只显示文字和仅有的内部CSS样式，不建议使用！)，选择好保存路径后，确定即可！保存成功后会得到1个网页文件和1个文件夹，文件夹中保存了调用的资源，它们两个是关联的，一般删除一个的话就会删除另一个。这时你就可以打开网页文件了，你会发现跟原网页一模一样！！

第三步：编辑网页：用Dreamweaver软件打开网页文件【这现在我只试了Dreamweaver可以正确编辑并保存成功，其他软件，例如World、WPS、VS2010、UltraEdit、KompoZer、记事本等等要么可以可视化打开，但会布局混乱，修改后也乱了；要么不可以可视化打开，修改不方便，阅读页不方便！】(如果你用过此软件的话会感觉非常简单啦)，然会你就可以可视化的编辑了(选择“查看”菜单，选择“设计”既可以可视化操作，选择“代码”的话可以编辑代码)；例如你想输入自己的文字，直接将光标放到相应位置就可以了；

第四步：编辑网页：这一步的话是我最想用的，就是“设置字体颜色”，将一些重要的知识点标记下来，主要是为了以后方便阅读；用光标选择相应文字，选择“格式”菜单，选择“颜色”，弹出“颜色”对话框，选择颜色后点击“确定”，弹出“新建CSS规则”对话框，“选择器类型”选择“类(可应用于任何HTML元素)”,“选择器名称”：自己起一个好记的即可，例如：ys_red。以后如果想将其他文字也设置成此种颜色，可以在Dreamweaver软件的下面“属性”中,选择最左侧的“HTML”，然后在“类”中选择“ys_red”即可，你也可以定义多种颜色的。其实“格式”菜单下也有其他一些选项，例如“样式”、“CSS”等，如果你是编程人员的话，这些都不是什么问题啦！

OK，编辑后保存文件即可，重新打开网页文件，你会发现你修改的东西完全体现在了网页中！Boys and Girls，Good luck to you!

少年班
2013-3-15 10:14:02