DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 情人節打造愛的紀念頁
情人節打造愛的紀念頁
編輯:Dreamweaver相關     

  難得今年的情人節正好是周末,戀愛中的男女們正好趁這個時間好好的劃一下如何度過這個開心甜蜜的日子。有心的朋友還可以趁這幾天想想送一份什麼特別的禮物給心愛的人。

  如果做一個mini網站,記錄兩個人從相識到相知、相愛的整個過程,回憶一下戀愛中的點點故事。這個主意很浪漫吧?下面我們就一起來打造一個情人節的小網站。文章末尾提供壓縮好的素材文件和制作完成的頁面供大家下載參考。

  一、設計前的策劃和准備

  在制作之前我們需要考慮網站的內容和風格,因為是為情人節准備的,所以網站的風格肯定是溫馨浪漫的帶點粉紅的色彩。

  網站內容包括情人之間的情書、相片冊、屬於兩個人的音樂和戀愛歷程的記載四個部分。

  制作這個網站我們所需要的工具軟件和程序包括:Dreamweaver、Fireworks、Sound插件,一段Maquee代碼。

  需要的素材資源包括:網頁模板(網上下載)、音樂“最浪漫的事”、相片集。

  二、模板下載

  如何設計網站的結構和頁面呢?這裡我給大家推薦一個取巧的辦法——到網站上去找免費模板。如今可以下載的免費網頁模板很多,類型也很豐富,我們可以從中選擇結構設計比較浪漫的模板,然後再將它們改造成為具有自己風格的網頁,這樣操作起來比較省時省力。在這裡中可以找不少精美的網頁模板,我們選擇其中的一個粉色的模板下載到本地計算機上(如圖1)。

圖1

  整個下載的模板壓縮包中包括:原始的網頁PSD圖片文件,已經轉換的Html網頁和所使用的字體文件。

  因為我們是將模板改成自己所要的風格,所以模板中提供的已經生成好的Html用處不大。直接使用Fireworks打開原始的網頁PSD圖片文件,在它的基礎上修改頁面視覺效果,自己切圖轉換成Html,再在Dreamweaver中編輯。

  我們要將這個網頁最終設計成為如圖2的效果,網站裡面裝滿了關於愛情的各種主題,我們將網頁取名為“愛的紀念頁”。

圖2

  除此之外我們還將“愛的音樂”(圖2)和“電子相冊”(圖3)兩個主題頁面作為范例學習制作。當你打開音樂頁面的時候可以直觀地看到歌曲的歌詞和MP3下載鏈接,同時還會響起這首“最浪漫的事”歌曲的網頁背景音樂。電子相冊制作成為Flash動畫,打開頁面後將不用動手就可以欣賞你們所有的相片了。

圖3

圖4

[1] [2] [3] [4] 

 

  三、網頁視覺效果重新設計

  首先我們需要對下載的網頁模板進行改造,使用Fireworks將其中的PSD文件打開,把不需要的內容全部刪除,然後再自己添加所要的部分。

  第一步當然是設計網頁的主題文字“愛的紀念頁”,將原來的Logo圖標用這個主題替換,然後把英文部分用“Love Story”來替換,文字的字體可以自行選擇,文字的顏色可以沿用模板Logo文字的顏色以便和網頁整體風格協調。在設計頁面的時候可以使用一些Fireworks自帶的特效,例如在主題文字“愛的紀念頁”底部添加一點夢幻的圖案(圖5)。

圖5

  這些散亂在文字背景的圖案,可以先用繪圖工具繪制一個圓環圖形,然後在屬性面板中將筆刷的樣式選定為“油墨潑濺”筆刷的大小設定到60左右就可以得到上面的效果了。將網頁中原來的一些文字用情人節的語言來替代,如導航條上的“I LOVE You”之類的文字(圖6)。

圖6

  因為整個網站還有幾部分內容所以需要一個有鏈接進入子頁面,我們將模板左邊部分的鏈接位置添上子頁面的主題文字(圖7)。

圖7

  在頁面的最下面添加網頁版權信息的部分,可以寫上“2004年2月14日情人節”的字樣(圖8)對網站的主題作一個簡單說明。

12下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved