做話費(fèi)充值的兄弟姐妹們，你們希望擁有一個(gè)個(gè)性，超炫的充值導(dǎo)航圖呢，客戶進(jìn)你的店，看著中國大地圖，點(diǎn)擊相應(yīng)的省份(名稱)，立刻就能找到自己想充值的寶貝！這樣一個(gè)獨(dú)特、美觀、大氣的導(dǎo)航圖，在裝點(diǎn)你店鋪的同時(shí)，也更好的體現(xiàn)了你充值店的專業(yè)化和人性化！做這樣一個(gè)導(dǎo)航圖，需要很高超的做圖技術(shù)嗎?不，很簡單，只要你拿出一點(diǎn)耐心，和一點(diǎn)學(xué)習(xí)精神，即使你從來沒用過做圖軟件，跟著我一步步做，你也能擁有自己的獨(dú)特導(dǎo)航圖！(注意：1、旺鋪才能使用本導(dǎo)航圖2、本文只針對象我一樣沒接觸過專業(yè)做圖軟件的新手，我們只使用某個(gè)軟件的某個(gè)功能或者工具，其它的不管也不問，高手請不要笑話呵呵)

首先，我們先來看下需要用到的圖象軟件和工具：

1.大名鼎鼎的PS(Photoshop)：別擔(dān)心，我們不需要對這個(gè)PS有望而生畏的感覺，因?yàn)槲覀冎恍枰鼇砼芟慢執(zhí)锥选?/p>

2.最簡單易用的iSee：主要是用來處理下素材，給你的導(dǎo)航圖增加點(diǎn)個(gè)性化的東西。覺得麻煩的，可以不用管。

3.最傻瓜而強(qiáng)大的專業(yè)扣圖工具KnockOut 2：這里強(qiáng)烈推薦,從來沒扣過圖的朋友，也可以使用它實(shí)現(xiàn)最簡便，最完美的扣圖效果！該工具的安裝和使用網(wǎng)上有很多。同樣，嫌麻煩，不追求個(gè)性化的朋友請無視它。

3.今天的主角Macromedia Dreamweaver 8：這個(gè)才是我們今天的主角，什么?你問我它是什么叫什么名字?我老實(shí)的說，我也不知道它是什么叫什么，我只知道，做導(dǎo)航圖的話，有它就非常的簡單了。

特別說明：這些軟件打開文件的方式都一樣，從軟件界面的最左上角的"文件"菜單中打開，以后不再說明。

小結(jié)：必需的軟件：Macromedia Dreamweaver 8和Photoshop CS2，說明，軟件版本盡量選擇和我一樣的，太低級的和簡裝版，可能沒有我們需要的功能?？捎锌蔁o的軟件和工具：KnockOut 2和iSee,需要效果美一點(diǎn)，同時(shí)也想學(xué)一點(diǎn)裝修技能的就用，不需要的就不用。

開始制作：

一、素材準(zhǔn)備和制作：

1、找一張中國地圖。

要求：A.省界分明，只標(biāo)注省、直轄市名稱。沒有其它多余文字的。我們要的是簡潔、清晰和大氣的效果。顏色等個(gè)性化用ISEE自行處理，以配合自己的店鋪風(fēng)格。B.寬盡量在550像素以上，以便圖象大小調(diào)整時(shí)不失真

我用的是這樣一個(gè)素材，為配合我自己的店鋪整體，顏色已經(jīng)處理過：

喜歡的朋友可以直接用QQ截下來，做你自己的素材(QQ截圖方法：QQ開啟的情況下，使用CTRL+ALT+A的組合鍵，拖動(dòng)鼠標(biāo)選擇截圖區(qū)域，另存為即可)

2、背景處理：這個(gè)主要是為了增加點(diǎn)裝飾作用，嫌麻煩的朋友可以跳過，直接看第三步"分類設(shè)置"。喜歡的朋友跟著我做，我喜歡的是書法文字淡化+漸變背景。所以我選擇了iSee來處理：

A、點(diǎn)開"文件"，新建一個(gè)圖片，大小為750X500像素，顏色我選擇灰色；

B、點(diǎn)"相框"工具，進(jìn)入后選擇"多彩毛邊"-本地相框-顏色漸變02，步驟和效果如圖，應(yīng)用返回

C、點(diǎn)"文字"工具，進(jìn)入后在右邊文本框里輸入文字內(nèi)容。這里我選擇了蘇軾的《念奴嬌.赤壁懷古》。豎排方法：使用回車鍵來實(shí)現(xiàn)文字豎排；從右至左排法：每列完成點(diǎn)"應(yīng)用"一次；文字淡化方法：使用"字體效果"設(shè)置參數(shù)；位置調(diào)整：使用鼠標(biāo)拖動(dòng)；字體和大小，顏色等，如圖調(diào)整。

D、效果滿意后，應(yīng)用返回，保存?zhèn)溆谩?/p>

