網(wǎng)頁設(shè)計(jì)與制作-頁面版式

1、第第5章章 頁面版式頁面版式學(xué)習(xí)目標(biāo)熟練掌握應(yīng)用表格設(shè)計(jì)網(wǎng)頁布局的方法。熟練掌握應(yīng)用表格設(shè)計(jì)網(wǎng)頁布局的方法。掌握使用掌握使用AP設(shè)計(jì)網(wǎng)頁布局的方法。設(shè)計(jì)網(wǎng)頁布局的方法。了解使用框架設(shè)計(jì)網(wǎng)頁布局的方法。了解使用框架設(shè)計(jì)網(wǎng)頁布局的方法。網(wǎng)頁界面的版式設(shè)計(jì)，是指將文字、圖形圖網(wǎng)頁界面的版式設(shè)計(jì)，是指將文字、圖形圖像、色彩、動(dòng)畫、視頻多媒體等網(wǎng)頁對(duì)象的傳達(dá)像、色彩、動(dòng)畫、視頻多媒體等網(wǎng)頁對(duì)象的傳達(dá)要素，根據(jù)特定內(nèi)容和主題，在網(wǎng)頁限定范圍內(nèi)要素，根據(jù)特定內(nèi)容和主題，在網(wǎng)頁限定范圍內(nèi)將設(shè)計(jì)意圖以視覺形式表現(xiàn)出來。從網(wǎng)頁技術(shù)角將設(shè)計(jì)意圖以視覺形式表現(xiàn)出來。從網(wǎng)頁技術(shù)角度講，設(shè)計(jì)者通常是圍繞著頁面中的導(dǎo)航欄、

2、圖度講，設(shè)計(jì)者通常是圍繞著頁面中的導(dǎo)航欄、圖像、動(dòng)畫、正文等內(nèi)容展開頁面布局的。像、動(dòng)畫、正文等內(nèi)容展開頁面布局的。版式的實(shí)用功能 主次分明、重點(diǎn)突出主次分明、重點(diǎn)突出應(yīng)能讓瀏覽者迅速找到網(wǎng)頁的主題，并對(duì)整個(gè)頁面應(yīng)能讓瀏覽者迅速找到網(wǎng)頁的主題，并對(duì)整個(gè)頁面有全面的掌握有全面的掌握 導(dǎo)航清晰、便于瀏覽導(dǎo)航清晰、便于瀏覽 網(wǎng)頁應(yīng)該具有一致風(fēng)格的導(dǎo)航系統(tǒng)，為用戶瀏覽提網(wǎng)頁應(yīng)該具有一致風(fēng)格的導(dǎo)航系統(tǒng)，為用戶瀏覽提供方便供方便 布局合理、邏輯性強(qiáng)布局合理、邏輯性強(qiáng)應(yīng)能使網(wǎng)頁中的各種視覺信息在頁面中合理、有序應(yīng)能使網(wǎng)頁中的各種視覺信息在頁面中合理、有序地排列，既要體現(xiàn)出設(shè)計(jì)思想，又要符合一般的視地排列，既

3、要體現(xiàn)出設(shè)計(jì)思想，又要符合一般的視覺原理和思維習(xí)慣覺原理和思維習(xí)慣 5.1 使用表格布局一、模式一、模式1布局模式布局模式布局模式用于繪制布局表格和布局單元格，是頁面布局設(shè)計(jì)的主要布局模式用于繪制布局表格和布局單元格，是頁面布局設(shè)計(jì)的主要模式。在布局單元格中，可以插入文本、圖像、對(duì)象等網(wǎng)頁元素。模式。在布局單元格中，可以插入文本、圖像、對(duì)象等網(wǎng)頁元素。2標(biāo)準(zhǔn)模式標(biāo)準(zhǔn)模式標(biāo)準(zhǔn)模式將布局表格轉(zhuǎn)化為標(biāo)準(zhǔn)模式將布局表格轉(zhuǎn)化為HTML常規(guī)表格的形式，從而能夠使用常規(guī)表格的形式，從而能夠使用HTML表格的編輯方法對(duì)布局表格進(jìn)行編輯，如拆分單元格、合并表格的編輯方法對(duì)布局表格進(jìn)行編輯，如拆分單元格、合并單元

