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

Advanced

Change History

Message: [作業01] 以HTML與CSS完成第一個網頁

Changed By: mepoadm
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
CSS教程(簡體)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>

嗨!大家好

welcome to my website!!!



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分
Changed By: JinJin
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
CSS教程(簡體)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完成第一個網頁
前言:

基本的網頁是由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
CSS教程(簡體)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完成第一個網頁
前言:

基本的網頁是由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
CSS教程(簡體)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完成第一個網頁
前言:

基本的網頁是由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
CSS教程(簡體)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完成第一個網頁
前言:

基本的網頁是由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
CSS教程(簡體)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完成第一個網頁
前言:

基本的網頁是由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
CSS教程(簡體)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完成第一個網頁
Changed By: JinJin
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完成第一個網頁
Changed By: JinJin
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完成第一個網頁
Changed By: JinJin
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完成第一個網頁
Changed By: JinJin
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完成第一個網頁
Changed By: JinJin
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完成第一個網頁

Original Message

作者: JinJin
Date: 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!!!


嗨!大家好

welcome 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的網頁



嗨!大家好


welcome to my website!!! 想要再多學一點嗎?......






(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的網頁




嗨!大家好


welcome to my website!!! 想要再多學一點嗎?......






==========================================================

補充:
標籤說明:網頁其實就是一堆標籤(所謂標籤就是指被<>包起來的語法)集合起來的,透過瀏覽器的消化整理,就便成了美侖美奐的網頁了。

簡單而言,通常一份完整的網頁包含了二個部份:標頭(HEAD)、文件主體(BODY)。也就是在上面所看到的以及。e>歡迎來到JinJin的網頁



嗨!大家好


welcome to my website!!! 想要再多學一點嗎?......



多學一點嗎?......



拉入Firefox預覽效果

6.要出現 color:red;
}
[co

welcome to my website!!! 回到首頁


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的網頁




嗨!大家好


welcome to my website!!! 想要再多學一點嗎?......







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 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼,一般會有,直接貼上即可

<!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)。也就是在上面所看到的以及。#main{ /*div id前面要加上#*/
width:500px; /*寬度*/
margin:0 auto; /*置中語法*/
background-color:#eee; /*背景色*/
padding:10px; /*div內部距離*/
}


重整會發現在新版的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)。也就是在上面所看到的以及。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]

[color=#669900]CSS 是

嗨!大家好


welcome to my website!!! 想要再多學一點嗎?......







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 /> CSS 並不是一種程式設計語言,而是用於網頁排版的標記性語言。<br /> 它可以將 html語言功能加以擴展,讓您的網頁更有獨特的風格。[/color]<br /> <br /> (1).首先先在index.htm<xmp><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br /> title底下打入如下語法(這比較難背,可以直接貼上):<br /> <xmp><link rel="styleshe" href="style.css" media="scr<link een" />

(2).把index.html裡h1後的style設定剪下,預覽一下,紅色不見了
<html><br /> <head><br /> <title>歡迎來到JinJi網頁</title><br /> <lin<p>wk rel="stylesheet" href="style.css" media="screen" /><br /> </head><br /> <body><br /> <h</p><br /> </div><br /> 1>嗨!大家好</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 調色盤 htt這禮拜請同學按照以上做法,
以自己設定的文字內容,字體大小、文字、背景顏色等等
做html與css的設定

至少兩個可以互相連結的html檔,一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址

2.有無遇到的問題,製作作業的時間

完全達成要求即有100分p://mychat.to/pub_java/selcolor.htm

也可以改變字體大小,於style.css至少兩個可以互相連結的html檔,一個命名為style.css的css樣式檔
存放在hw01-學號的資夾內

並請回覆本篇文章

1.作業網址

2.有無遇到的問題,製作作業的時間

完全達成要求即有100分設定如下

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!這個作業的網址則為:http://mepopedia.com/~web100a/hw01/hw01-學號<br /> <br /> 2.切勿擅改別人的資料檔案,若經發現則以零分計</b><br /> <br /> ---------------------------------------------------------------------------------------<br /> <br /> <b>這禮拜請同學按照以上做法,<br /> 以自己設定的文字內容,字體大小、文字、背景顏色等等<br /> 做html與css的設定<br /> <br /> 至少兩個可以互相連結的html檔,其中首頁命名為index.html,<br /> 以及一個命名為style.css的css樣式檔<br /> !! <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 />

重整會發現在新版的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 /> Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」<br /> CSS 的特色:<br /> (1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...<br /> (2)它能只修正一個 CSS 文件,便可同時更新眾多的網頁版面外觀及格式。<br /> (3)它可以使 html 的文件內碼更精簡,縮小檔案下載的速度。<br /> (4)適用於各種作業平台。。[/color][/color]<br /> <br /> (1).首先先在index.html的title底下打入如下語法(這比較難背,可以直接貼上):<br /> <xmp><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 />

重整會發現在新版的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]

(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 />

重整會發現在新版的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 /> <title>歡迎來到JinJin的網頁</title><br /> </head><br /> <body><br /> <h1 styl(1).它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...<br /> (2)它能只修正一個 CSS 文件,便可同時更新眾多的網頁版面外觀及格式。<br /> (3)它可以使 html 的文件內碼更精簡,縮小檔案下載的速度。<br /> (4)適用於各種作業平台。</b>[/color]<br /> <br /> (1).首先先在index.html的title底下打入如下語法(這比較難背,可以直接貼上):<br /> <xmp><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 />

重整會發現在新版的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 />
or:red;">嗨!大家好

welcome to my website!!! 想要再多學一點嗎?......





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 />

重整會發現在新版的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分
}

body{
background-color:#004EA0; /*body的背景色*/
margin:0px; /*貼緊頂部底部以及左右*/
}


重整會發現在新版的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分