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

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

版式的實(shí)用功能主次分明、重點(diǎn)突出 應(yīng)能讓瀏覽者迅速找到網(wǎng)頁(yè)的主題，并對(duì)整個(gè)頁(yè)面有全面的掌握導(dǎo)航清晰、便于瀏覽 網(wǎng)頁(yè)應(yīng)該具有一致風(fēng)格的導(dǎo)航系統(tǒng)，為用戶(hù)瀏覽提供方便布局合理、邏輯性強(qiáng) 應(yīng)能使網(wǎng)頁(yè)中的各種視覺(jué)信息在頁(yè)面中合理、有序地排列，既要體現(xiàn)出設(shè)計(jì)思想，又要符合一般的視覺(jué)原理和思維習(xí)慣

5.1使用表格布局創(chuàng)建頁(yè)布局的一種常用的方法是使用HTML表格對(duì)元素進(jìn)行定位。但是，使用表格進(jìn)行布局不太方便，因?yàn)樽畛鮿?chuàng)建表格是為了顯示表格數(shù)據(jù)，而不是用于對(duì)Web頁(yè)進(jìn)行布局。為了簡(jiǎn)化使用表格進(jìn)行頁(yè)面布局的過(guò)程，Dreamweaver提供了“布局”模式。在“布局”模式中，用戶(hù)可以使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)頁(yè)，同時(shí)避免了使用傳統(tǒng)的方法創(chuàng)建基于表格的設(shè)計(jì)時(shí)經(jīng)常出現(xiàn)的一些問(wèn)題。一、模式1．布局模式布局模式用于繪制布局表格和布局單元格，是頁(yè)面布局設(shè)計(jì)的主要模式。在布局單元格中，可以插入文本、圖像、對(duì)象等網(wǎng)頁(yè)元素。2．標(biāo)準(zhǔn)模式標(biāo)準(zhǔn)模式將布局表格轉(zhuǎn)化為HTML常規(guī)表格的形式，從而能夠使用HTML表格的編輯方法對(duì)布局表格進(jìn)行編輯，如拆分單元格、合并單元格、調(diào)整大小、設(shè)定格式等。3．?dāng)U展表格模式擴(kuò)展表格模式臨時(shí)向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框以使編輯操作更加容易。利用這種模式，可以選擇表格中的項(xiàng)目或者精確地放置插入點(diǎn)。二．三種模式的切換使用以下任何一種方法，都能實(shí)現(xiàn)三種模式的切換：⑴選擇“查看/表格模式”菜單。⑵使用插入欄“布局”類(lèi)別中的“標(biāo)準(zhǔn)”、“擴(kuò)展”、“布局”按鈕進(jìn)行切換。示例：使用表格布局設(shè)計(jì)圖所示網(wǎng)頁(yè)頁(yè)面。

設(shè)計(jì)步驟

1．頁(yè)面分析2．繪制表格和嵌套3．調(diào)整單元格大小及位置4．插入內(nèi)容，并設(shè)置格式5．預(yù)覽頁(yè)面，進(jìn)行細(xì)微調(diào)整，完成頁(yè)面設(shè)計(jì)。5、2使用AP進(jìn)行頁(yè)面布局

