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

1、第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1 網(wǎng)頁(yè)布局實(shí)例 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.1 網(wǎng)頁(yè)的風(fēng)格 在對(duì)網(wǎng)頁(yè)插入各種對(duì)象、修飾效果前，一定要確定要確定網(wǎng)頁(yè)的總體風(fēng)格。 針對(duì)不同的網(wǎng)頁(yè)風(fēng)格，大體可以將網(wǎng)頁(yè)分為兩大類：商業(yè)網(wǎng)頁(yè)和個(gè)人網(wǎng)頁(yè)。商業(yè)網(wǎng)站一般都有比較統(tǒng)一的布局設(shè)計(jì)，而個(gè)人主頁(yè)由于內(nèi)容專一，不可能象商業(yè)網(wǎng)站那樣內(nèi)容豐富、信息量大。但恰恰因?yàn)檫@個(gè)原因。個(gè)人主頁(yè)的形式更靈活，更容易創(chuàng)造出美感。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.1 網(wǎng)頁(yè)的風(fēng)格1 “搜狐”的主頁(yè)的內(nèi)容很豐富，色彩鮮艷并有許多大幅廣告和浮動(dòng)廣告欄。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.1 網(wǎng)頁(yè)的風(fēng)格

2、2 微軟中國(guó)的主頁(yè)，內(nèi)容比較專一，內(nèi)容非常有條理，欄目突出，沒有凌亂的感覺。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.1 網(wǎng)頁(yè)的風(fēng)格3 “黑白音樂” 是一個(gè)個(gè)人主頁(yè)，它看起來(lái)更簡(jiǎn)單，色彩也不夠豐富，但感覺非常清新。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.2 網(wǎng)頁(yè)布局實(shí)例所謂網(wǎng)頁(yè)的布局，通俗地說(shuō)，就是確定網(wǎng)頁(yè)上的網(wǎng)站標(biāo)志、導(dǎo)航欄、菜單等元素的位置。 不同的網(wǎng)頁(yè)，各種網(wǎng)頁(yè)元素所處的地位不同，他們的位置也就不同。一般情況下，重要的元素都放在突出的位置。 簡(jiǎn)單劃分，網(wǎng)頁(yè)的布局一般可以分為：“廠”字型、“同”字型、標(biāo)題正文型、分欄型、Flash型、封面型等。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局

3、 2.1.2 網(wǎng)頁(yè)布局實(shí)例1“廠”字型結(jié)構(gòu)的特點(diǎn)是內(nèi)容清晰，一目了然。網(wǎng)頁(yè)最頂端是徽標(biāo)和圖片（廣告）欄，下半部分的左邊是導(dǎo)航鏈接，右邊是信息發(fā)布區(qū)。這種結(jié)構(gòu)非常常見。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.2 網(wǎng)頁(yè)布局實(shí)例2“同”字型結(jié)構(gòu)的特點(diǎn)是超鏈接多、信息量大。網(wǎng)站的頂端是徽標(biāo)和圖片（廣告）欄，下部分分為三列，或者更多。兩邊的兩列區(qū)域比較小，一般是導(dǎo)航超鏈接和小型圖片廣告等，中間是網(wǎng)站的主要內(nèi)容，最下面是網(wǎng)站的版權(quán)信息等。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.2 網(wǎng)頁(yè)布局實(shí)例3標(biāo)題正文型結(jié)構(gòu)的頂端是網(wǎng)站標(biāo)識(shí)和標(biāo)題，下面是網(wǎng)頁(yè)正文。內(nèi)容非常簡(jiǎn)單。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布

4、局 2.1.2 網(wǎng)頁(yè)布局實(shí)例4分欄型結(jié)構(gòu)，這種結(jié)構(gòu)一般分為左右（或上下）兩欄，也有的分為多欄。一般將導(dǎo)航鏈接與正文放在不同的欄中。這樣打開新的網(wǎng)頁(yè)，導(dǎo)航鏈接欄的內(nèi)容不會(huì)發(fā)生變化。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.2 網(wǎng)頁(yè)布局實(shí)例5Flash型結(jié)構(gòu)采用Flash技術(shù)來(lái)完成，其視覺效果和聽覺效果與傳統(tǒng)網(wǎng)頁(yè)不同，往往能夠給瀏覽者以極大的沖擊。這種網(wǎng)頁(yè)逐漸被年輕人所喜愛。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.2 網(wǎng)頁(yè)布局實(shí)例6封面型結(jié)構(gòu)，往往首先看到的是一幅圖片或動(dòng)畫，在圖片或動(dòng)畫的下面有一個(gè)進(jìn)入下一級(jí)網(wǎng)頁(yè)的超鏈接提示文字。其中圖片或動(dòng)畫可以用Flash來(lái)制作，與Flash型不同，這

