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

2022-12-26 14:12:48 來源/作者: / 己有:43人學習過
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 全新的理念,給用戶帶來耳目一新的視覺體驗。在該部分當中,我們就涉及到這些方面的知識。

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



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


圖1-6-2


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


圖1-6-3


4. 打開CSS 樣式面板,為標簽“body,td,th”新建一個CSS 規(guī)則,選擇“僅對該文檔”,這個CSS是針對當前頁面全局的,如圖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. 選擇方框標簽頁,將浮動設(shè)置為“左對齊”,即實現(xiàn)的文字對圖片的環(huán)繞,如圖1-6-7 所示。其它頁面元素的CSS 設(shè)置方法類似,比如關(guān)于“石橋花園”的介紹文字,因文字的粗細不同,可在CSS中設(shè)置兩個類規(guī)則來進行樣式化,這里就不再贅述了。



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



圖1-6-8

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



圖1-6-9

10. 在選項卡標簽名稱的旁邊有一個小眼晴,單擊后可以編輯該標簽所包含的內(nèi)容,比如這里我們添加了菊花和美人蕉的內(nèi)容。包括表格、圖片和文字都可以放在里面,當然我們?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 控制和鏈接控制,有機會我們再詳細講解。寫到這里,我仿佛有所感悟,其實找到一個像“石橋花園”這樣的所在并不難,難的是那份閑暇、平和的心境。另外,不能忘記編輯這篇文章的幕后英雄,也是這套Adobe CS3協(xié)同工作稿件的全程參與者-Adobe InDesign CS3。

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