嗨!大家好
welcome to my website!!! 想要再多學一點嗎?......
Change History
Message: [作業01] 以HTML與CSS完成第一個網頁
Changed By: mepoadm
Change Date: September 29, 2011 04:19PM
[作業01] 以html與cssL與CSS與CSS完成第一個網頁
Change Date: September 29, 2011 04:19PM
[作業01] 以html與cssL與CSS與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
[color=#990000]建議需先安裝的軟體[/color]
---------------------------------------------------------------------------------------
[color=#0033CC]FileZilla[/color] 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
好用的免費記事本軟體
[color=#990000]Notepad++[/color]官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: [color=#0033CC]FireBug[/color] ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
[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/
---------------------------------------------------------------------------------------
其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力
[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
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/
---------------------------------------------------------------------------------------
HTML的最基本結構
<html><br />
<head><br />
<title><br />
</title><br />
</head><br />
<body><br />
您所要在瀏覽器顯示的內容<br />
</body><br />
</html><br />
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則：[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!!</p>
5.接著我們[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]，新增如下文字:
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! 想要再多學一點嗎?......</p>
接著加入超連結語法 a ，如下：
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p>
拉入Firefox預覽效果
6.要出現[color=#006600]連結效果[/color]還要加入以下語法:
index.html
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
about.html
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接[color=#006600]在h1中直接加入style的語法[/color]
如
<h1 style="color:red;">嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<body><br />
<h1 style="color:red;">嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</body>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 [color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]
<html><br />
<head><br />
<title>歡迎來到JinJin的網頁</title><br />
</head><br />
<body><br />
<h1 style="color:red;">嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</body><br />
</html>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<link rel="stylesheet" href="style.css" media="screen" />
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<html><br />
<head><br />
<title>歡迎來到JinJin的網頁</title><br />
<link rel="stylesheet" href="style.css" media="screen" /><br />
</head><br />
<body><br />
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</body><br />
</html><br />
(3).接著在新的style.css檔案裡鍵入
<br />
h1{<br />
color:red;<br />
}<br />
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
h1{<br />
color:#AC5C52;<br />
font-size:12px;<br />
}<br />
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<html><br />
<head><br />
<title>歡迎來到JinJin的網頁</title><br />
<link rel="stylesheet" href="style.css" media="screen" /><br />
</head><br />
<br />
<body><br />
<div id="main"><br />
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</div><br />
</body><br />
</html><br />
style.css
h1{<br />
color:#AC5C52;<br />
font-size:16px;<br />
}<br />
<br />
#main{ /*div id前面要加上#*/<br />
width:500px; /*寬度*/<br />
margin:0 auto; /*置中語法*/<br />
background-color:#eee; /*背景色*/<br />
padding:10px; /*div內部距離*/<br />
}<br />
<br />
body{<br />
background-color:#004EA0; /*body的背景色*/<br />
margin:0px; /*貼緊頂部底部以及左右*/<br />
}<br />
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br />
<html xmlns="http ://www.w3.org/1999/xhtml" ><br />
<head><br />
<title>歡迎來到JinJin的網頁</title><br />
<link rel="stylesheet" href="style.css" media="screen" /><br />
</head><br />
<body><br />
<div id="main"><br />
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</div><br />
</body><br />
</html><br />
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。
---------------------------------------------------------------------------------------
[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx
2.切勿擅改別人的資料檔案，若經發現則以零分計
---------------------------------------------------------------------------------------
這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
[color=#990000]建議需先安裝的軟體[/color]
---------------------------------------------------------------------------------------
[color=#0033CC]FileZilla[/color] 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
好用的免費記事本軟體
[color=#990000]Notepad++[/color]官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: [color=#0033CC]FireBug[/color] ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
[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/
---------------------------------------------------------------------------------------
其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力
[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
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/
---------------------------------------------------------------------------------------
HTML的最基本結構
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則：[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
大標題
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]
嗨!大家好
welcome to my website!!!
5.接著我們[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]，新增如下文字:
接著加入超連結語法 a ，如下：
拉入Firefox預覽效果
6.要出現[color=#006600]連結效果[/color]還要加入以下語法:
index.html
about.html
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接[color=#006600]在h1中直接加入style的語法[/color]
如
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 [color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
(3).接著在新的style.css檔案裡鍵入
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
style.css
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。
---------------------------------------------------------------------------------------
[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx
2.切勿擅改別人的資料檔案，若經發現則以零分計
---------------------------------------------------------------------------------------
這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分
Changed By: JinJin
Change Date: September 28, 2011 11:30PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 28, 2011 11:30PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[color=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[color=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
Changed By: JinJin
Change Date: September 14, 2011 02:18PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 14, 2011 02:18PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
Changed By: JinJin
Change Date: September 13, 2011 10:09PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 10:09PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
/xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
/xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
Changed By: JinJin
Change Date: September 13, 2011 10:08PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 10:08PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
>嗨!大家好</h1>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
>嗨!大家好</h1>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
Changed By: JinJin
Change Date: September 13, 2011 10:08PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 10:08PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。。[/color][/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
-----------------------
平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。。[/color][/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
-----------------------
平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
Changed By: JinJin
Change Date: September 13, 2011 10:07PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 10:07PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
[color=#669900]CSS 是 "Cascading Style Sheet" 的縮寫，一般稱為 "階層樣式表"。
CSS 並不是一種程式設計語言，而是用於網頁排版的標記性語言。
它可以將 html語言功能加以擴展，讓您的網頁更有獨特的風格。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
h1>嗨!大家好</h1>
Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。。[/color][/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
<b>[color=#990000]建議需先安裝的軟體[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#0033CC]FileZilla[/color]</b> 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
<b>好用的免費記事本軟體</b>
<b>[color=#990000]Notepad++[/color]</b>官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: <b>[color=#0033CC]FireBug[/color]</b> ，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
<b>[color=#990000]推薦很棒的CSS網站[/color]</b>
---------------------------------------------------------------------------------------
<b>[color=#CC6600]CSS-TRICKS[/color]</b> http://css-tricks.com/
<b>HTML & CSS基礎教學影音</b>(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
---------------------------------------------------------------------------------------
<b>其他HTML & CSS相關網站</b>
有空可多多研讀，增加自己的功力
<b>[color=#663300]HTML[/color]</b>
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
<b>[color=#663300]CSS[/color]</b>
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/
---------------------------------------------------------------------------------------
HTML的最基本結構
<xmp><html>
<head>
<title>
</title>
</head>
<body>
您所要在瀏覽器顯示的內容
</body>
</html>
</xmp>
---------------------------------------------------------------------------------------
<b>[color=#CC0000]網頁所有檔案命名原則：[/color]</b>
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
<b>[color=#660099]作業一的步驟與要求：[/color]</b>
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想<b>[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]</b>，於字的前後加上
<xmp><h1> 大標題 </h1></xmp>
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的<b>[color=#006600]第二行文字，用以下p 語法來換行[/color]</b>
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!!</p></xmp>
<h1>嗨!大家好</h1><p>welcome to my website!!!</p>
5.接著我們<b>[color=#006600]另存新檔為: about.html，製作第二個頁面[/color]</b>，新增如下文字:
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! 想要再多學一點嗎?......</p></xmp>
接著加入超連結語法 a ，如下：
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a>想要再多學一點嗎?......</a> </p></xmp>
拉入Firefox預覽效果
6.要出現<b>[co<p>welcome to my website!!! <a href="index.html"></a>回到首頁 </p></xmp>
lor=#006600]連結效果[/color]</b>還要加入以下語法:
index.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
about.html
<xmp><h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p></xmp>
即可以呈現互相連結的效果
重整Firefox預覽效果
7.如果想要在標題字增加不同的視覺效果，如改變顏色
就要開始進行簡單的CSS設定
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b>
如
<xmp><h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p></xmp>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。
<xmp><body>
<h1 style="color:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body></xmp>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 <b>[color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]</b>
[color=#669900]CSS 是 "Cascading Style Sheet" 的縮寫，一般稱為 "階層樣式表"。
CSS 並不是一種程式設計語言，而是用於網頁排版的標記性語言。
它可以將 html語言功能加以擴展，讓您的網頁更有獨特的風格。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
h1>嗨!大家好</h1>
Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。。[/color][/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
平台。[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<title>歡迎來到JinJin的網頁</title>
</head>
<body>
<h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
or:red;">嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html></xmp>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
[color=#669900]<b>CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」
CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。</b>[/color]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<xmp><link rel="stylesheet" href="style.css" media="screen" /></xmp>
(2).把index.html裡h1後的style設定剪下，預覽一下，紅色不見了
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</body>
</html>
</xmp>
(3).接著在新的style.css檔案裡鍵入
<xmp>
h1{
color:red;
}
</xmp>
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<xmp>h1{
color:#AC5C52;
font-size:12px;
}
</xmp>
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]<b>補充說明：</b>
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<xmp><html>
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
style.css
<xmp>h1{
color:#AC5C52;
font-size:16px;
}
#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b> }
body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}
</xmp>
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http ://www.w3.org/1999/xhtml" >
<head>
<title>歡迎來到JinJin的網頁</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="main">
<h1>嗨!大家好</h1>
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
</div>
</body>
</html>
</xmp>
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
---------------------------------------------------------------------------------------
<b>[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：<b>[color=#CC3300]第一個作業的資料夾為：hw01[/color]</b>
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:<a href=http://mepopedia.com/~web100a/hw01/hw01-學號>http://mepopedia.com/~web100a/hw01/hw01-100xxxxxxx</a>
2.切勿擅改別人的資料檔案，若經發現則以零分計</b>
---------------------------------------------------------------------------------------
<b>這禮拜請同學按照以上做法，
以自己設定的文字內容，字體大小、文字、背景顏色等等
做html與css的設定
至少兩個可以互相連結的html檔，其中首頁命名為index.html，
以及一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內
並請回覆本篇文章
1.作業網址
2.有無遇到的問題，製作作業的時間
完全達成要求即有100分</b>
Changed By: mepoadm
Change Date: September 13, 2011 09:52PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 09:52PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 13, 2011 08:53PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 08:53PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 13, 2011 08:53PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 08:53PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 13, 2011 08:52PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 08:52PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: mepoadm
Change Date: September 13, 2011 01:20AM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 13, 2011 01:20AM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 12, 2011 10:14PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 12, 2011 10:14PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 12, 2011 10:13PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 12, 2011 10:13PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 12, 2011 10:11PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 12, 2011 10:11PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 12, 2011 07:27PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 12, 2011 07:27PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 12, 2011 07:26PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 12, 2011 07:26PM
[作業01] 以html與css與CSS完成第一個網頁
Changed By: JinJin
Change Date: September 12, 2011 05:55PM
[作業01] 以html與css與CSS完成第一個網頁
Change Date: September 12, 2011 05:55PM
[作業01] 以html與css與CSS完成第一個網頁
Original Message
作者: JinJinDate: September 12, 2011 05:54PM
[作業01] 以html與css與CSS完成第一個網頁
前言：
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
[color=#990000]建議需先安裝的軟體[/color]
---------------------------------------------------------------------------------------
[color=#0033CC]FileZilla[/color] 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
好用的免費記事本軟體
[color=#990000]Notepad++[/color]官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: [color=#0033CC]FireBug[/color]---------------------------------------------------------------------------------------
[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-學號
2.切勿擅改別人的資料檔案，若經發現則以零分計
，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
[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/
---------------------------------------------------------------------------------------
其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力
[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<br />
<html><br />
<head><br />
<title><br />
</title><br />
</head><br />
<body><br />
您所要在瀏覽器顯示的內容<br />
</body><br />
</html><br />
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則：[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]
--------------------------------------------
HTML的最基本結構
<html><br />
<head><br />
<title><br />
</title><br />
</head><br />
<body><br />
您所要在瀏覽器顯示的內容<br />
</body><br />
</html><br />
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則：[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
<h1> 大標題 </h1>
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]
<h1>嗨!大家好</h1><br />
<p<h1 style="color:red;">嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</body>
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 [color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]
<html><br />
<head><br />
<title>歡迎來到JinJin的網頁</title><br />
</head><br />
<body><br />
<h1 style="color:red;">嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</body><br />
</html>
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
e to my website!!!
5.接著我們[c待續....
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。o
在抬頭的部份中，有另一組標籤
你可能會發現，為什麼沒提到這一組標籤，因為這一組標籤是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網頁的格式啦！通常都包在網頁的最上下兩端，將所有的原始碼都包起來。lor=#006600]另存新檔為: about.html，製作第二個頁面[/color]，新增如下文字:
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! 想要再多學一點嗎?......</p>
接著加入超連結語法 a ，如下：
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a>想要<xmp><br />
<html><br />
<head><br />
<tit font size="10px"<br />
}<br />
<br />
或<br />
h1{<br />
color:#AC5C52;<br />
font-size:12px;<br />
}<br />
待續....
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。l(3).接著在新的style.css檔案裡鍵入
<br />
h1{<br />
color:red;<br />
}<br />
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm
也可以改變字體大小，於style.css設定如下
<br />
h1{<br />
color:#AC5C52;<br />
font-size:12px;<br />
}<br />
待續....
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。
歡迎來到JinJin的網頁
(3).接著在新的style.css檔案裡鍵入
<br />
h1{<br />
color:red;<br />
}<br />
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
<br />
h1{<br />
color:#AC5C52;<br />
font-size:12px;<br />
}<br />
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
<html><br />
<head><br />
<title>歡迎來到JinJin的網頁</title><br />
<link rel="stylesheet" href="style.css" media="screen" /><br />
</head><br />
<body><br />
<div id="main"><br />
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p><br />
</div><br />
</body><br />
</html><br />
style.css
<br />
h1{<br />
color:#AC5C52;<br />
font-size:16px;<br />
}<br />
<br />
#main{ /*div id前面要加上#*/<br />
width:500px; /*寬度*/<br />
margin:0 auto; /*置中語法*/<br />
background-color:#eee; /*背景色*/<br />
padding:10px; /*div內部距離*/<br />
}<br />
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
歡迎來到JinJin的網頁
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。e>歡迎來到JinJin的網頁
多學一點嗎?......
拉入Firefox預覽效果
6.要出現 color:red;
}
[co
lor=#006600]連結效果[/color]還要加入以下語法:
index.html
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
about.html
<h1>嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="index.html">回到首頁</a> </p>
即可以呈<br />
h1{<br />
現互相連結的效果<br />
重整Firefox預覽效果<br />
<br />
7.如果想要在標題字增加不同的視覺效果，如改變顏色<br />
就要開始進行簡單的CSS設定<br />
我們可以先直接<b>[color=#006600]在h1中直接加入style的語法[/color]</b><br />
<br />
如<br />
<br />
<xmp><h1 style="color:red;">嗨!大家好</h1><br />
<p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p>
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：歡迎來到JinJin的網頁
基本的網頁是由html與css所組成
希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家這一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!
Let's go!!!大家一起加油吧!!!!
===========================================
[color=#990000]建議需先安裝的軟體[/color]
---------------------------------------------------------------------------------------
[color=#0033CC]FileZilla[/color] 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/
---------------------------------------------------------------------------------------
好用的免費記事本軟體
[color=#990000]Notepad++[/color]官方網頁：http://notepad-plus-plus.org/
---------------------------------------------------------------------------------------
FireFox火狐瀏覽器 http://moztw.org/
超好用檢視網頁語法插件: [color=#0033CC]FireBug[/color]---------------------------------------------------------------------------------------
[color=#CC0066]繳交作業的方式：[/color]
1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-學號
2.切勿擅改別人的資料檔案，若經發現則以零分計
，五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
在FireFox裡的附加元件裡搜尋 FireBug 下載安裝即可
---------------------------------------------------------------------------------------
[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/
---------------------------------------------------------------------------------------
其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力
[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
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則：[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]
--------------------------------------------
HTML的最基本結構
---------------------------------------------------------------------------------------
[color=#CC0000]網頁所有檔案命名原則：[/color]
1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )
---------------------------------------------------------------------------------------
[color=#660099]作業一的步驟與要求：[/color]
請自行以自己的內容，完成以下需求
1.於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)
2.儲存為index.html於桌面，可直接將檔案拉入Firefox，觀看預覽效果
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
大標題
儲存後，一樣於Firefox重整觀看效果
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]
重整之後，看起來沒甚麼不同
9.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 [color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]
10.接著我們開一個新的文件檔，將之命名為style.css
沒錯，CSS要登場了
甚麼是CSS呢?
e to my website!!!
嗨!大家好
welcome to my website!!!
5.接著我們[c待續....
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。o
在抬頭的部份中，有另一組標籤
你可能會發現，為什麼沒提到這一組標籤，因為這一組標籤是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網頁的格式啦！通常都包在網頁的最上下兩端，將所有的原始碼都包起來。lor=#006600]另存新檔為: about.html，製作第二個頁面[/color]，新增如下文字:
接著加入超連結語法 a ，如下：
待續....
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。l(3).接著在新的style.css檔案裡鍵入
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Adobe Kuler: http://kuler.adobe.com/
MyChat 調色盤 http://mychat.to/pub_java/selcolor.htm
也可以改變字體大小，於style.css設定如下
待續....
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。
嗨!大家好
welcome to my website!!! 想要再多學一點嗎?......
(3).接著在新的style.css檔案裡鍵入
接著重整FireFox會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?
11.接著，可以自己改變顏色，可參考:
網頁色碼選擇器: 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
也可以改變字體大小，於style.css設定如下
重整FireFox看效果
12.接著於文字的外層包上一層div
[color=#669900]補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。
被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]
index.html
style.css
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可
==========================================================
補充:
標籤說明:網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。
簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的以及。e>歡迎來到JinJin的網頁
嗨!大家好
welcome to my website!!! 想要再多學一點嗎?......
多學一點嗎?......
拉入Firefox預覽效果
6.要出現 color:red;
}
[co
lor=#006600]連結效果[/color]還要加入以下語法:
index.html
about.html
即可以呈
重整預覽，index的標題則會出現紅色的字，可是about則還是黑色
8.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：