网页重构步骤

51 阅读 0 评论 34 点赞

我是靠谱客的博主清爽羊，最近开发中收集的这篇文章主要介绍网页重构步骤，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

相信大家在期末网站中使用table布局网页的人占多数，面对更高级的DIV+CSS布局，我们有些人大概只知其名，未知其实。在暑假经过杨德模师兄的培训和参加云门计划，我粗略的知道了一些。

对于一个设计好的页面，我们重构员最重要的就是如实的还原设计稿。不能把握这一点，前期设计就白费力气，所以重构应以设计稿为准。现在大多数的人喜欢用PS来设计，这点无可厚非。但是在切片的时候必须使用FW来做，其实我从来不用PS来设计的。这是瞿老师说过的，FW里面切片输出要比PS里面要好，这点我觉得很正常，毕竟FW是三剑客之一嘛。

好，废话不说。
一、建一个文件夹，名称自己定（暂定为web）。在里面再加一个子文件夹，命名为images，在web目录下新建两个CSS文件，一个命名index，另一个命名common。

二、用FW切片。切片是有学问的，切什么、切多少等等都需要斟酌的。切片做得好，无疑对网页的大小等方面起很大作用。我切片的原则是：色彩复杂的图片直接切，有渐变色或者纯色的切几个像素。输出这些图片的原则是：色彩复杂用JPG格式，色彩单一或不多，用GIF。不要以为GIF格式的图片一定会比JPG小，对于色彩很复杂的图片，采用GIF格式可能会占用更大的空间。切片输出到images之后，你会发现图片命名非常不规范，所以这时候你要对图片进行重命名，如banner之类的。以上只是针对输出的切片，然而对于网页重构，还要对整个页面切片来指导在DW里面哪个地方给都少宽和高，否则在CSS里面你就不知怎么设了，因此这一步的切片就直接关系到你的页面重构。规划的好，那么重构的困难就会小很多，切得越复杂那要考虑的就很多很细了，错误也会随之而来。总之，切片切的好是有百利而无一害的。

三、用DW重构。首先以web文件夹建立站点，这一点很重要。随后是新建一个文件保存到web文件夹并命名为index.html或其他。然后附加indec.css和common.css两个样式表。

四、开始写代码了。首先分清楚index 、common这两个CSS的作用，前者是index这个特殊页面的样式，后者是整个网站公用的css样式，所以我们应该首先编辑Common这个CSS样式文件。考虑到不同的浏览器对CSS属性的默认值不尽相同，所以在common的开始我们要写入CSS Reset代码，目前推荐用雅虎的CSS Reset。不过其中的一些属性以我们目前的水平还用不到，所以我只选了其中一些常用的属性：

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ol, ul {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}

完毕之后就是链接的样式了，如：

a:link, a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #08630e;
text-decoration: none;
}

五、这一步是对整个页面进行规划了。首先是个大的容器，这个容器里包含了网页的所有元素（也许）。一般命名都是wrapper，为了让内容居中，我们为wrapper写的代码如下：

#wrapper {
border:1px #ccc solid;
overflow:hidden;
width:963px;
margin:auto;
font-size:14px;
font-family:Tahoma, Geneva, sans-serif;
}

其中width:963px;margin:auto;为必须的属性。字体推荐:Tahoma（杨德模师兄建议）
ps：一个网页中像wrapper、header、sidebar、footer等只会用到一次的推荐用“#”。

然后就是其他的大块了，如header、sidebar、container、footer了，这些我们一般用浮动进行定位。我觉得这些DIV一般情况是页面必须的，但你也可以不用。对于一个页面能不用DIV的尽可能不用DIV，一方面层次大多不利于搜索引擎爬虫，另一方面兼容性会很难调整。像我在http://ce.sysu.edu.cn/hope/worklist/ShowArticle.asp?ArticleID=9288 页面中主体部分采用h1的，然后再h1中填充其他代码。总之，不要唯DIV论，其实DIV+CSS中主要的还是CSS。之所以这样说是强调形式与内容的分离。合理使用DIV、table 效果会更好。

说了这么多，感觉很乱。不过如果你重构的页面多了就自然熟悉这些步骤了。这些只是我的一些做法，正确与否有待考究，只是一些建议、参考之类的吧。如有错误，望不吝赐教，感激不尽……。

<<<<<<<<<<<<<<<<<<<<<<<<<<<<

来自：http://ce.sysu.edu.cn/hope/Education/ShowArticle.asp?ArticleID=9290