Microsoft Word - 網頁實務應用-Dreamweaver.doc

Size: px

Start display at page:

Download "Microsoft Word - 網頁實務應用-Dreamweaver.doc"

汝褒
4 years ago
Views:

1 講師 : 吳昭輝 g951111@mail2.tmue.edu.tw

2 Dreamweaver 簡介 Dreamweaver 是一套功能強大而介面人性化的網頁編輯軟體及管理工具, 它值得我們學習的地方, 不只在於軟體本身的優點, 更在於它與其他軟體的相容整合, 功能的全方位延伸, 與目前網際網路的多媒體化及動態資料庫的結合視覺化的編輯環境, 所見即所得的特性, 讓 Dreamweaver 變得簡單易學, 您只要會 Word 文書編輯軟體, 即可輕鬆操作 Dreamweaver, 也可以快速做出您的網站網站就是網頁的集合, 設計者把網站架構規畫好, 然後再分別製作各個網頁, 對讓網頁間彼此相連結, 使瀏覽網站的人都能連結到各個網頁來觀看內容, 這樣的網頁架構就稱為網站 1.

3 網頁製作流程 1. 訂定主題及網站架構 2. 蒐集資料 3. 網頁製作 4. 網站上傳 5. 維護更新 1. 訂定主題及網站架構 : 先確認網站的主題 ( 商業類教育類個人網站...), 接下來規畫網站的架構, 確認網站要包含哪些內容如何呈現 2. 蒐集資料 : 主題及架構確定後, 接下來要進行資料蒐集及整理 ( 內容豐富分類明確的網站, 會比光彩炫目的網站更吸引人 ) 3. 網頁製作 : 利用各種工具, 將蒐集的資料, 做成網頁並將各個網頁間做連結, 讓使用者可以很方便的連結到各個網頁來觀看 4. 網站上傳 : 製作網頁的環境是在個人電腦, 其它人沒辦法透過網路來觀看 ; 所以我們必須把做好的網站上傳到 Web 伺服器, 如此其它人才能觀看 5. 維護更新 : 將製作好的網站上傳後, 是不是就 ok 了? 當然不是, 不斷更新內容的網站, 才能吸引人再次光臨, 所以資料的更新是必須的! 2.

4 注意事項 1. 存檔檔名 : 儘量用英文來命名! 取名時也儘量符合內容, 方便日後的維護 2. 首頁 ( 網站的第一頁 ) 檔名 : 取決於 Web 伺服器的設定, 大部分 Web 伺服器設定為 index.html 3. 檔案要分類開啟 Dreamweaver CS3 開始程式集 Adobe Design Premium CS3 Adobe Dreamweaver CS3 今天將學到 : A. 定義網站 B. 建立新網頁與頁面屬性 C. 插入文字與圖片 D. 製作表格 E. 超連結的設定 F. 建立頁框 G. 網頁整合 H. 網站上傳 3.

A. 定義網站如果你使用 Dreamweaver 來管理網站, 並編輯網頁, 第一步你所要做的是定義一個網站, 通常定義網站可有兩種情況 : 定義新網站 : 從無到有, 新建立一個網站, 建議先在硬碟中建立一個新資料夾, 再定義名稱定義舊的網站 : 方式如同定義新網站, 但不用建立資料夾, 因為已經有了,

5 A. 定義網站如果你使用 Dreamweaver 來管理網站, 並編輯網頁, 第一步你所要做的是定義一個網站, 通常定義網站可有兩種情況 : 定義新網站 : 從無到有, 新建立一個網站, 建議先在硬碟中建立一個新資料夾, 再定義名稱定義舊的網站 : 方式如同定義新網站, 但不用建立資料夾, 因為已經有了, 你只是更改名稱罷了現在開始定義一個新網站,Dreamweaver CS3 網站定義使用精靈式的導引, 使用者只要按照步驟就可輕鬆完成設定作法 : 1. 在你的電腦的 C 槽中建立一個資料夾叫 classweb 2. 點選主要功能表的網站新增網站來建立新的網站 3. 輸入此網站名稱, 例如班級網頁, 按下一步 4.

$C:\classweb, 按下一步$

6 4. 選擇不, 我不要使用伺服器技術, 按下一步 5. 選擇在我的電腦上編輯本機複本,.., 將檔案存放在 C:\classweb, 按下一步 6. 選擇無, 暫不設定遠端伺服器的連線, 按下一步 5.

7 7. 最後, 在此精靈對話方塊中, 會依您前面的設定出現一個新的網站定義, 確認無誤後即可按下完成確定網站名稱和儲存路徑正確 8. 回到 Dreamweaver 工作環境中, 您將會在最右側的檔案面板中, 發現一個剛剛設定完成的班級網頁的新網站 6.

