網(wǎng)頁(yè)背景設(shè)計(jì)全攻略_第1頁(yè)
網(wǎng)頁(yè)背景設(shè)計(jì)全攻略_第2頁(yè)
網(wǎng)頁(yè)背景設(shè)計(jì)全攻略_第3頁(yè)
網(wǎng)頁(yè)背景設(shè)計(jì)全攻略_第4頁(yè)
網(wǎng)頁(yè)背景設(shè)計(jì)全攻略_第5頁(yè)
已閱讀5頁(yè)，還剩22頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)背景設(shè)計(jì)全攻略作者：網(wǎng)頁(yè)中的背景設(shè)計(jì)是相當(dāng)重要的，尤其是對(duì)于個(gè)人主頁(yè)來(lái)說(shuō)，一個(gè)主頁(yè)的背景就相當(dāng)于一個(gè)房間里的墻壁地板一樣，好的背景不但能影響訪問(wèn)者對(duì)網(wǎng)頁(yè)內(nèi)容的接受程度，還能影響訪問(wèn)者對(duì)整個(gè)網(wǎng)站的印象。如果你經(jīng)常注意別人的網(wǎng)站，你應(yīng)該會(huì)發(fā)現(xiàn)在不同的網(wǎng)站上，甚至同一個(gè)網(wǎng)站的不同頁(yè)面上，都會(huì)有各式各樣的不同的背景設(shè)計(jì)。究竟都有哪些不同樣式的背景，還有它們的設(shè)計(jì)方法都是怎樣的呢，現(xiàn)在就由我來(lái)為大家作一個(gè)比較完整的總結(jié)。

1.顏色背景

顏色背景的設(shè)計(jì)是最為簡(jiǎn)單的，但同時(shí)也是最為常用和最為重要的，因?yàn)橄鄬?duì)于圖片背景來(lái)說(shuō)，它有無(wú)與倫比的顯示速度上的優(yōu)勢(shì)。在網(wǎng)頁(yè)文件中，一般通過(guò)<body>標(biāo)簽來(lái)指定頁(yè)面的顏色背景，其HTML語(yǔ)法為：

<bodybgcolor="color">

其中的"color"表示不同的顏色，可以用各種不同的顏色表示方法，比較常用的有直接用顏色的英文名稱(chēng)，如blue、yellow、black等等，還可以用顏色的十六進(jìn)制表示方法，如#0000FF、#FFFF00、#000000等等，此外還可以用百分比值法和整數(shù)法，其效果都是一樣的。

顏色背景雖然比較簡(jiǎn)單，但也有不少地方需要注意，如要根據(jù)不同的頁(yè)面內(nèi)容設(shè)計(jì)背景顏色的冷暖狀態(tài)，要根據(jù)頁(yè)面的編排設(shè)計(jì)背景顏色與頁(yè)面內(nèi)容的最佳視覺(jué)搭配等等。

2.沙紋背景

沙紋背景其實(shí)屬于圖片背景的范疇，它的主要特點(diǎn)是整個(gè)頁(yè)面的背景可以看作是局部背景的反復(fù)重排，在這類(lèi)背景中以沙紋狀的背景是為常見(jiàn)，所以我們將其統(tǒng)稱(chēng)為沙紋背景。

初學(xué)主頁(yè)制作者都有這樣的經(jīng)歷，當(dāng)試圖把自己的照片作為頁(yè)面的背景是，卻發(fā)現(xiàn)瀏覽器上顯示出來(lái)的不僅僅是一個(gè)照片，而是同一照片在水平和豎直方向上的反復(fù)排列。這就是瀏覽器處理圖片背景時(shí)的規(guī)律方法，利用這一規(guī)律我們可以用一小塊圖片作為頁(yè)面背景，讓它自動(dòng)在頁(yè)面上重復(fù)排列，鋪滿整個(gè)頁(yè)面，從而使網(wǎng)頁(yè)的體積大大減小。

讀者到現(xiàn)在恐怕都已經(jīng)知道了沙紋背景的原理和實(shí)現(xiàn)方法，就是找一個(gè)小的圖片，越小越好，但注意要使最后的背景看起來(lái)要像一個(gè)整體，而不是若干圖片的堆砌。其實(shí)現(xiàn)的HTML語(yǔ)法如下：

<bodybackground="picture">

其中的"picture"表示背景圖片的URL路徑。

3.條狀背景

條狀背景與沙紋背景是比較相似的，它適用于頁(yè)面背景在水平或豎直方向上看是重復(fù)排列的，而在另一方向上看則是沒(méi)有規(guī)律的。它也是利用瀏覽器對(duì)圖片背景的自動(dòng)重復(fù)排列，與沙紋背景所不同的是它只讓圖片在一個(gè)方向上重復(fù)排列。

以在豎直方向上排列為例，首先用圖像處理軟件做一個(gè)從左到右為藍(lán)白漸變的水平條狀圖片，其長(zhǎng)度與頁(yè)面的寬度相當(dāng)。也通過(guò)

<bodybackground="picture">

將其設(shè)為頁(yè)面背景，經(jīng)瀏覽器顯示后，就成為整個(gè)頁(yè)面從左到右藍(lán)白漸變的分欄顏色背景。當(dāng)然，也可以用類(lèi)似的方法實(shí)現(xiàn)條狀背景在水平方向上的重復(fù)排列。

4.照片背景

把自己或朋友的照片作為頁(yè)面的背景讓大家看到，是有點(diǎn)令人激動(dòng)的事情，但瀏覽器對(duì)圖片的自動(dòng)重復(fù)排列卻使這一愿望難以實(shí)現(xiàn)。怎么辦呢？只有想不到的，沒(méi)有做不到的，這里我們用上一點(diǎn)簡(jiǎn)單的CSS。在網(wǎng)頁(yè)文件的<head>……</head>之間加入下面的CSS語(yǔ)句:

<styletype="text/css"><!--body{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:50%50%}--></style>

這樣，在網(wǎng)頁(yè)頁(yè)面中，就可以看到你的照片位于頁(yè)面的正中間，而且在拉動(dòng)瀏覽器窗口的滾動(dòng)條時(shí)，照片仍然位于頁(yè)面的正中間而不隨頁(yè)面內(nèi)容一起滾動(dòng)。如果你覺(jué)得照片位于頁(yè)面的正中間不滿意，你也可以隨意地調(diào)整它在頁(yè)面中的位置，只需要調(diào)整"background-position"的值就可以了。

5.復(fù)合背景

如果你在練習(xí)上面的“照片背景”時(shí)“不小心”也設(shè)置了<body>標(biāo)簽里的顏色背景，那么你看到了什么？顏色背景還起作用嗎？對(duì)，你能看到你的照片浮于你設(shè)的顏色背景之上，二者能夠同時(shí)正常地顯示出來(lái)。這就是復(fù)合背景的魅力，更為吸引人的是，當(dāng)你所設(shè)置的圖片背景因?yàn)槟撤N不可知的因素而不能正常顯示的時(shí)候，瀏覽器能夠自動(dòng)用你所設(shè)置的顏色背景取而代之。它的設(shè)計(jì)方法，就不用我再多說(shuō)了吧！

6.局部背景

前面我們所說(shuō)的背景都是整個(gè)頁(yè)面的背景，能不能在頁(yè)面上為某個(gè)局部的內(nèi)容設(shè)置屬于它自己的背景呢？回答是肯定的。

最為常見(jiàn)的是在表格的設(shè)計(jì)當(dāng)中，我們可以為表格設(shè)置一個(gè)不同于頁(yè)面的背景，甚至在不同的表格單元中，我們也可以設(shè)置各個(gè)表格單元自己的背景。請(qǐng)看下面這個(gè)表格例子：

