利用Dreamweaver软体作网页

1、利用Dreamweaver軟體作網頁1. 參考網站：.tw/chi/2. 簡單地建立一個網頁：a. 在電腦D槽建立一個資料夾，取名為Chinese-site(資料夾名稱可以自已決定)。b. 在這個資料夾中建立一個檔名為index.html的檔案，做為本網頁的第一個檔案。(網站的第一個網頁一般取名index.htm或index.html，配合本校server設定，請統一取名為index.html)c. 快按2下會將檔案開啟在IE瀏覽器，點選檢視 / 原始檔，輸入想要在網頁呈現的文字(如：虎尾高中國文科網站)，存檔後關掉這個檔案；重新由檔案總管開啟這個檔

2、案，可以看到網頁內容多了剛剛輸入的文字。3. 為了讓網頁的內容更豐富，且編輯更方便，可利用網頁編輯軟體，如：Dreamweaver來編輯網頁。4. 開啟Dreamweaver軟體。(一般來說，安裝後從程式集 / Macromedia / 可以找到，電腦室的版本為 Macromedia Dreamweaver 8 )5. 建立網站：<圖一><圖二>a. 點選右邊的管理網站(如圖一)b. 點選新增/網站(如圖二)c. 切換到進階，網站名稱修改為國文科網站(網站名稱可自行決定)，本地根資料夾按右邊黃色的資料夾，選取步驟2建立的資料夾。6. 在index.html這個檔案快按2

3、下，將index.html這個檔案開啟，此時可開始用Dreamweaver來編輯這個網頁檔案。7. 改變文字的格式：將要改變的文字反白，在屬性視窗中可以選取樣式、大小、顏色等。8. 改變背景顏色：點選工具列的修改 / 頁面屬性，點選背景顏色，選取一個想要的背景顏色。9. 改變背景影像：a. 背景除了可以設定背景顏色外，還可以設定背景影像。(請先確定檔案總管中，要用的背景檔複製到跟網頁檔相同的資料夾，如下圖，index.html是現在正在編輯的網頁檔，back060003.jpg是要設定的背景圖片)。b. 回到Dreameweaver軟體，點選工具列的修改 / 頁面屬性，點選背景影像的瀏覽按紐，

4、選取想設定的背景影像檔案。10. 利用圖層改變文字的位置：點選工具列的插入 / 版面物件 / 圖層，會出現一個方框，在方框上可輸入文字或圖片，方框可移動，移動時文字或圖片會跟著移動，方框的外框在瀏覽時不會出現！11. 將文字改成用圖片的形式呈現：a. 參考影像處理講義的步驟3，先製作好文字圖片。b. 刪除原本的文字虎尾高中國文科網站。c. 點選工具列的插入 / 影像，選取要用的圖片檔案。12. 滑鼠變換影像：a. 目的：游標移到某圖片時，此圖片會變換成另一張圖片的效果。b. 參考影像處理講義的步驟4，先製作好兩張圖片。c. 加入一個圖層，游標移到圖層內部。d. 點選工具列的插入 / 影像物件

5、/ 滑鼠變換影像。e. 如下圖，原始影像就是選擇游標沒移進圖片範圍時要出現的圖片檔案(按瀏覽按紐來選取)，滑鼠變換影像就是選擇游標移到圖片的範圍時要出現的另一張圖片檔案)f. 說明：在Dreamweaver編輯畫面時，看不到滑鼠變換影像的效果，請先存檔後，從檔案總管按兩下index.html這個檔案開啟後才看得到。13. 網頁間的連結：a. 目的：點選某些文字或圖片時，網頁可以切換到另一個網頁(也就是另一個檔案)。b. 先建立好要切換的另一個檔案。如下圖，將檔案名稱取為chinese.html(可以自行決定檔案名稱，但不建議用中文檔名，附檔名可為.htm或.html)c. 選取文字或圖片，在屬

6、性視窗的連結的右邊按一下黃色的資料夾，選取要連結過去的網頁檔案即可。14. 在Dreamweaver中，開啟chinese.html這個檔案，參考上述步驟，加入背景圖片及文字。15. 影像地圖(一張圖片中，可任選某一區，連結到不同的網頁檔或網站)：a. 參考影像處理講義步驟5，先作好一張選單的圖片。b. 參考上述步驟，將圖片加入在chinese.html的網頁中。c. 點一下圖片，在屬性視窗中，按一下地圖中的矩形。d. 在圖片中框出要連結的範圍，在屬性視窗的連結選取要連結的檔案或網址，或是mail。i. 如果是要連結mail，請輸入 mailto:，後面接e-mail address(如：ma

7、ilto:.tw)ii. 如果是要連結某網站，請輸入某網站完整網址(如：.tw)，並在目標選取_blank。iii. 如果是要連結另一個檔案，則直接按一下連結右邊的資料夾圖示，選取要連結的檔案。16. 移動的公佈欄：a. 先拉一個圖層，圖層編號取名為parent(可任取)。parent圖層當成底層。b. 游標點一下圖層內部(注意，這個動作很重要，這樣等一下接出來的圖層才會是parent的子圖層)，再拉一個圖層，取名為child。child圖層當成公佈欄，輸入要公佈文字的地方。把child拉到parent的下方。c. 開啟時間軸視窗：從工具列的視窗 / 時間軸。d. 把child拉到時間軸內，時間軸拉長到60影格(預設為15影格)。e. 點一下60的地方後，把畫面中的child拉到parent的上方。也就正當在1影格時，child在下方，時間跑到60影格時，ch