8 B. 建立新網頁與頁面屬性定義好網站後, 要開始建立網頁, 所有的網頁必須建立於此網站下, 這樣, 瀏覽者在觀看網頁時才不會有無法顯示網頁的情形發生每個網站都有一個首頁, 我們可以先從建立首頁開始, 再往下延伸其他的網頁內容作法 : 1. 在檔案面板裡直接按滑鼠右鍵, 選擇開新檔案, 此時會出現一個未命名的檔案, 請將檔名更改成 index.html 2. 接下來把 index.html 設為網站的首頁, 用右鍵點選 index.html, 再選擇設成首頁 7.

9 3. 設定好首頁後, 記得 Save 存檔, 再來作其他編輯動作 ( 檔名旁有星號 * 代表目前這個檔案您修正過後尚未存檔 ) 4. 要預覽網頁, 可以按下工作列上的鈕, 選擇預覽於 IExplore 或者直接按 F12 5. 將標題更改為我的班級網頁 6. 修改頁面屬性設定, 點選主要功能表的修改頁面屬性, 或直接在畫面空白處按滑鼠右鍵, 點選選單的最下面一個選項 8.

$C:\classweb\images 的$ back-02.gif 8.

10 7. 在背景影像的地方, 我們選擇放在 C:\classweb\images 的 back-02.gif 8. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 9.

$1. 在編輯畫面中輸入文字歡迎光臨我的班級網頁, 大小改為 24, 並且置中對齊 2. 插入圖片, 點選主要功能表的插入影像, 我們選擇放在 C:\classweb\images 的 enter.gif 3. 在影像標籤視窗的替代文字中, 輸入按此圖進入我的班級網頁 4. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 10.$

11 C. 插入文字與圖片插入文字在 Dreamweaver 編輯文字其實很簡單, 只要直接在空白的編輯視窗中輸入文字即可, Dreamweaver 也提供了一些文字段落文字對齊位置和文字設定等好用的基本功能, 使版面文字更加美觀有變化插入圖片一般網路上所使用的圖檔大多為 Jpg 及 Gif 格式, 這兩種格式的圖檔都有檔案小以方便網路傳輸下載的優點作法 : 1. 在編輯畫面中輸入文字歡迎光臨我的班級網頁, 大小改為 24, 並且置中對齊 2. 插入圖片, 點選主要功能表的插入影像, 我們選擇放在 C:\classweb\images 的 enter.gif 3. 在影像標籤視窗的替代文字中, 輸入按此圖進入我的班級網頁 4. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 10.

12 D. 製作表格表格在網頁中是一項重要的工具, 它不僅可以將資料排列整齊, 在網頁畫面的排版上, 我們更可以利用不同表格的排列以及它本身不同的設定, 來將圖文作一些排版變化, 使畫面更美觀, 達到文字排版指令無法達到的效果作法 : 1. 新增一張網頁, 在檔案面板裡直接按滑鼠右鍵, 選擇開新檔案, 將檔名更改成 myteacher.html 2. 插入表格, 點選主要功能表的插入表格, 3. 設定如下後, 按下確定 11.

$(C:\classweb\images 的$ teacher.

13 4. 輸入文字及插入圖片 (C:\classweb\images 的 teacher.gif), 表格可任意拉動調整 5. 框選儲存格後, 在底下的屬性面板選擇合適的背景顏色 6. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 12.

14 E. 超連結的設定從一個網頁連結到另一個網頁或是網站就是超連結作法 : 1. 新增一張網頁, 在檔案面板裡直接按滑鼠右鍵, 選擇開新檔案, 將檔名更改成 niceweb.html 2. 在網頁中輸入如下的文字班級相簿 : 學校首頁 : 3. 先選取要做超連結的文字, 再點選主要功能表的插入超連結 13.

15 4. 在設定超連結時, 必須指定兩項資訊此連結要連到哪個網頁或網址 ( 如下圖的 1) 所指定的連結內容要出現在哪個框架中, 請點選目標框架 ( 如下圖的 2) 1. 輸入網址 2. 選擇目標目標本身設定有四種 : _blank: 被連結的網頁以另一個新視窗開啟 _parent: 被連結的網頁開啟時將取代原網頁 _self: 被連結的網頁在原 Frame 中開啟 _top: 當最外圍的 Frameset 中的 Frame 又包含另一個 Frameset 時, 被連結的網頁在開啟的時候, 將取代最外圍的整個 Frameset 5. 如果連結的網頁不是自己做的, 是別人的網頁資訊, 千萬不可置於框架中, 以免觸犯智慧財產權最好的方式是以開新視窗 (_blank) 的方式連結 14.

只要下載有變更部分的頁框內容就可以了, 既方便閱讀又節省使用者下載時間作法 : 1.

16 F. 建立頁框頁框就是將網頁分割為兩個以上獨立部分的功能其實頁框的主要功能是讓網頁中選項 ( 按鈕 ) 的部份不動, 而會變動是選項所連結的內容頁面部分, 這樣就不用每次點選選項鈕時, 整頁的內容要重新下載, 只要下載有變更部分的頁框內容就可以了, 既方便閱讀又節省使用者下載時間作法 : 1. 新增一張網頁, 在檔案面板裡直接按滑鼠右鍵, 選擇開新檔案, 將檔名更改成 main.html 2. 將主要功能表的常用面板切換到版面面板, 並點選頁框鈕選擇上及左巢狀頁框 15.

17 4. 頁框標籤輔助功能屬性, 不用做修改, 請直接按確定即可 5. 請點選主要功能表的視窗頁框, 右下角會出現頁框面板, 我們要利用此面板來輔助建立頁框 16.

18 6. 現在我們要儲存整個頁框組, 請先選按此框選按此框 7. 接著點選主要功能表的檔案儲存頁框組或者直接在檔名上按右鍵儲存頁框組 17.

19 8. 我們將頁框組的檔名命名為 myclass 9. 接著儲存其他頁框, 點選主要功能表的檔案全部儲存或者直接在檔名上按右鍵全部儲存 18.

20 10. 電腦會依序儲存左頁框上頁框, 請分別命名為 left top, 中間的頁框是我們一開始就建立的 main.html, 所以不需要再儲存 11. 請檢查檔案面板中是否出現剛剛儲存的網頁 12. 每個網頁所代表的位置如下 myclass.html top.html left.html main.html 19.

$html ) 插入一張圖片, 檔案為 C:\classweb\images 的 banner-01.gif 2.$ $請在左頁框 ( left.html ) 插入按鈕, 檔案依序為 C:\classweb\images 的 button1.$

