如何保存想要的网页内容

保存网页，大家的第一反应应该是保存为html格式的内容，但是同时会保存同名字的文件夹。我不喜欢这样。

那可以保存为.mht格式的网页啊，是的，这个的确不错。但是有些网页的排版真的很难看。所以我希望可以编辑。

在采用一些方法编辑的时候，你会发现编辑是十分痛苦和浪费时间的。那么还是乖乖拷贝下来保存为word吧。但是网页原有的风格全乱了。我不喜欢这样。

后来使用了Evernote，由于一些原因又转投Wiz Brother的怀中，但是依然没有可以很好的方法可以让我编辑内容，并同时能够保证原有的风格，去掉一些不想要的信息如广告，还有一些不需要的信息，又或者我要把几篇文章的内容合在一起，并各自保留原有的格式。

下面我提供我的解决思路，比较恶心，十八岁以下慎入！！！！！

 

第一部分：预热

1、安装Windows Live Write 2011，下面这个是离线安装包，有200多M。

1	http://wl.dlservice.microsoft.com/download/4/7/1/471EA081-6B6D-47C9-872E-E0B7860FE3E3/wlsetup-all.exe

2、安装Firefox+Firebug

     我的版本是Firefox 8.0+Firebug 1.8.4

第二部分：开始折腾

1、

WLW连接cnblogs的博客空间，修改博客空间的皮肤，下面是我的修改，仅供参考：

001

body {

002	background-color : #F3F8FC ;

003	background-image : url ( "" );

004	background-repeat : repeat-x ;

005	font-family : 微软雅黑;

006	font-size : 14px ;

007	margin : 0px , 0px ;

008	margin-left : auto ;

009	margin-right : auto ;

010	width : 960px ;

011	padding : 10px 30px ;

012	word-wrap: break-word;

013

}

014

015

img {

016	border : 0px none ;

017

}

018

019

td {

020	font-size : 12px ;

021

}

022

023

a {

024	color : #223355 ;

025	text-decoration : none ;

026

}

027

028	.postbody a {

029	color : #1D58D1 ;

030

}

031

032

a:hover {

033	text-decoration : underline ;

034

}

035

036

h 1 {

037	font-size : 1.8em ;

038	margin : 0px ;

039	padding-left : 10px ;

040	padding-top : 10px ;

041

}

042

043	h 2 a, .postfoot a {

044	color : #223355 ;

045

}

046

047	h 1 a:visited, h 1 a:active, h 1 a:link, h 1 a:hover {

048	color : #FFFFFF ;

049	margin-top : 10px ;

050	text-decoration : none ;

051

}

052

053

h 2 {

054	font-size : 1em ;

055	margin-top : 10px ;

056

}

057

058

h 5 {

059	margin : 0px ;

060	padding : 0px ;

061

}

062

063

# top {

064	background-color : #336666 ;

065	background-image : url ( "" );

066	background-repeat : repeat-x ;

067	color : #CCCCCC ;

068	height : 0px ;

069	padding-left : 10px ;

070	vertical-align : middle ;

071

}

072

073	# top td {

074	color : white ;

075	text-align : left ;

076

}

077

078	# top h 1 {

079	font-weight : normal ;

080

}

081

082

# sub {

083	background-image : url ( "" );

084	background-repeat : repeat-x ;

085	height : 0px ;

086	line-height : 36px ;

087	color : #CCCCCC ;

088	font-size : 0.8em ;

089	padding : 4px ;

090	text-align : right ;

091

}

092

093	.headermaintitle {

094	font-family : "Trebuchet MS" ;

095

}

096

097	#tagline {

098	background-color : #0000FF ;

099	color : #FFFFFF ;

100	font-size : 1em ;

101	margin : 0px ;

102	padding : 5px ;

103

}

104

105	p.date img {

106	vertical-align : middle ;

107

}

108

109

p.date {

110	color : #AAAAAA ;

111	font-size : 1.2em ;

112	font-weight : bold ;

113	margin-bottom : 0px ;

114	padding : 2px 0px ;

115	text-align : right ;

116	height : 0px ;

117	display : none ;

118

}

119

120	p.date span {

121	background-color : #FFFFFF ;

122

}

123

124	p.date a {

125	color : #888888 ;

126

}

127

128	blockquote {

129	font-style : italic ;

130	margin : 0px ;

131	padding : 4px ;

132

}

133

134	#leftmenu {

135	left : 0px ;

136	padding : 0px 0px 5px ;

137	width : 0px ;

138

}

139

140	#leftmenu h 3 {

141	background-image : url ( "images/ColumnHeaderBg.gif" );

142	background-repeat : repeat-x ;

143	color : #666666 ;

144	font-size : 1em ;

145	margin : 0px ;

146	padding : 4px ;

147

}

148

149	#leftmenu ul {

150	font-size : 13px ;

151	list-style : none outside none ;

152	margin : 0px 0px 10px 8px ;

153	padding : 0px ;

154

}

155

156	#leftmenu li {

157	margin-top : 6px ;

158

}

159

160	#leftmenu a:active, #leftmenu a:visited, #leftmenu a:link {

161	color : #000000 ;

162	margin-right : 0px ;

163	padding : 2px ;

164	text-decoration : none ;

165

}

166

167	#leftmenu a:hover {

168	color : #1D58D1 ;

169	text-decoration : underline ;

170

}

171

172

#main {

173

174

}

175

176

#footer {

177	background-image : url ( "" );

178	background-repeat : repeat-x ;

179	height : 0px ;

180	color : #5f5b5b ;

181	font-size : 0.7em ;

182	margin : 0px ;

