頁面布局設(shè)計(jì)

1、網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁版面布局概述網(wǎng)頁版面布局概述實(shí)例導(dǎo)入：表格排版網(wǎng)頁實(shí)例導(dǎo)入：表格排版網(wǎng)頁使用表格排版使用表格排版使用層排版使用層排版時間軸特效及行為時間軸特效及行為使用框架排版網(wǎng)頁使用框架排版網(wǎng)頁4.1 網(wǎng)頁版面布局概述 網(wǎng)頁版面布局是網(wǎng)頁設(shè)計(jì)中的一項(xiàng)重要內(nèi)容。版面指的是網(wǎng)頁版面布局是網(wǎng)頁設(shè)計(jì)中的一項(xiàng)重要內(nèi)容。版面指的是瀏覽器看到的完整的一個頁面。因?yàn)槊總€人的顯示器分辨率不瀏覽器看到的完整的一個頁面。因?yàn)槊總€人的顯示器分辨率不同，所以同一個頁面的分辨率可能出現(xiàn)同，所以同一個頁面的分辨率可能出現(xiàn)800800* *600600像素，像素，1024

2、1024* *768768像素等。布局，就是以最適合瀏覽的方式將圖片和文像素等。布局，就是以最適合瀏覽的方式將圖片和文字?jǐn)[放在頁面的不同位置。網(wǎng)頁版面布局是指定網(wǎng)頁內(nèi)容在瀏字?jǐn)[放在頁面的不同位置。網(wǎng)頁版面布局是指定網(wǎng)頁內(nèi)容在瀏覽器中的顯示方式，例如徽標(biāo)的位置、導(dǎo)航欄的顯示、主要內(nèi)覽器中的顯示方式，例如徽標(biāo)的位置、導(dǎo)航欄的顯示、主要內(nèi)容的排版等。經(jīng)常用到的版面布局結(jié)構(gòu)主要有以下幾種：容的排版等。經(jīng)常用到的版面布局結(jié)構(gòu)主要有以下幾種：v “T”T”結(jié)構(gòu)布局結(jié)構(gòu)布局 頁面頂部為橫條的網(wǎng)站標(biāo)志、廣告條，下方左面為主菜單，頁面頂部為橫條的網(wǎng)站標(biāo)志、廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l

3、的背景較深，整體效果類似右面顯示內(nèi)容的布局，因?yàn)椴藛螚l的背景較深，整體效果類似英文字母英文字母“T”T”，這是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式。，這是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)和色彩上不注意，上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)和色彩上不注意，很容易讓人很容易讓人“看之無味看之無味”。v “口口”型布局型布局 這是一個象形的說法，就是頁面一般上下各有一個廣這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面是友情連

4、接等，中間是主要內(nèi)告條，左面是主菜單，右面是友情連接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是頁面擁擠，不夠靈活。頁面擁擠，不夠靈活。 “ “三三”型布局型布局 這種布局多用于國外站點(diǎn)，國內(nèi)用的不多。特點(diǎn)是頁這種布局多用于國外站點(diǎn)，國內(nèi)用的不多。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。多放廣告條。4.1 網(wǎng)頁版面布局概述4.1 網(wǎng)頁版面布局概述v POPPOP布局布局 POPPOP引自廣告術(shù)語，就是指頁面布局像一張宣傳海報，引自廣告術(shù)語，就是

5、指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計(jì)中心。常用于時尚類站點(diǎn)，以一張精美圖片作為頁面的設(shè)計(jì)中心。常用于時尚類站點(diǎn)，比如比如ELLE.comELLE.com。優(yōu)點(diǎn)顯而易見。優(yōu)點(diǎn)顯而易見: :漂亮吸引人。缺點(diǎn)就是速漂亮吸引人。缺點(diǎn)就是速度慢。度慢。 在確定好版面布局結(jié)構(gòu)后，繼續(xù)要做的就是根據(jù)內(nèi)容在確定好版面布局結(jié)構(gòu)后，繼續(xù)要做的就是根據(jù)內(nèi)容調(diào)整頁面的結(jié)構(gòu)。如頁面尺寸選擇多大？怎樣放置網(wǎng)頁的調(diào)整頁面的結(jié)構(gòu)。如頁面尺寸選擇多大？怎樣放置網(wǎng)頁的網(wǎng)頁元素？在網(wǎng)頁元素？在DreamweaverDreamweaver中提供了四種主要的方法用于中提供了四種主要的方法用于規(guī)劃和設(shè)計(jì)頁面：表格、層、

6、框架和規(guī)劃和設(shè)計(jì)頁面：表格、層、框架和CSS+DIVCSS+DIV，本章只介，本章只介紹前三種方式。紹前三種方式。 4.2 實(shí)例導(dǎo)入：表格排版網(wǎng)頁4.2 實(shí)例導(dǎo)入：表格排版網(wǎng)頁 在網(wǎng)頁設(shè)計(jì)中，表格以簡潔明了和高效快捷的方式將在網(wǎng)頁設(shè)計(jì)中，表格以簡潔明了和高效快捷的方式將網(wǎng)頁設(shè)計(jì)的各種元素有序地組織在一起，使整個網(wǎng)頁井井網(wǎng)頁設(shè)計(jì)的各種元素有序地組織在一起，使整個網(wǎng)頁井井有條而不至于雜亂無章。有條而不至于雜亂無章。 【例【例4.14.1】某生物工程公司網(wǎng)站，在本實(shí)例中，主要】某生物工程公司網(wǎng)站，在本實(shí)例中，主要涉及以下知識點(diǎn)：涉及以下知識點(diǎn)：v 頁面采用表格進(jìn)行整體布局，表格劃分為若干個單元格，頁

