HTML + Dreamweaver學術課程
Download
Report
Transcript HTML + Dreamweaver學術課程
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 呈前後包夾狀，它有起始標籤
<XX>與結束標籤</XX>，夾在這兩個
標籤中的物件，會依該標籤的定義呈現效
果，例︰<html>與</html>。
2. 單一型Tag
非包夾型Tag，它會在出現當下便直接定義
該位置的效果，例︰<br>與<p>。
必備的三組Tag：
1. <html></html>宣告以下的文件是HTML 碼；
2. <head></head>定義適用於整份文件的程式碼；
3. <body></body>定義文件的內容。
Hyper Text Markup Language (HTML) Prepared by
包含在<BODY></BODY>中的便是最重要內文了﹐大部份網頁的元
其﹐聲音等。
<HTML></HTML>:HTML 語言開始的宣佈
<HEAD></HEAD>:頁首的宣佈
<TITLE></TITLE>包含在<HEAD></HEAD>之內
其他有關網頁的資料﹐及JAVASCRIPT 都可在<HEAD></HEAD>之
內
在<HEAD></HEAD>之內只有<TITLE></TITLE>之內的內容是用者
可見的
<TITLE></TITLE>:網頁的標題
<BODY></BODY>:內文的宣怖
<BODY></BODY>內的屬性:
BGCOLOR="xxxxxx":網頁的背景顏色﹐xxxxxx 是RGB 碼
BACKGROUND="檔名.jpg or .gif":網頁的背景圖案
TEXT="xxxxxx":網頁內文文字顏色
LINK="xxxxxx":網頁內超連結顏色
ALINK="xxxxxx":滑鼠按下超連結不放時的顏色
VLINK="xxxxxx":到訪過的超連結的顏色
Example 1
<html>
<head>
<title>本頁的標題</title>
</head>
<body bgcolor="#ffffff" text="#0000ff">
<font size=+1>這是放置內容的地方</font>
<p>
<font size=+2 color="#00ff00">這是我第一個網頁。
</font>
</body>
</html>
文字格式
<BODY TEXT="xxxxxx">:xxxxxx 是設定整頁文字顏色﹐xxxxxx 可以是
RGB 碼
<BASEFONT SIZE="n">:n 是設定整頁文字的大小﹐原設值是3﹐數字越大
字體越大
<FONT></FONT>:文字字形設定
<FONT></FONT>內的屬性:
FACE="xxxxxx":文字字款設定﹐如Arial, Times
SIZE="n":文字大小設定﹐n 原設值是3﹐數字越大字體越大
n 也可是+1﹐+2﹐-1﹐-2 等﹐這是基於原設值3 來加減字體的大小
COLOR="xxxxxx":文字顏色設定﹐xxxxxx 的數值請參顏色表
<B></B>:文字粗體設定
<I></I>:文字斜體設定
<U></U>:文字加底線設定
<STRIKE></STRIKE>:文字中間加橫線設定
<SUP></SUP>:文字上體字設定
<SUB></SUB>:文字下體字設定
<BLINK></BLINK>:閃爍的文字設定﹝Netscape 才看得到﹞
<Hn></Hn>:網頁標題設定﹐n 是數字﹐當n 是1 時字體最大
文字排版
<CENTER></CENTER>:文章排中
<BR>:換到下一行
<P>:隔一行
<P></P>的屬性:
ALIGN="LEFT":文章排左
ALIGN="CENTER":文章排中
ALIGN="RIGHT":文章排右
<NOBR></NOBR>:不換行
<BLOCKQUOTE></BLOCKQUOTE>:文字向左右排縮
<PRE></PRE>:根據HTML 原始檔內的排版
<HR>:橫分隔線
<HR>的屬性:
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="方向">
<IMG>標籤的屬性：
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="取代圖片的文字":取代文字設定
<IMG>標籤是沒有宣佈結束的標籤
超連結
本網站連結(Local Site Link) – Relative Path
如想在page1.html 連結到在同一個目錄中的
page2.html﹐便在
page1.html 中寫<A HREF="page2.html">。如要連結
到子目錄demo
中的demo.html﹐便要寫<A
HREF="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/">訊息工程學
系
網頁</A>。記著要在URL 前加“http://”。
內部連結(Internal Link)
要做到內部連結﹐首先要在網頁中設下些內部連結點
(Anchors)。設定內部連結點用標籤<A NAME="連結點名稱
">。連結到內部連結點用<A HREF="#連結點名稱"></A>。
如我巳在頁底註腳加了內部連結點<A NAME="footer">﹐那
麼連結到那裡便這樣寫<A HREF="#footer">到頁底註腳</A>。
如想連結到其他網頁的內部連結點﹐便要這樣寫<A HREF="
檔名.html#連結點名稱">。
超連結
非網頁性連結(Non-HTML pages Link)
非網頁性連結如電郵地址和新聞組﹐分別用<A
HREF="mailto:電郵地址"></A>和<A
HREF="news:新聞組名稱"></A>。
表格
表格(Table)在網頁中佔了一個很重要的地位。大部份
的網頁都有著一些隱形表格﹐用來協助排版的。隱形
表格就是個沒有邊界線(Border)的表格。如果用
隱形表格來分割網頁的各部份﹐然後再加上內容﹐便
可達到理想的排版效果。還有用表格顏色配合圖片﹐
便可以造出不同的效果。
設定表格的一對標籤是<TABLE></TABLE>﹐其中的
BORDER 屬性設定為0 時﹐表格的邊界線便沒有
了﹐這便是隱形表格。設定表格的列(Row)是用
<TR></TR>標籤﹐個別儲存格(Cell)是用<TD></TD>
標籤來設定。
Example 2
<table border=1>
<tr><td>第一行第一個儲存格</td><td>第一行第二個儲
存格</td></tr>
<tr><td>第二行第一個儲存格</td><td>第二行第二個儲
存格</td></tr>
</table>
第一行第一個儲存格 第一行第二個儲存格
第二行第一個儲存格 第二行第二個儲存格
表格
要設定表格的顏色﹐只須在<TABLE>標籤內
加入BGCOLOR=“#RGB 碼”屬性便可。要設
定整列(Row)和個別儲存格(Cell)的顏色﹐分別
在<TR>和<TD>內加入BGCOLOR=“#RGB 碼”
屬性。
如想儲存格內的文字或圖片排中、排左或排
右﹐可以在<TD>內加入ALIGN="方向"屬性。
甚至是想排上、排中或排下﹐可以加入
VALIGN="方向"屬性。
甚麼是Cascading Style Sheet (CSS)？
中文名稱︰「層遞樣式表」
特色︰
排版效果
定義樣式
減少程式碼
再用程式碼
缺點︰
瀏覽器支援程度
如何使用 CSS
直接定義
在原有 HTML 標籤內加入 “style” 屬性
<font style=“attribute1:value1;attribute2:value2”>
E.g.
<font style=“background-color:red;font-size:20px”>
如何使用 CSS
在 <body> 前定義
依附標籤
<style type=“text/css”>
Font { css style definition }
</style>
只要使用 <font> 便會套用這個 definition
一次過定義多組標籤 的 style:
Font, h1, h2 { background-color:red;font-size:20px }
1.
如何使用 CSS
在 <body> 前定義
先定義 class 名稱再呼叫
<style type=“text/css”>
.classname { definition }
</style>
2.
<font class=“classname”></font>
如何使用 CSS
在 <body> 前定義
先給名稱再呼叫
<style type=“text/css”>
#title { definition }
</style>
3.
<font id=“title”>
如何使用 CSS
外掛
將 css 的定義儲存於一個個別的檔案內
使用這個標籤︰
<link rel=“stylesheet” type=“text/css”
href=“filename.css”>
In filename.css:
<style type=“text/css”>
body { font-size:8pt; color:red }
</style>
可以將 css 定義獨立於 html code
多份 html 網頁共用同一組 css 定義
CSS 屬性—背景設定
background-color (背景顏色)
任何完件可有自己的背景顏色
Background-color:#012345
Background-color:red
Background-color:rgb(255,255,255)
如果沒有指定任何顏色，則預設值是透明。
Example:
<font style=“background-color-red”>紅色字</font>
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:repeatx}
{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 (首行縮排)
Letter-spacing (字母距離)
Letter-spacing:3pt ( pt, px, cm, normal )
Word-spacing (文字字距)
Text-indent:15pt
Text-indent:15%
Word-spacing:5pt ( pt, px, cm, normal )
Line-height (行距)
Line-height:10pt
如果設定了行距，盡量不要用<br>來斷行，用<p>
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 (位置)
Top (頂端)
Position:absolute (ref. point: 左上角)
Position:relative (ref. point: 上一個區塊的左上角)
Top:100px (ref.point: 上一個區塊的左上角, 可以為
負數, 向上移)
Left (左邊)
Left:100px (ref. point: 上一個區塊的左邊，向右為
正，向左為負)
CSS 屬性—文字設定
Visibility (可見)
Z-index (層數)
Visibility:visible
Visibility:hidden
加上 javascript 來使用，可達極佳效果
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?
層遞︰將屬性一層一層地添加
<style type=“text/css”>
.class1{ font-color: red}
.class2{ font-family:verdana }
</style>
<div class=“class1”>text in red<div
class=“class2”>text in red and
verdana</div>text in red</div>
CSS之多重定義
<div>, <span> 之使用
<div>, <span> 同樣可以使用 class, id 兩種屬
性
<div>會開啟新一段，
<span>會連接前文
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
直接更改 tag 的屬性
1. 在 design panel 中選 css style, 點擊
第二個按鈕
2. 選擇第二個 radio button (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 分頁中 rightclick, 選擇”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