4、格、調(diào)整大小、設(shè)定格式等。單元格、調(diào)整大小、設(shè)定格式等。3擴(kuò)展表格模式擴(kuò)展表格模式擴(kuò)展表格模式臨時(shí)向文檔中的所有表格添加單元格邊距和間距，并擴(kuò)展表格模式臨時(shí)向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框以使編輯操作更加容易。利用這種模式，可以選且增加表格的邊框以使編輯操作更加容易。利用這種模式，可以選擇表格中的項(xiàng)目或者精確地放置插入點(diǎn)。擇表格中的項(xiàng)目或者精確地放置插入點(diǎn)。二三種模式的切換二三種模式的切換使用以下任何一種方法，都能實(shí)現(xiàn)三種模式的切使用以下任何一種方法，都能實(shí)現(xiàn)三種模式的切換：換： 選擇選擇“查看查看/表格模式表格模式”菜單。菜單。 使用插入欄使用插入欄“布局布局”類別

5、中的類別中的“標(biāo)準(zhǔn)標(biāo)準(zhǔn)”、“擴(kuò)擴(kuò)展展”、“布局布局”按鈕進(jìn)行切換。按鈕進(jìn)行切換。示例：示例：使用表格布局設(shè)計(jì)圖所示網(wǎng)頁頁面。使用表格布局設(shè)計(jì)圖所示網(wǎng)頁頁面。 設(shè)計(jì)步驟設(shè)計(jì)步驟 1頁面分析頁面分析 2繪制表格和嵌套繪制表格和嵌套 3調(diào)整單元格大小及位置調(diào)整單元格大小及位置 4插入內(nèi)容，并設(shè)置格式插入內(nèi)容，并設(shè)置格式 5預(yù)覽頁面，進(jìn)行細(xì)微調(diào)整，完成頁面設(shè)計(jì)。預(yù)覽頁面，進(jìn)行細(xì)微調(diào)整，完成頁面設(shè)計(jì)。5、2使用AP進(jìn)行頁面布局1. 創(chuàng)建創(chuàng)建AP 在插入欄的在插入欄的“布局布局”類別中單擊類別中單擊“繪制繪制AP”按按鈕。鈕。 執(zhí)行下列操作之一：執(zhí)行下列操作之一： 拖動(dòng)以繪制一個(gè)拖動(dòng)以繪制一個(gè)AP（通過按

6、?。ㄍㄟ^按住 Ctrl 鍵并拖動(dòng)來連續(xù)鍵并拖動(dòng)來連續(xù)繪制多個(gè)繪制多個(gè)AP ）在選定了插入點(diǎn)后，使用菜單在選定了插入點(diǎn)后，使用菜單“插入插入/布局對(duì)象布局對(duì)象/AP”繪制繪制AP。2AP面板面板在文檔窗口中繪制的每一個(gè)在文檔窗口中繪制的每一個(gè)AP都會(huì)出現(xiàn)在都會(huì)出現(xiàn)在AP面板面板中，通過中，通過AP面板可以管理文檔中的面板可以管理文檔中的AP。在在AP面板，面板，AP顯示為按顯示為按z軸順序排列的名稱列表。軸順序排列的名稱列表。先創(chuàng)建的先創(chuàng)建的AP出現(xiàn)在列表的底部，新創(chuàng)建的出現(xiàn)在列表的底部，新創(chuàng)建的AP出現(xiàn)出現(xiàn)列表的頂部。列表的頂部。嵌套的嵌套的AP顯示為連接到父顯示為連接到父AP的名稱。單擊加號(hào)

7、的名稱。單擊加號(hào)“+”或減號(hào)或減號(hào)“-”圖標(biāo)顯示或隱藏嵌套的圖標(biāo)顯示或隱藏嵌套的AP。使用使用AP面板可防止面板可防止AP重疊，更改重疊，更改AP的可見性，的可見性，將將AP嵌套或嵌套或AP疊，以及選擇一個(gè)或多個(gè)疊，以及選擇一個(gè)或多個(gè)AP。3選擇選擇AP 選擇一個(gè)選擇一個(gè)AP：在：在AP面板中單擊該面板中單擊該AP的名稱或的名稱或單擊一個(gè)單擊一個(gè)AP的邊框。的邊框。 選擇多個(gè)選擇多個(gè)AP：按?。喊醋hift鍵并單擊鍵并單擊AP面板上的面板上的兩個(gè)或更多個(gè)名稱或在兩個(gè)或更多個(gè)兩個(gè)或更多個(gè)名稱或在兩個(gè)或更多個(gè)AP的邊框內(nèi)的邊框內(nèi)（或邊框上）按?。ɑ蜻吙蛏希┌醋?Shift 鍵并單擊。鍵并單擊。當(dāng)

