教程網(wǎng)頁設(shè)計 入門 切圖

網(wǎng)頁切圖、網(wǎng)頁美工May31,200715:04一，基本概念

1，切圖，是一種網(wǎng)頁制作技術(shù)，他是將美工效果圖轉(zhuǎn)換為頁面效果圖的重要技術(shù)。Fireworks也提供了切圖技術(shù)，F(xiàn)lash則直接提供了網(wǎng)頁格式輸出技術(shù)（不需要切圖）。

2，切片，是切圖的直接結(jié)果，切圖實際上就將圖切分為一系列的切片

二，切圖操作過程

1，切圖工具圖標的識別

2，切圖基本操作

1）基本操作有兩個：劃分切片和編輯切片

劃分切片，是使用切片工具，在原圖上進行切分的操作。

編輯切片，是對切分好的切片進行編輯的操作，編輯包括對切片的名稱、尺寸等的修改等等

下面我們看一下這兩個操作

2）基本操作

如果想移動某個切片，可以使用“切片選擇工具”選擇某個切片，并用鼠標進行拖動，也可以使用實現(xiàn)，另外如果想精確的細微移動，則可以使用實現(xiàn)

如果想將某個切片存為某個圖片輸出，可以使用“切片選擇工具”選擇某個切片，然后選擇“文件”菜單，并選擇“存儲為Web所用格式(W)...”，然后在彈出的界面中...

3，切圖技巧

1）一張圖，可以有多種切分方式，如下：

既然存在n多種切圖方式，那么是不是哪種方式都可以滿足要求？

答案：不是的。

一般對頁面的要求是，當頁面大小發(fā)生變化時，頁面的各部分可以相對自由地伸縮，而不會使頁面發(fā)生錯亂或變形等問題。

我們切分好的圖是要輸出為Html格式的網(wǎng)頁文件的，然后通過網(wǎng)頁編輯器，將該頁面進行加工，做成符合要求（例如可以根據(jù)內(nèi)容多少，自由伸縮等）的模板頁面。這其中，切圖的方式直接影響著模板頁面是否能夠滿足實際的要求。

我們來看一個例子：

2）切圖技巧主要有幾下幾點

屬性均勻的區(qū)域適合分為一個切片，均勻主要是指顏色和形狀都沒有變化，或者在X或在Y方向上沒有變化。

屬性漸變的區(qū)域適合分為一個切片，漸變有兩種表現(xiàn)形式

顏色漸變

形狀漸變

根據(jù)原圖的內(nèi)容布局，確定整體的切分策略，即切分要有分塊的思想，要在想象中將整個布局看成是一個兩個table，然后在具體到每個table，去考慮里面應(yīng)該如何切。

下面通過幾個圖例來說明

三，切圖的Html格式輸出

切圖完成，就可以輸出為Html格式的頁面了。

在“文件”菜單中，選擇“存儲為Web所用格式(W)...”，在彈出的頁面中直接選擇“存儲”，然后在彈出的界面中，填入文件名，保存類型選擇“HTML和圖像(*.html)”，設(shè)置為“默認設(shè)置”即可，切片選擇“所有切片”。然后點擊“保存”按鈕就可以了。

后面的事情，就是編輯輸出的Html頁面了。網(wǎng)頁制作：從切圖到生成網(wǎng)頁鑒于很多朋友問到如何切圖這個問題，又鑒于這個問題可大可小，一兩句話是絕對講不清楚的，所以今天有空閑在家里就舉一個簡單的例子來說明這個問題吧!OK，讓我們開始：

step1:在PhotoShop中打開設(shè)計稿，如下圖

選擇工具板上的slice切片工具，先大刀闊斧的切上一番!技巧：大面積的色塊單獨切成一塊，盡可能的保持在水平線上的整齊(這個問題你們在后面的制作頁面中深有感觸)切好的圖如下所示：

step2:在PhotoShop中選擇file-saveforweb...來輸出，這里要注意一些參數(shù)的選擇：我們來看看紅線所標識的1，2，3部分，將1所示的切片工具選中，然后點選2所示的圖片，在3所示的地方選擇色值，如果色彩單一可以選擇盡量小的色值位;(為什么要這樣？？)答案：這樣會大大減小文件的大小，同時又能比較好的保持圖片的色彩；設(shè)置好后點OK輸出文件，這里的文件包括了一個htm和images文件夾，如圖：

這里候你的頁面才算完成了一半，接下來在Dreamweaver里建立站點：

step3:定義站點：

在圖示左邊的sitename中為站點起一個名字，如example

然后在下面的localrootfolder中選擇我們剛才導出的站點所以的文件夾；站點建好后在sitemap中我們看到：

(為什么要建立站點？)建立站點可以使我們養(yǎng)成一種很好的習慣，就是把一個網(wǎng)站所包含的文件，文件夾有條理的放在一起，同時我們很容易的將這個站點移動到其它地方而不用對文件路徑進行任何改寫!(當然如果你實在不想建立站點也沒人強求你，我在事際工作中就遇到這樣的同事，沒有習慣為頁面建立站點，當然后果的要麻煩少少了)

step4:重新制作頁面表格(為什么？)通常在photoshop中直接導出的htm文件是不可以直接使用的，因為有些地方在實際運用時要作調(diào)整，比如有動態(tài)文字的地方，我們需要在頁面中輸入頁不是使用圖片，那么圖片就要把它拿走，如果你在直接生成的htm中拿走不想要的圖片再加上你想要的東西，你們發(fā)現(xiàn)頁面將變得慘不忍睹，整個頁面可能完全亂了套!

好了，先來分析一下導出的htm文件吧：根據(jù)這個頁面表格所示，我們在新的頁面中建立一個三行一列的表格:

注意，把cellpadding,cellspacing,border三項值設(shè)為0，這個很重要；因為圖片中我們不希望看到空隙和錯位；然后再在第一行中插入一個三行兩列的表格，并合并左邊三列的表格，如圖：

插入表格的時個要注意對比原h(huán)tm文件中的內(nèi)容，思考為什么這樣做；

接下來在第二行中插入一個二行二列的表格，按上面的方法合并左邊的格子，并在右邊格子的第一行插入一個一行五列的表格如圖示：

最后在下面一行插入一個三行二列的表格，并將圖示中1,2外分別合并：最后得到的頁面應(yīng)該是這樣的：

好了，現(xiàn)在我們的任務(wù)就是往表格里面加圖加內(nèi)容了!這里就不再贅述了!(其實已經(jīng)贅述得夠多了!)

還要提醒大家注意的是在加圖片和內(nèi)容時，表格單元格的align,valign這兩個屬性非常重要，要不遺余力的運用它們來幫你做事!OK，自己實踐一下!不用切圖的頁面圓角首先看樣式表文件：

