版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
第一步：規劃網站，本教程將以圖示為例構建網站；第二步：創建html模板及文件目錄等；第六步：頁面內的基本文本的樣式(css)設置；第七步：網站頭部圖標與logo部分的設計；第八步：頁腳信息(版權等)的表現設置；第十步：解決IE瀏覽器的顯示BUG；1第一步：規劃網站，本教程將以圖示為例構建網站
1.規劃網站，本教程將以下圖為例構建網站。
2其基本布局見下圖
3規劃網主要由五個部分構成
1.MainNavigation導航條，具有按鈕特效。Width:760pxHeight:50px2.Header網站頭部圖標，包含網站的logo和站名。Width:760pxHeight:150px3.Content網站的主要內容。Width:480pxHeight:Changesdependingoncontent4.Sidebar邊框，一些附加信息。Width:280pxHeight:Changesdependingoncontent5.Footer網站底欄，包含版權信息等。Width:760pxHeight:66px。4第二步：創建html模板及文件目錄等
1.創建html模板代碼如下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"">
<html>
<head>
<metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/>
<title>CompanyName-PageName</title>
<metahttp-equiv="Content-Language"content="en-us"/>
<metahttp-equiv="imagetoolbar"content="no"/>
<metaname="MSSmartTagsPreventParsing"content="true"/>
<metaname="description"content="Description"/>
<metaname="keywords"content="Keywords"/>
<metaname="author"content="EnlightenDesigns"/>
<styletype="text/css"media="all">@import"css/master.css";</style>
</head>
<body>
</body>
</html>5將其保存為index.html,并創建文件夾css，images，網站結構如下62.創建網站的大框，即建立一個寬760px的盒子，它將包含網站的所有元素。在html文件的<body>和</body>之間寫入
<divid="container">
Helloworld.
</div>創建css文件，命名為master.css,保存在/css/文件夾下。寫入：
#container{
width:760px;
background:red;
}7控制html的id為container的盒子的寬為760px，背景為紅色。表現如下現在為了讓盒子居中，寫入margin:auto;，使css文件為：
#container{
width:760px;
margin:auto;
background:red;
}現在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認的填充和邊界造成的。消除這個空隙，就需要在css文件中寫入：
html,body{
margin:0;
padding:0;
}8第三步：將網站分為五個div，網頁基本布局的基礎
1.將“第一步”提到的五個部分都放入盒子中，在html文件中寫入：
<divid="container">
<divid="main-nav">MainNav</div>
<divid="header">Header</div>
<divid="sidebar-a">SidebarA</div>
<divid="content">Content</div>
<divid="footer">Footer</div>
</div>表現如下：
92.為了將五個部分區分開來，我們將這五個部分用不同的背景顏色標示出來，在css文件寫入#main-nav{
background:red;
height:50px;
}
#header{
background:blue;
height:150px;
}
#sidebar-a{
background:darkgreen;
}
#content{
background:green;
}
#footer{
background:orange;
height:66px;
}10表現如下
11第四步：網頁布局與div浮動等
1.浮動，首先讓邊框浮動到主要內容的右邊。用css控制浮動
#sidebar-a{
float:right;
width:280px;
background:darkgreen;
}表現如下
122.往主要內容的盒子中寫入一些文字。在html文件中寫入<divid="content">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>13表現如下
但是你可以看到主要內容的盒子占據了整個container的寬度，我們需要將#content的右邊界設為280px。以使其不和邊框發生沖突。
css代碼如下：#content{
margin-right:280px;
background:green;
}14同時往邊框里寫入一些文字。在html文件中寫入：
<divid="sidebar-a">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>15表現如下
16這也不是我們想要的，網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內容盒子對齊了。
因此我們往css中寫入：
#footer{
clear:both;
background:orange;
height:66px;
}17表現如下18第五步：網頁主要框架之外的附加結構的布局與表現
第五步主要介紹除網頁主要框架之外的附加結構的表現(Layout),包括以下內容:1.主導航條；
2.標題(heading),包括網站名和內容標題；
3.內容；
4.頁腳信息,包括版權,認證,副導航條(可選)。加入這些結構時，為了不破壞原有框架，我們需要在css文件"body"標簽(TAG)下加入:
.hidden{
display:none;
}".hidden"即我們加入的類(class),這個類可以使頁面上任意屬于hidden類的元素(element)不顯示。這些會在稍后使用，現在請暫時忘記它。19現在我們加入標題(heading)
先回到HTML的代碼，<h1>到<h6>是我們常用的html標題代碼。比如我們一般用<h1>網站名</h1>，<h2>網站副標題</h2>,<h3>內容主標題</h3>等。我們往html文件的Header層(Div)加入:<divid="header">
<h1>EnlightenDesigns</h1>
</div>
刷新一下頁面，你就可以看到巨大的標題，和標題周圍的空白，這是因為<h1>>標簽的默認大小和邊距(margin)造成的，先要消除這些空白,需要加入：h1{
margin:0;
padding:0;
}20接下來是導航條
控制導航條表現的css代碼相對比較復雜，我們將在第九步或是第十步中詳細介紹。現在html文件加入導航代碼:
<divid="main-nav">
<ul>
<liid="about"><ahref="">About</a></li>
<liid="services"><ahref="">Services</a></li>
<liid="portfolio"><ahref="">Portfolio</a></li>
<liid="contact"><ahref="">ContactUs</a></li>
</ul>
</div>21目前導航條的表現比較糟糕，但是要在以后的教程中介紹其特殊表現，故需要暫時隱藏導航條,于是加入：<divid="main-nav">
<dlclass="hidden">
<dtid="about"><ahref="">About</a></dt>
<dtid="services"><ahref="">Services</a></dt>
<dtid="portfolio"><ahref="">Portfolio</a></dt>
<dtid="contact"><ahref="">ContactUs</a></dt>
</dl>
</div>22我們跳一步，先到頁腳：
頁腳包括兩部分：左邊的版權,認證和右邊的副導航條。
我們先要讓副導航條向右浮動，就像之前處理Sidebar和Content關系的一樣，需要加入一個新的層(div):<divid="footer">
<divid="altnav">
<ahref="">About</a>-
<ahref="">Services</a>-
<ahref="">Portfolio</a>-
<ahref="">ContactUs</a>-
<ahref="">TermsofTrade</a>
</div>
</div>23理論上，我們可以控制源文件上的任意元素的浮動，但由于IE瀏覽器的BUG，被浮動層需要首先出現在源文件上，也就是說我們把副標題放在版權和認證的前面：
<divid="footer">
<divid="altnav">
<ahref="">About</a>-
<ahref="">Services</a>-
<ahref="">Portfolio</a>-
<ahref="">ContactUs</a>-
<ahref="">TermsofTrade</a>
</div>
Copyright©EnlightenDesigns
Poweredby<ahref="">EnlightenHosting</a>and
<ahref="">Vadmin3.0CMS</a></div>24刷新你的頁面，你將看到如下所示25最后我們回到內容部分：用<h2<>表現內容標題–"About","Contactus"；用<p>表現段落；用</br>斷行。<divid="content">
<h2>About</h2>
<p><strong>EnlightenDesigns</strong>isanInternetsolutionsproviderthatspecialisesin
frontandbackenddevelopment.Toviewsomeofthewebsiteswehavecreatedviewour
portfolio.</p>
<p>Wearecurrentlyundergoinga'facelift',soifyouhaveanyquestionsorwould
likemoreinformationabouttheservicesweprovidepleasefeelfreetocontactus.</p>
<h2>ContactUs</h2>
<p>Phone:(07)8536060<br/>
Fax:(07)8536060<br/>
Email:<ahref="mailto:"></a><br/>
P.OBox:14159,Hamilton,NewZealand</p>
<p><ahref="">Morecontactinformation…</a></p>
</div>26刷新頁面可以看到在Content層中又出現一些空白，這是由于<h2><p>標簽的默認邊距(margin)造成的，我們必須消除這些惱人的空白，當又不想把網頁中所有的<h2><p>標簽地邊距都設為0，這就需要使用css的子選擇器("childcssselector"),在html的文件結構中，我們想控制的<h2><p>標簽(child)是屬于#content層(parent)的,因此在css文件中寫入：
#contenth2{
margin:0;
padding:0;
}
#contentp{
margin:0;
padding:0;
}
這樣我們就告訴瀏覽器，僅僅是隸屬于content層的<h2><p>標簽的margin和padding的值為0！27第六步：頁面內的基本文本的樣式(css)設置
你是不是厭倦了那些大紅大綠的背景，現在是去掉它們的時候了，只保留導航條的紅色背景。很好，再過幾步，你就能很好了解css控制整個網頁版面(Layout)的能力。
先設置全局的文本樣式：
body{
font-family:Arial,Helvetica,Verdana,Sans-serif;
font-size:12px;
color:#666666;
background:#ffffff;
}
一般我們把body標簽放在css文件的頂端，當然你要是執意要把它放在尾部，瀏覽器不會和你計較。font-family內的順序決定字體顯示優先級，比方如果所在計算機沒有Arial字體，瀏覽器就會指向Helvetica字體，依次類推；color指字體顏色；background指背景顏色。
28如果你都是按本教程的操作，應該能看到下圖
29你可以看到內容(content)的各塊(block)之間的間隙太小了，而基于最初的設計，內容標題(即<h2>)和正文之間的間隙大概是15px，每個段落的間距也大概是15px，所以在css中寫入：#contenth2{
margin:0;
padding:0;
padding-bottom:15px;
}
#contentp{
margin:0;
padding:0;
padding-bottom:15px;
}30然后需要讓content層的四周都空出25px的間隙，這本來是件很簡單的事，理論上我們只需在#content的css文件中加入padding:25px;就行了，但是IE給我們上了“一課”,它的固有BUG根本不能按我們的想象表現。解決這個問題有兩種辦法。第一種辦法是區別瀏覽器寫入兩種代碼(HACKIE),但因為間隙(padding,在Dreamweaver中又叫填充)使用很頻繁，所以我們用另一種辦法。
我們往需要填充的層中加入padding層，它的功能僅限于顯示間隙：
<divid="sidebar-a">
<divclass="padding">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>
</div>31同樣的，再往html文件的content層中加入padding層。
由于padding層的功能僅是制造空隙，所以不要設置它的寬度，只需在css中添加:#sidebar-a{
float:right;
width:280px;
}
#sidebar-a.padding{
padding:25px;
}
#content{
margin-right:280px;
}
#content.padding{
padding:25px;
}32
就像我們之前用的方法一樣，我們只選擇了類(class)為padding，且父類(parent)為#content或#sidebar-a的元素(element)。
接下來設置行距，content和sidebar-a的行距需要加寬，但在css中是沒有行距(leading)這種屬性(attribute)的，但是有行高(line-height)屬性，因此往css中寫入：#sidebar-a{
float:right;
width:280px;
line-height:18px;
}
#content{
margin-right:280px;
line-height:18px;
}33
現在可以看到標題"about"和"contactus"顯得相當突兀，這是因為我們使用的字體并不是一種網頁字體，我們需要將其替換為圖片，并將其存放于/images/headings/文件夾中：替換方法為，在html文件的<h2>標簽中寫入：
<h2><imgsrc="images/headings/about.gif"width="54"height="14"alt="About"/></h2>
<h2><imgsrc="images/headings/contact.gif"width="98"height="14"alt="ContactUs"/></h2>34于是得到下圖35第七步：網站頭部圖標與logo部分的設計為實現設計時的網頁頭部效果，我們需要以下兩幅圖：
/images/headers/about.jpg
/images/general/logo_enlighten.gif36首先我們給#header層添加背景圖案#header{
height:150px;
background:#db6d16
url(../images/headers/about.jpg);
}我們使用的背景屬性為一些簡寫的屬性名，用其能規定背景的顏色，圖案，圖案的位置，是否重復以及如何重復。之所以把背景色設為桔黃色，是因為當用戶使瀏覽器屏蔽圖片時，網站的頭部不會變的一片空白。應該注意到圖片的路徑是相對于css的存放位置而言的，而不是html文件，因此有"../"。37接著替換掉<h1></h1>標簽里的"EnlightenDesigns"<divid="header">
<h1><imgsrc="images/general/logo_enlighten.gif"
width="236"height="36"alt="EnlightenDesigns"border="0"/></h1>
</div>logo_enlighten圖片浮在頭部的左上方，我們需要設置<h1>的屬性值為h1{
margin:0;
padding:0;
float:right;
margin-top:57px;
padding-right:31px;
}
38這樣我們使存在于<h1>層的圖片向右浮動，并且上邊距(margin-top)為57px，右間隙(padding-right)為31px，如下圖所示注意：細心的你可能會發現我們使用了padding-right而不是margin-right，這是因為IE的怪毛病不少，它會在不定的地方無法正確顯示margin-right/left屬性，所以使用了padding(間隙,Dreamweaver中又被稱為填充)屬性。
希望大家在以后的css編寫過程中，盡量使用padding屬性，以免造成瀏覽器調試麻煩。
39第八步：頁腳信息(版權等)的表現設置首先需要控制頁腳的文本顯示：#footer{
clear:both;
height:66px;
font-family:Tahoma,Arial,Helvetica,Sans-serif;
font-size:10px;
color:#c9c9c9;
}接著我們需要設置存在鏈接的文本的顯示，在這我們沒有改變文本的顏色(仍然為#c9c9c9)，而只是讓下劃線消失:#footera{
color:#c9c9c9;
text-decoration:none;
}40但是我們想讓那些存在鏈接的文本，在鼠標懸停在其上方時變色為#db6d16：#footera:hover{
color:#db6d16;
}然后我們想給頁腳加上灰色的上邊框，在footer層的四周設置一些間隙，并加大文本的行距：#footer{
clear:both;
height:66px;
font-family:Tahoma,Arial,Helvetica,Sans-serif;
font-size:10px;
color:#c9c9c9;
border-top:1pxsolid#efefef;
padding:13px25px;
line-height:18px;
}
41最后我們需要做的就是讓副導航層(#altnav)向右浮動，需要指出的是，浮動層是必須設置寬度(width)才能正常浮動的，所以我們把#altnav的寬度設置為350px，略寬于文本的長度(為了讓副標題的文字顯示完全)，然后讓文本向右對齊：#footer#altnav{
width:350px;
float:right;
text-align:right;
}如果你按照以上方法，將得到如下圖所示的頁腳樣式42第九步：導航條的制作(較難)注:導航條之所以放在第九步講，是因為導航條制作是本教程中最難的部分，自然也是技術含量最高的地方.導航條的制作可易可難，但這里介紹的相對較難，您能堅持到這一步已經很不易，如果你只是有個導航條就滿足的話，請參考第八步的制作。先去掉導航條的紅色背景，還有就是移除html文件中main-nav層的"class="hidden"",使導航條的內容顯示出來。我們實現導航條圖片的變換的方法是純css代碼的，不包含任何js或是flash，因此我們所用的圖片是4幅分別由三個小圖組合而成的圖片，如下所示，并將這4幅圖保存于/images/nav/文件夾中43我們實現導航條的動態效果如下圖所示在網頁顯示的只是圖中紅框標出的部分，如果把每幅圖分為上，中，下三部分的話，未發生動作時顯示上部，當光標懸停時，顯示的是中部，被選擇時則顯示下部。44接下來進入css代碼部分，先往css文件中寫入/*MainNavigation*/
#main-nav{height:50px;}
#main-navul{margin:0;padding:0;}注意：/*MainNavigation*/為增加css文件可讀性的說明，不會影響表現。
#main-nav的height屬性定義了main-nav層的高度；"#main-navul"則定義main-nav層中列表的屬性，在這里先定義其margin和padding為0。
根據先前的設計，導航條應該和左邊有一定的距離，這就需要設置main-nav層的左邊距(padding-left)為11px,但由于IE5和Mac瀏覽器的BUG，需要加入以下代碼：/*IE5MacHack\*/
#main-nav{padding-left:11px;}
/*/
#main-nav{padding-left:11px;overflow:hidden;}
/*EndHack*/45現在你可以看到導航列表距左邊有11px的距離，但是列表項目是豎排的，將<li>，即列表項目向左對齊就能使其從左到右橫向排列#main-navli{float:left;}為了使列表項目的尺寸和容納它的層保持一致，并利用浮動屬性使列表項目的文本隱藏，寫入：#main-navlia{
display:block;
height:0px!important;
height/**/:50px;/*IE5/Winhack*/
padding:50px000;
overflow:hidden;
background-repeat:no-repeat;
}46接著，要實現當光標懸停于列表項目上時，顯示背景圖片的中部，因此需要將背景圖片向上移動50px，寫入：#main-navlia:hover{
background-position:0-50px;
}給各個列表項目設置寬度和背景圖片的路徑：#main-navli#about,
#main-navli#abouta{width:71px;background-image:url(../images/nav/about.gif);}
#main-navli#services,
#main-navli#servicesa{width:84px;background-image:url(../images/nav/services.gif);}
#main-navli#portfolio,
#main-navli#portfolioa{width:95px;background-image:url(../images/nav/portfolio.gif);}
#main-navli#contact,
#main-navli#contacta{width:106px;background-image:url(../images/nav/contact.gif);}47最后我們要做的就是，當列表項目被選時，顯示背景圖片的下部。為此我們需要增加一些css代碼對原有的css表現作一些修改：body.aboutli#about,
body.aboutli#abouta,
body.servicesli#services,
body.servicesli#servicesa,
body.portfolioli#portfolio,
body.portfolioli#portfolioa,
body.contactli#contact,
body.contactli#contacta{
background-position:0-100px;
}48以上看似龐大的css選擇器可以識別body標簽的類(class)，如html中為：
<bodyclass="about">
以上css選擇器就讓li#about,li#abouta,的背景向上移動100px，使其顯示背景圖片的下部。如果我們希望網站頭部背景圖片也根據body標簽的類進行變換，就需修改css的#header為：body.about
#header{
height:150px;
background:#db6d16
url(../images/headers/about.jpg);
}49至此就完成了"About"網頁
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024國家電力投資集團有限公司所屬單位崗位合集（8月）筆試參考題庫附帶答案詳解
- 三年級英語下冊 Unit 1 How are you第3課時教學設計 湘少版
- 五年級英語下冊 Unit 2 My favourite season（The fifth period）第五課時教學設計 人教PEP
- 2024四川成都香城投資集團有限公司招聘10人筆試參考題庫附帶答案詳解
- 人美版（2024）二年級上冊1.會變的線條教案設計
- 人教部編版（2024）九年級下冊我親愛的祖國教案
- 人民音樂出版社八年級音樂《主題與變奏》獲北京市教學設計一等獎
- 參加培訓總結匯報
- 人教版 (新課標)必修一第四單元10 短新聞兩篇奧斯維辛沒有什么新聞教案設計
- 九年級道德與法治上冊 第二單元 民主與法治 第四課 建設法治中國 第1框 夯筑法治基石教學設計2 新人教版
- 正壓式空氣呼吸器操作使用方法培訓課件
- 2024年信陽職業技術學院單招職業適應性測試題庫帶答案
- 五金材料采購投標方案（技術方案）
- 《電磁學》梁燦彬課后答案解析
- 富血小板血漿治療術知情同意書
- 2024春期國開電大本科《當代中國政治制度》在線形考(形考任務一至四)試題及答案
- JTGT F20-2015 公路路面基層施工技術細則
- 2024年山東濰坊高三一模數學試卷試題答案詳解（精校打印）
- 小班數學課件《拼一拼-數一數》
- FUJI-FLEXA編程流程-課件
- 【地理】2023-2024學年人教版地理七年級下冊 期中區域復習課件
評論
0/150
提交評論