網(wǎng)頁(yè)制作課件7網(wǎng)頁(yè)布局_第1頁(yè)
網(wǎng)頁(yè)制作課件7網(wǎng)頁(yè)布局_第2頁(yè)
網(wǎng)頁(yè)制作課件7網(wǎng)頁(yè)布局_第3頁(yè)
網(wǎng)頁(yè)制作課件7網(wǎng)頁(yè)布局_第4頁(yè)
網(wǎng)頁(yè)制作課件7網(wǎng)頁(yè)布局_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章網(wǎng)頁(yè)布局

當(dāng)遨游Internet時(shí)，一幅幅漂亮的網(wǎng)頁(yè)令人流連忘返，網(wǎng)頁(yè)的精彩和色彩的搭配、文字的變化、圖片的處理等關(guān)系密切，除此之外，還有一個(gè)非常重要的因素——網(wǎng)頁(yè)的布局。本章介紹用Dreamweaver進(jìn)行網(wǎng)頁(yè)布局的方法和技巧，主要內(nèi)容有：使用布局模式進(jìn)行布局利用層進(jìn)行布局利用表格＋CSS進(jìn)行布局利用DIV＋CSS進(jìn)行布局第7章網(wǎng)頁(yè)布局當(dāng)遨游Internet時(shí)，一幅幅7.1使用布局模式前面學(xué)習(xí)了利用表格布局頁(yè)面的方法，利用表格直接布局網(wǎng)頁(yè)元素靈活性不強(qiáng)，比如無(wú)法精確定位網(wǎng)頁(yè)內(nèi)容，對(duì)網(wǎng)頁(yè)版面進(jìn)行調(diào)整時(shí)，也不很方便。為了提高表格布局的靈活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)網(wǎng)頁(yè)，同時(shí)也使網(wǎng)頁(yè)布局更加高效。7.1使用布局模式前面學(xué)習(xí)了利用表格布局頁(yè)面的方法，利用7.1.1在布局模式下繪制表格1．切換布局模式在【插入】工具欄上選擇【布局】類(lèi)別。在右邊的工具欄上單擊【布局】按鈕，彈出一個(gè)【從布局模式開(kāi)始】對(duì)話框。按【確定】按鈕即進(jìn)入“布局模式”中。2．繪制布局表格在工具欄的【布局】類(lèi)別中，單擊【布局表格】按鈕。鼠標(biāo)移到頁(yè)面時(shí)指針變?yōu)榧犹?hào)“+”。拖動(dòng)鼠標(biāo)繪制一個(gè)布局表格。3．繪制布局單元格在工具欄的【布局】類(lèi)別中，單擊【繪制布局單元格】按鈕。鼠標(biāo)移到布局表格上或者網(wǎng)頁(yè)內(nèi)容下邊的空白處時(shí)指針變?yōu)榧犹?hào)“+”。拖動(dòng)鼠標(biāo)繪制一個(gè)布局單元格。4．繪制嵌套布局表格繪制嵌套布局表格，就是將一個(gè)布局表格繪制在另一個(gè)布局表格中。對(duì)外部表格所進(jìn)行的更改不會(huì)影響嵌套表格中的單元格。7.1.1在布局模式下繪制表格1．切換布局模式7.1.2設(shè)置布局表格布局表格是使用布局模式的基礎(chǔ)，進(jìn)入布局模式首先要做的就是要插入一個(gè)布局表格，然后設(shè)置尺寸、背景等屬性，另外布局表格還有個(gè)特有的屬性——“自動(dòng)伸展”也需要進(jìn)行設(shè)置。1．設(shè)置布局表格的大小2．設(shè)置布局表格自動(dòng)伸展7.1.2設(shè)置布局表格布局表格是使用布局模式的基礎(chǔ)，進(jìn)入布7.1.3設(shè)置布局單元格在布局模式中，光有布局表格是不夠的，布局表格內(nèi)部不能直接插入頁(yè)面內(nèi)容，必須先添加布局單元格，然后再在布局單元格內(nèi)部插入頁(yè)面內(nèi)容。本小節(jié)講解布局單元格的設(shè)置。1．設(shè)置布局單元格的位置2．設(shè)置布局單元格內(nèi)容的格式3．為布局單元格添加間隔圖像7.1.3設(shè)置布局單元格在布局模式中，光有布局表格是不夠的7.1.4課堂實(shí)例――用布局表格布局網(wǎng)站主頁(yè)要設(shè)計(jì)一個(gè)精美的網(wǎng)頁(yè)，先要規(guī)劃好版式。網(wǎng)頁(yè)中最常用的版式類(lèi)似于報(bào)刊，這種版式采用規(guī)范的、理性的分割方法，把網(wǎng)頁(yè)分成豎向通欄、雙欄、三欄、四欄或橫向的通欄、雙欄、三欄、四欄等。一般以豎向分欄為多，這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。1．繪制網(wǎng)頁(yè)頂部布局2．布局網(wǎng)頁(yè)主體部分布局3．繪制網(wǎng)頁(yè)底部布局7.1.4課堂實(shí)例――用布局表格布局網(wǎng)站主頁(yè)要設(shè)計(jì)一個(gè)精美7.2應(yīng)用層布局網(wǎng)頁(yè)層（Layer）是一種HTML頁(yè)面元素，它的功能強(qiáng)大，可以創(chuàng)建復(fù)雜的頁(yè)面布局。層提供了一種在網(wǎng)頁(yè)上比較自由地進(jìn)行布局和設(shè)計(jì)的途徑，在進(jìn)行頁(yè)面布局時(shí)，可以任意調(diào)整層的大小、背景、疊放順序等，如同在繪圖軟件中作圖一樣方便。7.2應(yīng)用層布局網(wǎng)頁(yè)層（Layer）是一種HTML頁(yè)7.2.1制作層在Dreamweaver的“標(biāo)準(zhǔn)”模式下，利用“布局”工具欄上的“繪制層”按鈕可以繪制層。1．插入層2．為層添加內(nèi)容3．層的可見(jiàn)性4．層的重疊7.2.1制作層在Dreamweaver的“標(biāo)準(zhǔn)”模式下，7.2.2層屬性詳解1．單個(gè)層的層屬性2．多個(gè)層的層屬性7.2.2層屬性詳解1．單個(gè)層的層屬性7.2.3嵌套層嵌套層是指在層內(nèi)部的子層，當(dāng)移動(dòng)層的時(shí)候，其內(nèi)部的嵌套層也會(huì)隨之移動(dòng)。制作嵌套層有兩種方式，一種是在層內(nèi)部新建嵌套層，另外一種是將已經(jīng)存在的層添加為另外一個(gè)層的嵌套層。1．添加嵌套層2．設(shè)置層之間的嵌套關(guān)系7.2.3嵌套層嵌套層是指在層內(nèi)部的子層，當(dāng)移動(dòng)層的時(shí)候，7.2.4層HTML代碼當(dāng)在網(wǎng)頁(yè)文檔中創(chuàng)建層時(shí)，Dreamweaver將在代碼視圖中自動(dòng)插入該層對(duì)應(yīng)的HTML代碼。當(dāng)在Dreamweaver中使用工具欄上的【繪制層】按鈕繪制一個(gè)層時(shí)，在設(shè)計(jì)視圖中，該層會(huì)顯示在繪制它的當(dāng)前位置；但在代碼視圖中，Dreamweaver將在頁(yè)開(kāi)頭且緊接在<body>標(biāo)簽之后插入該層的代碼，如圖所示。7.2.4層HTML代碼當(dāng)在網(wǎng)頁(yè)文檔中創(chuàng)建層時(shí)，Dream層CSS樣式層標(biāo)簽圖7-57用繪制層的方法時(shí)層HTML代碼的位置層CSS樣式層標(biāo)簽圖7-57用繪制層的方法時(shí)層HTML代碼7.2.5使用輔助工具精確定位

