Dreamweaver
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

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


  • 49 Views
  • Uploaded on
  • Presentation posted in: General

網頁設計入門 與 Dreamweaver 使用簡介. 講師:梁家豪 E-Mail: [email protected] 網頁概念. WWW 為網際網路重要的應用之一 豐富的圖文聲光效果 HTML 、 CGI 、 PDF 、 GIF 、 WAV 、 Flash… 直覺式互動服務 ASP 、 CGI 取之不竭的網路資源 搜尋引擎、全文檢索、網路資料庫、 Freeware 、 Shareware. 網頁組成元件. HTML (Hyper Text Make-up Language) 是以呈對的標籤 (tag) 來表示網頁

Download Presentation

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Dreamweaver

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

講師:梁家豪

E-Mail: [email protected]


Dreamweaver

網頁概念

  • WWW為網際網路重要的應用之一

  • 豐富的圖文聲光效果

    • HTML、CGI、PDF 、GIF 、WAV 、 Flash…

  • 直覺式互動服務

    • ASP 、 CGI

  • 取之不竭的網路資源

    • 搜尋引擎、全文檢索、網路資料庫、 Freeware 、 Shareware


Dreamweaver

網頁組成元件

  • HTML (Hyper Text Make-up Language)

    • 是以呈對的標籤(tag)來表示網頁

    • 經瀏覽器(如IE、Netscape)的解析後,呈現圖文並荗的網頁

  • Hyper Link (超聯結)

    • 能快速地連結其他網頁,或其他網路資源,如HTTP、FTP、Gopher

  • 圖片

    • 如GIF、JPGE的圖檔


Dreamweaver1

Dreamweaver

  • Macromedia公司出品

    • 下載Dreamweaver試用版:http://www.macromedia.com/software/dreamweaver/trial/

  • WYSWYG (What you see, what you got)隨見即得的設計方式

  • 完整的站台管理功能

  • 互動式網頁的快速完成(Behavior功能)

  • 與Flash的高度支援與應用


Dreamweaver

站台(site)設定

  • 選擇Site/Site File…

  • 跳出新視窗後,選擇Site/Define Site…

  • 跳出對話方塊後,選擇New…

  • 於第一個頁面的Site Name之中,填入自己所需要的名字,於Local Root Folder,選擇一個網站的根目錄

    • 此根目錄可以自己任選之,主要是未來方便尋找管理為原則


Dreamweaver

文件基本設定

  • 選擇Modify / Page Properties

  • Title: 文件之標題顯示為何

  • Background Image: 背景底圖重覆拼貼的檔案

  • Background / Text: 背景與文字的顏色

  • Left / Margin Width / Top Margin / Margin Height: 文件邊界設定值


Dreamweaver

文字效果設定

  • 圈選欲設定的地方,選擇不同的字形

    • 字型的設定,可以使用Edit Font List…

  • 圈選欲設定的地方,選擇Size之不同

    • 1代表最小,7代表最大

  • 圈選欲設定的地方,按下顏色挑選器,選擇適合的顏色

    • 亦可以使用System Color Picker選擇所需要的特別顏色

    • 選擇Default Color 則代表不設定顏色


Dreamweaver

文字效果設定

  • 圈選欲設定的地方,再按下B,代表粗體樣式,按下I,代表斜體樣式

  • 段落是按Enter換行

  • 非段落(不空行的情況)是按Shift + Enter

  • 設定對齊方式是以段落為單位,所以於欲設定的段落任一處點一下滑鼠,再按下置中、靠左、靠右


Dreamweaver

項目符號 & 數字符號

  • 點選Properties上的Unordered List以設定項目符號

  • 同理,選擇Ordered List設定數字符號

  • 選擇Text/List/Properties設定細部控制

  • 選擇Style,可以設定是要用方塊、圓形(Unordered)或大小寫英文、羅馬數字(Ordered)

  • 在數字符號時,亦可以設定起始值


Dreamweaver

內縮及特殊字元

  • 內縮一樣是以段落為單位,於欲使用內縮的段落內點一下,再選擇Properties之中的Text Indent

  • 輸入特殊字元前,要將Object功能表切換至Characters。

  • 再選擇欲輸入的字元。

  • 在瀏覽器中會忽略HTML的空白,因此如果要鍵入空白,亦需使用插入特殊字元的方式( )


Dreamweaver

其他功能

  • 選擇File/Preview in Browser/IE,可以將目前的網頁在瀏覽器中預覽(快速鍵F12)

  • 當Properties或Object功能表不見時,可以按Window/Properties或Window/Objects將它們顯示出來

  • 右下同可以顯示在不同狀況下,該網頁需要幾秒鐘下載和其總大小


  • Login