設(shè)計(jì)Web頁(yè)面布局分析課件

網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)

（第3版）網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)

（第3版）9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.2

AP元素 9.3框架9.4樣式表9.5

模板第9章設(shè)計(jì)Web頁(yè)面布局9.1使用布局模式對(duì)頁(yè)進(jìn)行布局第9章設(shè)計(jì)Web頁(yè)面布創(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提供了“布局”模式。在“布局”模式中，用戶可以使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)頁(yè)，同時(shí)避免了使用傳統(tǒng)的方法創(chuàng)建基于表格的設(shè)計(jì)時(shí)經(jīng)常出現(xiàn)的一些問(wèn)題。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局創(chuàng)建頁(yè)布局的一種常用的方法是使用HTML表格9.1.1“布局”模式的概念在“布局”模式中，用戶可以在添加內(nèi)容前使用布局單元格和表格來(lái)對(duì)頁(yè)面進(jìn)行布局。例如，用戶可以沿頁(yè)面的頂部繪制一個(gè)單元格用于放置標(biāo)題圖形，在頁(yè)面的左邊繪制另一個(gè)單元格用于放置導(dǎo)航條，在右邊繪制第三個(gè)單元格用于放置內(nèi)容。添加內(nèi)容時(shí)，可以按需要在其四周移動(dòng)單元格，以調(diào)整布局。頁(yè)面上顯示的布局表格外框?yàn)榫G色，而布局單元格外框?yàn)樗{(lán)色。當(dāng)用戶將鼠標(biāo)指針移到表格單元格上時(shí)，Dreamweaver會(huì)高亮顯示該單元格。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.1“布局”模式的概念9.1使用布局模式對(duì)頁(yè)進(jìn)9.1.2“標(biāo)準(zhǔn)”模式與“布局”模式的切換在繪制布局表格或布局單元格之前，必須從“標(biāo)準(zhǔn)”模式切換到“布局”模式。1．“標(biāo)準(zhǔn)”模式切換到“布局”模式要切換到“布局”模式，可以執(zhí)行以下操作之一：①如果用戶正在代碼視圖中工作，則選擇“查看”→“設(shè)計(jì)”菜單命令或“查看”→“代碼和設(shè)計(jì)”菜單命令。②選擇“查看”→“表格模式”→“布局模式”菜單命令，在文檔窗口的頂部會(huì)出現(xiàn)標(biāo)有“布局模式”的橫條。2．“布局”模式切換到“標(biāo)準(zhǔn)”模式要切換出“布局”模式，可以執(zhí)行以下操作之一：①在文檔窗口的頂部，單擊“布局模式”后的“退出”項(xiàng)，如圖9-3所示。②選擇“查看”→“表模式”→“標(biāo)準(zhǔn)模式”菜單命令。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.2“標(biāo)準(zhǔn)”模式與“布局”模式的切換9.1使用9.1.3在“布局”模式下繪制布局單元格和表格1．繪制布局單元格和表格（1）繪制布局單元格①確保設(shè)計(jì)處于“布局”模式下。②在插入面板的“布局”分類中單擊“繪制布局單元格”按鈕，鼠標(biāo)指針變?yōu)榧犹?hào)（+）形狀。③將鼠標(biāo)指針移到要開(kāi)始繪制單元格的位置單擊，然后按住鼠標(biāo)左鍵拖動(dòng)以創(chuàng)建布局單元格。（2）繪制布局表格①確保設(shè)計(jì)處于“布局”模式下。②在插入面板的“布局”分類中單擊“繪制布局表格”按鈕，鼠標(biāo)指針變?yōu)榧犹?hào)（+）形狀。③在頁(yè)面上單擊然后按住鼠標(biāo)左鍵拖動(dòng)以創(chuàng)建布局表格，在頁(yè)面上顯示的布局表格外框?yàn)榫G色。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.3在“布局”模式下繪制布局單元格和表格9.19.1.3在“布局”模式下繪制布局單元格和表格2．繪制嵌套布局表格用戶可以將一個(gè)布局表格繪制在另一個(gè)布局表格中，創(chuàng)建嵌套表格。對(duì)外部表格所進(jìn)行的更改不會(huì)影響嵌套表格中的單元格。例如，當(dāng)用戶更改外部表格中行或列的大小時(shí)，內(nèi)部表格中單元格的大小不發(fā)生變化。用戶可以插入多級(jí)嵌套表格，但要注意嵌套布局表格的大小不能超過(guò)包含它的表格。繪制嵌套布局表格的操作步驟如下。①確保設(shè)計(jì)處于“布局”模式下。②在插入面板的“布局”分類中單擊“繪制布局表格”按鈕，鼠標(biāo)指針變?yōu)榧犹?hào)（+）形狀。③在現(xiàn)有布局表格中的空白（灰色）區(qū)域中單擊，然后按住鼠標(biāo)左鍵拖動(dòng)以創(chuàng)建嵌套布局表格。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.3在“布局”模式下繪制布局單元格和表格9.19.1.4調(diào)整布局單元格和表格的大小及位置1．調(diào)整布局單元格的大小及位置（1）調(diào)整布局單元格的大?。?）調(diào)整布局單元格的位置2．調(diào)整布局表格的大小及位置（1）調(diào)整布局表格的大?。?）移動(dòng)布局表格9.1.5將內(nèi)容添加到布局單元格中在“布局”模式下，用戶可以將文本、圖像和其他內(nèi)容添加到布局單元格中，就像在“標(biāo)準(zhǔn)”模式下將內(nèi)容添加到表格單元格中一樣?！景咐?-1】制作世界名車展示網(wǎng)頁(yè)。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.4調(diào)整布局單元格和表格的大小及位置9.1使用

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)效果。9.2AP元素AP元素（絕對(duì)定位元素）是分配有絕對(duì)位置的HT9.2.1AP元素的基本操作AP元素的基本操作包括：創(chuàng)建AP元素、激活A(yù)P元素、選擇AP元素、移動(dòng)AP元素、調(diào)整AP元素的大小、對(duì)齊AP元素和設(shè)置AP元素的背景等。【案例9-2】使用AP元素和表格制作顯示一副對(duì)聯(lián)的網(wǎng)頁(yè)。9.2AP元素9.2.1AP元素的基本操作9.2AP元素