5、種結(jié)構(gòu)并不是在Flash中完成的，而是在網(wǎng)頁(yè)制作軟件中完成的。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.3 網(wǎng)頁(yè)布局注意事項(xiàng) 1.平衡性2.對(duì)稱性3.對(duì)比性4.疏密度5.反復(fù)性6.韻律感網(wǎng)頁(yè)的排版布局是決定網(wǎng)站美觀與否的一個(gè)重要方面，通過(guò)合理的、有創(chuàng)意的布局，才可以把文字、圖像等內(nèi)容完美地展現(xiàn)在瀏覽者面前。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.1.4 畫出網(wǎng)頁(yè)布局草圖 標(biāo)題圖片欄鏈接文字區(qū)主要內(nèi)容區(qū)網(wǎng)站版權(quán)信息區(qū)第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2 使用表格 網(wǎng)頁(yè)的布局設(shè)計(jì)一般都是靠表格來(lái)實(shí)現(xiàn)的?？梢哉f(shuō)表格的是網(wǎng)頁(yè)制作中最為重要的一個(gè)技巧，表格運(yùn)用得好壞，直接反映了網(wǎng)頁(yè)設(shè)計(jì)者的水平

6、。 實(shí)現(xiàn)網(wǎng)頁(yè)的布局有兩種方法，一種是采用表格，一種是使用布局視圖。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2.1 插入表格 在網(wǎng)頁(yè)中確定光標(biāo)的位置，然后單擊“插入”面板的“表格”按鈕，得到“插入表格”對(duì)話框。 行數(shù)和列數(shù)是表格的大??；寬度指表格的寬度，單位可以是像素?cái)?shù)或百分比。按像素定義的表格大小是固定的，而按百分比定義的表格，會(huì)按照瀏覽器的大小而變化；邊框指表格線的寬度；間距指單元格間距；內(nèi)距指單元格內(nèi)文字與框線的距離。所謂單元格，就是表格里面的每一個(gè)小格。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2.2 插入、刪除表格的行和列 使光標(biāo)出現(xiàn)在表格中。右擊鼠標(biāo)打開快捷菜單，移動(dòng)鼠標(biāo)指針到快捷

7、菜單的“表格”上彈出子菜單 ，在下一級(jí)菜單中單擊“插入行或列”，得到“插入行或列”對(duì)話框。 使光標(biāo)出現(xiàn)在表格中。右擊鼠標(biāo)打開快捷菜單，移動(dòng)鼠標(biāo)指針到快捷菜單的“表格”上彈出子菜單 ，在下一級(jí)菜單中單擊“刪除行”，該行被刪除。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2.3 合并與拆分單元格 選中多個(gè)單元格，移動(dòng)鼠標(biāo)指針到“屬性”面板上，單擊“合并單元格”按鈕，兩個(gè)單元格被合并。 使光標(biāo)出現(xiàn)在單元格中，移動(dòng)鼠標(biāo)指針到“屬性”面板上，單擊“拆分單元格”按鈕，打開 “拆分單元格”對(duì)話框。 選擇拆分方式和數(shù)目，單擊“確定” ，該單元格被拆分第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2.4 表格的嵌套 將光

8、標(biāo)移動(dòng)到該單元格中，單擊“插入”面板的“插入表格”按鈕，打開“插入表格”對(duì)話框。 輸入表格行列數(shù)，單擊“確定”，表格被嵌套。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2.5 使用“表格屬性”對(duì)話框 當(dāng)表格被選中之后，窗口下面的屬性面板顯示的是對(duì)整個(gè)表格的設(shè)置內(nèi)容。 表格寬度是100%，意思是不論瀏覽者打開的瀏覽器多大，表格都占滿整個(gè)窗口。 由于目前計(jì)算機(jī)常用的分辨率為800600，我們可以將表格寬度設(shè)置為780像素，這樣不論在哪臺(tái)計(jì)算機(jī)上網(wǎng)頁(yè)的樣子都是一樣的。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.2.6 設(shè)置表格框線 更改表格框線的寬度為0，可以發(fā)現(xiàn)表格的框線變成虛線，這樣在瀏覽器中，表格將

