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

下載本文檔

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

文檔簡介

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

1.顏色背景

顏色背景的設(shè)計是最為簡單的，但同時也是最為常用和最為重要的，因為相對于圖片背景來說，它有無與倫比的顯示速度上的優(yōu)勢。在網(wǎng)頁文件中，一般通過<body>標(biāo)簽來指定頁面的顏色背景，其HTML語法為：

<bodybgcolor="color">

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

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

2.沙紋背景

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

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

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

<bodybackground="picture">

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

3.條狀背景

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

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

<bodybackground="picture">

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

4.照片背景

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

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

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

5.復(fù)合背景

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

6.局部背景

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

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

<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)。就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，

右面顯示內(nèi)容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布

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

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

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

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

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

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

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

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

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

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

設(shè)計型站點。優(yōu)點是視覺沖擊力強，缺點是將兩部分有機的結(jié)合比較困難。

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

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

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

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

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

1.加強視覺效果

2.加強文案的可視度和可讀性

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

4.新鮮和個性是布局的最高境界

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、色彩的運用

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

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

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

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

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

四、造型的組合

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

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

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

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

五、設(shè)計的原則

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、建立模板

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

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

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

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

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

準確地說它只是一個沒有可編輯區(qū)域的“準模板”，下面再設(shè)定可編輯區(qū)域。

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

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

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

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

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

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

二、使用模板

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

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

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

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

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

3、更新模板以全面更新站點

基于某一模板建立了一些頁面后，對模板進行修改后保存時，就會自動彈出一個對話框，列出所有使用了該模板的頁面，詢問是否要更新。

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

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

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

一、直接插入法

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

2.點擊“+”號按鈕，選擇“playsound”命令。

如果此命令呈反白色，不可用，請在此命令下拉列表中選擇“ShowEvenFor”命令，在此子菜單里選擇“IE4.0”以上的版本，因為IE4.0以上的版本才支持此種格式的音樂插入方法。

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

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

代碼一、

代碼二、

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

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

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

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

src="your.mid"

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

autostart=true

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

loop="true"

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

HIDDEN="true"

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

STARTTIME="分:秒"

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

VOLUME="0-100"

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

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

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

ALIGN="center"

設(shè)定控制面板和旁邊文字的對齊方式，其值可以是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>是用來插入背景音樂，但只適用于IE，其參數(shù)設(shè)定不多。如下

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

src="your.mid"

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

autostart=true

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

loop=infinite

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

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

三、插件法

有些人始終沒有舍棄FrontPage也許就因為在一些元素的插入中，Dreamweaver沒有提供功能，或者不方便。但我們知道，Dreamweaver支持插件，聲音插入插件為我們提供了方便。

插件名稱：sound.mxp

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

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

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

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

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

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

一、格式化表格

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

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

1、將表格放置到層中；

2、表格中嵌套表格。

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

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

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

二、格式化單元格

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

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

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

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

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

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

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

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

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

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

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

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

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

四、格式化表格與單元格中的幾個順序問題

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

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

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

下面分步驟對這個播放器的制作加以說明。

步驟一：圖形元素的制作和準備。

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

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

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

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

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

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

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

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

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

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

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

言歸正傳，廢話少說。準備工作如下：

1．在dw中新建一個空白文檔（或者打開你要添加效果的頁面）。

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

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

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

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

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

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

現(xiàn)在開始，才正式進入到我們今天要制作的滑動菜單的制作過程中。

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

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

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

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

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

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

timeline1。

然后在行為面板中確認事件為onclick

好了，到這里，你可以預(yù)覽一下，當(dāng)你點擊上展開按鈕時，你的圖層就會慢慢的從上而下滑動出來！

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

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

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

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

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

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

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

一、屬性面板的改進

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

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

二、頁面的CSS屬性

在DreamweaverMX2004的屬性面板中可以看到一個“PgaeProperties”的選項。

點擊這個選項，可以直接打開“PageProperties”的設(shè)置對話框。

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

在“PageProperties”

溫馨提示

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

評論

0/150

提交評論