7、面采用表格進(jìn)行整體布局，表格劃分為若干個單元格，在單元格內(nèi)填充網(wǎng)頁元素，實(shí)現(xiàn)網(wǎng)頁的布局；在單元格內(nèi)填充網(wǎng)頁元素，實(shí)現(xiàn)網(wǎng)頁的布局；v 通過定義網(wǎng)頁的背景圖片達(dá)到美化網(wǎng)頁的效果；通過定義網(wǎng)頁的背景圖片達(dá)到美化網(wǎng)頁的效果；v 該頁的欄目導(dǎo)航采用該頁的欄目導(dǎo)航采用 “ “導(dǎo)航條導(dǎo)航條”效果。效果。使用表格排版v 表格是由一些被線條分開的單元格組成。線條即表格的邊表格是由一些被線條分開的單元格組成。線條即表格的邊框，被邊框分開的區(qū)域被稱為單元格，數(shù)據(jù)、文字、圖像框，被邊框分開的區(qū)域被稱為單元格，數(shù)據(jù)、文字、圖像等網(wǎng)頁元素均可根據(jù)需要放置在相應(yīng)的單元格中。如圖所等網(wǎng)頁元素均可根據(jù)需要放置在相應(yīng)的單元格中。

8、如圖所示。示。v 在網(wǎng)頁中使用表格一般有兩種情況：一種是在需要組織數(shù)在網(wǎng)頁中使用表格一般有兩種情況：一種是在需要組織數(shù)據(jù)顯示時用；另一種是在布局網(wǎng)頁時用。當(dāng)表格被用作布據(jù)顯示時用；另一種是在布局網(wǎng)頁時用。當(dāng)表格被用作布局時，需要對表格的屬性進(jìn)行設(shè)置。局時，需要對表格的屬性進(jìn)行設(shè)置。 表格在網(wǎng)頁中通常存在兩種形式：一種是獨(dú)立的形式表格在網(wǎng)頁中通常存在兩種形式：一種是獨(dú)立的形式存在，二是以嵌套的形式存在。存在，二是以嵌套的形式存在。1 1、插入獨(dú)立表格、插入獨(dú)立表格v 插入表格一般有兩種方法插入表格一般有兩種方法 方法一：單擊方法一：單擊“插入插入”欄欄“常用常用”選項(xiàng)選項(xiàng)“表格表格”按鈕；按鈕；

9、 方法二：選擇方法二：選擇“插入插入”菜單菜單|“|“表格表格”命令；彈出命令；彈出“表格表格”對話框?qū)υ捒?v2.2.插入嵌套表格插入嵌套表格 在網(wǎng)頁中為了保證各部分內(nèi)容之間相對獨(dú)立性，而在網(wǎng)頁中為了保證各部分內(nèi)容之間相對獨(dú)立性，而不會因?yàn)榫庉嬈渌鼉?nèi)容的同時被修改，表格的嵌套形式不會因?yàn)榫庉嬈渌鼉?nèi)容的同時被修改，表格的嵌套形式在網(wǎng)頁中普遍存在。一般，網(wǎng)頁有一個大的外層表格，在網(wǎng)頁中普遍存在。一般，網(wǎng)頁有一個大的外層表格，按區(qū)域劃分為若干單元格，然后在區(qū)域單元格中再插入按區(qū)域劃分為若干單元格，然后在區(qū)域單元格中再插入嵌套表格，這樣各區(qū)域的排版即規(guī)范又靈活。其操作步嵌套表格，這樣各區(qū)域的排版即規(guī)

10、范又靈活。其操作步驟如下：光標(biāo)放在表格的某個單元格內(nèi)，再單擊驟如下：光標(biāo)放在表格的某個單元格內(nèi)，再單擊“插入插入”欄欄“常用常用”選項(xiàng)選項(xiàng)“表格表格”按鈕。按鈕。v . .編輯表格編輯表格 增加行與列增加行與列 刪除行或列刪除行或列 格式化表格格式化表格 排序表格排序表格 導(dǎo)入與導(dǎo)出表格數(shù)據(jù)導(dǎo)入與導(dǎo)出表格數(shù)據(jù)1 1、表格屬性設(shè)置、表格屬性設(shè)置v要對表格進(jìn)行屬性設(shè)置，必須首先選中表格，選中表格要對表格進(jìn)行屬性設(shè)置，必須首先選中表格，選中表格的常用方法有以下四種：的常用方法有以下四種：v方法一：將光標(biāo)置于表格內(nèi)，單擊方法一：將光標(biāo)置于表格內(nèi)，單擊“文檔文檔”窗口左下角窗口左下角的的標(biāo)簽選中整個表格

11、。標(biāo)簽選中整個表格。v方法二：將鼠標(biāo)指針移動到表格的邊框處，單擊鼠標(biāo)左方法二：將鼠標(biāo)指針移動到表格的邊框處，單擊鼠標(biāo)左鍵選中表格。鍵選中表格。v方法三：將光標(biāo)置于表格內(nèi)，選擇方法三：將光標(biāo)置于表格內(nèi)，選擇“修改修改”菜單菜單|“|“表表格格”|“|“選擇表格選擇表格”命令，選中表格。命令，選中表格。v 方法四：將光標(biāo)置于表格內(nèi)，單擊鼠標(biāo)右鍵，在彈出菜單方法四：將光標(biāo)置于表格內(nèi)，單擊鼠標(biāo)右鍵，在彈出菜單中，選擇中，選擇 “ “表格表格”|“|“選擇表格選擇表格”命令，選中表格。選中命令，選中表格。選中表格后，在表格后，在“屬性屬性”面板中設(shè)置表格的屬性，如圖所示。面板中設(shè)置表格的屬性，如圖所示。