9.2.2將AP元素轉(zhuǎn)換為表格許多網(wǎng)頁(yè)設(shè)計(jì)人員更喜歡通過(guò)AP元素進(jìn)行頁(yè)面布局設(shè)計(jì)，而不是使用表格或布局模式創(chuàng)建頁(yè)面布局。Dreamweaver支持用戶使用AP元素創(chuàng)建頁(yè)面布局，然后將它們轉(zhuǎn)換為表格。如果用戶需要一個(gè)使用表格的頁(yè)面布局，最好使用Dreamweaver中的標(biāo)準(zhǔn)表格布局工具創(chuàng)建該頁(yè)面布局。當(dāng)然，用戶可以在AP元素和表格之間相互轉(zhuǎn)換，以調(diào)整布局并優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)。但是，需要注意的是，當(dāng)用戶將表格轉(zhuǎn)換回AP元素時(shí)，Dreamweaver會(huì)將此表格轉(zhuǎn)換回APDiv，此操作與對(duì)表格進(jìn)行轉(zhuǎn)換之前頁(yè)面上可能已有的AP元素的類型無(wú)關(guān)。另外，用戶不能轉(zhuǎn)換頁(yè)面上特定的表格或AP元素，必須將頁(yè)面上所有的AP元素轉(zhuǎn)換為表格。9.2AP元素9.2.2將AP元素轉(zhuǎn)換為表格9.2A

框架的作用就是把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)?？蚣苡煽蚣芗‵rameset）和單個(gè)框架（Frame）組成。9.3.1框架類型和框架面板1．框架類型Dreamweaver預(yù)定義了多種類型的框架結(jié)構(gòu)。在插入工具欄的“布局”分類中單擊“框架”按鈕，在彈出的菜單中，用戶可以選擇系統(tǒng)預(yù)定義的框架結(jié)構(gòu)。2．框架面板在操作框架的過(guò)程中，框架面板是非常有用的。使用框架面板可以進(jìn)行選取、觀察、修改框架等基本操作。因此在對(duì)框架操作時(shí)，框架面板最好一直打開(kāi)。9.3框架框架的作用就是把瀏覽器窗口劃分為若干個(gè)區(qū)域，9.3.2使用框架排版【案例9-3】制作一個(gè)使用框架排版的詩(shī)詞欣賞網(wǎng)頁(yè)?！景咐故尽宽?yè)面分為三個(gè)區(qū)域：上邊是網(wǎng)站主題區(qū)，左邊是導(dǎo)航區(qū)，右邊是內(nèi)容區(qū)。在瀏覽網(wǎng)頁(yè)時(shí)，單擊左邊的某個(gè)文本鏈接，則對(duì)應(yīng)的鏈接內(nèi)容在右邊顯示，而上邊的網(wǎng)站主題和左邊的導(dǎo)航欄目仍然保留在屏幕上，實(shí)例效果如圖9-37所示。9.3框架

