相關網站
1.網頁設計與語法(HTML/CSS)http://mepopedia.com/?page=804
2avascript)http://mepopedia.com/?page=3.線上語法撰寫:http://codep983
3.w3schools 3ttp://www.w3schools.com/
4.好用的線上語法撰4.圖片網址:http://lorempixel寫網頁:ht5p://codepen.io/pen
5.圖片網址:http://lorempixel.com/
6.CSS3 Maker //mepopedia.com/?page=844
[hr]
相關講義
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?法縮寫 http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介 http://w一、安裝相關軟體
二、開始閱讀關於html、css相關書籍與相關資料,建立起基本概念(請多多利用圖書館或網路資源)
三、請進入老師教學網站註冊
scading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能四、FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用
本學期作業都需透過FTP上傳,直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁:http://filezilla-project.org/
五、安裝目前主流的三個瀏覽器:IE、Google Chrome、FireFox至少三種瀏覽器。
只修正一個 CSS 文件,便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡,縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]
請進入教學網站註冊
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』填寫姓名、[color=#CC0066]學號[/color],不會顯示於頁面,僅供評分用。
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
每個作業務必上傳至FTP,並以自己的帳號回覆,以方便登記成績
FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用
本學期作業都需透過FTP上傳,直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁:http://filezilla-project.org/
[/color]
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.
六、瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異。
七、多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考。
[hr]
相關競賽
1.[url=http://2013.netking.tw/]網站新人王[/url]
2.[url=http://www.cpmah.org.tw/2013/?page_id=22]「慈善/科技/人文網頁設計比賽」[/url]
[hr]屬性(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]
[hr]
請進入教學網站註冊
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』填寫姓名、[color=#CC0066]學號[/color],不會顯示於頁面,僅供評分用。
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
每個作業務必上傳至FTP,並以自己的帳號回覆,以方便登記成績
FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用
本學期作業都需透過FTP上傳,直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁:http://filezilla-project.org/
安裝目前主流的三個瀏覽器: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/
瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異
多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考
網設計基本知識
[color=#CC0000]網頁所有檔案命名原則:[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁),依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以:
hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
[hr]
相關競賽
1.[url=http://2013.netking.tw/]網站新人王[/url]
2.[url=http://www.cpmah.org.tw/2013/?page_id=22]「慈善/科技/人文網頁設計比賽」[/url]
[hr]補充:http://blog.mukispace.com/css-selectors/
[hr]
請進入教學網站註冊
http://mepopedia.com/forum/register.php?851
註冊完畢後,請至右上角『設定』→『個人資訊(編輯)』填寫姓名、[color=#CC0066]學號[/color],不會顯示於頁面,僅供評分用。
每位同學都必須註冊,有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號,或於課堂上留下帳號及 email 由老師統一申請開通。
每個作業務必上傳至FTP,並以自己的帳號回覆,以方便登記成績
FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用
本學期作業都需透過FTP上傳,直接從網路上看到作品
請同學務必下載並學會如何使用
官方下載網頁:http://filezilla-project.org/
安裝目前主流的三個瀏覽器: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/
瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異
多看多觀摩美觀且優良網站的設計,並隨時記錄優良網站的網址,以供後續設計的參考
網設計基本知識
[color=#CC0000]網頁所有檔案命名原則:[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁),依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以:
hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
[hr]
相關競賽
1.[url=http://2013.netking.tw/]網站新人王[/url]
2.[url=http://www.cpmah.org.tw/2013/?page_id=22]「慈善/科技/人文網頁設計比賽」[/url]
[hr]