網站建置的流程與步驟(下)

日期 2014年11月14日   作者 Admin
轉貼   我要評論   尚未評論 評論

在筆者這十多年的工作歲月中,大部分的時間都與網站建置這件事糾纏不清,最早期剛接觸網頁時還是用HE5 (漢書) 或 Notepad 開始撰寫 HTML 開發網站,偶爾回想起來感覺當時寫網頁好辛苦,都沒有設計工具或開發工具可用,不過若換個角度想,其實當時才是最幸福的,你想想今日的 網頁設計 即便有那麼多好用的工具支援,但設計網頁的過程中有變簡單嗎?有太多網頁設計相關的問題需要被克服,像是跨瀏覽器相容性的問題、互動網頁的挑戰、伺服器端的程式開發、針對海量網頁要求的架構、AJAX、JSON、HTML5、CSS3、…,有太多東西要學了。

 

早期我們在外面接案子做網站時,不時會聽到客戶提到「做網站很簡單啊,你怎麼報價這麼貴,我隨便找個大學生就能做了,而且還能做好幾頁」,不過這樣的話語已經不常再聽到了,就是因為網站建置的過程中有太的細節需要面對,一個網站的優劣也往往取決於那些被人忽略的細節之中,因此「網站建置」已經漸漸的不再成為一個殺紅了眼的紅海市場,而是一個比專業、比信任、比品牌的世界。

 

但是網站建置極其複雜,有沒有什麼樣的流程能夠借鏡或參考呢?各位到書局或網路書店搜尋 網站建置 或 網頁設計,隨便都可以找到上百本至上千本的書,今天筆者希望能夠提供一個網站建置的流程給各位參考,有興趣專研的人可以依據有興趣的領域進一步研究或瞭解,對於有興趣從事網站專案管理的人來說,也可以當成一個參考的依據。

 

我們基本上將打造網站的過程區分為五大步驟:

    網站企畫
    網頁設計
    程式開發
    發佈網站
    內容維護

以下我針對不同的步驟逐一詳加說明。

 

參、程式開發

提到網站建置的程式開發,我想比較大宗的程式需求就是做內容管理,將網站上預先規劃好的內容儲存在資料庫中,並透過一個所謂的「後端系統」或成為「內容管理系統」來管理這些儲��在資料庫中的資料。至於前台的部分,大多不太複雜,我們會透過開發人員將資料庫中的資料讀取出來,並適當的將資料放置到網頁HTML裡。

 

這時可能會有人問到,在程式開發的階段需要對網頁版面進行調整嗎?我經常被問到的一種情況是,開發人員在接到網頁設計師給的版型後進行套版,但是網頁版型 (HTML, CSS) 在套上程式之後,網頁就大亂了,而大部分的網頁又已經套上的程式碼,不太可能再由網頁設計師接手修改,最後變成是由 程式設計 師苦命的修正網頁的HTML與CSS等等,如果網頁設計師的CSS樣式規劃沒有章法,又沒有好記或容易理解的命名規則,而程式設計師在套版時並沒有像網頁設計師有好用的網頁設計工具,你可以想見工程師在調整版面的過程中經常是痛苦的,因為他們要面對的是一連串與版面相關的細節,然後版面被調整壞了還會被PM罵說:「你為什麼把網頁弄亂了?」,若問網頁設計師,網頁設計師還會說:「不會啊,我的版面做出來的時候是好的,是工程師把版面弄壞的。」你知道知道身為程式開發人員的苦了吧!^^

 

這個文章段落雖然是「程式開發」的部分,但是我還是要針對這種經常遇到的版面問題提醒網頁設計師有以下注意事項:

在設計版面時,如果知道網頁裡有某部分資料是會隨著資料庫的資料多寡而異動的,建議在設計版型時可以盡量塞入假資料上去,讓文字盡量填滿版面,這樣才不會造成因為版面在訊息量過多時導致破版(版面被破壞)的情況。

 

相對的,如果網頁有某部分的內容也許會有「無資料」的情況,網頁設計師也應該針對這種無資料的情況額外設計一個頁面,以確保程式設計師在套版完成後不會發生破版的情況。

 

