這是JavaScript DOM編程藝術裏的構建JavaScript網站設計的例子,這本書給我學習JavaScript帶來許多啓發,在這個樂隊宣傳網站中,把前面學到的知識點整合在這個項目了。在這裏記錄下實現這個樂隊的宣傳網站的具體過程,加深理解。好,從如今開始來實現這個JavaScript網站實戰。css
1、網頁的結構html
由三個部分組成:頭部、導航、內容web
效果圖是這樣的(勉強看,有點不美觀。哈哈):編程
2、網站的的結構瀏覽器
這是個人項目目錄。佈局
images——放置全部的要使用到的圖片資源。學習
style——放置使用到的層疊樣式表網站
js——放置全部要使用到的js文件ui
5個html文件對應導航欄的5個菜單url
Home:網站主頁
About:樂隊介紹
Photos:樂隊演出日程
Live:樂隊的演出日程
Contact:供訪者與樂隊進行交流
網站主頁的代碼:
webDesign.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>webDesign</title> 6 <link rel="stylesheet" href="style/webdesign.css" /> 7 <link rel="stylesheet" href="style/color.css" /> 8 <link rel="stylesheet" href="style/typography.css" /> 9 10 </head> 11 <body> 12 <div id="header"> 13 <img src="images/weblogo.gif" /> 14 </div> 15 16 <div id="navigation"> 17 <ul> 18 <li><a href="webDesign.html">Home</a></li> 19 <li><a href="about.html">About</a></li> 20 <li><a href="photos.html">Photos</a></li> 21 <li><a href="live.html">Live</a></li> 22 <li><a href="contact.html">Contact</a></li> 23 </ul> 24 </div> 25 <div id="content"> 26 <h1> Lorem Ipsum DOlor</h1> 27 <p> 28 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 29 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 30 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 31 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 32 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 33 </p> 34 35 </p> 36 </div> 37 </body> 38 </html>
css樣式
webdesign.css
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 body{ 6 margin:1em 10%; 7 } 8 9 #header{ 10 background-image: url(../images/guitarist.gif); 11 background-color: #000; 12 background-repeat: no-repeat; 13 background-position: bottom right; 14 border-width: .1em; 15 border-style: solid; 16 border-bottom-width: 0; 17 } 18 #navigation{ 19 background-image: url(../images/nav-bg.png); 20 background-position: bottom left; 21 background-repeat: repeat-x; 22 border-width: .1em; 23 border-style: solid; 24 border-bottom-width: 0; 25 border-top-width: 0; 26 padding-left: 10%; 27 } 28 #navigation ul{ 29 width:100%; 30 overflow: hidden; 31 border-left-width: .1em; 32 border-left-style: solid; 33 34 } 35 #navigation li{ 36 display: inline; 37 } 38 #navigation li a{ 39 display: block; 40 float: left; 41 padding: .5em 2em; 42 border-right: .1em solid; 43 } 44 #content{ 45 border-width: .1em; 46 border-style: solid; 47 border-top-width: 0; 48 padding: 2em 10%; 49 line-height: 1.8em; 50 }
typography.css
body {
font-size: 76%;
font-family: helvetica,arial,sans-serif;
}
body *{
font-size: 1em;
}
a{
font-weight: bold;
text-decoration: none;
}
#navigation{
font-family: "lucida grande", helvetica ,arial,sans-serif;
}
#navigation a{
text-decoration: none;
font-weight: bold''
}
#content{
line-height: 1.8en;
}
#content p{
margin:1em 0;
}
h1{
font-family: georgia,"times new roman",sans-serif;
font: 2.4em normal;
}
h2{
font-family: georgia,"times new roman",sans-serif;
font: 1.8em normal;
margin-top: 1em;
}
h1{
font-family: georgia,"times new roman",sans-serif;
font: 1.4em normal;
margin-top: 1em;
}
color.css
body {
color: #fb5;
background-color: #334;
}
a:link{
color: #445;
background-color: #eb6;
}
a:visited{
color: #345;
background-color: #eb6;
}
a:hover{
color: #667;
background-color: #fb5;
}
a:active{
color: #778;
background-color: #667;
}
#header{
color: #ec8;
background-color: #334;
border-color: #667;
}
#navigation{
color: #455;
background-color: #789;
border-color: #667;
}
#content{
color: #223;
background-color: #edc;
border-color: #99a;
}
#navigation ul{
border-color: #99a;
}
#navigation a:link,#navigation a:visited{
color:#eef;
background-color: transparent;
border-color: #99a;
}
#navigation a:hover{
color: #445;
background-color: #eb6;
}
#navigation a:active{
color: #667;
background-color: #ec8;
}
而後,,打開谷歌瀏覽器瀏覽,看到的 頁面是:
網站整體佈局完成了。接下來的就是寫每個頁面,以及每一個頁面用到的JavaScript。
天天進步一點點~~~~