AP元素（絕對(duì)定位元素）是分配有絕對(duì)位置的HTML頁(yè)面元素，具體地說(shuō)，就是Div標(biāo)簽或其它任何標(biāo)簽。AP元素可以包含文本、圖像或其它任何可放置到HTML文檔正文中的內(nèi)容。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，必須對(duì)頁(yè)面元素進(jìn)行定位，使頁(yè)面布局整齊、美觀。AP元素可以放置在頁(yè)面的任意位置，使用AP元素可以以像素為單位來(lái)精確定位頁(yè)面元素。把頁(yè)面元素置入AP元素中，可以控制某個(gè)AP元素顯示在前面還是后面，顯示還是隱藏。配合時(shí)間軸的使用，可同時(shí)移動(dòng)一個(gè)或多個(gè)AP元素，從而輕松制作出動(dòng)態(tài)效果。1.創(chuàng)建AP⑴在插入欄的“布局”類(lèi)別中單擊“繪制AP”按鈕。⑵執(zhí)行下列操作之一：拖動(dòng)以繪制一個(gè)AP（通過(guò)按住Ctrl鍵并拖動(dòng)來(lái)連續(xù)繪制多個(gè)AP）在選定了插入點(diǎn)后，使用菜單“插入/布局對(duì)象/AP”繪制AP。2．AP面板在文檔窗口中繪制的每一個(gè)AP都會(huì)出現(xiàn)在AP面板中，通過(guò)AP面板可以管理文檔中的AP。在AP面板，AP顯示為按z軸順序排列的名稱(chēng)列表。先創(chuàng)建的AP出現(xiàn)在列表的底部，新創(chuàng)建的AP出現(xiàn)列表的頂部。嵌套的AP顯示為連接到父AP的名稱(chēng)。單擊加號(hào)“+”或減號(hào)“-”圖標(biāo)顯示或隱藏嵌套的AP。使用AP面板可防止AP重疊，更改AP的可見(jiàn)性，將AP嵌套或AP疊，以及選擇一個(gè)或多個(gè)AP。3．選擇AP⑴選擇一個(gè)AP：在AP面板中單擊該AP的名稱(chēng)或單擊一個(gè)AP的邊框。⑵選擇多個(gè)AP：按住Shift鍵并單擊AP面板上的兩個(gè)或更多個(gè)名稱(chēng)或在兩個(gè)或更多個(gè)AP的邊框內(nèi)（或邊框上）按住Shift鍵并單擊。當(dāng)選定多個(gè)AP時(shí)，最后選定AP的大小調(diào)整柄將以實(shí)心突出顯示，其他AP的大小調(diào)整柄則以空心顯示。在設(shè)計(jì)視圖中直接點(diǎn)擊AP標(biāo)記或AP左上角的選擇柄也能實(shí)現(xiàn)AP選擇。4．調(diào)整AP大?、耪{(diào)整單個(gè)AP的大?、偻蟿?dòng)AP的調(diào)整柄調(diào)整AP的大小。②按箭頭鍵時(shí)按住Ctrl鍵，對(duì)AP一次調(diào)整一個(gè)像素的大小。③按箭頭鍵時(shí)按住Shift+Ctrl鍵，則按網(wǎng)格靠齊增量來(lái)調(diào)整AP的大小。④在屬性檢查器中，鍵入“寬”和“高”的值，調(diào)整AP的大小。⑵調(diào)整多個(gè)AP的大?、僭谠O(shè)計(jì)視圖中選擇多個(gè)AP。②選擇如下菜單“修改/排列順序/設(shè)成寬度相同”或“修改/排列順序/設(shè)成高度相同”，則將選擇的AP設(shè)定為相同的寬度或高度，其結(jié)果值取決于最后選定的AP的大小。6.查看和設(shè)置AP的屬性在屬性檢查器中查看和設(shè)置AP屬性的操作步驟如下：⑴選擇一個(gè)AP。⑵選擇“窗口/屬性”菜單，打開(kāi)屬性檢查器。⑶通過(guò)設(shè)置屬性來(lái)更改AP的屬性。主要參數(shù)說(shuō)明：AP編號(hào)：用于指定AP的名稱(chēng)，每個(gè)AP都必須有它自己的唯一ID。左和上：指定AP的左上角相對(duì)于頁(yè)面左上角的位置，默認(rèn)單位為px。Z軸：確定AP的堆疊順序。編號(hào)較大的AP出現(xiàn)在編號(hào)較小的AP的前面?？梢?jiàn)性：指定該AP最初是否是可見(jiàn)的。背景圖像：指定AP的背景圖像。背景顏色：指定AP的背景顏色。標(biāo)簽：指定用來(lái)定義該AP的HTML標(biāo)簽。溢出：控制當(dāng)AP的內(nèi)容超過(guò)AP的指定大小時(shí)如何在瀏覽器中顯示AP。7．更改AP的AP疊順序使用屬性檢查器或AP面板可更改AP的AP疊順序。AP面板列表頂部的AP將位于AP疊順序的頂部，并且會(huì)出現(xiàn)在其他AP之前。在屬性檢查器的“Z軸”文本框中輸入AP疊序號(hào)，可直接改變AP疊順序；在AP面板中移動(dòng)AP也可改變AP疊順序。8．設(shè)置AP可見(jiàn)性⑴使用AP面板設(shè)置AP的可見(jiàn)性睜開(kāi)的眼睛表示AP是可見(jiàn)的。當(dāng)設(shè)置為閉合狀態(tài)時(shí)，對(duì)應(yīng)的AP將不被顯示。如果沒(méi)有眼形圖標(biāo)，該AP通常會(huì)繼承其父AP的可見(jiàn)性。⑵使用AP屬性檢查器設(shè)置AP的可見(jiàn)性在AP屬性檢查器中設(shè)置“可見(jiàn)性”的選項(xiàng)值，即可控制AP的可見(jiàn)性。“可見(jiàn)性”選項(xiàng)及含義：default:默認(rèn)狀態(tài)inherit：繼承父AP屬性visible：AP可見(jiàn)hidden：AP不可見(jiàn)說(shuō)明：如果AP沒(méi)有嵌套，父AP就是文檔正文，而文檔正文始終是可見(jiàn)的。另外，如果未指定可見(jiàn)性，則不會(huì)顯示眼形圖標(biāo)。9．AP轉(zhuǎn)換為表格⑴選擇“修改/轉(zhuǎn)換/AP到表”菜單，打開(kāi)“AP轉(zhuǎn)化為表格”對(duì)話(huà)框。⑵在對(duì)話(huà)框中選擇所需的選項(xiàng)，然后單擊“確定”按鈕。5.3使用框架

