利用 Dreamweaver 建立圖文網頁

1. 利用 Dreamweaver 建立圖文網頁

2. 文字與影像的組合 文字與影像是網頁最基本的元素，像印刷文件一樣，藉著文字與影像的組合，將各種資訊呈現在網頁中。

3. 文字操作 • 文字輸入 • 您可以直接在文件視窗中輸入文字，移動插入點符號到要輸入文字的位置，按一下滑鼠左鍵就可以開始輸入文字。 • 文字換行 • 自動換行：輸入文字時，超過文件視窗寬度，會自動跳到下一行。 • 強制換行 ：按 Shift+Enter 鍵，不會產生空白行。 • 段落換行 ：按 Enter 鍵，段落之間會增加一行空白 • 水平線的增加 • 在文件視窗輸入文字，移動插入點到第 2 段落起始，按一下滑鼠左鍵。 • 執行「插入 -HTML- 水平線」指令，就可以插入水平線。 • 選取水平線，參考以下說明，在屬性面板設定屬性。 • 寬 / 高：使用像素或頁面百分比，指定水平線的寬度和高度。 • 對齊：設定水平線的對齊方式。 • 立體效果：設定是否套用陰影效果。

4. 影像圖片處理 • 格式： GIF、JPEG 和 PNG。 • 位置：在網站根目錄新增 [Images] 資料夾，存放所有的影像檔案。 • 插入圖片 • 按一下要插入影像的位置，執行「插入影像」指令。 • 選取要插入的影像，按[ 確定] 鈕。 • 影像會顯示在文件視窗。

5. 影像處理進階-去背 在網頁中插入影像，如果未經去背處理，可能會產生突兀的視覺效果。參考以下說明，將影像處理後，可以和網頁呈現完美的結合。

6. 假設該修改的檔案名稱為 logo.jpg • 執行「檔案- 開新檔案」指令，新增空白HTML 文件。 • 執行「修改- 頁面屬性」指令，設定網頁背景顏色。 • 執行「插入- 影像」指令，選取logo.jpg，將影像插入文件視窗。 • 在文件視窗選取影像，在屬性面板按一下[ 編輯影像設定] 圖示。 • 在對話方塊執行以下動作。 • 選取 [ 格式：GIF]。 • 選取 [ 索引色透明 ]。 • 按 [ 確定 ] 鈕。 • 將影像儲存為 logo.gif。 • 文件視窗中的將影呈現去背效果。 • 開啟瀏覽器檢視網頁。

7. 影像處理進階-對齊 插入影像後，您可以將影像對齊文字、其他影像、外掛程式或同一行中的其它元素，也可以設定影像的水平對齊方式。

8. 影像處理進階-網頁背景

9. 首先你必須先有一張背景圖 background.jpg • 使用Dreamweaver套用背景 • 開啟檔案 • 執行「修改- 頁面屬性」指令，按[ 瀏覽] 鈕。 • 選取背景影像background.jpg，按[ 確定] 鈕。 • 背景影像已經套用至網頁。 • 將網頁存檔。 • 預覽網頁。

10. 連結 透過文字或影像連結到其它的文件。 連結的種類可以分為以下： • 文件：連結到另一個文件或檔案，例如影像、影片、PDF 檔案或壓縮檔等。 • 錨點：連結到錨點，也就是跳到文件的特定位置。 • 電子郵件：建立空白電子郵件，自動填上收件者的電子郵件地址。

11. 滑鼠指標遇到超連結，會顯示 [ 手指 ] 圖案，按一下，就可以開啟連結的文件。

12. 文字連結 從文字建立連結，按下文字後會開啟連結的文件。 STEP1選取要建立連結的文字。 STEP2 按一下屬性面板的[ 瀏覽檔案] 圖示。 STEP3 選取你所要建立連結的檔案，按[ 確定] 鈕。 STEP4 屬性面板會顯示連結的文件。 STEP5 設定連結文字會自動加上底線。 STEP6 預覽網頁，按下連結開啟網頁。

13. 連結電子郵件 在網頁中插入一個電子郵件的連結，網友要寫信給您的時候，按一下連結即可開啟電子郵件程式 ( 例如 Outlook )，並自動填上收件人的電子郵件。 1.選擇你要輸入電子郵件連結的文字 2.執行「插入- 電子郵件連結」指令 3.在屬性面板輸入電子郵件的連結語法。 mailto: 電子郵件 ， 如：mailto:ifangsu@center.fotech.edu.tw 4.F12測試電子郵件連結的動作。

14. 錨點的建立 • 對於內容較多的文件，為了方便使用者的瀏覽，可以使用錨點來建立連結。建立錨點後，就可以連結錨點，讓使用者快速跳到文件中指定的位置。

15. 影像地圖 影像地圖可以讓網頁的版面更美觀，而且製作出來的網頁不會因瀏覽器的不同，而造成視覺上的差異。影像地圖可以在同一張影像建立多個連結區域，按下連結區域就可以開啟連結。

16. 1.首先在你的網頁上面你必需要有一張圖片或者一段文字1.首先在你的網頁上面你必需要有一張圖片或者一段文字 如以下範例圖： 2.假設今天你要針對上圖中的兩個人物， 丁小雨與大丙博士建立兩個連結，則方法如下： 2.1 先點選該圖 2.2 選擇屬性面版中的連結區域方式（方形，圓形或不規則型） 在我們的範例中因為小雨不是圓形也不是方形，所以我選用 不規則型 2.3 描好圖形後 2.4在影像選取連結區域，設定連結 2.5重複2.1-2.4的步驟選另外丁大丙

17. 錨點應用 以下練習製作一個影像導覽的頁面，包含 [ 滑鼠變換影像 ] 和 [ 錨點 ] 的應用。

18. 錨點應用 執行「插入- 命名錨點」指令，依序插入5 個錨點。

19. 錨點應用 將插入點置於第1 個錨點下方。 執行「插入- 影像物件- 滑鼠變換影像」指令，參考下圖的設定，插入滑鼠變換影像。 文件視窗顯示插入的滑鼠變換影像。

20. 參考下圖，插入更多的滑鼠變換影像。

21. 執行「插入-HTML- 水平線」指令，在縮圖下方插入水平分隔線。

22. 執行「插入- 影像」指令，在第2 錨點下方插入image1.PNG影像。

23. 執行「插入- 影像」指令，在第3 錨點下方插入image2.PNG 影像。

24. 執行「插入- 影像」指令，在第4 錨點下方插入image3.PNG影像。

25. 執行「插入- 影像」指令，在第5 錨點下方插入image4.PNG影像。

26. 執行「插入- 影像」指令，在第3 錨點右方插入goback.GIF影像。 參考下圖，設定屬性面板的內容。

27. 將上一個步驟插入的影像，複製到每張影像的下方。將上一個步驟插入的影像，複製到每張影像的下方。