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

Advanced

Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

100-2《中國》竹進視傳一A-網頁設計 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計  跨瀏覽器相容性網頁設計  100-1《中國》北視傳一A-網頁設計  100-1《中國》北視傳一B-網頁設計  100-2《中國》竹進視傳一A-網頁設計  101-1《中國》竹視傳一C-網頁設計
  1. 1. 前言
  2. 2. HTML的最基本結構與練習
  3. 2.1 作業一的步驟與要求：
  4. 3. 教學影片
  5. 3.1 以 HTML 與 CSS 完成第一個網頁-1
  6. 3.2 以 HTML 與 CSS 完成第一個網頁-2
  7. 3.3 以 HTML 與 CSS 完成第一個網頁-3
  8. 3.4 以 HTML 與 CSS 完成第一個網頁-4
[講義01] 以 HTML 與 CSS 完成第一個網頁

1. 前言



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

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

希望大家在進入Dreamweaver之前，能夠先對html與css有基礎的概念
所以我們的第一個網頁先由單純的html與css出發
希望大家第一個星期回去能反覆練習，自己寫出html及css語法的簡單網頁
這樣未來在做網頁的時候，能更如虎添翼，舉一反三了!

Let's go!!!大家一起加油吧!!!!

[hr]

[color=#990000]推薦很棒的CSS網站[/color]

[hr]

[color=#CC6600]CSS-TRICKS[/color] http://css-tricks.com/

HTML & CSS基礎教學影音(必看，雖然是英文，但若耐著性看完會有非常多的收穫喔!)
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

[hr]

其他HTML & CSS相關網站
有空可多多研讀，增加自己的功力

[color=#663300]HTML[/color]
1.HTML教學導覽 http://www.powmo.com/
2.HTML 簡介與應用 http://neural.cs.nthu.edu.tw/jang/books/html/
3.HTML Tutorial http://www.w3schools.com/html/
4.HTML教學 http://www.pcnet.idv.tw/pcnet/html/html.htm
5.HTML教學示範 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
6.HTML 語言簡介 http://203.71.199.2/HTML/%E4%BD%95%E8%AC%82HTML.htm
7.HTML教學 http://m7.dfps.tp.edu.tw/chen/main5/ahtml/01.asp

[color=#663300]CSS[/color]
CSS語法教學攻略篇　http://andyliudesign.idv.tw/31
CSS 語法教學 http://css.1keydata.com/tw/
語法 | 基本的css語法縮寫　http://blog.mukispace.com/css-shorthand/
CSS 樣式表簡介　http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm
ＣＳＳ教程（簡體）http://www.dreamdu.com/css/

[hr]

2. HTML的最基本結構與練習



HTML的架構是由<>與</>組成 裡面還有數個由<>與</>組成的區塊 只要概念清楚，相信接下來會讓大家更容易對網頁架構有進一步的了解
<html> <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容(被<body>與</body>包覆起來) </body> </html>
[hr]

[color=#CC0000]網頁所有檔案命名原則：[/color]

1.只能取半形的英文、數字、-(中線) 、_(底線)
2.絕對不能出現中文和全行字
3.index為首頁的內定命名(會自動判別為首頁)，依序為index.html index.php等
4.所以有網頁檔案必須儲存於某一網站專屬資料夾內，資料夾請以學號命名，每一個作業請依序以:
hw01-學號，為資料夾名稱，若有圖檔，請於網站資料夾內另開圖檔專屬資料夾( img 或 images )

[IMG]http://i.imgur.com/QqNZXFn.jpg[/IMG]

[hr]

1. 作業一的步驟與要求：


請自行以自己的內容，完成以下需求

1.先建立一以 hw01-學號 命名的資料夾，於記事本上打入第一行你要打的字(中英文皆可，如：WELCOME MYWEB!!!!)

[hr]
2.儲存為index.html於資料夾內，可直接將檔案拉入瀏覽器，觀看預覽效果

[hr]
3.如果想[color=#006600]把字體變得又大又粗，可以用<標題1>的語法[/color]，於字的前後加上
<h1> 大標題 </h1>

大標題


儲存後，一樣於Firefox重整觀看效果

[hr]
4.接下來，打入我們的[color=#006600]第二行文字，用以下p 語法來換行[/color]

<h1>嗨!大家好</h1> <p>welcome to my website!!!</p>

嗨!大家好

welcome to my website!!!

h1為標題屬性，本身具有換行屬性。
若想試試換行語法可以這樣做

<h1>嗨!大家好</h1> welcome to <p>my website!!!</p>

嗨!大家好

welcome to

my website!!!




[hr]
5.接著我們要在html網頁架構上，讓他更加的完整
首先加入body的語法
補充：BODY之間則為主要語法所在，也是網頁的主要呈現部分。(也就是網頁上看得到的部分）

<body> <h1>嗨!大家好</h1> <h1>嗨!大家好</h1> welcome to <p>my website!!! </p> </body>
重整之後，看起來沒甚麼不同


[hr]
6.接著再把html語法的架構寫的更完整
把最外層的html包進去，再加入於body之上，設定頂部head語法的部分，如下
其中 [color=#006600]tilte語法呈現的視網頁標題的部分，會出現在瀏覽器上，並便於搜尋[/color]

<html> <head> <title>歡迎來到JinJin的網頁</title> </head> <body> <h1>嗨!大家好</h1> welcome to <p>my website!!! .</p> </body> </html>
雖然預覽之後沒什麼差異，但是卻有了較基本的網頁結構。
網頁結構後完整之後，開始加入重要的超連結。


[hr]
7.接著我們[color=#006600]另存新檔為: about.html，一樣存放於資料夾內，製作第二個頁面[/color]，新增如下文字:

<h1>嗨!大家好</h1> welcome to <p>my website!!! </p>想要再多學一點嗎?......
接著加入超連結語法 a ，如下：

<h1>嗨!大家好</h1> welcome to <p>my website!!!</p> <a>想要再多學一點嗎?......</a>
拉入瀏覽器預覽效果


[hr]
8.要出現[color=#006600]連結效果[/color]還要加入以下語法:

index.html
<h1>嗨!大家好</h1> welcome to <p>my website!!!</p> <a href="about.html">想要再多學一點嗎?......</a>
about.html
<h1>嗨!大家好</h1> welcome to <p>my website!!!</p> <a href="index.html">回到首頁</a>
即可以呈現互相連結的效果
重整瀏覽器預覽效果



[hr]
9.接著我們開一個新的文件檔，將之命名為 style.css

沒錯，CSS要登場了
甚麼是CSS呢?

[color=#669900]CSS 是 Cascading Style Sheets 的縮寫, 我們中文稱為「串接樣式表」

CSS 的特色:
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化...
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。[/color]


[hr]
(1).首先先在index.html的title底下打入如下語法(這比較難背，可以直接貼上):
<link rel="stylesheet" href="style.css" media="screen" /> 這段語法的意思是：將style.css這個css樣式檔案與這個html檔案做連結，並產生效果。


[hr]
(2)再加入以下語法，此段意義讓網頁以utf-8編碼，避免產生中文亂碼現象。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


[hr]
(3).更完整的語法如下：
<html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </body> </html>
ps.把網站架構打得完整之後，同時修改about.html，再以另存新檔的方式，儲存about.html



[hr]
(4).接著在新的style.css檔案裡鍵入

h1{ color:red; }
接著重整瀏覽器會看到甚麼效果呢?在about打入一樣的設定，結果如何呢?



[hr]
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{ color:#AC5C52; font-size:12px; }
重整FireFox看效果


[hr]
12.接著在html檔案中，於文字的外層包上一層div

[color=#669900]補充說明：
被DIV或SPAN標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。

被DIV包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。
而被SPAN包住的物件則可以和大夥和樂融融的擺在一起，不會斷行，也不會自成一塊。可以視不同的狀況，使用不同的標籤。[/color]

index.html
<html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </div> </body> </html>
style.css
h1{ color:#AC5C52; font-size:16px; } #main{ /*div id前面要加上#*/ width:500px; /*寬度*/ margin:auto; /*置中語法*/ background-color:#eee; /*背景色*/ padding:10px; /*div內部距離*/ font-family: "微軟正黑體", Arial, Helvetica, sans-serif; font-size: 14px; /*字體大小*/ line-height: 2em; /*字體行間為兩個字距*/ color:#666; /*文字顏色設定*/ } body{ background-color:#004EA0; /*body的背景色*/ margin:0px; /*貼緊頂部底部以及左右*/ }
重整會發現在新版的FireFox以及Chrome是正常的居中，IE卻無法置中


[hr]
13.
關鍵在於DOCTYPE 的官方宣告
一定要放上去
可以從正常的網站鍵是原始碼，一般會有，直接貼上即可

<!DOCTYPE html> <html> <head> <title>歡迎來到JinJin的網頁</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="main"> <h1>嗨!大家好</h1> <p>welcome to my website!!! <a href="about.html">想要再多學一點嗎?......</a> </p> </div> </body> </html>
[hr]

補充:

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

簡單而言，通常一份完整的網頁包含了二個部份：標頭（HEAD）、文件主體（BODY）。也就是在上面所看到的＜HEAD＞＜/HEAD＞以及＜＜BODY＞＜/BODY＞。

[hr]

3. 教學影片


1. 以 HTML 與 CSS 完成第一個網頁-1


http://youtu.be/uglFBdOqbYY


[hr]

2. 以 HTML 與 CSS 完成第一個網頁-2


http://youtu.be/dqgT9rKh914


[hr]

3. 以 HTML 與 CSS 完成第一個網頁-3


http://youtu.be/u5QevKIdX3o


[hr]

4. 以 HTML 與 CSS 完成第一個網頁-4


http://youtu.be/YOJBeLyAtKM




Edited 8 time(s). Last edit at 09/17/2015 10:06AM by JinJin.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
小妹很台 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計
一開始甚麼都看不懂
只知道打開 dreamweaver 每次上課都是這樣的重複
後來知道說有影片可以看
回去複習時跟著影片做，終於了解不少!!!
還可以教同學順便複習
了解原來網頁是這樣子的程序~
(好複雜阿~~持續努力當中)
......遇到了很多問題 但還好有影片 還有老師的熱心教導:"))
剛一個小作業我就花了1~2天研究!!!
呼~還不錯玩拉!!謝謝老師
影視一A 高詩雅1045440001

推薦 / 評論　 分享到Facebook     回應文章 Quote
翕洗喜翕西 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計  網頁設計與語法(HTML/CSS)
一開始接觸到這個東西，我就想，我的天呀!這什麼?
實際去操作過後，發現只要熟悉特定指令，其實，要做出一個簡單的網頁其實並不難
不過很多東西都是第一次接觸DW、FZ，導致我常常都在問同樣的問題...哈哈
這個基本的作業就花了我好幾天的時間去基本搞懂它
影視1A-鄭翕中-1045440024

推薦 / 評論　 分享到Facebook     回應文章 Quote
loveelise1021 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計
1045445186 黃森宜 視傳2C
老師
我還是覺得哪裡怪怪的
麻煩幫我抓出錯誤
因為我弄很久 電腦又跑不動 所以一直當掉跟重做

推薦 / 評論　 分享到Facebook     回應文章 Quote
Attachments:
開啟 | 下載 - Index.html (1.1 KB)
開啟 | 下載 - about.html (1.1 KB)
開啟 | 下載 - style.css (306 bytes)
1055443126 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計  網頁設計與語法（HTML/CSS）
http://mepopedia.com/~css106-2c/hw01/hw01-1055443126
這是我第壹次接觸網頁設計這門課，還挺有趣的，但是學起來也不簡單嗷，我會努力學好的！
視傳2C-1055443126

推薦 / 評論　 分享到Facebook     回應文章 Quote
stelas0309 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計  1055445135李依軒
http://mepopedia.com/~css106-2c/hw01/hw01-1055445135
很有趣
視傳2C

推薦 / 評論　 分享到Facebook     回應文章 Quote
misoomisooo [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計  1055445081
http://mepopedia.com/~css106-2c/hw01/hw01-1055445081
謝謝老師~~~~

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445010 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計
http://mepopedia.com/~css106-2c/hw01/hw01-1055445010

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445086 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計  1055445131
http://mepopedia.com/~css106-2c/hw01/hw01-1055445131

推薦 / 評論　 分享到Facebook     回應文章 Quote
didi7777 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計
網頁設計

推薦 / 評論　 分享到Facebook     回應文章 Quote
1065445010 [ 站內寄信 / PM ]
Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

分類標籤: 100-2《中國》竹進視傳一A-網頁設計
1.網址:http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
2.設計概念與製作心得：
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic