HTML + Dreamweaver 學術 課程

甚麼是 HTML ？ HTML 全名是 Hyper Text Markup Language ﹐ 是電腦語言的一種。這種電腦語言是可透過瀏 覽軟件 (Browser - Internet Explorer, Netscape) 翻譯出來﹐翻出來的就是我們看到的 網頁了。 HTML 是可以用一些簡單的文字編輯 器編寫的﹐如記事簿 (Notepad) 和小作家 (WordPad) 等。我們只須在文字編輯器編寫好 後﹐在存檔時存成純文字檔﹐並用副檔名 (Extension).html 或.htm ﹐好像 index.html 或 index.htm ﹐不然﹐有些瀏覽器便不會把 HTML 翻 出來﹐而我們從瀏覽器中只會看到我們所編的 HTML 原始碼 (Source Code) 。

HTML 基本功 在 HTML 中﹐標籤 (Tags) 是用來控制整個網 頁的元素﹐例如文字﹐圖片等。 1. 對稱型 Tag 對稱型 Tag 呈前後包夾狀，它有起始標籤 與結束標籤 ，夾在這兩個 標籤中的物件，會依該標籤的定義呈現效 果，例︰ 與 。 2. 單一型 Tag 非包夾型 Tag ，它會在出現當下便直接定義 該位置的效果，例︰ 與 。

必備的三組 Tag ： 1. 宣告以下的文件是 HTML 碼； 2. 定義適用於整份文件的程式碼； 3. 定義文件的內容。

Hyper Text Markup Language (HTML) Prepared by 包含在 中的便是最重要內文了﹐大部份網頁的元 其﹐聲音等。 :HTML 語言開始的宣佈 : 頁首的宣佈 包含在 之內 其他有關網頁的資料﹐及 JAVASCRIPT 都可在 之 內 在 之內只有 之內的內容是用者 可見的 : 網頁的標題 : 內文的宣怖 內的屬性 : BGCOLOR="xxxxxx": 網頁的背景顏色﹐ xxxxxx 是 RGB 碼 BACKGROUND=" 檔名.jpg or.gif": 網頁的背景圖案 TEXT="xxxxxx": 網頁內文文字顏色 LINK="xxxxxx": 網頁內超連結顏色 ALINK="xxxxxx": 滑鼠按下超連結不放時的顏色 VLINK="xxxxxx": 到訪過的超連結的顏色

Example 1 本頁的標題 這是放置內容的地方 這是我第一個網頁。

文字格式 :xxxxxx 是設定整頁文字顏色﹐ xxxxxx 可以是 RGB 碼 :n 是設定整頁文字的大小﹐原設值是 3 ﹐數字越大字 體越大 : 文字字形設定 內的屬性 : FACE="xxxxxx": 文字字款設定﹐如 Arial, Times SIZE="n": 文字大小設定﹐ n 原設值是 3 ﹐數字越大字體越大 n 也可是 +1 ﹐ +2 ﹐ -1 ﹐ -2 等﹐這是基於原設值 3 來加減字體的大小 COLOR="xxxxxx": 文字顏色設定﹐ xxxxxx 的數值請參顏色表 : 文字粗體設定 : 文字斜體設定 : 文字加底線設定 : 文字中間加橫線設定 : 文字上體字設定 : 文字下體字設定 : 閃爍的文字設定﹝ Netscape 才看得到﹞ : 網頁標題設定﹐ n 是數字﹐當 n 是 1 時字體最大

文字排版 : 文章排中 : 換到下一行 : 隔一行 的屬性 : ALIGN="LEFT": 文章排左 ALIGN="CENTER": 文章排中 ALIGN="RIGHT": 文章排右 : 不換行 : 文字向左右排縮 : 根據 HTML 原始檔內的排版 : 橫分隔線 的屬性 : SIZE="n": n 是高度﹐單位是 pixel WIDTH="w": w 是闊度﹐單位是 pixel ﹐也可以是比例 (%) ALIGN=" 方向 ": 方向可以是 LEFT, CENTER, RIGHT NOSHADE: 不要陰影

圖片處理 <IMG SRC=" 圖片檔位置與名字.jpg 或 gif" WIDTH="w " HEIGHT="h" BORDER="b" VSPACE="v" HSPACE="h" ALIGN=" 方向 "> 標籤的屬性： SRC=" 圖片檔位置與名字.jpg 或 gif": 設定圖片檔的來源 WIDTH="w": 圖片的闊度設定﹐ w 是 pixel HEIGHT="h": 圖片的高度設定﹐ h 是 pixel BORDER="b": 圖片的邊界線設定﹐ b 是 pixel VSPACE="v": 圖片的上下空白位設定﹐ v 是 pixel HSPACE="h": 圖片的左右空白位設定﹐ h 是 pixel ALIGN=" 方向 ": 圖片繞文方向設定﹐方向可以是 LEFT 或 RIGHT ALT=" 取代圖片的文字 ": 取代文字設定 標籤是沒有宣佈結束的標籤

