动态专题制作

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

专题分类

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

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

通用模板

通用模板二

碎片管理系统演示 • http://i.phoenixtv.com.cn/ • 三行一列模板演示

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

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

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

什么是CSS？ CSS(Cascading Style Sheet) ,对页面的布局、字体、颜色、背景和其它效果实现更精确控制的一门技术。通俗的说，html是搭建网页内容结构的，而网页怎么展示就是CSS的作用。

CSS初级 <style> .redcolor { color: red; } </style> <p class="redcolor">红字</p> <h1 class="redcolor">红字</h1>

CSS初级 <p style="color: red;">红字</p> <h1 style="color: red;">红字</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>

碎片示例 .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 .boxHeadul,.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;}

一些小技巧 • 用Colorpad选取网页颜色和色系表的使用 • 用E-ruler测量区块尺寸 • 用Dreamweaver选取区块代码

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

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

动态专题制作

动态专题制作

Presentation Transcript