1 / 42

第 7 章

第 7 章. 設定網頁背景與音樂. 本章提要. 加入網頁背景 加入背景音樂. 加入網頁背景. 使用單一色彩做為背景 使用圖片做為背景 加入背景圖的注意事項及應用技巧. 加入網頁背景. 網頁背景可分為 2 種。 如果你只是想讓網頁有不同的顏色 , 可選擇第 1 種將網頁背景設定為單一顏色；第 2 種則是選擇圖片做為網頁的背景。. 使用單一色彩做為背景.

tokala
Download Presentation

第 7 章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 7 章 設定網頁背景與音樂

  2. 本章提要 • 加入網頁背景 • 加入背景音樂

  3. 加入網頁背景 • 使用單一色彩做為背景 • 使用圖片做為背景 • 加入背景圖的注意事項及應用技巧

  4. 加入網頁背景 • 網頁背景可分為 2 種。 • 如果你只是想讓網頁有不同的顏色, 可選擇第 1 種將網頁背景設定為單一顏色；第 2 種則是選擇圖片做為網頁的背景。

  5. 使用單一色彩做為背景 • 如果不喜歡太花俏的背景, 也不想要白白的底色, 我們可以設定單一色彩的背景。請開啟一個新的網頁, 然後在網頁中按右鈕選擇『網頁內容』命令 (或執行『格式/背景』命令), 開啟網頁內容/設定格式交談窗：

  6. 使用單一色彩做為背景

  7. 使用單一色彩做為背景

  8. 設定網頁文字的顏色 • 在網頁內容/設定格式交談窗的色彩區中, 除了可以設定背景顏色外, 還可以改變網頁預設的文字色彩來搭配背景。

  9. 設定網頁文字的顏色

  10. 設定網頁文字的顏色

  11. 設定網頁文字的顏色 • 回到網頁中, 文字就會變成剛才所設定的顏色, 而之後再輸入的文字也會自動顯示為你所設定的顏色。 • 若要變更部份文字的顏色, 仍可以在選取文字後, 利用格式工具列來加以更改。

  12. 設定網頁文字的顏色

  13. 設定超連結文字的顏色 網頁中超連結的文字, 可依 3 種情況顯示不同的顏色： • 超連結：文字已設定超連結, 且超連結目標不曾被瀏覽過, 預設會呈現寶藍色。 • 瀏覽過的超連結：已瀏覽過的超連結目標, 預設會呈現深紫色。 • 使用中的超連結：正在連線中的超連結文字顏色, 預設是紅色。

  14. 設定超連結文字的顏色 • 在網頁內容/設定格式交談窗, 可改變以上 3 種情況的預設色彩：

  15. 使用圖片做為背景 • 如果覺得使用單一顏色的背景太單調, 也可以選張漂亮的圖片來當做背景圖案。 • 請開啟練習檔 ex07-01.htm, 在網頁上按右鈕選擇『網頁內容』命令, 開啟網頁內容/設定格式交談窗：

  16. 使用圖片做為背景

  17. 使用圖片做為背景

  18. 使用圖片做為背景 • 回到網頁內容/設定格式交談窗, 再按下確定鈕, 即可預覽效果。

  19. 自動拼接背景圖片 • 當我們選擇尺寸小於網頁的圖片做為背景圖片時, 瀏覽器會自動以拼接的方式將背景圖案填滿整個瀏覽器視窗, 所以不必擔心會有留白的情況。

  20. 自動拼接背景圖片

  21. 浮水印 • 若背景圖片啟動了浮水印功能, 圖片就像直接嵌在背景中, 不會隨著文字捲動, 非常適合用在大張圖片的背景效果。 • 在本書範例網站中『相片編修技巧』的各個主題均已套用了浮水印效果, 你可以開啟瀏覽器來看看效果。 • 請開啟練習檔 ex07-02.htm, 在網頁上按右鈕選擇『網頁內容』命令, 開啟網頁內容/設定格式交談窗：

  22. 浮水印

  23. 浮水印 • 完成後請切換到預覽模式或開啟瀏覽器來檢視。 • 浮水印效果必須是以圖片做為背景時才能勾選, 如果是以單一色彩做為背景, 是無法設定浮水印效果的。

  24. 浮水印

  25. 浮水印

  26. 加入背景圖的注意事項及應用技巧－加入背景圖的注意事項加入背景圖的注意事項及應用技巧－加入背景圖的注意事項 • 圖片顏色不要太過強烈或鮮艷：顏色太鮮豔或太複雜的圖片, 反而使人看不清楚網頁上的文字。若圖片實在太亮眼, 又想用它做為背景, 可先如前面所述將背景設定好, 再執行『檢視/工具列/圖片』命令, 在不選取任何圖片的狀態下, 按下色彩鈕, 並選擇『刷淡』效果, 這樣看來會比較舒服。

  27. 加入背景圖的注意事項 • 圖片與文字的搭配：深色背景圖要搭配淺亮色的文字；反之, 淺色背景圖就要搭配深暗色的文字, 這樣文字才夠清晰。 • 建議使用小圖：網頁背景圖是以拼接的方式重複排列而成, 所以只要準備一張小圖片, 就會自動填滿整個網頁。這樣的好處是圖片小, 檔案自然也就小, 下載網頁及圖片的時間就會相對縮短。

  28. 加入背景圖的注意事項 • 注意拼接時的接縫問題：最好先用影像處理軟體來製作無接縫的圖片。

  29. 加入背景圖的注意事項 • 最適合的解析度與背景圖尺寸：若想要用一張大圖做背景, 且不產生拼接效果, 則需注意網頁內容不能超過背景圖片。而網頁在各螢幕解析度上建議搭配的背景圖片尺寸如下表：

  30. 背景圖片的應用技巧 • 我們可以將背景圖製作成長條形, 然後藉由背景圖拼接的特性, 產生出創意十足且檔案容量小的背景圖片。 • 以下舉出幾個例子, 你也可以利用同樣的原理, 製作出其它效果的背景圖片。

  31. 背景圖片的應用技巧

  32. 背景圖片的應用技巧

  33. 背景圖片的應用技巧

  34. 背景圖片的應用技巧

  35. 注意螢幕解析度！ • 由於目前使用 1024 × 768 解析度的人越來越多, 所以圖片的水平長度至少要有前面提到的 955 像素。

  36. 加入背景音樂 • 背景音效的檔案格式 • 設定背景音樂

  37. 背景音效的檔案格式 較常用的聲音格式有以下 5 大類, 共 9 種檔案格式： • Wave 檔：*.wav。 • Midi 編曲程式檔：*.mid。 • Real Audio 檔：*.ram、*.ra。 • Aiff 聲音檔：*.aif、*.aifc、*.aiff。 • Au 聲音檔：*.au、*.snd。

  38. 背景音效的檔案格式 • 其中 MIDI 檔可說是最受歡迎, 也最普遍被使用的檔案格式。 • 它最大的特點是檔案容量小, 因此在 Internet 上的傳輸速度會比其它檔案格式快, 所以適合拿來當做網頁的背景音樂。 • mp3 檔案格式可說是目前音樂格式的當紅炸子雞, 若想在網頁上加入 mp3 的音樂格式, 請參考第 13 章的說明。

  39. 設定背景音樂 • 只要在瀏覽器開啟本書範例網站的數位編修王-連結鈕(mainframe-left.htm) 網頁, 或是將網頁切換到預覽頁次, 就會開啟播放音樂。 • 請開啟練習檔 ex07-04.htm, 在網頁的任何一處按下滑鼠右鈕, 選擇『網頁內容』命令, 開啟網頁內容/一般交談窗：

  40. 設定背景音樂

  41. 設定背景音樂

  42. 設定背景音樂 • 回到網頁內容/一般交談窗後, 還可進一步對播放效果做設定：

More Related