漫画图说CSS+DIV网页布局（下）
本节课时长14分01秒，下载文件9.92兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
从玩弄表格技巧到遵循 Web 标准
首先，如果要重构一个用表格布局的网站，需要考虑好一个移植策略。是一口气把整个站点移植了呢，还是逐个逐个部分地一步步完成？
检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、新产品通告之类的页面开始检查会比较好。
分解页面
如果已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。
* 主导航条
* 子导航条
* 页眉与页脚
* 内容
* 相关信息
* 其他
注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。
检查应该替换的标记
一旦分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。
* 作为一个完美主义者，消灭所有的 font 标记和间隔 GIF 吧！
* 同样的，一并搞定 b 和 br 标记。
* 去除表格中的那些外观标记 (bgcolor, background, 等等)。
* 把纯粹用来表示外观的那些 CSS 调用 改成结构化的标记。
把描述外观的标记改为描述结构的标记
可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览器里打开这个页面，然后把文本复制粘贴到你的 HTML 编辑器里。
关键还是要用结构化的方式来思考！仅仅把b 标记替换为 strong 是远远不够的。
最重要的条目是哪个？用 h1 来标记它。次要一点的就用 h2，依此类推。用 p 来标记段落。把导航条标记为无序列表。
选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional，除非你是此道高手，否则别用 XHTML strict。)
把你的页面合理分布在的 div 中
把你的主导航条放在一个 id 属性设为 mainnav 的 div 中，子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式：[div id=”footer”]，至于整个页面，它被放在 [div id=”content”] 里边。
即便现在它还不怎么讨人喜欢，但只要你开始给样式表添加规则，它就会马上变得可爱起来。
是开始自己编写 CSS 的时候了
首先，给每个 div 设置一个边界。例如： div {border: 1px dotted gray; padding: .5em} 这可以帮助你完完整整地看到里边的内容，也不再需要卷动屏幕了。
首先为以定义的元素编写 CSS (html, body, p, h1, h2, ul, li, 等等。)
尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导航栏的 div 中的列表项。
在尽可能多的浏览器下进行测试，毕竟你可以让朋友帮助你用它们自己的浏览器测试。
31,108
There are certainly a lot of details like that to take into consideration. That is a great point to bring up. I offer the thoughts above as general inspiration but clearly there are questions like the one you bring up where the most important thing will be working in honest good faith. I don?t know if best practices have emerged around things like that, but I am sure that your job is clearly identified as a fair game. Both boys and girls feel the impact of just a moment鈥檚 pleasure, for the rest of their lives.
请问您能看得出什么意思么,如果看不出请通过如何,不要翻译拉!
i don鈥檛 have an opinion on this issuebest reviews site
你好 老师，看到您的视频 真的很不错，受到了很大的收获，想问下 有视频里面的实例下载地址吗？有的话发下呗，谢谢啦老师！
很好的视频教程,非常感谢!
猫之眼 ，
谢谢您的鼓励！
抱歉没有及时回复，我们最近很忙，下半年我们会拿出更多时间增加新内容的，欢迎来交流！
很精彩的视频，很感谢老师的辛勤付出！
lxguidu ，
谢谢您的鼓励！欢迎您常来这里交流！
老师,你好,谢谢你们提供的视屏,很详细.我想问一下能不能传我ppt的教程.zhengkook@163.com
zheng，
请到这里下载：
http://learning.artech.cn/20090312.ppt-download.html
请教一些 做网站用到css来排版 对于新手来手 该从那本书学起
谢谢
文，
您可以先看一下网页右侧的“视频教程”目录中的CSS部分，两个目录分别是配合这两本书的内容。
看了视频教程，您就会了解您的基础更适合哪一本书了。
谢谢您希望我们的书和教程！
请教一个问题?我现在和别人在做一个大型网站,后台有给用户做博客的功能,后台那些”发表文章,上传图片”等功能的问题不大,最大的问题是注册用户的模板网页的设计还有更换新的模板风格,我想给出几套模板,问题也出现了?这些模板要我自己设计好了,给用户更换吗?这个实现起来对我来说有些难,我想的是可不可以在网上下载到成套模板,我只要做后台就可以了.要我自己设计的话,设计一个还好说,可要设计多了能做到更换别的不跑形很难,希望老师能帮助一下,说说有没有什么好的方法,谢谢!
飞龙，
目前比较通用的内容管理系统都有方便的和比较完善的模版机制。每种系统都各不一样，因此都有各自的模版机制。所以模版一般来说，我觉得不太可能通用，比如给wordpress设计的模版，肯定无法用于其它博客系统。
另外，有的模版只负责外观的简单变化，有的模版实际上是和程序结合的。比如Wordpress的模版实际上可以完成很多功能的，也就是说，朱程序实际上只是提供了一个系统框架和一系列API，模版中可以调用API来实现各种需要的功能，这样的模版机制就比较复杂了。
对于比较简单的模版机制，如果你用PHP，可以到网上搜索一下“smarty”，这是一个专门的基于PHP的模版引擎。
如果用.net，配合profile，给你的系统加上简单的模版机制，应该也是比较简单。
其它语言和开发环境我不熟悉，就不太知道了，但是原理都是大同小异的，就是那你原来写在代码中的“硬编码”参数化，和主程序分离开。
你可以到网上搜一搜，应该有不少相关的资料的，因为类似的需求应该还是很多的。
很不错的书，很想买，新华书店有卖不~
月叶约叶，
如果卖计算机图书比较多一些的新华书店都有卖的，那种只卖文艺和社科图书的书店里一般没有。
还是建议你尝试一次网上购书，非常方便，而且还能打折。相信您对这本书感兴趣，应该对网络也是比较熟悉的，应该相信网络的力量哦！
谢谢拉!
yang ，
不客气，我们会继续努力，也希望继续获得您的支持！
看了你的視頻很,覺得很好.在香港用綱上購買,你能寄來嗎?運費是多少呢?
poon，您好！
感谢您喜欢我们的课程和图书，以及对我们工作的支持。关于购买《精通CSS DIV网页样式与布局》这本书，建议您通过当当网购买。
请参考下面的网址：
http://product.dangdang.com/product.aspx?product_id=9349959
关于运费，请参考：
http://www.dangdang.com/zhuanti2006/2792.shtml
关于支付方式，请参考：
http://www.dangdang.com/zhuanti2006/2799.shtml
如果还有不清楚的，您可以通过电话和他们确认一下，如果有困难，请再给我们写信：support(at)artech.cn，我们在帮您先办法。
我发现这里的东西真的十分好 我已经买了那本 精通ＣＳＳ书了 真的很不错 看了开头几个视频感觉很好 值得学习 加油中
sina，你好！
谢谢您选择了我们的图书！希望对您有所帮助！