动态专题制作 凤凰网技术中心 应用管理部

专题分类 静态专题示例-》时尚国际时装周 动态专题示例-》http://test.phoenixtv.com

制作静态专题注意事项 zip包里未包含index文件index.shtml>index.html>index.htm 均可 文件名和目录名都不能为中文，后缀名避免变成index.html.html 在专题中，请使用相对地址 专题需包含页头页尾、仅允许使用公司规范的页头页尾、且必须选择正确匹配的页头 ；页面居左 是Zip包不是rar包 2. 页头页尾-》http://i.phoenixtv.com.cn

制作动态专题注意事项 频道名称不要使用单双引号或者大点字符 要关联文档单页和列表页模板，并继承到下级子频道； 不要关联非专题模板； 不要随意关联通用模板；

通用模板 灵活性最大的模板

通用模板二

通用模板二 光增加模板的数量是没有意义的，1.编辑无法选择出合适的模板 ；2.通用模板会被大量的实例化，积累大量的垃圾碎片。 今后工作中我们只会去增加可以抽象出来并能大范围使用的通用模板。 http://chinese.wsj.com/gb/industry.asp

碎片管理系统演示 http://i.phoenixtv.com.cn/ 三行一列模板演示 http://i.phoenixtv.com.cn是个非常好的工具，尤其是半夜三点突然领导打电话来说要马上做一个专题的时候。 编辑的能力已经超出了我们的预期，做了非常多非常漂亮的专题。就是说编辑的学习能力其实是非常强的。 http://news.phoenixtv.com/special/lianghui/ http://news.phoenixtv.com/special/wenjiabao/ http://ent.phoenixtv.com/special/oscar2007/ http://192.168.100.85:8011 三行一列 http://news.phoenixtv.com/special/twjd/ 资讯频道的《台湾间谍的双面人生》专题 http://focus.163.com

HTML基础 Table <table> <tr>: table row 表格中的一行 <td>: table data 表格中的一个单元格

最简单的table示例 <table> <tr> <td></td> </tr>

两行三列的table <table> <tr> <td></td> </tr>

什么是CSS？ CSS(Cascading Style Sheet) ,对页面的布局、字体、颜色、背景和其它效果实现更精确控制的一门技术。 通俗的说，html是搭建网页内容结构的，而网页怎么展示就是CSS的作用。 Css代码大体分两种，一种是放在标签比如p，h1外面的，需要用<style></style>这对标签括起来；一种是写在标签属性里面的。

CSS初级 <style> .redcolor { color: red; } </style> <p class="redcolor">红字</p> <h1 class="redcolor">红字</h1> Css代码大体分两种，一种是放在标签比如p，h1外面的，需要用<style></style>这对标签括起来；一种是写在标签属性里面的。

CSS初级 <p style="color: red;">红字</p> <h1 style="color: red;">红字</h1> Css代码大体分两种，一种是放在标签比如p，h1外面的，一种是写在标签属性里面的。

CSS初级 <style> .sample { color: red;background-color:#cccccc;border:1px solid blue; width:300px;height:50px; line-height:50px;text-align:center;font-size:20px;font-family:"宋体"; } </style> Css代码大体分两种，一种是放在标签比如p，h1外面的，一种是写在标签属性里面的。 border是边框，text-align设置文本对齐方式，center为居中，left为居左。

碎片示例 .boxList { border:1px solid #919191; color:#454545;} .boxList a { color:#454545;} .boxList .boxHead { height:31px; position:relative; border:1px solid #fff; background-color:#aeae8a;} .boxList .boxHead a { color:#fff;} .boxList .boxHead h1,.boxList .boxHead ul,.boxList .boxHead li { float:left; color:#fff; } .boxList .boxHead h1{ font-size:14px;margin-left:10px; margin-top:8px; } .boxList .boxHead h1 em { font:10px Arial, Helvetica, sans-serif; margin-left:3px;} .boxList .boxHead .more { position:absolute; right:5px; top:11px;} .boxList .newsList { padding:5px;} .boxList .newsList li { line-height:20px;} Css代码大体分两种，一种是放在标签比如p，h1外面的，一种是写在标签属性里面的。 border是边框，text-align设置文本对齐方式，center为居中，left为居左。

一些小技巧 用Colorpad选取网页颜色和色系表的使用 用E-ruler测量区块尺寸 用Dreamweaver选取区块代码 1. 好色鬼 2. wangguangmei_sample.html 没那么难 能显著提高工作效率

推荐书籍 苏小雨的《CSS2.0样式表中文手册 》 O‘reilly 《HTML和XHTML权威指南》 Apress《精通CSS-高级WEB标准解决方案》

The End To be continue… 《网站重构和CSS编程进阶》