页面数据载入中,请等待...

 
 时 间 记 忆 
页面数据载入中,请等待...
页面数据载入中,请等待...

 
 专 题 分 类 
页面数据载入中,请等待...
 最 新 评 论 
页面数据载入中,请等待...
 最 新 日 志 
页面数据载入中,请等待...
 最 新 留 言 
页面数据载入中,请等待...

 
 友 情 连 接 
 用 户 登 录 
页面数据载入中,请等待...
 文 章 搜 索 
 博 客 信 息 
页面数据载入中,请等待...



 
 
 
      换模板 - 网页制作学习记

>>2007-8-8 22:23:00
 

假期转眼过半,已然又是许久没更新了,传说大部分人曾经光顾本博的人因为鄙人的更新速度对此地极为失望,于是上来吐个泡是也。

从连个月前那次更新到现在并不是没事可写,大事多得很,不过一来忙着谈恋爱没时间搭理它,二来一范懒就不想写,哎……真是荒废了……不过前两天为练习优化网页结构,新做了个模板,放上来,总算有点“新”的感觉了哈,嘿嘿。

考试前学了网页制作,这东西实在是很有吸引力,你按你所想写那么几行代码,网页就会按你所想出来一种样式,帅得很。虽然老被某人骂是工作狂,但事实上纯属是因为喜欢,当你喜欢一个东西的时候,它就做来像玩儿一样,所谓工作,不过是个叫法。

并没学的多专业,搜了些资料,按照网上的专业人士推荐看了两本教程,一本是国人阿捷(如果你对这名字不熟悉,那可以去搜一下闪客帝国这个网站)写的《CSS网站布局实录》,还一本是外国人写的《CSS Mastery》,翻译成中文是《精通CSS》。在写作风格和章节安排上个人比较喜欢阿捷的《实录》,毕竟是国人写的,思路和语言都比较本土化,读起来很舒服,没有什么磕磕绊绊的感觉。而且这本书讲解很生动细致,很适合初学者来读。但是如果讲究严谨性、对CSS一些不太容易注意的细节的讲解和CSS的一些高级应用,还是推荐《精通》。毕竟写书的是CSS方面的“老大”,对CSS的应用更灵活深入些,而且这本书涉及了不少CSS3.0的前瞻,和有关IE7对CSS的支持,这是《实录》所没有涉及的。当然,《精通》的缺点很明显,就是翻译比较垃圾,很多句子不符合汉语的阅读习惯,许多词也翻译欠佳(比如Hack翻译成招数…… = =0),读的时候会比较费劲。如果有良好的英语基础,倒是可以弄本英文原版的来看看。

看这两本书期间露德同志来哭诉他们计算机网页制作选修课的恶行,让我帮忙给整个期末作业,于是就给整了一个。一看作业要求:必须用表格布局,而且传说二外网页选修课也都要求表格布局来的,不禁感慨,现在这些选修课也够落伍的,就是那么回事而已。

看完这两本书,回头一看自己之前做的OBlog模板“殇殁”,觉得十分Shit,大量DIV标签的滥用,复杂的嵌套,巨差的可读性……唉……简直惨不忍睹了,本打算改,但是这要改基本等于重做,一想还是作罢,与其折腾那个初学试练用的东西,不容重写个新的,于是诞生了现在这个"Gun"的模板。代码参考了不少OBlog论坛SNAKE大斑的模板,因为SNAKE大斑的模板风格很简洁,代码结构也很清楚,对练习网页结构实在是不可多得的好参考。

鼓捣两天,得出不少宝贵的经验,之后又重新做了电视台的网站,回味了一下的同时又得到些经验。小总结一下:

代码方面:

1 网页代码要清晰,加注释是非常好的方法。

2 CSS代码结构优化很重要,会使阅读清楚,修改起来比较容易。

3 CSS代码同一对象的多个相应属性能写在一行里的就写在一行,中间用分号隔开就好,可以减少代码行数,找起对象来比较方便。

CSS HACK方面:

4 养成CSS一开始对网站整体布局的好习惯,比如对一些对象的Margin、Padding先做归零处理,li对象list-style属性none处理等等。

5 为防止IE6双Margin BUG,有特定宽度的div在float时display要inline。

6 对有特定宽度的DIV等对象能不用Padding就不用,尽量用Margin,以防止因IE5.x对盒模型解析方式不同造成网页错位或变形。注:很多人很难也不太愿意(有时候也不太必要)自己再整个IE5去测试代码是否正常,这样至少能减少一些CSS核模型对IE5的影响。

来些设计上的建议:

7 不要错过对细节的设计。好的网页往往结构很简洁很清晰,而细节上的美化却能让这个网页增色不少并且与众不同。

8 好的用户体验至关重要。保证你的网页在任何情况下都能够被正常阅读并且格局清晰是非常可贵的。比如,要保证用户关闭图像后、关闭CSS后仍然知道网页的每个部分是什么,这就要适当用到一些图像替换技术,并且要慎重选择网页各部分内容的标签。再比如,在网速很慢的时候要保证用户最先看到的是网页最重要的文章(或列表)部分,这就需要合理安排网页的代码,把重要的代码部分写在前面。虽然在页面正常调用CSS时它可能会浮动在网页的右侧,但是如果CSS还没有加载完,它会优先显示出来。

啰哩吧嗦得扯了一大堆,完全没兴趣的人估计已经烦的要死走为上策了……于是这篇先写到这里吧,希望有兴趣学CSS的人能够有点用哈。

PS:CSS两本书啃完在啃JAVA中,有点难呢,加油吧,我!

   棺材   
  • 标签:日记 CSS 
  • 发表评论:
    页面数据载入中,请等待...