網站建置的基本步驟 2.網頁設計

一般觀念就是網頁設計就只是設計網頁的外觀,實際上網頁設計不只有設計網頁的外觀,還要一些細節的調整,例如版面結構設計、HTML結構調整、網頁排版、瀏覽器相容性問題…等等,再厲害一點的設計師還可以設計互動JavaScript,而互動程式有些公司企業快把互動的開發交給網頁工程師,所以不一定要網頁設計師去設計。

 

HTML結構

由於HTML的資訊架構清晰完整,能讓網頁上呈現各種資料也能夠有效的分類或分區,所以在網頁排版前,都會先規劃好HTML結構,像是網頁都有主選單<menu>、LOGO、頁首<header>、頁尾<footer>、導覽列<nav>、內容區,不同的區域可以設定不同的網頁元素像是屬性、標籤、按鈕,挑選HTML元素要設定正確的層級關係,例如要顯示某文章段落可用<p>,要特別顯示某文字可用<strong>,顯示按鈕包含連結時不應該前後加上<input>或<a>等等網頁元素,這些網頁設計元素HTML相關書籍都有,可以去翻閱看看。

版面設計、網頁排版、CSS規劃

 

網頁排版也算是專業的一環,需要了解網站結構、頁面結構來調整,而網頁排版有些設計師基本上會使用CSS來排版進行版面配置調整,如果還能了解網格(Grid)概念,來使用CSS來設計,後續的網頁問題會較少,網頁製作進程速度也較快,CSS規劃是非常重要的,一個CSS必須有良好的結構、易懂的命名規則,可以讓整體網站方便後續開發與擴展。

然而如果是用Joomla!或WordPress,使用CSS的機會就比較少了,大部分版型都設計好了,更需要細節的部分才需要使用到CSS。

瀏覽器相容性

網頁設計做好之後,需要測試瀏覽器相容性,這個工作非常重要,雖然現在技術已經可以支援不同瀏覽器了,但是專業的網頁設計還是需要在不同的瀏覽器有相同甚至更好的表現,如何調整到最好取決於設計師的功力了。

目前主流瀏覽器就有很多種,不同的瀏覽器使用者也有不同的特性,而不同瀏覽器HTML和CSS可能會有微妙的差異,而微妙的差異往往是煩人的,不僅影響CSS還可能JavaScript也會影響到,細節調整不易,需要經驗豐富的人才能解決,網路上也有很多資料,如果爬文自己調整的話,是用時間換取經驗,簡單說這工作很花時間。