动态专题制作(精)

动态专题制作
凤凰网技术中心 应用管理部
专题分类
静态专题
动态பைடு நூலகம்题
创建Zip文档类型的文章
ü 需要新建专题和子频道* ü 关联首页模板（定制的或通用专题模板） ü 关联内容单页和列表页模板
制作静态专题注意事项
• zip包里未包含index文件 index.shtml>index.html>index.htm 均 可
• 文件名和目录名都不能为中文，后缀名避 免变成index.html.html
• 在专题中，请使用相对地址
• 专题需包含页头页尾、仅允许使用公司规 范的页头页尾、且必须选择正确匹配的页 头 ；页面居左
制作动态专题注意事项
• 频道名称不要使用单双引号或者大点字符 • 要关联文档单页和列表页模板，并继承到
一些小技巧
• 用Colorpad选取网页颜色和色系表的使用 • 用E-ruler测量区块尺寸 • 用Dreamweaver选取区块代码
推荐书籍
• 苏小雨的《CSS2.0样式表中文手册 》 • O‘reilly 《HTML和XHTML权威指南》
• Apress《精通CSS-高级WEB标准解决方案》
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,
The End
To be continue… 《网站重构和CSS编程进阶》
下级子频道； • 不要关联非专题模板； • 不要随意关联通用模板；
通用模板
通用模板二
通用模板二
碎片管理系统演示
• / • 三行一列模板演示
HTML基础
• Table <table> <tr>: table row 表格中的一行 <td>: table data 表格中的一个单元格
碎片示例
.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
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;textalign:center;font-size:20px;fontfamily:"宋体"; } </style>
什么是CSS？
CSS(Cascading Style Sheet) ,对页面的布局、 字体、颜色、背景和其它效果实现更精确控制 的一门技术。
通俗的说，html是搭建网页内容结构的，而网 页怎么展示就是CSS的作用。
CSS初级
<style> .redcolor { color: red; } </style> <p class="redcolor">红字</p> <h1 class="redcolor">红字</h1>
最简单的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>
sans-serif; margin-left:3px;} .boxList .boxHead .more { position:absolute; right:5px;
top:11px;}
.boxList .newsList { padding:5px;} .boxList .newsList li { line-height:20px;}