12、2.2.單元格屬性的設(shè)置單元格屬性的設(shè)置v 光標(biāo)放在單元格內(nèi)，在光標(biāo)放在單元格內(nèi)，在“屬性屬性”面板中設(shè)置單元格屬性。面板中設(shè)置單元格屬性。如圖所示，如圖所示，“屬性屬性”面板分為上下兩部分，上半部分是對面板分為上下兩部分，上半部分是對單元格中對象的屬性設(shè)置，下半部分是對單元格屬性的設(shè)單元格中對象的屬性設(shè)置，下半部分是對單元格屬性的設(shè)置。置。v 另外對單元格還可進(jìn)行拆分和合并單元格的操作。另外對單元格還可進(jìn)行拆分和合并單元格的操作。 表格是能將網(wǎng)頁元素按設(shè)計(jì)者要求的方式顯示的一種表格是能將網(wǎng)頁元素按設(shè)計(jì)者要求的方式顯示的一種排版技術(shù)。通過單元格的拆分、合并以及在單元格中插入排版技術(shù)。通過單元格

13、的拆分、合并以及在單元格中插入嵌套表格等方法對網(wǎng)頁元素進(jìn)行更細(xì)致的控制。其操作步嵌套表格等方法對網(wǎng)頁元素進(jìn)行更細(xì)致的控制。其操作步驟如下：驟如下： 步驟步驟1 1插入一個表格，按照事先考慮好的版面設(shè)計(jì)插入一個表格，按照事先考慮好的版面設(shè)計(jì)將表格劃分為幾個大的單元格，設(shè)置合適的寬度，邊框設(shè)將表格劃分為幾個大的單元格，設(shè)置合適的寬度，邊框設(shè)置為，使邊框不可見，需要時可在單元格中插入嵌套表置為，使邊框不可見，需要時可在單元格中插入嵌套表格，同樣將邊框設(shè)為，使邊框不可見。格，同樣將邊框設(shè)為，使邊框不可見。 步驟步驟2 2向各個單元格中加入網(wǎng)頁元素，編輯完畢后向各個單元格中加入網(wǎng)頁元素，編輯完畢后保存文

14、檔。保存文檔。使用表格構(gòu)造網(wǎng)頁布局時應(yīng)遵循如下原則：使用表格構(gòu)造網(wǎng)頁布局時應(yīng)遵循如下原則：v 要規(guī)劃好再運(yùn)行，甚至要進(jìn)行無數(shù)次的實(shí)驗(yàn)和重復(fù)運(yùn)行才要規(guī)劃好再運(yùn)行，甚至要進(jìn)行無數(shù)次的實(shí)驗(yàn)和重復(fù)運(yùn)行才能制作出好的頁面框架。能制作出好的頁面框架。v 從外向內(nèi)工作。先建立最大的表格，再在它內(nèi)部創(chuàng)建嵌套從外向內(nèi)工作。先建立最大的表格，再在它內(nèi)部創(chuàng)建嵌套的較小表格。的較小表格。v 在外部使用絕計(jì)像素方法，在內(nèi)部使用相對百分比方法。在外部使用絕計(jì)像素方法，在內(nèi)部使用相對百分比方法。 為了簡化使用表格進(jìn)行頁面布局的過程，在為了簡化使用表格進(jìn)行頁面布局的過程，在DreamweaverDreamweaver提供了布

15、局模式。在布局模式下，使用布局提供了布局模式。在布局模式下，使用布局表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計(jì)網(wǎng)頁，在布局表格中創(chuàng)建布局單表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計(jì)網(wǎng)頁，在布局表格中創(chuàng)建布局單元格，然后插入網(wǎng)頁元素。元格，然后插入網(wǎng)頁元素。 在布局模式下，使用表格進(jìn)行布局具有定位簡單、容在布局模式下，使用表格進(jìn)行布局具有定位簡單、容易調(diào)整等優(yōu)點(diǎn)。例如：在布局模式中可以在頁面上方便地易調(diào)整等優(yōu)點(diǎn)。例如：在布局模式中可以在頁面上方便地繪制布局單元格，可將這些單元格拖動到所需的位置；還繪制布局單元格，可將這些單元格拖動到所需的位置；還可以方便地創(chuàng)建固定寬度的布局或自動伸展為整個瀏覽器可以方便地創(chuàng)建固定寬度的布局或自動伸展為

16、整個瀏覽器窗口寬度的布局。窗口寬度的布局。 1 1、繪制布局表格與布局單元格、繪制布局表格與布局單元格 首先從標(biāo)準(zhǔn)模式切換到布局模式：單擊首先從標(biāo)準(zhǔn)模式切換到布局模式：單擊“插入插入”欄欄“布局布局”選項(xiàng)選項(xiàng)“布局模式布局模式”按鈕。切換到布局模按鈕。切換到布局模式后，就可以創(chuàng)建布局表格，并在其中添加布局單元格。式后，就可以創(chuàng)建布局表格，并在其中添加布局單元格。要說明的是，布局單元格不能在布局表格之外，同一個要說明的是，布局單元格不能在布局表格之外，同一個布局表格中可放置多個布局單元格，布局表格可嵌套。布局表格中可放置多個布局單元格，布局表格可嵌套。操作步驟如下：操作步驟如下： 步驟步驟1 1

17、單擊單擊“繪制表格繪制表格”按鈕，鼠標(biāo)在頁面上變按鈕，鼠標(biāo)在頁面上變?yōu)闉椤?”+”形，按下鼠標(biāo)左鍵拖動可繪制布局表格。形，按下鼠標(biāo)左鍵拖動可繪制布局表格。 步驟步驟2 2單擊單擊“繪制布局單元格繪制布局單元格”按鈕，鼠標(biāo)在頁按鈕，鼠標(biāo)在頁面上變?yōu)槊嫔献優(yōu)椤?”+”形，按下鼠標(biāo)左鍵拖動可繪制布局單形，按下鼠標(biāo)左鍵拖動可繪制布局單元格。元格。如圖所示：如圖所示： 本小節(jié)講解【例本小節(jié)講解【例4.14.1】利用表格進(jìn)行網(wǎng)頁布局的制作】利用表格進(jìn)行網(wǎng)頁布局的制作過程。作為專業(yè)的設(shè)計(jì)者，首先利用圖形制作軟件如：過程。作為專業(yè)的設(shè)計(jì)者，首先利用圖形制作軟件如：FireworksFireworks、Phot

