完整網(wǎng)站設(shè)計(jì)實(shí)例：HTML5實(shí)戰(zhàn)開發(fā)

開發(fā)人員可以在其職業(yè)生涯中獲得巨大利益。HTML5不只僅是一項(xiàng)技術(shù)，HTML5HTMLWeb開發(fā)中的下一個(gè)重要里程碑。武漢網(wǎng)站建設(shè)公司通過對(duì)其早期學(xué)習(xí)。會(huì)??留下一個(gè)堅(jiān)定的足跡。雖然目前它并沒有完全誕生，但注定會(huì)是值得你去付出努力。
這篇文章中我將基于HTML5和CSS實(shí)現(xiàn)一個(gè)完整網(wǎng)站制作。首先你需要對(duì)CSS有一定的解并熟識(shí)HTML當(dāng)然也無(wú)需對(duì)此非常專業(yè)，  HTML5HTML4下一代版本。但是至少能有一定的解。

幾乎保存了上一代所有的標(biāo)簽元素，盡管有局部被視為廢棄元素，但在開發(fā)過程中仍可繼續(xù)沿用。不過使用時(shí)需謹(jǐn)慎，因?yàn)檫@部分功能最終都將被刪除。這一項(xiàng)新興技術(shù)尚處于起步階段，目前的規(guī)范仍處于發(fā)展階段，不過我可以推測(cè)最終規(guī)范中的規(guī)范會(huì)有哪些變化。由于規(guī)范制定委員會(huì)還沒有一個(gè)標(biāo)準(zhǔn)化的提議，因此，開發(fā)HTML5網(wǎng)頁(yè)時(shí)會(huì)有一個(gè)負(fù)面影響-目前不是所有的瀏覽器都能支持其功能，不過在絕大多數(shù)的最新版本下可以實(shí)現(xiàn)。

從而實(shí)現(xiàn)從Flash束縛中解放出來(lái)。但在這個(gè)問題上仍有很多的爭(zhēng)論，  毫無(wú)疑問的W3C將在HTML5項(xiàng)目中以新的標(biāo)志呈現(xiàn)頁(yè)面中的視音頻。例如外地的HTML5播放器上視頻流的解碼器規(guī)范化問題。雖然還有很多問題未解決，但這并不影響開發(fā)者去學(xué)習(xí)HTML5如果對(duì)這項(xiàng)新技術(shù)感興趣，就完全可以著手，正如人們所說 -不下水，一輩子不會(huì)游泳：不揚(yáng)帆，一輩子不會(huì)撐船。

而不只是一個(gè)簡(jiǎn)單主頁(yè)。這里同時(shí)用到HTML4與HTML5中的元素以及一個(gè)CSS樣式表。開發(fā)過程中采用谷歌Chrome和IE9作為測(cè)試瀏覽器，  本文中我來(lái)模擬創(chuàng)建一個(gè)企業(yè)網(wǎng)站。而對(duì)于HTML和CSS則在Eclipse中完成。讀者可以選擇Eclipse或其它IDE

---------------------------------------------------------------------


可選擇多種不同的方式，開發(fā)人員在設(shè)計(jì)網(wǎng)頁(yè)時(shí)。這里我一般遵循以下方法：

導(dǎo)航鏈接，1.要求：分析網(wǎng)頁(yè)的內(nèi)容。圖形/圖像，標(biāo)志，表單等。

2.布局是否符合要求；準(zhǔn)備工具：筆和紙

完成CSS樣式表3.創(chuàng)建布局。>

4.HTML編碼

5.瀏覽器中測(cè)試

需要注意的這些方法并不是線性的方法345一般都是同時(shí)進(jìn)行。

---------------------------------------------------------------------------------------------

下面讓我來(lái)看看具體如何實(shí)現(xiàn)。

HTML與CSS

即標(biāo)題，可以看到下方所示的樣式布局共包含6個(gè)部分。主菜單，主頁(yè)面內(nèi)容，視頻，表單以及畫板。

這里將margin參數(shù)值設(shè)置為0刪除所有的HTML頁(yè)面的默認(rèn)margin參數(shù)值。整個(gè)頁(yè)面中設(shè)置HTML頁(yè)面的背景色并應(yīng)用字體TrebuchetMS頁(yè)面寬度設(shè)置為934px和margin設(shè)為自動(dòng)，CSS代碼下General局部。給頁(yè)面實(shí)現(xiàn)固定寬度并在瀏覽器中準(zhǔn)確定位。

可參考以下鏈接：實(shí)例中大多數(shù)都是罕見標(biāo)簽。>