網(wǎng)頁(yè)元素當(dāng)頁(yè)面內(nèi)容越來(lái)越復(fù)雜時(shí)，尤其使用了大量圖片時(shí)，頁(yè)面內(nèi)容的精確定位就會(huì)成為一個(gè)大問(wèn)題，Dreamweaver8提供了相當(dāng)豐富的頁(yè)面內(nèi)容功能來(lái)解決這個(gè)問(wèn)題，比如使用輔助線、視圖的縮放工具和使用視圖的選取工具等。1．垂直輔助線2．水平輔助線3．縮放和選取工具7.2.5使用輔助工具精確定位

網(wǎng)頁(yè)元素當(dāng)頁(yè)面內(nèi)容越來(lái)越復(fù)雜7.2.6表格和層的相互轉(zhuǎn)換層的主要特點(diǎn)是操作比較靈活，比如可以通過(guò)拖動(dòng)任意設(shè)置層在頁(yè)面中的位置，而表格的主要優(yōu)勢(shì)是比較整潔，布局清晰。早期版本的瀏覽器無(wú)法顯示層，但能夠顯示表格。為了靈活應(yīng)用表格和層這兩種頁(yè)面布局手段，Dreamweaver8提供了層和表格之間相互轉(zhuǎn)換的方法。1．將層轉(zhuǎn)換成表格2．將表格轉(zhuǎn)換成層7.2.6表格和層的相互轉(zhuǎn)換層的主要特點(diǎn)是操作比較靈活，比7.3課堂實(shí)例――用層布局

