1 / 112

HMTL and CSS 使用 Dreamweaver CS3

HMTL and CSS 使用 Dreamweaver CS3. 主講人 : 徐培倫. 摘要. 什麼是 HTML 使用 Dreamweaver 製作 HTML 作業 1( 圖片 ) ，作業 2( 文字 ) ，作業 3( 表格 ) ，作業 4( 表單 ) ， 什麼是 CSS 使用 Dreamweaver 製作 CSS 應用於 HMTL 標籤、自訂 class 、及 ID 應用 參考文獻. HTML 的標準. HTML (Hyper Text Markup Language)

zuzana
Download Presentation

HMTL and CSS 使用 Dreamweaver CS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HMTL and CSS 使用Dreamweaver CS3 主講人:徐培倫 清雲科技大學電子系

  2. 摘要 • 什麼是 HTML • 使用Dreamweaver製作 HTML • 作業1(圖片)，作業2(文字)，作業3(表格)，作業4(表單)， • 什麼是 CSS • 使用Dreamweaver 製作 CSS 應用於HMTL 標籤、自訂class、及ID應用 • 參考文獻

  3. 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 標籤與屬性要小寫

  4. 原始的文件內容 (執行『檢視/原始檔』命令) 在瀏覽程式中所看到的內容 HTML 與網頁的關係

  5. HTML 文件結構 • 在 HTML 文件中由小於 "<" 及大於 ">" 符號所組成的記號稱為標籤 (tag)。 • 語法 • <標籤名稱 屬性1=“數值1” 屬性2=“數值2”…> 內文 </標籤名稱> • <p align=left/center/right> Hello </p>

  6. 規劃文件內容 編輯文件 不滿意再回去修改 瀏覽程式預先觀看 放到可供大家存取的 WWW 伺服器 自已先在網路上測試 到適當的地方發佈首頁面世消息 製作流程

  7. 編輯 HTML 文件 • 使用一般文書編輯器, 像是漢書、Windows 的記事本、Word…。不過, 在存檔時要記得將副檔名設定成 .htm 或 .html。 • 使用 HTML 編輯器 • Adobe Dreamweaver CS3 / CS4 • Microsoft Office 中的 FrontPage

  8. Adobe Dreamweaver

  9. Microsoft Office FrontPage

  10. HTML 文件架構 • 文件資訊是用 <HEAD> 標籤所包含住的, 本文部份則是用 <BODY> 標籤來定義：

  11. <TITLE></TITLE>

  12. 可顯示在網頁中的圖片 • 目前瀏覽器支援的圖形檔種類主要有 JPEG (副檔名為 jpg 或 jpeg) 和 GIF (副檔名為 gif) 兩種, 亦即網頁中的圖片, 只要是這兩種檔案格式, 就能正常顯示。 • 若圖片是其它的格式, 例如 BMP 檔, 則必須先用圖或影像處理軟將它轉成 JPEG 或 GIF 格式。

  13. 圖片 • <IMG SRC="圖檔的 URL" WIDTH="圖寬點數" HEIGHT="圖高點數"> • 圖片邊界寬： VSPACE 與 HSPACE 屬性 • BORDER 屬性：為您的圖片影像裱框 • ALT 屬性—為您的圖片影像加註 • LOWSRC 屬性—預載圖片功能 • ALIGN 屬性 ：Top/Middle/Bottom • ALIGN 屬性 ：Left/Right

  14. PNG 圖檔格式 • PNG (Portable Network Graphics) 檔, 結合了 GIF 和 JPEG 兩種格式的長處。但由於 GIF 的應用實在太過廣泛, 且 PNG 不支援以多張圖組成動畫的方式, 要用來完全取代 GIF 並不容易。

  15. GIF 圖片格式簡介 • GIF (Graphics Interchange Format) 這個圖檔格式是由 CompuServe 在 1987 年所提出, 其目的是希望網路及 BBS 上的使用者能夠透過此圖檔格式輕易的交換及儲存影像資料。 • 1989 年 7 月公佈的 GIF 89a, 最受大家喜愛的改進是可以製作動畫檔與透明圖。

  16. GIF 圖片格式簡介 • GIF 的可攜性非常高, 無論是在 DOS、Windows 、MacOS 或是 X-Window 上, 都可以看到支援 GIF 的各種圖形應用軟體。 • 此外, GIF 所使用的壓縮演算法：LZW 演算法是一種很有效率的無失真壓縮演算法。高壓縮比加上高可攜性, 難怪 GIF 會成了網頁設計的寵兒。

  17. JPEG 圖檔格式簡介 • JPG/JPEG (Joint Photographic Experts Group) 是由全球各地 (主要來自 ISO 與 CCITT 兩組織) 的影像處理專業人員組合成立的機構, 致力於靜態影像 (still image) 壓縮標準的建立。

  18. JPEG 圖檔格式簡介 • JPEG 的壓縮法則, 就是保留圖形中人眼感受敏銳的成份, 如明亮度, 而捨棄視網膜感受不到的小色點, 即一般所謂的失真式壓縮。 • 而 JPEG 採取亮度與色彩分離的記錄模式, 可捨棄較多的色彩資料, 所以會有部份資料流失。

  19. GIF/JPG 的取捨原則

  20. 作業1 • 顯示各種文字 • 超連結練習 • 圖片顯示練習 • 利用清雲首頁修正圖片未能顯示部分

  21. 字型與字體大小 • 文件中的字體大小 • 相對字型變更法 • 指定所用的字型—FONT FACE • 字體變化實例 • Headings 與 FONT 的不同

  22. 文件中的字體大小 • <FONT Face=標楷體 SIZE=3> —設定字體大小

  23. Headings 與 FONT 的不同

  24. 字型樣式 • <B> —粗體字

  25. 字型樣式 • <I> —斜體字

  26. 字型樣式 • <SUB> —下標字 • <SUP> —上標字

  27. 具有特殊含意的標籤

  28. 特殊含意標籤的範例

  29. 附屬說明文字 • <RUBY> 標籤 • 目前僅有 IE 支援 • 使用時需搭配另一個輔助用的標籤 <RT>

  30. 附屬說明文字

  31. 在 HTML 文件中顯示符號 • 當瀏覽器讀到 "<" 號時, 以為遇到的是一個標籤, 就將其後的內容隱藏起來, 並且嚐試去讀取對應的 ">" 符號：

  32. 在 HTML 文件中顯示符號

  33. 在文件中顯示特殊字元

  34. 在文件中顯示特殊字元

  35. 文字的特效—跑馬燈 • <MARQUEE> —跑馬燈 • 文字特效的小例子

  36. <MARQUEE>—跑馬燈 • <MARQUEE> 標籤的用法很簡單, 只要直接將文字加到 <MARQUEE> 標籤間即可：

  37. <MARQUEE> 的屬性 • BEHAVIOR—設定捲動的效果： • SCROLL 一般捲動效果。 • SLIDE 文字捲進來碰到邊界後, 就停下來不動。 • ALTERNATE 讓文字在限定範圍中左右兩邊彈來彈去。

  38. <MARQUEE> 的屬性 • DIRECTION —設定文字捲動的方向： • 預設值為由右到左的 LEFT。 • 由左到右的反方向跑馬燈, 可設成 RIGHT。 • HEIGHT、WIDTH ： • 設定跑馬燈的高與寬, 可直接指定圖點數 (例如 HEIGHT=50) 或是指定跑馬燈的區域在視窗中所佔的畫面比例 (例如 HEIGHT=30%)。

  39. <MARQUEE> 的屬性 • LOOP ： • 設定跑馬燈捲動的次數, 預設值為 infinite, 表示不限定次數。 • SCROLLAMOUNT、SCROLLDELAY： • 用來設定跑馬燈捲動時每次移動的『步伐』大小, 及需要多久移動一次的時間間隔。 • 設定 SCROLLAMOUNT 的單位為圖點。 • 設定 SCROLLDELAY 的單位為毫秒 (ms)。

  40. <MARQUEE> 的屬性 • BGCOLOR： • 設定跑馬燈的背景顏色。

  41. 作業2 • 注音符號 ruby (不支援,IE ok) • 跑馬燈 marguee (不支援, IE ok) • 文字練習

  42. <OL>…</OL> 有序號的列表

  43. <OL> 標籤的屬性 • 改變編號的樣式

  44. <OL> 標籤的屬性 • 改變編號的樣式

  45. <OL> 標籤的屬性 • 改變編號的起始值與指定編號

  46. <UL>…</UL> 無序號的列表

  47. <UL> 標籤的屬性

  48. 巢狀列表

  49. 表格標籤的基本架構介紹

  50. 表格標籤的基本架構介紹 • <CAPTION>…</CAPTION> 為表格加上標題

More Related