.b1{height:1px;font-size:1px;overflow:hidden;display:block;background:#000;margin:05px;}

.b2{height:1px;font-size:1px;overflow:hidden;display:block;background:#fff;

border-right:2pxsolid#000;border-left:2pxsolid#000;margin:03px;}

.b3{height:1px;font-size:1px;overflow:hidden;display:block;background:#fff;

border-right:1pxsolid#000;border-left:1pxsolid#000;margin:02px;}

.b4{height:2px;font-size:1px;overflow:hidden;display:block;background:#fff;

border-right:1pxsolid#000;border-left:1pxsolid#000;margin:01px;}

接著看頁面代碼：

<bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b>

<bclass="b4"></b><bclass="b3"></b><bclass="b2"></b><bclass="b1"></b>

當然你也可以用其他的標簽<div>或者<span><a>之類，應(yīng)該也是可以的用Fireworks制作具有動態(tài)效果的切圖在上一章中，我們說到用fireworks2進行切圖，可以將一個大圖片分割成不同色深的多個小圖片，并且生成相應(yīng)的網(wǎng)頁文件或代碼，從而減小網(wǎng)頁的重量。今天我要接著告訴您的是，功能強大的fireworks2不僅可以制作靜態(tài)切圖，更能夠?qū)С鰆avascript動態(tài)特效！打開monitor.gif件后你可以看到那上面畫的是一個電視機，現(xiàn)在我們要做的是將這個電視機放入一個網(wǎng)頁，并且當瀏覽者的鼠標按下電視機上的開關(guān)后，會在屏幕中播放內(nèi)容。第一步，要在圖象上制作用來調(diào)用javascript的熱區(qū)，制作熱區(qū)的方和上一章中切割圖象的方法一樣，都是使用工具欄最右下方的切割工具（SliceTool）。由于我們設(shè)想中的這個javascript是通過按下電視機開關(guān)后在屏幕上出現(xiàn)變化，所以需要定義兩個熱區(qū)，分別是電視機開關(guān)和電視機屏幕。然后選擇“windows>Object”（Ctrl+I）選項，打開Object面板。先選中電視屏幕的熱區(qū)，Object面板即將顯示這個熱區(qū)的屬性，其中的連接地址默認為“NoURL(noHREF)”也就是當前網(wǎng)頁的連接（#）；項內(nèi)容為鼠標放到圖片上時顯示的提示；這下面那個紅色的靶心是target，用來確定連接標簽的目標的，在這兒就不多說了；最關(guān)鍵的是：不要激活target下的“Auto-NameSlices”功能，而需手動給這個切割熱區(qū)起一個名字，這樣做是為了在指定behavior時能夠方便的辨認目標。還要注意的是在給slice命名時，不能使用中文，否則生成的javascript代碼會在瀏覽器中長時間報錯。在這個例子中我給屏幕熱區(qū)起的名字是“screen”，再以同樣的方法給電視開關(guān)取名為“button”。www.tiexie.renwww.xuji.tv接著做一個電視上要顯示的圖象，選擇“File>New”（Ctrl+N）命令新建一個和屏幕熱區(qū)大小相同的圖片（注意：尺寸過大或過小都會被javascript縮放到屏幕熱區(qū)的大?。Ｐ陆ㄎ募?，您可以使用工具欄上各類工具隨心所欲地畫出自己喜歡的東東（工具欄中各個繪圖工具的使用方法將在以后的教程中做詳細介紹）。對自己的作品滿意了嗎？您畫完后請選擇“File>Export”（Ctrl+Shift+R）將圖象導出為網(wǎng)絡(luò)圖形。Fireworks的圖象導出功能非常強大，但現(xiàn)在您只要一路NEXT就可以了，并將生成的gif文件保存到指定的目錄下。然后回到我們剛才編輯的電視機畫面，選定開關(guān)熱區(qū)，再選擇“Windows>Behaviors”（Ctrl+Alt+H）選項，打開behaviors面板。按下添加按鈕，選擇“SwapImage”，在隨后彈出的SwapImage對話框中的“SwapImageinSlice”選項中選擇“screen”熱區(qū)（也可以在右邊的熱區(qū)畫面中直接選擇screen熱區(qū)，這樣做就可以讓button熱區(qū)調(diào)用一個使screen熱區(qū)產(chǎn)生變化的javascript）；在“SourceofSwap”中選擇“ImageFile”并在瀏覽面板中指定剛才制作的那個gif圖象。最后激活“RestorImageonMouseOut”（激活這個功能后，瀏覽者將鼠標離開調(diào)用javascript的熱區(qū)后，發(fā)生變化的圖象將恢復正常。當上面這步完成后，behaviors面板中將出現(xiàn)一個“OnMouseOver”的件處理器，這就說明剛才做的熱區(qū)已經(jīng)成功調(diào)用了javascript。但我們期的效果是當鼠標按下開關(guān)后才在電視屏幕中顯示內(nèi)容，所以請按下“OnMouseOver”旁的下拉菜單按鈕，在彈出的菜單中選擇“OnClick”。好，到這兒基本上該完工了。想看看作品的效果如何嗎？選擇“File>PreviewinBrowser>Previewin...”（F12）命令，就可以在新窗口中預覽剛才的作品了。達到預期效果了嗎？滿意的話就可以導出成品了，這兒有個小技巧，由于fireworks的預覽功能已經(jīng)生成了臨時的圖形和HTML文件，所以如您使用IE5行預覽的話，可以直接在自己滿意的預覽窗口中將所以文另存，就可以免去導出步驟而得到完整的作品了。如果您沒有IE，那只能乖乖地使用導出功能，具體地導出方法和我們在上一章中所說的靜態(tài)切圖的導出方法相同，在這兒就步重復了。

Fireworks使用技巧

迄今為止，F(xiàn)ireworks在一陣又一陣的喝彩聲中經(jīng)歷了4個成長階段，目前已經(jīng)推出了4.0版本。最初，F(xiàn)ireworks同時又是互聯(lián)網(wǎng)的新生兒，它非常誠懇地吸收了眾家的長處。不管是平面設(shè)計軟件的圖層和色彩，還是動畫制作的帆要領(lǐng)不管是它的Flash圖符和庫面析，還是Dreamweaver的快速啟動欄；不管是矢量繪圖軟件中的工具，還是位圖圖像編輯軟件的面析，只要它們有優(yōu)點，它都學來。Fireworks在學習中創(chuàng)新，從而一步一步走向成熟，也越來越受大家的青睞。第一篇用Fireworks切割圖形但傳統(tǒng)的切圖工作十分繁瑣，許多設(shè)計者都是使用Photoshop類軟件將圖一片片分好，然后在分別保存為不同色深的gif圖象，雖然可以使用action之類的自動執(zhí)行命令集，但實際工作量依舊十分驚人，而且非常容易切錯尺寸?，F(xiàn)在用了Fireworks就可以非常輕松地切割圖片了，首先用Fireworks打開要切割地圖形文件（File>Open），當圖片打開后選擇工具欄最右下方的切割工具（SliceTool），在圖中按住鼠標左鍵任意畫出想要的切割效果（注意不要將選區(qū)重疊），圖中那些紅線表示就是最后生成的表格分欄情況。等全部的切割區(qū)域完成后選擇“FILE>EXPORT”進入導出，在Format中選擇gif，再根據(jù)圖象的具體情況設(shè)置色深、調(diào)色板和透明色，然后按下“Next”。最后再導出成HTML文件的對話框中指定保存的目錄，在“slicing:”選項中選擇“UseSliceObjects:”按照剛才劃分出的切割情況來切圖，并分別保存。在“Style選項”中選擇“Generic”導出成標準的HTML源碼。OK，如果要和Dreamwever一同使用的話，可以選擇“DreamweaverLibra-ry.lbi”將導出為DREAMWEAVER2的一個模板，而“Dreamweaver”選項將導出成DREAMWEAVER作出來的網(wǎng)頁源碼。就這樣，僅幾秒種的時間，就完成了一個非常專業(yè)的圖形切割。怎么樣，您是不是感受到了Fireworks的強大功能。

第二章用Fireworks制作具有動態(tài)效果的切圖在上一章中，我們說到用fireworks2進行切圖，可以將一個大圖片分割成不同色深的多個小圖片，并且生成相應(yīng)的網(wǎng)頁文件或代碼，從而減小網(wǎng)頁的重量。今天我要接著告訴您的是，功能強大的fireworks2不僅可以制作靜態(tài)切圖，更能夠?qū)С鰆avascript動態(tài)特效！打開monitor.gif件后你可以看到那上面畫的是一個電視機，現(xiàn)在我們要做的是將這個電視機放入一個網(wǎng)頁，并且當瀏覽者的鼠標按下電視機上的開關(guān)后，會在屏幕中播放內(nèi)容。第一步，要在圖象上制作用來調(diào)用javascript的熱區(qū)，制作熱區(qū)的方和上一章中切割圖象的方法一樣，都是使用工具欄最右下方的切割工具（SliceTool）。由于我們設(shè)想中的這個javascript是通過按下電視機開關(guān)后在屏幕上出現(xiàn)變化，所以需要定義兩個熱區(qū)，分別是電視機開關(guān)和電視機屏幕。然后選擇“windows>Object”（Ctrl+I）選項，打開Object面板。先選中電視屏幕的熱區(qū)，Object面板即將顯示這個熱區(qū)的屬性，其中的連接地址默認為“NoURL(noHREF)”也就是當前網(wǎng)頁的連接（#）；項內(nèi)容為鼠標放到圖片上時顯示的提示；這下面那個紅色的靶心是target，用來確定連接標簽的目標的，在這兒就不多說了；最關(guān)鍵的是：不要激活target下的“Auto-NameSlices”功能，而需手動給這個切割熱區(qū)起一個名字，這樣做是為了在指定behavior時能夠方便的辨認目標。還要注意的是在給slice命名時，不能使用中文，否則生成的javascript代碼會在瀏覽器中長時間報錯。在這個例子中我給屏幕熱區(qū)起的名字是“screen”，再以同樣的方法給電視開關(guān)取名為“button”。

第三章下面告訴你如何做動畫，COOL！

用Fireworks2制作動畫一共有三中方法，由簡到難的排列起來分別是：合并圖象形成動、使用符號（Symbol）生成畫效果和手工繪制。

合并圖象形成動畫，顧名思義就是將一系列圖片按序排列生成不同的幀而形成動畫（很象Director中的Spacetotime功能），不過這種排列完全是程序自動執(zhí)行的，免去了大量的手工操作。具體的方法是這樣的（當然使用這種方法的前提是必須有一連串連續(xù)的圖片）：選擇“File>OpenMultiple”命令。進入系列圖片所在的目錄，然后按次序?qū)⒁贿B串的圖片加入（“Add”命令）對話框左下部的窗口，并且激活“OpenasAnimatio”選項，再按下“Done”按鈕就OK了。在動畫生成后，按下“Windows>Frame”（Ctrl+Alt+K）命令，您就看到原來的一系列圖片都按次序地從Frame1往下排到底。按下屏幕右下角的播放鍵就可以瀏覽動畫效果了。這種純粹的懶辦法最合適我這樣畫不來線條的人了，一次有只用了10秒鐘就搞定了一個小鳥飛飛的圖片，效果棒極了！不過，要是手頭沒有現(xiàn)成的連續(xù)圖片，那只能勞駕，自己親自動手了。而許多圖畫中有規(guī)則的動態(tài)效果若是用手工制作，既費時間也未必能夠達到理想的效果。所以Fireworks2提供了一個Tween功能，使用戶可以指定程序生成動態(tài)過度效果（感覺就更Flash里的一樣）。在繪制動畫前，我們事先必須明確動畫的工作原理。我想簡單的說，動畫是有不變的物件（object）和會變的物件兩部分組成。通常不變的物是只如背景之類始終在動畫中顯示的物件，而會變的物件是指通過變化形成動畫的物件。所以在制作動畫之前得先制作不變的物件，為此Fire-works2提供了一個共享層的概念（ShareLayer

）。我們都知道，動畫是由一個個不同的幀（Frame）組成的，而共享層就是在所有幀中都顯示的一個層，這樣我們只要將動畫中不變的物件全放在這個層中，以后只需要修改一個幀的共享層中內(nèi)容就可以使所有的幀都達到相應(yīng)變化，大大減少了工作量。設(shè)置共享層的命令是Layer面版的彈出菜單中的“ShareLayer”命令，設(shè)置為共享的層在Layer面版中都有一個特定的共享符號（WegbLayer是系統(tǒng)自動設(shè)置的共享層，用于放置熱點、切割區(qū)）。在完成不變的物件（object）后就可以使用Tween功能制作動畫效果了。Tween功能的原理是將物件（object

）轉(zhuǎn)化為符號（symbol），然后確定符號的初始和結(jié)束樣例（instance），再將這些樣例轉(zhuǎn)換為具有過度效果的連續(xù)幀（frame）。Tween功能支持物件的位移、旋轉(zhuǎn)、縮放、扭曲、以及透明度和層效果（effect）的過度。下面我來舉個實例：通過十個幀讓我的名字“Arky”從圖象的左上角移動到右下角同時逐漸變深。

第三章下面告訴你如何做動畫，COOL！用Fireworks2制作動畫一共有三中方法，由簡到難的排列起來分別是：合并圖象形成動、使用符號（Symbol）生成畫效果和手工繪制。合并圖象形成動畫，顧名思義就是將一系列圖片按序排列生成不同的幀而形成動畫（很象Director中的Spacetotime功能），不過這種排列完全是程序自動執(zhí)行的，免去了大量的手工操作。具體的方法是這樣的（當然使用這種方法的前提是必須有一連串連續(xù)的圖片）：選擇“File>OpenMultiple”命令。進入系列圖片所在的目錄，然后按次序?qū)⒁贿B串的圖片加入（“Add”命令）對話框左下部的窗口，并且激活“OpenasAnimatio”選項，再按下“Done”按鈕就OK了。在動畫生成后，按下“Windows>Frame”（Ctrl+Alt+K）命令，您就看到原來的一系列圖片都按次序地從Frame1往下排到底。按下屏幕右下角的播放鍵就可以瀏覽動畫效果了。這種純粹的懶辦法最合適我這樣畫不來線條的人了，一次有只用了10秒鐘就搞定了一個小鳥飛飛的圖片，效果棒極了！不過，要是手頭沒有現(xiàn)成的連續(xù)圖片，那只能勞駕，自己親自動手了。而許多圖畫中有規(guī)則的動態(tài)效果若是用手工制作，既費時間也未必能夠達到理想的效果。所以Fireworks2提供了一個Tween功能，使用戶可以指定程序生成動態(tài)過度效果（感覺就更Flash里的一樣）。在繪制動畫前，我們事先必須明確動畫的工作原理。我想簡單的說，動畫是有不變的物件（object）和會變的物件兩部分組成。通常不變的物是只如背景之類始終在動畫中顯示的物件，而會變的物件是指通過變化形成動畫的物件。所以在制作動畫之前得先制作不變的物件，為此Fire-works2提供了一個共享層的概念（ShareLayer）。我們都知道，動畫是由一個個不同的幀（Frame）組成的，而共享層就是在所有幀中都顯示的一個層，這樣我們只要將動畫中不變的物件全放在這個層中，以后只需要修改一個幀的共享層中內(nèi)容就可以使所有的幀都達到相應(yīng)變化，大大減少了工作量。設(shè)置共享層的命令是Layer面版的彈出菜單中的“ShareLayer”命令，設(shè)置為共享的層在Layer面版中都有一個特定的共享符號（WegbLayer是系統(tǒng)自動設(shè)置的共享層，用于放置熱點、切割區(qū)）。在完成不變的物件（object）后就可以使用Tween功能制作動畫效果了。Tween功能的原理是將物件（object