18、oshopPhotoshop等，繪制一張網(wǎng)頁草圖，然后根據(jù)等，繪制一張網(wǎng)頁草圖，然后根據(jù)網(wǎng)頁草圖利用表格對網(wǎng)頁進(jìn)行排版。網(wǎng)頁草圖利用表格對網(wǎng)頁進(jìn)行排版。 4.4 使用層排版v 除了表格以外，層是另外一種定位網(wǎng)頁元素的方法。除了表格以外，層是另外一種定位網(wǎng)頁元素的方法。本節(jié)介紹層的概念和操作，并通過一個實(shí)例說明如何利用本節(jié)介紹層的概念和操作，并通過一個實(shí)例說明如何利用層進(jìn)行頁面布局的設(shè)計(jì)。層進(jìn)行頁面布局的設(shè)計(jì)。4.4.1 實(shí)例導(dǎo)入：層排版網(wǎng)頁 Dreamweaver Dreamweaver中的層是一種網(wǎng)頁元素定位技術(shù)，它可中的層是一種網(wǎng)頁元素定位技術(shù)，它可以包含文字、圖像、表格、插件甚至其它層。

19、一個網(wǎng)頁中以包含文字、圖像、表格、插件甚至其它層。一個網(wǎng)頁中可以含有多個層，層的特點(diǎn)在于各個層之間可以重疊，并可以含有多個層，層的特點(diǎn)在于各個層之間可以重疊，并可以決定每個層是否可見，還可以定義各個層之間的層次可以決定每個層是否可見，還可以定義各個層之間的層次關(guān)系。層可以轉(zhuǎn)換成表格，通過與關(guān)系。層可以轉(zhuǎn)換成表格，通過與“時間軸時間軸”及行為的結(jié)及行為的結(jié)合，能夠?qū)崿F(xiàn)動態(tài)交互效果。合，能夠?qū)崿F(xiàn)動態(tài)交互效果。4.4.1 實(shí)例導(dǎo)入：層排版網(wǎng)頁【例【例4.24.2】八珍食府網(wǎng)站首頁，本網(wǎng)頁實(shí)例采用了層排版網(wǎng)】八珍食府網(wǎng)站首頁，本網(wǎng)頁實(shí)例采用了層排版網(wǎng)頁，時間軸與行為結(jié)合制作了網(wǎng)頁動態(tài)效果，如圖所示。頁

20、，時間軸與行為結(jié)合制作了網(wǎng)頁動態(tài)效果，如圖所示。在本實(shí)例中，主要涉及以下知識點(diǎn)：在本實(shí)例中，主要涉及以下知識點(diǎn)：v 以層作為頁面布局的工具，設(shè)置層的背景顏色、大小及位以層作為頁面布局的工具，設(shè)置層的背景顏色、大小及位置；置；v 調(diào)整層與層間的相對關(guān)系，通過調(diào)整層與層間的相對關(guān)系，通過“Z”Z”值設(shè)置層的疊放順值設(shè)置層的疊放順序；序；v 向?qū)觾?nèi)添加圖像、向?qū)觾?nèi)添加圖像、FLASHFLASH動畫、文本、表格等網(wǎng)頁元素；動畫、文本、表格等網(wǎng)頁元素；v 利用時間軸和行為制作網(wǎng)頁動態(tài)效果。利用時間軸和行為制作網(wǎng)頁動態(tài)效果。4.4.1 實(shí)例導(dǎo)入：層排版網(wǎng)頁4.4.2 插入層和編輯層1 1、插入層、插入層

21、在在DreamweaverDreamweaver中，插入層的方法有多種，常用的方中，插入層的方法有多種，常用的方法有以下兩種：法有以下兩種：v 方法一：將光標(biāo)放置在需要插入層的地方，選擇方法一：將光標(biāo)放置在需要插入層的地方，選擇“插插入入”菜單菜單“布局對象布局對象”“層層”命令，在命令，在“文檔文檔”窗口窗口中插入一個空的預(yù)設(shè)大小的層。中插入一個空的預(yù)設(shè)大小的層。 v 方法二：方法二： 單擊單擊“插入插入”欄欄“布局布局”選項(xiàng)選項(xiàng)“描繪描繪層層”按鈕，移動鼠標(biāo)到按鈕，移動鼠標(biāo)到“文檔文檔”窗口，當(dāng)鼠標(biāo)變成窗口，當(dāng)鼠標(biāo)變成“”形狀，單擊鼠標(biāo)左鍵并拖動，即創(chuàng)建了層，如圖所示。形狀，單擊鼠標(biāo)左鍵并

22、拖動，即創(chuàng)建了層，如圖所示。4.4.2 插入層和編輯層2 2、層的關(guān)系、層的關(guān)系v 如果兩個層有交叉，它們有兩種關(guān)系：重疊與嵌套。如果兩個層有交叉，它們有兩種關(guān)系：重疊與嵌套。重疊就是位置上有重疊，但兩個層是獨(dú)立的，一個層發(fā)生重疊就是位置上有重疊，但兩個層是獨(dú)立的，一個層發(fā)生變化時，不影響另外一個層，而嵌套時，子層會隨著父層變化時，不影響另外一個層，而嵌套時，子層會隨著父層的某些屬性的變化而變化，而父層不隨子層發(fā)生變化。的某些屬性的變化而變化，而父層不隨子層發(fā)生變化。3 3、創(chuàng)建嵌套層、創(chuàng)建嵌套層v 層的嵌套和表格的嵌套有些類似，就是在層里面再建層的嵌套和表格的嵌套有些類似，就是在層里面再建立