框架的作用就是把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)?？蚣苡煽蚣芗‵rameset）和單個(gè)框架（Frame）組成?？蚣芗窃谝粋€(gè)文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁(yè)。框架集定義了一個(gè)網(wǎng)頁(yè)中顯示的框架集數(shù)、框架集的大小、載入框架的網(wǎng)頁(yè)源和其他可定義的屬性等。單個(gè)框架是指在網(wǎng)頁(yè)上定義的一個(gè)區(qū)域。1．框架類(lèi)型

Dreamweaver預(yù)定義了多種類(lèi)型的框架結(jié)構(gòu)。在插入工具欄的“布局”分類(lèi)中單擊“框架”按鈕，在彈出的菜單中，用戶(hù)可以選擇系統(tǒng)預(yù)定義的框架結(jié)構(gòu)。2．框架面板在操作框架的過(guò)程中，框架面板是非常有用的。使用框架面板可以進(jìn)行選取、觀察、修改框架等基本操作。因此在對(duì)框架操作時(shí)，框架面板最好一直打開(kāi)。1、創(chuàng)建自定義框架集①選擇“文件/新建”菜單，打開(kāi)“新建文檔”對(duì)話(huà)框。②在“新建文檔”對(duì)話(huà)框中，選擇“框架集”類(lèi)別，。③從“框架集”列表選擇框架方式，然后單擊“創(chuàng)建”按鈕。2．編輯框架集⑴拆分框架①拆分插入點(diǎn)所在的框架：從“修改/框架頁(yè)”子菜單選擇拆分項(xiàng)。②以垂直或水平方式拆分框架：將框架邊框從“設(shè)計(jì)”視圖的邊緣向“設(shè)計(jì)”視圖的內(nèi)部拖入。③使用不在“設(shè)計(jì)”視圖邊緣的框架邊框拆分框架：在按住Alt鍵的同時(shí)拖動(dòng)框架邊框。④將一個(gè)框架拆分成四個(gè)框架：將框架邊框從“設(shè)計(jì)”視圖一角拖入框架的中間。⑵刪除框架將框架的邊框拖離頁(yè)面或拖到父框架的邊框上后，當(dāng)前框架即被刪除。3．選擇框架和框架集⑴在框架面板中選擇框架和框架集①選擇框架：在框架面板中單擊框架內(nèi)部。②選擇一個(gè)框架集：在框架面板中單擊環(huán)繞框架集的邊框。⑵在文檔窗口中選擇框架和框架集①選擇框架：在“設(shè)計(jì)”視圖中，按住Alt鍵的同時(shí)單擊框架內(nèi)部。②選擇框架集：在“設(shè)計(jì)”視圖中，單擊框架集的某一內(nèi)部框架邊框。4．指定框架的打開(kāi)文檔要在框架中打開(kāi)現(xiàn)有文檔，操作步驟如下：⑴將插入點(diǎn)放置在框架中。⑵選擇“文件/在框架中打開(kāi)”菜單。⑶選擇要在框架中打開(kāi)的文檔并單擊“確定”。該文檔隨即顯示在框架中。⑷要使文檔成為在瀏覽器中打開(kāi)框架集時(shí)在框架中顯示的默認(rèn)文檔，則須保存該框架集。5．框架集文件和框架的保存⑴保存框架集文件①在框架面板或文檔窗口中選擇框架集。②選擇下列項(xiàng)之一：保存框架集文件：選擇“文件/保存框架集”菜單。將框架集文件另存為新文件：選擇“文件/框架集另存為”菜單。⑵保存在框架中顯示的文檔①在框架中單擊。②選擇“文件/保存框架”或“文件/框架另存為”菜單。⑶保存與一組框架關(guān)聯(lián)的所有文件選擇“文件/保存全部”菜單。6．設(shè)置框架和框架集的屬性⑴框架屬性框架名稱(chēng)：鏈接的target屬性或腳本在引用該框架時(shí)所用的名稱(chēng)。源文件：指定在框架中顯示的源文檔。滾動(dòng)：指定在框架中是否顯示滾動(dòng)條。不能調(diào)整大小：鉤選該項(xiàng)后，瀏覽網(wǎng)頁(yè)時(shí)不能通過(guò)拖動(dòng)框架邊框調(diào)整框架大小。邊框：在瀏覽器中查看框架時(shí)顯示或隱藏當(dāng)前框架的邊框。邊框顏色：為所有框架的邊框設(shè)置邊框顏色。邊界寬度：以像素為單位設(shè)置左邊距和右邊距的寬度。邊界高度：以像素為單位設(shè)置上邊距和下邊距的高度。⑵框架集屬性屬性檢查器中“行列選擇范圍”窗的顯示形式因框架結(jié)構(gòu)而變化：當(dāng)框架為左右結(jié)構(gòu)時(shí)顯示為左右垂直窗；為上下結(jié)構(gòu)時(shí)，顯示為上下水平窗。設(shè)置框架大小的最常用方法是將左側(cè)框架設(shè)置為固定像素寬度，將右側(cè)框架大小設(shè)置為相對(duì)大小，這樣在分配像素寬度后，能夠使右側(cè)框架伸展以占據(jù)所有剩余空間。對(duì)于應(yīng)始終保持相同大小的框架，通常以“像素”為單位列或行絕對(duì)值，例如導(dǎo)航條框架。1Dreamweaver中CSS樣式的類(lèi)型執(zhí)行“窗口”→“CSS樣式”命令，打開(kāi)CSS樣式面板，如圖所示。單擊CSS樣式面板中的“新建CSS規(guī)則”按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話(huà)框，如圖所示。5.4

