版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
實(shí)驗(yàn)四Div+CSS網(wǎng)頁(yè)布局一、站點(diǎn)規(guī)劃在網(wǎng)頁(yè)制作中，有許多的術(shù)語(yǔ)，例如：HTML、CSS、DIV等等。下面我們就開(kāi)始一步一步使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)吧。所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來(lái)說(shuō)還需要制作的界面布局簡(jiǎn)單的構(gòu)畫出來(lái)。下面，我們需要根據(jù)構(gòu)思圖來(lái)規(guī)劃一下頁(yè)面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個(gè)局部：1、頂部局部，其中又包括了LOGO、MENU和一幅Banner圖片；
2、內(nèi)容局部又可分為側(cè)邊欄、主體內(nèi)容；
3、底部，包括一些版權(quán)信息。
有了以上的分析，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下列圖:根據(jù)上圖，我再畫了一個(gè)實(shí)際的頁(yè)面布局圖，說(shuō)明一下層的嵌套關(guān)系，這樣理解起來(lái)就會(huì)更簡(jiǎn)單了。DIV結(jié)構(gòu)如下：
│body{}/*這是一個(gè)HTML元素，具體我就不說(shuō)明了*/
└#Container{}/*頁(yè)面層容器*/
├#Header{}/*頁(yè)面頭部*/
├#PageBody{}/*頁(yè)面主體*/
│├#Sidebar{}/*側(cè)邊欄*/
│└#MainBody{}/*主體內(nèi)容*/
└#Footer{}/*頁(yè)面底部*/至此，頁(yè)面布局與規(guī)劃已經(jīng)完成，接下來(lái)我們要做的就是開(kāi)始書寫HTML代碼和CSS。接下來(lái)我們?cè)谧烂嫘陆ㄒ粋€(gè)文件夾，命名為“DIV+CSS頁(yè)面布局〞，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":///TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns=":///1999/xhtml">
<head>
<meta-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>無(wú)標(biāo)題文檔</title>
<linkhref="css.css"rel="stylesheet"type="text/css"/>
</head><body>
</body>
</html>這是XHTML的根本結(jié)構(gòu)，將其命名為index.htm，另一個(gè)記事本文檔那么命名為css.css。下面，我們?cè)?lt;body></body>標(biāo)簽對(duì)中寫入DIV的根本結(jié)構(gòu)，代碼如下：<divid="container">[color=#aaaaaa]<!--頁(yè)面層容器-->[/color]<divid="Header">[color=#aaaaaa]<!--頁(yè)面頭部-->[/color]</div><divid="PageBody">[color=#aaaaaa]<!--頁(yè)面主體-->[/color]<divid="Sidebar">[color=#aaaaaa]<!--側(cè)邊欄-->[/color]</div><divid="MainBody">[color=#aaaaaa]<!--主體內(nèi)容-->[/color]</div></div><divid="Footer">[color=#aaaaaa]<!--頁(yè)面底部-->[/color]</div></div>為了使以后閱讀代碼更簡(jiǎn)易，我們應(yīng)該添加相關(guān)注釋，接下來(lái)翻開(kāi)css.css文件，寫入CSS信息，代碼如下：/*根本信息*/
body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}/*頁(yè)面層容器*/
#container{width:100%}/*頁(yè)面頭部*/
#Header{width:800px;margin:0auto;height:100px;background:#FFCC99}/*頁(yè)面主體*/
#PageBody{width:800px;margin:0auto;height:400px;background:#CCFF00}/*頁(yè)面底部*/
#Footer{width:800px;margin:0auto;height:50px;background:#00FFFF}把以上文件保存，用瀏覽器翻開(kāi)，這時(shí)我們已經(jīng)可以看到根底結(jié)構(gòu)了，這個(gè)就是頁(yè)面的布局了。關(guān)于以上CSS的說(shuō)明：1、請(qǐng)養(yǎng)成良好的注釋習(xí)慣，這是非常重要的；2、body是一個(gè)HTML元素，頁(yè)面中所有的內(nèi)容都應(yīng)該寫在這標(biāo)簽對(duì)之內(nèi)，我就不多說(shuō)了；3、講解一些常用的CSS代碼的含義：font:12pxTahoma；
這里使用了縮寫，完整的代碼應(yīng)該是：font-size:12px;font-family:Tahoma；說(shuō)明字體為12像素大小，字體為Tahoma格式；margin:0px；
也使用了縮寫，完整的應(yīng)該是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px0px0px0px順序是上/右/下/左，你也可以書寫為margin:0(縮寫)；
以上樣式說(shuō)明body局部對(duì)上右下左邊距為0像素，如果使用auto那么是自動(dòng)調(diào)整邊距，另外還有以下幾種寫法：
margin:0pxauto；
說(shuō)明上下邊距為0px，左右為自動(dòng)調(diào)整；
我們以后將使用到的padding屬性和margin有許多相似之處，他們的參數(shù)是一樣的，
只不過(guò)各自表示的含義不相同，margin是外部距離，而padding那么是內(nèi)部距離。text-align:center文字對(duì)齊方式，可以設(shè)置為左、右、中，這里我將它設(shè)置為居中對(duì)齊。background:#FFF設(shè)置背景色為白色，這里顏色使用了縮寫，完整的應(yīng)該是background:#FFFFFF。
background可以用來(lái)給指定的層填充背景色、背景圖片，以后我們將用到如下格式：
background:#cccurl('bg.gif')topleftno-repeat；表示：使用#CCC(灰度色)填充整個(gè)層，使用bg.gif做為背景圖片，
topleft
表示圖片位于當(dāng)前層的左上端，no-repeat表示僅顯示圖片大小而不填充滿整個(gè)層。
top/right/bottom/left/center
用于定位背景圖片，分別表示上/右/下/左/中；還可以使用
background:url('bg.gif')20px100px;表示X座標(biāo)為20像素，Y座標(biāo)為100像素的精確定位；
repeat/no-repeat/repeat-x/repeat-y
分別表示填充滿整個(gè)層/不填充/沿X軸填充/沿Y軸填充。height/width/color分別表示高度(px)、寬度(px)、字體顏色(HTML色系表)。4、如何使頁(yè)面居中？大家將代碼保存后可以看到，整個(gè)頁(yè)面是居中顯示的，那么究竟是什么原因使得頁(yè)面居中顯示呢？
是因?yàn)槲覀冊(cè)?container中使用了以下屬性：
margin:0auto;
按照前面的說(shuō)明，可以知道，表示上下邊距為0，左右為自動(dòng)，因此該層就會(huì)自動(dòng)居中了。
如果要讓頁(yè)面居左，那么取消掉auto值就可以了，因?yàn)槟J(rèn)就是居左顯示的。
通過(guò)margin:auto我們就可以輕易地使層自動(dòng)居中了。5、這里我只介紹這些常用的CSS屬性了，其他的請(qǐng)參看CSS2.0中文手冊(cè)。當(dāng)我們寫好了頁(yè)面大致的DIV結(jié)構(gòu)后，我們就可以開(kāi)始細(xì)致地對(duì)每一個(gè)局部進(jìn)行制作了。在上一章中我們寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把css.css中的樣式全部去除掉，重新寫入以下樣式代碼：/*根本信息*/
body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}/*頁(yè)面層容器*/
#container{width:800px;margin:10pxauto}樣式說(shuō)明：a:link,a:visited{font-size:12px;text-decoration:none;}a:hover{}這兩項(xiàng)分別是控制頁(yè)面中超鏈接的樣式，具體我就不說(shuō)明了，請(qǐng)大家參閱手冊(cè)。#container{width:800px;margin:10pxauto}指定整個(gè)頁(yè)面的顯示區(qū)域。
width:800px指定寬度為800像素，這里根據(jù)實(shí)際所需設(shè)定。
margin:10pxauto，那么是頁(yè)面上、下邊距為10個(gè)像素，并且居中顯示。
上一章中我們講過(guò)，對(duì)層的margin屬性的左右邊距設(shè)置為auto可以讓層居中顯示。二、設(shè)計(jì)首頁(yè)布局根據(jù)上面的規(guī)劃，先設(shè)計(jì)頁(yè)面布局，然后再填充內(nèi)容。步驟如下：〔1〕新建站點(diǎn)“mysite〞，新建一個(gè)HTML文件，命名為“〞。在“文檔〞面板中把“標(biāo)題〞項(xiàng)的“無(wú)標(biāo)題文檔〞改為“頁(yè)面布局〞。保存網(wǎng)頁(yè)〔制作網(wǎng)頁(yè)時(shí)一定要時(shí)常記著保存網(wǎng)頁(yè)，否那么一旦出現(xiàn)問(wèn)題，前功盡棄！〕?！?〕頁(yè)面層容器。選擇“插入〞面板中的“布局〞欄，單擊“插入Div標(biāo)簽〞工具，插入一個(gè)Div標(biāo)簽，在彈出的對(duì)話框中命名Div的ID為“Container〞。單擊“新建CSS規(guī)那么〞按鈕，以ID為規(guī)那么名稱新建樣式：width:800px指定寬度為800像素，這里根據(jù)實(shí)際所需設(shè)定。
margin:10pxauto，那么是頁(yè)面上、下邊距為10個(gè)像素，并且居中顯示。對(duì)層的margin屬性的左右邊距設(shè)置為auto可以讓層居中顯示。border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;〔3〕頁(yè)面頭部。選擇“插入〞面板中的“布局〞欄，單擊“插入Div標(biāo)簽〞工具，插入一個(gè)Div標(biāo)簽，在彈出的對(duì)話框中命名Div的ID為“Header〞。單擊“新建CSS規(guī)那么〞按鈕，以ID為規(guī)那么名稱新建樣式：width:780px;height:100px;margin:10px;表示上下左右邊距為10px。background:#FFCC99border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;〔4〕頁(yè)面主體。選擇“插入〞面板中的“布局〞欄，單擊“插入Div標(biāo)簽〞工具，插入一個(gè)Div標(biāo)簽，在彈出的對(duì)話框中命名Div的ID為“PageBody〞。單擊“新建CSS規(guī)那么〞按鈕，以ID為規(guī)那么名稱新建樣式：width:780px;height:400px;margin:10px;表示上下左右邊距為10px。background:#CCFF00border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;〔5〕左邊條。選擇“插入〞面板中的“布局〞欄，單擊“插入Div標(biāo)簽〞工具，插入一個(gè)Div標(biāo)簽，在彈出的對(duì)話框中命名Div的ID為“SideBar〞。單擊“新建CSS規(guī)那么〞按鈕，以ID為規(guī)那么名稱新建樣式：float:left;width:280px;height:380px;margin:10px;表示上下左右邊距為10px。border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;〔6〕主體內(nèi)容。選擇“插入〞面板中的“布局〞欄，單擊“插入Div標(biāo)簽〞工具，插入一個(gè)Div標(biāo)簽，在彈出的對(duì)話框中命名Div的ID為“MainBody〞。單擊“新建CSS規(guī)那么〞按鈕，以ID為規(guī)那么名稱新建樣式：float:right;width:450px;height:380px;margin:10px;表示上下左右邊距為10px。border-top-width:1px;border-right-width:1px;border-bottom-width:
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025上海市建筑安全員-C證考試（專職安全員）題庫(kù)及答案
- 深圳技術(shù)大學(xué)《高分子材料助劑及配方設(shè)計(jì)》2023-2024學(xué)年第二學(xué)期期末試卷
- 河南信息統(tǒng)計(jì)職業(yè)學(xué)院《納稅籌劃與實(shí)務(wù)》2023-2024學(xué)年第二學(xué)期期末試卷
- 2024-2025學(xué)年河南省開(kāi)封市五縣聯(lián)考高二上學(xué)期第二次月考（期中）歷史試卷
- 山西國(guó)際商務(wù)職業(yè)學(xué)院《給排水管道工程》2023-2024學(xué)年第二學(xué)期期末試卷
- 鶴壁能源化工職業(yè)學(xué)院《營(yíng)養(yǎng)與食品衛(wèi)生學(xué)2》2023-2024學(xué)年第二學(xué)期期末試卷
- 2025青海省建筑安全員-C證（專職安全員）考試題庫(kù)
- 2025黑龍江省安全員B證考試題庫(kù)及答案
- 福建衛(wèi)生職業(yè)技術(shù)學(xué)院《組織胚胎學(xué)》2023-2024學(xué)年第二學(xué)期期末試卷
- 大連財(cái)經(jīng)學(xué)院《VisualBasic程序設(shè)計(jì)》2023-2024學(xué)年第二學(xué)期期末試卷
- 高速公路改擴(kuò)建工程路基標(biāo)準(zhǔn)化
- 水泥攪拌樁記錄表格范本
- DL∕T 458-2020 板框式旋轉(zhuǎn)濾網(wǎng)
- GB∕T 8163-2018 輸送流體用無(wú)縫鋼管
- Windows Azure云平臺(tái)基本操作手冊(cè)
- 短視頻：策劃制作與運(yùn)營(yíng)課件
- T∕ASC 17-2021 電動(dòng)汽車充換電設(shè)施系統(tǒng)設(shè)計(jì)標(biāo)準(zhǔn)
- 水閘設(shè)計(jì)步驟計(jì)算書（多表）
- PowerPoint使用技巧培訓(xùn)課件(共35張)
- SMA瀝青路面的設(shè)計(jì)與施工
- 腎內(nèi)科相關(guān)基礎(chǔ)知識(shí)學(xué)習(xí)教案
評(píng)論
0/150
提交評(píng)論