23、一個層。創(chuàng)建嵌套層常用的方法有以下三種：立一個層。創(chuàng)建嵌套層常用的方法有以下三種： 方法一：光標(biāo)放在當(dāng)前層中，選擇方法一：光標(biāo)放在當(dāng)前層中，選擇“插入插入”菜單菜單“布局對象布局對象”“層層”命令。命令。 方法二：選中當(dāng)前層，單擊方法二：選中當(dāng)前層，單擊“插入插入”欄欄“布局布局”選選項(xiàng)項(xiàng)“繪制層繪制層”按鈕，同時按下按鈕，同時按下AltAlt鍵繪制層。鍵繪制層。 方法三：打開方法三：打開“層層”面板，按下面板，按下CtrlCtrl鍵，將某一層拖鍵，將某一層拖動到另一層位置。動到另一層位置。4.4.2 插入層和編輯層4 4、層的屬性設(shè)置、層的屬性設(shè)置 設(shè)置層的屬性時，首先要選中層。選中層的常用

24、方法設(shè)置層的屬性時，首先要選中層。選中層的常用方法有以下三種：有以下三種： 方法一：單擊層邊框線。方法一：單擊層邊框線。 方法二：單擊層錨記。方法二：單擊層錨記。 方法三：單擊方法三：單擊“層層”面板上的層名稱。面板上的層名稱。 當(dāng)層被選中后，周圍出現(xiàn)控制手柄，層錨記變?yōu)樗{(lán)色當(dāng)層被選中后，周圍出現(xiàn)控制手柄，層錨記變?yōu)樗{(lán)色顯示。要同時選擇多個層，按下顯示。要同時選擇多個層，按下ShiftShift鍵，連續(xù)單擊要選擇鍵，連續(xù)單擊要選擇的層。選中層后，通過的層。選中層后，通過“屬性屬性”面板進(jìn)行屬性設(shè)置，如圖面板進(jìn)行屬性設(shè)置，如圖所示。所示。4.4.2 插入層和編輯層5 5、層的操作、層的操作v （

25、1 1） 層的移動層的移動 操作步驟如下：選中層，拖動到合適的位置。操作步驟如下：選中層，拖動到合適的位置。v （2 2）層的對齊）層的對齊 選中多個層，選擇選中多個層，選擇“修改修改”菜單菜單|“|“排列順序排列順序”某某項(xiàng)項(xiàng)“對齊方式對齊方式”命令。對齊方式：左對齊、右對齊、對齊命令。對齊方式：左對齊、右對齊、對齊上緣、對齊下緣等，如圖上緣、對齊下緣等，如圖4.284.28所示，設(shè)定層的對齊方式時，所示，設(shè)定層的對齊方式時，以最后一個選中的層的上、下、左、右邊界為對齊參考點(diǎn)。以最后一個選中的層的上、下、左、右邊界為對齊參考點(diǎn)。4.4.2 插入層和編輯層v （3 3）改變層的順序）改變層的順

26、序 當(dāng)網(wǎng)頁中出現(xiàn)多個層時，就會出現(xiàn)重疊現(xiàn)象。那么層當(dāng)網(wǎng)頁中出現(xiàn)多個層時，就會出現(xiàn)重疊現(xiàn)象。那么層的疊放順序會影響其顯示效果。改變層順序的常用方法有的疊放順序會影響其顯示效果。改變層順序的常用方法有以下兩種：以下兩種： 方法一：選中層，在方法一：選中層，在“屬性屬性”面板中，面板中，Z Z軸文本框中軸文本框中輸入數(shù)值來決定層的疊放順序。其值越大越靠上，如果其輸入數(shù)值來決定層的疊放順序。其值越大越靠上，如果其為負(fù)值，表示層位于頁面之下，頁面中的內(nèi)容將會覆蓋層為負(fù)值，表示層位于頁面之下，頁面中的內(nèi)容將會覆蓋層中的內(nèi)容。中的內(nèi)容。 方法二：在方法二：在“層層”面板中雙擊面板中雙擊Z Z軸的值，修改此值

27、；軸的值，修改此值；或是直接拖動層，改變它們的上下位置，或是直接拖動層，改變它們的上下位置，Z Z軸值會自動變軸值會自動變化?；?.4.2 插入層和編輯層v （4 4）顯示和隱藏層）顯示和隱藏層 選中層，選擇選中層，選擇“窗口窗口”菜單菜單“層層”命令，打開命令，打開“層層”面板，單擊面板，單擊“層層”面板上的眼睛圖標(biāo)，眼睛睜開為顯示層，面板上的眼睛圖標(biāo)，眼睛睜開為顯示層，眼眼閉上為隱藏層，無眼睛圖標(biāo)表示可見性為默認(rèn)，眼眼閉上為隱藏層，無眼睛圖標(biāo)表示可見性為默認(rèn)， v （5 5）層與表格的相互轉(zhuǎn)換）層與表格的相互轉(zhuǎn)換 由于層所具有的靈活性是表格所無法比擬的，因此可由于層所具有的靈活性是表格所

28、無法比擬的，因此可以通過在層中添加內(nèi)容，使其布局在頁面中任何位置，而以通過在層中添加內(nèi)容，使其布局在頁面中任何位置，而且不會使其它頁面元素受到影響。但由于它缺乏緊湊性，且不會使其它頁面元素受到影響。但由于它缺乏緊湊性，在不同瀏覽器顯示，可能會發(fā)生層的位置偏移，因此在不同瀏覽器顯示，可能會發(fā)生層的位置偏移，因此DreamweaverDreamweaver提供了層與表格互相轉(zhuǎn)換功能，以結(jié)合各自提供了層與表格互相轉(zhuǎn)換功能，以結(jié)合各自的優(yōu)點(diǎn)更好地進(jìn)行網(wǎng)頁設(shè)計(jì)操作。的優(yōu)點(diǎn)更好地進(jìn)行網(wǎng)頁設(shè)計(jì)操作。 本小節(jié)講解【例本小節(jié)講解【例4.24.2】利用層技術(shù)進(jìn)行網(wǎng)頁布局的制作】利用層技術(shù)進(jìn)行網(wǎng)頁布局的制作過程，分

29、辨率設(shè)置為過程，分辨率設(shè)置為10241024* *768768，此網(wǎng)頁共創(chuàng)建了，此網(wǎng)頁共創(chuàng)建了5 5個層相互個層相互重疊重疊 。v 時間軸是一條貫穿時間的線，用于表示網(wǎng)頁存活時間時間軸是一條貫穿時間的線，用于表示網(wǎng)頁存活時間中發(fā)生的各種狀態(tài)。通過在這條時間軸上的不同時間放置中發(fā)生的各種狀態(tài)。通過在這條時間軸上的不同時間放置的不同內(nèi)容，就可以實(shí)現(xiàn)網(wǎng)頁元素的動態(tài)效果。的不同內(nèi)容，就可以實(shí)現(xiàn)網(wǎng)頁元素的動態(tài)效果。v Dreamweaver Dreamweaver提供了一種簡潔而且快捷的方式，無須提供了一種簡潔而且快捷的方式，無須編寫任何代碼便可以快速在編寫任何代碼便可以快速在HTMLHTML代碼中嵌入

30、代碼中嵌入JavaScriptJavaScript腳腳本語言實(shí)現(xiàn)特效，這就是行為。本語言實(shí)現(xiàn)特效，這就是行為。 在【例在【例4.24.2】中利用層、時間軸、行為相結(jié)合實(shí)現(xiàn)動】中利用層、時間軸、行為相結(jié)合實(shí)現(xiàn)動態(tài)交互效果。態(tài)交互效果。 當(dāng)瀏覽網(wǎng)頁時，有一幅卡通圖像在頁面上動態(tài)飄動，當(dāng)瀏覽網(wǎng)頁時，有一幅卡通圖像在頁面上動態(tài)飄動，當(dāng)單擊了該圖像后，則出現(xiàn)了當(dāng)單擊了該圖像后，則出現(xiàn)了“歡迎光臨八珍美食歡迎光臨八珍美食”的提的提示信息，當(dāng)用戶單擊示信息，當(dāng)用戶單擊“確定確定”按鈕后，卡通圖像繼續(xù)飄動。按鈕后，卡通圖像繼續(xù)飄動。該網(wǎng)頁特效實(shí)例主要涉及了以下幾個知識點(diǎn)：該網(wǎng)頁特效實(shí)例主要涉及了以下幾個知識點(diǎn)

31、： 層與時間軸配合制作動畫；層與時間軸配合制作動畫； 為網(wǎng)頁元素定義為網(wǎng)頁元素定義“行為行為”特效。特效。v 1. 1. 創(chuàng)建時間軸創(chuàng)建時間軸 “ “時間軸時間軸”面板顯示層與圖像隨時間變化的屬性。選面板顯示層與圖像隨時間變化的屬性。選擇擇“窗口窗口”菜單菜單“時間軸時間軸”，或者按下組合快捷鍵，或者按下組合快捷鍵ALT+F9ALT+F9鍵，打開鍵，打開“時間軸時間軸”面板。用鼠標(biāo)拖動網(wǎng)頁元素面板。用鼠標(biāo)拖動網(wǎng)頁元素放在放在“時間軸時間軸”面板的相應(yīng)幀上，就把該元素加入到面板的相應(yīng)幀上，就把該元素加入到“時時間軸間軸”中。中。 “ “時間軸時間軸”面板中出現(xiàn)了一段藍(lán)色的時間軸，第一個面板中出現(xiàn)

32、了一段藍(lán)色的時間軸，第一個圓圈代表時間軸的開始，最后一個圓圈代表時間軸的結(jié)束，圓圈代表時間軸的開始，最后一個圓圈代表時間軸的結(jié)束，圓圈代表關(guān)鍵幀。圓圈代表關(guān)鍵幀。v 2. 2. 什么是關(guān)鍵幀？什么是關(guān)鍵幀？ 關(guān)鍵幀是動畫效果中的標(biāo)志點(diǎn)，在這個標(biāo)志點(diǎn)上可以關(guān)鍵幀是動畫效果中的標(biāo)志點(diǎn)，在這個標(biāo)志點(diǎn)上可以對網(wǎng)頁元素的狀態(tài)進(jìn)行調(diào)整和編輯。關(guān)鍵幀之間的幀稱為對網(wǎng)頁元素的狀態(tài)進(jìn)行調(diào)整和編輯。關(guān)鍵幀之間的幀稱為過渡幀，這些幀是不可編輯的。確定了關(guān)鍵幀上的網(wǎng)頁元過渡幀，這些幀是不可編輯的。確定了關(guān)鍵幀上的網(wǎng)頁元素的狀態(tài)后，素的狀態(tài)后，DreamweaverDreamweaver會自動計(jì)算過渡幀中網(wǎng)頁元素會自動

33、計(jì)算過渡幀中網(wǎng)頁元素的狀態(tài)，從而實(shí)現(xiàn)動態(tài)效果。的狀態(tài)，從而實(shí)現(xiàn)動態(tài)效果。v 3. 3. 修改關(guān)鍵幀修改關(guān)鍵幀 改變網(wǎng)頁元素的屬性：選擇關(guān)鍵幀，在改變網(wǎng)頁元素的屬性：選擇關(guān)鍵幀，在“屬性屬性”面板中改變網(wǎng)頁元素的屬性。面板中改變網(wǎng)頁元素的屬性。 延長時間軸的長度：在延長時間軸的長度：在“時間軸時間軸”上單擊關(guān)鍵幀上單擊關(guān)鍵幀向右移動，可延長向右移動，可延長“時間軸時間軸”的長度。的長度。 增加關(guān)鍵幀：單擊增加關(guān)鍵幀：單擊“時間軸時間軸”，單擊鼠標(biāo)右鍵，單擊鼠標(biāo)右鍵，在彈出菜單中選擇在彈出菜單中選擇“增加關(guān)鍵幀增加關(guān)鍵幀”命令。命令。 刪除關(guān)鍵幀：選中已有的關(guān)鍵幀，單擊鼠標(biāo)右鍵，刪除關(guān)鍵幀：選中已

34、有的關(guān)鍵幀，單擊鼠標(biāo)右鍵，在彈出菜單中選擇在彈出菜單中選擇“移除關(guān)鍵幀移除關(guān)鍵幀”命令。命令。 單擊單擊“時間軸時間軸”面板中的面板中的“前進(jìn)前進(jìn)”和和“后退后退”按鈕預(yù)按鈕預(yù)覽動畫效果。選中覽動畫效果。選中“自動播放自動播放”復(fù)選框或復(fù)選框或“循環(huán)循環(huán)”復(fù)選框，復(fù)選框，在瀏覽器中自動循環(huán)播放動畫在瀏覽器中自動循環(huán)播放動畫 。v 4. 4. 拖動路徑創(chuàng)建時間軸拖動路徑創(chuàng)建時間軸 DreamweaverDreamweaver可以將拖動層的軌跡記錄下來，利用層可以將拖動層的軌跡記錄下來，利用層的拖動創(chuàng)建圖像隨時間軸飄動的動態(tài)效果。其操作步驟如的拖動創(chuàng)建圖像隨時間軸飄動的動態(tài)效果。其操作步驟如下：下

35、： 步驟步驟1 1單擊單擊“插入插入”欄欄“布局布局”選項(xiàng)選項(xiàng)“繪制層繪制層”按鈕，在動畫開始位置繪制一個層，單擊層內(nèi)，插入一幅按鈕，在動畫開始位置繪制一個層，單擊層內(nèi)，插入一幅圖像。圖像。 步驟步驟2 2選中層，選擇選中層，選擇“修改修改”菜單菜單“時間軸時間軸”“錄制層路徑錄制層路徑”命令，按命令，按F4F4快捷鍵，隱藏所有的面板，在快捷鍵，隱藏所有的面板，在“文檔文檔”窗口中隨心所欲地拖動層，最后與起點(diǎn)重合，放窗口中隨心所欲地拖動層，最后與起點(diǎn)重合，放開鼠標(biāo)。此時，開鼠標(biāo)。此時，DreamweaverDreamweaver將層所經(jīng)過的路徑記錄下來。將層所經(jīng)過的路徑記錄下來。步驟步驟3 3

36、打開打開“時間軸時間軸”面板，選中面板，選中“自動播放自動播放”和和“循環(huán)循環(huán)”兩個復(fù)選框，如圖所示。兩個復(fù)選框，如圖所示。v 1. 1. 行為的概念行為的概念 行為主要有行為主要有3 3部分組成：對象、事件和動作。對象是部分組成：對象、事件和動作。對象是行為的主體，在網(wǎng)頁中的對象主要有文本、圖像、窗口等。行為的主體，在網(wǎng)頁中的對象主要有文本、圖像、窗口等。 事件是針對某一對象所執(zhí)行的特定的操作。如當(dāng)鼠標(biāo)事件是針對某一對象所執(zhí)行的特定的操作。如當(dāng)鼠標(biāo)指針指向超鏈接時，會生成一個指針指向超鏈接時，會生成一個OnMouseOverOnMouseOver事件；當(dāng)單事件；當(dāng)單擊超鏈接時，會生成一個擊超

37、鏈接時，會生成一個OnClickOnClick事件。不同的對象通常事件。不同的對象通常會產(chǎn)生不同的事件。會產(chǎn)生不同的事件。 動作主要是由動作主要是由JavaScriptJavaScript編寫的實(shí)現(xiàn)特定功能的代碼編寫的實(shí)現(xiàn)特定功能的代碼組成。一旦動作與某一特定事件關(guān)聯(lián)，則當(dāng)產(chǎn)生事件的同組成。一旦動作與某一特定事件關(guān)聯(lián)，則當(dāng)產(chǎn)生事件的同時會觸發(fā)相應(yīng)的動作，以實(shí)現(xiàn)特定的功能。比如要在窗口時會觸發(fā)相應(yīng)的動作，以實(shí)現(xiàn)特定的功能。比如要在窗口載入（載入（OnLoadOnLoad）的過程中打開新的窗口，則可以將）的過程中打開新的窗口，則可以將OnLoadOnLoad事件與打開新窗口的動作相關(guān)聯(lián)。事件與打開

38、新窗口的動作相關(guān)聯(lián)。v 2. Dreamweaver2. Dreamweaver內(nèi)部的行內(nèi)部的行為為 DreamweaverDreamweaver內(nèi)置的行內(nèi)置的行為有多種，通過為有多種，通過“行為行為”面板查看。選擇面板查看。選擇“窗口窗口”菜單菜單“行為行為”命令，打命令，打開開“行為行為”面板，如圖所面板，如圖所示。示。 框架可以把一個瀏覽器窗口劃分多個區(qū)域，每框架可以把一個瀏覽器窗口劃分多個區(qū)域，每個區(qū)域顯示不同的網(wǎng)頁，它的這個特性使其成為一種常用個區(qū)域顯示不同的網(wǎng)頁，它的這個特性使其成為一種常用的頁面排版技術(shù)。的頁面排版技術(shù)。 【例【例4.44.4】框架排版網(wǎng)頁：某某電子公司網(wǎng)站，如圖

39、】框架排版網(wǎng)頁：某某電子公司網(wǎng)站，如圖所示。所示。 本實(shí)例所涉及到的主要知識點(diǎn)包括以下幾點(diǎn)：本實(shí)例所涉及到的主要知識點(diǎn)包括以下幾點(diǎn)：v 使用框架技術(shù)布局和制作網(wǎng)頁；使用框架技術(shù)布局和制作網(wǎng)頁；v 該網(wǎng)頁的布局是一個包括三個框架該網(wǎng)頁的布局是一個包括三個框架（topframe,leftframe,mainframetopframe,leftframe,mainframe）的框架集）的框架集framesetframeset，上框架始保持不動，當(dāng)瀏覽者單擊左邊的導(dǎo)航欄時，相應(yīng)上框架始保持不動，當(dāng)瀏覽者單擊左邊的導(dǎo)航欄時，相應(yīng)的內(nèi)容顯示在右邊區(qū)域；的內(nèi)容顯示在右邊區(qū)域；v 使用框架技術(shù)的關(guān)鍵是：在使用

40、鏈接時，必須指定鏈接的使用框架技術(shù)的關(guān)鍵是：在使用鏈接時，必須指定鏈接的目標(biāo)位置。目標(biāo)位置。4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)1. 1. 框架構(gòu)成及設(shè)置框架構(gòu)成及設(shè)置 一個框架實(shí)際上是由多個一個框架實(shí)際上是由多個HTMLHTML文檔所構(gòu)成的，其中一文檔所構(gòu)成的，其中一個頁面專門負(fù)責(zé)框架的集成，比如是分行型還是分列型，個頁面專門負(fù)責(zé)框架的集成，比如是分行型還是分列型，或者是混合型；行和列的尺寸如何等，一般被稱為框架集或者是混合型；行和列的尺寸如何等，一般被稱為框架集頁面，其它的是普通的頁面，其它的是普通的HTMLHTML文檔，分別被放置到框架結(jié)構(gòu)文檔，分別被放置到框架結(jié)構(gòu)中，被稱為框架頁，當(dāng)鏈接到設(shè)

