Dreamweaver 8 網頁設計初階 上機練習準備工作:

Presentation on theme: "Dreamweaver 8 網頁設計初階 上機練習準備工作:"— Presentation transcript:

1 Dreamweaver 8 網頁設計初階 上機練習準備工作:
拷貝資料檔: 桌面右上角[共用資料夾], 滑鼠快按兩下登入, 帳號: guest 密碼: guest，把 Dreamweaver 8資料夾 copy 到個人電腦桌面上 在 C: 建一個資料夾取名 myweb (或任意個人喜好的名稱) 把 Dreamweaver 8 資料夾內的 pics 資料夾(圖檔素材)， copy 到 c:\myweb 資料夾中 註: 網頁設計軟體都是以[資料夾]為整個網站網頁儲存區, 要發佈的檔案, 都應複製到網站的資料夾 2018/9/22

2 Dreamweaver 8 網頁設計初階 國立臺灣師範大學 資訊中心(ITC) 陳 明 芳 先生
陳 明 芳 先生 VOIP: 8628 外線: 分機: #277 中華民國九十八年八月 2018/9/22 2

3 課程目標 WWW 網站架構概念 網頁設計工具簡介 網頁的組成和元件 網站腳本和網頁設計 Dreamweaver 8 介面和網頁編輯基本操作
各種超連結和網頁元件設計 Dreamweaver 8 網站管理和發佈上傳 Dreamweaver 8 常用網頁設計特殊功能介紹 2018/9/22

4 WWW 網站架構概念 使用者端 (Client) 網路 資料庫 Internet/ LAN Access SQL Server Oracle
Web 伺服器 (放網站的位置) 網路 資料庫 Internet/ LAN Access SQL Server Oracle Sybase MySQL DB2 瀏覽器(Browser) (IE、FireFox、Safari) TCP/IP 網路溝通的協定 IIS Apache Tomcat … 2018/9/22

5 網頁和影像設計工具 網頁設計工具 影像/繪圖處理 動畫處理 FrontPage 2003/2007 (全校授權)
Namo WebEditor 2006(全校授權) 2008 (未採購) Dreamweaver (電腦教室授權) 影像/繪圖處理 PhotoImpact (全校授權) 、Photoshop、 CorelDraw 、Illustrator 動畫處理 Flash(電腦教室授權) Microsoft GIF Animator (免費) Ulead GIF Animator (包含在 PhotoImpact 授權中) 2018/9/22

6 網頁 vs 網站 vs 網址 vs 首頁 網頁：依照HTML(Hypertext Mark-up Language)標準編輯的文字檔，可在瀏覽器(IE、Firefox…)上正確顯示的檔案。 網站：許多網頁的集合，依照網站的設計，用超連結把網頁之間的關係，串聯起來，成為一個完整的網站，提供資訊給Internet上的使用者。 網址: 讓使用者在瀏覽器網址列輸入的網站識別位址，類似我們住家的住址 (人看的網址) (電腦看的網址, 這也是師大的首頁) 首頁: 進到一個網站第一個呈現的網頁，常見首頁名 index.htm或index.html，管理者可以自定首頁(在Web伺服器上設定) , 亦可設定多個首頁, 依順序搜尋. 2018/9/22

7 網頁內容(Content)的組成要素 使用語言 - HTML, HyperText Mark-up Language，W3C 聯盟制定的標準 網頁中常見的內容或元件 靜態的: 文字、圖片、表格(排版) 、超連結、… 動態的: Flash動畫、GIF 動畫 物件: 按鈕、選單、文字方格(表單)、計數器、… 影音: 影像(wmv、avi、mpg…)、音樂(mp3、wav、mid/midi、wma…) 網頁程式: 使用者端(Client Site): JavaScript, VBScript, Java Applet, Active元件 伺服器端(Server Site): PHP、JSP、ASP/ASPX 2018/9/22

8 網站腳本設計和資料收集 一般使用目錄架構方式安排腳本草稿 資料收集 歡迎畫面 index.html 首頁 main.html
各項資料文字檔案(txt, doc, …) Image/Pics (圖示, 分格線, 背景, GIF89a動畫圖) 師大有全校授權的圖庫 程式/元件/樣版/樣式: Javascript、Java Applets、 HTML (Table, Frame) 、CSS、範本網頁 歡迎畫面 index.html 首頁 main.html 進入 簡介 intro.html 興趣 下載網站 download.html 訪客意見 2018/9/22