超連結 本網站連結 (Local Site Link) – Relative Path 如想在 page1.html 連結到在同一個目錄中的 page2.html ﹐便在 page1.html 中寫 。如要連結 到子目錄 demo 中的 demo.html ﹐便要寫 。如要連結到 上一個目錄 preview 中的 index.html ﹐便要寫 <A HREF="../preview/index.html"> 。

超連結 其他網站連結 (Other Sites Link) – Absolute Path 如要連結到其他網站﹐便要在 HREF 屬性中用完整網址 (Full Path) 了。例如連結到 IE Soc 網頁﹐要這樣寫： <A HREF=" 訊息工程學 系 網頁 。記著要在 URL 前加 “ 。 內部連結 (Internal Link) 要做到內部連結﹐首先要在網頁中設下些內部連結點 (Anchors) 。設定內部連結點用標籤 。連結到內部連結點用 。 如我巳在頁底註腳加了內部連結點 ﹐那麼 連結到那裡便這樣寫 到頁底註腳 。 如想連結到其他網頁的內部連結點﹐便要這樣寫 。

超連結 非網頁性連結 (Non-HTML pages Link) 非網頁性連結如電郵地址和新聞組﹐分別用 和 。

表格 表格 (Table) 在網頁中佔了一個很重要的地位。大部份 的網頁都有著一些隱形表格﹐用來協助排版的。隱形表 格就是個沒有邊界線 (Border) 的表格。如果用 隱形表格來分割網頁的各部份﹐然後再加上內容﹐便可 達到理想的排版效果。還有用表格顏色配合圖片﹐便可 以造出不同的效果。 設定表格的一對標籤是 ﹐其中的 BORDER 屬性設定為 0 時﹐表格的邊界線便沒有了﹐這 便是隱形表格。設定表格的列 (Row) 是用 標籤﹐個別儲存格 (Cell) 是用 標籤來設定。

Example 2 第一行第一個儲存格 第一行第二個儲 存格 第二行第一個儲存格 第二行第二個儲 存格 第一行第一個儲存格第一行第二個儲存格 第二行第一個儲存格第二行第二個儲存格

表格 要設定表格的顏色﹐只須在 標籤內加 入 BGCOLOR=“#RGB 碼 ” 屬性便可。要設定 整列 (Row) 和個別儲存格 (Cell) 的顏色﹐分別在 和 內加入 BGCOLOR=“#RGB 碼 ” 屬性。 如想儲存格內的文字或圖片排中、排左或排右﹐ 可以在 內加入 ALIGN=" 方向 " 屬性。甚至 是想排上、排中或排下﹐可以加入 VALIGN=" 方 向 " 屬性。

甚麼是 Cascading Style Sheet (CSS) ？ 中文名稱︰「層遞樣式表」 特色︰  排版效果  定義樣式  減少程式碼  再用程式碼 缺點︰  瀏覽器支援程度

如何使用 CSS 直接定義  在原有 HTML 標籤內加入 “style” 屬性   E.g.

如何使用 CSS 在 前定義 1. 依附標籤 Font { css style definition }  只要使用 便會套用這個 definition  一次過定義多組標籤 的 style: Font, h1, h2 { background-color:red;font-size:20px }

如何使用 CSS 在 前定義 2. 先定義 class 名稱再呼叫.classname { definition }

如何使用 CSS 在 前定義 3. 先給名稱再呼叫 #title { definition }

如何使用 CSS 外掛  將 css 的定義儲存於一個個別的檔案內  使用這個標籤︰ In filename.css:   body { font-size:8pt; color:red }   可以將 css 定義獨立於 html code  多份 html 網頁共用同一組 css 定義

CSS 屬性 — 背景設定 background-color ( 背景顏色 )  任何完件可有自己的背景顏色  Background-color:#  Background-color:red  Background-color:rgb(255,255,255)  如果沒有指定任何顏色，則預設值是透明。  Example: 紅色字

CSS 屬性 — 背景設定 Background-image ( 背景圖片 )  任何完件皆可有自己的背景圖片  Background-image:”/images/bg.gif” Background-attachment ( 背景圖片的捲動 )  Background-attachment:fixed ( 固定不動 )  Background-attachemnt:scroll

