第3章 網(wǎng)頁的布局教學(xué)課件 網(wǎng)頁制作基礎(chǔ)教程（Dreamweaver CS6 第2版）

第3章網(wǎng)頁的布局教學(xué)課件網(wǎng)頁制作基礎(chǔ)教程（DreamweaverCS6第2版）工信版主編黃洪杰電子工業(yè)出版社網(wǎng)頁制作基礎(chǔ)教程

(DreamweaverCS6第2版)電子教案第3章網(wǎng)頁的布局項(xiàng)目1網(wǎng)頁布局相關(guān)知識當(dāng)我們在網(wǎng)上瀏覽時(shí)，常常對一些網(wǎng)站記憶猶新。有的網(wǎng)站給人一種清新雅致的感覺，有的網(wǎng)站讓人感覺厚重古樸，有的網(wǎng)站讓人輕易就被吸引，有的網(wǎng)站讓人很快找到自己想要的信息……為何會有這么多的不同感受？子項(xiàng)目1網(wǎng)站的風(fēng)格在對網(wǎng)頁插入各種對象、修飾效果前，一定要確定網(wǎng)站的風(fēng)格和網(wǎng)頁的布局。也就是說，要先確定網(wǎng)站的總體風(fēng)格，并對網(wǎng)頁的布局進(jìn)行規(guī)劃，這樣才能保證網(wǎng)站中各網(wǎng)頁的統(tǒng)一。主頁風(fēng)格沒有優(yōu)劣之分，網(wǎng)站的性質(zhì)與風(fēng)格有著根本的區(qū)別。門戶網(wǎng)站采用鮮艷的色彩吸引瀏覽者的注意，而廣告是網(wǎng)站收入的重要來源，所以各種形式的廣告是少不了的。服務(wù)性質(zhì)的網(wǎng)站不必借各種手段吸引瀏覽者。而個(gè)人網(wǎng)站往往突出創(chuàng)意和個(gè)性。子項(xiàng)目2網(wǎng)頁布局實(shí)例

簡單劃分，網(wǎng)頁的布局一般可以分為“同”字型、標(biāo)題正文型、分欄型、Flash型和封面型等?！巴弊中妥禹?xiàng)目2網(wǎng)頁布局實(shí)例

簡單劃分，網(wǎng)頁的布局一般可以分為“同”字型、標(biāo)題正文型、分欄型、Flash型和封面型等?！巴弊中妥禹?xiàng)目2網(wǎng)頁布局實(shí)例

標(biāo)題正文型子項(xiàng)目2網(wǎng)頁布局實(shí)例

分欄型結(jié)構(gòu)子項(xiàng)目2網(wǎng)頁布局實(shí)例

Flash型網(wǎng)站子項(xiàng)目2網(wǎng)頁布局實(shí)例

封面型結(jié)構(gòu)子項(xiàng)目3網(wǎng)頁布局注意事項(xiàng)1.平衡性2.對稱性3.對比性4.疏密度5.反復(fù)性6.韻律感7.顏色搭配子項(xiàng)目4畫出網(wǎng)頁布局草圖項(xiàng)目2使用表格規(guī)劃網(wǎng)頁布局子項(xiàng)目1在網(wǎng)頁中插入表格

在網(wǎng)頁中單擊鼠標(biāo)，確定光標(biāo)的位置。然后單擊“插入”菜單，選擇“表格”命令，輸入行、列的值。子項(xiàng)目1在網(wǎng)頁中插入表格

表格的高度和寬度是可以改變的。將鼠標(biāo)指針移動到框線上，當(dāng)鼠標(biāo)指針改變時(shí)，拖動鼠標(biāo)到合適的位置然后松開就可以了。子項(xiàng)目2制作不規(guī)則表格

1.添加新行、新列使光標(biāo)出現(xiàn)在表格某行中。然后單擊鼠標(biāo)右鍵打開快捷菜單，移動鼠標(biāo)指針到快捷菜單的“表格”上使之彈出子菜單，在子菜單中單擊“插入行”，則插入一行。子項(xiàng)目2制作不規(guī)則表格

