網(wǎng)頁制作圖像和鏈接

網(wǎng)頁制作圖像和鏈接第一頁，共二十八頁，編輯于2023年，星期三第3章網(wǎng)頁中的圖像和鏈接3.1圖像的應用3.2圖像的編輯3.3使用外部圖像編輯器3.4實例制作3.5創(chuàng)建超鏈接3.6實例制作

第二頁，共二十八頁，編輯于2023年，星期三3.1圖像的應用3.1.1圖像基礎3.1.2圖像的插入第三頁，共二十八頁，編輯于2023年，星期三3.1.1圖像基礎網(wǎng)頁中只能使用壓縮比非常高的GIF（圖形交換格式）、JPG（靜止圖像壓縮格式）及PNG（可移植網(wǎng)絡圖形）三種格式的圖像。第四頁，共二十八頁，編輯于2023年，星期三1.GIF格式GIF格式（graphicsinterchangeformat）是目前網(wǎng)絡中應用最為廣泛的圖像壓縮格式采用LZW無損失壓縮算法，不會出現(xiàn)圖像效果的失真。分為靜態(tài)GIF和動畫GIF兩種，支持透明背景圖像，適用于多種操作系統(tǒng)，文件很小。最多只能顯示256種顏色。對于包含顏色數(shù)目較少的圖像，可選用GIF格式，如卡通、徽標、包含透明區(qū)域的圖形以及動畫等。第五頁，共二十八頁，編輯于2023年，星期三2.JPEG格式JPEG格式（JointPhotographicExpertsGroup）簡稱JPG，是應用最廣泛的圖片格式之一，它采用一種特殊的有損壓縮算法，將不易被人眼察覺的圖像顏色刪除，從而達到較大的壓縮比。JPEG支持24位真彩色，因此JPEG格式顯示圖像色彩豐富。照片、使用紋理的圖像和任何需要256種以上顏色的圖像等。第六頁，共二十八頁，編輯于2023年，星期三3.PNG格式PNG格式（PortableNetorkGraphics）是一種新興的網(wǎng)絡格式。該格式是目前保證最不失真的格式，它汲取了GIF和JPEG格式的優(yōu)點，存儲形式豐富，兼有GIF和JPEG格式的色彩模式。采用的也是一種無損壓縮算法，能真實再現(xiàn)圖像原貌，最多可以支持32位的顏色。第七頁，共二十八頁，編輯于2023年，星期三3.1.2圖像的插入1.直接插入選擇“插入”菜單中的“圖像”菜單命令，或單擊插入欄的“常用”選項卡中的圖像按鈕，或按Ctrl+Alt+I組合鍵。2.占位符插入選擇“插入”菜單中的“圖像對象”，在級聯(lián)菜單中單擊“圖像占位符”，或在“常用”插入工具欄中，單擊“圖像”按鈕旁邊的小三角形，在彈出的下拉菜單中單擊“圖像占位符”，打開“圖像占位符”對話框，在打開的對話框中設置后插入即可。

第八頁，共二十八頁，編輯于2023年，星期三3.2圖像的編輯3.2.1設置圖像大小3.2.2移動和復制圖像3.2.3圖片和文本的對齊方式3.2.4設置圖像邊框

3.2.5為圖像設置替換文字第九頁，共二十八頁，編輯于2023年，星期三3.2.1設置圖像大小1.拖動改變大小

選擇需要調整大小的圖像。拖動圖像的調整大小的手柄可快速改變圖像大小。

2.使用屬性面板

用屬性面板可以精確調整圖像的大小：輸入圖像的寬度/輸入圖像的高度。