21 G. 網頁整合接下來, 我們要將所有網頁和元素整合成網站作法 : 1. 請在上頁框 ( top.html ) 插入一張圖片, 檔案為 C:\classweb\images 的 banner-01.gif 2. 請在左頁框 ( left.html ) 插入按鈕, 檔案依序為 C:\classweb\images 的 button1.gif button2.gif button3.gif button4.gif * 以班級網頁來說, 最新消息導師介紹班級成員介紹班級幹部活動花絮留言板討論區等等, 都是可以製作的項目 20.

html 這張網頁 5. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 6.

22 3. 設定超連結, 請在班級導師按鈕上按右鍵建立連結或者在底下的屬性面板設定連結 4. 將連結設定為 myteacher.html 這張網頁, 目標為 mainframe 所以當我點選班級導師這個按鈕時, 右邊的視窗會出現 myteacher.html 這張網頁 5. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 6. 連結正確後, 再依序設定其他按鈕 myteacher.html 目標為 mainframe niceweb.html 目標為 mainframe index.html 目標為 _ parent 21.

23 7. 郵件連結的作法, 在點選按鈕時, 在底下的屬性面板的連結方框中, 輸入 mailto : + 郵件地址, 目標為 _blank 8. 最後將首頁 ( index.html ) 與次頁 ( myclass.html ) 做連結點選首頁的 enter.gif 圖, 在底下的屬性面板設定連結為 myclass.html, 目標為 _ parent 點選此圖 9. 儲存後, 按下工作列上的鈕選擇預覽於 IExplore, 或者直接按 F12 預覽 22.

) 作法 : 1. 請開啟瀏覽器, 輸入下列網址 : ftp://mail2.tmue.edu.

24 H. 網站上傳製作網頁的環境是在個人電腦, 其它人沒辦法透過網路來觀看, 所以我們必須把做好的網站上傳到 Web 伺服器, 如此其他人才能觀看網站上傳方法 : 以本校 Web 伺服器為例 ( 如果是在入口網站申請的網頁空間, 使用方法請自行參考該網站的說明 ) 作法 : 1. 請開啟瀏覽器, 輸入下列網址 : ftp://mail2.tmue.edu.tw( 學生適用 ), ftp://tmue.edu.tw( 老師適用 ), 輸入完畢後請按 Enter 2. 此時會跳出對話視窗, 請輸入帳號密碼, 輸入完畢後請按登入 23.

25 3. 登入後, 尋找名為 public_html 的資料夾, 若沒有請先建立, 此資料夾將用來存放自己的所有網站資料 4. 選取存放在 C 槽的 classweb 資料夾複製 5. 切換到 ftp 視窗, 進入 public_html 這個資料夾按右鍵選貼上 24.

6. 如何看自己的網站?( 以本校 Web 伺服器為例 ) 請開啟瀏覽器, 輸入 : http://mail2.tmue.edu.tw/~ 帳號 ( 學生適用 ), http://tmue.edu.tw/~ 帳號 ( 老師適用 ) 因為我們還隔了一個 classweb 的資料夾才能看見 index.

26 6. 如何看自己的網站?( 以本校 Web 伺服器為例 ) 請開啟瀏覽器, 輸入 : 帳號 ( 學生適用 ), 帳號 ( 老師適用 ) 因為我們還隔了一個 classweb 的資料夾才能看見 index.html, 所以我們必須在帳號後面再加上 /classweb 例如 : 我的帳號為 g951111, 只要輸入就可以看到我的個人網站囉! 本講義參考網站 : 軟體大學請尊重智慧財產權, 不要將未授權的圖片或音樂等資料放置在個人網頁中, 以免觸法 25.

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling