Photoshop制作網(wǎng)站首頁(6):控制版面與插入Spry對象

Photoshop制作網(wǎng)站首頁(6):控制版面與插入Spry對象來源：xuexin.com 薛欣
現(xiàn)在我們進行了網(wǎng)頁設(shè)計的最后環(huán)節(jié)，需要對頁面進行真正的排版。使用到CSS 以及其它的一些常用技巧。在CS3 版本中Photoshop 和Dreamweaver 的結(jié)合也更加緊密了。Spry 構(gòu)件作為Dreamweaver CS3 全新的理念，給用戶帶來耳目一新的視覺體驗。在該部分當(dāng)中，我們就涉及到這些方面的知識。

1. 打開Photoshop，直接拷貝一部分圖片，如框選“石橋茶舍”區(qū)域并拷貝。當(dāng)然因為是多層，你需要使用合并拷貝功能，如圖1-6-1 所示。



圖1-6-1
2. 切換到Dreamweaver 中，我們只需要簡單的Ctrl V 粘貼，你會看到出現(xiàn)了圖像預(yù)覽對話框，您可以直接在這里設(shè)置圖片的壓縮值和格式等，如圖1-6-2 所示。


圖1-6-2


3. 用同樣的方法把“石橋茶舍”和“石橋棋坊”兩張圖片都直接拷貝到Dreamweaver 中，當(dāng)然Dreamweaver 會提示您存儲這些圖像文件。完成后，我們再把文字拷貝到Dreamweaver 中, 不過如今的文字看起來會比較亂，這是沒有用CSS 樣式化的緣故，如圖1-6-3 所示。


圖1-6-3


4. 打開CSS 樣式面板，為標(biāo)簽“body,td,th”新建一個CSS 規(guī)則，選擇“僅對該文檔”，這個CSS是針對當(dāng)前頁面全局的，如圖1-6-4 所示。


圖1-6-4

5. 在類型中，設(shè)置字體為“宋體”，大小為“9pt”，行高為“16px”，顏色為綠色，修飾為“無”，如圖1-6-5 所示。


圖1-6-5

6. 接下來設(shè)置圖片的文字環(huán)繞效果，使文字都圍繞在圖片的右側(cè)，也就是文字左對齊。選擇“石橋茶舍”的圖片，為其添加一個CSS 規(guī)則，如圖1-6-6 所示。


圖1-6-6


7. 選擇方框標(biāo)簽頁，將浮動設(shè)置為“左對齊”，即實現(xiàn)的文字對圖片的環(huán)繞，如圖1-6-7 所示。其它頁面元素的CSS 設(shè)置方法類似，比如關(guān)于“石橋花園”的介紹文字，因文字的粗細(xì)不同，可在CSS中設(shè)置兩個類規(guī)則來進行樣式化，這里就不再贅述了。



圖1-6-7
8. Spry 構(gòu)件是Dreamweaver CS3 新增的用戶界面對象，包括 XML 驅(qū)動的列表和表格、折疊構(gòu)件、選項卡式面板等元素。在Spry 工具組中選擇插入Spry 選項卡式面板，每一個選項卡都可以直接輸入標(biāo)簽的名稱和該選項卡的內(nèi)容，這里我們輸入“菊花”，如圖1-6-8 所示。



圖1-6-8

9. 在編輯環(huán)境中選擇Spry 選項卡式面板，可以在下方的屬性面板中能夠添加更多的選項卡標(biāo)簽，這里我們又添加了“玫瑰”、“月季”、“美人蕉”、“牡丹”等，如圖1-6-9 所示。



圖1-6-9

10. 在選項卡標(biāo)簽名稱的旁邊有一個小眼晴，單擊后可以編輯該標(biāo)簽所包含的內(nèi)容，比如這里我們添加了菊花和美人蕉的內(nèi)容。包括表格、圖片和文字都可以放在里面，當(dāng)然我們?nèi)孕枰褂肅SS 對格式進行基本的排版，如圖1-6-10 所示。



圖1-6-10

11. 至此我們這個“石橋花園”的首頁就設(shè)計完成了，通過Dreamweaver 和Flash 的多道工序，我們?nèi)匀荒軌蛟兜捏w現(xiàn)原始稿的設(shè)計初衷，可見Adobe CS3 軟件之間的協(xié)作和兼容性是如此的完美。關(guān)于網(wǎng)頁設(shè)計的話題還有很多，比如Gif 動畫、彈出式菜單、更多的CSS 控制和鏈接控制，有機會我們再詳細(xì)講解。寫到這里，我仿佛有所感悟，其實找到一個像“石橋花園”這樣的所在并不難，難的是那份閑暇、平和的心境。另外，不能忘記編輯這篇文章的幕后英雄，也是這套Adobe CS3協(xié)同工作稿件的全程參與者-Adobe InDesign CS3。

搜索更多相關(guān)主題的帖子:Photoshop Spry Dreamweaver 首頁 網(wǎng)頁設(shè)計