3.使用代碼編輯器第十頁，共二十八頁，編輯于2023年，星期三3.2.2移動和復制圖像移動：鼠標拖曳復制：Ctrl鍵并用鼠標拖曳第十一頁，共二十八頁，編輯于2023年，星期三3.2.3圖片和文本的對齊方式1．圖像與文字相對位置的調整屬性工具欄內的“對齊”下拉列表框中有10個列表項，用來進行圖像與文字相對位置的調整。這些列表項的含義如下。“默認值”列表項：使用瀏覽器默認的對齊方式，不同的瀏覽器會稍有不同?！盎€”列表項：圖像的下沿與文字的基線水平對齊?！绊敹恕绷斜眄棧簣D像的頂端與當前行中最高對象（圖像或文本）的頂端對齊?！爸虚g”列表項：圖像的中線與文字的基線水平對齊?！暗撞俊绷斜眄棧簣D像的下沿與文字的基線水平對齊。“文本上方”列表項：圖像的頂端與文本行中最高字符的頂端對齊。“絕對中間”列表項：圖像的中線與文字的中線水平對齊。“絕對底部”列表項：圖像的下沿與文字的下沿水平對齊。文字的下沿是指文字的最下邊，而基線不到文字的最下邊。“左對齊”列表項：圖像在文字的左邊緣，文字從右側環(huán)繞圖像第十二頁，共二十八頁，編輯于2023年，星期三2．圖像與文字間距的調整圖像與文字的間距是指圖像與文字水平方向和垂直方向的間距，可以在屬性面板中改變“水平邊距”和“垂直邊距”文本框內的數(shù)值來實現(xiàn)，數(shù)值的單位是像素第十三頁，共二十八頁，編輯于2023年，星期三3.2.4設置圖像邊框常常可以給圖像添加一個邊框來美化圖像，選取圖像后，在屬性面板的“邊框”文本框中可以設置圖像邊框的寬度，單位為像素，“0”表示無邊框，默認圖像無邊框第十四頁，共二十八頁，編輯于2023年，星期三3.3使用外部圖像編輯器為現(xiàn)有的文件類型設置Photoshop外部圖像編輯器的具體操作步驟如下。1.單擊“編輯”菜單中的“首選參數(shù)”，打開“首選參數(shù)”對話框，從中選擇圖像的編輯器，從左邊的“分類”列表中選擇“文件類型/編輯器”，2.在“擴展名”列表中，選擇要為其設置外部編輯器的文件擴展名，選擇了名為.jpg.jpeg的擴展名。3.單擊“編輯器”列表上方的加號按鈕。在出現(xiàn)的“選擇外部編輯器”對話框中，游覽要作為此文件類型的編輯器啟動的應用程序，選擇Photoshop。4.單擊“打開”按鈕，回到參數(shù)對話框，如果希望該編輯器成為此文件類型的主編輯器，單擊“設為主要”按鈕，Photoshop后面加入了“主要”字樣。第十五頁，共二十八頁，編輯于2023年，星期三3.4實例制作3.4.1在網(wǎng)頁中插入圖片實例3.4.2鼠標經(jīng)過圖像的效果

3.4.3精美的網(wǎng)站相冊第十六頁，共二十八頁，編輯于2023年，星期三3.4.1在網(wǎng)頁中插入圖片實例一個漂亮的網(wǎng)頁中，必然少不了漂亮的圖片作為點綴。接下來我們要在“數(shù)學與計算機系”網(wǎng)站的主頁中插入兩幅圖片。第十七頁，共二十八頁，編輯于2023年，星期三3.4.2鼠標經(jīng)過圖像的效果鼠標經(jīng)過圖像是一種在瀏覽器中查看網(wǎng)頁時，鼠標光標經(jīng)過該圖像時，圖像發(fā)生變化的動態(tài)圖像。利用這種圖像，可以在頁面中實現(xiàn)豐富的交互效果，例如常見的按鈕變化、導航欄效果的變化、圖片變化。第十八頁，共二十八頁，編輯于2023年，星期三3.4.3精美的網(wǎng)站相冊在網(wǎng)上申請了自己的主頁空間，并且制作好個人主頁后，很多朋友想把自己的、朋友的或者自己喜歡的一些照片放到上面以供欣賞。Dreamwear8.0提供了這樣的一項制作網(wǎng)站相冊的功能，讓我們可以迅速地創(chuàng)建自己的相冊。第十九頁，共二十八頁，編輯于2023年，星期三3.5創(chuàng)建超鏈接3.5.1超級鏈接的類型3.5.2創(chuàng)建超鏈接的方法3.5.3創(chuàng)建錨點鏈接3.5.4創(chuàng)建E-mail鏈接3.5.5創(chuàng)建導航條3.5.6網(wǎng)頁中的圖像熱點鏈接

