建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何使用HTML5創(chuàng)建在線精美簡(jiǎn)歷
教程細(xì)節(jié)
◆ 概要：HTML5的微數(shù)據(jù)API
◆ 難度：初級(jí)/中級(jí)
◆ 估計(jì)完成時(shí)間： 60-90分鐘
將創(chuàng)建的最終產(chǎn)品
下載源文件 示例頁面
2009年5月，谷歌推出了富摘要信息，在Google的搜索結(jié)果顯示一個(gè)小塊，使用戶更容易決定哪些網(wǎng)頁是他們搜索相關(guān)的信息。在2011年6月，谷歌宣布建立Schema.org，從谷歌、Bing和雅虎創(chuàng)建結(jié)構(gòu)化數(shù)據(jù)的標(biāo)記模式。
本教程演示了如何采用Schema.org的微數(shù)據(jù)創(chuàng)建一個(gè)在線的簡(jiǎn)歷。本教程還包括關(guān)于如何使用作者署名標(biāo)記!(譯者注：Schema.org相關(guān)信息可參見http://www.rwwchina.com/2011/06/is_schemaorg_really_a_google_land_grab.html)
附加內(nèi)容包括
本教程示例是一個(gè)頁面的網(wǎng)站模板，你可以自由的作為你的網(wǎng)上簡(jiǎn)歷使用。作為多余的獎(jiǎng)勵(lì)，多種顏色版本都包含在源文件的zip包中：深綠色，淺綠色，深藍(lán)色和淺藍(lán)色。
請(qǐng)注意，這并不是網(wǎng)頁設(shè)計(jì)或CSS教程，所以只會(huì)提到HTML5和Schema.org的微數(shù)據(jù)標(biāo)記。
現(xiàn)在，讓我們開始吧!
第1步：CSS
創(chuàng)建一個(gè)名為“style.css”的CSS樣式表，包括下面的代碼。不要擔(dān)心，這相當(dāng)簡(jiǎn)單，并且理解它不是本教程的必須。
- /* Default Styles
- --------------------------------------------------- */
- body {
- margin: 0px;
- padding: 0px;
- background: url("../images/bg_dark_green.png");
- background-color: inherit;
- font-size: 16px;
- font-family: "Trebuchet MS", Helvetica, sans-serif;
- color: #000;
- }
- a:link {
- text-decoration: underline;
- color: #000;
- font-weight: bold;
- }
- a:visited {
- text-decoration: underline;
- color: #000;
- font-weight: bold;
- }
- a:hover {
- text-decoration: underline;
- color: #669933;
- font-weight: bold;
- }
- a:active {
- text-decoration: underline;
- color: #000;
- font-weight: bold;
- }
- #wrapper {
- width: 965px;
- margin: 0 auto;
- }
- #content {
- background-color: #eee;
- width: 960px;
- text-align: left;
- overflow: auto;
- position: relative;
- margin: 25px 0px 25px 0px;
- border: #fff solid 2px;
- }
- .clear {
- float: none;
- clear: both;
- margin: 20px 0px 20px 0px;
- }
- /* Header
- --------------------------------------------------- */
- #contact-details .header_1 {
- float: left;
- width: 350px;
- text-align: center;
- margin: 40px 0px 0px 20px;
- }
- #contact-details .header_1 img {
- border: #fff solid 4px;
- background: url("../images/bg_img_dark_green.png");
- padding: 16px;
- margin: 10px 0px 0px 0px;
- }
- #contact-details .header_2 {
- float: left;
- width: 570px;
- margin: 40px 0px 0px 10px;
- }
- #contact-details .header_2 a {
- font-weight: normal;
- }
- #contact-details h1 {
- margin: 0px 0px 0px 20px;
- font-size: 52px;
- font-weight: bold;
- }
- #contact-details h3 {
- margin: 0px 0px 32px 20px;
- font-size: 30px;
- font-weight: bold;
- font-style: italic;
- }
- #contact-details ul.info_1 {
- list-style: none;
- margin: 0px 0px 0px -12px;
- font-size: 18px;
- }
- #contact-details ul.info_2 {
- list-style: none;
- margin: 0px 0px 15px -12px;
- font-size: 18px;
- }
- #contact-details li.address {
- background: url("../images/home.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.phone {
- background: url("../images/phone.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.email {
- background: url("../images/mail.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.site_url {
- background: url("../images/computer.png") no-repeat;
- background-position: 0px 2px;
- padding: 0px 0px 12px 40px;
- }
- #contact-details li.twitter {
- background: url("../images/twitter_sm.png") no-repeat;
- background-position: 0px 0px;
- padding: 0px 0px 12px 40px;
- }
- /* Main Content
- --------------------------------------------------- */
- h2.top {
- margin: 0px;
- font-size: 22px;
- font-weight: bold;
- }
- h2 {
- margin: 40px 0px 0px 0px;
- font-size: 22px;
- font-weight: bold;
- }
- dl {
- margin: 0px 50px 0px 0px;
- }
- dt {
- float: left;
- width: 200px;
- font-size: 20px;
- font-weight: bold;
- font-style: italic;
- text-align: right;
- }
- dd {
- width: 620px;
- float: right;
- margin-right: 20px;
- }
- dl#contact {
- margin: 0px;
- }
- dt#contact {
- margin: 0px;
- }
- dd#contact {
- margin: 0px;
- }
- p.bus1 {
- margin: 0px;
- font-weight: bold;
- color: #669933;
- }
- p.edu-info {
- margin: 10px 0px 0px 0px;
- font-weight: bold;
- color: #669933;
- }
- p.edu-info a {
- color: #000;
- }
- p.edu-info a:hover {
- color: #669933;
- }
- p.time {
- margin: 0px;
- }
- p.summary {
- margin: 10px 0px 0px 0px;
- }
- #skills ul.list1 {
- float: left;
- list-style: none;
- margin: 0px 0px 0px -40px;
- width: 220px;
- }
- #skills ul.list2 {
- float: left;
- list-style: none;
- margin: 0px 0px 0px 0px;
- width: 220px;
- }
- #skills li {
- background: url("../images/bullet_green.png") no-repeat;
- background-position: 0px 2px;
- padding: 0px 0px 0px 25px;
- }
- abbr {
- border-width: 0px;
- }
- /* Footer
- --------------------------------------------------- */
- #footer {
- margin: 60px 40px 0px 40px;
- }
- #footer img {
- border: 0px;
- }
- #footer .footer_content {
- width: 700px;
- overflow: auto;
- margin: auto;
- border: #fff solid 2px;
- background-color: #dcdcdc;
- }
- #footer ul.icons_1 {
- float: left;
- width: 525px;
- margin: 15px 10px 10px 15px;
- padding: 0px;
- }
- #footer ul.icons_2 {
- float: right;
- width: 100px;
- margin: 10px 20px 10px 10px;
- padding: 0px;
- }
- #footer .icons_1 li, #footer .icons_2 li {
- margin: 0px 0px 0px 7px;
- padding: 0px;
- list-style-type: none;
- display: inline;
- }
- #footer a {
- color: #000;
- }
- #footer a:hover {
- color: #669933;
- }
- #footer .credits {
- float: none;
- clear: both;
- margin: 10px 0px 20px 0px;
- font-size: 12px;
- text-align: center;
- }
- #footer .credits a {
- font-weight: normal;
- }
#p#
第2步：頁面
下一步，我們需要一個(gè)HTML文件。下面是一個(gè)我們都可能熟悉的基本布局。
Online Resume of Your Name