9.3.2使用框架排版9.3框架

9.4.1Dreamweaver中CSS樣式的類型1．創(chuàng)建自定義類樣式創(chuàng)建自定義類樣式的方法如下。執(zhí)行“格式”→“CSS樣式”→“新建”菜單命令；在“CSS樣式”面板中，單擊面板右下側(cè)的“新建CSS規(guī)則”按鈕；在文檔窗口中選擇文本，從“屬性”面板的“目標(biāo)規(guī)則”下拉列表中選擇“新CSS規(guī)則”，然后單擊“編輯規(guī)則”按鈕，如圖9-48所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.1Dreamweaver中CSS樣式的類型2．創(chuàng)建僅應(yīng)用于一個(gè)HTML元素的樣式創(chuàng)建僅應(yīng)用于一個(gè)HTML元素的樣式的方法如下。①打開(kāi)“新建CSS規(guī)則”對(duì)話框。②在“新建CSS規(guī)則”對(duì)話框中，指定要?jiǎng)?chuàng)建的CSS規(guī)則的“選擇器類型”為“ID（僅應(yīng)用于一個(gè)HTML元素）”，然后在“選擇器名稱”框中輸入ID名稱，如#myhead1，如圖9-52所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.1Dreamweaver中CSS樣式的類型3．創(chuàng)建重定義HTML標(biāo)簽樣式①打開(kāi)“新建CSS規(guī)則”對(duì)話框。②在“新建CSS規(guī)則”對(duì)話框中，指定要?jiǎng)?chuàng)建的CSS規(guī)則的“選擇器類型”為“標(biāo)簽（重新定義HTML元素）”，然后在“選擇器名稱”框中輸入（或選擇）HTML元素的名稱，如h1，如圖9-53所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.1Dreamweaver中CSS樣式的類型4．創(chuàng)建鏈接樣式①打開(kāi)“新建CSS規(guī)則”對(duì)話框。②在“新建CSS規(guī)則”對(duì)話框中，指定要?jiǎng)?chuàng)建的CSS規(guī)則的“選擇器類型”為“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”，然后在“選擇器名稱”框中輸入（或選擇）超鏈接狀態(tài)的名稱，如a:link，如圖9-54所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.2Dreamweaver中使用CSS樣式表美化頁(yè)面【案例9-4】使用CSS樣式制作一個(gè)詩(shī)集精選的網(wǎng)頁(yè)。9.4樣式表

9.4.2Dreamweaver中使用CSS樣式表美化

9.5.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)更新。模板是由兩類區(qū)域組成的：鎖定區(qū)域和可編輯區(qū)域。當(dāng)?shù)谝淮蝿?chuàng)建模板時(shí)，所有的區(qū)域都是鎖定的。定義模板過(guò)程的一部分就是指定和命名可編輯的區(qū)域。然后，當(dāng)某個(gè)文檔從某些模板中創(chuàng)建時(shí)，可編輯的區(qū)域則成為惟一可以被改變的地方。當(dāng)然，模板可以進(jìn)行修改，以便標(biāo)記附加的編輯區(qū)域，或者重新鎖定可編輯區(qū)域。9.5模板9.5.1模板的基本概念9.5模板

