利用Dreamweaver軟體作網(wǎng)頁

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

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

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

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

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

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

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