1. 相關網站
1.網頁設計與語法（HTML/CSS）http://mepopedia.com/?page=804
2.手機版網頁設計（CSS/Javascript）http://mepopedia.com/?page=983
3.w3schools http://www.w3schools.com/
4.好用的線上語法撰寫網頁：http://codepen.io/pen
5.圖片網址：http://lorempixel.com/
6.CSS3 Maker http://www.css3maker.com/
7.跨瀏覽器相容性網頁設計 http://mepopedia.com/?page=844
2. 相關講義
1.CSS] BOX Model (盒子模型)
2.101-1《中國》竹視傳一C-網頁設計
3.[講義01] 以 HTML 與 CSS 完成第一個網頁
4.[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
5.[講義03] 利用Div標籤與CSS建立基本單欄網頁版型
6.[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
3. 其他推薦教學網站
推薦CSS網站
CSS-TRICKS http://css-tricks.com/
HTML & CSS基礎教學影音(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
HTML
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp
CSS
CSS語法教學攻略篇 http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫 http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介 http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
調色盤-色票產生器: http://cowwu.myweb.hinet.net/note/js/Color.htm
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm
4. 網頁基本的認識與任務
1. 安裝相關軟體
2. 開始閱讀關於html、css相關書籍與相關資料
建立起基本概念(請多多利用圖書館或網路資源)
基本的網頁是由HTML與CSS所組成
1. 相關認知
HTML負責建構網頁的基本架構
CSS專門負責美化網頁的任務
大家在進入網頁設計之前，必須先對html與css有基礎的概念
自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，才能了解網頁內容及設計並能夠與程式設計師做基本的溝通
HTML
HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來，你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。
一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種， 最原始的方法是用windows內的記事本或各種文書編輯軟體，也有大家覺得較熟悉的編輯軟體如Dreamweaver，編寫完成後儲存成*.htm或*.html 即可。
若想看網頁的HTML檔，只要在IE瀏覽器內按下滑鼠右鍵，再選擇 檢視原始檔(view)即可。Chrome則是按右鍵"檢視網頁原始碼"，"檢查元素"可察看更多內容，一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。
HTML的最基本結構
HTML的架構是由
CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的色彩、文字設定、背景、排版等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。
(5)由於允許同時控制多重頁面的樣式和佈局，CSS 可以稱得上WEB 設計領域的一個突破。
語法
CSS由多組「規則」組成。每個規則由「選擇器」（selector）、「屬性」（property）和「值」（value）組成：
1.選擇器（Selector）:多個選擇器可以半形逗號（,）隔開。
2.屬性（property）:CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。
3.值（value）:指屬性接受的設定值，多個關鍵字時大都以空格隔開。
4.屬性和值之間用半形冒號（:）隔開，屬性和值合稱為「特性」。多個特性間用「;」隔開，最後用「{ }」括起來。
選擇器
要針對沒有標籤定義範圍進行樣式設定時，可利用
與標籤 於CSS裡現在共有5種基本選擇器（Basic Selectors和2種偽選擇器。
基本選擇器
1.標籤選擇器(套用於HTML標籤)（h1,p等）——elementname
2.類別選擇器（class）——.elementname
3.ID選擇器（ID）——#elementname
4.萬用選擇器——* ns|* *|*
5.屬性選擇器——[attribute]
補充：http://blog.mukispace.com/css-selectors/
http://mepopedia.com/forum/register.php?851
註冊完畢後，請至右上角『設定』→『個人資訊（編輯）』填寫姓名、學號，不會顯示於頁面，僅供評分用。
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。
每個作業務必上傳至FTP，並以自己的帳號回覆，以方便登記成績
本學期作業都需透過FTP上傳，直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁：http://filezilla-project.org/
Internet Explorer (IE)
特色：是目前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，也因為最多人使用，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。 。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home
Google Chrome特色：
快速啟動?Google Chrome 瞬間即可啟動。
迅速載入?Google Chrome 的網頁載入速度飛快。
高速搜尋?直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW
Firefox特色：
可以根據使用者的習慣與需要按裝Firefox套件，其功能可以加強瀏覽器實用性與安全性。
假使你正在網站站上發文，一不小心按錯上一頁或者回首頁的按鍵，分頁功能可以讓你救回辛苦打的網頁。
多元的套件雖然可以補足你想要的功能，不過套件安裝太多也會影響其使用的效能。
下載FireFox
http://moztw.org/
網頁所有檔案命名原則：
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
1.網站新人王
2.「慈善/科技/人文網頁設計比賽」
基本選擇器
1.標籤選擇器(套用於HTML標籤)（h1,p等）——elementname
2.類別選擇器（class）——.elementname
3.ID選擇器（ID）——#elementname
4.萬用選擇器——* ns|* *|*
5.屬性選擇器——[attribute]
補充：http://blog.mukispace.com/css-selectors/
3. 請進入教學網站註冊
http://mepopedia.com/forum/register.php?851
註冊完畢後，請至右上角『設定』→『個人資訊（編輯）』填寫姓名、學號，不會顯示於頁面，僅供評分用。
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。
每個作業務必上傳至FTP，並以自己的帳號回覆，以方便登記成績
4. FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
本學期作業都需透過FTP上傳，直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁：http://filezilla-project.org/
5. 安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器
Internet Explorer (IE)
特色：是目前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，也因為最多人使用，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。 。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home
Google Chrome特色：
快速啟動?Google Chrome 瞬間即可啟動。
迅速載入?Google Chrome 的網頁載入速度飛快。
高速搜尋?直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW
Firefox特色：
可以根據使用者的習慣與需要按裝Firefox套件，其功能可以加強瀏覽器實用性與安全性。
假使你正在網站站上發文，一不小心按錯上一頁或者回首頁的按鍵，分頁功能可以讓你救回辛苦打的網頁。
多元的套件雖然可以補足你想要的功能，不過套件安裝太多也會影響其使用的效能。
下載FireFox
http://moztw.org/
6. 瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異
7. 多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考
8. 網設計基本知識
網頁所有檔案命名原則：
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
5. 相關競賽
1.網站新人王
2.「慈善/科技/人文網頁設計比賽」