版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
第7章網(wǎng)頁布局
當(dāng)遨游Internet時，一幅幅漂亮的網(wǎng)頁令人流連忘返，網(wǎng)頁的精彩和色彩的搭配、文字的變化、圖片的處理等關(guān)系密切，除此之外，還有一個非常重要的因素——網(wǎng)頁的布局。本章介紹用Dreamweaver進(jìn)行網(wǎng)頁布局的方法和技巧，主要內(nèi)容有：使用布局模式進(jìn)行布局利用層進(jìn)行布局利用表格＋CSS進(jìn)行布局利用DIV＋CSS進(jìn)行布局第7章網(wǎng)頁布局當(dāng)遨游Internet時，一幅幅7.1使用布局模式前面學(xué)習(xí)了利用表格布局頁面的方法，利用表格直接布局網(wǎng)頁元素靈活性不強(qiáng)，比如無法精確定位網(wǎng)頁內(nèi)容，對網(wǎng)頁版面進(jìn)行調(diào)整時，也不很方便。為了提高表格布局的靈活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計網(wǎng)頁，同時也使網(wǎng)頁布局更加高效。7.1使用布局模式前面學(xué)習(xí)了利用表格布局頁面的方法，利用7.1.1在布局模式下繪制表格1．切換布局模式在【插入】工具欄上選擇【布局】類別。在右邊的工具欄上單擊【布局】按鈕，彈出一個【從布局模式開始】對話框。按【確定】按鈕即進(jìn)入“布局模式”中。2．繪制布局表格在工具欄的【布局】類別中，單擊【布局表格】按鈕。鼠標(biāo)移到頁面時指針變?yōu)榧犹枴?”。拖動鼠標(biāo)繪制一個布局表格。3．繪制布局單元格在工具欄的【布局】類別中，單擊【繪制布局單元格】按鈕。鼠標(biāo)移到布局表格上或者網(wǎng)頁內(nèi)容下邊的空白處時指針變?yōu)榧犹枴?”。拖動鼠標(biāo)繪制一個布局單元格。4．繪制嵌套布局表格繪制嵌套布局表格，就是將一個布局表格繪制在另一個布局表格中。對外部表格所進(jìn)行的更改不會影響嵌套表格中的單元格。7.1.1在布局模式下繪制表格1．切換布局模式7.1.2設(shè)置布局表格布局表格是使用布局模式的基礎(chǔ)，進(jìn)入布局模式首先要做的就是要插入一個布局表格，然后設(shè)置尺寸、背景等屬性，另外布局表格還有個特有的屬性——“自動伸展”也需要進(jìn)行設(shè)置。1．設(shè)置布局表格的大小2．設(shè)置布局表格自動伸展7.1.2設(shè)置布局表格布局表格是使用布局模式的基礎(chǔ)，進(jìn)入布7.1.3設(shè)置布局單元格在布局模式中，光有布局表格是不夠的，布局表格內(nèi)部不能直接插入頁面內(nèi)容，必須先添加布局單元格，然后再在布局單元格內(nèi)部插入頁面內(nèi)容。本小節(jié)講解布局單元格的設(shè)置。1．設(shè)置布局單元格的位置2．設(shè)置布局單元格內(nèi)容的格式3．為布局單元格添加間隔圖像7.1.3設(shè)置布局單元格在布局模式中，光有布局表格是不夠的7.1.4課堂實例――用布局表格布局網(wǎng)站主頁要設(shè)計一個精美的網(wǎng)頁，先要規(guī)劃好版式。網(wǎng)頁中最常用的版式類似于報刊，這種版式采用規(guī)范的、理性的分割方法，把網(wǎng)頁分成豎向通欄、雙欄、三欄、四欄或橫向的通欄、雙欄、三欄、四欄等。一般以豎向分欄為多，這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。1．繪制網(wǎng)頁頂部布局2．布局網(wǎng)頁主體部分布局3．繪制網(wǎng)頁底部布局7.1.4課堂實例――用布局表格布局網(wǎng)站主頁要設(shè)計一個精美7.2應(yīng)用層布局網(wǎng)頁層（Layer）是一種HTML頁面元素，它的功能強(qiáng)大，可以創(chuàng)建復(fù)雜的頁面布局。層提供了一種在網(wǎng)頁上比較自由地進(jìn)行布局和設(shè)計的途徑，在進(jìn)行頁面布局時，可以任意調(diào)整層的大小、背景、疊放順序等，如同在繪圖軟件中作圖一樣方便。7.2應(yīng)用層布局網(wǎng)頁層（Layer）是一種HTML頁7.2.1制作層在Dreamweaver的“標(biāo)準(zhǔn)”模式下，利用“布局”工具欄上的“繪制層”按鈕可以繪制層。1．插入層2．為層添加內(nèi)容3．層的可見性4．層的重疊7.2.1制作層在Dreamweaver的“標(biāo)準(zhǔn)”模式下，7.2.2層屬性詳解1．單個層的層屬性2．多個層的層屬性7.2.2層屬性詳解1．單個層的層屬性7.2.3嵌套層嵌套層是指在層內(nèi)部的子層，當(dāng)移動層的時候，其內(nèi)部的嵌套層也會隨之移動。制作嵌套層有兩種方式，一種是在層內(nèi)部新建嵌套層，另外一種是將已經(jīng)存在的層添加為另外一個層的嵌套層。1．添加嵌套層2．設(shè)置層之間的嵌套關(guān)系7.2.3嵌套層嵌套層是指在層內(nèi)部的子層，當(dāng)移動層的時候，7.2.4層HTML代碼當(dāng)在網(wǎng)頁文檔中創(chuàng)建層時，Dreamweaver將在代碼視圖中自動插入該層對應(yīng)的HTML代碼。當(dāng)在Dreamweaver中使用工具欄上的【繪制層】按鈕繪制一個層時，在設(shè)計視圖中，該層會顯示在繪制它的當(dāng)前位置；但在代碼視圖中，Dreamweaver將在頁開頭且緊接在<body>標(biāo)簽之后插入該層的代碼，如圖所示。7.2.4層HTML代碼當(dāng)在網(wǎng)頁文檔中創(chuàng)建層時，Dream層CSS樣式層標(biāo)簽圖7-57用繪制層的方法時層HTML代碼的位置層CSS樣式層標(biāo)簽圖7-57用繪制層的方法時層HTML代碼7.2.5使用輔助工具精確定位
網(wǎng)頁元素當(dāng)頁面內(nèi)容越來越復(fù)雜時，尤其使用了大量圖片時，頁面內(nèi)容的精確定位就會成為一個大問題，Dreamweaver8提供了相當(dāng)豐富的頁面內(nèi)容功能來解決這個問題，比如使用輔助線、視圖的縮放工具和使用視圖的選取工具等。1．垂直輔助線2．水平輔助線3．縮放和選取工具7.2.5使用輔助工具精確定位
網(wǎng)頁元素當(dāng)頁面內(nèi)容越來越復(fù)雜7.2.6表格和層的相互轉(zhuǎn)換層的主要特點是操作比較靈活，比如可以通過拖動任意設(shè)置層在頁面中的位置，而表格的主要優(yōu)勢是比較整潔，布局清晰。早期版本的瀏覽器無法顯示層，但能夠顯示表格。為了靈活應(yīng)用表格和層這兩種頁面布局手段，Dreamweaver8提供了層和表格之間相互轉(zhuǎn)換的方法。1．將層轉(zhuǎn)換成表格2．將表格轉(zhuǎn)換成層7.2.6表格和層的相互轉(zhuǎn)換層的主要特點是操作比較靈活，比7.3課堂實例――用層布局
網(wǎng)站首頁前面學(xué)習(xí)了繪制層和編輯層的方法和技巧，本節(jié)利用層布局一個個性化的網(wǎng)站首頁，通過這個具體實例進(jìn)一步學(xué)習(xí)層的應(yīng)用。7.3課堂實例――用層布局
網(wǎng)站首頁前面學(xué)習(xí)了繪制層和編輯7.3.1實例效果這是一個個人網(wǎng)站首頁，充滿個性化的頁面效果活潑可愛，如圖7-79所示。利用層來布局具有個性化的網(wǎng)頁，靈活性更強(qiáng)，更容易設(shè)計布局。7.3.1實例效果這是一個個人網(wǎng)站首頁，充滿個性化的頁面效7.3.2制作步驟1．使用跟蹤圖像輔助頁面的布局2．布局頁面頂部3．布局左側(cè)的導(dǎo)航條及友情鏈接4．布局右邊的主體部分5．布局頁面的底部信息部分7.3.2制作步驟1．使用跟蹤圖像輔助頁面的布局7.4課堂實例――表格
＋CSS布局表格＋CSS布局可以使設(shè)計的網(wǎng)頁結(jié)構(gòu)更加合理，更便于維護(hù)和更改網(wǎng)頁的樣式，但是從本質(zhì)上講，這種布局網(wǎng)頁的方式只是從傳統(tǒng)的網(wǎng)頁設(shè)計技術(shù)到符合Web2.0標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計技術(shù)一種過渡。7.4課堂實例――表格
＋CSS布局表格＋CSS布局可以使7.4.1實例效果本節(jié)通過一個實例來講解一下用表格＋CSS布局的方法。如圖7-87所示是本實例的最終效果。這是在網(wǎng)站首頁布局中經(jīng)常會看到的局部布局效果，位置一般在網(wǎng)頁的兩側(cè)。圖7-87表格＋CSS布局實例效果7.4.1實例效果本節(jié)通過一個實例來講解一下用表格＋CSS針對這個布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個3行1列的表格，然后直接設(shè)置表格和每個單元格的屬性。表格＋CSS的布局方法不是這樣。具體方法是，先創(chuàng)建一個3行1列的表格，表格和每個單元格的樣式用CSS來控制，示意圖如圖7-88所示。用left_top樣式控制用left_mid樣式控制用left_end樣式控制用left_tdbgall樣式控制表格這里定義了4個CSS類選擇符：.left_tdbgall、.left_top、.left_mid、.left_end，它們分別用來控制表格的樣式和3個單元格的樣式。針對這個布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個3行1列的表格7.4.2制作步驟1．創(chuàng)建CSS文件2．創(chuàng)建網(wǎng)頁文檔7.4.2制作步驟1．創(chuàng)建CSS文件7.5DIV＋CSS布局上一節(jié)用表格＋CSS進(jìn)行網(wǎng)頁布局，雖然在某種程度上提高了網(wǎng)站開發(fā)和維護(hù)的效率，但是這種方法畢竟還是傳統(tǒng)的網(wǎng)頁布局技術(shù)，沒有跳出表格布局的模式。如果網(wǎng)頁布局比較復(fù)雜，那么必然會使用大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容。這時<table>標(biāo)簽、<tr>標(biāo)簽、<td>標(biāo)簽交織在一起，它們之間的關(guān)系變得晦澀難懂。這樣的網(wǎng)頁代碼結(jié)構(gòu)給網(wǎng)站的開發(fā)和維護(hù)帶來了不便。利用DIV＋CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術(shù)。它是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。因為用這種方式排版的網(wǎng)頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽，所以越來越受到網(wǎng)頁開發(fā)者的歡迎。7.5DIV＋CSS布局上一節(jié)用表格＋CSS進(jìn)行網(wǎng)頁布局，7.5.1理解CSS盒子模型網(wǎng)頁中的表格或者其他塊都具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)等基本屬性，一個CSS盒子也都具備這些屬性。如圖7-93所示是一個CSS盒子的示意圖。圖7-93一個CSS盒子7.5.1理解CSS盒子模型網(wǎng)頁中的表格或者其他塊都具備內(nèi)在利用DIV＋CSS布局網(wǎng)頁時，需要利用CSS定義大小不一的CSS盒子以及盒子嵌套。如圖7-94所示是一個網(wǎng)站首頁的CSS盒子布局示意圖。圖7-94CSS布局示意圖從圖7-94可以看出，這個網(wǎng)頁一共設(shè)計了7個盒子。最大的盒子是body{}，這是一個HTML元素，是HTML網(wǎng)頁的主體標(biāo)簽。在body{}盒子中嵌套一個#container{}盒子（這里的#container是一個CSS樣式定義，是一個標(biāo)識選擇符），可以稱這個盒子為頁面容器。在#container{}盒子中有嵌套3個盒子#header{}、#main{}、#bottom{}，這3個盒子分別是網(wǎng)頁的頭部（Banner、Logo、導(dǎo)航條等）、中部（網(wǎng)頁的主體內(nèi)容）、底部（版權(quán)信息等）。#main{}盒子中嵌套兩個盒子#left{}、#right{}，這是一個兩欄的頁面布局，這兩個盒子分別用來容納左欄和右欄的內(nèi)容。在利用DIV＋CSS布局網(wǎng)頁時，需要利用CSS定義大小不一的7.5.2DIV標(biāo)簽的應(yīng)用XHTML是一種在HTML4.0基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，目的是基于XML應(yīng)用。XHTML是一種增強(qiáng)了的HTML，它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。在網(wǎng)頁文檔中，利用DIV標(biāo)簽定義XHTML代碼進(jìn)行網(wǎng)頁布局。在Dreamweaver中將“插入”工具欄切換到“布局”工具欄，可以看到一個“插入Div標(biāo)簽”按鈕，如圖所示。插入Div標(biāo)簽7.5.2DIV標(biāo)簽的應(yīng)用XHTML是一種在HTML4.07.5.3課堂實例――DIV＋CSS布局網(wǎng)站首頁1．實例效果如圖7-103所示是一個網(wǎng)站首頁的CSS盒子布局規(guī)劃。本實例將網(wǎng)頁布局分成網(wǎng)頁頂部（Logo、Banner、導(dǎo)航條）、網(wǎng)頁中部（網(wǎng)頁主體，分成左右兩欄）、網(wǎng)頁底部（版權(quán)信息）三個盒子，其中網(wǎng)頁中部盒子中又裝了左欄和右欄兩個盒子。2．制作步驟圖7-103網(wǎng)站首頁布局7.5.3課堂實例――DIV＋CSS布局網(wǎng)站首頁1．實例效本章習(xí)題
上機(jī)練習(xí)
本章習(xí)題
上機(jī)練習(xí)
練習(xí)1使用布局表格排版網(wǎng)站首頁
在布局模式下，通過使用布局表格設(shè)計一個網(wǎng)站首頁的版式，效果如圖所示。練習(xí)1使用布局表格排版網(wǎng)站首頁在布局模式下，通過使用布局練習(xí)2使用CSS布局網(wǎng)頁表格＋CSS布局和DIV＋CSS布局是目前最常用的CSS布局方法，請嘗試?yán)肅SS布局一個兩欄的網(wǎng)站首頁。練習(xí)2使用CSS布局網(wǎng)頁表格＋CSS布局和DIV＋CSS布第7章網(wǎng)頁布局
當(dāng)遨游Internet時，一幅幅漂亮的網(wǎng)頁令人流連忘返，網(wǎng)頁的精彩和色彩的搭配、文字的變化、圖片的處理等關(guān)系密切，除此之外，還有一個非常重要的因素——網(wǎng)頁的布局。本章介紹用Dreamweaver進(jìn)行網(wǎng)頁布局的方法和技巧，主要內(nèi)容有：使用布局模式進(jìn)行布局利用層進(jìn)行布局利用表格＋CSS進(jìn)行布局利用DIV＋CSS進(jìn)行布局第7章網(wǎng)頁布局當(dāng)遨游Internet時，一幅幅7.1使用布局模式前面學(xué)習(xí)了利用表格布局頁面的方法，利用表格直接布局網(wǎng)頁元素靈活性不強(qiáng)，比如無法精確定位網(wǎng)頁內(nèi)容，對網(wǎng)頁版面進(jìn)行調(diào)整時，也不很方便。為了提高表格布局的靈活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計網(wǎng)頁，同時也使網(wǎng)頁布局更加高效。7.1使用布局模式前面學(xué)習(xí)了利用表格布局頁面的方法，利用7.1.1在布局模式下繪制表格1．切換布局模式在【插入】工具欄上選擇【布局】類別。在右邊的工具欄上單擊【布局】按鈕，彈出一個【從布局模式開始】對話框。按【確定】按鈕即進(jìn)入“布局模式”中。2．繪制布局表格在工具欄的【布局】類別中，單擊【布局表格】按鈕。鼠標(biāo)移到頁面時指針變?yōu)榧犹枴?”。拖動鼠標(biāo)繪制一個布局表格。3．繪制布局單元格在工具欄的【布局】類別中，單擊【繪制布局單元格】按鈕。鼠標(biāo)移到布局表格上或者網(wǎng)頁內(nèi)容下邊的空白處時指針變?yōu)榧犹枴?”。拖動鼠標(biāo)繪制一個布局單元格。4．繪制嵌套布局表格繪制嵌套布局表格，就是將一個布局表格繪制在另一個布局表格中。對外部表格所進(jìn)行的更改不會影響嵌套表格中的單元格。7.1.1在布局模式下繪制表格1．切換布局模式7.1.2設(shè)置布局表格布局表格是使用布局模式的基礎(chǔ)，進(jìn)入布局模式首先要做的就是要插入一個布局表格，然后設(shè)置尺寸、背景等屬性，另外布局表格還有個特有的屬性——“自動伸展”也需要進(jìn)行設(shè)置。1．設(shè)置布局表格的大小2．設(shè)置布局表格自動伸展7.1.2設(shè)置布局表格布局表格是使用布局模式的基礎(chǔ)，進(jìn)入布7.1.3設(shè)置布局單元格在布局模式中，光有布局表格是不夠的，布局表格內(nèi)部不能直接插入頁面內(nèi)容，必須先添加布局單元格，然后再在布局單元格內(nèi)部插入頁面內(nèi)容。本小節(jié)講解布局單元格的設(shè)置。1．設(shè)置布局單元格的位置2．設(shè)置布局單元格內(nèi)容的格式3．為布局單元格添加間隔圖像7.1.3設(shè)置布局單元格在布局模式中，光有布局表格是不夠的7.1.4課堂實例――用布局表格布局網(wǎng)站主頁要設(shè)計一個精美的網(wǎng)頁，先要規(guī)劃好版式。網(wǎng)頁中最常用的版式類似于報刊，這種版式采用規(guī)范的、理性的分割方法，把網(wǎng)頁分成豎向通欄、雙欄、三欄、四欄或橫向的通欄、雙欄、三欄、四欄等。一般以豎向分欄為多，這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。1．繪制網(wǎng)頁頂部布局2．布局網(wǎng)頁主體部分布局3．繪制網(wǎng)頁底部布局7.1.4課堂實例――用布局表格布局網(wǎng)站主頁要設(shè)計一個精美7.2應(yīng)用層布局網(wǎng)頁層（Layer）是一種HTML頁面元素，它的功能強(qiáng)大，可以創(chuàng)建復(fù)雜的頁面布局。層提供了一種在網(wǎng)頁上比較自由地進(jìn)行布局和設(shè)計的途徑，在進(jìn)行頁面布局時，可以任意調(diào)整層的大小、背景、疊放順序等，如同在繪圖軟件中作圖一樣方便。7.2應(yīng)用層布局網(wǎng)頁層（Layer）是一種HTML頁7.2.1制作層在Dreamweaver的“標(biāo)準(zhǔn)”模式下，利用“布局”工具欄上的“繪制層”按鈕可以繪制層。1．插入層2．為層添加內(nèi)容3．層的可見性4．層的重疊7.2.1制作層在Dreamweaver的“標(biāo)準(zhǔn)”模式下，7.2.2層屬性詳解1．單個層的層屬性2．多個層的層屬性7.2.2層屬性詳解1．單個層的層屬性7.2.3嵌套層嵌套層是指在層內(nèi)部的子層，當(dāng)移動層的時候，其內(nèi)部的嵌套層也會隨之移動。制作嵌套層有兩種方式，一種是在層內(nèi)部新建嵌套層，另外一種是將已經(jīng)存在的層添加為另外一個層的嵌套層。1．添加嵌套層2．設(shè)置層之間的嵌套關(guān)系7.2.3嵌套層嵌套層是指在層內(nèi)部的子層，當(dāng)移動層的時候，7.2.4層HTML代碼當(dāng)在網(wǎng)頁文檔中創(chuàng)建層時，Dreamweaver將在代碼視圖中自動插入該層對應(yīng)的HTML代碼。當(dāng)在Dreamweaver中使用工具欄上的【繪制層】按鈕繪制一個層時，在設(shè)計視圖中，該層會顯示在繪制它的當(dāng)前位置；但在代碼視圖中，Dreamweaver將在頁開頭且緊接在<body>標(biāo)簽之后插入該層的代碼，如圖所示。7.2.4層HTML代碼當(dāng)在網(wǎng)頁文檔中創(chuàng)建層時，Dream層CSS樣式層標(biāo)簽圖7-57用繪制層的方法時層HTML代碼的位置層CSS樣式層標(biāo)簽圖7-57用繪制層的方法時層HTML代碼7.2.5使用輔助工具精確定位
網(wǎng)頁元素當(dāng)頁面內(nèi)容越來越復(fù)雜時，尤其使用了大量圖片時，頁面內(nèi)容的精確定位就會成為一個大問題，Dreamweaver8提供了相當(dāng)豐富的頁面內(nèi)容功能來解決這個問題，比如使用輔助線、視圖的縮放工具和使用視圖的選取工具等。1．垂直輔助線2．水平輔助線3．縮放和選取工具7.2.5使用輔助工具精確定位
網(wǎng)頁元素當(dāng)頁面內(nèi)容越來越復(fù)雜7.2.6表格和層的相互轉(zhuǎn)換層的主要特點是操作比較靈活，比如可以通過拖動任意設(shè)置層在頁面中的位置，而表格的主要優(yōu)勢是比較整潔，布局清晰。早期版本的瀏覽器無法顯示層，但能夠顯示表格。為了靈活應(yīng)用表格和層這兩種頁面布局手段，Dreamweaver8提供了層和表格之間相互轉(zhuǎn)換的方法。1．將層轉(zhuǎn)換成表格2．將表格轉(zhuǎn)換成層7.2.6表格和層的相互轉(zhuǎn)換層的主要特點是操作比較靈活，比7.3課堂實例――用層布局
網(wǎng)站首頁前面學(xué)習(xí)了繪制層和編輯層的方法和技巧，本節(jié)利用層布局一個個性化的網(wǎng)站首頁，通過這個具體實例進(jìn)一步學(xué)習(xí)層的應(yīng)用。7.3課堂實例――用層布局
網(wǎng)站首頁前面學(xué)習(xí)了繪制層和編輯7.3.1實例效果這是一個個人網(wǎng)站首頁，充滿個性化的頁面效果活潑可愛，如圖7-79所示。利用層來布局具有個性化的網(wǎng)頁，靈活性更強(qiáng)，更容易設(shè)計布局。7.3.1實例效果這是一個個人網(wǎng)站首頁，充滿個性化的頁面效7.3.2制作步驟1．使用跟蹤圖像輔助頁面的布局2．布局頁面頂部3．布局左側(cè)的導(dǎo)航條及友情鏈接4．布局右邊的主體部分5．布局頁面的底部信息部分7.3.2制作步驟1．使用跟蹤圖像輔助頁面的布局7.4課堂實例――表格
＋CSS布局表格＋CSS布局可以使設(shè)計的網(wǎng)頁結(jié)構(gòu)更加合理，更便于維護(hù)和更改網(wǎng)頁的樣式，但是從本質(zhì)上講，這種布局網(wǎng)頁的方式只是從傳統(tǒng)的網(wǎng)頁設(shè)計技術(shù)到符合Web2.0標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計技術(shù)一種過渡。7.4課堂實例――表格
＋CSS布局表格＋CSS布局可以使7.4.1實例效果本節(jié)通過一個實例來講解一下用表格＋CSS布局的方法。如圖7-87所示是本實例的最終效果。這是在網(wǎng)站首頁布局中經(jīng)常會看到的局部布局效果，位置一般在網(wǎng)頁的兩側(cè)。圖7-87表格＋CSS布局實例效果7.4.1實例效果本節(jié)通過一個實例來講解一下用表格＋CSS針對這個布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個3行1列的表格，然后直接設(shè)置表格和每個單元格的屬性。表格＋CSS的布局方法不是這樣。具體方法是，先創(chuàng)建一個3行1列的表格，表格和每個單元格的樣式用CSS來控制，示意圖如圖7-88所示。用left_top樣式控制用left_mid樣式控制用left_end樣式控制用left_tdbgall樣式控制表格這里定義了4個CSS類選擇符：.left_tdbgall、.left_top、.left_mid、.left_end，它們分別用來控制表格的樣式和3個單元格的樣式。針對這個布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個3行1列的表格7.4.2制作步驟1．創(chuàng)建CSS文件2．創(chuàng)建網(wǎng)頁文檔7.4.2制作步驟1．創(chuàng)建CSS文件7.5DIV＋CSS布局上一節(jié)用表格＋CSS進(jìn)行網(wǎng)頁布局，雖然在某種程度上提高了網(wǎng)站開發(fā)和維護(hù)的效率，但是這種方法畢竟還是傳統(tǒng)的網(wǎng)頁布局技術(shù)，沒有跳出表格布局的模式。如果網(wǎng)頁布局比較復(fù)雜，那么必然會使用大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容。這時<table>標(biāo)簽、<tr>標(biāo)簽、<td>標(biāo)簽交織在一起，它們之間的關(guān)系變得晦澀難懂。這樣的網(wǎng)頁代碼結(jié)構(gòu)給網(wǎng)站的開發(fā)和維護(hù)帶來了不便。利用DIV＋CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術(shù)。它是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。因為用這種方式排版的網(wǎng)頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽，所以越來越受到網(wǎng)頁開發(fā)者的歡迎。7.5DIV＋CSS布局上一節(jié)用表格＋CSS進(jìn)行網(wǎng)頁布局，7.5.1理解CSS盒子模型網(wǎng)頁中的表格或者其他塊都具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)等基本屬性，一個CSS盒子也都具備這些屬性。如圖7-93所示是一個CSS盒子的示意圖。圖7-93一個CSS盒子7.5.1理解CSS盒子模型網(wǎng)頁中的表格或者其他塊都具備內(nèi)在利用DIV＋CSS布局網(wǎng)頁時，需要利用CSS定義大小不一的CSS盒子以及盒子嵌套。如圖7-94所示是一個網(wǎng)站首頁的CSS盒子布局示意圖。圖7-94CSS布局示意圖從圖7-94可以看出
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- T-ZZB Q071-2024 酶底物法微生物智能培養(yǎng)計數(shù)一體機(jī)
- T-ZJHIA 16-2024 特殊醫(yī)學(xué)用途配方食品臨床營養(yǎng)治療營養(yǎng)篩查數(shù)據(jù)集
- 二零二五年度離婚協(xié)議中夫妻共同財產(chǎn)清算補充協(xié)議
- 二零二五年度直播帶貨主播合作權(quán)益保障合同
- 2025年度智能制造合作伙伴協(xié)議書
- 二零二五年度木制家具生產(chǎn)廠木工用工協(xié)議書
- 二零二五年度車輛掛靠運輸合同車輛運輸合同安全保障協(xié)議
- 二零二五年度個人租賃帶太陽能熱水系統(tǒng)住宅合同
- 二零二五年度餐飲行業(yè)知識產(chǎn)權(quán)保護(hù)協(xié)議
- 二零二五年度兼職攝影師聘用合同模板
- 家校共育之道
- DeepSeek入門寶典培訓(xùn)課件
- 西安2025年陜西西安音樂學(xué)院專職輔導(dǎo)員招聘2人筆試歷年參考題庫附帶答案詳解
- 《作文中間技巧》課件
- 廣東省2025年中考物理仿真模擬卷（深圳）附答案
- 2025屆八省聯(lián)考 新高考適應(yīng)性聯(lián)考英語試題（原卷版）
- 新蘇教版一年級下冊數(shù)學(xué)第1單元第3課時《8、7加幾》作業(yè)
- 2024年山東電力高等專科學(xué)校高職單招職業(yè)技能測驗歷年參考題庫（頻考版）含答案解析
- 2024年電力交易員（高級工）職業(yè)鑒定理論考試題庫（單選題、多選題、判斷題）
- 《平面廣告賞析》課件
- 【公開課】同一直線上二力的合成+課件+2024-2025學(xué)年+人教版（2024）初中物理八年級下冊+
評論
0/150
提交評論