1 / 15

網頁設計軟體實作

網頁設計軟體實作. Designed by Albert 2006. 網頁設計語言. HTML (Hyper Text Mixed Language) DHTML (Dynamic-HTML) CSS (Character Style Sheet) SCRIPTS ActiveX. 認識 HTML. 客戶端執行 純文字檔案 由指定標籤與瀏覽器溝通 起始 ” < “ 與結尾 ” /> ” 逐行執行 由左而右由上而下 巢狀執行 優先權由小至大 ( 高至低 ). 認識 HTML.

Download Presentation

網頁設計軟體實作

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. 網頁設計軟體實作 Designed by Albert 2006

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

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

  4. 認識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>

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

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

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

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

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

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

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

  12. 網頁設計技巧:顏色 • 色環

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

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

  15. End 大家辛苦了!!!

More Related