cms and html
DESCRIPTION
Cms and HTMLTRANSCRIPT
![Page 1: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/1.jpg)
优酷 CMS>HTML碎片
产品团队09-10-10
![Page 2: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/2.jpg)
2
CMS 当前存在的问题
• 数量繁多• 形式多样• 时间紧迫
![Page 3: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/3.jpg)
3
CMS 系统
![Page 4: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/4.jpg)
4
HTML 碎片
HTML + CSS
![Page 5: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/5.jpg)
HTML
5
• HTML ( HyperText Mark-up Language )即超文本标记语言或超文本链接标示语言。
• CSS ( Cascading Style Sheets) 层叠样式表
HTML CSS 由浏览器解析 在浏览器上呈现出所想要的页面!
![Page 6: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/6.jpg)
HTML & CSS
6
HTML (页面文档的结构)
<span> 一些文字 </span><div> <h1>标题标题 </h1> <span>文字文字 </span></div>
![Page 7: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/7.jpg)
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>
![Page 8: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/8.jpg)
HTML & CSS
8
CSS (层叠样式表单)
<div class=“window”> 窗户 </div>
.window{color:#00FF00;width:200px;height:100px;}
![Page 9: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/9.jpg)
HTML & CSS
9
常用 HTML 标签
划分区域div (块级) , span (内联)
标题h1 , h2 , h3 , h4 , h5 , h6
图片img
列表ul/ol , li
修饰文本p , em , strong , a
其他标签 ( 实体字符 )br ,
表格table
![Page 10: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/10.jpg)
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>
![Page 11: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/11.jpg)
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>
![Page 12: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/12.jpg)
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=" 优酷网 " />
![Page 13: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/13.jpg)
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 常用于排行榜
![Page 14: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/14.jpg)
HTML & CSS
14
h1 ~ h6
<h1> 我是文章标题 1</h1><h2> 我是文章标题 1</h2><h3> 我是文章标题 1</h3><h4> 我是文章标题 1</h4><h5> 我是文章标题 1</h5><h6> 我是文章标题 1</h6>
![Page 15: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/15.jpg)
HTML & CSS
15
<br /><p> 一段华丽的文字被 <br /> 换行了 </p>
<p> 一段华丽的文字被 <br /> 换行了 </p>
![Page 16: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/16.jpg)
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>
![Page 17: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/17.jpg)
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>
![Page 18: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/18.jpg)
常见 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;}
![Page 19: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/19.jpg)
常见 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;}
![Page 20: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/20.jpg)
常见 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;}
![Page 21: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/21.jpg)
常见以及需要注意的问题
21
• 图片尺寸,字节过大• HTML 标签没有关闭• 浏览器兼容性• 碎片的示例大多都在 http://c.youku.com/cmspreview/html
![Page 22: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/22.jpg)
常用编辑工具
22
• Dreamweaver
![Page 23: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/23.jpg)
常用学习手册
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
附件里的文件
![Page 24: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/24.jpg)
多加练习多实践
24
![Page 25: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/25.jpg)
25
The End …
![Page 26: Cms and HTML](https://reader034.vdocuments.site/reader034/viewer/2022042814/555a6c26d8b42ae7218b4efd/html5/thumbnails/26.jpg)
有问必答
26
Q & A