完整网站设计实例:HTML5实战开发

发布日期:2016-10-12查看人数:
开发人员可以在其职业生涯中获得巨大利益。HTML5不只仅是一项技术,HTML5HTMLWeb开发中的下一个重要里程碑。武汉网站建设公司通过对其早期学习。会??留下一个坚定的足迹。虽然目前它并没有完全诞生,但注定会是值得你去付出努力。
这篇文章中我将基于HTML5和CSS实现一个完整网站制作。首先你需要对CSS有一定的解并熟识HTML当然也无需对此非常专业,   HTML5HTML4下一代版本。但是至少能有一定的解。

几乎保存了上一代所有的标签元素,尽管有局部被视为废弃元素,但在开发过程中仍可继续沿用。不过使用时需谨慎,因为这部分功能最终都将被删除。这一项新兴技术尚处于起步阶段,目前的规范仍处于发展阶段,不过我可以推测最终规范中的规范会有哪些变化。由于规范制定委员会还没有一个标准化的提议,因此,开发HTML5网页时会有一个负面影响-目前不是所有的浏览器都能支持其功能,不过在绝大多数的最新版本下可以实现。

从而实现从Flash束缚中解放出来。但在这个问题上仍有很多的争论,   毫无疑问的W3C将在HTML5项目中以新的标志呈现页面中的视音频。例如外地的HTML5播放器上视频流的解码器规范化问题。虽然还有很多问题未解决,但这并不影响开发者去学习HTML5如果对这项新技术感兴趣,就完全可以着手,正如人们所说 -不下水,一辈子不会游泳:不扬帆,一辈子不会撑船。

而不只是一个简单主页。这里同时用到HTML4与HTML5中的元素以及一个CSS样式表。开发过程中采用谷歌Chrome和IE9作为测试浏览器,   本文中我来模拟创建一个企业网站。而对于HTML和CSS则在Eclipse中完成。读者可以选择Eclipse或其它IDE

---------------------------------------------------------------------   
html5


可选择多种不同的方式,开发人员在设计网页时。这里我一般遵循以下方法:

导航链接,1.要求:分析网页的内容。图形/图像,标志,表单等。

2.布局是否符合要求;准备工具:笔和纸

完成CSS样式表3.创建布局。>

4.HTML编码

5.浏览器中测试

需要注意的这些方法并不是线性的方法345一般都是同时进行。

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

下面让我来看看具体如何实现。

HTML与CSS

即标题,可以看到下方所示的样式布局共包含6个部分。主菜单,主页面内容,视频,表单以及画板。

这里将margin参数值设置为0删除所有的HTML页面的默认margin参数值。整个页面中设置HTML页面的背景色并应用字体TrebuchetMS页面宽度设置为934px和margin设为自动,CSS代码下General局部。给页面实现固定宽度并在浏览器中准确定位。

可参考以下链接:实例中大多数都是罕见标签。>

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{ 

代表说明网站是采用的编码是英文;*/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;

}

结论