9.5.2利用模板創(chuàng)建頁(yè)面【案例9-5】利用模板技術(shù)制作古代詩(shī)詞欣賞的系列頁(yè)面。9.5.3用模板更新整個(gè)站點(diǎn)當(dāng)創(chuàng)建了一個(gè)模板后，并且將該模板應(yīng)用于文檔時(shí)，就可以通過(guò)修改一個(gè)模板來(lái)控制所有應(yīng)用此模板的文檔?？梢詧?zhí)行以下操作之一更新站點(diǎn)：在文檔編輯窗口，執(zhí)行“修改”→“模板”→“更新頁(yè)面”命令，打開(kāi)“更新頁(yè)面”對(duì)話框。在文件面板中切換到“資源”選項(xiàng)卡，在左側(cè)的分類中選擇“模板”，打開(kāi)模板面板。在模板上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“更新站點(diǎn)”命令，打開(kāi)“更新頁(yè)面”對(duì)話框。在對(duì)話框的“查看”列表中選擇模板更新的范圍，在其后的列表中選擇需要更新的站點(diǎn)。默認(rèn)為當(dāng)前站點(diǎn)。9.5模板和庫(kù)9.5.2利用模板創(chuàng)建頁(yè)面9.5模板和庫(kù)1．使用布局視圖設(shè)計(jì)頁(yè)面。2．使用框架技術(shù)制作使用框架技術(shù)制作汽車主題網(wǎng)頁(yè)演示的框架網(wǎng)頁(yè)。3．使用CSS樣式表制作一個(gè)外框虛線，內(nèi)框?qū)嵕€的課程表。4．使用模板技術(shù)制作學(xué)校精品課程網(wǎng)頁(yè)，要求頁(yè)面上方的廣告條區(qū)域和頁(yè)面左側(cè)的導(dǎo)航菜單區(qū)域?yàn)殒i定區(qū)域，內(nèi)容區(qū)域?yàn)榭删庉媴^(qū)域。習(xí)題9

1．使用布局視圖設(shè)計(jì)頁(yè)面。習(xí)題9網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)

（第3版）網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)

（第3版）9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.2

AP元素 9.3框架9.4樣式表9.5

