網頁設計入門與 Dreamweaver 使用簡介

網頁設計入門與Dreamweaver 使用簡介 講師：梁家豪 E-Mail: u8855043@ccu.edu.tw

網頁概念 • WWW為網際網路重要的應用之一 • 豐富的圖文聲光效果 • HTML、CGI、PDF 、GIF 、WAV 、 Flash… • 直覺式互動服務 • ASP 、 CGI • 取之不竭的網路資源 • 搜尋引擎、全文檢索、網路資料庫、 Freeware 、 Shareware

網頁組成元件 • HTML (Hyper Text Make-up Language) • 是以呈對的標籤(tag)來表示網頁 • 經瀏覽器(如IE、Netscape)的解析後，呈現圖文並荗的網頁 • Hyper Link (超聯結) • 能快速地連結其他網頁，或其他網路資源，如HTTP、FTP、Gopher • 圖片 • 如GIF、JPGE的圖檔

Dreamweaver • Macromedia公司出品 • 下載Dreamweaver試用版：http://www.macromedia.com/software/dreamweaver/trial/ • WYSWYG (What you see, what you got)隨見即得的設計方式 • 完整的站台管理功能 • 互動式網頁的快速完成(Behavior功能) • 與Flash的高度支援與應用

站台(site)設定 • 選擇Site/Site File… • 跳出新視窗後，選擇Site/Define Site… • 跳出對話方塊後，選擇New… • 於第一個頁面的Site Name之中，填入自己所需要的名字，於Local Root Folder，選擇一個網站的根目錄 • 此根目錄可以自己任選之，主要是未來方便尋找管理為原則

文件基本設定 • 選擇Modify / Page Properties • Title: 文件之標題顯示為何 • Background Image: 背景底圖重覆拼貼的檔案 • Background / Text: 背景與文字的顏色 • Left / Margin Width / Top Margin / Margin Height: 文件邊界設定值

文字效果設定 • 圈選欲設定的地方，選擇不同的字形 • 字型的設定，可以使用Edit Font List… • 圈選欲設定的地方，選擇Size之不同 • 1代表最小，7代表最大 • 圈選欲設定的地方，按下顏色挑選器，選擇適合的顏色 • 亦可以使用System Color Picker選擇所需要的特別顏色 • 選擇Default Color 則代表不設定顏色

文字效果設定 • 圈選欲設定的地方，再按下B，代表粗體樣式，按下I，代表斜體樣式 • 段落是按Enter換行 • 非段落(不空行的情況)是按Shift + Enter • 設定對齊方式是以段落為單位，所以於欲設定的段落任一處點一下滑鼠，再按下置中、靠左、靠右

項目符號 & 數字符號 • 點選Properties上的Unordered List以設定項目符號 • 同理，選擇Ordered List設定數字符號 • 選擇Text/List/Properties設定細部控制 • 選擇Style，可以設定是要用方塊、圓形(Unordered)或大小寫英文、羅馬數字(Ordered) • 在數字符號時，亦可以設定起始值

內縮及特殊字元 • 內縮一樣是以段落為單位，於欲使用內縮的段落內點一下，再選擇Properties之中的Text Indent • 輸入特殊字元前，要將Object功能表切換至Characters。 • 再選擇欲輸入的字元。 • 在瀏覽器中會忽略HTML的空白，因此如果要鍵入空白，亦需使用插入特殊字元的方式( )

其他功能 • 選擇File/Preview in Browser/IE，可以將目前的網頁在瀏覽器中預覽(快速鍵F12) • 當Properties或Object功能表不見時，可以按Window/Properties或Window/Objects將它們顯示出來 • 右下同可以顯示在不同狀況下，該網頁需要幾秒鐘下載和其總大小

網頁設計入門與 Dreamweaver 使用簡介