<tableborder="1"width="240"height="101"bgcolor="#C0C0C0">

<tr>

<tdwidth="80"height="46"bgcolor="#00FFFF"></td>

<tdwidth="80"height="46"></td><tdwidth="80"height="46"bgcolor="#00FF00"></td>

</tr>

<tr>

<tdwidth="80"height="47"bgcolor="#FFFF00"></td>

1."T"結(jié)構(gòu)布局。所謂"T"結(jié)構(gòu)。就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，

右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景教深，整體效果類(lèi)似英文字母"T",所以我們稱(chēng)之為"T"形布

局。這是網(wǎng)頁(yè)設(shè)計(jì)中用的最廣返的一種布局方式。(圖略)

這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩

呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人"看之無(wú)味"。

2."口"型布局。這是一個(gè)象形的說(shuō)法，就是頁(yè)面一般上下各有一個(gè)廣告條，左面是主菜單，

右面放友情連接等，中間是主要內(nèi)容。(圖略)

這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大(我的主頁(yè)首頁(yè)即屬于這種布局)。缺點(diǎn)是頁(yè)面擁擠，

不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計(jì)，例如網(wǎng)易壁紙站。

3."三"型布局。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊，將

頁(yè)面整體分割為四部分，色塊中大多放廣告條。

4.對(duì)稱(chēng)對(duì)比布局。顧名思義，采取左右或者上下對(duì)稱(chēng)的布局，一半深色，一半淺色，一般用于

設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺(jué)沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。

5.POP布局。POP引自廣告術(shù)語(yǔ)，就是指頁(yè)面布局象一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面

的設(shè)計(jì)中心。常用于時(shí)尚類(lèi)站點(diǎn)，比如ELLE.com。優(yōu)點(diǎn)顯而易見(jiàn)：漂亮吸引人。缺點(diǎn)就是速度慢。

作為版面布局還是值得借鑒的。

以上總結(jié)了目前網(wǎng)絡(luò)上常見(jiàn)的布局，其實(shí)還有許許多多別具一格的布局，關(guān)鍵在于你的創(chuàng)意和

設(shè)計(jì)了。對(duì)于版面布局的技巧，這里提供四個(gè)建議，您可以自己推敲：

1.加強(qiáng)視覺(jué)效果

2.加強(qiáng)文案的可視度和可讀性

3.統(tǒng)一感的視覺(jué)

4.新鮮和個(gè)性是布局的最高境界

怎樣設(shè)計(jì)網(wǎng)頁(yè)作者：在網(wǎng)頁(yè)設(shè)計(jì)的認(rèn)識(shí)上，許多人似乎仍停留在網(wǎng)頁(yè)制作的高度上。認(rèn)為只要用好了網(wǎng)頁(yè)制作軟件，就能搞好網(wǎng)頁(yè)設(shè)計(jì)了。

其實(shí)網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)感性思考與理性分析相結(jié)合的復(fù)雜的過(guò)程，它的方向取決于設(shè)計(jì)的任務(wù)，它的實(shí)現(xiàn)依賴于網(wǎng)頁(yè)的制作。正所謂“功夫在詩(shī)外”，網(wǎng)頁(yè)設(shè)計(jì)中最重要的東西，并非在軟件的應(yīng)用上，而是在我們對(duì)網(wǎng)頁(yè)設(shè)計(jì)的理解以及設(shè)計(jì)制作的水平上，在于我們自身的美感以及對(duì)頁(yè)面的把握上。

首先，我們要弄清楚網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)。

一、設(shè)計(jì)的任務(wù)

設(shè)計(jì)是一種審美活動(dòng)，成功的設(shè)計(jì)作品一般都很藝術(shù)化。但藝術(shù)只是設(shè)計(jì)的手段，而并非設(shè)計(jì)的任務(wù)。設(shè)計(jì)的任務(wù)是要實(shí)現(xiàn)設(shè)計(jì)者的意圖，而并非創(chuàng)造美。

網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)，是指設(shè)計(jì)者要表現(xiàn)的主題和要實(shí)現(xiàn)的功能。站點(diǎn)的性質(zhì)不同，設(shè)計(jì)的任務(wù)也不同。從形式上，可以將站點(diǎn)分為以下三類(lèi)。

第一類(lèi)是資訊類(lèi)站點(diǎn)，像新浪、網(wǎng)易、搜狐等門(mén)戶網(wǎng)站。這類(lèi)站點(diǎn)將為訪問(wèn)者提供大量的信息，而且訪問(wèn)量較大。因此需注意頁(yè)面的分割、結(jié)構(gòu)的合理、頁(yè)面的優(yōu)化、界面的親和等問(wèn)題。

第二類(lèi)是資訊和形象相結(jié)合的網(wǎng)站，像一些較大的公司、國(guó)內(nèi)的高校等。這類(lèi)網(wǎng)站在設(shè)計(jì)上要求較高，既要保證資訊類(lèi)網(wǎng)站的上述要求，同時(shí)又要突出企業(yè)、單位的形象。然而就現(xiàn)狀上來(lái)看，這類(lèi)網(wǎng)站有粗制濫造的嫌疑。

第三類(lèi)則是形象類(lèi)網(wǎng)站，比如一些中小型的公司或單位。這類(lèi)網(wǎng)站一般較小，有的則有幾頁(yè)，需要實(shí)現(xiàn)的功能也較為簡(jiǎn)單，網(wǎng)頁(yè)設(shè)計(jì)的主要任務(wù)是突出企業(yè)形象。這類(lèi)網(wǎng)站對(duì)設(shè)計(jì)者的美工水平要求較高。

當(dāng)然，這只是從整體上來(lái)看，具體情況還要具體分析。不同的站點(diǎn)還要區(qū)別對(duì)待。別忘了最重要的一點(diǎn)，那就是客戶的要求，它也屬于設(shè)計(jì)的任務(wù)。

明確了設(shè)計(jì)的任務(wù)之后，接下來(lái)要想的就是如何完成這個(gè)任務(wù)了。

二、設(shè)計(jì)的實(shí)現(xiàn)

設(shè)計(jì)的實(shí)現(xiàn)可以分為兩個(gè)部分。第一部分為站點(diǎn)的規(guī)劃及草圖的繪制，這一部分可以在紙上完成。第二部分為網(wǎng)頁(yè)的制作，這一過(guò)程是在計(jì)算機(jī)上完成的。

設(shè)計(jì)首頁(yè)的第一步是設(shè)計(jì)版面布局。我們可以將網(wǎng)頁(yè)看作傳統(tǒng)的報(bào)刊雜志來(lái)編輯，這里面有文字、圖像乃至動(dòng)畫(huà)，我們要做的工作就是以最適合的方式將圖片和文字排放在頁(yè)面的不同位置。

除了要有一臺(tái)配置不錯(cuò)的計(jì)算機(jī)外，軟件也是必需的。不能簡(jiǎn)單地說(shuō)一個(gè)軟件的好壞，只要是設(shè)計(jì)者使用起來(lái)覺(jué)得方便而且能得心應(yīng)手的，就可以稱(chēng)為好軟件。當(dāng)然，它應(yīng)該能滿足設(shè)計(jì)者的要求。筆者常用的軟件是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、imageready，這些都是很不錯(cuò)的軟件。

接下來(lái)我們要做的就是通過(guò)軟件的使用，將設(shè)計(jì)的藍(lán)圖變?yōu)楝F(xiàn)實(shí)，最終的集成一般是在Dreamweaver里完成的。雖然在草圖上，我們定出了頁(yè)面的大體輪廓，但是靈感一般都是在制作過(guò)程中產(chǎn)生的。設(shè)計(jì)作品一定要有創(chuàng)意，這是最基本的要求，沒(méi)有創(chuàng)意的設(shè)計(jì)是失敗的。在制作的過(guò)程中，我們會(huì)碰到許多問(wèn)題，其中最敏感的莫過(guò)于頁(yè)面的顏色了。