8、選定多個(gè)當(dāng)選定多個(gè)AP時(shí)，最后選定時(shí)，最后選定AP的大小調(diào)整柄將以的大小調(diào)整柄將以實(shí)心突出顯示，其他實(shí)心突出顯示，其他AP的大小調(diào)整柄則以空心顯的大小調(diào)整柄則以空心顯示。示。 在設(shè)計(jì)視圖中直接點(diǎn)擊在設(shè)計(jì)視圖中直接點(diǎn)擊AP標(biāo)記或標(biāo)記或AP左上角的選擇左上角的選擇柄也能實(shí)現(xiàn)柄也能實(shí)現(xiàn)AP選擇。選擇。 4調(diào)整調(diào)整AP大小大小 調(diào)整單個(gè)調(diào)整單個(gè)AP的大小的大小 拖動(dòng)拖動(dòng)AP的調(diào)整柄調(diào)整的調(diào)整柄調(diào)整AP的大小。的大小。 按箭頭鍵時(shí)按住按箭頭鍵時(shí)按住Ctrl鍵，對(duì)鍵，對(duì)AP一次調(diào)整一個(gè)像素的大一次調(diào)整一個(gè)像素的大小。小。 按箭頭鍵時(shí)按住按箭頭鍵時(shí)按住Shift+Ctrl鍵，則按網(wǎng)格靠齊增量來調(diào)鍵，則按網(wǎng)格

9、靠齊增量來調(diào)整整AP的大小。的大小。 在屬性檢查器中，鍵入在屬性檢查器中，鍵入“寬寬”和和“高高”的值，調(diào)整的值，調(diào)整AP的大小。的大小。 調(diào)整多個(gè)調(diào)整多個(gè)AP的大小的大小 在設(shè)計(jì)視圖中選擇多個(gè)在設(shè)計(jì)視圖中選擇多個(gè)AP。 選擇如下菜單選擇如下菜單 “修改修改/排列順序排列順序/設(shè)成寬度相同設(shè)成寬度相同”或或“修修改改/排列順序排列順序/設(shè)成高度相同設(shè)成高度相同”，則將選擇的，則將選擇的AP設(shè)定為相同設(shè)定為相同的寬度或高度，其結(jié)果值取決于最后選定的的寬度或高度，其結(jié)果值取決于最后選定的AP的大小。的大小。 6. 查看和設(shè)置查看和設(shè)置AP的屬性的屬性在屬性檢查器中查看和設(shè)置在屬性檢查器中查看和設(shè)置

10、AP屬性的操作步驟如屬性的操作步驟如下：下： 選擇一個(gè)選擇一個(gè)AP。 選擇選擇“窗口窗口/屬性屬性”菜單，打開屬性檢查器。菜單，打開屬性檢查器。 通過設(shè)置屬性來更改通過設(shè)置屬性來更改AP的屬性。的屬性。主要參數(shù)說明：主要參數(shù)說明：AP編號(hào)：用于指定編號(hào)：用于指定AP的名稱，每個(gè)的名稱，每個(gè)AP都必須有它自己的都必須有它自己的唯一唯一ID。左和上：指定左和上：指定AP的左上角相對(duì)于頁面左上角的位置，默的左上角相對(duì)于頁面左上角的位置，默認(rèn)單位為認(rèn)單位為px。Z 軸：確定軸：確定AP的堆疊順序。編號(hào)較大的的堆疊順序。編號(hào)較大的AP出現(xiàn)在編號(hào)較出現(xiàn)在編號(hào)較小的小的AP的前面。的前面?？梢娦裕褐付ㄔ摽梢?/p>

11、性：指定該AP最初是否是可見的。最初是否是可見的。背景圖像：指定背景圖像：指定AP的背景圖像。的背景圖像。背景顏色：指定背景顏色：指定AP的背景顏色。的背景顏色。標(biāo)簽：指定用來定義該標(biāo)簽：指定用來定義該AP的的 HTML 標(biāo)簽。標(biāo)簽。溢出：控制當(dāng)溢出：控制當(dāng)AP的內(nèi)容超過的內(nèi)容超過AP的指定大小時(shí)如何在瀏覽的指定大小時(shí)如何在瀏覽器中顯示器中顯示AP。7更改更改AP的的AP疊順序疊順序使用屬性檢查器或使用屬性檢查器或AP面板可更改面板可更改AP的的AP疊順序。疊順序。AP面板列表頂部的面板列表頂部的AP將位于將位于AP疊順序的頂部，疊順序的頂部，并且會(huì)出現(xiàn)在其他并且會(huì)出現(xiàn)在其他AP之前。之前。