樣式表在Dreamweaver中CSS樣式的類(lèi)型包括以下3種。（1）類(lèi)類(lèi)也稱(chēng)為class類(lèi)樣式或自定義CSS樣式，它在網(wǎng)頁(yè)中定義了一個(gè)CSS樣式屬性集，當(dāng)頁(yè)面中的對(duì)象引用該樣式后，所定義的CSS屬性應(yīng)用到頁(yè)面中。（2）標(biāo)簽標(biāo)簽也稱(chēng)為重新定義HTML標(biāo)簽樣式，該類(lèi)樣式是對(duì)HTML標(biāo)簽進(jìn)行重新定義。例如，創(chuàng)建或更改H1標(biāo)簽（對(duì)應(yīng)于段落格式中的“標(biāo)題1”）的CSS樣式時(shí)，網(wǎng)頁(yè)中所有使用H1標(biāo)簽設(shè)置了該格式的文本都能立即被更新。（3）高級(jí)CSS選擇器樣式該類(lèi)樣式可以定義網(wǎng)頁(yè)中的超鏈接效果。例如，可以使超鏈接文字在各種狀態(tài)下均無(wú)下劃線(xiàn)，并且當(dāng)鼠標(biāo)懸停時(shí)，文字顏色由藍(lán)色變?yōu)榧t色等。1模板的基本概念模板是網(wǎng)頁(yè)編輯軟件生成具有相似結(jié)構(gòu)和外觀的一種網(wǎng)頁(yè)制作功能。如果希望站點(diǎn)中的網(wǎng)頁(yè)享有某種特性，例如，相同的布局結(jié)構(gòu)，相似的導(dǎo)航欄等內(nèi)容，模板是非常有用的。對(duì)于模板而言，新的頁(yè)面可以從一個(gè)模板中創(chuàng)建。一旦被創(chuàng)建，這個(gè)新的文檔將保持和原來(lái)模板的聯(lián)系，除非被明確地隔離或分開(kāi)。一旦把模板應(yīng)用于一組網(wǎng)頁(yè)，就可以通過(guò)編輯該模板來(lái)改變這一組網(wǎng)頁(yè)中的共享信息。例如，將模板中的導(dǎo)航欄更改后，應(yīng)用該模板頁(yè)面中的導(dǎo)航欄將被自動(dòng)更新。模板是由兩類(lèi)區(qū)域組成的：鎖定區(qū)域和可編輯區(qū)域。當(dāng)?shù)谝淮蝿?chuàng)建模板時(shí)，所有的區(qū)域都是鎖定的。定義模板過(guò)程的一部分就是指定和命名可編輯的區(qū)域。然后，當(dāng)某個(gè)文檔從某些模板中創(chuàng)建時(shí)，可