三、色彩的運(yùn)用

色彩是一種奇怪的東西，它是美麗而豐富的，它能喚起人類(lèi)的心靈感知。一般來(lái)說(shuō)，紅色是火的顏色，熱情、奔放；也是血的顏色，可以象征生命。黃色是明度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長(zhǎng)，象征安寧和平與安全，如綠色食品。紫色是高貴的象征，有莊重感。白色能給人以純潔與清白的感覺(jué)，表示和平與圣潔。

我們知道，顏色是光的折射產(chǎn)生的，紅、黃、藍(lán)是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。換一種思路，我們可以用顏色的變化來(lái)表現(xiàn)光影效果，這無(wú)疑將使我們的作品更貼近現(xiàn)實(shí)。

色彩代表了不同的情感，有著不同的象征含義。這些象征含義是人們思想交流當(dāng)中的一個(gè)復(fù)雜問(wèn)題，它因人的年齡、地域、時(shí)代、民族、階層、經(jīng)濟(jì)地區(qū)、工作能力、教育水平、風(fēng)俗習(xí)慣、宗教信仰、生活環(huán)境、性別差異而有所不同。

單純的顏色并沒(méi)有實(shí)際的意義，和不同的顏色搭配，它所表現(xiàn)出來(lái)的效果也不同。比如綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。藍(lán)色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會(huì)給人帶來(lái)暖意。設(shè)計(jì)的任務(wù)不同，配色方案也隨之不同?？紤]到網(wǎng)頁(yè)的適應(yīng)性，應(yīng)盡量使用網(wǎng)頁(yè)安全色。

但顏色的使用并沒(méi)有一定的法則，如果一定要用某個(gè)法則去套，效果只會(huì)適得其反。經(jīng)驗(yàn)上我們可先確定一種能表現(xiàn)主題的主體色，然后根據(jù)具體的需要，應(yīng)用顏色的近似和對(duì)比來(lái)完成整個(gè)頁(yè)面的配色方案。整個(gè)頁(yè)面在視覺(jué)上應(yīng)是一個(gè)整體，以達(dá)到和諧、悅目的視覺(jué)效果。

四、造型的組合

在網(wǎng)頁(yè)設(shè)計(jì)中，我們主要通過(guò)視覺(jué)傳達(dá)來(lái)表現(xiàn)主題。在視覺(jué)傳達(dá)中，造型是很重要的一個(gè)元素。拋去是圖還是文字的問(wèn)題，畫(huà)面上的所有元素可以統(tǒng)一作為畫(huà)面的基本構(gòu)成要素點(diǎn)、線、面來(lái)進(jìn)行處理。在一幅成功的作品里，是需要點(diǎn)、線、面的共同組合與搭配來(lái)構(gòu)造整個(gè)頁(yè)面的。

通常我們可以使用的組合手法有秩序、比例、均衡、對(duì)稱(chēng)、連續(xù)、間隔、重疊、反復(fù)、交叉、節(jié)奏、韻律、歸納、變異、特寫(xiě)、反射等等，它們都有各自的特點(diǎn)。在設(shè)計(jì)中應(yīng)根據(jù)具體情況，選擇最適合的表現(xiàn)手法，這樣有利于主題的表現(xiàn)。

通過(guò)點(diǎn)、線、面的組合，可以突出頁(yè)面上的重要元素，突出設(shè)計(jì)的主題，增強(qiáng)美感，讓觀者在感受美的過(guò)程中領(lǐng)會(huì)設(shè)計(jì)的主題，從而實(shí)現(xiàn)設(shè)計(jì)的任務(wù)。

造型的巧妙運(yùn)用不僅能帶來(lái)極大的美感，而且能較好地突出企業(yè)形象，而且能將網(wǎng)頁(yè)上的各種元素有機(jī)的組織起來(lái)，它甚至還可以引導(dǎo)觀者的視線。

五、設(shè)計(jì)的原則

設(shè)計(jì)是有原則的，無(wú)論使用何種手法對(duì)畫(huà)面中的元素進(jìn)行組合，都一定要遵循五個(gè)大的原則：統(tǒng)一、連貫、分割、對(duì)比及和諧。

統(tǒng)一，是指設(shè)計(jì)作品的整體性，一致性。設(shè)計(jì)作品的整體效果是至關(guān)重要的，在設(shè)計(jì)中切勿將各組成部分孤立分散，那樣會(huì)使畫(huà)面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。

連貫，是指要注意頁(yè)面的相互關(guān)系。設(shè)計(jì)中應(yīng)利用各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應(yīng)，并注意整個(gè)頁(yè)面設(shè)計(jì)風(fēng)格的一致性，實(shí)現(xiàn)視覺(jué)上和心理上的連貫，使整個(gè)頁(yè)面設(shè)計(jì)的各個(gè)部分極為融洽，猶如一氣呵成。

分割，是指將頁(yè)面分成若干小塊，小塊之間有視覺(jué)上的不同，這樣可以使觀者一目了然。在信息量很多時(shí)為使觀者能夠看清楚，就要注意到將畫(huà)面進(jìn)行有效的分割。分割不僅是表現(xiàn)形式的需要。換個(gè)角度來(lái)講，分割也可以被視為對(duì)于頁(yè)面內(nèi)容的一種分類(lèi)歸納。

對(duì)比就是通過(guò)矛盾和沖突，使設(shè)計(jì)更加富有生氣。對(duì)比手法很多，例如：多與少、曲與直、強(qiáng)與弱、長(zhǎng)與短、粗與細(xì)、疏與密、虛與實(shí)、主與次、黑與白、動(dòng)與靜、美與丑、聚與散等等。在使用對(duì)比的時(shí)候應(yīng)慎重，對(duì)比過(guò)強(qiáng)容易破壞美感，影響統(tǒng)一。

和諧是指整個(gè)頁(yè)面符合美的法則，渾然一體。如果一件設(shè)計(jì)作品僅僅是色彩、形狀、線條等的隨意混合，那么作品將不但沒(méi)有“生命感”，而且也根本無(wú)法實(shí)現(xiàn)視覺(jué)設(shè)計(jì)的傳達(dá)功能。和諧不僅要看結(jié)構(gòu)形式，而且要看作品所形成的視覺(jué)效果能否與人的視覺(jué)感受形成一種溝通，產(chǎn)生心靈的共鳴。這是設(shè)計(jì)能否成功的關(guān)鍵。

六、網(wǎng)頁(yè)的優(yōu)化

在網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)頁(yè)的優(yōu)化是較為重要的一個(gè)環(huán)節(jié)。它的成功與否會(huì)影響頁(yè)面的瀏覽速度和頁(yè)面的適應(yīng)性，影響觀者對(duì)網(wǎng)站的印象。

在資訊類(lèi)網(wǎng)站中，文字是頁(yè)面中最大的構(gòu)成元素，因此字體的優(yōu)化顯得尤為重要。使用css樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為12px，顏色要視背景色而定，原則上以能看清且與整個(gè)頁(yè)面搭配和諧為準(zhǔn)。在白色的背景上，我們一般使用黑色，這樣不易產(chǎn)生視覺(jué)疲勞，能保證瀏覽者較長(zhǎng)時(shí)間地瀏覽網(wǎng)頁(yè)。