在程式開發這個階段,一些比較常見的步驟有:

    資料庫分析與設計
    系統設計、系統架構分析
    選擇適當的開發工具 ( 例如 Visual Studio 2010 )
    選擇適當的開發架構與程式語言 ( 例如 ASP.NET MVC 3 與 C# 4.0 )
    後台內容管理介面開發
    前台程式套版與 UI 互動設計
    測試與除錯

 

肆、發佈網站

在網站建置並測試完成後,接下來就準備要發佈網站了,你的網站要讓全世界的人看見有很多種方式,像是拉專線自建機房、 主機代管 、專屬主機、 虛擬主機網站代管 、雲端空間、…就是各種不同讓網站上線的方式,建置的成本也不一,通常會依據客戶的需求來決定用何種方式讓網站上線。

 

另外,將網站的檔案與資料庫發佈到遠端主機的方式也有好幾種,比較常見的是透過FTP上傳檔案,另外還有FrontPage Server Extension也是之前經常使用的上傳方法,最近還有微軟新一代的發佈工具Web Deploy也是另一種網站發佈的方式。

 

發佈網站一般來說會有許多複雜的安裝步驟與設定程序,我個人的習慣都是把安裝的步驟與設定的過程做成一份鉅細靡遺、圖文並冒的標準作業程序(SOP),盡可能的做到「按圖施工‧保證成功」的水準,這樣才能保障未來在重新部署網站時不會發生任何意外。

 

就開發工具來說,Visual Studio 2010 的單鍵發行(One-Click Publish)功能與微軟的 Web Deploy 工具就是非常適合用來簡化整體網站發佈的流程,像我們公司現在在替客戶發行網站時,基本上真的已經做到「按下一個按鍵就完成網站發佈的動作」,非常方便。

 

對於一些較為簡單的網站,若能透過 Microsoft WebMatrix 工具來進行網站管理,並結合 Web Deploy 發佈方法,也能做到有效簡化發佈網站的複雜度。

 

伍、內容維護

一般除了公司的形象網站外,不太可能讓網站上線之後就再也不去更動它,所以當網站上線後通常會有內容維護的需求,網站上的內容非常多元,例如文字、圖片、影片、動畫都很有可能從網站上線後必須持續的更新,一般來說網站通常都會建置後台內容管理系統,以方便讓不太熟悉網頁設計的客戶進行內容維護,這也是一般客戶較能接受的方式,因此一個好的內容管理系統不可或缺。

 

除了內容更新之外,一個網站的外觀看久了總會膩,所以網站上線幾年後,客戶通常會思考是否要將網站進行改版或對外觀進行重新設計,如果網頁設計的部分做的不錯的話,通常不太需要更動到程式碼,只要修改CSS部分,其實就能讓整個網站煥然一新。

 

不過網站也是有生命週期的,通常過個幾年客戶公司的體質也變化了(變大或變小),需求通常也會與多年前不同,所以我們比較常遇到的狀況都是客戶要求整個網站重新打造,不僅只是網頁設計的部分重新而已,也許從資訊架構的部分就完全不同,到時就要重新走一次完整的網站建置流程。

 

內容維護不只是「內容」而已,還有許多其他能提升網站品質的工作要做,例如網頁內容的 搜尋引擎最佳化 (SEO)就需要網站管理者針對網站的內容進行關鍵字的規劃與設計,以及控制網站與其他網站之間的連結關係,這些都會直接影響到網站導入的流量。另外,透過一些統計分析數據,也能清楚瞭解所有網站的訪客都是從哪幾頁進來的、訪客來自於哪些國家或地區,還能分析每天的流量多寡的變化,這些資訊都有助於網站管理者要如何對內容進行維護,未來還能當作網站改版的參考依據。

 

結語

講到這裡你應該可以發現網站建置不是件簡單的事,要打造出一個完美的網站通常需要多人同心協力,結合不同的專業知識與領域並才有可能做出一個好網站,不同的專業人才之間彼此還需要互相瞭解彼此之間的困難與限制,在工作上才能彼此互補,當培養出絕佳的團隊默契後,彼此之間更能夠有效的專業分工,做各自擅長的工作。

 

在團隊中維持良好的溝通品質真的非常重要,因為網站企畫、網頁設計、程式開發這三個階段的工作彼此息息相關,需要非常密集的協調與溝通,如果溝通品質不佳,直接影響到的就是網站最後產出的品質。

 

打造完美網站的過程雖然辛苦,但透過一些經驗的累積與歸納出來的標準流程,還是能夠有效降低網站建置的複雜度,並且確保網站建置的成果至少能有一定的水準之上。

 

 

 

參考資料:
1加藤才智 著、許郁文 譯    2009    「網頁設計新人仕事」,第一版,碁?出版社
2 黃正文    2006    FrontPage 網頁設計
3 Nielsen, J., (1993),Usability Engineering, New York: Academic Press.

 

資料來源:The Will Will Web

 





關聯關鍵字: ERP系統



本頁標籤:

網頁設計主機代管虛擬主機網站代管搜尋引擎最佳化程式設計



轉貼: 推到Plurk 推到Twitter 分享到Facebook


發表評論
評論(0)



匿 稱(必填)
E-Mail(必填)
網 址



RSS訂閱

-

近期文章

.
.
.
.
.

-

文章分類

. . .
. . .
. . .
. . .
.

-

近期迴響

.
.
.
.
.

-

Tags

asp   bing   廣告   cookie   facebook   youtube   lg   部落格   flash   http   https   icon   bug   設計   iphone   it   網頁設計   lan/wan   mhp   msn   網站   proxy   scm   seo   w3c   網路行銷   引擎行銷   關鍵字   ecpm   排名   網站排名    術語   seo關鍵字   tada   tcp/ip   口碑行銷   台北法泊,邱浚彥   台北法泊時尚診所,果凍隆乳   台南職訓局,急救員訓練,堆高機,起重機,天車,吊車   平面設計   交換器   宅經濟   自動化系統   自然排序   社群   房地產   精準行銷   法泊隆鼻、法泊   泡沫化   知識   品牌行銷   急救人員證照   台南職訓中心   急救員訓練,台南職訓局   限制理論   高雄法泊時尚診所,隆鼻   設計趨勢   惡意軟體   犀利哥   短網址   程式設計   虛擬主機   視覺   錯視   雲端   資訊   microsoft   雲端運算   防毒軟體   微笑曲線   搜索引擎   曝光度   搜尋   搜尋引擎   搜尋行銷   黃金法則   團購   網頁加速   網頁配置   blog   市場趨勢   無障礙   圖片   網頁設計公司   網站的瀏覽率   內容規劃   alexa   網站規劃   網站設計   客製化   套版型   租用型   設計優化   網站優化   流量導入   賺錢   網路創業   網路開店   宅配   電子商務   網路電話   網路廣告   廣告設計   數位   數位廣告   標籤綁架   線上翻譯   整合式行銷   檔案備份   購物   google   關鍵字行銷   關鍵字廣告   議題行銷  

-

友善連結

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

-

Valid CSS! Valid XHTML 1.0 Transitional


文章挖哇 版權所有 © 2008 All rights reserved.
Top