(教學(xué)課件)chapter8利用Div+CSS制作網(wǎng)頁

1、第8章利用Div+CSS設(shè)計與制作網(wǎng)頁制作網(wǎng)站主頁計算機(jī)工程學(xué)院計算機(jī)基礎(chǔ)教學(xué)部學(xué)習(xí)目標(biāo)掌握利用Div+CSS設(shè)計制作網(wǎng)頁的整體思路熟練掌握利用CSS對Div進(jìn)行定位的方法熟練掌握利用CSS設(shè)置Div屬性的方法深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）2實(shí)訓(xùn)項(xiàng)目深圳慧衡科技有限公司為了擴(kuò)展業(yè)務(wù)需要制作一個公司網(wǎng)站，介紹公司概況、公司文化、產(chǎn)品展示等。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）3項(xiàng)目分析網(wǎng)頁設(shè)計師小高首先進(jìn)行需求分析，了解公司所要表達(dá)的理念、界面顯示內(nèi)容和欄目的要求，確定了網(wǎng)站主頁的設(shè)計思路：（1）頁面元素：網(wǎng)站banner、導(dǎo)航條

2、（從“方案、技術(shù)、服務(wù)、設(shè)計、案例、培訓(xùn)、合作、慧衡”這8項(xiàng)來介紹公司）、介紹公司業(yè)務(wù)的一些文字元素、圖像等。（2）版面布局：采用“國”字形結(jié)構(gòu)，頂部區(qū)域用于裝載網(wǎng)站的banner、導(dǎo)航條及橫幅廣告條；接下來就是主體內(nèi)容區(qū)域，分為3列，左側(cè)用于裝載欄目列表，中間用于裝載公司業(yè)務(wù)信息，右側(cè)用于裝載最新博文、聯(lián)系方式；底部區(qū)域裝載頁腳信息。（3）配色方案：因?yàn)槭枪揪W(wǎng)站，所以色彩搭配采用了深藍(lán)色主題，藍(lán)色可以給人“信任、安全、崇高”等的心理聯(lián)想，也符合一般人的視覺感官。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）4設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院 計

3、算機(jī)基礎(chǔ)教研室預(yù)備知識：Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)提出網(wǎng)頁主要由3部分組成：結(jié)構(gòu)、表現(xiàn)和行為，相對應(yīng)的結(jié)構(gòu)標(biāo)準(zhǔn)為結(jié)構(gòu)化語言，如XHTML和XML；表現(xiàn)標(biāo)準(zhǔn)語言，如CSS；行為標(biāo)準(zhǔn)，包括對象模型、ECMAScript等。Web標(biāo)準(zhǔn)最顯著的特征就是將網(wǎng)頁的內(nèi)容與表現(xiàn)相分離，這就要求網(wǎng)頁有良好的文檔結(jié)構(gòu)。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）6預(yù)備知識：認(rèn)識DivDiv（division）即片段，并無實(shí)際的意義，只是一個定位標(biāo)志，是塊元素的一種。在HTML規(guī)范中，元素可分為內(nèi)聯(lián)元素（inline element）和塊元素（block element）兩種，塊元素是其他元素的容器

4、元素，它可以容納內(nèi)聯(lián)元素和其他塊元素。在默認(rèn)情況下，塊元素總是從新行開始，高度、寬度以及頂和底邊距度可控制。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）7預(yù)備知識：認(rèn)識盒模型填充（padding）：盒子里面的內(nèi)容到盒子邊框的距離。邊框（border）：盒子本身的邊框，邊框可以有多種樣式，如實(shí)線、虛線或點(diǎn)線等。邊界（margin）：盒子邊框外和其他盒子之間的距離，稱為邊界；邊界邊是透明的，一般可用它控制元素之間的間隔。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）8小試身手預(yù)備知識：定位方式1 float定位準(zhǔn)確來說，浮動并不是一種用作定位的選項(xiàng)，而是為

5、元素分配一定的空間，然后讓文檔中的其他部分自動環(huán)繞在其周圍。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）9小試身手預(yù)備知識：定位方式2 position的4種定位模式 absolute（絕對）如果設(shè)置一個Div絕對定位，可以通過設(shè)置該元素的top、left值，使其移至坐標(biāo)（left，top）處，坐標(biāo)原點(diǎn)是頁面的左上角，那么該元素原來占據(jù)的空間將消失。如果某個絕對定位的Div位于父層Div中，且父層Div也被定位過，那么此時的坐標(biāo)原點(diǎn)就不是頁面的左上角，而是這個父層Div的左上角。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）10小試身手預(yù)備知識：定位方

6、式2 position的4種定位模式 relative（相對）如果設(shè)置一個Div相對定位，可以通過設(shè)置其top、left值，使其相對于原來它所在的位置向下、向右進(jìn)行移動，移動的距離就是設(shè)置的top、left值。頁面中其他的元素不會占據(jù)其偏移后留下的空白空間，就像該元素仍在原位一樣。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）11小試身手預(yù)備知識：定位方式2 position的4種定位模式 static（靜態(tài)）如果設(shè)置一個Div靜態(tài)定位，靜態(tài)定位是Div的默認(rèn)狀態(tài)，表示Div保持在原來應(yīng)該在的位置上，即該值沒有任何移動的效果。 fixed（固定）如果設(shè)置一個Div固定定位，

