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

1. 打開Photoshop，直接拷貝一部分圖片，如框選“石橋茶舍”區(qū)域并拷貝。當(dāng)然因?yàn)槭嵌鄬樱阈枰褂煤喜⒖截惞δ埽鐖D1-6-1 所示。



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


圖1-6-2


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


圖1-6-3


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


圖1-6-4

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


圖1-6-5

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


圖1-6-6


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



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



圖1-6-8

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



圖1-6-9

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



圖1-6-10

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

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