網頁設計筆記

1. 網站：是許多網頁所形成具有相連性結構的集合。
當網站架構規劃好後，首先會製作首頁，再分別製作子網頁，並讓網頁間透過超連結彼此相連結，使瀏覽網站的人都能連結到各個不同的網頁來觀看網頁之內容 , 這樣的網頁架構就稱為「網站」。
2. 網頁：透過瀏覽器看到的畫面，就是一般所謂的「網頁」( Web Page )。
3. 首頁：進入網站所看到的第一個網頁 , 通常稱之為該網站的「首頁」，也就是常說的「 Home Page 」，檔名一律命名為index.html(會被瀏覽器直接判讀為首頁)。
首頁的角色十分重要，可視為網站的門面，給瀏覽者一個很重要的印象。它除了呈現網站主要的視覺風格外，其最重要的功能之一是提供整個網站的內容導覽，以及最新消息的公佈，並快速地找到感興趣的主題，瀏覽更詳細的內容 。

1. 網站規劃與視覺設計階段：

1. 擬定網站的主題與內容
2. 資料的蒐集與彙整(UX)
3. 對象分析與風格(UX)
4. 設定網站架構的規畫(UX | Figma)
網站架構圖(sitemap)代表整個網站設計的工作範疇，會清楚的知道整個網站的規模及大約內容。

---

5. 網頁平面草圖(WireFrame)、精稿設計（Mockup）、互動稿（Prototype）(UI | Figma)
圖片來源：Flava - Music Event Web Concept

---

6. 製作相關視覺檔案:
使用UI軟體（Figma、XD...）或影像處理工具(例如: Photoshop, Firework 等)或是繪圖工具(例如: Illustrator, Painter 等)來繪製網頁相關的檔案，如：相關架構圖、精稿、圖檔、背景圖、網站風格的設定(例如:網站標誌、配色等)。檔案輸出皆以網頁解析度72dpi。

---

2. 前端製作階段：

1. 網頁切版
切版就是：前端設計師要把視覺設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現出來。
資料來源：什麼是切版？切版練習的方式與工具

---

2. 利用網頁軟體(Dreamweaver or notepad++等)完成網頁：
確認網頁設計內容後，接著就可以開始來進行html、css及動態設計等的前端設計製作。

---

3. 後台程式與相關測試：

前端設計完成後，需交由後台工程師進行程式功能開發。工程師需要依照先前確認好的設計稿、客戶的特殊需求及指定網站功能，開始製作後台功能製作等事項。並進行瀏覽器測試、主機測試等。較龐大複雜的網站完成後，還需進行教育訓練。

---

4. 網站上傳與維護：

製作好的網站，經測試後，即可利用FTP軟體，上傳到網路伺服器中。本課程使用FileZilla上傳。
完成上傳只是一個開始，網站要能夠長久的經營必須要配合充分的內容以及適時的更新，提供大家最新的資訊才能夠吸引讀者的目光以及瀏覽的興趣。其他如：網站功能新增、定期資料備份，及資安檢測。商業型網站並需持續網站後續網路行銷規劃。唯有還有不斷地改良文案及圖片、注意瀏覽者的動向偏好並進行網站調整、內容修訂，才能優化SEO，提高網站的排名。

1. FileZilla下載網址
2. FileZilla是一款免費的FTP〈File Transfer Protocol〉檔案傳輸軟體。未來作業上傳至網路空間，需要使用這套軟體，請每位同學都須下載安裝在自己的電腦裡。
3. 下載與安裝FileZilla Client(客戶端），可以在自己的電腦輸入指定的帳號、密碼，透過網路，連接到分享的電腦，登入電腦內指定的資料夾，作檔案上傳、下載、刪除、更改名稱、建立資料夾…等操作，好像在使用檔案總管一樣快速又方便，適合大量檔案的傳輸工作
4. 下載與安裝FileZilla Server（伺服器端）以後，可以在自己的電腦建立帳號、密碼和分享的資料夾；使用者可以透過網路，分享給其他使用者。

進入FileZilla首頁，選擇下載FileZilla Client

會根據電腦的作業系統下載指定的版本

按綠色Download按鈕，下載後安裝

於上方選項左側選擇＞檔案＞站台管理員

點選新增站台，可為新站台命名，名稱取容易記憶即可

輸入主機名稱，協定選擇『SFTP』，登入形式選『一般』、輸入：使用者名稱與密碼

• 國內公司：Domain Name http://www.your_name.com.tw
• 註冊費新台幣 500 元整；年費新台幣 2,000 元整，每兩年繳付一次。
• 國內個人：Domain Name http://www.any.idv.tw
• 冊費新台幣 300 元整；年費新台幣 500 元整，每年繳付一次。
• 國外公司：Domain Name http://www.your_name.com
• 註冊費及年費美金70元整，每兩年繳付一次。
申請網址：
1. 台灣網路資訊中心：http://www.twnic.net/ or ：http://rs.twnic.net.tw/
2. 中華電信網域申請
3. 個人網域名稱：http://idv.twnic.net.tw/

1. 學校空間：http://my.cute.edu.tw/（畢業前皆可使用）
2. 000Webhost – 免費虛擬主機推薦，免費空間讓你練習架設 WordPress 網站沒煩惱！
3. 讓Dropbox、google雲空間變成免費的網站空間

1. 中華電信hicloud
2. 智邦生活館

1. 特色：是之前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。
2. 缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
3. 下載 Internet Explorer

1. 優點：完全開源任何人都可以對其進行修改。部分功能優化極好，其網頁原始碼分析功能對於專業人士提取網頁素材非常有用。在安全性上具有絕對優勢，火狐自身有阻止彈出性窗口的功能，在插件的配合下擴展性能極為強大。可以實現基本上所有瀏覽器的功能。
2. 缺點：內存消耗大，啟動慢，IE網頁兼容性較差，更適合配置較高的電腦使用。下載完瀏覽器後還要重新裝Abode flash插件，並且一般方法還裝不了，因為不兼容。
3. 下載 Firefox