cms and html
DESCRIPTION
Cms and HTMLTRANSCRIPT
优酷 CMS>HTML碎片
产品团队09-10-10
2
CMS 当前存在的问题
• 数量繁多• 形式多样• 时间紧迫
3
CMS 系统
4
HTML 碎片
HTML + CSS
HTML
5
• HTML （ HyperText Mark-up Language ）即超文本标记语言或超文本链接标示语言。
• CSS （ Cascading Style Sheets) 层叠样式表
HTML CSS 由浏览器解析 在浏览器上呈现出所想要的页面！
HTML & CSS
6
HTML （页面文档的结构）
<span> 一些文字 </span><div> <h1>标题标题 </h1> <span>文字文字 </span></div>
HTML & CSS
7
HTML （页面文档的结构）
<body> <div class="header">
<h1>网站标题 </h1><span>副标题 </span>
</div> <div class="main">
<h2>文章标题 </h2><div class=“article”>文章内容 </div>
</div> <div class="footer"> </div></div></body>
HTML & CSS
8
CSS （层叠样式表单）
<div class=“window”> 窗户 </div>
.window{color:#00FF00;width:200px;height:100px;}
HTML & CSS
9
常用 HTML 标签
划分区域div （块级） ， span （内联）
标题h1 , h2 , h3 , h4 , h5 , h6
图片img
列表ul/ol , li
修饰文本p ， em ， strong ， a
其他标签 ( 实体字符 )br ,
表格table
HTML & CSS
10
常用 HTML 标签
div (块级 )<div style="font-size:12px;border:1px solid red; width:100px;height:100px;"> 显示区块 </div>
span(内联 )<p> 文字文字文字 <span style="margin:0 10px; color:red;"> 修饰文字 </span> 文字 </p>
HTML & CSS
11
p(块级 )<p style="font-size:12px; width:100px;line-height:22px;text-indent:24px;"> 我是帅气的大段文字我是帅气的大段文字我是帅气的大段文字我是帅气的大段字我是帅气的大段文字我是帅气的大段文字我是帅气的大段文字 </p>
em , strong<p> 文字 <em> 强调 </em> 字文字 <strong> 重点突出 </strong> 文字 </p>
HTML & CSS
12
a(链接标签 )<a > 优酷网 </a>href="www.youku.com" target="_blank"
img
<a href="www.youku.com" target="_blank" style="color:#FF0000;font-size:14px;text-decoration:none;"> 优酷网 </a>
<img src="http://static.youku.com/v1.0.0464/index/img/youkulogo.gif" />
<img src="http://static.youku.com/v1.0.0464/index/img/youkulogo.gif" width="130" height="35" title=" 优酷网 " />
HTML & CSS
13
ul / ol
<ul> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li></ul>
<ol> <li> 第一名 </li> <li> 第二名 </li> <li> 第三名 </li> <li> 第四名 </li> <li> 第五名 </li></o>
ul 常用于新闻 , 文章列表 ol 常用于排行榜
HTML & CSS
14
h1 ~ h6
<h1> 我是文章标题 1</h1><h2> 我是文章标题 1</h2><h3> 我是文章标题 1</h3><h4> 我是文章标题 1</h4><h5> 我是文章标题 1</h5><h6> 我是文章标题 1</h6>
HTML & CSS
15
<br /><p> 一段华丽的文字被 <br /> 换行了 </p>
<p> 一段华丽的文字被 <br /> 换行了 </p>
HTML & CSS
16
table
<table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr></table>
一行一列
一行两列<table class="mod-tags" width="300" border=“0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr></table>
两行一列<table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr><tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr></table>
两行两列<table class="mod-tags" width="300" border=“0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr><tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr></table>
HTML & CSS
17
table
<table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 死神 </a></td> <td><a href="#" target="_blank"> 火影忍者 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 海贼王 </a></td> <td><a href="#" target="_blank"> 守护甜心 </a></td> <td><a href="#" target="_blank"> 犬夜叉 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫前线 </a></td> <td><a href="#" target="_blank"> 新番 </a></td> <td><a href="#" target="_blank"> 星之愿 </a></td> </tr></table>
常见 CMS 结构
18
HTML 部分：
<div class="banners">
<div class="b"><a href="http://c.youku.com/qingchun" target="_blank"><img src="http://res.youku.com/100120090512164108F230BBFD187F53E76F90A00C000494C3" /></a></div>
<div class="b"><a href="http://c.youku.com/tuanzhang" target="_blank"><img src="http://res.youku.com/100120090512164300754CE7C118D8C99E0A3EAD3490368463" /></a></div>
</div>
CSS 部分：
.banners .b{margin:10px 0;}
常见 CMS 结构
19
HTML 部分：
<div class=“intro”>
<a href=“ 链接地址” target=“_blank”><img width=“280” height=“200” src=“ 图片地址 "></a>
<p> 文字介绍 </p>
<span class=“more”><a href=“ 链接地址” target=“_blank”> 更多… </a></span>
</div>
CSS 部分：
.Intro img{text-align:center;margin:5px 0;}
.intro p {text-indent:16px;}
.more a {float:right;}
常见 CMS 结构
20
HTML 部分：
<div class="person-intro"> <div class="person-info"> <h3> 萧亚轩 </h3> <img src=“ 图片地址 " width="110" height="131" title=" 萧亚轩 " /> <p> 今年再度斥资打造独一无二新舞台，视觉和听觉同步引领时尚新潮流，以[ 闪亮钻石糖 , 快 !</p> </div> <div class="person-links"> <ul> <li>• <a href=“ 链接地址” title=“ 萧亚轩新优酷首发 " target="_blank"> 萧亚轩新专首波闪亮主打 < 闪闪惹人爱 > 优酷首发 </a></li> <li>• <a href=“ 链接地址” title=“ 罗志祥、萧亚轩败给你 " target="_blank">罗志祥、萧亚轩最新甜蜜对唱单曲败给你 </a></li> </ul> </div></div>CSS 部分：
.person-intro{width:280px;}
.person-info{position:relative;}
.person-info h3{font-weight:bold;font-size:14px;margin:3px 0;}
.person-info img{float:right;position:relative;top:-20px;left:3px;}
.person-info p{font-size:12px;width:165px;line-height:18px;}
.person-links{clear:both;}
.person-links a{font-size:12px;}
常见以及需要注意的问题
21
• 图片尺寸，字节过大• HTML 标签没有关闭• 浏览器兼容性• 碎片的示例大多都在 http://c.youku.com/cmspreview/html
常用编辑工具
22
• Dreamweaver
常用学习手册
23
在线学习 HTML
http://www.w3school.com.cn/html/index.asp
http://www.w3pop.com/learn/index/f/1/c/7/
在线学习 CSS
http://www.w3school.com.cn/css/index.asp
http://www.w3pop.com/learn/index/f/1/c/9/
有用的帖子
http://bbs.blueidea.com/viewthread.php?tid=2524735
附件里的文件
多加练习多实践
24
25
The End …
有问必答
26
Q & A