Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] HTML & CSS網頁基礎複習整理

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

[hr]

2. 相關講義


1.[url=http://mepopedia.com/forum/read.php?844,15917]CSS] BOX Model (盒子模型)[/url]
2.[url=http://mepopedia.com/forum/1173]101-1《中國》竹視傳一C-網頁設計[/url]
3.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以 HTML 與 CSS 完成第一個網頁[/url]
4.[url=http://mepopedia.com/forum/read.php?804,16481][講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
5.[url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本單欄網頁版型[/url]
6.[url=http://mepopedia.com/forum/read.php?844,17480][CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)[/url]

[hr]

3. 其他推薦教學網站


[color=#990000]推薦CSS網站[/color]
[color=#CC6600]CSS-TRICKS[/color] http://css-tricks.com/
HTML & CSS基礎教學影音(必看,雖然是英文,但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

[hr]
[color=#663300]HTML[/color]
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

[color=#663300]CSS[/color]
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
CSS教程(簡體)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

[hr]

4. 網頁基本的認識與任務


1. 安裝相關軟體


2. 開始閱讀關於html、css相關書籍與相關資料


建立起基本概念(請多多利用圖書館或網路資源)

基本的網頁是由HTML與CSS所組成

1. 相關認知


[color=#CC0066]HTML負責建構網頁的基本架構[/color]
[color=#000099]CSS專門負責美化網頁的任務[/color]


大家在進入網頁設計之前,必須先對html與css有基礎的概念
自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候,才能了解網頁內容及設計並能夠與程式設計師做基本的溝通

[color=#CC0066]HTML[/color]
HTML的全名是HyperText Markup Language,是編寫網頁的基本語言,而它並不是一個程式, 只是一些插在普通文件內的碼( code ),這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來,你現在所看到的頁面就是用HTML來控制的,它可控制字體的大小,也可以插入連結或圖像。

一個HTML檔稱為HTML document,存檔的副檔名為htm或 html,編寫的方式有很多種, 最原始的方法是用windows內的記事本或各種文書編輯軟體,也有大家覺得較熟悉的編輯軟體如Dreamweaver,編寫完成後儲存成*.htm或*.html 即可。

若想看網頁的HTML檔,只要在IE瀏覽器內按下滑鼠右鍵,再選擇 檢視原始檔(view)即可。Chrome則是按右鍵"檢視網頁原始碼","檢查元素"可察看更多內容,一份標準的HTML文件是由元素所組成的,元素是由標籤(Tag)以及文件內容所組成。

[color=#CC0066]HTML的最基本結構[/color]

HTML的架構是由<>與</>組成 裡面還有數個由<>與</>組成的區塊 只要概念清楚,相信接下來會讓大家更容易對網頁架構有進一步的了解
<html> <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容(被<body>與</body>包覆起來) </body> </html>
[hr]
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的色彩、文字設定、背景、排版等網頁外觀及美化...
(2)它能只修正一個 CSS 文件,便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡,縮小檔案下載的速度。
(4)適用於各種作業平台。
(5)由於允許同時控制多重頁面的樣式和佈局,CSS 可以稱得上WEB 設計領域的一個突破。
[/color]

[color=#CC0066]語法[/color]

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/

[hr]

3. 請進入教學網站註冊


http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』填寫姓名、[color=#CC0066]學號[/color],不會顯示於頁面,僅供評分用。
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 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. 網設計基本知識


[color=#CC0000]網頁所有檔案命名原則:[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字

3.index為首頁的內定命名(會自動判別為首頁),依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以:
hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )

[hr]

5. 相關競賽


1.[url=http://2013.netking.tw/]網站新人王[/url]
2.[url=http://www.cpmah.org.tw/2013/?page_id=22]「慈善/科技/人文網頁設計比賽」[/url]

[hr]



Edited 5 time(s). Last edit at 02/18/2014 11:07AM by JinJin.
(編輯記錄)