9 認識 Dreamweaver 8 – 啟始頁 建立HTML檔案 建立和管理 DW 網站 工作模式 2018/9/22

10 認識 Dreamweaver 8 視窗認識 網頁名稱標籤 網頁文件 編輯區 工作模式 設計/分割/程式碼/預覽 [插入]工具列 功能表列
[文件]工具列 網頁名稱標籤 (另存新檔改名) [應用程式]面板 按 [▼] 可隱藏 面板群組 [檔案]管理面板 網頁文件 編輯區 工作模式 設計/分割/程式碼/預覽 文字[屬性]面板 [頁面屬性] 更多屬性設定 2018/9/22 10

11 建立網頁 – 首頁(index.html) 2. [基本頁面][HTML] 1. [檔案][開新檔案] 3. [建立] 2018/9/22
11

12 建立網頁 – 編輯功能主選單網頁 (main.html)和網頁背景圖設定
3. 選取[背景影像] 網頁中輸入文字選單 (做超連結用) 也可用圖片按鈕 2. 在網頁文件編輯區 按滑鼠[右鍵]選 [頁面屬性] 4. [確定] 2018/9/22 12

13 建立網頁 – 長篇文章(intro.html)和表格
3.指定表格 [列][欄]數 1. 貼上一長篇的文章 2. [插入][表格] 4. 表格格式設定 [命令][表格格式] 5.使用現呈 表格格式 6.美化排版 邊框設為0 2018/9/22 13

14 超連結的建立 – URL 或檔案連結(1) 2-3. 工具列[常用] [超連結]圖示
2-1.用[指向檔案]連到 要建連結的檔案 (滑鼠左鍵按著拖曳) 1. 選取欲連結的 文字 [進入] 2-2. 在[連結]輸入連結的檔名 或任意合法的 URL 名稱 如: 2018/9/22 14

15 超連結的建立 – 圖片按鈕超連結(2) 和目標的設定
1. 選取圖片按鈕 3. 設定目標 2.用[指向檔案]連到 要建連結的檔案 (滑鼠左鍵按著拖曳) 2018/9/22 15

16 連結中目標(Target)屬性的意義 鏈結裏面 target屬性裏 _blank _parent _self _top _search 有什麼區別?有什麼用？ _blank 流覽器會另開一個新視窗顯示鏈結 _self，在同一框架或視窗中打開所鏈結的文檔。此參數為預設值，通常不用指定。 _parent，將鏈結的檔載入含有該鏈結框架的父框架集或父窗口中。如果含有該鏈結的框架不是嵌套的，則在流覽器全屏視窗中載入鏈結的檔，就象_self參數一樣。 _top，在當前的整個流覽器視窗中打開所鏈結的文檔，因而會刪除所有框架 _search 在流覽器的搜索區裝載文檔，注意，這個功能只在Internet Explorer 5 或者更高版本中適用。 2018/9/22 16

17 2-1.在[連結]輸入 mailto: mfchen@ntnu.edu.tw
超連結的建立 – 連結(3) 1. 選取欲連結的 文字 [ 給我] 2-2.工具列[電子郵件連結]圖示 前不需加 mailto: 2-1.在[連結]輸入 mailto: 2018/9/22 17

18 從錨點處開始顯示, 若錨點後不滿一頁, 則顯示文件最後一頁的範圍
超連結的建立: 命名錨點(4-1) 從錨點處開始顯示, 若錨點後不滿一頁, 則顯示文件最後一頁的範圍 在一篇長文章中，連結到網頁中間的段落 Aaaaaaaaaaaaaa Bbbbbbbbbbbbbb Ccccccccccccccc Dddddddddddddd Eeeeeeeeeeeeee eeeeeeeeeeeeee Aaaaaaaaaaaaaa Bbbbbbbbbbbbbb Ccccccccccccccc Ccccccccccccccc Dddddddddddddd Eeeeeeeeeeeeee 建一個 錨點 正常網頁連結 顯示文章開頭的段落 網頁錨點連結 顯示文章設定錨點的段落 長篇文章

19 超連結的建立 – 命名錨點和連結(4-2) A.選取欲建立 錨點連結之文字 (反白) 游標移到要建立 錨點之處 3. 輸入錨點名稱[a2]
C.輸入連結之網頁和 錨點名稱 Intro.html#a2 2. 工具列[命名錨點]圖示 B. 工具列[超連結]圖示 #a2 就是連結 到錨點的語法 2018/9/22 19

