網頁設計介紹

網頁設計

網頁設計就是使用標識語言（markup language)，經過一系列概念化，設計，編排，和執行的過程後將電子格式的訊息透過Internet網際網路傳輸，最後透過瀏覽器產生GUI圖形界面展示於客戶端。
簡單來說，網頁設計的目的就是產生網站，什麼是網站呢，就是伺服器內的一系列網頁的組合，終端用戶發出請求後伺服器透過網路傳輸特定的網頁(Client請求的訊息)給客戶端。簡單的訊息如文字，圖片（GIFs， JPEGs，PNGs）和表格，都可以透過使用HTML/XHTML/XML放置到網站頁面上。而更複雜的資料如動畫，視訊，聲音則需要瀏覽器中的附加元件(ActiveX)程式來解析，例如Flash、QuickTime、Java run-time environment，等等，這些套件程式也是透過HTML/XHTML/XML嵌入網頁中。
隨著瀏覽器和W3C標準一致性的改善，XHTML/XML（可擴展標識語言）與CSS（層疊樣式表）共同用作網頁內容的設計已經被廣泛的接受和使用。最新的標準和建議則是朝著瀏覽器的能力擴充和改善發展，使之能夠不需要外掛程式也能夠給用戶傳輸多媒體訊息和更多的功能。
一般公司會把公司網站委託網路公司設計維護，對網頁設計可能已經有基本瞭解的你，在面對各家網頁設計公司時不免徬徨，我們以客觀的角度來解說，希望您可以列入心中參考的建議。

網頁設計有那些技術
網路數據的呈現技術每隔數月就有舊的技術發表新功能或新的技術產生，分類方式也多不勝談cadch.com版權所有，在此將一般企業客戶在發案時需要瞭解的項目列舉：偏向伺服端(網站存放的主機)運算的有PHP程式、ASP程式、ASPX程式、CFM程式、JSP程式、CGI程式．．等。偏向用戶端(網友這邊)運算的有Java Script程式、Applet Script程式、htm、html、flash．．等。
網頁設計的價格如何產生
大家對網頁設計的報價如何產生的應該很迷惑，合理的報價是將工時跟技術量化所產生出來的，相同的工時跟技術在不同的國家、組織、營運形態下，產生的報價皆不相同，一分錢一分貨這個道理在網頁設計界不算絕對cadch.com版權所有，所以瞭解網頁設計的成本以及設計前就產生的成本差異，將提昇企業建置網站的單位效益。
在此舉個例子：我們幫一家南非的公司設計網頁，這個網頁的目標使用者是南非當地人，南非的電信業者Telkom SA對ADSL用戶採流量限制政策，對國外連線採時差流量限制政策，由於該電信業者壟斷市場，我們在建設一個南非網站時，面臨到快跟在台灣建置網站一樣高的成本。
網站建置前的成本差異
A.經營形態：
營運成本是一關鍵，並非指大型企業成本就較高，而是指經營是否有達到最佳化營運。
大型網頁設計公司可以達成資源互補，但也較小型設計公司或SOHO工作室複雜，故很容易就會造成資源浪費。
小型設計公司或SOHO工作室維運較容易，資源管理不複雜，但是資源少、互補能力較差。一家專業的設計公司所需的軟體成本可能是單一設計案收入的數倍，小型設計公司或SOHO工作室案件量可能無法負擔此成本。

B.國際匯差與GDP差異：
舉個例子，目前韓元大貶(2008/12/16)，以台灣企業委託韓國設計師，加上規費等外稅，在合國內法的範圍內可以節省成本。

C.設計師熟練度與精緻度
在製作網頁時有許多細微的注意事項，而這些地方對於技巧純熟的設計師已經習以為常，所以設計所花費的時間可以縮短不少。
承上述，技巧純熟的設計師可以縮短網頁製作的時間，但是精緻的設計例外，好的作品都是專注在細節上，同樣的網頁在不同的設計師手上製作，差異處可能超過1000個細節，一個網站的形成要使用到許多技術，除了程式外，還有美術設計。

D.製作工具
有許多製作網頁的軟體擁有降低成本與加快開發速度的特性。
網頁設計需要使用不同種類的軟體工具，這些工具具有各種特性和功能，以滿足不同的需求。以下是一些常見的網頁設計軟體，以及它們的特性：
1. Adobe Dreamweaver：
  - 特性：所見即所得（WYSIWYG）編輯器，程式碼編輯功能，支援多種編程語言，如HTML、CSS、JavaScript，內建模板和代碼片段，以及強大的整合Adobe Creative Cloud。
2. Sublime Text：
  - 特性：輕量、快速的程式碼編輯器，支援多種編程語言，具有高度可自訂性，可擴展性，支援各種插件和主題。
3. Visual Studio Code：
  - 特性：免費的開源程式碼編輯器，支援多種編程語言，內建Git整合，大量擴展和主題可供選擇，社區支持強大。
4. Brackets：
  - 特性：免費的開源程式碼編輯器，專為前端開發而設計，具有預覽模式、Live預覽、自動完成等功能。
5. WordPress：
  - 特性：開源的內容管理系統（CMS），專門用於建立博客和網站，具有龐大的主題和插件庫，容易使用並可擴展。
6. Joomla：
  - 特性：另一個開源的CMS，具有高度可自訂性，支援多種內容類型，擁有強大的社區和插件支持。
7. Drupal：
  - 特性：高度靈活的開源CMS，適用於大型和複雜的網站，擁有強大的擴展性和安全性。
