網頁設計軟體實作

網頁設計軟體實作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?

Dreamweaver

Frontpage

W3C ok ok

瀏覽器相容度

較高高 ( 但僅限於 IE)

程式精簡度

好 MsCSS較不易整理

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 與 DHTM

L

End 大家辛苦了 !!!

網頁設計軟體實作

Documents