9、被隱藏。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.3 布局視圖 布局視圖不僅可以任意繪制表格，而且還可以任意拖動(dòng)單元格，更改它的位置。 布局視圖是Dreamweaver MX增強(qiáng)的一個(gè)功能，使用它可以非常方便地對(duì)網(wǎng)頁(yè)布局進(jìn)行規(guī)劃。在完成規(guī)劃后，還可以返回到表格這一大家熟悉的形式上。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.3.1 布局視圖工具欄 在插入面板中，單擊“布局”選項(xiàng)卡，可以發(fā)現(xiàn)“標(biāo)準(zhǔn)視圖”按鈕被按下，標(biāo)準(zhǔn)視圖就是我們?cè)O(shè)計(jì)網(wǎng)站的普通視圖，右邊的“布局單元格”按鈕和“布局表格”按鈕是灰色的，不可用，要想使用他們必須切換到布局視圖。 單擊“布局視圖”按鈕，切換到布局視圖，系統(tǒng)會(huì)彈出對(duì)話框，

10、提示單擊“布局單元格”按鈕和“布局表格”按鈕的使用方法。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.3.2 使用布局視圖規(guī)劃網(wǎng)頁(yè)布局 單擊繪制布局表格按鈕，編輯區(qū)頂端出現(xiàn)“布局視圖”幾個(gè)字。移動(dòng)鼠標(biāo)到編輯區(qū)，按住鼠標(biāo)指針拖動(dòng)，畫出一個(gè)綠色的表格。 用同樣的方法，畫出其他表格。在插入面板中單擊繪制布局單元格按鈕 ，移動(dòng)鼠標(biāo)到編輯區(qū)，按住鼠標(biāo)指針拖動(dòng)，畫出單元格。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.4 使用框架 采用框架可以將頁(yè)面分割為兩個(gè)或兩個(gè)以上的部分。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.4.1 框架概述 我們可以這樣理解框架：一個(gè)框架由幾個(gè)獨(dú)立的頁(yè)面組成。在一般情況下，這些頁(yè)面只顯

11、示全部?jī)?nèi)容的一部分，我們可以通過(guò)滾動(dòng)條瀏覽頁(yè)面的全部?jī)?nèi)容?；蛘咭部梢哉f(shuō)，框架實(shí)現(xiàn)了在一個(gè)窗口中瀏覽多個(gè)頁(yè)面。第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.4.2 框架文件的建立與保存 單擊菜單欄上的“插入”，彈出“插入”菜單，移動(dòng)鼠標(biāo)指針到該菜單的“框架”上，最后在其下一級(jí)菜單中選擇“上方及左方框架”命令，網(wǎng)頁(yè)被分為三部分。在頂端中單擊鼠標(biāo)，可以發(fā)現(xiàn)Dreamweaver的標(biāo)題欄中網(wǎng)頁(yè)名字變?yōu)椤癠ntitledFrame-2”，而左下方的網(wǎng)頁(yè)名字為“UntitledFrame-3”，右下方的網(wǎng)頁(yè)名字為原來(lái)的“Untitled-1”。這便是使用框架與使用表格和布局視圖的本質(zhì)不同。 第二章第二章 網(wǎng)頁(yè)的布局網(wǎng)頁(yè)的布局 2.4.2 框架文件的建立與保存 保存框架文件要注意的是：框架的保存與單個(gè)網(wǎng)頁(yè)的保存稍有不同，Dreamweaver為每一個(gè)框架提供一個(gè)“保存”對(duì)話框。 單擊菜單欄上的“文件”，可以發(fā)現(xiàn)“文件”菜單下的“保存”命令變成了“保存框架”和“框架另存為”等。單擊“保存框架”命令，可以保存當(dāng)前光標(biāo)所在的網(wǎng)頁(yè)。 改變光標(biāo)的位置，激活其他區(qū)域，可以完成對(duì)