網(wǎng)站首頁(yè)前面學(xué)習(xí)了繪制層和編輯層的方法和技巧，本節(jié)利用層布局一個(gè)個(gè)性化的網(wǎng)站首頁(yè)，通過(guò)這個(gè)具體實(shí)例進(jìn)一步學(xué)習(xí)層的應(yīng)用。7.3課堂實(shí)例――用層布局

網(wǎng)站首頁(yè)前面學(xué)習(xí)了繪制層和編輯7.3.1實(shí)例效果這是一個(gè)個(gè)人網(wǎng)站首頁(yè)，充滿個(gè)性化的頁(yè)面效果活潑可愛(ài)，如圖7-79所示。利用層來(lái)布局具有個(gè)性化的網(wǎng)頁(yè)，靈活性更強(qiáng)，更容易設(shè)計(jì)布局。7.3.1實(shí)例效果這是一個(gè)個(gè)人網(wǎng)站首頁(yè)，充滿個(gè)性化的頁(yè)面效7.3.2制作步驟1．使用跟蹤圖像輔助頁(yè)面的布局2．布局頁(yè)面頂部3．布局左側(cè)的導(dǎo)航條及友情鏈接4．布局右邊的主體部分5．布局頁(yè)面的底部信息部分7.3.2制作步驟1．使用跟蹤圖像輔助頁(yè)面的布局7.4課堂實(shí)例――表格

＋CSS布局表格＋CSS布局可以使設(shè)計(jì)的網(wǎng)頁(yè)結(jié)構(gòu)更加合理，更便于維護(hù)和更改網(wǎng)頁(yè)的樣式，但是從本質(zhì)上講，這種布局網(wǎng)頁(yè)的方式只是從傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)到符合Web2.0標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)一種過(guò)渡。7.4課堂實(shí)例――表格