圖片是網(wǎng)頁(yè)中的重要元素。圖片的優(yōu)化可以在保證瀏覽質(zhì)量的前提下將其size降至最低，這樣可以成倍地提高網(wǎng)頁(yè)的下載速度。利用Photoshop６或Fireworks４可以將圖片切成小塊，分別進(jìn)行優(yōu)化。輸出的格式可以為gif或jpeg，要視具體情況而定。一般我們把有較為復(fù)雜顏色變化的小塊優(yōu)化為jpeg，而把那種只有單純色塊的卡通畫(huà)式的小塊優(yōu)化為gif，這是由這兩種格式的特點(diǎn)決定的。

表格(table)是頁(yè)面中的重要元素,是頁(yè)面排版的主要手段。我們可以設(shè)定表格的寬度、高度、邊框、背景色、對(duì)齊方式等參數(shù)。很多時(shí)候，我們將表格的邊框設(shè)為0，以此來(lái)定位頁(yè)面中的元素，或者籍此確定頁(yè)面中各元素的相對(duì)位置。我們知道：瀏覽器在讀取網(wǎng)頁(yè)html原代碼時(shí)，是讀完整個(gè)table才將它顯示出來(lái)的。如果一個(gè)大表格中含有多個(gè)子表格，必須等大表格讀完，才能將子表格一起顯示出來(lái)。我們?cè)谠L問(wèn)一些站點(diǎn)時(shí)，等待多時(shí)無(wú)結(jié)果，按"停止"按鈕卻一下顯示出頁(yè)面就是這個(gè)原因。因此，我們?cè)谠O(shè)計(jì)頁(yè)面表格的時(shí)候，應(yīng)該盡量避免將所有元素嵌套在一個(gè)表格里，而且表格嵌套層次盡量要少。在使用Dreamweaver制作網(wǎng)頁(yè)時(shí)，會(huì)自動(dòng)在每一個(gè)td內(nèi)添加一個(gè)空字符“[$nbsp]”。如果單元格內(nèi)沒(méi)有填充其它元素，這個(gè)空字符會(huì)保留，在指定td的寬度或高度后，可以在源代碼內(nèi)將其刪去。

網(wǎng)頁(yè)的適應(yīng)性是很重要的，在不同的系統(tǒng)上，不同的分辨率下，不同的瀏覽器上，我們將會(huì)看到不同的結(jié)果，因此設(shè)計(jì)時(shí)要統(tǒng)籌考慮。一般我們?cè)?00*600下制作網(wǎng)頁(yè)，最佳瀏覽效果也是在800*600分辨率下，在其它情況下只要保證基本一致，不出現(xiàn)較大問(wèn)題即可。

用Dreamweaver批量做網(wǎng)頁(yè)作者：做網(wǎng)站，麻煩在更新，特別是大規(guī)模更新，工作量非常大。真不知那些創(chuàng)意不斷而又勤奮的“站長(zhǎng)”，隔三岔五將網(wǎng)站來(lái)個(gè)“大換血”，是怎么忙過(guò)來(lái)的。

告訴你這個(gè)秘密吧，他們很多是在“批發(fā)”網(wǎng)頁(yè)，并且你的機(jī)器中也有這樣的“批發(fā)站”呢！這個(gè)好東東就是——模板。常見(jiàn)的網(wǎng)頁(yè)制作工具：FrontPage、DreamWeaver中都有這項(xiàng)功能。如用DreamWeaver3.0制作網(wǎng)站時(shí)，使用模板就能減少大量的重復(fù)勞動(dòng)。

一、建立模板

1、創(chuàng)建模板頁(yè)面

最簡(jiǎn)單的辦法是將一個(gè)網(wǎng)頁(yè)另存為模板文件，通過(guò)執(zhí)行命令：File→SaveasTemplate，DreamWeaver會(huì)在網(wǎng)站根目錄中建立一個(gè)模板文件夾——Templates來(lái)保存該模板。

當(dāng)然，也可以新建一個(gè)模板：Window→Templates，會(huì)出現(xiàn)的Templates面板，單擊右下角的NewTemplate按鈕，輸入文件名，就建立了一個(gè)空模板；再單擊OpenTemplate按鈕打開(kāi)該模板，保存后自動(dòng)存放于網(wǎng)站模板文件夾Templates中。

新建、打開(kāi)的模板頁(yè)面和普通的網(wǎng)頁(yè)沒(méi)什么兩樣，同樣可以加入表格、層、圖片、動(dòng)畫(huà)、腳本，設(shè)置頁(yè)面屬性等。

舉例：這里以制作一個(gè)模板為例來(lái)說(shuō)明。在該頁(yè)面中，我們希望左側(cè)的網(wǎng)站標(biāo)識(shí)圖和底部的導(dǎo)航圖出現(xiàn)在每個(gè)頁(yè)面中。其中標(biāo)識(shí)圖由兩幅圖片疊加而成，導(dǎo)航圖上的文字“最近更新”、“在線閱讀”、“打包下載”等劃分成幾個(gè)熱區(qū)分別鏈接到不同的文件，它們?cè)诿總€(gè)頁(yè)面中都不變。右上部的主頁(yè)面區(qū)和左下角彈出式選單按鈕下面的頁(yè)面說(shuō)明則各不相同。為了保持頁(yè)面整潔，我們用表格來(lái)布置這些元素。

準(zhǔn)確地說(shuō)它只是一個(gè)沒(méi)有可編輯區(qū)域的“準(zhǔn)模板”，下面再設(shè)定可編輯區(qū)域。

2、設(shè)定可編輯區(qū)域

設(shè)定模板可編輯區(qū)域，一般來(lái)說(shuō)有兩種方法。

新建可編輯區(qū)域：選擇命令：Modify→Template→NewEditableRegion。在某一空白區(qū)域中單擊后執(zhí)行該命令即可將該區(qū)域變?yōu)榭删庉媴^(qū)域。

標(biāo)記某一區(qū)域?yàn)榭删庉媴^(qū)域：選擇命令：Modify→Template→MarkSelectinasEditableRegion。如果某區(qū)域已經(jīng)有一些文字，并且希望在以后新建的超文本文件中部分保留其內(nèi)容，先選中該區(qū)域再執(zhí)行標(biāo)記命令即可。

取消可編輯狀態(tài)：選擇命令：Modify→Template→UnmarkEditableRegion。執(zhí)行該命令后會(huì)彈出一個(gè)對(duì)話框，其中有當(dāng)前已有的可編輯區(qū)域列表，選中要取消的區(qū)域名稱(chēng)，確認(rèn)即可。

舉例：在大片空白區(qū)中隨便單擊一下，執(zhí)行Modify→Template→NewEditableRegion命令，在彈出對(duì)話框中輸入名稱(chēng)：Main；選中左下角本頁(yè)說(shuō)明下面的文字，執(zhí)行Modify→Template→MarkSelectinasEditableRegion命令，輸入名稱(chēng)：exp?？梢钥吹娇删庉媴^(qū)顯示為淺藍(lán)色，保存即完成模板制作。

二、使用模板

1、根據(jù)模板新建頁(yè)面

命令：File→NewFromTemplate。彈出對(duì)話框，從模板列表中選取模板，出現(xiàn)的新頁(yè)面中除可編輯區(qū)外均有淡黃色背景，是不能進(jìn)行修改的部分?？瞻椎腗ain編輯區(qū)可直接進(jìn)行插入表格、文字、圖片等操作，Exp編輯區(qū)保留有原來(lái)的文字，修改或重新編輯均可。

2、對(duì)一個(gè)已經(jīng)有內(nèi)容的頁(yè)面應(yīng)用模板

命令：Modify→Template→ApplyTemplatetoPage。選擇模板后還會(huì)彈出一個(gè)對(duì)話框，讓您選擇現(xiàn)有的孤立內(nèi)容保存到哪個(gè)可編輯區(qū)域（ChooseEditableRegionforOrphanedContent）。要是不想保留則可以選擇“（none）”。