http://www.w3schools.com/HTML5/HTML5_reference.aspforHTML5tags.

http://www.w3schools.com/CSS/default.aspforCSStags.

CSSofHeaderSection

@CHA RSET"ISO-8859-1";

{

margin:00;

}

html{

background:#f2f4f5;

}

bodi{

代表說明網(wǎng)站是采用的編碼是英文；*/font-family:"TrebuchetMS"; /*TrebuchetMS西歐的編碼。>

width:934px;

margin:0pxauto;

padding:12px20px12px20px;

}

headerh1{

font-size:36px;

margin:0px;

color:#f3390a;

}

headerspan{

color:#000000;

}

headerh2{

font-size:12px;

margin:0px;

color:#444;

text-transform:uppercase;

}

nav{

background:#000000url'images/navbar.jpg';

font-size:1.143em;

height:40px;

line-height:30px;

padding:0px;

text-align:left;

border-radius:5px;

}

navul{

list-style:none;

margin:0pxauto;

width:800px;

}

navli{

float:left;

display:inline;

margin:0px;

}

nava:visit{nava:link.>

color:#fff;

display:inline-block;

height:30px;

padding:5px1.5em;

text-decoration:none;

}

nava:active,nava:hover.nav.activa:link,nav.activa:visit{

color:#65b0f7;

text-shadow:none;

}

HTMLofHeaderSection

<header>

<hgroup>

<h1>

Company<span>Name</span>

</h1>

<h2>youcanputhereaverinicecompanitagline</h2>

</hgroup>

</header>

<nav>

<ul>

<li><ahref="#">Home</a>

</li>

<li><ahref="#">A boutUs</a>

</li>

<li><ahref="#">ContactUs</a>

</li>

</ul>

</nav>

CSSofFeatursection

#featured{

background:#fffurlimages/banner.jpgno-repeat;

height:320px;

margin:0pxauto;

border-radius:10px;

}

#featurh2{

font-size:18px;

padding:20px20px20px20px;

color:#f3390a;

text-shadow:blackthreeddarkshadow;

text-transform:none;

}

#featurp{

font-size:12px;

padding:20px20px20px20px;

width:65%;

text-align:justify;

color:#000000;

}

#featurdiv{

font-size:12px;

margin-left:22px;

margin-right:22px;

padding-left:5px;

width:63%;

text-align:justify;

color:#000000;

background:#f67a56;

border-radius:20px;

}

#featurdiv>p{

font-size:12px;

padding:20px20px20px20px;

width:90%;

text-align:justify;

color:#000000;

}

HTMLofFeaturSection

<headerid="featured">

<h2>A boutyourcompany</h2>

<p>

<b>Youcanputheresummariofyourcompanidetails.</b><br/>Lorem

consecteturadipiscelit.Quisquvenenatis ipsumdolorsitamet.>

nuncvitaliberoiaculielementum.Nullametjustononsapien

dapibublanditnecetleo.Ututmalesuadatellus.Loremipsumdolor

consecteturadipiscelit sitamet.>

</p>

<div>

<p>

<b>Highlightpointaboutyourcompany.</b><br/>Loremipsumdolor

consecteturadipiscelit.Quisquvenenatinuncvitae sitamet.>

liberoiaculielementum.Nullametjustononsapiendapibublandit

necetleo.Ututmalesuadatellus.Loremipsumdolorsitamet.>

consecteturadipiscelit

</p>

</div>

</header>

CSSofVideo,FormandCanvaSection

article{

margin:0pxauto;

background:#ffffff;

border-radius:10px;

padding:20px;

}

article>h2{

font-size:18px;

padding:20px20px20px20px;

color:#f3390a;

text-transform:none;

}

article>sectvideo{

width:320px;

height:240px;

background:#ffffff;

border-radius:5px;

}

article>section>ttd{

padding:0px20px0px20px;

font-size:12px;

}

article>sectform{

padding:10px;

margin-bottom:30px;

}

article>sectlabel{

font-weight:bold;

font-size:13px;

}

article>sectinput{

margin-bottom:3px;

font-size:13px;

}

canva{

margin-left:70px;

border:1pxsolid#888;

background-color:#f67a56;

}

HTMLofVideoSection

<article>

<section>

<header>

<h2>Thiisavideosection.</h2>

</header>

<table>

<tr>

<tdrowspan="2">

<videocontrols="controls">

<sourc src='robotics.webm'

vorbis"'></source> type='video/webm;codecs="vp8.0.>

<sourc src='robotics.ogv'

vorbis"'></source> type='video/ogg;codecs="theora.>

<sourc src='robotics.mp4'

mp4a.40.2"'></source> type='video/mp4;codecs="avc1.4D401E.>

</video></td>

<td><h2>Thivideoheading</h2></td>

</tr>

<tr>

<td><pstyle="text-align:justify;">Loremipsumdolorsit

Nullametjustononsapiendapibus

blanditnecetleo.Ututmalesuadatellus.</p>

</td>

</tr>

</table>

</section>

</articl>

HTMLofFormandCanvaSection

<articl>

<section>

<header>

<h2>Thiisafeedbackformandcanvasection.Youcanput

somedrawinthecanvaarea.</h2></header>

<form>

<table>

<tr>

<td><label>Name:</label></td>

<td><inputplaceholder="Entyourname"autofocu/> </td>

<tdrowspan="6"><canvaid="my_canvas"width="480" height="320">

YouneedaCanvas-compatbrowsertoviewthiarea.</canvas></td>

</tr>

<tr>

<td><label>Email:</label></td>

<td><inputplaceholder="Entyouremail"/> </td>

</tr>

<tr>

<td><label>Phone:</label></td>

<td><inputplaceholder="Entyourphone"/></td>

</tr>

<tr>

<td><label>Callbackon:</label></td>

<td><inputtype="datetime"/></td>

</tr>

<tr>

<td><label>Priority:</label></td>

<td><inputtype="range"min="1"max="5"value="1"/> </td>

</tr>

<tr><td><inputtype="submit"value="Submit"/></td><td></td></tr>

</table>

</form>

</section>

</articl>

CSSofFooterSection

footer{

text-align:center;

}

HTMLoffootersection

<footer>

<p>&copy;2009CompaniName.Allrightreserved.</p>

</footer>

代碼整合

HTML

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>HTML5andCSS3Demo</title>

<linkrel="stylesheet"href="style.css"/>

<script>

functionloadCanva{

varcanva=document.getElementByIdx_x_x_x_x_x_x'my_canvas';

ifcanvas.getContext{

varctx=canvas.getContext'2d';

ctx.beginPath;

160, ctx.arc245.150,0,Math.PI*2,true;

255, ctx.fillStyl="rgb255.204";

ctx.fill;

ctx.stroke;

ctx.fillStyl="black";

ctx.beginPath;

110, ctx.arc200.15,0,Math.PI*2,true;

ctx.fill;

ctx.beginPath;

110, ctx.arc280.15,0,Math.PI*2,true;

ctx.fill;

ctx.beginPath;

170, ctx.arc240.20,4,Math.PI*2,true;

ctx.stroke;

ctx.beginPath;

190, ctx.arc240.60,0,Math.PI,fals;

ctx.stroke;

}els{

document.getElementByIdx_x_x_x_x_x_x'my_canvas'.style.displai='none';

document.getElementByIdx_x_x_x_x_x_x'no-canvas'.style.displai='block';

}

}

</script>

</head>

<body>

<header>

<hgroup>

<h1>

Company<span>Name</span>

</h1>

<h2>youcanputhereaverinicecompanitagline</h2>

</hgroup>

</header>

<nav>

<ul>

<li><ahref="#">Home</a>

</li>

<li><ahref="#">A boutUs</a>

</li>

<li><ahref="#">ContactUs</a>

</li>

</ul>

</nav>

<headerid="featured">

<h2>A boutyourcompany</h2>

<p>

<b>Youcanputheresummariofyourcompanidetails.</b><br/>Lorem

consecteturadipiscelit.Quisquvenenatis ipsumdolorsitamet.>

nuncvitaliberoiaculielementum.Nullametjustononsapien

dapibublanditnecetleo.Ututmalesuadatellus.Loremipsumdolor

consecteturadipiscelit sitamet.>

</p>

<div>

<p>

<b>Highlightpointaboutyourcompany.</b><br/>Loremipsumdolor

consecteturadipiscelit.Quisquvenenatinuncvitae sitamet.>

liberoiaculielementum.Nullametjustononsapiendapibublandit

necetleo.Ututmalesuadatellus.Loremipsumdolorsitamet.>

consecteturadipiscelit

</p>

</div>

</header>

<br/>

<article>

<section>

<header>

<h2>Thiisavideosection.</h2>

</header>

<table>

<tr>

<tdrowspan="2"><videocontrols="controls">

<sourc src='robotics.webm'

vorbis"'></source> type='video/webm;codecs="vp8.0.>

<sourc src='robotics.ogv'

vorbis"'></source> type='video/ogg;codecs="theora.>

<sourc src='robotics.mp4'

mp4a.40.2"'></source> type='video/mp4;codecs="avc1.4D401E.>

</video></td>

<td><h2>Thivideoheading</h2></td>

</tr>

<tr>

<td><pstyle="text-align:justify;">Loremipsumdolorsit

Nullametjustononsapiendapibus

blanditnecetleo.Ututmalesuadatellus.</p>

</td>

</tr>

</table>

</section>

</article>

<br/>

<article>

<section>

<header>

<h2>Thiisafeedbackformandcanvasection.Youcanput

somedrawinthecanvaarea.</h2></header>

<form>

<table>

<tr>

<td><label>Name:</label></td>

<td><inputplaceholder="Entyourname"autofocu/> </td>

<tdrowspan="6"><canvaid="my_canvas"width="480" height="320">

YouneedaCanvas-compatbrowsertoviewthiarea.</canvas>

</td>

</tr>

<tr>

<td><label>Email:</label></td>

<td><inputplaceholder="Entyouremail"/> </td>

</tr>

<tr>

<td><label>Phone:</label></td>

<td><inputplaceholder="Entyourphone"/></td>

</tr>

<tr>

<td><label>Callbackon:</label></td>

<td><inputtype="datetime"/></td>

</tr>

<tr>

<td><label>Priority:</label></td>

<td><inputtype="range"min="1"max="5"value="1"/> </td>

</tr>

<tr><td><inputtype="submit"value="Submit"/></td><td></td></tr>

</table>

</form>

</section>

</article>

<br/>

<footer>

<p>&copy;2009CompaniName.Allrightreserved.</p>

</footer>

</body>

</html>

CSS

@CHA RSET"ISO-8859-1";

*{

margin:00;

}

html{

background:#f2f4f5;

}

bodi{

font-family:"TrebuchetMS";

width:934px;

margin:0pxauto;

padding:12px20px12px20px;

}

headerh1{

font-size:36px;

margin:0px;

color:#f3390a;

}

headerspan{

color:#000000;

}

headerh2{

font-size:12px;

margin:0px;

color:#444;

text-transform:uppercase;

}

nav{

background:#000000url'images/navbar.jpg';

font-size:1.143em;

height:40px;

line-height:30px;

padding:0px;

text-align:left;

border-radius:5px;

}

navul{

list-style:none;

margin:0pxauto;

width:800px;

}

navli{

float:left;

display:inline;

margin:0px;

}

nava:visit{nava:link.>

color:#fff;

display:inline-block;

height:30px;

padding:5px1.5em;

text-decoration:none;

}

nava:active,nava:hover.nav.activa:link,nav.activa:visit{

color:#65b0f7;

text-shadow:none;

}

#featured{

background:#fffurlimages/banner.jpgno-repeat;

height:320px;

margin:0pxauto;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

#featurh2{

font-size:18px;

padding:20px20px20px20px;

color:#f3390a;

text-shadow:blackthreeddarkshadow;

text-transform:none;

}

#featurp{

font-size:12px;

padding:20px20px20px20px;

width:65%;

text-align:justify;

color:#000000;

}

#featurdiv{

font-size:12px;

margin-left:22px;

margin-right:22px;

padding-left:5px;

width:63%;

text-align:justify;

color:#000000;

background:#f67a56;

border-radius:20px;

}

#featurdiv>p{

font-size:12px;

padding:20px20px20px20px;

width:90%;

text-align:justify;

color:#000000;

}

article{

margin:0pxauto;

background:#ffffff;

border-radius:10px;

padding:20px;

}

article>h2{

font-size:18px;

padding:20px20px20px20px;

color:#f3390a;

text-transform:none;

}

article>sectvideo{

width:320px;

height:240px;

background:#ffffff;

border-radius:5px;

}

article>section>ttd{

padding:0px20px0px20px;

font-size:12px;

}

article>sectform{

padding:10px;

margin-bottom:30px;

}

article>sectlabel{

font-weight:bold;

font-size:13px;

}

article>sectinput{

margin-bottom:3px;

font-size:13px;

}

canva{

margin-left:70px;

border:1pxsolid#888;

background-color:#f67a56;

}

footer{

text-align:center;

}

結(jié)論

新聞名稱：完整網(wǎng)站設(shè)計(jì)實(shí)例：HTML5實(shí)戰(zhàn)開發(fā)
文章來(lái)源：http://www.bm7419.com/news30/179780.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站收錄、標(biāo)簽優(yōu)化、網(wǎng)站制作、Google、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)