深入CSS。(注意,小弟也是从零开始学CSS的说,HTML会一点吧)
一、准备工具
1.CSS2中文手册(手册形式对初学者比较难懂,来这里看简单的)
2.HTML4.0参考手册(比较专业,来这里看简单的)
3.FrontPage2003(其它FP2000、FPXP或者DW都没什么区别,有什么就先用着:)
4.小弟用IE6(机器好,用这个没错)
二、学习CSS
1.在DONEW选个好看点的皮肤:Cogitation(不同系列皮肤,使用模板不尽相同,主要是模块间的顺序)
2.将自己BLOG首页用IE另存为“本网页名”.htm
3.在此网页的附目录(就是“本网页名”_files)里可以看到有三个.css文件:customcss.css、print.css、style.css(排名不分先后~0~)。其中style.css就是皮肤里提供的风格,customcss.css就是自己在“自定义CSS样式”里写里的,print.css应该是打印网页的效果吧(没用)。
4.用FP打开.HTM和两个.CSS
5.自己慢慢研究个中关系吧,当然也要参考以上的两本手册咯。(不看以为自己是神仙啊,晕)
三、分析DONEWS BLOG里的CSS
1.把style.css改个名,刷新一个FP,哇哈哈,可以清楚看到原BLOG页的面貌
2.对比一下,然后把style.css复制成customcss.css,慢慢改,慢慢学
3.可以看到.HTM页面用了以下的所谓“文档目录树(DOM)”—— id标识和class类 (我理解为“网页板块”),相对应在.CSS里以#和.开头
主模块id |
子id和class |
<DIV id=top> |
<TD class=HeaderTitles> -BLOG名称区域 <DIV class=HeaderBar> -标头下面的工具条和统计栏:<TABLE class=HeaderBar id=HeaderBar> |
<DIV id=leftmenu> |
<H3 class=listtitle> 包括文章、收藏、相册、朋友、存档、最近评论等都使用相同class |
<DIV id=main> |
<DIV class=dateTitle> 各文章使用相同class |
<P id=footer> |
<A id=Footer1_Hyperlink2 广告 |
来张相关图片:
(待续3)
文章来源:http://blog.donews.com/benl/archive/2006/02/05/715794.aspx