CSS 屬性 — 背景設定 Background-repeat ( 重複背景 )  Background-repeat:repeat ( 全部填滿 )  Background-repeat:repeat-x ( 水平填滿 )  Background-repeat:repeat-y ( 垂直填滿 )  Background-repeat:no-repeat ( 不填滿 ) Background-position ( 背景位置 )  Background-position:x% y%  Background-position: 20px 50px  Background-position: right top ( or x : left center y : center bottom )  以左上角為 reference

CSS 屬性 — 背景設定 Background (background 設定總覽 )  {background-color:red;background-repeat:repeat- x}  {background: red repeat-x}  每種屬性以一個空格來分隔

CSS 屬性 — 文字設定 Font-family ( 字型 )  Font-family:”Tahoma”,”Verdana”,”Arial”,”System”;  可以一次選擇多種字型，以防網友的電腦沒有某一 種字型，放得越前越優先 Font-size ( 文字大小 )  Font-size:20px ( 可以用 pt, cm)  Font-size:small (xx-small, x-small, small, medium, large, x-large, xx-large)  Font-size:300% ( 預設值的三倍大小 )

CSS 屬性 — 文字設定 Font-style ( 字型樣式 )  Font-style:italic ( 斜體 )( 可以設定為 normal) Font-weight ( 文字粗體份量 )  Font-weight:700 (100~900, 700 = bold )  Font-weight:bold (normal, bold)  Font-weight:bolder (bolder, lighter) ( 較預設值粗或 幼細一級 )

CSS 屬性 — 文字設定 Text-indent ( 首行縮排 )  Text-indent:15pt  Text-indent:15% Letter-spacing ( 字母距離 )  Letter-spacing:3pt ( pt, px, cm, normal ) Word-spacing ( 文字字距 )  Word-spacing:5pt ( pt, px, cm, normal ) Line-height ( 行距 )  Line-height:10pt  如果設定了行距，盡量不要用 來斷行，用

CSS 屬性 — 文字設定 Text-decoration ( 文字修飾 )  Text-decoration:none  Text-decoration:underline ( 加底線 )  Text-decoration:overline ( 加頂線 )  Text-decoration:linethrough ( 加刪除線 ) Text-transform ( 文字轉換 )  Text-transform:none  Text-transform:capitalize ( 第一個字轉成大寫 )  Text-transform:uppercase ( 全部大寫 )  Text-transform:lowercase ( 全部小寫 )

CSS 屬性 — 文字設定 Text-align ( 文字對齊 )  Text-align:center ( 置中對齊 )  Text-align:left ( 靠左對齊 )  Text-align:right ( 靠右對齊 )  Text-align:justify ( 頭尾對齊 ) Color ( 文字顏色 )  Color:#  Color:red  Color:rgb(255,255,255) ( 預設值為黑色 )

CSS 屬性 — 文字設定 Margin-left ( 向左縮排 ) Margin-right ( 向右縮排 )  Margin-left:20pt  Margin-right:10%

CSS 屬性 — 區塊設定 定義層級 Position ( 位置 )  Position:absolute (ref. point: 左上角 )  Position:relative (ref. point: 上一個區塊的左上角 ) Top ( 頂端 )  Top:100px (ref.point: 上一個區塊的左上角, 可以為 負數, 向上移 ) Left ( 左邊 )  Left:100px (ref. point: 上一個區塊的左邊，向右為 正，向左為負 )

CSS 屬性 — 文字設定 Visibility ( 可見 )  Visibility:visible  Visibility:hidden  加上 javascript 來使用，可達極佳效果 Z-index ( 層數 )  Z-index:20 ( 數字越大，區塊越高 ) Margin ( 邊界 )  設定四邊與外界之間預留空白的大小  Margin:3px 4px 5px 6px ( 上右下左, 順時針方向 )

CSS 屬性 — 文字設定 Margin-top Margin-right Margin-bottom Margin-left  將 margin 分開寫  Margin-top:3px  Margin-right:4px  Margin-bottom:5px  Margin-left:6px

CSS 屬性 — 文字設定 Padding ( 區塊留白 )  Padding:3px 4px 5px 6px ( 上右下左，順時針方向 )  分開寫 : Padding-top:3px Padding-right:4px padding-bottom:5px Padding-left:6px

CSS 屬性 — 文字設定 Width ( 寬度 )  Width:20px ( px, %, auto  瀏覽器自動調整 ) Height ( 高度 )  Height:20px ( 同上 )

CSS 屬性 — 框線設定 Border-width ( 框線寬度 )  Border-width:5px (thin, medium, thick)  分開寫︰  Border-top-width:5px  Border-bottom-width:thin  Border-right-width:10px  Border-left-width:medium

