1 / 19

动态专题制作

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

ayita
Download Presentation

动态专题制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 专题分类

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

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

  5. 通用模板

  6. 通用模板二

  7. 通用模板二

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

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

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

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

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

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

  14. CSS初级 <p style="color: red;">红字</p> <h1 style="color: red;">红字</h1>

  15. 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>

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

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

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

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

More Related