網(wǎng)頁布局設(shè)計(jì)PPT課件

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

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

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

4、單元格的大小。移動(dòng)布局表格的方法如下：（1）單擊該布局表格中的空白區(qū)域或過單擊表格頂部的標(biāo)簽。（只有當(dāng)布局表格嵌套在另一個(gè)布局表格中時(shí)，才可以移動(dòng)該布局表格。）（2）將表格拖到頁上的另一個(gè)位置。也可以按鍵盤上箭頭鍵移動(dòng)該表格，每次移動(dòng) 1 個(gè)像素。 3設(shè)置布局單元格和表格的格式 在屬性面板中設(shè)置布局表格的多種屬性，包括寬度、高度、邊距和間距設(shè)置布局單元格的格式：在屬性面板中設(shè)定布局單元格內(nèi)容對齊方式，寬度和高度，以及背景色。 4設(shè)置列寬度 在【布局】視圖中使用兩種類型的寬度：【固定】寬度和【自動(dòng)伸展】。每列的寬度都在列頂部或底部的列頭區(qū)域顯示。 7.2框架布局頁面框架布局頁面 dreamwav

5、er還提供了一種更方便的工具框架?？蚣艿淖饔镁褪前褳g覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁。訪問者瀏覽站點(diǎn)時(shí)，可以使某個(gè)區(qū)域的文檔永遠(yuǎn)不更改，通過導(dǎo)航條的鏈接更改主要內(nèi)容框架的內(nèi)容，從而達(dá)到網(wǎng)頁布局的相對統(tǒng)一。一般情況下，可以用框架來保持網(wǎng)頁中固定的幾個(gè)部分，如網(wǎng)頁大標(biāo)題、鏈接按鈕等，剩下的框架用來展現(xiàn)所選擇的網(wǎng)頁內(nèi)容。 7.2.1 用框架布局頁面用框架布局頁面 1建立框架 2編輯各框架內(nèi)的文件 3制作其他需要調(diào)用至各框架的文件 4框架頁面之間鏈接 運(yùn)行效果7.2.2創(chuàng)建框架和框架集創(chuàng)建框架和框架集 1使用預(yù)定義的框架集 2自己設(shè)計(jì)框架集 3拆分或刪除框架 4創(chuàng)建嵌套框架 7

6、.2.3設(shè)置框架及框架集屬性設(shè)置框架及框架集屬性 1首先應(yīng)該選取要進(jìn)行更改的框架和框架集。在視圖窗口中選擇框架在“框架”面板中選擇框架在視圖窗口中選擇框架集在“框架”面板中選擇框架集2設(shè)置框架屬性3.設(shè)置框架集屬性 7.2.4保存框架和框架集保存框架和框架集 1保存框架集內(nèi)所有的文件執(zhí)行 【文件】【保存全部】命令。此時(shí)會(huì)彈出一個(gè)對話框要求選擇保存路徑和文件名。粗框的范圍表明了此時(shí)正要保存的文件，如粗框圍住整個(gè)視圖說明此時(shí)保存的是框架集，所有沒有保存的框架文檔都將在框架的周圍出現(xiàn)粗邊框，并且出現(xiàn)一個(gè)對話框要求選擇保存路徑和文件名。2保存框架中顯示的文檔在需要保存的框架內(nèi)單擊，執(zhí)行【文件】【保存框架】命令或者執(zhí)行【文件】【框架另存為】命令。3要保存框架集文件在【框架】面板或視圖窗口中選擇框架集，執(zhí)行【文件】【保存框架頁】命令或者執(zhí)行【文件】【框架集另存為】命令。 7.2.5控制帶有鏈接的框架內(nèi)容控制帶有鏈接的框架內(nèi)容 （