舉例：我們先新建一個(gè)普通頁(yè)面，輸入：“CIW電腦工作室”，執(zhí)行Modify→Template→ApplyTemplatetoPage命令，選擇模板test，現(xiàn)有內(nèi)容保存區(qū)域選擇Main，確認(rèn)后可看到頁(yè)面自動(dòng)變成了模板頁(yè)的形式，而“CIW電腦工作室”這一行字就出現(xiàn)在主編輯窗口中。

3、更新模板以全面更新站點(diǎn)

基于某一模板建立了一些頁(yè)面后，對(duì)模板進(jìn)行修改后保存時(shí)，就會(huì)自動(dòng)彈出一個(gè)對(duì)話框，列出所有使用了該模板的頁(yè)面，詢問(wèn)是否要更新。

另外一種方法是執(zhí)行Modify→Template→UpdatePages命令。從UpdatePages對(duì)話框中選擇一個(gè)站點(diǎn)或站點(diǎn)的某一種模板（同一站點(diǎn)中可以使用多個(gè)模板），單擊右側(cè)的Start按鈕，軟件會(huì)自動(dòng)搜索與模板相關(guān)聯(lián)的網(wǎng)頁(yè)并進(jìn)行更新。非常方便！

舉例：Test模板左側(cè)圖形中的“讀書(shū)破萬(wàn)站”圖片是用一個(gè)圖層疊加在另一幅圖片之上的，現(xiàn)在不想要它，同時(shí)還想將所有頁(yè)面中的該圖片均刪除。就可以打開(kāi)模板test.dwt，刪除該圖層，保存模板，單擊右側(cè)的“Update”按鈕即可。

注意：新建和使用模板前需定義站點(diǎn)。方法是，執(zhí)行命令：Site→DefineSites；指定站點(diǎn)名稱(chēng)和本地根目錄（LocalRoot）。模板使用的是相對(duì)路徑，如果沒(méi)有指定網(wǎng)站在本地的位置，軟件就不能準(zhǔn)確找到并保存模板文件；并且應(yīng)用模板新建和更新頁(yè)面時(shí)，頁(yè)面中的超鏈接也不能隨頁(yè)面文件保存位置的不同而相應(yīng)變化。在Dreamweaver中插入背景音樂(lè)的方法作者：多次收到喜歡太平洋網(wǎng)絡(luò)學(xué)院的網(wǎng)友的信件，信中提問(wèn)如何在Dreamweaver中插入背景音樂(lè)，現(xiàn)在讓我一次性向大家介紹幾種背景音樂(lè)的插入方法，讓更多的人去掌握它。

一、直接插入法

1.打開(kāi)一張需要插入背景音樂(lè)的網(wǎng)頁(yè)，在菜單中找到這樣的命令：Windows->Behaviors，調(diào)出“Behaviors”行為面板，如下圖所示(DreamweaverMX的面板)：

2.點(diǎn)擊“+”號(hào)按鈕，選擇“playsound”命令。

如果此命令呈反白色，不可用，請(qǐng)?jiān)诖嗣钕吕斜碇羞x擇“ShowEvenFor”命令，在此子菜單里選擇“IE4.0”以上的版本，因?yàn)镮E4.0以上的版本才支持此種格式的音樂(lè)插入方法。

3.此時(shí)彈出插入文件窗口，按“Browser”按鈕選擇音樂(lè)文件，當(dāng)然是要瀏覽器支持的音樂(lè)文件格式(如mid、wav、AIFF、AU)。

4.插入之后網(wǎng)頁(yè)里會(huì)顯示一個(gè)“plugin”插件圖標(biāo)，但我們還需要作進(jìn)一步的調(diào)整。因?yàn)镈reamweaver自動(dòng)插入了一段控制代碼，方便我們定制激活背景音樂(lè)。但此功能不需要用到，那么就要把它刪除。代碼有兩段，分別如下：

代碼一、

代碼二、

5.完成插入，此時(shí)的背景音樂(lè)還不能自動(dòng)播放，點(diǎn)選插件圖標(biāo)，按“ctrl+F3”快捷鍵，調(diào)出屬性面板，點(diǎn)擊右下角的“Parameters”按鈕，在彈出的窗口中進(jìn)行修改，把參數(shù)“AutoStart”后面的“Value”缺省值“false”改成“true”（如下圖所示），這樣就達(dá)到打開(kāi)頁(yè)面背景音樂(lè)就響起的效果。

6.之前打開(kāi)刪除代碼時(shí)我們看到了插入音樂(lè)的HTML標(biāo)記為<EMBED>，為了讓大家對(duì)它有更加深入的了解，接下來(lái)介紹一下<EMBED>標(biāo)記的參數(shù)：

<EMBED>是用來(lái)插入各種多媒體，格式可以是Midi、Wav、AIFF、AU等等，Netscape及新版的IE都支持。其參數(shù)設(shè)定較多。如下：

<EMBEDsrc="your.mid"autostart="true"loop="true"hidden="true">

src="your.mid"

設(shè)定midi檔案及路徑，可以是相對(duì)或絕對(duì)。

autostart=true

是否在音樂(lè)檔下載完之后就自動(dòng)播放。true是，false否(內(nèi)定值)。

loop="true"

是否自動(dòng)反復(fù)播放。LOOP=2表示重復(fù)兩次，true是，false否。

HIDDEN="true"

是否完全隱藏控制畫(huà)面，true為是，no為否(內(nèi)定)。

STARTTIME="分:秒"

設(shè)定歌曲開(kāi)始播放的時(shí)間。如STARTTIME="00:30"表示從第30秒處開(kāi)始播放。

VOLUME="0-100"

設(shè)定音量的大小，數(shù)值是0到100之間。內(nèi)定則為使用系統(tǒng)本身的設(shè)定。

WIDTH="整數(shù)"和HIGH="整數(shù)"

設(shè)定控制面板的高度和寬度。(若HIDDEN="no")

ALIGN="center"

設(shè)定控制面板和旁邊文字的對(duì)齊方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom

CONTROLS="smallconsole"

設(shè)定控制面板的外觀。預(yù)設(shè)值是console。

console一般正常面板

smallconsole較小的面板

playbutton只顯示播放按鈕

pausecutton只顯示暫停按鈕

stopbutton只顯示停止按鈕

volumelever只顯示音量調(diào)節(jié)按鈕

二、代碼法

<BGSOUND>：

<BGSOUND>是用來(lái)插入背景音樂(lè)，但只適用于IE，其參數(shù)設(shè)定不多。如下

<BGSOUNDsrc="your.mid"autostart=trueloop=infinite>

src="your.mid"

設(shè)定midi檔案及路徑，可以是相對(duì)或絕對(duì)。

autostart=true

是否在音樂(lè)檔下載完之后就自動(dòng)播放。true是，false否(內(nèi)定值)。

loop=infinite

是否自動(dòng)反復(fù)播放。LOOP=2表示重復(fù)兩次，Infinite表示重復(fù)多次。

此種方法就是直接把<BGSOUND>標(biāo)記放于網(wǎng)頁(yè)文件的<head></head>之間，設(shè)置好mid文件的路徑就行。參數(shù)的設(shè)置如文中解說(shuō)。

三、插件法

有些人始終沒(méi)有舍棄FrontPage也許就因?yàn)樵谝恍┰氐牟迦胫?，Dreamweaver沒(méi)有提供功能，或者不方便。但我們知道，Dreamweaver支持插件，聲音插入插件為我們提供了方便。

插件名稱(chēng)：sound.mxp