）轉(zhuǎn)化為符號（symbol），然后確定符號的初始和結(jié)束樣例（instance），再將這些樣例轉(zhuǎn)換為具有過度效果的連續(xù)幀（frame）。Tween功能支持物件的位移、旋轉(zhuǎn)、縮放、扭曲、以及透明度和層效果（effect）的過度。下面我來舉個實例：通過十個幀讓我的名字“Arky”從圖象的左上角移動到右下角同時逐漸變深。第五章文字工具以及文字特效

這章教程，我想單單給你介紹Fireworks的文字工具以及文字特效，之所以要將對文字功能版塊的介紹獨立成一章，是因為Fireworks中的文字以及相關(guān)功能，是目前我所見的圖象編輯軟件中最強大，最完善?。Ｍ暾奈淖指袷交δ埽С蛛p字節(jié)文字這是所有成功的圖象設(shè)計軟件所必備的特點，當然Fireworks也不例外。您可以在工具欄中按下文字按鈕（圖標為“A”的那個按鈕），再在工作窗口中單擊以呼出文字編輯面版（TextEditor）。Fireworks的文字面版十分直觀，完全支持雙字節(jié)文字（當然，前提是系統(tǒng)擁有相應(yīng)的字庫），使用的方法與普通圖象編輯軟件中的同類功能十分相似，如果您有一些圖象設(shè)計經(jīng)驗的話，完全可以輕松上手。但與眾不同之處在于：Fireworks2的TextEditor功能支持定義單個文字的屬性。當您在TextEditor中輸入一串文本后，可以自由地改變此文本中任意字的屬性。也就是說，用戶可以在TextEditor面版中同時輸入一串字體、顏色、大小等等屬性完全不同的語句。不僅如此，在用Fireworks編輯圖片的過程中，文字始終保持一種特殊路徑形式。所以用戶可以隨時隨地地修改文字內(nèi)容，而不會象Photoshop5那樣，一旦進行“RendLayer”操作，用戶就再也無法對文字層中的內(nèi)容進行修改了:(＃方便的文字色彩填充功能Firework將文字作為一種特殊的物件（object），它既能夠讓TextEditor工具識別，對文字的內(nèi)容進行修改，又允許用戶象編輯普通路徑那樣給文字著色、描邊（方法詳見教程的上一章）。這種特殊的設(shè)定給用戶帶來了前所未有的方便，甚至當用戶使用變形工具（快捷鍵為“Q”）給選定的文字進行變形后，聰明的Firewoks仍然能夠自動匹配變形后的文字的大小，依舊允許用戶使用TextEditor對文字進行編輯。＃別出心裁的文字對齊選項Fireworks提供了一個矢量繪圖軟件所特有的文字對齊功能。您只要在畫面中文字上單擊右鍵，就可以在隨后彈出的菜單中的“Align”一項內(nèi)選擇文字的對齊方式。Fireworks2共提供了八種文字對齊方式：左對齊（left）；右對齊（right）；水平居中（center-1）；左右擴展（Justified-1，這種方式是通過調(diào)節(jié)文字的水平間距使文字按文字框的長度對齊，使用非常廣泛）；左右拉伸（Stretched-1，這種方式是通過拉伸文字的寬度，使之按文字框的長度對齊）；頂端對齊（top）；豎直居中（center-2）；底對齊（bottom）上下擴展（Justified-2，這種方式是通過調(diào)節(jié)文字的垂直間距使文字按文字框的高度對齊，使用非常廣泛）；上下拉伸（Stretched-2，這種方式是通過拉伸文字的高度，使之按文字框的高度對齊）；＃文字的特色效果Fireworks2新增一個Style功能面版（“Windows>Styles”快捷鍵為Ctrl+Alt+J）。Style功能提供了近300種內(nèi)值的路徑填充和描邊的特效，可以最快捷地生成適用于網(wǎng)頁制作的文字特效，當然，Style也適用于所有普通路徑。并且Fireworks2允許用戶自由擴充Style，您可以將自己新創(chuàng)的路徑定義為一個Style（方法是使用Styles面版的彈出菜單中的“NewStyle”命令），以便今后反復使用。＃文本環(huán)繞路徑功能這無疑是Fireworks2的文本功能中最激動人心的效果，這個以前只有在矢量繪圖中才可能具備的功能大大縮短了用戶制作環(huán)繞文本的工序。您只須選定文字和文字要環(huán)繞的路徑，然后選擇“Text>AttachtoPath”（快捷鍵為Ctrl+Alt+Y）,就可以將文字結(jié)合到特殊的路徑上。并且，結(jié)合后的文字依舊可以通過TextEditor進行編輯，也可以使用不同的Align方式定義不同的路徑圍繞效果，還可以用上述的方法修改文字的填充效果或套用Style。＃查找和替換功能（Find&Replace）這樣的新增功能聽上去似乎是一款文字編輯軟件才應(yīng)該具備的，不過細心macromedia已經(jīng)為用戶考慮到了方方面面，F(xiàn)ireworks2中的Find&Replace功能（“Windows>Find&Replace”）不僅提供了普通的文字查找替換功能，并且可以修改文件中使用的顏色、字體、URL！這些匠心獨具的設(shè)計使Firework2成為最具創(chuàng)造力的圖象設(shè)計軟件，它完全體現(xiàn)了macromedia的設(shè)計決心——讓您的工作更具效率（Productivty）。網(wǎng)頁配色表制作主頁對色彩需要有一定的感覺，許多網(wǎng)友總是配不好顏色。

阿捷教你一個竅門：就是用同一色系的色彩，色彩豐富但不花。

.#FFFFFF

#FFFFF0

#FFFFE0

#FFFF00.#FFFAFA

#FFFAF0

#FFFACD

#FFF8DC

#FFF68F

#FFF5EE

#FFF0F5

#FFEFDB

#FFEFD5

#FFEC8B

#FFEBCD

#FFE7BA

#FFE4E1

#FFE4C4

#FFE4B5

#FFE1FF

#FFDEAD

#FFDAB9

#FFD700

#FFD39B

#FFC1C1#FFC125

#FFC0CB

#FFBBFF

#FFB90F

#FFB6C1

#FFB5C5#FFAEB9

#FFA54F

#FFA500

#FFA07A

#FF8C69

#FF8C00

#FF83FA

#FF82AB

#FF8247

#FF7F50

#FF7F24

#FF7F00

#FF7256

#FF6EB4

#FF6A

#FF69B4

#FF6347

#FF4500

#FF4040

#FF3E96

#FF34B3

#FF3030

#FF1493

#FF00FF

#FF0000

#FDF5E6

#FCFCFC

#FAFAFA

#FAFAD2

#FAF0E6

#FAEBD7

#FA8072

#F8F8FF

#F7F7F

#F5FFFA

#F5F5F

#F5F5DC

#F5DEB3

#F4F4F

#F4A460

#F2F2F

#F0FFFF

#F0FFF0

#F0F8FF

#F0F0F

#F0E68C

#F08080

#EEEEE0

#EEEED1

#EEEE00

#EEE9E9

#EEE9BF

#EEE8CD

#EEE8AA

#EEE685

#EEE5DE

#EEE0E5

#EEDFCC

#EEDC82

#EED8AE

#EED5D2

#EED5B7

#EED2EE

#EECFA1

#EECBAD

#EEC900

#EEC591

#EEB4B4

#EEB422

#EEAEEE

#EEAD0E

#EEA9B8

#EEA2AD

#EE9A49

#EE9A00

#EE9572

#EE82EE

#EE8262

#EE7AE9

#EE799F

#EE7942

#EE7621

#EE7600

#EE6AA7

#EE6A50

#EE6363

#EE5C42

#EE4000

#EE3B3B

#EE3A

#EE30A7

#EE2C

#EE1289

#EE00EE

#EE0000

#EDEDED

#EBEBEB

#EAEAEA

#E9967A

#E8E8E8

#E6E6FA

#E5E5E5

#E3E3E3

#E0FFFF

#E0EEEE

#E0EEE0

#E0E0E0

#E066FF

#DEDEDE

#DEB887

#DDA0DD

#DCDCDC

#DC143C

#DBDBDB

#DB7093

#DAA520

#DA70D6

#D9D9D9

#D8BFD8

#D6D6D6

#D4D4D4

#D3D3D3

#D2B48C

#D2691E

#D1EEEE

#D1D1D1

#D15FEE

#D02090

#CFCFCF

#CDCDC1

#CDCDB4

#CDCD00

#CDC9C9

#CDC9A5

#CDC8B1

#CDC673

#CDC5BF

#CDC1C5

#CDC0B0

#CDBE70

#CDBA96

#CDB7B5

#CDB79E

#CDB5CD

#CDB38B

#CDAF95

#CDAD00

#CDAA7D

#CD9B9B

#CD9B1D

#CD96CD

#CD950C

#CD919E

#CD8C95

#CD853F

#CD8500

#CD8162

#CD7054

#CD69C9

#CD6889

#CD6839

#CD661D

#CD6600

#CD6090

#CD5C

#CD5B45

#CD5555

#CD4F39

#CD3700

#CD3333

#CD3278

#CD2990

#CD2626

#CD1076

#CD00CD

#CD0000

#CCCCCC

#CAFF70

#CAE1FF

#C9C9C

#C7C7C

#C71585

#C6E2FF

#C67171

#C5C1AA

#C4C4C

#C2C2C

#C1FFC1

#C1CDCD

#C1CDC1

#C1C1C

#C0FF3E

#BFEFFF

#BFBFBF

#BF3EFF

#BEBEBE

#BDBDBD

#BDB76B

#BCEE68

#BCD2EE

#BC8F

#BBFFFF

#BABABA

#BA55D3

#B9D3EE

#B8B8B8

#B8860B

#B7B7B7

#B5B5B5

#B4EEB4

#B4CDCD

#B452CD

#B3EE3A

#B3B3B3

#B2DFEE

#B23AEE

#B22222

#B0E2FF

#B0E0E6

#B0C4DE

#B0B0B0

#B03060

#AEEEEE

#ADFF2F

#ADD8E6

#ADADAD

#ABABAB

#AB82FF

#AAAAAA

#A9A9A

#A8A8A

#A6A6A

#A52A

#A4D3EE

#A3A3A

#A2CD5A

#A2B5CD

#A1A1A

#A0522D

#A020F0

#9FB6CD

#9F79EE

#9E9E9E

#9C

#9BCD9B

#9B30FF

#9AFF9A

#9ACD32

#9AC0CD

#9A32CD

#999999

#9932CC

#98FB98

#98F5FF

#97FFFF

#96CDCD

#969696

#949494

#9400D3

#9370DB

#919191

#912CEE

#90EE90

#8FBC8F

#8F

#8EE5EE

#8E8E8E

#8E8E38

#8E388E

#8DEEEE

#8DB6CD

#8C

#8B8B83

#8B8B7A

#8B8B00

#8B8989

#8B8970

#8B8878

#8B8682

#8B864E

#8B8386

#8B8378

#8B814C

#8B7E66

#8B7D7B

#8B7D6B

#8B7B8B

#8B795E

#8B7765

#8B7500

#8B7355

#8B6969

#8B6914

#8B668B

#8B6508

#8B636C

#8B5F65

#8B5A2B

#8B5A00

#8B5742

#8B4C39

#8B4789

#8B475D

#8B4726

#8B4513

#8B4500

#8B3E2F

#8B3A62

#8B3A

#8B3626

#8B2500

#8B2323

#8B2252

#8B1C62

#8B1A

#8B0A50

#8B008B

#8B0000

#8A

#8A2BE2

#8968CD

#87CEFF

#87CEFA

#87CEEB

#878787

#858585

#848484

#8470FF

#838B8B

#838B83

#836FFF

#828282

#7FFFD4

#7FFF00

#7F

#7EC0EE

#7D9EC0

#7D7D7D

#7D26CD

#7CFC00

#7CCD7C

#7B68EE

#7AC5CD

#7A8B8B

#7A

#7A67EE

#7A378B

#79CDCD

#787878

#778899

#76EEC6

#76EE00

#757575

#737373

#71C671

#7171C6

#708090

#707070

#6E8B3D

#6E7B8B

#6E6E6E

#6CA6CD

#6C7B8B

#6B8E23

#6B6B6B

#6A5ACD

#698B69

#698B22

#696969

#6959CD

#68838B

#68228B

#66CDAA

#66CD00

#668B8B

#666666

#6495ED

#63B8FF

#636363

#616161

#607B8B

#5F9EA0

#5E5E5E

#5D478B

#5CACEE

#5C

#5B5B5B

#595959

#575757

#556B2F

#555555

#551A8B

#54FF9F

#548B54

#545454

#53868B

#528B8B

#525252

#515151

#4F94CD

#4F

#4EEE94

#4D4D4D

#4B0082

#4A708B

#4A

#48D1CC

#4876FF

#483D8B

#474747

#473C8B

#4682B4

#458B74

#458B00

#454545

#43CD80

#436EEE

#424242

#4169E1

#40E0D0

#404040

#3D3D3D

#3CB371

#3B3B3B

#3A5FCD

#388E8E

#383838

#36648B

#363636

#333333

#32CD32

#303030

#2F

#2E8B57

#2E2E2E

#2B2B2B

#292929

#282828

#27408B

#262626

#242424

#228B22

#218868

#212121

#20B2AA

#1F

#1E90FF

#1E1E1E

#1C86EE

#1C

#1A

#191970

#1874CD

#171717

#141414

#121212

#104E8B

#0F

#0D0D0D

#0A

#080808

#050505

#030303

#00FFFF

#00FF7F

#00FF00

#00FA9A

#00F5FF

#00EEEE

#00EE76

#00EE00

#00E5EE

#00CED1

#00CDCD

#00CD66

#00CD00

#00C5CD

#00BFFF

#00B2EE

#009ACD

#008B8B

#008B45

#008B00

#00868B

#00688B

#006400

#0000FF

#0000EE#0000CD

#0000AA

#00008B

#000080

#000000/homepage/43/2538543.shtml網(wǎng)頁設(shè)計配色基礎(chǔ)：色彩三屬性與實例剖析2006-08-2204:00作者：黎芳原創(chuàng)出處：天極設(shè)計在線責任編輯：\o"向本編輯提問"Shiny

許多初學者對色彩的屬性和原色概念模糊，容易混淆，下面我們就先從幾個概念入手。今天介紹色彩的三個屬性。

顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。從心理學和視覺的角度出發(fā)，彩色具有三個屬性：色相、明度、純度（彩度）。

基本色相環(huán)■色相（Hue）：

也叫色調(diào)，指顏色的種類和名稱，是指顏色的基本特征，是一種顏色區(qū)別于其他顏色的因素。色相和色彩的強弱及明暗沒有關(guān)系，只是純粹表示色彩相貌的差異。如紅、黃、綠、藍、紫等為不同的基本色相。

■明度（Value）：

也叫亮度，指顏色的深淺、明暗程度，沒有色相和飽和度的區(qū)別。不同的顏色，反射的光量強弱不一，因而會產(chǎn)生不同程度的明暗。非色彩的黒、灰、白較能形象的表達這一特質(zhì)。

明度的遞增→明度網(wǎng)頁例圖：明度分析：

從上圖網(wǎng)頁所選取的4個主要色塊的RGB數(shù)值來看，這4塊色彩組合顯示的RGB數(shù)值很高，接近于最高值255。RGB相互間的數(shù)值相近，由于有RG的高數(shù)值與B高數(shù)值混合，整個網(wǎng)頁給人的感覺非常協(xié)調(diào)，柔和雅致，心情愉悅。

結(jié)論：

RGB同時呈現(xiàn)相近的高數(shù)值時，相近等量的色彩相互混合，頁面呈高明度灰色段，協(xié)調(diào)的柔和狀態(tài)，令人遐想，對視覺刺激是緩慢的，適合長時間觀看。但由于數(shù)值接近，因此色階平穩(wěn)，同時存在著不夠醒目的狀態(tài)。常用配色基本概念及精彩相關(guān)實例剖析2006-08-2304:00作者：redfall原創(chuàng)出處：天極設(shè)計在線責任編輯：\o"向本編輯提問"Shiny

在實用美術(shù)中，常有"遠看色彩近看花，先看顏色后看花，七分顏色三分花"的說法。

這也就說明，在任何設(shè)計中，色彩對視覺的刺激起到第一信息傳達的作用。因此，對色彩的基礎(chǔ)知識的良好掌控，在網(wǎng)頁設(shè)計中才能做到游刃有余。

前面我們介紹了常用的電腦色彩模式RGB、HSB，以及色彩的三大屬性，今天我們介紹常用配色的基本概念和相關(guān)實例剖析。

色環(huán)

色環(huán)是色彩按紅、黃、綠、藍、紅依次過度漸變呈現(xiàn)出來的不同顏色，就可以得到一個色彩環(huán)。色環(huán)通常包括12種不同的顏色。

三原色

■原色：

也叫"三原色"。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調(diào)配不出來的。除白色外，把三原色相互混合，可以調(diào)和出其他種顏色。

根據(jù)三原色的特性做出相應(yīng)的色彩搭配，有最迅速最有力最強烈的傳達視覺信息效果?！S色網(wǎng)頁例圖：http://www.uni-leipzig.de/studienart/i_flash.htm黃色分析：

選取了主色調(diào)黃色為示例。我們看到RGB數(shù)值中RG呈現(xiàn)最高值255時，HSB數(shù)值中的SB也呈現(xiàn)最高值100%，頁面呈現(xiàn)最高純度亮度——純黃色。因此黃色在三原色中也是亮度最高的顏色。

結(jié)論：

HSB中SB呈現(xiàn)的數(shù)值越高，飽和度明度越高，頁面色彩強烈艷麗，由于黃色是亮度最高的顏色這一特性，也給人視覺產(chǎn)生強烈刺激的狀態(tài)，對視覺刺激是迅速的、警戒、醒目的效果，但不易于長時間觀看。

→紅色網(wǎng)頁例圖：紅色分析：

我們看到RGB中R的數(shù)值是227，混合了G30、B40，因此紅色的純度輕微降低，顏色稍偏深紅。HSB數(shù)值中S顯示的飽和度為87%，B為89%，因此顏色還是較為飽和明亮。

結(jié)論：

主色R227數(shù)值較高的時候，由于混合了G30、B40少許顏色，飽和度明度稍微降低，視覺刺激減弱，紅色特性顯得較沉穩(wěn)。但由于紅色是最溫暖最有視覺沖擊力的顏色特性，該網(wǎng)頁整體看來仍然厚重而熱烈的表達了主題?！{色網(wǎng)頁例圖：■純度(Chroma）：

也叫飽和度，指色彩的鮮艷程度。原色最純，顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色，加入了白色或者黑色，使得它的純度低，顏色趨于柔和、沉穩(wěn)。

加入黑色的純度變化和加入白色的純度變化→純度網(wǎng)頁例圖：http://www.minimalweb.de純度分析：

上圖網(wǎng)頁中選取了主要的兩種色系為組合。運用HBS數(shù)值模式更易于理解分析該網(wǎng)頁的純度情況。

我們看到藍色S數(shù)值呈現(xiàn)99％具有相當高的飽和度，B明度為79%，玫瑰色S飽和度數(shù)值為85%，B明度為97％。當飽和度和明度同時呈最高值時，色彩對視覺的刺激強度到達最高狀態(tài)。由于藍色的明度稍低，飽和度較高，而玫瑰色的明度較高，該顏色純度隨之加強，因此玫瑰色相對藍色對人的視覺刺激更強烈。

結(jié)論：

HSB模式中S和B呈現(xiàn)的數(shù)值越高，飽和度明度越高，頁面色彩強烈艷麗，對視覺刺激是迅速的，醒目的效果，但不易于長時間的觀看。以上兩種顏色的S數(shù)值接近，是強烈的狀態(tài)。H顯示的度是代表在色輪表里某個角度所呈現(xiàn)的色相狀態(tài)，相對于SB來說，意義不大。藍色分析：

RGB數(shù)值中B藍色的數(shù)值是131與R2、G83相混合，藍色的純度降低。結(jié)合HSB中數(shù)值H色相目前顯示的是203°，而三原色的純藍為240°來看，藍色的色相偏離較大，加上B為51%的明度，顏色偏暗，因此視覺沖擊力較弱。頁面沉穩(wěn)、凝重。

結(jié)論：

當藍色色相偏離于三原色的純藍時，視覺沖擊力削弱。頁面呈沉穩(wěn)、平靜的感受。藍色在三原色里是視覺傳遞速度最慢的顏色特性，適合用于表達成熟、穩(wěn)重、安靜的網(wǎng)頁設(shè)計主題。藍色在網(wǎng)頁設(shè)計里也是使用得較頻繁的顏色。/peise/pkvs03.htm/websj/color/網(wǎng)頁基本配色顏色絕不會單獨存在。事實上，一個顏色的效果是由多種因素來決定的：反射

的光，周邊搭配的色彩，或是觀看者的欣賞角度。有十種基本的配色設(shè)計，分別叫做：無色設(shè)計(achromatic)、類比設(shè)計(analogous)、沖突設(shè)計(clash)、互補設(shè)計(complement)、單色設(shè)計(monochromatic)、中性設(shè)計(neutral)、分裂補色設(shè)計(splitcomplement)、原色設(shè)計(primary)、二次色設(shè)計(secondary)以及三次色三色設(shè)計(tertiary)。1051019810510198無色設(shè)計不用彩色，只用黑、

白、灰色。928873928873類比設(shè)計在色相環(huán)上任選三個

連續(xù)的色彩或其任一

明色和暗色。468

468

沖突設(shè)計把一個顏色和它補色

左邊或右邊的色彩配

合起來。9244

9244

互補設(shè)計使用色相環(huán)上全然相

反的顏色。818588818588單色設(shè)計把一個顏色和任一個

或它所有的明、暗色

配合起來。。173226173226中性設(shè)計加入一個顏色的補色

或黑色使它色彩消失

或中性化。205773205773分裂補色設(shè)計把一個顏色和它補色

任一邊的顏色組合起

來。4366843668原色設(shè)計把純原色紅、黃、藍

色結(jié)合起來。538620538620二次色設(shè)計把二次色綠、紫、橙

色結(jié)合起來。572895572895三次色三色設(shè)計三次色三色設(shè)計是下

面二個組合中的一個：

紅橙、黃綠、藍紫色

或是藍綠，黃橙、紅

紫色，并且在色相環(huán)

上每個顏色彼此都有

相等的距離。

網(wǎng)頁設(shè)計思想的中級篇

這篇我們主要說對于企業(yè)型網(wǎng)站（也包括機關(guān)型）。

首先第一點，你要知道這家企業(yè)是做什么的，不同的行業(yè)要有不同的顏色和格調(diào)。比如是一家科技型企業(yè)（信息科學）它的顏色應(yīng)該偏向藍，格調(diào)應(yīng)該特別一點，但主要信息的表現(xiàn)一定要強，讓瀏覽者第一眼要看到這家企業(yè)不是一個皮包公司，是有真正內(nèi)容的企業(yè)。再比如一家服務(wù)型的企業(yè)，它的顏色要根據(jù)服務(wù)類型而表現(xiàn)的輕松一點。拿餐飲業(yè)來說，應(yīng)該以白為主，因為我們都愿意去一家非常干凈的餐館吃飯；再比如汽車服務(wù)公司，應(yīng)該以環(huán)保的綠色或悠閑的淺天藍色為主；如果以女性消費者為主的公司網(wǎng)站，呵呵！太簡單了！粉紅色或白色，一定要淡！這個應(yīng)該都知道吧！

B_)

對于網(wǎng)站欄目及功能的安排也是很有講究的。隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁制作越來越復雜與藝術(shù)。美觀固然重要，但最重要的還是實質(zhì)的內(nèi)容。我們?nèi)テ髽I(yè)網(wǎng)站無非是想了解一下相關(guān)產(chǎn)品（包括服務(wù)）的信息，所以要做到兩者兼顧也是不容易的！下面給點基本建議：

欄目不要設(shè)置太多，越簡單越好，也不要分散。盡可能的把類似內(nèi)容放在一個欄目下。沒有太大用處和老掉牙的信息建議不要再放了，與互聯(lián)網(wǎng)這個新鮮事物有點不搭配。

如果企業(yè)產(chǎn)品或服務(wù)非常多，建議你把首頁做簡單，不要放進站動畫，如果你覺得有個動畫漂亮，你可以單獨立個小欄目放上這些宣傳動畫或社頻。如果是家很專業(yè)的公司可以考慮把產(chǎn)品或服務(wù)的小圖或?qū)ёx放在首頁，讓瀏覽者第一時間就可以找到想要的信息。首頁上不要做過多的特效，也盡量要安靜一點，如果有廣告也要看看是否與主體顏色搭配，圖片不要太有沖擊性，文字也不要有大有小，BANNER盡量放棄或移到其他位置上，要給企業(yè)LOGO讓開更大的視覺空間。