8. Sketch：
  - 特性：專為設計師而設計的圖形設計軟體，用於創建網站和移動應用的設計和原型。
9. Figma：
  - 特性：在線協作設計工具，支援設計和原型制作，具有團隊協作和共享功能。
10. InVision：
  - 特性：用於原型和設計共享的工具，具有註釋、動畫和協作功能，適用於UI/UX設計師。
11. Adobe XD：
  - 特性：Adobe的UI/UX設計工具，具有原型制作、設計共享和視覺設計功能。
12. Webflow：
  - 特性：網頁設計平台，結合了所見即所得設計和程式碼編輯，可用於建立交互式網站，無需編程知識。
這些軟體工具各自擁有不同的特點和用途，選擇哪一個取決於您的需求、技能水平和偏好。某些工具更適合開發人員，而其他工具則更適合設計師或非技術用戶。根據您的專案，您可能需要結合多種工具來實現最佳的網頁設計和開發結果。

E.資源
網頁設計涉及到各種不同的資源，這些資源可以幫助設計師和開發人員創建出吸引人的網站。以下是一些常見的網頁設計資源，以及它們的特點和特性：
1. 圖片庫和圖像資源：
  - 特性：提供高質量的網頁設計資源圖像、圖標和插圖，用於網站的視覺設計。
  - 例子：Unsplash、Pexels、Freepik。
2. 字體庫：
  - 特性：包含各種網頁設計字體檔案，可供選擇並嵌入到網站中，以改進排版。
  - 例子：Google Fonts、Adobe Fonts、Font Squirrel。
3. 顏色和調色板工具：
  - 特性：幫助設計師選擇和管理網站的色彩方案，通常包含調色板生成器。
  - 例子：Coolors、Adobe Color Wheel、Color Hunt。
4. UI/UX設計工具：
  - 特性：專為設計和原型製作而設計的網頁設計資源工具，有助於設計師創建易於使用的界面。
  - 例子：Sketch、Figma、Adobe XD、InVision。
5. 圖形編輯工具：
  - 特性：用於圖片編輯和優化，以及創建網站圖形元素。
  - 例子：Adobe Photoshop、Adobe Illustrator、GIMP（開源）。
6. 程式碼編輯器：
  - 特性：用於編寫、編輯和管理網站的HTML、CSS和JavaScript代碼。
  - 例子：Visual Studio Code、Sublime Text、Atom。
7. 網頁框架和庫：
  - 特性：提供預建的網頁設計資源元件、模板和功能，加速網頁開發。
  - 例子：Bootstrap、Foundation、jQuery。
8. 網站主機和托管服務：
  - 特性：提供網站上線所需的主機空間、域名註冊和安全性功能。
  - 例子：Bluehost、HostGator、Netlify、Vercel。
9. 教學課程和學習資源：
  - 特性：提供網頁設計和開發的教學課程、文章和視頻，幫助新手學習和提高網頁設計技能。
  - 例子：MDN Web Docs、W3Schools、Codecademy。
10. 社交媒體圖像和標籤生成器：
  - 特性：用於生成社交媒體分享的圖像和標籤，提高內容在社交媒體上的可見性。
  - 例子：Canva、Open Graph Markup Generator。
11. 網站分析工具：
  - 特性：提供網站流量和用戶行為數據，幫助優化網站和網頁。
  - 例子：Google Analytics、Adobe Analytics、Hotjar。
12. 設計模板和UI元件：
  - 特性：提供預設的網站設計模板和UI元件，節省網頁設計時間。
  - 例子：ThemeForest、Dribbble（設計師社交網站）。
這些資源都有助於網頁設計師和開發人員更有效地創建和管理網站。根據特定項目的需求，設計團隊可以選擇合適的工具和資源，以實現所需的網站設計目標。
網站建構的成本
A.網路空間
網路空間是指網頁資料所存放的地方。這些空間可以是自行架設Internet伺服器、或是多人共用的虛擬伺服器、或附屬在子路徑中的空間(很多免費空間屬於這種)。
自行架設主機所要負擔的成本有硬體費用、軟體費用與運行所花的電費及維護人力；除了自行架設主機外，最多人選擇租用虛擬主機，依流量與空間及規格不同有著不同的訂價，國內與國外的價格也有明顯的差異，相信業主對於琳瑯滿目的虛擬主機規格與報價一定相當迷惑，而這亦是筆者覺得架站中最中要的一環，以下由硬體設備與網路線路與電路來說明：
虛擬主機硬體可能是由許多網站共用一架或多架構成之陣列，越多網站用戶可能影響主機運作的機會就越大，一些網站使用的程式是需要使用到中央處理器與記憶體，這方面控管不嚴謹的虛擬主機很有可能使客戶無法得到應有的資源。
另外有些網站的首頁附屬在其他網站的子路徑中，例如Hinet的免費空間、104NET的備份空間．．等，這類型的網站大多也是屬於由許多用戶共用一台主機資源。
完善的企劃與建議
要製作一個好的網站，一定要先有良好的規劃。
許多企業可能瞭解自己的需求，但是真正專業的設計師，將延伸潛在的網站效能，明確的目標可以更早的將專案完美達成，但這只是一家會做網頁的公司，而非設計公司。
新技術的應用
設計一個網站可能需要應用到許多技術，這些應用需要考慮到支援性與創新設計間的平衡，但是網頁設計的技術更新的非常快，很有可能網站作好以後，支持已經普及化了，所以新技術的嵌入非常重要。