這個(gè)教程的上篇到本課就要結(jié)束了。說(shuō)實(shí)話，有一種如獲重負(fù)的感覺，也終于要有一個(gè)新的開始了。學(xué)習(xí)是一個(gè)快樂和痛苦的過(guò)程。想一想自己又給了10MB多數(shù)據(jù)新的生命、想一想這么多的收獲，學(xué)習(xí)過(guò)程中的付出也真值得。好了，別酸了，還是討論我們的課程吧……
這次課定位在“畫”網(wǎng)頁(yè)，一個(gè)畫字給了我們更大的設(shè)計(jì)空間！網(wǎng)頁(yè)可以畫出來(lái)？那當(dāng)然。大家別忘了，F(xiàn)ireworks可是專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)工具，而且MX這個(gè)版本賦予它更強(qiáng)大的網(wǎng)頁(yè)設(shè)計(jì)功能。這次我們就討論Fireworks MX和Dreamweaver MX結(jié)合在一起“畫”一個(gè)漂亮的網(wǎng)頁(yè)。
先看這里：留言板站點(diǎn)說(shuō)明頁(yè)面。我們就學(xué)習(xí)這個(gè)頁(yè)面是怎樣畫出來(lái)的。
一、在Fireworks MX中繪制頁(yè)面（png源文件下載）
1、新建一個(gè)畫布文檔。寬：755像素、高：300像素，透明背景。
2、在畫布上繪制頁(yè)面效果如圖1所示。大致包括3部分：頁(yè)面頭圖片、表格框、頁(yè)面尾圖片。
圖1 圖像參考
2、給圖像文檔進(jìn)行切片
選擇工具欄中網(wǎng)頁(yè)工具中的切片工具
，然后拖動(dòng)鼠標(biāo)畫矩形切片，如圖2所示。注意進(jìn)行多個(gè)切片的時(shí)候一定要對(duì)準(zhǔn)確，中間不能有縫隙，實(shí)際上在切片的時(shí)候系統(tǒng)自動(dòng)有吸附的功能，只要邊線對(duì)仔細(xì)就行。
圖2 切片參考
3、如圖2所示，我們把圖像一共切片分割成5個(gè)區(qū)域，綠色顯示的①②③④是切片區(qū)，第⑤個(gè)是無(wú)切片區(qū)。這里特別要注意③、④兩個(gè)切片的切割，它們的寬度應(yīng)一致（10像素）。而且千萬(wàn)不能把①切片區(qū)中的邊框曲線切進(jìn)來(lái)?。á?、④兩個(gè)切片區(qū)和①切片區(qū)的連接部位就是一段曲線，應(yīng)把曲線留到①切片區(qū)）
4、導(dǎo)出圖像為包含表格代碼的HTML文件
執(zhí)行“文件/導(dǎo)出”命令，則彈出導(dǎo)出對(duì)話框，如圖3所示。請(qǐng)按照?qǐng)D中所示進(jìn)行設(shè)置。
圖3 導(dǎo)出圖像切片
二、在Dreamweaver MX中對(duì)導(dǎo)出的Fireworks MX HTML文件編輯
1、在Dreamweaver MX中打開導(dǎo)出的Fireworks MX HTML文件?；蛘咴贒reamweaver MX中單擊插入欄中的
按鈕插入Fireworks HTML。
2、這時(shí)你會(huì)發(fā)現(xiàn)，原來(lái)那些切片在這里都是一些表格單元?，F(xiàn)在你清楚該怎么做了吧。
3、單擊原來(lái)的⑤哪個(gè)區(qū)域，將選中的圖片刪除，這里是我們輸入文字的主要表格單元格。
4、現(xiàn)在是最關(guān)鍵的操作。目前我們?cè)冖?、④那兩個(gè)單元格（原來(lái)是③④切片區(qū)域）看到的圖片等于是插入到單元格中的圖片。必須把它們轉(zhuǎn)變成單元格的背景圖片這樣的性質(zhì)。這樣文字單元格隨文字的輸入而延伸時(shí)，③、④單元格也會(huì)跟著延伸并不斷線了?？梢栽趯傩悦姘逋瓿梢陨喜僮鳎鐖D4所示。
圖4 在屬性面板中進(jìn)行圖片性質(zhì)的轉(zhuǎn)換
大功告成！到此，本教程的上篇就結(jié)束了。從下一課開始我們就要討論留言板站點(diǎn)的后臺(tái)數(shù)據(jù)庫(kù)和程序的設(shè)計(jì)了，一起繼續(xù)努力吧。
