我的网站之旅 (三)页面设计

http://www.fanyimi.com 翻译迷   的页面设计

http://www.fanyimi.com 翻译迷   的页面设计大体上采用了div + css的设计方式。

布局用div来完成，具体的页面细节用table来完成。

1.比如首页的结构如下：


最外层用一个div来套住，<div class="wrapper"></div>

这个wrapper在css中是如此定义的：
.wrapper {
    margin: 0px auto;
    width: 1010px;
}

1010像素宽，居中对齐。

接下来所有的页面元素往里面填。
一级链接导航栏用<ul><li>元素来完成，对li采用左漂移，在<ul>元素的后面加上<div style="clear: left;"></div>，以清理浮动，不然的话，在IE下就有麻烦了。

页面的中部内容，布局用两个div来框住，设计都为float:left，其宽度分别为：700像素和280像素。
.leftWrapper, .rightWrapper {
    margin-left: 10px;
    margin-top: 15px;
    float: left;
    display: inline;
}

.leftWrapper {
    width: 700px;
}

.rightWrapper {
    width: 280px;
}

注意要写个display: inline;的css属性，否则在IE下有可能会出现3像素的问题，IE下有时候会出现3像素，有时候不会出现，具体原理我也没搞清，反正有float的地方，我都加上这么一句。

div里面的具体内容，凡是出现左右两栏的部分，我一般会采用table来完成。
之前有试过以下的方式
<ul>
    <li class="left"></li>
    <li class="right"></li>
</ul>
<div style="clear: left"></div>
这里的left和right，设置适当的宽度和高度，再左右浮动。

不太喜欢这种方式，主要是因为不敢在IE下使用过多的浮动，出现了问题要找半天，还有就是左右的等高问题。浮动的时候，当左右不等高时，有时候一些字体会跑来跑去，相当的麻烦。
对我而言，我不太喜欢浮动的方式，而table天生都是左右，上下结构通吃的元素，而且对各种浏览器的支持都相当的好，所以就采用table。虽然一些样式可能会写在页面上，如
<td valign="top"></td>
不过我倒是觉得无所谓。

2.首页出现的一些标题，和内容简要，采用的是
<h2>标题</h2>
<p>内容....</p>
也是符合html语义的书写形式，SEO的资料上说是搜索引擎喜欢有意义的html元素，会对这些<h>中出现的内容进行加分。估且相信吧。
这样写也是一目了然。
图片：

 

3.列表用<ul><li>....</li></ul>的方式，不需要浮动，设置margin:0，padding:0后，天生就换行，而且就html的语义来说，列表就是用ul,li来设计的。
当然也可以用<br />来实现换行。只是这种<br />方式比较适合一个段落里面的换行。
图片：

 

4.圈子中的头像设计
圈子中的头像采用的<ul><li>....</li></ul>的书写形式，再让其左浮动，没有采用table，就要是还没确定好一行要放几个，浮动相对灵活，设置一下宽度，很容易就可以实现1行放置头像个数的转变。
图片：

 

5.图片的设计
图片采用的是将小图合并成大图的方式。再用background-position进行控制，如这个链接http://www.fanyimi.com/images/bg.jpg ，看到一张大图片了吗？
对于一些需要background-repeat的图片，将其合并到另一张图片中，设定为宽度为10px，不设定太小是因为看到资料时，如果你设定为1px，那么某个div为200px，则背景要重绘200次，很耗浏览器。
于是忽，我就设定为10px了，看这个链接http://www.fanyimi.com/images/bgRepeat.jpg ，看到一张充满渐变的图片了吗？

目前翻译迷的整体设计是:div打外部布局，table打细节，两栏结构，优先考虑table，再考虑使用float的ul等元素。

现在首页在IE6和Firefox下表现正常，哈哈。

 

6.JS的编写
目前翻译迷上的js量比较少，有一个地方就是分页组件中，对页数输入框加入了onkeyup的事件，这样，输入页码，并输入加车后，就可以响应了。
图片：

博客中富文本输入框，采用的xheditor组件，感觉一般，效果还要加强，有空试一试别的组件，并且要扩大页面的编辑区，现在编辑区感觉太小了，JE的编辑区感觉也很小。
目前博客中当改变博客内容时，要离开页面时，会提示页面内容已经修改，是否离开，还没有做自动保存到草稿的功能。
这个提示是通过在页面上加了一个beforeunload事件
window.onbeforeunload = function(e) {
    ...
}
在事件中编写，当旧内容与新内容不相等时，弹出提示。

博客中的图片上传，采用的swfobj上传组件，赞一个，JE的图片上传做得不错。
图片：

页面还在完善中，有兴趣上一上http://www.fanyimi.com 翻译迷 ，看到广告合适的话就帮忙点一点吧，哈哈，待续...