3.前景地圖處理(不使用背景、嫌麻煩的朋友可以省略)：這個(gè)是為了把前景地圖和背景完美的結(jié)合，使用摳圖來實(shí)現(xiàn)。

A.安裝扣圖工具KnockOut 2

B.使用iSee打開中國地圖素材，點(diǎn)選"圖象調(diào)整"中的"摳圖去背景"，進(jìn)入扣圖界面后選擇"容易扣圖"，即可進(jìn)入KnockOut 2的界面。使用放大工具適當(dāng)放大后,點(diǎn)選"內(nèi)部對象"工具，勾選"多邊形模式"，沿著地圖內(nèi)部點(diǎn)連(注意我的地圖素材，有些省份名稱超出了地圖外，所以要把名稱框也選在內(nèi)部)。

C.內(nèi)部點(diǎn)連完畢，頭尾相連，雙擊使之成為閉合曲線，此時(shí)的連線就變成了動(dòng)態(tài)的虛線

D.選擇"外部對象"，勾選"多邊形模式"，沿著地圖外部點(diǎn)連一圈，雙擊閉合。

E.點(diǎn)擊"處理和輸出圖象"回到iSee的摳圖界面，點(diǎn)開"保存返回"菜單，"保存為水印圖片"。一個(gè)無背景的水印圖就做好了。

二、素材合成：

1、打開剛才做好的背景圖，點(diǎn)"水印"工具，進(jìn)入后"選擇水印"，找到剛才摳圖保存的中國地圖水印圖；

2、拖動(dòng)滑塊調(diào)節(jié)水印大小，用鼠標(biāo)移動(dòng)調(diào)整位置；

3、滿意后，應(yīng)用返回。

5.其它個(gè)性化處理：使用水印、文字和相框工具，添加說明文字、店標(biāo)、邊框等。

6.調(diào)整大小，點(diǎn)"圖象調(diào)整"，設(shè)置寬為750像素，保存完成圖。

圖片處理就全部完成了！

三、分類設(shè)置

1、管理我的店鋪-分類管理

2、將話費(fèi)充值的分類設(shè)置成一個(gè)大分類+各省份子分類的形式

3、保存退出

四、格式轉(zhuǎn)換

1、啟動(dòng)Photoshop 2、打開剛才做好的完成圖(嫌麻煩的朋友直接上中國地圖素材)

3、點(diǎn)開"文件"菜單，選擇"保存為WEB所用格式"

4、優(yōu)化，這里選擇JPEG格式，來優(yōu)化，你可以試著調(diào)整和換用其他格式，看優(yōu)化和原圖的效果對比，找到一個(gè)效果不失真而又文件最小的平衡點(diǎn)。

5、保存。PS的任務(wù)就完成了呵呵

注意，此次轉(zhuǎn)換保存后，文件就分為了兩個(gè)部分：一個(gè)就是剛才選擇的保存路徑文件，這個(gè)是網(wǎng)頁文件；另一個(gè)圖片文件，被自動(dòng)保存到了默認(rèn)的images文件夾(一般在"我的文檔"里)。

五、創(chuàng)建熱區(qū)

1、主角上場，啟動(dòng)Macromedia Dreamweaver 8

2、打開剛才用PS轉(zhuǎn)換保存的網(wǎng)頁文件

3、使用"熱點(diǎn)"工具，框選各個(gè)省份名稱(按住鼠標(biāo)左鍵拖曳)。這里我選擇了"矩形熱點(diǎn)工具"，來創(chuàng)建熱區(qū)

4、每框選一個(gè)熱區(qū)，要在鏈接框里粘貼相應(yīng)省份的分類地址

5、框選名稱-粘貼地址，重復(fù)這個(gè)動(dòng)作，依次創(chuàng)建完成所有地方(港澳臺(tái)的也創(chuàng)建下，地址就用全國通用分類的，說不定哪天就開通港澳、統(tǒng)一臺(tái)灣了呵呵)

6、保存退出

六、獲取代碼

1、找到創(chuàng)建熱區(qū)完成保存的網(wǎng)頁文件

2、右鍵菜單，選擇打開方式為"記事本"

3、選擇全部，復(fù)制代碼。退出

七、代碼粘貼

1、管理我的店鋪-裝修店鋪-編輯(自定義頁面)

2、在編輯器里點(diǎn)下"編輯HTML源碼"按鈕(其它按鈕會(huì)反白不可用)

3、粘貼剛才復(fù)制的代碼，再點(diǎn)下"編輯HTML源碼"按鈕，可以見到各省份的空白框

4、在該空白大圖上雙擊，出現(xiàn)圖片地址對話框

5、另開一個(gè)瀏覽器窗口，管理我的店鋪-素材管理-圖片空間，上傳images文件夾里的圖片

6、復(fù)制圖片地址，回到圖片地址對話框，粘貼，確定，保存

八、預(yù)覽發(fā)布，檢查各地的鏈接是否正確

九、大功告成！一個(gè)快捷方便、美觀大氣、獨(dú)特眩目的充值導(dǎo)航圖就在你店里發(fā)光了！哈哈