190 likes | 433 Views
动态专题制作. 凤凰网技术中心 应用管理部. 专题分类. 制作静态专题注意事项. zip 包里未包含 index 文件 index.shtml>index.html>index.htm 均可 文件名和目录名都不能为中文,后缀名避免变成 index.html.html 在专题中,请使用 相对地址 专题需包含页头页尾、仅允许使用公司规范的页头页尾、且必须选择正确匹配的页头 ;页面居左. 制作动态专题注意事项. 频道名称 不要使用单双引号或者大点字符 要关联文档单页和列表页模板,并继承到下级子频道; 不要关联非专题模板; 不要随意关联通用模板;. 通用模板.
E N D
动态专题制作 凤凰网技术中心 应用管理部
制作静态专题注意事项 • 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编程进阶》