一、設計前的策劃和准備
在制作之前我們需要考慮網站的內容和風格,因為是為情人節准備的,所以網站的風格肯定是溫馨浪漫的帶點粉紅的色彩。
網站內容包括情人之間的情書、相片冊、屬於兩個人的音樂和戀愛歷程的記載四個部分。
制作這個網站我們所需要的工具軟件和程序包括:Dreamweaver、Fireworks、Sound插件,一段Maquee代碼。
需要的素材資源包括:網頁模板(網上下載)、音樂“最浪漫的事”、相片集。
二、模板下載
如何設計網站的結構和頁面呢?這裡我給大家推薦一個取巧的辦法——到網站上去找免費模板。如今可以下載的免費網頁模板很多,類型也很豐富,我們可以從中選擇結構設計比較浪漫的模板,然後再將它們改造成為具有自己風格的網頁,這樣操作起來比較省時省力。在這裡中可以找不少精美的網頁模板,我們選擇其中的一個粉色的模板下載到本地計算機上(如圖1)。
圖1
整個下載的模板壓縮包中包括:原始的網頁PSD圖片文件,已經轉換的Html網頁和所使用的字體文件。
因為我們是將模板改成自己所要的風格,所以模板中提供的已經生成好的Html用處不大。直接使用Fireworks打開原始的網頁PSD圖片文件,在它的基礎上修改頁面視覺效果,自己切圖轉換成Html,再在Dreamweaver中編輯。
我們要將這個網頁最終設計成為如圖2的效果,網站裡面裝滿了關於愛情的各種主題,我們將網頁取名為“愛的紀念頁”。
圖2
除此之外我們還將“愛的音樂”(圖2)和“電子相冊”(圖3)兩個主題頁面作為范例學習制作。當你打開音樂頁面的時候可以直觀地看到歌曲的歌詞和MP3下載鏈接,同時還會響起這首“最浪漫的事”歌曲的網頁背景音樂。電子相冊制作成為Flash動畫,打開頁面後將不用動手就可以欣賞你們所有的相片了。
圖3
圖4
三、網頁視覺效果重新設計
首先我們需要對下載的網頁模板進行改造,使用Fireworks將其中的PSD文件打開,把不需要的內容全部刪除,然後再自己添加所要的部分。
第一步當然是設計網頁的主題文字“愛的紀念頁”,將原來的Logo圖標用這個主題替換,然後把英文部分用“Love Story”來替換,文字的字體可以自行選擇,文字的顏色可以沿用模板Logo文字的顏色以便和網頁整體風格協調。在設計頁面的時候可以使用一些Fireworks自帶的特效,例如在主題文字“愛的紀念頁”底部添加一點夢幻的圖案(圖5)。
圖5
這些散亂在文字背景的圖案,可以先用繪圖工具繪制一個圓環圖形,然後在屬性面板中將筆刷的樣式選定為“油墨潑濺”筆刷的大小設定到60左右就可以得到上面的效果了。將網頁中原來的一些文字用情人節的語言來替代,如導航條上的“I LOVE You”之類的文字(圖6)。
圖6
因為整個網站還有幾部分內容所以需要一個有鏈接進入子頁面,我們將模板左邊部分的鏈接位置添上子頁面的主題文字(圖7)。
圖7
在頁面的最下面添加網頁版權信息的部分,可以寫上“2004年2月14日情人節”的字樣(圖8)對網站的主題作一個簡單說明。
12下一頁