網頁設計軟體實作

網頁設計軟體實作 Designed by Albert 2006

網頁設計語言 • HTML (Hyper Text Mixed Language) • DHTML(Dynamic-HTML) • CSS(Character Style Sheet) • SCRIPTS • ActiveX

認識HTML • 客戶端執行 • 純文字檔案 • 由指定標籤與瀏覽器溝通 • 起始 ”<“ 與結尾 ”/>” • 逐行執行 • 由左而右由上而下 • 巢狀執行 • 優先權由小至大(高至低)

認識HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>title</title> </head> <body> <!—內文--!> </body> </html>

認識HTML • 傳統HTML不可跳躍式定位，亦不可重疊 • 應注意瀏覽者介面(UI) • 瀏覽器版本及種類(語法相容度) • 瀏覽解析度(版面配置) • ActiveX必須考慮作業系統

認識CSS • 補足傳統HTML的不足 • 可跳躍式定位、可重疊 • 全新的自訂標準 • 幾乎適用所有HTML元素 • 三種套用方式 (類別、標籤、容器) • 可達到簡易動態效果 • 濾鏡，透明、鏤空…etc

相容性 • HTML4.01 100%相容 • CSS 約90%相容 • DHTML約90%相容

GUI網頁開發軟體 • What’s Dreamweaver? • Dreamweaver & Frontpage? W3C為World Wide Web Consortium之縮寫

使用Dreamweaver • 環境設定 • 編輯→偏好設定→使用CSS取代HTML標籤(取消選取) ☆不建議使用CSS取代HTML • 基本元件的使用 • 文字 • 表格 • 圖片 • 頁框

使用Dreamweaver • CSS特性 • 類別：自訂新類別、套用至標籤 • 標籤：重新定義HTML標籤 • 容器：建立群組，套用至指定id下 • 使用CSS • 文字 • 圖片 • 表格 • 背景

網頁設計技巧：顏色 • 使用相近的顏色，對比色用來突顯，絕對避免過度使用！ • 不要使用過多的顏色。除了黑色和白色以外，約選擇四到五個顏色就夠了。同色調和對比色調和相近色調和

網頁設計技巧：顏色 • 色環

其他補充：Behavior • Behavior(行為) • Behavior為DHTML中重要的一環，以觸發條件為出發點，執行其對應之事件。 • Ex: OnClick → Call JavaScript • Ex: OnMouseover →顯示圖層【下拉式選單】 • Ex: 使用Behavior改變屬性

Homework • 製做一最基本網頁 • 使用GUI軟體製作CSS與DHTML

End 大家辛苦了!!!

網頁設計軟體實作

網頁設計軟體實作

Presentation Transcript