表單中的輸入欄位.ppt

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 (), 目前標準最近版本是 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 製作流程 編輯 HTML 文件 使用一般文書編輯器, 像是漢書、Windows 的記事本、Word…。不過, 在存檔時要記得將副檔名設定成 .htm 或 .html。 使用 HTML 編輯器 Adobe Dreamweaver CS3 / CS4 Microsoft Office 中的 FrontPage Adobe Dreamweaver Microsoft Office FrontPage HTML 文件架構 文件資訊是用 HEAD 標籤所包含住的, 本文部份則是用 BODY 標籤來定義： TITLE/TITLE 可顯示在網頁中的圖片 目前瀏覽器支援的圖形檔種類主要有 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 採取亮度與色彩分離的記錄模式, 可捨棄較多的色彩資料, 所以會有部份資料流失。 GIF/JPG 的取捨原則 作業1 顯示各種文字 超連結練習 圖片顯示練習 利用清雲首頁修正圖片未能顯示部分 字型與字體大小 文件中的字體大小 相對字型變更法 指定所用的字型—FONT FACE 字體變化實例 Headings 與 FONT 的不同 文件中的字體大小 FONT Face=標楷體 SIZE=3 —設定字體大小 Headings 與 FONT 的不同 字型樣式 B —粗體字