7、可以通過設(shè)置其top、left值，使其固定在顯示屏的某個位置上，即使?jié)L動瀏覽器時，該元素也固定不變，不會跟著移動位置。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）12相對定位和絕對定位的比較 相對定位relative絕對定位absolute定位基準(zhǔn)以它自己原來的位置為基準(zhǔn)以距離它最近的設(shè)置了定位屬性的父級元素為定位基準(zhǔn)，若它所有的父元素都沒設(shè)置定位屬性，則以瀏覽器窗口為定位基準(zhǔn)原來的位置還占用著原來的位置，未脫離標(biāo)準(zhǔn)流不占用其原來的位置，已經(jīng)脫離標(biāo)準(zhǔn)流，其它元素就當(dāng)它不存在一樣深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）13制作流程網(wǎng)頁設(shè)計與制作實(shí)用

8、教程（第3版）深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室14任務(wù)1：利用Div構(gòu)建頁面整體框架任務(wù)4：利用CSS美化Div任務(wù)3：利用CSS定位Div任務(wù)2：在Div中插入頁面元素任務(wù)1 利用Div構(gòu)建頁面的整體框架網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室151創(chuàng)建Div2在“display”Div中嵌套插入子Div在“content”Div中嵌套插入子DivSTEP1：創(chuàng)建Div深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）16插入Div，并將其ID定義為banner。依次創(chuàng)建Div“navigation”、“display”、“content”、“fo

9、oter”。STEP2：在“display”Div中嵌套插入子Div深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）17在“display”Div中插入子Div，并將其ID定義為dis-flash。在“display”Div中插入子Div“dis-text”。STEP3：在“content”Div中嵌套插入子Div深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）18在“content”Div中插入Div，并將其ID定義為con-left。任務(wù)2 在Div中插入頁面元素網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室191在“banner”D

10、iv中插入圖像2在“navigation”Div中插入導(dǎo)航條列表3在“display”Div中插入頁面元素4在“content”Div中插入頁面元素5在“footer”Div中插入頁面元素STEP1：在“banner”Div中插入圖像深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）20在“banner”Div中插入“banner.gif”圖像。STEP2：在“navigation”Div中插入導(dǎo)航條列表深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）21在“navigation”Div中插入導(dǎo)航條列表。STEP3：在“display”Div中插入頁面元素深圳

11、職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）22在“dis-flash”Div中插入Flash動畫。在“dis-text”Div中輸入文本。STEP4：在“content”Div中插入頁面元素深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）23在“con-left”Div中插入頁面元素。在“con-main”Div中插入頁面元素。在“con-right”Div中插入頁面元素。STEP5：在“footer”Div中插入頁面元素深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）24在“footer”Div中插入頁面元素。任務(wù)3 利用CSS定位Di

12、v網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室251定位“banner”、“navigation”、“display”及“content”Div居中對齊2定位“footer”Div，設(shè)置寬度值為100%3定位“display”Div中的“dis-flash”Div與“dis-text”Div兩列布局4定位“content”Div中3個Div子元素呈三列布局STEP1：定位“banner”、“navigation”、“display”及 “content”Div居中對齊深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）26設(shè)置“banner”Div的widt

13、h、height、padding及margin值，使其居中顯示。設(shè)置“navigation”Div的width、height、padding、margin值，使其居中顯示。設(shè)置“display”Div的width、height、padding、margin值，使其居中顯示。設(shè)置“content”Div的width、height、padding和margin值，使其居中顯示。STEP2：定位“footer”Div，設(shè)置寬度值為100%深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）27設(shè)置“footer”Div的width值為100%。STEP3：定位“display”Div中

14、的“dis-flash”Div與“dis-text”Div兩列布局深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）28設(shè)置“dis-flash”Div的屬性值，使其浮動左對齊。設(shè)置“dis-text”Div的屬性值，使其浮動右對齊。設(shè)置“content”Div的“clear”屬性值。STEP4：定位“content”Div中3個Div子元素呈三列布局深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）29設(shè)置“con-left”Div的width、height、padding及margin值。設(shè)置“con- main”Div為相對定位，使其定位在“con-lef

15、t”Div的右側(cè)。設(shè)置“con-right”Div為相對定位，使其定位在“con-main”Div的右側(cè)。任務(wù)4 利用CSS美化Div以及其中的頁面元素深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）301在“navigation”Div中制作水平導(dǎo)航條2為“display”Div設(shè)置背景3美化“content”Div中的頁面元素4為“footer”Div設(shè)置上邊框及背景顏色STEP1：在“navigation”Div中制作水平導(dǎo)航條深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）31為“navigation”Div設(shè)置背景。制作水平導(dǎo)航條。STEP2：為“display”Div設(shè)置背景為“display”Div設(shè)置背景。深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）32設(shè)置“con-leftone”Div的圓角背景。設(shè)置“con-lefttwo”的圓角背景。美化“con-main”Div中的文本。設(shè)置“con-rightone”、“con-righttwo”、“con-rightthree”Div的圓角背景。STEP3：美化“content”Div中的頁面元素深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）33STEP4：為“footer”Div設(shè)置上邊框及背景顏色為“footer”Div設(shè)