大欄目盡量不要用FLASH或高級JS特效做鏈接。你要知道瀏覽者的瀏覽器不一定裝有FLASH插件，或其版本較低或不是IE怎么辦？

各欄目之間的鏈接一定要有序和簡單，也不要打開那么多的窗口。

產(chǎn)品與服務(wù)內(nèi)容一定要清晰有序的排列或有較強的可選擇性。我去過許多家電腦硬件生產(chǎn)商的網(wǎng)站，想要找點產(chǎn)品或驅(qū)動的信息還真難！這就是失誤。

最后再說說企業(yè)網(wǎng)站的技術(shù)性問題。為企業(yè)制作一份美觀、實用、安全、易維護的網(wǎng)站是網(wǎng)站制作者一直的追求，但是我們怎么樣來做到這一點呢？下面是一點建議：

根據(jù)網(wǎng)站的要求，我們要先選擇所要用到的技術(shù)，哪種在滿足各種條件下最容易實現(xiàn)和高效。比如內(nèi)容顯示數(shù)據(jù)庫量大或要交互查詢的，這時我們就要考慮安全性和效率性最佳的組合（不過也得根據(jù)你所會的多來來決定

:%

）。在不經(jīng)常需要更新的頁面，如果不需要特別的統(tǒng)計程序，使用HTML頁面就可以了。

