Download
1 / 68
E N D
甚麼是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 }
如何使用 CSS • 在 <body> 前定義 • 先定義 class 名稱再呼叫 <style type=“text/css”> .classname { definition } </style> <font class=“classname”></font>
如何使用 CSS • 在 <body> 前定義 • 先給名稱再呼叫 <style type=“text/css”> #title { definition } </style> <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: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 • 如果設定了行距，盡量不要用<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 (位置) • 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? • 層遞︰將屬性一層一層地添加 <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 1︰點選工具列上的分割視窗鈕