下載后雙擊文件，就可以直接安裝了，安裝完成你可以在“對(duì)象”面板的“Common”欄看到一個(gè)喇叭圖標(biāo)。直接點(diǎn)擊此按鈕，就彈出如下圖所示的插入窗口：

Forever：設(shè)置無(wú)限循環(huán)播放

Never：不循環(huán)播放，即只播放一次

NOoftimes：設(shè)置播放的次數(shù)

點(diǎn)擊“Browser”按鈕選擇好聲音文件之后，按確定完成制作。

學(xué)習(xí)了上面三種方法，以后插入背景音樂(lè)就簡(jiǎn)單方便多了。用DreamweaverMX巧妙格式化表格作者：表格制作好了，內(nèi)容也有了，怎么看著別扭呀！哦，還沒(méi)有給表格化化裝--格式化表格呀，俗話說(shuō)：人靠衣服也靠鞍，要想讓你制作的網(wǎng)頁(yè)漂漂亮亮、美觀大方，還有很長(zhǎng)的路要走呢！

一、格式化表格

表格的格式化主要包括表格的對(duì)齊方式、間距與邊距的調(diào)整、邊框的設(shè)置及背景的設(shè)置。大部分工作可以通過(guò)表格的屬性面板完成，如圖所示。

對(duì)齊：選定表格后，通過(guò)屬性面板中Align(對(duì)齊)設(shè)置表格在網(wǎng)頁(yè)中對(duì)齊方式：居中、居左或居右，如果你要使表格想去哪就去哪，想不去哪就不去哪，還得另想高招：

1、將表格放置到層中；

2、表格中嵌套表格。

CellPad(邊距)和CellSpace(間距)：搞清楚兩個(gè)概念是關(guān)鍵：邊距是指單元格中文本與單元格邊框之間的距離，而間距是指單元格之間的距離，如圖所示，兩者的單位都是象素，默認(rèn)情況下以間距2，邊距1的設(shè)置顯示表格。

表格的邊框：可設(shè)置顏色和寬度，在“Border(邊框)”域中默認(rèn)值是1，增大數(shù)值可使邊框?qū)挾仍黾?，形成立體邊框，若輸入的數(shù)值為“0”，則在瀏覽網(wǎng)頁(yè)時(shí)不顯示的表格的邊框，只顯示其中內(nèi)容，這在網(wǎng)頁(yè)設(shè)計(jì)中是應(yīng)用比較多的。通過(guò)“BrdrColor(邊框顏色)”域設(shè)置邊框的顏色。

表格背景：在“BgColor(背景顏色)”和“BgImage(背景圖象)”域中對(duì)背景可設(shè)置顏色和圖象，在設(shè)置背景圖象時(shí)若表格大于圖象，則圖象是重復(fù)出現(xiàn)的。有時(shí)可形成奇特效果。

二、格式化單元格

單元格的格式化包括單元格及其中內(nèi)容的格式化，通過(guò)單元格的屬性面板進(jìn)行設(shè)置，如圖所示。

單元格中文本：主要對(duì)字體、字號(hào)、顏色、對(duì)齊方式、是否換行等設(shè)置。在這里特別說(shuō)明的是“NoWrap(換行)”的設(shè)置，默認(rèn)單元格中的文本“換行”的，如果內(nèi)容較長(zhǎng)且要求相對(duì)完整，那么就要設(shè)置為“不換行”，選中“NoWrap”后的復(fù)選框即可，這樣在網(wǎng)頁(yè)瀏覽時(shí)表格的寬度可能超過(guò)顯示器屏幕。選中“Header”后復(fù)選框可將光標(biāo)所在行設(shè)置為標(biāo)題：文本加粗并自動(dòng)居中。

單元格背景：在“Bg(背景)”域中給單元格加上背景顏色或圖象，方法與表格背景的設(shè)置相同。

單元格邊框：在“Border(邊框)”域中設(shè)置單元格的顏色。

三、使用設(shè)計(jì)方案格式化表格

使用“格式化表格”命令可以向表格快速應(yīng)用一個(gè)預(yù)置的設(shè)計(jì)。您可選擇選項(xiàng)定制該設(shè)計(jì)。若要使用預(yù)置設(shè)計(jì)：

1、選定表格然后選擇“Commands/FormatTable”。

2、在出現(xiàn)的對(duì)話框左邊列表中選擇一個(gè)設(shè)計(jì)方案，右邊將顯示該方案的一個(gè)樣本。如圖所示：

3、若要進(jìn)一步定制設(shè)計(jì)，可以對(duì)“RowColor(行顏色)”，“TopRow(首行)”及“LeftCol(首列)”進(jìn)行修改。

4、若要修改邊框?qū)挾?，在“Border(邊框)”域中輸入一個(gè)數(shù)值，如果不需要邊框則輸入0。

5、若要對(duì)表格單元格(td標(biāo)簽)而不是表格行(tr標(biāo)簽)應(yīng)用設(shè)計(jì)，請(qǐng)選擇“ApplyAllAttributestoTDTagsInsteadofTRTags(將所有屬性應(yīng)用到TD標(biāo)簽而不是TR標(biāo)簽)”。

表格單元格格式化會(huì)覆蓋您為該單元格所在行指定的一切格式。然而，如果您需要行中的所有單元格都格式化到一種格式，那么最好是格式化該行而不是該行的每個(gè)單元格，這樣可以得到更加清楚而簡(jiǎn)練的HTML源代碼。

6、點(diǎn)擊“應(yīng)用”或“確定”以使用選定的設(shè)計(jì)格式化表格。

四、格式化表格與單元格中的幾個(gè)順序問(wèn)題

如果同時(shí)設(shè)置了表格背景和單元格背景，會(huì)出現(xiàn)何種現(xiàn)象呢？即那一種設(shè)置優(yōu)先呢？

當(dāng)在“文檔”窗口中格式化表格時(shí)，您可以定義要應(yīng)用到整個(gè)表格或是選定的行，列，單元格的屬性。當(dāng)某屬性，如背景顏色或?qū)R方式，對(duì)整個(gè)表格設(shè)置與對(duì)表格某些單元格的設(shè)置不同時(shí)，理解Dreamweaver如何解釋HTML源代碼就很有用了。

當(dāng)同樣的屬性在表格中被多于一次設(shè)置時(shí)，Dreamweaver將采用如下的解釋方式：?jiǎn)卧窀袷?td標(biāo)簽的一部分)優(yōu)先權(quán)高于行格式(tr標(biāo)簽)，而行格式的優(yōu)先權(quán)高于表格格式(table標(biāo)簽)。所以，如果您為一個(gè)單元格指定其背景色為藍(lán)色，而將整個(gè)表格背景色設(shè)置為黃色，該藍(lán)色的單元格并不會(huì)變?yōu)辄S色，因?yàn)閠d標(biāo)簽的優(yōu)先權(quán)高于table標(biāo)簽。Dreamweaver制作網(wǎng)頁(yè)幻燈片效果作者：作為一位不懂代碼的業(yè)余網(wǎng)頁(yè)制作愛(ài)好者，常常羨慕專(zhuān)業(yè)程序人員在瀏覽器中編制出的效果超酷的一些多媒體作品。唉，無(wú)奈程序那東東，酶澀南學(xué)，非一日之功，需要良好的邏輯思維能力和足夠的磨練方可成就。是不是不會(huì)程序，就永遠(yuǎn)就不能實(shí)現(xiàn)自己的創(chuàng)意和想法了呢？非也！現(xiàn)在我們要制作的就是在網(wǎng)頁(yè)中的一個(gè)幻燈片播放器。當(dāng)用戶按下控制盤(pán)上的“PLAY”鍵時(shí)圖片將作幻燈片似的連續(xù)循環(huán)播放。按下“PAUSE”時(shí)，播放中的圖片就停留在當(dāng)前位置。按下“RESTART”鍵時(shí)，幻燈片又從頭播放。而這一切，僅僅采用Dreamweaver3的內(nèi)嵌的層（Layer）、時(shí)間鏈（Timeline）和行為（Behavior）技術(shù)，就可實(shí)現(xiàn)，所有的JavaScript代碼都會(huì)在Dreamweaver中自動(dòng)生成。這里不是鼓勵(lì)大家不要接觸程序代碼，相反，若讀者掌握了一些編程技術(shù)的基礎(chǔ)，會(huì)在網(wǎng)頁(yè)制作中起到相當(dāng)重要的作用。實(shí)際上，這已是當(dāng)今專(zhuān)業(yè)WEB頁(yè)面制作人員的一項(xiàng)基本素質(zhì)要求。