20 5. [插入Flash按鈕] 屬性設定: 文字/連結…
將[插入]工具列 切換到到[常用] 3. 點選[媒體]圖示 2. 游標移到要文件中 插入按鈕的地方 5. [插入Flash按鈕] 屬性設定: 文字/連結… 2018/9/22 20

21 網站的管理-本地和遠端資訊設定 1. 功能表列[網站][管理網站]或者[新增網站] 3.在[進階]頁籤中 設定[遠端資訊]
4. 存取: [FTP] 師大ftp主機: [web.ntnu.edu.tw] 主機目錄: [WWW/] 大寫 師大 帳號和密碼 1. 功能表列[網站][管理網站]或者[新增網站] 3.在[進階]頁籤中 設定[遠端資訊] 2. 在[進階]頁籤中 設定[本地資訊] 2018/9/22 21

22 網站的管理和發佈(上傳到Web伺服器) 1-2. 右側[檔案]面板 [↑] 上傳圖示 1-1. 功能表列[網站][上傳]
2.[確定] 上傳檔案 檔案上傳畫面 檔案上傳詳細畫面 2018/9/22 22

23 頁框網頁(頁框組, Frameset) 1. 功能表列[檔案][開新檔案] 2.[類別] [頁框組] 3.[建立] 3.[頁框組]
ABC.html B A C 3.[建立] 3.[頁框組] 選擇個人偏好形式 2018/9/22 23

24 頁框網頁: 原始檔設定 1. 準備好三個HTML: 左方(功能表). 上方(主題Banner), 主網頁(中間) 2.[頁框] 點選要設定的
top.html main.html 2.[頁框] 點選要設定的 intro.html 3.[屬性] [原始檔] html 設定(先確認 頁框名稱) 4.在[頁框] 左上角按一下 最外面的外框 變黑表示選取 5. 功能表列[檔案][儲存頁框組], 取名 first.html (新的檔名) 2018/9/22 24

25 素材收集: 圖片、影片、音樂 從網頁中收集/下載(小心智慧財產權的問題) 選取儲存的 位置/資料夾 確定檔名 按[儲存] 滑鼠移到要下
載的圖片上方 按滑鼠右鍵 選[另存圖片] 網路上搜尋圖片素材常用的關鍵字: Free GIF background images, banner Animated gifs, Cliparts 常用網頁圖檔格式: gif, jpg, png 影片/音樂: avi, mpg, mpeg, wmv, mp3, mid, midi, wav, flv, swf… 2018/9/22

26 網頁中進一步的設計 網頁內容的重要元素 超連結: 連結到網站、網頁、檔案、FTP、EMAIL、網頁中的命名錨點、… 網頁的背景圖、背景音樂
按鈕、選單、動態選單(下拉式/跳頁選單)、表單 表格和排版 圖像、影音、動畫(Flash, Gif) 頁框組(FrameSet) 影像地圖、圖層 互動式按鈕(Flash/Javascript)、計數器 跑馬燈、即時新聞、Iframe、搜尋 、 內嵌元件 網頁程式 (互動網頁，如: 會員註冊、討論區、留言板) 2018/9/22

27 影像地圖(Image Map) 在一張影像/地圖上，製作多個超連結 3. 在圖片上畫一個要建 立超連結的區域 新增網頁 將圖片插入網頁中
2. 選取畫分地圖區域 的工具 4. 輸入URL(網頁或網址) 5. 設定目標(target)

28 圖層製作和設定(1) 類似3D網頁資料的呈現, 滑鼠移過彈出資訊 2.在[版面]工具列 3. 繪製一個圖層 顯示區 按 [繪製圖層] 圖示
在網頁中 插入圖片 4. 在圖層內輸入 說明資訊或 插入圖片

29 5.設定行為 onMouseOver 顯示 onMouseOut 隱藏
圖層製作和設定(2): 行為指令設定 在[CSS]面板的[圖層] 頁籤, 按一下[眼睛] 合起來 隱藏圖層(網頁開啟預設值) 3.在[標籤]面板的 [行為]頁籤,按[+]增加 選[顯示隱藏圖層] 2.點選連結區 5.設定行為 onMouseOver 顯示 onMouseOut 隱藏 4.設定圖層顯示 或隱藏