CSS 屬性 — 框線設定 Border-color ( 框線顏色 )  Border-color:#ff0000  Border-color:red  Border-color:rgb(255,0,0)  分開寫︰  Border-top-color  Border-bottom-color  Border-left-color  Border-right-color

CSS 屬性 — 框線設定 Border-style ( 框線樣式 )  Border-style:none (none, dotted, dashed, solid, double, groove, ridge, insert, outset)  分開寫︰ Border-top-style Border-bottom-style Border-left-style Border-right-style

CSS 屬性 — 連結設定 Text-decoration ( 底線樣式 )  Text-decoration:none (underline, none, overline 上 下線 ) Cursor ( 滑鼠樣式 )  Cursor:crosshair  Auto, crosshair, default, hand, move, text, wait, help

CSS 屬性 — 連結設定 使用方法  普通超連結 A:link{ cursor:auto;text-decoration:underline}  瀏覽過的超連結 A:visited{ … }  滑鼠移至上方時的狀態 A:hover{ … }  被點擊的超連結 A:active{ … }

CSS 之多重定義 何謂 cascading? 層遞︰將屬性一層一層地添加.class1{ font-color: red}.class2{ font-family:verdana } text in red text in red and verdana text in red

CSS 之多重定義, 之使用, 同樣可以使用 class, id 兩種屬 性 會開啟新一段， 會連接前文

CSS 之多重定義 Class 與 id 之分別 Class 一般用於標籤之屬性設定 Id 一般用於層級宣告上

Dreamweaver 教學 加上備註 Step 1 ︰選好要插入備註的位置，按下工具列上的 comment 鈕

Step 2 ︰於對話盒內輸入你的備註

Step 3 ︰按 OK ，即可插入備註

分割視窗 Step 1 ︰點選工具列上的分割視窗鈕

Step 2 ︰於 properties 內輸入網頁名稱，大功告成

超連結製作（連至網址）

超連結製作（連至檔案）

插入圖片 先按上紅圈的圖像鈕，再於下紅圈的位置加入圖像路徑即可

編輯模式切換 Code mode ︰主要用作編輯 網頁的 HTML 原始碼之用 Design mode ︰用作製作網頁 外觀

Split mode ︰集前者兩家之大成

插入表格 Step 1 ︰點選右圈的表格鈕

Step 2 ︰進入表格內容，按指示修改

Step 3 ︰一組表格就此 完成 Step 4 ︰除此以外，還 可以作後期加工，包括 加減列 / 欄

文字輸入技巧 <” & 等符號，於 HTML 檔內作特別符 號之用，是不會顯示 出來的。如果我們想 讓它們出現那該如何 呢？ 方法︰ 用 " 代替 ” 用 < 代替 用 & 代替 &

在 Dreamweaver 中加入 CSS 1. 在 design panel 中選 css style, 點擊 第二個按鈕 2. 選擇第二個 radio button (TAG) 直接更改 tag 的屬性

在 Dreamweaver 中加入 CSS 直接更改 tag 的屬性 3. 選擇想要更改的 tag 4. 更改屬性, 然後按 apply, ok

在 Dreamweaver 中加入 CSS 使用 class 應用樣式 1. 選擇 class, 並給該 class 命名 2. 設定屬性, 後按 apply, ok

在 Dreamweaver 中加入 CSS 使用 class 應用樣式 3. Highlight 想要使用 css 的元件 4. 在 tag panel 中選 attribute 分頁 並更改屬性 class 的值

在 Dreamweaver 中加入 CSS 使用 id 應用樣式 1. 選擇第三個 radio button, advanced 並給該 id 命名 2. 設定 id 之屬性, 後按 apply, ok

在 Dreamweaver 中加入 CSS 使用 id 應用樣式 3. Highlight 想要應用 id 的元件, 後在 tag panel 中選 attribute 分頁, 並更改 屬性 id 的值

在 Dreamweaver 中加入 CSS 輸出 css 樣式設定 1. 在 design panel 的 css 分頁中 right- click, 選擇 ”export” 2. 選擇 css file 的位置, 後按 save

在 Dreamweaver 中加入 CSS 外掛 css 樣式設定 1. 在 design panel 的 css 分頁中按第一 個按鈕 2. 選擇該 css 定義檔的位置, 後按 ok

在 Dreamweaver 中加入 CSS 更改 css 樣式設定 1. 在 design panel 中選 css 分頁 2. 按第三個按鈕 3. 後更改屬性 4. 按 apply, ok