這是JavaScript DOM編程藝術里的構建JavaScript網站設計的例子，這本書給我學習JavaScript帶來許多啟發，在這個樂隊宣傳網站中，把前面學到的知識點整合在這個項目了。在這里記錄下實現這個樂隊的宣傳網站的具體過程，加深理解。好，從現在開始來實現這個JavaScript網站實戰。
一、網頁的結構
由三個部分組成：頭部、導航、內容
效果圖是這樣的（勉強看，有點不美觀。哈哈）：
二、網站的的結構
這是我的項目目錄。
images——放置所有的要使用到的圖片資源。
style——放置使用到的層疊樣式表
js——放置所有要使用到的js文件
5個html文件對應導航欄的5個菜單
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。
每天進步一點點~~~~