41、置框架的中，被稱為框架頁，當(dāng)鏈接到設(shè)置框架的HTMLHTML文檔時，整文檔時，整個框架以及各個框架以及各HTMLHTML文檔就會一起顯示在瀏覽器中。文檔就會一起顯示在瀏覽器中。2.2.創(chuàng)建框架創(chuàng)建框架 啟動啟動DreamweaverDreamweaver后，單擊啟動界面后，單擊啟動界面“從范例創(chuàng)從范例創(chuàng)建建”“框架集框架集”，彈出，彈出 “新建文檔新建文檔”的對話框，單擊的對話框，單擊“常規(guī)常規(guī)”選項(xiàng)卡，選擇選項(xiàng)卡，選擇“框架集框架集”及右側(cè)列表框中的框架及右側(cè)列表框中的框架樣式，如圖所示。樣式，如圖所示。 4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)3 3、編輯框架、編輯框架

42、 用戶可對已經(jīng)創(chuàng)建好的框架集進(jìn)行編輯和修改，例用戶可對已經(jīng)創(chuàng)建好的框架集進(jìn)行編輯和修改，例如將一個框架拆分成幾個更小的框架，或是移動框架的如將一個框架拆分成幾個更小的框架，或是移動框架的邊框來改變框架顯示的范圍大小。邊框來改變框架顯示的范圍大小。v拆分框架拆分框架v刪除框架刪除框架v改變框架的行高和列寬改變框架的行高和列寬4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)v 4. 4. 選擇框架選擇框架 選擇選擇“窗口窗口”菜單菜單“框架框架”命令，打開命令，打開“框架框架”面面板，如圖所示。板，如圖所示。框架外框框架內(nèi)嵌外框框架內(nèi)部4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)（2 2）設(shè)置框架的