信息列表處不要過多的修飾。GOOGLE、BAIDU雖然不太美觀，但我們都很喜歡它不是嗎！行行之間可以用底色來區(qū)分，這樣瀏覽者比較容易分辨。

后臺管理功能不要太復雜。有些同志們?yōu)楸憩F(xiàn)自己的編程實力往往會把后臺管理做得復雜的讓人感到頭疼，這是不應(yīng)的，因為使用大多是不太懂的人，懂的人自己做了也不會用別人的！用戶不喜歡的東西，你就算做得再復雜再獨一無二也沒用！兩個字：失??！

如果可以要做到防錯功能，也就是誤操作后要可以由最高級管理員有辦法來還原。這點來說對于一般程序員來說有點困難（我這里說的并不是實實備份數(shù)據(jù)庫或次料來實現(xiàn)，而是要用程序本身和巧妙的設(shè)計來實現(xiàn)）。

網(wǎng)站的制作也是一個系統(tǒng)的學習過程。經(jīng)驗最重要。不要想著“要做到最好”，只要客戶和瀏覽者認為“比較好”就是成功的！

以上內(nèi)容是本人亂七八糟的總結(jié)，只能代表個人建議，如果有錯誤的地方還請高手們指教！網(wǎng)頁設(shè)計思想

一筆發(fā)表于2005-12-1121:52:36前言大家好，我是阿捷。很榮幸，能在這里和大家一起探討關(guān)于網(wǎng)站設(shè)計的問題。目前，網(wǎng)絡(luò)上有關(guān)網(wǎng)頁制作的各種教程已經(jīng)相當多，可以方便地學習到最新的技術(shù)和技巧。可是，有關(guān)網(wǎng)頁的設(shè)計,比如設(shè)計靈感的實現(xiàn)，風格的確定，發(fā)展策略，技術(shù)的篩選等的文章卻比較少，許多網(wǎng)友往往有好的材料，卻苦惱沒有好的具有表現(xiàn)力的設(shè)計。受到索易主持人的鼓勵，阿捷整理了一些網(wǎng)頁的設(shè)計心得，在這里和大家交流一下，也算拋磚引玉了，希望得到您的指正，如果您有好的建議和心得，也請發(fā)稿給我ajie@,在此先道一聲謝謝！網(wǎng)站設(shè)計，包含的內(nèi)容非常多。大體分兩個方面：一方面是純網(wǎng)站本身的設(shè)計比如文字排版，圖片制作，平面設(shè)計，三維立體設(shè)計，靜態(tài)無聲圖文，動態(tài)有聲影像等；另一方面是網(wǎng)站的延伸設(shè)計，包括網(wǎng)站的主題定位和瀏覽群的定位，智能交互，制作策劃，形象包裝，宣傳營銷等等。這兩方面相輔相成（感覺有點象寫辨證論文：），加之網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，要提出一個絕對正確和權(quán)威的設(shè)計思路是不可能的，要想在一篇文章中概括出來也很難，所以阿捷根據(jù)建設(shè)一個網(wǎng)站的思路，將自己幾年來網(wǎng)站設(shè)計制作的心得整理成一個系列“講座”，告訴給大家（注意：我并不會非常具體地講某一個技術(shù)或制作技巧，重點在于思路）希望能給您一些幫助。下面是大致的提綱：1.定位你的網(wǎng)站主題和名稱；2.定位你的網(wǎng)站CI形象；3.確定你的欄目和版塊；4.網(wǎng)站的整體風格創(chuàng)意設(shè)計5.網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)6.首頁的設(shè)計7.版面布局的竅門8.色彩的搭配9.效果與速度10.替瀏覽者考慮11.細微之處見功力12.建設(shè)完成度與推出時間13.交互性與親和度14.考慮不同的瀏覽器和分辨率15.字體的設(shè)置和表格的嵌套16.新技術(shù)的運用取舍17.設(shè)計好你的banner和位置18.語句文字--融入感情19.對網(wǎng)站設(shè)計初學者的建議以上是本“系列”文章的提綱，會根據(jù)實際撰寫情況作些變動。每星期一篇。我們開始之前，首先明確幾個前提：一．網(wǎng)站設(shè)計與網(wǎng)站制作。我們說網(wǎng)站“設(shè)計”而不是網(wǎng)站“制作”，它們的區(qū)別在于設(shè)計是一個思考的過程，而制作只是將思考的結(jié)果表現(xiàn)出來。一個成功的網(wǎng)站首先需要一個優(yōu)秀的設(shè)計，然后輔之優(yōu)秀的制作。設(shè)計是網(wǎng)站的核心和靈魂，一個相同的設(shè)計可以有多種制作表現(xiàn)的方式。二．我們說的“網(wǎng)站”是指有確定主題和明確目的的實用性站點，不包括純表現(xiàn)類或者純文字類網(wǎng)站。三．在文章中，可能舉例說明或點評到某些具體站點。首先申明，阿捷不存在為任何站點作廣告的“嫌疑“。好了，廢話少說，我們進入正題：========================================================一：定位你的網(wǎng)站主題和名稱設(shè)計一個站點，首先遇到的問題就是定位網(wǎng)站主題。所謂主題也就是你的網(wǎng)站的題材。網(wǎng)絡(luò)上的網(wǎng)站題材千奇百怪,琳瑯滿目。只要你想的到，就可以把它制作出來。下面是美國《個人電腦》雜志(PCMagazine)評出的99年度排名前100位的全美知名網(wǎng)站的十類題材，對我們有一些參考價值。第1類：網(wǎng)上求職第2類：網(wǎng)上聊天／即時信息/