下面分步驟對(duì)這個(gè)播放器的制作加以說(shuō)明。

步驟一：圖形元素的制作和準(zhǔn)備。

制作幻燈片所用的圖片并將之放入Dreamweaver的層中。我們準(zhǔn)備在每個(gè)幻燈片中實(shí)現(xiàn)7幅圖片的交替變換，因此我們需要制作7幅內(nèi)容不同的圖片。注意圖片要在Photoshop中進(jìn)行優(yōu)化壓縮，并調(diào)整成相同的尺寸。建立一個(gè)層，插入初始圖片，該圖片就是幻燈片默認(rèn)得頭一張圖片。將層命名為L(zhǎng)ayer_main，并把該層的Index值設(shè)為1。

步驟二：制作播放器的外觀和四個(gè)控制按鈕。

利用Photoshop制作一個(gè)金屬效果的播放器外觀。（具體效果就看你的喜好啦，也許你可從Winamp的skin中受點(diǎn)啟發(fā)）。作最佳優(yōu)化后，輸出一個(gè)透明的GIF圖片。為了讓鼠標(biāo)移上后按鈕有些變化，你不得不每個(gè)按鈕制作2張圖片（共6個(gè)），兩個(gè)按鈕只需有顏色上的差異即可。先建三個(gè)層，調(diào)整好位置，并插入三個(gè)播放鍵的各自的二張翻滾圖片（RolloverImage）（Insert-RolloverImage）。通過(guò)調(diào)節(jié)層的Index-Z的值，確保播放器所在的層在Layer_main層的上面，在按鈕所在層的下面。排版好的各層如圖所示。

步驟三：創(chuàng)建幻燈片播放時(shí)間鏈。

按Ctrl+F9鍵打開(kāi)時(shí)間鏈浮動(dòng)工具面板。選取其中幻燈片所在層(Layer_main)中的初始圖片(確保選取的是圖像，而不是層)，用鼠標(biāo)拖至?xí)r間鏈浮動(dòng)工具面板，在時(shí)間鏈起始處釋放鼠標(biāo)。設(shè)定幀速率為Fps為5，并勾選Loop框。選擇時(shí)間鏈中的其中一幀，右擊鼠標(biāo)，選擇"AddKeyframe"（添加關(guān)鍵幀），選擇另一幅幻燈片圖片，以更換層(Layer_main)中的初始圖片。重復(fù)這個(gè)操作，將剩下的5幅圖片全部加到該時(shí)間鏈的不同關(guān)鍵幀上。最后適當(dāng)調(diào)節(jié)各關(guān)鍵幀之間的距離。并將該時(shí)間鏈命名為T(mén)imeLine_main。建立好的時(shí)間鏈如圖所示。

步驟四：為按鈕和其它添加行為（Behavior）。

點(diǎn)擊選擇PLAY按鈕所在的圖片，在行為浮動(dòng)工具面板中，從+（添加）動(dòng)作下拉列表中選擇Timeline-PlayTimeline(播放時(shí)間鏈)，并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。點(diǎn)擊選擇PAUSE所在的圖片。在行為浮動(dòng)工具面板中，從+（添加）動(dòng)作下拉列表中選擇TimelineStopTimeline(停止播放時(shí)間鏈)，并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。

點(diǎn)擊選擇REPLAY所在的圖片。在行為浮動(dòng)工具面板中，從+（添加）動(dòng)作下拉列表中選擇TimelineGotoTimelineFrame(轉(zhuǎn)向放時(shí)間鏈幀)，并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main，在Frame文本框中輸入1。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。再添加下一個(gè)動(dòng)作。從+（添加）動(dòng)作下拉列表中選擇TimelinePlayTimeline(播放時(shí)間鏈)，并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。REPLAY的圖片添加好的行為如圖所示。

本例中做好的播放器，可在下列地址瀏覽：/sample/index.htm。進(jìn)一步，為了讓播放器更加生動(dòng)，你可以同時(shí)給幻燈片的播放加上聲音。

若要把這個(gè)播放器放到網(wǎng)上，同時(shí)圖片總?cè)萘砍^(guò)150K，可以給頁(yè)面作一個(gè)“Loading（加載）層”，待全部?jī)?nèi)容下載完畢后，才顯示出來(lái)。以免由于圖片未下載完而產(chǎn)生播放不暢的感覺(jué)。關(guān)于“Loading”層的制作方法，在很多地方有介紹，這里就不再詳述了。

把這個(gè)例子變通一下，我們可以作一個(gè)相冊(cè)。你可以把你的家庭或女朋友的相片加在幻燈片所在的時(shí)間鏈上，并且加上Last（上一張）、Next（下一張）等按鈕，便于瀏覽者逐張欣賞。若覺(jué)得相片太小不能看清楚細(xì)節(jié)，你還可以加一個(gè)ZoomIn（放大）按鈕，鏈接到一個(gè)有單張放大相片的新窗口頁(yè)面。最后把它放到網(wǎng)上，相信一定會(huì)給你的家人或女朋友帶去一份驚喜?；瑒?dòng)菜單的制作作者：今天應(yīng)朋友們要求，來(lái)對(duì)我網(wǎng)站上一個(gè)滑動(dòng)菜單效果寫(xiě)一篇簡(jiǎn)單的教程；在牛筋大學(xué)軟件部有一個(gè)關(guān)于層滑動(dòng)的效果，好像Itnow上的廣告也是采用的這樣效果，不用的時(shí)候隱藏，用的時(shí)候點(diǎn)擊一下按鈕層就慢慢的滑動(dòng)出來(lái)，即節(jié)省了有限的頁(yè)面空間，還達(dá)到了令人羨慕的視覺(jué)效果，感覺(jué)起來(lái)還不錯(cuò)。這個(gè)效果大家可以點(diǎn)擊這里察看

言歸正傳，廢話少說(shuō)。準(zhǔn)備工作如下：

1．在dw中新建一個(gè)空白文檔（或者打開(kāi)你要添加效果的頁(yè)面）。

2．設(shè)置好你自己的css風(fēng)格。

3．在頁(yè)面上插入一個(gè)長(zhǎng)500pix的表格（這里說(shuō)明：插入表格的目的是為了控制層在不同分辨率下保持相對(duì)的位置不變，如果你的頁(yè)面之前沒(méi)有做相關(guān)設(shè)置，那么這一部你可能要費(fèi)點(diǎn)功夫整理一下你的頁(yè)面結(jié)構(gòu)）。

4．將光標(biāo)置入表格內(nèi)，點(diǎn)擊菜單[插入——層]插入一個(gè)長(zhǎng)500高20的圖層，并命名為layer1。

5．然后再將光標(biāo)置入圖層layer1，點(diǎn)擊菜單[插入——層]再插入一個(gè)長(zhǎng)500高130的圖層layer2；并將layer2的屬性中左邊距和上邊距都設(shè)置為0，并為它指定一個(gè)你喜歡的背景色。