第二十頁，共二十八頁，編輯于2023年，星期三3.5.1超級鏈接的類型1.根據(jù)鏈接載體的特點，一般把鏈接分為文本鏈接和圖像鏈接兩大類。（1）文本鏈接：用文本作為鏈接載體，簡單實用。（2）圖像鏈接：用圖像作為鏈接載體，可使網(wǎng)頁美觀、生動活潑，它既可以指向單項鏈接，也可以根據(jù)圖像不同的區(qū)域建立多個鏈接。2.如果按鏈接目標分類，可以將超級鏈接分為以下幾種類型：（1）內部鏈接：同一網(wǎng)站之間的鏈接。（2）外部鏈接：不同網(wǎng)站文檔之間的鏈接。（3）錨點鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。（4）E-mail鏈接：發(fā)送電子郵件的鏈接。第二十一頁，共二十八頁，編輯于2023年，星期三3.5.2創(chuàng)建超鏈接的方法在屬性面板中建立超級鏈接有3種方法：直接輸入鏈接地址URL；拖曳指向文件圖標到“站點”窗口要鏈接的文件上；單擊該文本框右邊的文件夾按鈕，彈出“選擇文件”對話框，利用該對話框選定文件，在屬性面板中設置鏈接的位置。第二十二頁，共二十八頁，編輯于2023年，星期三3.5.3創(chuàng)建錨點鏈接1.單擊頁面內要設置錨點的地方，將光標移至此處。再單擊“插入”面板中“常用”選項卡內的“命名錨記按鈕”，彈出“命名錨記”對話框，2.在“錨記名稱”文本框內輸入錨點的標記名稱（例如MD1）。再單擊“確定”按鈕，退出該對話框。同時，在頁面光標處會產(chǎn)生一個錨點標記。3.選中頁面內的文字或圖像，再按照下述的方法之一建立它們與錨點的鏈接。（1）在“屬性”面板欄內的“鏈接”文本框內輸入“＃和錨點的名字”。例如，輸入“#MD1”，即可完成選中的文字或圖像與錨點的鏈接。（2）用鼠標拖曳“鏈接”欄的指向圖標到目標錨點上，再松開鼠標左鍵，即可完成選中的文字或圖像與錨點的鏈接。第二十三頁，共二十八頁，編輯于2023年，星期三3.5.4創(chuàng)建E-mail鏈接創(chuàng)建電子郵件鏈接的方法：首先定位光標，然后單擊“插入”工具欄上的“電子郵件鏈接”圖標，打開“電子郵件鏈接”對話框。在第一個文本框中輸入要鏈接的文字，在第二個文本框里輸入收件人的郵箱地址。按“確定”按鈕，返回編輯窗口，完成操作。第二十四頁，共二十八頁，編輯于2023年，星期三3.5.5創(chuàng)建導航條1.定位光標，在“常用”插入工具欄中，單擊“圖像”按鈕旁邊的小三角形，在彈出的菜單中單擊“導航條”按鈕，彈出“插入導航條”對話框。然后在該對話框中設置各個參數(shù)，2.在導航條中，每個圖像鏈接被稱為一個項目，所有的項目都顯示在“導航條元件”列表框中，剛開始只存在一個默認的導航條按鈕。在“項目名稱”文本框中輸入第一個導航條元件的名稱為“button1”。3.在“狀態(tài)圖像”文本框中輸入圖像文件的路徑和名稱，也可以通過單擊文本框右側的“瀏覽”按鈕，從磁盤上選擇已有的圖像文件。同插入圖像的操作一樣，如果圖像文件不在站點根文件夾內，會彈出對話框詢問是否將圖片復制到站點文件夾中。使用同樣的方法，為“鼠標經(jīng)過圖像”、“按下圖像”、“按下時鼠標經(jīng)過圖像”分別選擇圖像。第二十五頁，共二十八頁，編輯于2023年，星期三4.在“替換文本”文本框中輸入項目的描述性名稱。替換文本在純文本瀏覽器或設為手動下載圖像的瀏覽器中，替代圖像出現(xiàn)在應顯示圖像的位置。屏幕閱讀器讀取替換文本，而且有些瀏覽器在用戶鼠標滑過導航條項目時顯示替換文本。5.在“按下時，前往的URL”的文本框中輸入以選擇要打開的鏈接文件，單擊“瀏覽”按鈕，然后從彈出菜單中選擇打開文件的位置。6.選擇“預先載入圖像”復選框，可在載入頁面時下載圖像。如果未選擇此選項，在用戶將鼠標指針滑過鼠標經(jīng)過圖像時可能會出現(xiàn)延遲。7.對于“頁面載入時就顯示‘鼠標按下圖像’”復選框，如果選中它，訪問者瀏覽該網(wǎng)頁時，會先顯示在“按下圖像”文本框中設置的圖像；如果取消對該復選框的選擇，瀏覽該網(wǎng)頁時，會先顯示在“狀態(tài)圖像”文本框中設置的圖像。8.在“插入”下拉列表框中可以選擇導航條的排列方式，有兩個選項：“水平”和“垂直”。如果選擇“水平”，則導航條將水平排列；如果選擇“垂直”，則導航條將垂直排列。這里選擇“水平”。9.對于“使用表格”復選框，如果選中它，則使用表格來排列導航條中的元件。10.單擊加號按鈕向導航條添加另一個項目，然后重復上述步驟定義該項目。完成導航條項目的添加及定義后，單擊“確定”按鈕關閉“插入導航條”對話框。11.保存網(wǎng)頁文檔，然后按F12快捷鍵瀏覽該網(wǎng)頁。第二十六頁，共二十八頁，編輯于2023年，星期三3.5.6網(wǎng)頁中的圖像熱點鏈接創(chuàng)建圖像熱點鏈接，執(zhí)行