网页语言HTML快速上手.ppt

* 加上分隔線— hr * 加上分隔線— hr * 6-4-4 改變網頁背景 學會改變文字的格式後，還可以進一步把網頁的背景更換為彩色，或是加上背景圖片，讓網頁更加美觀 指定網頁的背景色 使用圖片做為網頁背景 * 指定網頁的背景色 要設定網頁的背景色，只要在body標籤中加上背景色 bgcolor屬性即可： * 在網頁中指定顏色的方法 在網頁中要指定顏色的方法有 2 種：一種是以十六進位法來指定，另一種則是以顏色的名稱來指定 在剛才的範例中，將網頁的背景色指定為 #ff0000，就是以十六進位法來表示, #ff0000 可解讀為 #RRGGBB * 在網頁中指定顏色的方法 RRGGBB 分別代表紅、綠、藍 3 色的十六進位值 (其範圍由 00 到 ff；00 為最小值，ff 為最大值)，這 6 碼的十六進位值代表 RRGGBB 混合後所得到的顏色，使用十六進位法表示色彩的好處，是可以對顏色的變化做細微的調整 以十六進位法來指定彩色，不須死背色碼值，只要在各大搜尋網站中以「色碼表」、「網頁色碼」、「網頁配色」、…等關鍵字來搜尋，即可找到許多提供色碼查詢的網站來參考 * 使用圖片做為網頁背景 除了更換網頁的背景色外，也可以使用圖片做為網頁的背景 要在網頁中加上背景圖片，只需在body標籤中加入 background 屬性，即可設定網頁背景圖片 請參閱範例檔案 Ch17-02.htm，要使用 bg.jpg 這張圖片做為網頁背景： * 使用圖片做為網頁背景 * 使用圖片做為網頁背景 加入背景圖片之後，網頁看起來就比較美觀，但為了不要讓網頁看起來太雜亂，建議不要使用太複雜的背景圖，以免喧賓奪主 * 在其他標籤中設定背景 用來設定背景的 bgcolor 或 background 屬性不只能用在 body 標籤中，也可以將它們運用在其他標籤中，例如用在 table 標籤為表格設定背景，例如： * 6-4-5 在網頁中插入圖片 想在網頁中加入圖片很簡單，只要在想放置圖片的地方輸入 img src = “圖片檔的路徑”， 瀏覽器就會自動在對應的位置加入圖片了 可以直接參考範例檔案 Ch17-03.htm，這個網頁中已加入圖片了，接著觀察網頁的原始碼，就可發現奧妙所在了： * 在網頁中插入圖片 * 在網頁中插入圖片 在 IE 按下網頁鈕，執行『檢視原始檔』命令，瀏覽該網頁的原始碼 * 6-5 加入超連結 超連結是網頁中最基本又實用的功能之一，只要利用滑鼠按一下有設定連結的地方 (圖片、文字…等)，即可連結到另一個網頁 (或是同一個網頁中的其他地方) 在 HTML 文件中用來建立超連結的標籤為 a 標籤，在 a 標籤中指出連結目標的 URL 後，瀏覽者只要在設定超連結的地方按一下，即可連結至該 URL： 以下就以實例來說明超連結的各種用途 * 什麼是 URL URL 的全名是 Uniform Resource Locator，是各類檔案或資源在網際網路上的位址 例如網站位址、電子郵件位址、檔案位址等，都是 URL 的一種 * 6-5-1 連到其他網站的超連結 現在要練習在網頁中建立一個連到旗標公司網站首頁的超連結，做法如下： * 連到其他網站的超連結 * 連到其他網站的超連結 寫在 a 和 /a 標籤之間的旗標公司就是設有超連結的文字 在瀏覽器中將滑鼠移到設有超連結的地方，會出現 圖示，只要在連結文字上按一下滑鼠左鈕，即可連上要連結的目標網頁 (在本範例中會連結至旗標公司網站) * 6-5-2 連到網站中的其他網頁 如果超連結是要連結到自己網站中的其他網頁，則寫法如下： 如果檔案放在其他資料夾中，就要再加上資料夾的路徑、檔名等，例如下面的語法，是要連結到 photo 資料夾中的 001.htm ： * 利用超連結提供檔案下載 當要在網頁中放置檔案供人下載，可將超連結直接指向網站中的檔案，例如 001.zip， 002.exe等 在瀏覽器中按下指向檔案的超連結，會跳出檔案下載交談窗，讓瀏覽者可以將檔案儲存到自己的電腦中，如下圖所示： * 利用超連結提供檔案下載 * 6-5-3 使用超連結啟動電子郵件程式 設定超連結除了能連結到網站，還可以利用超連結啟動電子郵件程式，寫法如下： 其中寫在 mailto:後面的就是要連結的電子郵件信箱 使用電子郵件超連結是為了方便和瀏覽者聯繫，因此還可以設定電子郵件的信件主旨，讓收信時能直接辨認出是瀏覽者的來信 * 使用超連結啟動電子郵件程式 只要在輸入電子郵件信箱位址時，在後面加上?subject=XXX，則XXX會顯示在郵件視窗的 主旨 欄位，如下所示： * 使用超連結啟動電子郵件程式 著作權所有 ? 旗標出版股份有限公司 網頁語言 HTML 快速上手 * 本章重點