6．然后重復(fù)步驟5的方法，再插入一個(gè)圖層layer3，這個(gè)圖層沒(méi)什么特殊的用處，在我的這個(gè)教程中，我只不過(guò)是為了放置幾個(gè)按鈕而已。最后我的開(kāi)起來(lái)如圖：

TIPS：這里這么做的目的是為了給你要滑動(dòng)的圖層前面加一個(gè)擋板，只有當(dāng)點(diǎn)擊的時(shí)候圖層才從你的這個(gè)圖層下緩緩的滑動(dòng)出來(lái)。

現(xiàn)在開(kāi)始，才正式進(jìn)入到我們今天要制作的滑動(dòng)菜單的制作過(guò)程中。

現(xiàn)在讓我們?cè)俅沃貜?fù)上面的步驟5，再插入一個(gè)圖層layer4,設(shè)置圖層屬性為寬500、150高，剛好是剛才layer2和layer3的高度之和，并將圖層layer4調(diào)整到另外兩個(gè)圖層下面。如圖：

然后我們點(diǎn)擊圖層layer2前面的眼睛讓他閉合，這樣可以讓我們看到它下面的圖層layer4.

這時(shí)，我們點(diǎn)擊ALT+F9打開(kāi)時(shí)間軸面板，DW已經(jīng)為我們添加了默認(rèn)的時(shí)間軸Timeline1，然后，我們選中我們要滑動(dòng)的圖層layer4，在上面點(diǎn)擊右鍵，選擇[添加到時(shí)間軸]這時(shí)我們可以在時(shí)間軸面板中看到我們剛剛制定的圖層layer4，這說(shuō)明，我們已經(jīng)添加成功了！

然后我們點(diǎn)擊時(shí)間軸上的第15楨，將圖層layer4的屬性面板中的上邊距調(diào)整為150。到這里，一個(gè)能滑動(dòng)的圖層就算做好了，你可以拖動(dòng)時(shí)間軸上面的紅色方塊慢慢從1走向15，你就可以看到你的這個(gè)圖層慢慢的從layer2和layer3下面滑動(dòng)出來(lái)！

好了，現(xiàn)在我們只需要給這個(gè)會(huì)滑動(dòng)的圖層layer4設(shè)置一個(gè)可以激活他的動(dòng)作就算over了：）這之前，我已經(jīng)在我添加的layer3上插入了一個(gè)表格，并為layer4設(shè)置了兩個(gè)按鈕。

我們先設(shè)置激活滑動(dòng)圖層的動(dòng)作。選擇上展開(kāi)這個(gè)按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊面板中的“＋”在出來(lái)的菜單中選擇[時(shí)間軸——播放時(shí)間軸]DW會(huì)彈出一個(gè)窗體，在上面的下拉菜單中選擇

timeline1。

然后在行為面板中確認(rèn)事件為onclick

好了，到這里，你可以預(yù)覽一下，當(dāng)你點(diǎn)擊上展開(kāi)按鈕時(shí)，你的圖層就會(huì)慢慢的從上而下滑動(dòng)出來(lái)！

怎么樣，看到了吧：）我們?cè)俳o圖層添加上一個(gè)簡(jiǎn)單的關(guān)閉動(dòng)作，就是點(diǎn)擊關(guān)閉按鈕后圖層隱藏。選擇上關(guān)閉按鈕，轉(zhuǎn)到行為面板，點(diǎn)面板中的“＋”在出來(lái)的菜單中選擇[顯示隱藏層]，在跳出的窗體中選擇上layer4，然后點(diǎn)擊下面的隱藏按鈕，將其設(shè)置為隱藏，如圖：

好了，再預(yù)覽一下，發(fā)現(xiàn)展開(kāi)后點(diǎn)擊關(guān)閉圖層就沒(méi)有了：）不過(guò)，似乎有一個(gè)問(wèn)題，再次點(diǎn)擊展開(kāi)的時(shí)候，似乎沒(méi)什么反應(yīng)了，那是我們還有一個(gè)動(dòng)作沒(méi)有設(shè)置。

重復(fù)剛才的步驟5，選擇上展開(kāi)按鈕，添加動(dòng)作[時(shí)間軸——轉(zhuǎn)到時(shí)間軸楨]，在跳出的窗體中的下拉菜單選擇timeline1，楨數(shù)添上1。

好了，這次預(yù)覽發(fā)現(xiàn)這個(gè)問(wèn)題解決了。但是我們似乎還是忽略了一個(gè)問(wèn)題，點(diǎn)擊關(guān)閉后這個(gè)圖層被設(shè)置為隱藏了，再點(diǎn)擊展開(kāi)也沒(méi)反應(yīng)了。還是運(yùn)用老辦法，給展開(kāi)按鈕添加一個(gè)動(dòng)作就可以解決了！

重復(fù)步驟5，選擇[顯示隱藏層]，和剛才步驟6相反，這次我們選擇顯示，確定后，保證行為面板中顯示隱藏圖層的時(shí)間都是onclick。此刻展開(kāi)按鈕的行為面板如圖：

好，再次預(yù)覽，一切正常！

至此，這個(gè)效果就算完成了，當(dāng)然，大家完全可以自我發(fā)揮制作出更好的效果來(lái)，但是萬(wàn)變不離其宗，只要我們掌握好了時(shí)間軸配合動(dòng)作行為的運(yùn)用，所有的效果只是操作問(wèn)題。\o"PoweredbyDvNews"DvNewsDreamweaverMX2004的CSS新功能作者：如今網(wǎng)頁(yè)的排版格式越來(lái)越復(fù)雜，很多效果需要通過(guò)CSS來(lái)實(shí)現(xiàn)，DreamweaverMX2004在CSS功能設(shè)計(jì)上做了很大的改進(jìn)。下面我們就來(lái)看看這些改進(jìn)的地方。

一、屬性面板的改進(jìn)

DreamweaverMX2004在屬性面板中增加了“Style”選項(xiàng)，我們?cè)谠O(shè)計(jì)頁(yè)面時(shí)所做的添加的字體、顏色、大小等樣式，“Style”會(huì)將這些設(shè)計(jì)自動(dòng)記憶生成“Style1”、“Style２”樣式。在下次重復(fù)使用可以直接在“Style”中套用樣式。有了這個(gè)功能，我們?cè)谧鼍W(wǎng)頁(yè)設(shè)計(jì)時(shí)可以大大提高工作效率。

如果套用的CSS樣式不是文字，而是表格，同樣可以在屬性面板中設(shè)置CSS。在屬性面板中都有一個(gè)類(lèi)別（Class），在這里就可以設(shè)計(jì)表格的CSS樣式。

二、頁(yè)面的CSS屬性

在DreamweaverMX2004的屬性面板中可以看到一個(gè)“PgaeProperties”的選項(xiàng)。

點(diǎn)擊這個(gè)選項(xiàng)，可以直接打開(kāi)“PageProperties”的設(shè)置對(duì)話框。

在對(duì)話框左邊的分類(lèi)中可以看到外觀、鏈接、標(biāo)題文字、標(biāo)題／編碼、網(wǎng)頁(yè)圖片等等選項(xiàng)，選中其中一個(gè)類(lèi)別，在右邊出現(xiàn)相應(yīng)的設(shè)置內(nèi)容。例如在圖4中，選中了“Link”可以設(shè)計(jì)這一個(gè)網(wǎng)頁(yè)中關(guān)于鏈接的CSS樣式，包括鏈接的文字大小、鼠標(biāo)滑過(guò)顯示的顏色、下劃線等。其他類(lèi)別的CSS設(shè)置，大家可以自己試試看。

在“PageProperties”

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論