close

文 李明謙老師

09 對於擁有技術的網頁創作者來說,如何將技術轉化成收入,是一個重要的門檻,本文中李明謙老師深入淺出的介紹網頁設計和接案的流程,讓讀者能夠瞭解,除了學會軟體,商業設計中,還有哪些流程和步驟應該注意,相信本文對於讀者來說,是值得一讀再讀,深入思考的一篇好文。

壹、誰在學網頁設計

現在部落格、噗浪取代了很多個人網站,如果只是想利用網路來秀出自己找尋許多同好、與人分享心情,那最方便的介面就是部落格了,那又為什麼要學習網頁設計呢?大致可以分析為下列的幾種原因:

1.想要讓自己的與眾不同,更有不凡的設計。

2.想要幫公司設計網站,為自己贏得主管的青睞。

3.想要當網頁設計師,做個Soho族。

4.想要兼差接案賺更多錢。

 在目前的網頁上,設計師們絕對不可能僅僅利用一套軟體完成整個網站的設計,可能必須透過多套軟體的通力合作才可以,而使用的軟體至少應該包含上述的三套軟體。

  01.jpg

貳、誰需要網頁技能?

 

02.jpg

1.行政人員可能被要求要會修改編輯網頁。

2.程式設計師有可能被要求設計的程式必須採網頁介面或包含網路功能。

3.平面設計人員也會被要求須要設計網頁。

4.多媒體包含音效和視訊方面更是從電視媒體跳到了網際網路上。

 03.jpg

參、網頁設計軟體操作的流程

當我們接到網頁設計案件的時候,設計的流程如下圖所示

1.從了解和分析業主的需求

2.現場拍攝和照片和圖形美化

3.開始繪製版型

4.網頁內容的安排

5.動畫的增加和設計

6.設計後伺服器的架設或租用

現在市場上和以前不同,希望設計師(或稱專案經理人)可以一個人獨力完成專案,而想要獨立完成網頁設計專案就需要全部都了解左述的這些(現在的工作不好找囉~還是努力學些東西吧!)

 04.jpg

肆、網頁設計流程

05.jpg

伍、版型設計

通常一開始設計版型時,是很天馬行空的想法,也許只是突然的一個想法、也許是突然的一個靈感,但不管以上是什麼,請務必~利用紙張畫下來,避免自己忘記。然設計不只是一種突然,而是經年累積的,多參考他人的網站或設計,也是一種不錯的選擇,但千萬不要抄襲,否則很容易還沒賺錢就吃上官司了。

 設計的條件其實還滿固定的,第一必須有Logo,第二必須有選項按鈕,第三必須有宣告字樣及聯絡方式等,最後則必須有內容,再來則是由設計師自行發揮,當然前面提到的,了解業主的需求這時必須加入進來,否則是領不到錢的~

  

06.jpg

再來便是依需求切割網頁版型,當然不該出現的,此時就得在Photoshop將它消失掉囉,以免等會在Dreamweaver內編輯時,又得重新切割版型一次。

 

07.jpg

切割完後的檔案,僅保留其有需要的圖檔即可,其餘的圖檔可徑行刪除,避免檔案空間過大。

 

陸、網頁構成的要素

一個網頁的內容,可以說有五種主要的構成要素:文字、超連結、影像圖片、多媒體影音以及特效。

文字

既然HTML是純文字檔,文字當然是網頁內容的主體。但是這裡所說的文字不只是在你在瀏灠器中看到的 文字,還有包括所有的在網頁上看不到的標籤語法(在Dreamweaver內編輯)。

超連結

超連結代表的是一種在WWW中"跳躍"的功能,其方式可分為三種: 一是在同一個網頁中跳到不同的點;二是在同一個網站中,從一個網頁跳至另一個網頁中;三是跳至不同的網站的某一個網頁中。

影像圖片

事實上 網頁之所以吸引人,絕不是靠單純的文字變化而已,利用不同的2D或是3D的圖片,可以使得網頁 更加鮮明活潑。一般常用的圖檔格式有GIF,JPEG、PNG等。

多媒體影音

近年來多媒體的應用早已無所不在,而在WWW的世界裡早已加入了多媒體的呈現,單純的靜態圖片檔已 不能滿足設計者的需求,在網頁中加入聲光影像等檔案(例如MPG檔、WAV檔、AVI檔、SWF檔等)已變成現在最流行的趨勢。

特效

特效指的是透過HTML或是腳本語言撰寫的功能,使得網頁的畫面呈現各種特特殊的動態效果。最常見的效果 像是文字在網頁中游移、跑馬燈等等…通常由Javascript語法構成。

但為了避免設計出不良的網頁,因此列舉幾項供參考:

i.橫幅廣告:瀏覽者在瀏覽網頁時,這些橫幅廣告不管它的形狀或位置,瀏覽者較少會花費時間去注意。

ii.避免動畫:快速閃動的文字或圖片,會令用戶無法專心- 失去焦點。

iii.彈開式視窗:干擾或打斷用戶瀏覽的興致,不是良好的網頁應該有的。

iv.無法回上一頁或無相關連結:不當的設計,易造成瀏覽者直接關閉視窗。

v.增加搜尋的功能:搜尋是網路使用者發現網站最直接和最重要的方式。

 

柒、結語

最後再加上Dreamweaver配合CSS以及利用Flash來製作一些網頁中的動畫。即完成網頁製作。

最後把設計好的網頁上傳或是自行架設伺服器讓全世界的人可以看到我們所設計的網頁。

 08.jpg

但別以為上傳至伺服器後就沒事了,相關的後續服務才是最重要的,例如定期至業主或客戶的網站瀏覽,檢查是否有任何問題或因素,例如:圖檔無法出現、網頁無法瀏覽、動畫無法呈現等等問題,避免業主親自抱怨,而是主動發現問題,進而改善,才是服務優等的標竿,而做好客戶服務才是最優質的接案達人。

 

arrow
arrow
    創作者介紹
    創作者 聯成電腦 的頭像
    聯成電腦

    聯成電腦-讓你價值連城

    聯成電腦 發表在 痞客邦 留言(1) 人氣()