活動網頁插入圖片

插入圖片的說明分為以下主題:

  1. 如何上傳圖片
  2. 修改圖片大小
  3. 加入圖片說明文字
  4. 修改圖片位置
  5. 插入超連結
  6. 插入邊框

打開網頁編輯頁,你會看到myRegie選用的編輯器,裡面有個上傳圖片的圖示,點選後你會看到下圖的畫面,今天的所有功能就從它開始喔!

圖片編輯介面

1. 上傳圖片

當你按下圖片的按鈕後,會出現同上圖的畫面,請選取"瀏覽伺服器端"的按鈕,請選取你要上傳的檔案並upload,就可以把圖片上傳到myRegie摟!

上傳後你會看到像下圖一樣的畫面,myRegie會提供預覽,並顯示圖片的大小(單位為像素(px))。再按下確定後,圖片就會新增到網頁內摟!

新增圖片之範例

2. 修改圖片大小

當你把照片上傳到myRegie後,系統會自動幫你抓到圖片的大小。

在myRegie,網頁的寬度分別是: 水平選單約748px;垂直選單580px。myRegie建議您如果你的圖片超過網頁大小,你可以自己在寬度及高度的欄位進行調整,只需要輸入寬度,系統會自動幫你設定高度喔!若你想要自訂圖片的寬度及高度比,請點選旁邊的鎖頭就可以強制鎖定寬高比,將強制鎖定寬高比例的設定拿掉,即可自訂寬度及高度。那麼~一不小心把圖片稿到變形時,請不用擔心,只要按下重設圖片大小,系統會幫你把圖片寬度及高度再抓回來喔!

3. 加入圖片說明文字

眼尖的你,是不是有看過有些網頁的圖片當你滑鼠滑過的時候就會有一段文字說明呢?! 這個功能用HTML編輯器很容易就完成了。當你把圖片選好後,只要在圖片下方的"替代文字"欄位輸入訊息,就完成圖片的文字說明1摟!

圖片說明文字範例圖片

4. 修改圖片位置

圖片預設的位置跟文字一樣,是靠左邊對齊。若要讓它改變位置,請選擇"對齊"的下拉式選單,內建了許多的圖片對齊方式,你可以任意選取並可透過右方預覽顯示方式。預設的格式是圖片靠左且文字在下方的對齊方式,如下圖所示。

圖片位置範例圖片

5. 插入超連結

圖片不只是圖片,它還可以插入超連結當作按鈕用喔!

圖片上傳後,請直接選擇"超連結"的分頁,在URL的欄位內填入圖片要引導的網址就完成摟!在URL的下方還有一個下拉式選單。

加入超連結的示範頁面

若你希望網頁是用新視窗開啟的話,請選擇"新視窗(_blank)"這個選項。若不選取的話,預設直接在原本的視窗開啟(即"本視窗(_self)")。呈現的效果如下

本視窗(_self)
用原本視窗開啟myRegie首頁

新視窗(_blank)
開啟開新視窗至myRegie首頁

6. 插入邊框

看了上面的幾個說明後,你有沒有發現有的圖片有被加上邊框(如第3點及第4點),有些則沒有(如第1點、第5點)。只要在邊框的欄位填入框線的粗細就可以設定了。若是一般的圖片,預設的邊框是"0",所以沒有邊框,希望加上邊框的話,直接填入數字即可,例如上面的範例圖片都是用邊框為1px來做示範。圖片若是被當作超連結的按鈕時,預設的邊框是"1",反推回來,不希望有邊框出現,所以把那個欄位填入"0",你的超連結按鈕就像上圖的myRegie logo一樣沒有框線摟!

以上是HTML編輯器的圖片應用,這些是最常用且基本的功能,希望大家可以利用編輯器就做出美美的網頁喔!!

備註:

1. 圖片說明文字的功能,只有在IE6、IE7可以看到。若使用IE8、Firefox、Safari等瀏覽器的網友就無法看到摟!