12、在屬性檢查器的在屬性檢查器的“Z軸軸”文本框中輸入文本框中輸入AP疊序號(hào)，疊序號(hào)，可直接改變可直接改變AP疊順序；疊順序；在在AP面板中移動(dòng)面板中移動(dòng)AP也可改變也可改變AP疊順序。疊順序。8設(shè)置設(shè)置AP可見性可見性 使用使用AP面板設(shè)置面板設(shè)置AP的可見性的可見性睜開的眼睛表示睜開的眼睛表示AP是可見的。當(dāng)設(shè)置為閉合狀態(tài)時(shí)，對(duì)應(yīng)的是可見的。當(dāng)設(shè)置為閉合狀態(tài)時(shí)，對(duì)應(yīng)的AP將將不被顯示。如果沒有眼形圖標(biāo)，該不被顯示。如果沒有眼形圖標(biāo)，該AP通常會(huì)繼承其父通常會(huì)繼承其父AP的可見性。的可見性。 使用使用AP屬性檢查器設(shè)置屬性檢查器設(shè)置AP的可見性的可見性在在AP屬性檢查器中設(shè)置屬性檢查器中設(shè)置“可

13、見性可見性”的選項(xiàng)值，即可控制的選項(xiàng)值，即可控制AP的可見的可見性。性?！翱梢娦钥梢娦浴?選項(xiàng)及含義：選項(xiàng)及含義：default: 默認(rèn)狀態(tài)默認(rèn)狀態(tài)inherit：繼承父：繼承父AP屬性屬性visible：AP可見可見hidden： AP不可見不可見說明：說明：如果如果AP沒有嵌套，父沒有嵌套，父AP就是文檔正文，而文檔正文始終是可見的。就是文檔正文，而文檔正文始終是可見的。另外，如果未指定可見性，則不會(huì)顯示眼形圖標(biāo)。另外，如果未指定可見性，則不會(huì)顯示眼形圖標(biāo)。 9AP轉(zhuǎn)換為表格轉(zhuǎn)換為表格 選擇選擇“修改修改/轉(zhuǎn)換轉(zhuǎn)換/AP到表到表”菜單，打開菜單，打開 “AP轉(zhuǎn)轉(zhuǎn)化為表格化為表格”對(duì)話框。對(duì)

14、話框。 在對(duì)話框中選擇所需的選項(xiàng)，然后單擊在對(duì)話框中選擇所需的選項(xiàng)，然后單擊“確定確定”按鈕。按鈕。5.3使用框架 1、創(chuàng)建自定義框架集、創(chuàng)建自定義框架集 選擇選擇“文件文件/新建新建”菜單，打開菜單，打開“新建文檔新建文檔”對(duì)對(duì)話框。話框。 在在“新建文檔新建文檔”對(duì)話框中，選擇對(duì)話框中，選擇“框架集框架集”類類別，。別，。 從從“框架集框架集”列表選擇框架方式，然后單擊列表選擇框架方式，然后單擊“創(chuàng)建創(chuàng)建”按鈕。按鈕。 2編輯框架集編輯框架集 拆分框架拆分框架 拆分插入點(diǎn)所在的框架：從拆分插入點(diǎn)所在的框架：從“修改修改/框架頁框架頁”子菜單選子菜單選擇拆分項(xiàng)。擇拆分項(xiàng)。 以垂直或水平方式拆

15、分框架：將框架邊框從以垂直或水平方式拆分框架：將框架邊框從“設(shè)計(jì)設(shè)計(jì)”視圖的邊緣向視圖的邊緣向“設(shè)計(jì)設(shè)計(jì)”視圖的內(nèi)部拖入。視圖的內(nèi)部拖入。 使用不在使用不在“設(shè)計(jì)設(shè)計(jì)”視圖邊緣的框架邊框拆分框架：在視圖邊緣的框架邊框拆分框架：在按住按住 Alt 鍵的同時(shí)拖動(dòng)框架邊框。鍵的同時(shí)拖動(dòng)框架邊框。 將一個(gè)框架拆分成四個(gè)框架：將框架邊框從將一個(gè)框架拆分成四個(gè)框架：將框架邊框從“設(shè)計(jì)設(shè)計(jì)”視圖一角拖入框架的中間。視圖一角拖入框架的中間。 刪除框架刪除框架將框架的邊框拖離頁面或拖到父框架的邊框上后，當(dāng)前框?qū)⒖蚣艿倪吙蛲想x頁面或拖到父框架的邊框上后，當(dāng)前框架即被刪除。架即被刪除。3選擇框架和框架集選擇框架和框

