习惯的力量:table VS div

记得我当初学习制作网页时,刚刚学会了用table,相当的有成就感,貌似已经没有我做不出来的页面布局了。后来,饭碗被fireworks这类页面“切割”软件给抢了,fireworks切一张设计图,也就几分钟的事。于是之后再说做网页,无非是用fireworks切方块了。

最近这几年,由于工作的原因,我的时间基本上都放在linux、mysql和ruby on rails上了,用进废退,“Web design”技能我差不多都还给教材了。这几天晚上没事给这小博改版,才发现世道已经变了,HTML被XHTML取代,CSS被CSS2取代,更要命的是布景模版里一个table都没有,全是div了。难怪老人家说逆水行舟,不进则退。这回我退的可以了,赶紧恶补吧。不过习惯的力量真是强大的,一边是熟悉但乏味的旧方法,一边是陌生但精彩的新方法,脑子里却总是不自觉的用旧方法思考起来……慢慢来吧。

Div也是方块,但是div的方块比起table的方块来,的确灵活多了(table指老式HTML+CSS页面布局,div指XHTML+CSS2布局,不过HTML+CSS应该也可以用div布局):

  • table是顺序的,下一个td永远在上一个td的右面,而且水平一致;而下一个div可以在上一个div的任何方向上。
  • table是平面的,一个table不可能遮住另一个table;而div虽然不是3D的,但是是有层次的,一个div可以部分或全部遮住另一个div。
  • table定位永远是从上堆到下,从左堆到右;而div定位可以也是这样的常规顺序定位,也可以是相对定位({posion: relative; float:right; top: +10px}这样一个定义就是说此div相对当前行居右对齐,并且顶部比当前行的顶部低10象素。页眉上的抓虾按钮就是采用类似方式定位的),还可以是绝对定位({posion: absolute; left:…; top: …;}以left,top的座标形式定位当前div),更可以是固定定位({position:fixed;….}定位在屏幕上某点)。

另外XHTML相对HTML变化也很大,虽然我们习惯了一些不规范的写法,而浏览器也牵就我们,能把一些不规范的页面正常的显示出来,但是规范毕竟是大趋势。经过我的一番努力,本站已经通过了W3C的XHTML1.0 CSS2.0规范检查,链接在页脚上。你也可以用此工具检查一下你的网页是否已经XHTML了。

WordPress改版手记

wp-1.jpg今天很有成就感,我把内森忽悠的也来玩Wordpress了。比起blogger、sina、sohu等现成的blog套餐,Wordpress就是个性DIY了。这里不谈Wordpress的安装等问题,只说说如何改版。

首先,虽然是DIY,但是我们没必要重新发明轮子,去WordPress官方布景站去搜一个合个性的布景吧。 下载以后,把这个.zip文件解压缩到你的Wordpress布景文件夹,wp-content/themes下面,例如wp-content/themes/mytheme。Linux主机的话要记得chmod一下,使mytheme文件夹可写,这样以后你只需要wp-admin就可以修改布景了。

然后进入wp-admin,点开presentation->themes,如果文件夹没放错地方,那么这里应该出现你刚才上传的新布景了,一般还有预览图片呢。点击新布景,再看看你的WP站,已经旧貌换新颜了。接下来是一些DIY了。

布景DIY其实就是编辑HTML、CSS,有一定PHP基础的你可以做更进一步的定制,显示一些原来模版上没有的东西。具体如何修改HTML、CSS,这个就不是几句话说得清楚了,我这简单说说WP布景各部分的功能:

  • Stylesheet就是CSS了,现在绝大多数风格,例如背景色、前景色、字号、间距等等都在CSS 里做了
  • sidebar是右侧栏模版,一般显示blog分类、日历、归档等等
  • main index就是首页的模版
  • archives:归档页面模版
  • comments:评论模版
  • footer:页脚模版,一般是版权信息等等,powered by wordpress!
  • functions.php:这个是布景调用的php函数,轻易不要动
  • single post:点击一篇文章进入的单页的模版,类似main index,只是少了一层循环
  • 404:页面未找到错误的页面模版
  • search results:搜索结果页面模版
  • page template:自定义页面,例如about,的模版,也类似single post
  • header:页首模版,一般是标题、导航所在

好了,最后记得在开始修改之前把原来模版内容先复制到本地,例如notepad里面,以防不测哦。