網(wǎng)頁布局設(shè)計.ppt

《網(wǎng)頁布局設(shè)計.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第7章網(wǎng)頁布局設(shè)計好的網(wǎng)頁布局創(chuàng)意后，還必須掌握網(wǎng)頁布局的一些方法和技巧。只有這樣才能讓設(shè)計者的絕妙構(gòu)思得到很好的表現(xiàn)7.1用表格布局頁面在“布局”模式中，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計您的網(wǎng)頁，同時也避免了使用傳統(tǒng)的方法創(chuàng)建基于表格的設(shè)計時經(jīng)常出現(xiàn)的一些問題。7.1.1用布局表格布局網(wǎng)頁1.切換到布局模式2．布局頂部部分3.布局主體部分4.布局底部信息部分5.美化網(wǎng)頁運行效果7.1.2關(guān)于“布局”模式在“布局”模式中，可以在添加網(wǎng)頁內(nèi)容前使用布局表格和布局單元格對頁面進行布局，就象實例中的頁面一樣，根據(jù)自己的設(shè)計繪制出布局表格

2、和單元格，然后在里面添加自己的內(nèi)容。在“布局”模式中能對單元格直接添加內(nèi)容，這樣可以按需要隨時移動單元格位置、調(diào)整其大小。繪制的布局表格外框默認(rèn)顏色為綠色，而布局單元格外框默認(rèn)顏色為藍(lán)色。執(zhí)行【編輯】｜【首選參數(shù)】命令，在彈出的對話框中執(zhí)行【布局模式】命令，在這里可以更改布局表格和布局單元格的顏色，還可以在這里指定間隔圖像文件。相關(guān)的信息可以選擇對話框中的【幫助】按鈕獲得。7.1.3繪制“布局表格”和“布局單元格”1．繪制“布局表格”2．繪制“布局單元格”3．繪制嵌套布局表格7.1.4在“布局單元格”添加內(nèi)容在“布局”模式中可以

3、將文本、圖像和其他內(nèi)容添加到布局單元格中，就像在“標(biāo)準(zhǔn)”模式中將內(nèi)容添加到表格單元格一樣。單擊要添加內(nèi)容的單元格，然后鍵入文本或插入其他內(nèi)容。7.1.5“布局表格”和“布局單元格”的調(diào)整及設(shè)置1．清除自動設(shè)置的單元格高度單擊表格標(biāo)題菜單，然后選擇“清除所有高度”。選中所要清除高度的布局表格，使表格四邊出現(xiàn)八個控制點，然后執(zhí)行【窗口】｜【屬性】命令，調(diào)出屬性面板，單擊【清除行高】按鈕2．調(diào)整布局表格、布局單元格的大小以及移動它們調(diào)整布局表格、布局單元格的大小的方法如下：（1）選中所要調(diào)整的布局表格或布局單元格。該布局表格或布局單元

4、格周圍出現(xiàn)選擇控制點。（2）拖動選擇控制點來調(diào)整表格或單元格的大小。移動布局表格的方法如下：（1）單擊該布局表格中的空白區(qū)域或過單擊表格頂部的標(biāo)簽。（只有當(dāng)布局表格嵌套在另一個布局表格中時，才可以移動該布局表格。）（2）將表格拖到頁上的另一個位置。也可以按鍵盤上箭頭鍵移動該表格，每次移動1個像素。3．設(shè)置布局單元格和表格的格式在屬性面板中設(shè)置布局表格的多種屬性，包括寬度、高度、邊距和間距設(shè)置布局單元格的格式：在屬性面板中設(shè)定布局單元格內(nèi)容對齊方式，寬度和高度，以及背景色。4．設(shè)置列寬度在【布局】視圖中使用兩種類型的寬度：【固定】

5、寬度和【自動伸展】。每列的寬度都在列頂部或底部的列頭區(qū)域顯示。7.2用層布局頁面在網(wǎng)頁設(shè)計中，用來定位內(nèi)容的元素一般包括：表格和圖層，其中表格是大家在網(wǎng)頁的整體布局中它的使用應(yīng)該是最廣的，也最?？吹降?；相對來說圖層則更靈活性，操作更方便。層（Layer）是一種HTML頁面元素，它的功能強大，可以創(chuàng)建復(fù)雜的頁面布局?？梢詫⑺ㄎ辉陧撁嫔系娜我馕恢?。層可以包含文本、圖像或其它HTML文檔。一個網(wǎng)頁可以有多個層；各個層可以重疊，可以設(shè)定是否可見，是否有子層等。層的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維。7.2.1用層布局網(wǎng)頁1．使用跟蹤圖像輔

6、助頁面的布局2.布局頁面頂部3.布局左側(cè)的導(dǎo)航條及友情鏈接4.布局右邊的主體部分5.布局頁面的底部信息部分運行效果7.2.2插入層1．插入一個或多個層2．嵌套層繪制嵌套層的方法插入嵌套層的方法3．層的HTML代碼7.2.3操作和管理層1．選擇層2．移動層3．調(diào)整層的大小4．對齊層使用對齊層命令就可按最后一個選定層的邊框來對齊一個或多個層7.2.4層屬性1．單個層的層屬性2．多個層的層屬性7.3框架布局頁面Dreamwaver還提供了一種更方便的工具——框架。框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)

7、頁。訪問者瀏覽站點時，可以使某個區(qū)域的文檔永遠(yuǎn)不更改，通過導(dǎo)航條的鏈接更改主要內(nèi)容框架的內(nèi)容，從而達(dá)到網(wǎng)頁布局的相對統(tǒng)一。一般情況下，可以用框架來保持網(wǎng)頁中固定的幾個部分，如網(wǎng)頁大標(biāo)題、鏈接按鈕等，剩下的框架用來展現(xiàn)所選擇的網(wǎng)頁內(nèi)容。7.3.1用框架布局頁面1．建立框架2．編輯各框架內(nèi)的文件3．制作其他需要調(diào)用至各框架的文件4．框架頁面之間鏈接運行效果7.3.2創(chuàng)建框架和框架集1．使用預(yù)定義的框架集2．自己設(shè)計框架集3．拆分或刪除框架4．創(chuàng)建嵌套框架7.3.3設(shè)置框架及框架集屬性1．首先應(yīng)該選取要進行更改的框架和框架集。在視圖窗

8、口中選擇框架在“框架”面板中選擇框架在視圖窗口中選擇框架集在“框架”面板中選擇框架集2．設(shè)置框架屬性3.設(shè)置框架集屬性7.3.4保存框架和框架集1．保存框架集內(nèi)所有的文件執(zhí)行【文件】｜【保存全部】命令。此時會彈出一個對話框要求選擇保存路徑和文件名。粗框的范圍表明