模板第9章設(shè)計(jì)Web頁(yè)面布局9.1使用布局模式對(duì)頁(yè)進(jìn)行布局第9章設(shè)計(jì)Web頁(yè)面布創(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提供了“布局”模式。在“布局”模式中，用戶可以使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)頁(yè)，同時(shí)避免了使用傳統(tǒng)的方法創(chuàng)建基于表格的設(shè)計(jì)時(shí)經(jīng)常出現(xiàn)的一些問(wèn)題。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局創(chuàng)建頁(yè)布局的一種常用的方法是使用HTML表格9.1.1“布局”模式的概念在“布局”模式中，用戶可以在添加內(nèi)容前使用布局單元格和表格來(lái)對(duì)頁(yè)面進(jìn)行布局。例如，用戶可以沿頁(yè)面的頂部繪制一個(gè)單元格用于放置標(biāo)題圖形，在頁(yè)面的左邊繪制另一個(gè)單元格用于放置導(dǎo)航條，在右邊繪制第三個(gè)單元格用于放置內(nèi)容。添加內(nèi)容時(shí)，可以按需要在其四周移動(dòng)單元格，以調(diào)整布局。頁(yè)面上顯示的布局表格外框?yàn)榫G色，而布局單元格外框?yàn)樗{(lán)色。當(dāng)用戶將鼠標(biāo)指針移到表格單元格上時(shí)，Dreamweaver會(huì)高亮顯示該單元格。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.1“布局”模式的概念9.1使用布局模式對(duì)頁(yè)進(jìn)9.1.2“標(biāo)準(zhǔn)”模式與“布局”模式的切換在繪制布局表格或布局單元格之前，必須從“標(biāo)準(zhǔn)”模式切換到“布局”模式。1．“標(biāo)準(zhǔn)”模式切換到“布局”模式要切換到“布局”模式，可以執(zhí)行以下操作之一：①如果用戶正在代碼視圖中工作，則選擇“查看”→“設(shè)計(jì)”菜單命令或“查看”→“代碼和設(shè)計(jì)”菜單命令。②選擇“查看”→“表格模式”→“布局模式”菜單命令，在文檔窗口的頂部會(huì)出現(xiàn)標(biāo)有“布局模式”的橫條。2．“布局”模式切換到“標(biāo)準(zhǔn)”模式要切換出“布局”模式，可以執(zhí)行以下操作之一：①在文檔窗口的頂部，單擊“布局模式”后的“退出”項(xiàng)，如圖9-3所示。②選擇“查看”→“表模式”→“標(biāo)準(zhǔn)模式”菜單命令。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.2“標(biāo)準(zhǔn)”模式與“布局”模式的切換9.1使用9.1.3在“布局”模式下繪制布局單元格和表格1．繪制布局單元格和表格（1）繪制布局單元格①確保設(shè)計(jì)處于“布局”模式下。②在插入面板的“布局”分類中單擊“繪制布局單元格”按鈕，鼠標(biāo)指針變?yōu)榧犹?hào)（+）形狀。③將鼠標(biāo)指針移到要開(kāi)始繪制單元格的位置單擊，然后按住鼠標(biāo)左鍵拖動(dòng)以創(chuàng)建布局單元格。（2）繪制布局表格①確保設(shè)計(jì)處于“布局”模式下。②在插入面板的“布局”分類中單擊“繪制布局表格”按鈕，鼠標(biāo)指針變?yōu)榧犹?hào)（+）形狀。③在頁(yè)面上單擊然后按住鼠標(biāo)左鍵拖動(dòng)以創(chuàng)建布局表格，在頁(yè)面上顯示的布局表格外框?yàn)榫G色。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.3在“布局”模式下繪制布局單元格和表格9.19.1.3在“布局”模式下繪制布局單元格和表格2．繪制嵌套布局表格用戶可以將一個(gè)布局表格繪制在另一個(gè)布局表格中，創(chuàng)建嵌套表格。對(duì)外部表格所進(jìn)行的更改不會(huì)影響嵌套表格中的單元格。例如，當(dāng)用戶更改外部表格中行或列的大小時(shí)，內(nèi)部表格中單元格的大小不發(fā)生變化。用戶可以插入多級(jí)嵌套表格，但要注意嵌套布局表格的大小不能超過(guò)包含它的表格。繪制嵌套布局表格的操作步驟如下。①確保設(shè)計(jì)處于“布局”模式下。②在插入面板的“布局”分類中單擊“繪制布局表格”按鈕，鼠標(biāo)指針變?yōu)榧犹?hào)（+）形狀。③在現(xiàn)有布局表格中的空白（灰色）區(qū)域中單擊，然后按住鼠標(biāo)左鍵拖動(dòng)以創(chuàng)建嵌套布局表格。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.3在“布局”模式下繪制布局單元格和表格9.19.1.4調(diào)整布局單元格和表格的大小及位置1．調(diào)整布局單元格的大小及位置（1）調(diào)整布局單元格的大?。?）調(diào)整布局單元格的位置2．調(diào)整布局表格的大小及位置（1）調(diào)整布局表格的大?。?）移動(dòng)布局表格9.1.5將內(nèi)容添加到布局單元格中在“布局”模式下，用戶可以將文本、圖像和其他內(nèi)容添加到布局單元格中，就像在“標(biāo)準(zhǔn)”模式下將內(nèi)容添加到表格單元格中一樣?！景咐?-1】制作世界名車展示網(wǎng)頁(yè)。9.1使用布局模式對(duì)頁(yè)進(jìn)行布局9.1.4調(diào)整布局單元格和表格的大小及位置9.1使用

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)效果。9.2AP元素AP元素（絕對(duì)定位元素）是分配有絕對(duì)位置的HT9.2.1AP元素的基本操作AP元素的基本操作包括：創(chuàng)建AP元素、激活A(yù)P元素、選擇AP元素、移動(dòng)AP元素、調(diào)整AP元素的大小、對(duì)齊AP元素和設(shè)置AP元素的背景等?！景咐?-2】使用AP元素和表格制作顯示一副對(duì)聯(lián)的網(wǎng)頁(yè)。9.2AP元素9.2.1AP元素的基本操作9.2AP元素

9.2.2將AP元素轉(zhuǎn)換為表格許多網(wǎng)頁(yè)設(shè)計(jì)人員更喜歡通過(guò)AP元素進(jìn)行頁(yè)面布局設(shè)計(jì)，而不是使用表格或布局模式創(chuàng)建頁(yè)面布局。Dreamweaver支持用戶使用AP元素創(chuàng)建頁(yè)面布局，然后將它們轉(zhuǎn)換為表格。如果用戶需要一個(gè)使用表格的頁(yè)面布局，最好使用Dreamweaver中的標(biāo)準(zhǔn)表格布局工具創(chuàng)建該頁(yè)面布局。當(dāng)然，用戶可以在AP元素和表格之間相互轉(zhuǎn)換，以調(diào)整布局并優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)。但是，需要注意的是，當(dāng)用戶將表格轉(zhuǎn)換回AP元素時(shí)，Dreamweaver會(huì)將此表格轉(zhuǎn)換回APDiv，此操作與對(duì)表格進(jìn)行轉(zhuǎn)換之前頁(yè)面上可能已有的AP元素的類型無(wú)關(guān)。另外，用戶不能轉(zhuǎn)換頁(yè)面上特定的表格或AP元素，必須將頁(yè)面上所有的AP元素轉(zhuǎn)換為表格。9.2AP元素9.2.2將AP元素轉(zhuǎn)換為表格9.2A