16、架集 在框架面板中選擇框架和框架集在框架面板中選擇框架和框架集 選擇框架：在框架面板中單擊框架內(nèi)部。選擇框架：在框架面板中單擊框架內(nèi)部。 選擇一個(gè)框架集：在框架面板中單擊環(huán)繞框架選擇一個(gè)框架集：在框架面板中單擊環(huán)繞框架集的邊框。集的邊框。 在文檔窗口中選擇框架和框架集在文檔窗口中選擇框架和框架集 選擇框架：在選擇框架：在“設(shè)計(jì)設(shè)計(jì)”視圖中，按住視圖中，按住 Alt 鍵的鍵的同時(shí)單擊框架內(nèi)部。同時(shí)單擊框架內(nèi)部。 選擇框架集：在選擇框架集：在“設(shè)計(jì)設(shè)計(jì)”視圖中，單擊框架集視圖中，單擊框架集的某一內(nèi)部框架邊框。的某一內(nèi)部框架邊框。4指定框架的打開文檔指定框架的打開文檔要在框架中打開現(xiàn)有文檔，操作步驟

17、如下：要在框架中打開現(xiàn)有文檔，操作步驟如下： 將插入點(diǎn)放置在框架中。將插入點(diǎn)放置在框架中。 選擇選擇“文件文件/在框架中打開在框架中打開”菜單。菜單。 選擇要在框架中打開的文檔并單擊選擇要在框架中打開的文檔并單擊“確定確定”。該文檔隨即顯示在框架中。該文檔隨即顯示在框架中。 要使文檔成為在瀏覽器中打開框架集時(shí)在框架要使文檔成為在瀏覽器中打開框架集時(shí)在框架中顯示的默認(rèn)文檔，則須保存該框架集。中顯示的默認(rèn)文檔，則須保存該框架集。5框架集文件和框架的保存框架集文件和框架的保存 保存框架集文件保存框架集文件 在框架面板或文檔窗口中選擇框架集。在框架面板或文檔窗口中選擇框架集。 選擇下列項(xiàng)之一：選擇下列

18、項(xiàng)之一：保存框架集文件：選擇保存框架集文件：選擇“文件文件/保存框架集保存框架集”菜單。菜單。將框架集文件另存為新文件：選擇將框架集文件另存為新文件：選擇“文件文件/框架集另存為框架集另存為”菜菜單。單。 保存在框架中顯示的文檔保存在框架中顯示的文檔 在框架中單擊。在框架中單擊。 選擇選擇“文件文件/保存框架保存框架”或或“文件文件/框架另存為框架另存為”菜單。菜單。 保存與一組框架關(guān)聯(lián)的所有文件保存與一組框架關(guān)聯(lián)的所有文件選擇選擇“文件文件/保存全部保存全部”菜單。菜單。6設(shè)置框架和框架集的屬性設(shè)置框架和框架集的屬性 框架屬性框架屬性框架名稱：鏈接的框架名稱：鏈接的 target 屬性或腳本

19、在引用該框架時(shí)所用屬性或腳本在引用該框架時(shí)所用的名稱。的名稱。源文件：指定在框架中顯示的源文檔。源文件：指定在框架中顯示的源文檔。滾動(dòng)：指定在框架中是否顯示滾動(dòng)條。滾動(dòng)：指定在框架中是否顯示滾動(dòng)條。不能調(diào)整大?。恒^選該項(xiàng)后，瀏覽網(wǎng)頁時(shí)不能通過拖動(dòng)框不能調(diào)整大?。恒^選該項(xiàng)后，瀏覽網(wǎng)頁時(shí)不能通過拖動(dòng)框架邊框調(diào)整框架大小。架邊框調(diào)整框架大小。邊框：在瀏覽器中查看框架時(shí)顯示或隱藏當(dāng)前框架的邊框。邊框：在瀏覽器中查看框架時(shí)顯示或隱藏當(dāng)前框架的邊框。邊框顏色：為所有框架的邊框設(shè)置邊框顏色。邊框顏色：為所有框架的邊框設(shè)置邊框顏色。邊界寬度：以像素為單位設(shè)置左邊距和右邊距的寬度。邊界寬度：以像素為單位設(shè)置左邊距和右邊距的寬度。邊界高度：以像素為單位設(shè)置上邊距和下邊距的高度。邊界高度：以像素為單位設(shè)置上邊距和下邊距的高度。 框架集屬性框架集屬性屬性檢查器中屬性檢查器中“行列選擇范圍行列選擇范圍”窗的顯示形式因窗的顯示形式因框架結(jié)構(gòu)而變化：當(dāng)框架為左右結(jié)構(gòu)時(shí)顯示為左框架結(jié)構(gòu)而變化：當(dāng)框架為左右結(jié)構(gòu)時(shí)顯示為左右垂直窗；為上下結(jié)構(gòu)時(shí)，顯示為上下水平窗。右垂直窗；為上