入门级-改改BLOG的样子（二）-in DONEWS BLOG

Posted on 2006-02-06 02:06 BenL 阅读(60) 评论(0) 编辑收藏所属分类: 7-Web_Design

深入了解学习CSS和分析DONEWS BLOG里的CSS结构。附上一张靓图，*_*

深入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名称区域 <A class=headermaintitle id=Header1_HeaderTitle -BLOG名称 <P id=tagline -BLOG附言 <DIV class=HeaderBar> -标头下面的工具条和统计栏：<TABLE class=HeaderBar id=HeaderBar> <TD class=HeaderBarTab -工具条： <A id=Header1_MyLinks1_HomeLink <A id=Header1_MyLinks1_PersonalHome <A id=Header1_MyLinks1_ContactLink <A id=Header1_MyLinks1_Syndication <A id=Header1_MyLinks1_XMLLink <A id=Header1_MyLinks1_Admin <IMG id=Header1_BlueTab <TD class=HeaderBarTabBack -统计栏：class=BlogStatsBar
<DIV id=leftmenu> 左边区域	<H3 class=listtitle> 包括文章、收藏、相册、朋友、存档、最近评论等都使用相同class <UL class=list> <LI class=listitem>
<DIV id=main> 正文区域	<DIV class=dateTitle> 各文章使用相同class <DIV class=post> <DIV class=postTitle> <DIV class=postText> <DIV class=postFoot>
<P id=footer> 底部版权区域	<A id=Footer1_Hyperlink2 广告 <A id=Footer1_Hyperlink3