1.13k likes | 1.3k Views
HMTL and CSS 使用 Dreamweaver CS3. 主講人 : 徐培倫. 摘要. 什麼是 HTML 使用 Dreamweaver 製作 HTML 作業 1( 圖片 ) ,作業 2( 文字 ) ,作業 3( 表格 ) ,作業 4( 表單 ) , 什麼是 CSS 使用 Dreamweaver 製作 CSS 應用於 HMTL 標籤、自訂 class 、及 ID 應用 參考文獻. HTML 的標準. HTML (Hyper Text Markup Language)
E N D
HMTL and CSS 使用Dreamweaver CS3 主講人:徐培倫 清雲科技大學電子系
摘要 • 什麼是 HTML • 使用Dreamweaver製作 HTML • 作業1(圖片),作業2(文字),作業3(表格),作業4(表單), • 什麼是 CSS • 使用Dreamweaver 製作 CSS 應用於HMTL 標籤、自訂class、及ID應用 • 參考文獻
HTML 的標準 • HTML (Hyper Text Markup Language) • 標準的制定單位是 W3C (http://www.w3.org), 目前標準最近版本是 4.01 版。 • 新的規範 XHTML (eXtensible HTML) • 基於可擴展置標語言(XML),XML是SGML的一個子集。XHTML 1.0在2000年1月26日成為W3C的推薦標準。 • 語法P3-3, XHTML 標籤與屬性要小寫
原始的文件內容 (執行『檢視/原始檔』命令) 在瀏覽程式中所看到的內容 HTML 與網頁的關係
HTML 文件結構 • 在 HTML 文件中由小於 "<" 及大於 ">" 符號所組成的記號稱為標籤 (tag)。 • 語法 • <標籤名稱 屬性1=“數值1” 屬性2=“數值2”…> 內文 </標籤名稱> • <p align=left/center/right> Hello </p>
規劃文件內容 編輯文件 不滿意再回去修改 瀏覽程式預先觀看 放到可供大家存取的 WWW 伺服器 自已先在網路上測試 到適當的地方發佈首頁面世消息 製作流程
編輯 HTML 文件 • 使用一般文書編輯器, 像是漢書、Windows 的記事本、Word…。不過, 在存檔時要記得將副檔名設定成 .htm 或 .html。 • 使用 HTML 編輯器 • Adobe Dreamweaver CS3 / CS4 • Microsoft Office 中的 FrontPage
HTML 文件架構 • 文件資訊是用 <HEAD> 標籤所包含住的, 本文部份則是用 <BODY> 標籤來定義:
可顯示在網頁中的圖片 • 目前瀏覽器支援的圖形檔種類主要有 JPEG (副檔名為 jpg 或 jpeg) 和 GIF (副檔名為 gif) 兩種, 亦即網頁中的圖片, 只要是這兩種檔案格式, 就能正常顯示。 • 若圖片是其它的格式, 例如 BMP 檔, 則必須先用圖或影像處理軟將它轉成 JPEG 或 GIF 格式。
圖片 • <IMG SRC="圖檔的 URL" WIDTH="圖寬點數" HEIGHT="圖高點數"> • 圖片邊界寬: VSPACE 與 HSPACE 屬性 • BORDER 屬性:為您的圖片影像裱框 • ALT 屬性—為您的圖片影像加註 • LOWSRC 屬性—預載圖片功能 • ALIGN 屬性 :Top/Middle/Bottom • ALIGN 屬性 :Left/Right
PNG 圖檔格式 • PNG (Portable Network Graphics) 檔, 結合了 GIF 和 JPEG 兩種格式的長處。但由於 GIF 的應用實在太過廣泛, 且 PNG 不支援以多張圖組成動畫的方式, 要用來完全取代 GIF 並不容易。
GIF 圖片格式簡介 • GIF (Graphics Interchange Format) 這個圖檔格式是由 CompuServe 在 1987 年所提出, 其目的是希望網路及 BBS 上的使用者能夠透過此圖檔格式輕易的交換及儲存影像資料。 • 1989 年 7 月公佈的 GIF 89a, 最受大家喜愛的改進是可以製作動畫檔與透明圖。
GIF 圖片格式簡介 • GIF 的可攜性非常高, 無論是在 DOS、Windows 、MacOS 或是 X-Window 上, 都可以看到支援 GIF 的各種圖形應用軟體。 • 此外, GIF 所使用的壓縮演算法:LZW 演算法是一種很有效率的無失真壓縮演算法。高壓縮比加上高可攜性, 難怪 GIF 會成了網頁設計的寵兒。
JPEG 圖檔格式簡介 • JPG/JPEG (Joint Photographic Experts Group) 是由全球各地 (主要來自 ISO 與 CCITT 兩組織) 的影像處理專業人員組合成立的機構, 致力於靜態影像 (still image) 壓縮標準的建立。
JPEG 圖檔格式簡介 • JPEG 的壓縮法則, 就是保留圖形中人眼感受敏銳的成份, 如明亮度, 而捨棄視網膜感受不到的小色點, 即一般所謂的失真式壓縮。 • 而 JPEG 採取亮度與色彩分離的記錄模式, 可捨棄較多的色彩資料, 所以會有部份資料流失。
作業1 • 顯示各種文字 • 超連結練習 • 圖片顯示練習 • 利用清雲首頁修正圖片未能顯示部分
字型與字體大小 • 文件中的字體大小 • 相對字型變更法 • 指定所用的字型—FONT FACE • 字體變化實例 • Headings 與 FONT 的不同
文件中的字體大小 • <FONT Face=標楷體 SIZE=3> —設定字體大小
字型樣式 • <B> —粗體字
字型樣式 • <I> —斜體字
字型樣式 • <SUB> —下標字 • <SUP> —上標字
附屬說明文字 • <RUBY> 標籤 • 目前僅有 IE 支援 • 使用時需搭配另一個輔助用的標籤 <RT>
在 HTML 文件中顯示符號 • 當瀏覽器讀到 "<" 號時, 以為遇到的是一個標籤, 就將其後的內容隱藏起來, 並且嚐試去讀取對應的 ">" 符號:
文字的特效—跑馬燈 • <MARQUEE> —跑馬燈 • 文字特效的小例子
<MARQUEE>—跑馬燈 • <MARQUEE> 標籤的用法很簡單, 只要直接將文字加到 <MARQUEE> 標籤間即可:
<MARQUEE> 的屬性 • BEHAVIOR—設定捲動的效果: • SCROLL 一般捲動效果。 • SLIDE 文字捲進來碰到邊界後, 就停下來不動。 • ALTERNATE 讓文字在限定範圍中左右兩邊彈來彈去。
<MARQUEE> 的屬性 • DIRECTION —設定文字捲動的方向: • 預設值為由右到左的 LEFT。 • 由左到右的反方向跑馬燈, 可設成 RIGHT。 • HEIGHT、WIDTH : • 設定跑馬燈的高與寬, 可直接指定圖點數 (例如 HEIGHT=50) 或是指定跑馬燈的區域在視窗中所佔的畫面比例 (例如 HEIGHT=30%)。
<MARQUEE> 的屬性 • LOOP : • 設定跑馬燈捲動的次數, 預設值為 infinite, 表示不限定次數。 • SCROLLAMOUNT、SCROLLDELAY: • 用來設定跑馬燈捲動時每次移動的『步伐』大小, 及需要多久移動一次的時間間隔。 • 設定 SCROLLAMOUNT 的單位為圖點。 • 設定 SCROLLDELAY 的單位為毫秒 (ms)。
<MARQUEE> 的屬性 • BGCOLOR: • 設定跑馬燈的背景顏色。
作業2 • 注音符號 ruby (不支援,IE ok) • 跑馬燈 marguee (不支援, IE ok) • 文字練習
<OL> 標籤的屬性 • 改變編號的樣式
<OL> 標籤的屬性 • 改變編號的樣式
<OL> 標籤的屬性 • 改變編號的起始值與指定編號
表格標籤的基本架構介紹 • <CAPTION>…</CAPTION> 為表格加上標題