2.刪除行或列首先單擊鼠標(biāo)，使光標(biāo)出現(xiàn)在被刪除行中。然后單擊鼠標(biāo)右鍵打開快捷菜單，移動鼠標(biāo)指針到快捷菜單的“表格”上使之彈出子菜單，在子菜單中單擊“刪除行”，則該行被刪除。子項(xiàng)目2制作不規(guī)則表格

3.合并單元格。拖動鼠標(biāo)同時(shí)選中多個(gè)單元格，移動鼠標(biāo)指針到“屬性”面板上，單擊“合并單元格”按鈕，則被選中的單元格被合并。子項(xiàng)目2制作不規(guī)則表格

4.拆分單元格首先單擊鼠標(biāo)，使光標(biāo)出現(xiàn)在被拆分單元格中。移動鼠標(biāo)指針到“屬性”面板上，單擊“拆分單元格”按鈕，打開“拆分單元格”對話框。在“拆分單元格”對話框中，輸入相應(yīng)值，單擊確定。子項(xiàng)目3設(shè)置表格和單元格屬性

對表格進(jìn)行設(shè)置，主要是在“屬性”面板中進(jìn)行，需要注意的是選取表格與選取單元格時(shí)，“屬性”面板的內(nèi)容是不同的。在表格的“屬性”面板中，能夠設(shè)置框線的寬度、單元格間距，以及背景色等。子項(xiàng)目3設(shè)置表格和單元格屬性

將表格框線的寬度更改為“0”，可以發(fā)現(xiàn)表格的框線變成虛線，這樣在瀏覽器中，表格將被隱藏。子項(xiàng)目4表格的嵌套在表格的單元格中，可以再插入一個(gè)表格。子項(xiàng)目5使用表格規(guī)劃網(wǎng)頁布局將表格中的所有框線粗細(xì)都設(shè)為0，調(diào)整表格的高度和寬度，借口初步看到一個(gè)規(guī)劃后網(wǎng)頁的樣子。調(diào)整“屬性”面板中的“填充”值和“間距”值。項(xiàng)目3使用APDiv布局網(wǎng)頁子項(xiàng)目1Div與APDiv概述Div，也稱Div標(biāo)簽，是一種區(qū)隔標(biāo)記。它的主要作用是還可以將頁面分割為不同的區(qū)域，設(shè)定文字、圖像和表格的排列方式。通過拖動、方向鍵或者指定坐標(biāo)的位置等方式，對文字、圖像等元素進(jìn)行精確定位。APDiv是一種絕對定位元素，它可以包含文本、圖像等其他內(nèi)容，這使得組成網(wǎng)頁的各種元素可以精確定位在網(wǎng)頁的某個(gè)位置。子項(xiàng)目2插入APDiv移動鼠標(biāo)單擊“插入”菜單，選擇“布局對象”下的“APDiv”命令，此時(shí)在網(wǎng)頁編輯區(qū)出現(xiàn)一個(gè)區(qū)域。子項(xiàng)目3設(shè)置APDiv選中AP元素，單擊AP元素框線，將鼠標(biāo)指針移動到框線的右下角

上，當(dāng)鼠標(biāo)指針變成

時(shí)，拖動鼠標(biāo)，更改AP元素的大小。子項(xiàng)目3設(shè)置APDiv屬性面板中的主要參數(shù)含義如下：編號：AP元素編號，與同一網(wǎng)頁上的其他AP元素相區(qū)分。左、上：AP元素與頁面左上角的距離，用于確定絕對定位。寬、高：AP元素的寬度和高度。Z軸：各個(gè)AP元素的排列順序，也就是哪個(gè)AP元素在上面，哪個(gè)AP元素在下面。背景顏色、背景色：用于設(shè)定AP元素的背景。溢出：當(dāng)層中文字超過層的大小時(shí)，顯示文字的方式。有“visible”、“hidden”、“scroll