183	padding-top : 5px ;

184	text-align : center ;

185

}

186

187	input.text {

188	width : 300px ;

189

}

190

191	textarea {

192	height : 200px ;

193	width : 300px ;

194

}

195

196	#comments h 4 span {

197	color : #999999 ;

198

}

199

200	#comments h 4 {

201	font-size : 0.9em ;

202	margin : 0px ;

203

}

204

205

p {

206	margin : 0px 0px 14px ;

207

}

208

209

h 3 {

210	font-size : 1.2em ;

211

}

212

213	#relatedlinks ul {

214	list-style : none outside none ;

215	margin-left : 10px ;

216	padding : 0px ;

217

}

218

219

.post {

220	-moz-border-bottom-colors: none ;

221	-moz-border-image: none ;

222	-moz-border-left-colors: none ;

223	-moz-border-right-colors: none ;

224	-moz-border-top-colors: none ;

225	border-color : #CCCCCC ;

226	border-style : solid ;

227	border-width : 1px 2px 2px 1px ;

228	margin-bottom : 0px ;

229	padding : 0px ;

230

}

231

232	.posthead {

233	background-color : #EEEEEE ;

234	background-image : url ( "images/PostHeaderBg.gif" );

235	background-position : center bottom ;

236	background-repeat : repeat-x ;

237	border-bottom : 1px solid #CCCCCC ;

238	color : #444444 ;

239	font-size : 9px ;

240	padding : 0px ;

241

}

242

243	.postbody {

244	font-size : 13px ;

245	line-height : 1.5 ;

246	margin-bottom : 0px ;

247	padding : 0px ;

248

}

249

250	.posthead h 2 {

251	font-size : 13px ;

252	margin : 0px ;

253

}

254

255	.post h 5 {

256	font-size : 14px ;

257	margin : 0px 0px 4px ;

258

}

259

260	.postfoot {

261	border-top : 1px solid #DDDDDD ;

262	color : #AAAAAA ;

263	font-size : 0.8em ;

264	margin : 0px ;

265	padding : 0px ;

266	height : 0px ;

267	display : none ;

268

}

269

270

pre {

271	font-size : 1em ;

272	margin : 0px 0px 0px 22px ;

273

}

274

275	.Textbox, textarea {

276	border : 1px solid #AAAAAA ;

277	font-size : 12px ;

278	width : 160px ;

279

}

280

281

.button {

282	background-color : #CCD4E0 ;

283	border : 1px solid #AAAAAA ;

284

}

285

286	input, textarea {

287	font-family : Verdana ,Geneva, Arial ,Sans- Serif ;

288	font-size : 10px ;

289

}

290

291	.Framework {

292	background-color : #EEEEEE ;

293	border : 1px solid black ;

294

}

295

296	.MainCell {

297	background-color : White;

298	border-bottom : 1px solid #DDDDDD ;

299	border-left : 1px solid #DDDDDD ;

300	padding : 0px ;

301	vertical-align : top ;

302

}

303

304	.LeftCell {

305	overflow : hidden ;

306	vertical-align : top ;

307	width : 0px ;

308

}

309

310	.FooterCell {

311	height : 0px ;

312	vertical-align : top ;

313

}

314

315	.SectionHead {

316	text-align : right ;

317

}

318

319

.Cal {

320	background-color : #EEEEEE ;

321	border : 1px solid #999999 ;

322	font-size : 15px ;

323	font-style : normal ;

324	font-weight : normal ;

325	height : 170px ;

326	margin : 5px ;

327	width : 95% ;

328

}

329

330	.CalTitle {

331	font-family : Arial ;

332	font-size : 14px ;

333	height : 12px ;

334	margin-left : 0px ;

335	padding : 0px ;

336

}

337

338	.CalOtherMonthDay {

339	color : #808080 ;

340

}

341

342	.CalSelector {

343

344

}

345

346	.CalNextPrev {

347

348

}

349

350	.CalDayHeader {

351	background-color : #CCCCCC ;

352

}

353

354	.CalSelectedDay {

355

356

}

357

358	.CalWeekendDay {

359

360

}

361

362	.CalTodayDay {

363	font-weight : bold ;

364

}

365

366	.CalTodayDay a {

367	color : Red;

368	font-weight : bold ;

369

}

370

371

span {

372	font-size : 13px ;

373	height : 0px ;

374

}

375

376

#news {

377	padding : 5px 5px 5px 10px ;

378

}

379

380	.div_my_zzk {

381	margin-left : 8px ;

382

}

383

384	.RecentComment {

385	padding-right : 3px ;

386

}

387	.blog_post_info_block{

388	height : 0px ;

389	display : none ;

390

}

391	.green_channel{

392	height : 0px ;

393	display : none ;

394

}

 

主要是根据Habahaba皮肤修改的，参考了某仁兄的帖子。

这些我也都勾掉了。

2、

下面开始收集内容了。

在页面点击右键，审查元素，（装了Firebug才有）。点击右键，选择复制HTML

3、

在WLW中点击右键选择“选择性黏贴”，

确定后，内容就出现在了WLW中。按照这样的方法将所有的页面都收集OK了后。点击发布。

第三部分：小结

发布后的页面便是一个干净并带有原格式的页面了。点击右键保存为mht格式，

最后导入到WIZ中去，效果如下图。

怎么样，效果还满意吗？

 

附带一个小问题：

WLW发表博客是需要选择类别，默认是没有随笔的。但是如果你在随笔下面新建了类别的话，那么你会找到那个类别的。O(∩_∩)O~

 

 

原文地址：http://www.cnblogs.com/BiffoLee/archive/2011/11/18/2254607.html