框架的作用就是把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)?？蚣苡煽蚣芗‵rameset）和單個(gè)框架（Frame）組成。9.3.1框架類型和框架面板1．框架類型Dreamweaver預(yù)定義了多種類型的框架結(jié)構(gòu)。在插入工具欄的“布局”分類中單擊“框架”按鈕，在彈出的菜單中，用戶可以選擇系統(tǒng)預(yù)定義的框架結(jié)構(gòu)。2．框架面板在操作框架的過(guò)程中，框架面板是非常有用的。使用框架面板可以進(jìn)行選取、觀察、修改框架等基本操作。因此在對(duì)框架操作時(shí)，框架面板最好一直打開(kāi)。9.3框架框架的作用就是把瀏覽器窗口劃分為若干個(gè)區(qū)域，9.3.2使用框架排版【案例9-3】制作一個(gè)使用框架排版的詩(shī)詞欣賞網(wǎng)頁(yè)?！景咐故尽宽?yè)面分為三個(gè)區(qū)域：上邊是網(wǎng)站主題區(qū)，左邊是導(dǎo)航區(qū)，右邊是內(nèi)容區(qū)。在瀏覽網(wǎng)頁(yè)時(shí)，單擊左邊的某個(gè)文本鏈接，則對(duì)應(yīng)的鏈接內(nèi)容在右邊顯示，而上邊的網(wǎng)站主題和左邊的導(dǎo)航欄目仍然保留在屏幕上，實(shí)例效果如圖9-37所示。9.3框架

9.3.2使用框架排版9.3框架

9.4.1Dreamweaver中CSS樣式的類型1．創(chuàng)建自定義類樣式創(chuàng)建自定義類樣式的方法如下。執(zhí)行“格式”→“CSS樣式”→“新建”菜單命令；在“CSS樣式”面板中，單擊面板右下側(cè)的“新建CSS規(guī)則”按鈕；在文檔窗口中選擇文本，從“屬性”面板的“目標(biāo)規(guī)則”下拉列表中選擇“新CSS規(guī)則”，然后單擊“編輯規(guī)則”按鈕，如圖9-48所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.1Dreamweaver中CSS樣式的類型2．創(chuàng)建僅應(yīng)用于一個(gè)HTML元素的樣式創(chuàng)建僅應(yīng)用于一個(gè)HTML元素的樣式的方法如下。①打開(kāi)“新建CSS規(guī)則”對(duì)話框。②在“新建CSS規(guī)則”對(duì)話框中，指定要?jiǎng)?chuàng)建的CSS規(guī)則的“選擇器類型”為“ID（僅應(yīng)用于一個(gè)HTML元素）”，然后在“選擇器名稱”框中輸入ID名稱，如#myhead1，如圖9-52所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.1Dreamweaver中CSS樣式的類型3．創(chuàng)建重定義HTML標(biāo)簽樣式①打開(kāi)“新建CSS規(guī)則”對(duì)話框。②在“新建CSS規(guī)則”對(duì)話框中，指定要?jiǎng)?chuàng)建的CSS規(guī)則的“選擇器類型”為“標(biāo)簽（重新定義HTML元素）”，然后在“選擇器名稱”框中輸入（或選擇）HTML元素的名稱，如h1，如圖9-53所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局

9.4.1Dreamweaver中CSS樣式的類型9.

9.4.1Dreamweaver中CSS樣式的類型4．創(chuàng)建鏈接樣式①打開(kāi)“新建CSS規(guī)則”對(duì)話框。②在“新建CSS規(guī)則”對(duì)話框中，指定要?jiǎng)?chuàng)建的CSS規(guī)則的“選擇器類型”為“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”，然后在“選擇器名稱”框中輸入（或選擇）超鏈接狀態(tài)的名稱，如a:link，如圖9-54所示。9.4使用CSS對(duì)頁(yè)進(jìn)行布局