思洋互动网站建设学前班

教程细节

◆  概要：HTML5的微数据API

◆  难度：初级/中级

◆  估计完成时间： 60-90分钟

将创建的最终产品

下载源文件 示例页面

2009年5月，谷歌推出了富摘要信息，在Google的搜索结果显示一个小块，使用户更容易决定哪些网页是他们搜索相关的信息。在2011年6月，谷歌宣布建立Schema.org，从谷歌、Bing和雅虎创建结构化数据的标记模式。

本教程演示了如何采用Schema.org的微数据创建一个在线的简历。本教程还包括关于如何使用作者署名标记!(译者注：Schema.org相关信息可参见http://www.rwwchina.com/2011/06/is_schemaorg_really_a_google_land_grab.html)
广州网站建设,网站建设,广州网页设计,广州网站设计

附加内容包括

本教程示例是一个页面的网站模板，你可以自由的作为你的网上简历使用。作为多余的奖励，多种颜色版本都包含在源文件的zip包中：深绿色，浅绿色，深蓝色和浅蓝色。

请注意，这并不是网页设计或CSS教程，所以只会提到HTML5和Schema.org的微数据标记。

现在，让我们开始吧!

第1步：CSS

创建一个名为“style.css”的CSS样式表，包括下面的代码。不要担心，这相当简单，并且理解它不是本教程的必须。
广州网站建设,网站建设,广州网页设计,广州网站设计

1. /* Default Styles  
2. --------------------------------------------------- */  
3.  
4. body {  
5.     margin: 0px;  
6.     padding: 0px;  
7.     background: url("../images/bg_dark_green.png");  
8.     background-color: inherit;  
9.     font-size: 16px;  
10.     font-family: "Trebuchet MS", Helvetica, sans-serif;  
11.     color: #000;  
12. }  
13.  
14. a:link {  
15.     text-decoration: underline;  
16.     color: #000;  
17.     font-weight: bold;  
18. }  
19.  
20. a:visited {  
21.     text-decoration: underline;  
22.     color: #000;  
23.     font-weight: bold;  
24. }  
25.  
26. a:hover {  
27.     text-decoration: underline;  
28.     color: #669933;  
29.     font-weight: bold;  
30. }  
31.  
32. a:active {  
33.     text-decoration: underline;  
34.     color: #000;  
35.     font-weight: bold;  
36. }  
37.  
38. #wrapper    {  
39.     width: 965px;  
40.     margin: 0 auto;  
41. }  
42.  
43. #content {  
44.     background-color: #eee;  
45.     width: 960px;  
46.     text-align: left;  
47.     overflow: auto;  
48.     position: relative;  
49.     margin: 25px 0px 25px 0px;  
50.     border: #fff solid 2px;  
51. }  
52.  
53. .clear  {  
54.     float: none;  
55.     clear: both;  
56.     margin: 20px 0px 20px 0px;  
57. }  
58.  
59. /* Header  
60. --------------------------------------------------- */  
61.  
62. #contact-details .header_1 {  
63.     float: left;  
64.     width: 350px;  
65.     text-align: center;  
66.     margin: 40px 0px 0px 20px;  
67. }  
68.  
69. #contact-details .header_1 img {  
70.     border: #fff solid 4px;  
71.     background: url("../images/bg_img_dark_green.png");  
72.     padding: 16px;  
73.     margin: 10px 0px 0px 0px;  
74. }  
75.  
76. #contact-details .header_2 {  
77.     float: left;  
78.     width: 570px;  
79.     margin: 40px 0px 0px 10px;  
80. }  
81.  
82. #contact-details .header_2 a {  
83.     font-weight: normal;  
84. }  
85.  
86. #contact-details  h1    {  
87.     margin: 0px 0px 0px 20px;  
88.     font-size: 52px;  
89.     font-weight: bold;  
90. }  
91.  
92. #contact-details  h3    {  
93.     margin: 0px 0px 32px 20px;  
94.     font-size: 30px;  
95.     font-weight: bold;  
96.     font-style: italic;  
97. }  
98.  
99. #contact-details ul.info_1  {  
100.     list-style: none;  
101.     margin: 0px 0px 0px -12px;  
102.     font-size: 18px;  
103. }  
104.  
105. #contact-details ul.info_2  {  
106.     list-style: none;  
107.     margin: 0px 0px 15px -12px;  
108.     font-size: 18px;  
109. }  
110.  
111. #contact-details li.address {  
112.     background: url("../images/home.png") no-repeat;  
113.     background-position: 0px 0px;  
114.     padding: 0px 0px 12px 40px;  
115. }  
116.  
117. #contact-details li.phone   {  
118.     background: url("../images/phone.png") no-repeat;  
119.     background-position: 0px 0px;  
120.     padding: 0px 0px 12px 40px;  
121. }  
122.  
123. #contact-details li.email   {  
124.     background: url("../images/mail.png") no-repeat;  
125.     background-position: 0px 0px;  
126.     padding: 0px 0px 12px 40px;  
127. }  
128.  
129. #contact-details li.site_url    {  
130.     background: url("../images/computer.png") no-repeat;  
131.     background-position: 0px 2px;  
132.     padding: 0px 0px 12px 40px;  
133. }  
134.  
135. #contact-details li.twitter {  
136.     background: url("../images/twitter_sm.png") no-repeat;  
137.     background-position: 0px 0px;  
138.     padding: 0px 0px 12px 40px;  
139. }  
140.  
141. /* Main Content  
142. --------------------------------------------------- */  
143.  
144. h2.top  {  
145.     margin: 0px;  
146.     font-size: 22px;  
147.     font-weight: bold;  
148. }  
149.  
150. h2  {  
151.     margin: 40px 0px 0px 0px;  
152.     font-size: 22px;  
153.     font-weight: bold;  
154. }  
155.  
156. dl  {  
157.     margin: 0px 50px 0px 0px;  
158. }  
159.  
160. dt  {  
161.     float: left;  
162.     width: 200px;  
163.     font-size: 20px;  
164.     font-weight: bold;  
165.     font-style: italic;  
166.     text-align: right;  
167. }  
168.  
169. dd  {  
170.     width: 620px;  
171.     float: right;  
172.     margin-right: 20px;  
173. }  
174.  
175. dl#contact  {  
176.     margin: 0px;  
177. }  
178.  
179. dt#contact  {  
180.     margin: 0px;  
181. }  
182.  
183. dd#contact  {  
184.     margin: 0px;  
185. }  
186.  
187. p.bus1  {  
188.     margin: 0px;  
189.     font-weight: bold;  
190.     color: #669933;  
191. }  
192.  
193. p.edu-info  {  
194.     margin: 10px 0px 0px 0px;  
195.     font-weight: bold;  
196.     color: #669933;  
197. }  
198.  
199. p.edu-info a    {  
200.     color: #000;  
201. }  
202.  
203. p.edu-info a:hover  {  
204.     color: #669933;  
205. }  
206.  
207. p.time  {  
208.     margin: 0px;  
209. }  
210.  
211. p.summary   {  
212.     margin: 10px 0px 0px 0px;  
213. }  
214.  
215. #skills ul.list1    {  
216.     float: left;  
217.     list-style: none;  
218.     margin: 0px 0px 0px -40px;  
219.     width: 220px;  
220. }  
221.  
222. #skills ul.list2    {  
223.     float: left;  
224.     list-style: none;  
225.     margin: 0px 0px 0px 0px;  
226.     width: 220px;  
227. }  
228.  
229. #skills li {  
230.     background: url("../images/bullet_green.png") no-repeat;  
231.     background-position: 0px 2px;  
232.     padding: 0px 0px 0px 25px;  
233. }  
234.  
235. abbr    {  
236.     border-width: 0px;  
237. }  
238.  
239. /* Footer  
240. --------------------------------------------------- */  
241.  
242. #footer {  
243.     margin: 60px 40px 0px 40px;  
244. }  
245.  
246. #footer img {  
247.     border: 0px;  
248. }  
249.  
250. #footer .footer_content {  
251.     width: 700px;  
252.     overflow: auto;  
253.     margin: auto;  
254.     border: #fff solid 2px;  
255.     background-color: #dcdcdc;  
256. }  
257.  
258. #footer ul.icons_1  {  
259.     float: left;  
260.     width: 525px;  
261.     margin: 15px 10px 10px 15px;  
262.     padding: 0px;  
263. }  
264.  
265. #footer ul.icons_2  {  
266.     float: right;  
267.     width: 100px;  
268.     margin: 10px 20px 10px 10px;  
269.     padding: 0px;  
270. }  
271.  
272. #footer .icons_1 li, #footer .icons_2 li {  
273.     margin: 0px 0px 0px 7px;  
274.     padding: 0px;  
275.     list-style-type: none;  
276.     display: inline;  
277. }  
278.  
279. #footer a   {  
280.     color: #000;  
281. }  
282.  
283. #footer a:hover {  
284.     color: #669933;  
285. }  
286.  
287. #footer .credits {  
288.     float: none;  
289.     clear: both;  
290.     margin: 10px 0px 20px 0px;  
291.     font-size: 12px;  
292.     text-align: center;  
293. }  
294.  
295. #footer .credits a  {  
296.     font-weight: normal;  
297. }