HTML + Dreamweaver 學術課程. 甚麼是 HTML ？ HTML 全名是 Hyper Text Markup Language ﹐ 是電腦語言的一種。這種電腦語言是可透過瀏覽軟件 (Browser - Internet Explorer, Netscape) 翻譯出來﹐翻出來的就是我們看到的.

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="http://personal.ie.cuhk.edu.hk/~iesoc/"> 訊息工程學系網頁。記著要在 URL 前加 “http://” 。內部連結 (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:#012345  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:#012345  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

HTML + Dreamweaver 學術課程. 甚麼是 HTML ？ HTML 全名是 Hyper Text Markup Language ﹐ 是電腦語言的一種。這種電腦語言是可透過瀏覽軟件 (Browser - Internet Explorer, Netscape) 翻譯出來﹐翻出來的就是我們看到的.

Liknende presentasjoner

Liknende presentasjoner

Om prosjektet

Tilbakemelding

Logg inn

Logg deg på via sosiale nettverk:

HTML + Dreamweaver 學術 課程. 甚麼是 HTML ？ HTML 全名是 Hyper Text Markup Language ﹐ 是電腦語言的一種。這種電腦語言是可透過瀏 覽軟件 (Browser - Internet Explorer, Netscape) 翻譯出來﹐翻出來的就是我們看到的.

Liknende presentasjoner

Liknende presentasjoner

Om prosjektet

Tilbakemelding

HTML + Dreamweaver 學術課程. 甚麼是 HTML ？ HTML 全名是 Hyper Text Markup Language ﹐ 是電腦語言的一種。這種電腦語言是可透過瀏覽軟件 (Browser - Internet Explorer, Netscape) 翻譯出來﹐翻出來的就是我們看到的.