＋CSS布局表格＋CSS布局可以使7.4.1實(shí)例效果本節(jié)通過(guò)一個(gè)實(shí)例來(lái)講解一下用表格＋CSS布局的方法。如圖7-87所示是本實(shí)例的最終效果。這是在網(wǎng)站首頁(yè)布局中經(jīng)常會(huì)看到的局部布局效果，位置一般在網(wǎng)頁(yè)的兩側(cè)。圖7-87表格＋CSS布局實(shí)例效果7.4.1實(shí)例效果本節(jié)通過(guò)一個(gè)實(shí)例來(lái)講解一下用表格＋CSS針對(duì)這個(gè)布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個(gè)3行1列的表格，然后直接設(shè)置表格和每個(gè)單元格的屬性。表格＋CSS的布局方法不是這樣。具體方法是，先創(chuàng)建一個(gè)3行1列的表格，表格和每個(gè)單元格的樣式用CSS來(lái)控制，示意圖如圖7-88所示。用left_top樣式控制用left_mid樣式控制用left_end樣式控制用left_tdbgall樣式控制表格這里定義了4個(gè)CSS類(lèi)選擇符：.left_tdbgall、.left_top、.left_mid、.left_end，它們分別用來(lái)控制表格的樣式和3個(gè)單元格的樣式。針對(duì)這個(gè)布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個(gè)3行1列的表格7.4.2制作步驟1．創(chuàng)建CSS文件2．創(chuàng)建網(wǎng)頁(yè)文檔7.4.2制作步驟1．創(chuàng)建CSS文件7.5DIV＋CSS布局上一節(jié)用表格＋CSS進(jìn)行網(wǎng)頁(yè)布局，雖然在某種程度上提高了網(wǎng)站開(kāi)發(fā)和維護(hù)的效率，但是這種方法畢竟還是傳統(tǒng)的網(wǎng)頁(yè)布局技術(shù)，沒(méi)有跳出表格布局的模式。如果網(wǎng)頁(yè)布局比較復(fù)雜，那么必然會(huì)使用大小不一的表格和表格嵌套來(lái)定位排版網(wǎng)頁(yè)內(nèi)容。這時(shí)<table>標(biāo)簽、<tr>標(biāo)簽、<td>標(biāo)簽交織在一起，它們之間的關(guān)系變得晦澀難懂。這樣的網(wǎng)頁(yè)代碼結(jié)構(gòu)給網(wǎng)站的開(kāi)發(fā)和維護(hù)帶來(lái)了不便。利用DIV＋CSS布局網(wǎng)頁(yè)是一種盒子模式的開(kāi)發(fā)技術(shù)。它是通過(guò)由CSS定義的大小不一的盒子和盒子嵌套來(lái)編排網(wǎng)頁(yè)。因?yàn)橛眠@種方式排版的網(wǎng)頁(yè)代碼簡(jiǎn)潔，更新方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽，所以越來(lái)越受到網(wǎng)頁(yè)開(kāi)發(fā)者的歡迎。7.5DIV＋CSS布局上一節(jié)用表格＋CSS進(jìn)行網(wǎng)頁(yè)布局，7.5.1理解CSS盒子模型網(wǎng)頁(yè)中的表格或者其他塊都具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)等基本屬性，一個(gè)CSS盒子也都具備這些屬性。如圖7-93所示是一個(gè)CSS盒子的示意圖。圖7-93一個(gè)CSS盒子7.5.1理解CSS盒子模型網(wǎng)頁(yè)中的表格或者其他塊都具備內(nèi)在利用DIV＋CSS布局網(wǎng)頁(yè)時(shí)，需要利用CSS定義大小不一的CSS盒子以及盒子嵌套。如圖7-94所示是一個(gè)網(wǎng)站首頁(yè)的CSS盒子布局示意圖。圖7-94CSS布局示意圖從圖7-94可以看出，這個(gè)網(wǎng)頁(yè)一共設(shè)計(jì)了7個(gè)盒子。最大的盒子是body{}，這是一個(gè)HTML元素，是HTML網(wǎng)頁(yè)的主體標(biāo)簽。在body{}盒子中嵌套一個(gè)#container{}盒子（這里的#container是一個(gè)CSS樣式定義，是一個(gè)標(biāo)識(shí)選擇符），可以稱這個(gè)盒子為頁(yè)面容器。在#container{}盒子中有嵌套3個(gè)盒子#header{}、#main{}、#bottom{}，這3個(gè)盒子分別是網(wǎng)頁(yè)的頭部（Banner、Logo、導(dǎo)航條等）、中部（網(wǎng)頁(yè)的主體內(nèi)容）、底部（版權(quán)信息等）。#main{}盒子中嵌套兩個(gè)盒子#left{}、#right{}，這是一個(gè)兩欄的頁(yè)面布局，這兩個(gè)盒子分別用來(lái)容納左欄和右欄的內(nèi)容。在利用DIV＋CSS布局網(wǎng)頁(yè)時(shí)，需要利用CSS定義大小不一的7.5.2DIV標(biāo)簽的應(yīng)用XHTML是一種在HTML4.0基礎(chǔ)上優(yōu)化和改進(jìn)的新語(yǔ)言，目的是基于XML應(yīng)用。XHTML是一種增強(qiáng)了的HTML，它的可擴(kuò)展性和靈活性將適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用更多的需求。在網(wǎng)頁(yè)文檔中，利用DIV標(biāo)簽定義XHTML代碼進(jìn)行網(wǎng)頁(yè)布局。在Dreamweaver中將“插入”工具欄切換到“布局”工具欄，可以看到一個(gè)“插入Div標(biāo)簽”按鈕，如圖所示。插入Div標(biāo)簽7.5.2DIV標(biāo)簽的應(yīng)用XHTML是一種在HTML4.07.5.3課堂實(shí)例――DIV＋CSS布局網(wǎng)站首頁(yè)1．實(shí)例效果如圖7-103所示是一個(gè)網(wǎng)站首頁(yè)的CSS盒子布局規(guī)劃。本實(shí)例將網(wǎng)頁(yè)布局分成網(wǎng)頁(yè)頂部（Logo、Banner、導(dǎo)航條）、網(wǎng)頁(yè)中部（網(wǎng)頁(yè)主體，分成左右兩欄）、網(wǎng)頁(yè)底部（版權(quán)信息）三個(gè)盒子，其中網(wǎng)頁(yè)中部盒子中又裝了左欄和右欄兩個(gè)盒子。2．制作步驟圖

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論