43、屬性）設(shè)置框架的屬性 選中某個框架，在選中某個框架，在“屬性屬性”面板可以定義框架屬性，面板可以定義框架屬性，如圖所示。如圖所示。4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu)v 6 6、設(shè)置超鏈接目標(biāo)框架、設(shè)置超鏈接目標(biāo)框架 所謂超鏈接目標(biāo)框架，所謂超鏈接目標(biāo)框架，是指當(dāng)單擊超鏈接時，超是指當(dāng)單擊超鏈接時，超鏈接的目標(biāo)網(wǎng)頁文件在哪鏈接的目標(biāo)網(wǎng)頁文件在哪個框架中顯示。例如：對個框架中顯示。例如：對于一般左窄右寬的列式框于一般左窄右寬的列式框架結(jié)構(gòu)，一般是在左邊框架結(jié)構(gòu)，一般是在左邊框架的網(wǎng)頁中包含超鏈接的架的網(wǎng)頁中包含超鏈接的導(dǎo)航信息，而在右邊的框?qū)Ш叫畔?，而在右邊的框架中顯示超鏈接的目標(biāo)網(wǎng)架中顯示超鏈接的目

44、標(biāo)網(wǎng)頁文件。在頁文件。在“目標(biāo)目標(biāo)”下拉下拉列表中，選擇目標(biāo)框架名，列表中，選擇目標(biāo)框架名，如圖所示。如圖所示。4.6.2 創(chuàng)建與編輯框架結(jié)構(gòu) 在在“目標(biāo)目標(biāo)”下拉列表中，選擇目標(biāo)框架名，如圖所示。下拉列表中，選擇目標(biāo)框架名，如圖所示。 鏈接目標(biāo)的含義：鏈接目標(biāo)的含義：v _blank_blank：在一個新窗口顯示超鏈接的目標(biāo)文件，：在一個新窗口顯示超鏈接的目標(biāo)文件，同時保持同時保持當(dāng)前窗口不變。當(dāng)前窗口不變。v _parent_parent：在上一級框架中打開鏈接文件。：在上一級框架中打開鏈接文件。v _self_self：在當(dāng)前框架中打開鏈接，同時替換該框架中的內(nèi)在當(dāng)前框架中打開鏈接，同時替換該框架中的內(nèi)容。為網(wǎng)頁超鏈接的默認(rèn)目標(biāo)窗口。