如何新增圖片模塊、如何更換原有的圖片、如何線上調(diào)整圖片的尺寸或者編輯圖片、如何為圖片添加鏈接、如何為圖片模塊添加邊框背景等等
提示：，每張圖的大小不超過(guò)512KB（一般網(wǎng)頁(yè)圖片，小圖40KB、大圖100KB已經(jīng)非常清晰）；上傳前，請(qǐng)根據(jù)個(gè)人需要先調(diào)節(jié)好圖片的尺寸比例（如正方形圖1:1，長(zhǎng)方形圖3:2或者4:3或其它比例）以節(jié)省時(shí)間。請(qǐng)不要?jiǎng)h除正在使用的任何一張圖片，否則可能會(huì)造成頁(yè)面模塊無(wú)法顯示等現(xiàn)象。

1. 添加圖片模塊--給網(wǎng)頁(yè)添加一張圖片
首先，點(diǎn)擊頁(yè)面左上角“添加”, 在彈出功能條中選擇“圖片”并拖至頁(yè)面中的任意位置：
 松手，該模塊添加成功，后續(xù)仍可以鼠標(biāo)拖動(dòng)該模塊進(jìn)行任意移動(dòng)。松手后，系統(tǒng)會(huì)自動(dòng)彈出圖片選擇界面：

在這個(gè)界面，您可以選擇使用：
a. 我的圖片：本地上傳的所有圖片和最近使用過(guò)的圖片都會(huì)顯示在這個(gè)分類中（如果之前添加過(guò)子分類，如“example”等，則需要點(diǎn)擊 “example”后方可選擇這個(gè)類別下的圖片）。點(diǎn)擊指定圖片中間的“選擇使用”即可更換使用這張圖片。
 
b. 互聯(lián)網(wǎng)圖片：點(diǎn)擊后會(huì)出現(xiàn)輸入圖片URL的界面：
 URL地址必須為一張圖片在某個(gè)網(wǎng)頁(yè)上的地址，注意，這個(gè)地址必須是以圖片格式后綴結(jié)尾的，如：
https://screenshots.xxxxxxxx.com/screenshots/school-13-a.jpg
 注意：如果使用互聯(lián)網(wǎng)圖片，系統(tǒng)會(huì)自動(dòng)在“我的圖片”處保留一個(gè)副本，屆時(shí)也可以選擇直接使用保存好的圖片而放棄URL鏈接（URL鏈接方式的弊端：如果對(duì)方網(wǎng)頁(yè)撤除這個(gè)圖片，自己的網(wǎng)頁(yè)上將無(wú)法顯示，因這個(gè)URL鏈接已經(jīng)不再存在）
c. 重新上傳一張圖片：點(diǎn)擊右手邊的“上傳文件”上傳后再按a的流程選用即可
 2. 替換現(xiàn)有模板中的圖片
如果喜歡模板中原有的布局，可以直接將模板中的某個(gè)圖片替換成自己的圖片以節(jié)省設(shè)計(jì)時(shí)間。（注意：請(qǐng)調(diào)整自己的圖片尺寸比例以配合本身設(shè)計(jì)的比例）
替換的步驟：
1）雙擊圖片或者單擊圖片后點(diǎn)擊該圖片的“屬性”，系統(tǒng)彈出“圖片設(shè)置”的菜單

 
點(diǎn)擊“更換圖片”, 系統(tǒng)會(huì)彈出圖片文件管理器, 然后選擇新的圖片進(jìn)行替換即可，步驟與上面提及的“添加新的圖片模塊”是一致的。

3. 直接在頁(yè)面上調(diào)整圖片尺寸
頁(yè)面調(diào)整分為兩種：縮放模式和裁剪模式，這兩種模式可以通過(guò)點(diǎn)擊該功能標(biāo)互換
 和 
縮放模式：整圖縮放，類似放大鏡的功能，但處理不當(dāng)，可能出現(xiàn)壓縮的情況。此功能并不改變系統(tǒng)中已保存的圖的大小尺寸，僅在顯示的部分上作出調(diào)整，仍可以通過(guò)恢復(fù)高或?qū)挾葋?lái)恢復(fù)到原圖的樣子
圖片上傳成功并顯示在網(wǎng)頁(yè)上, 我們可以通過(guò)拖動(dòng)圖片模塊的右下角邊線來(lái)調(diào)整圖片的顯示的尺寸。頁(yè)面上直接調(diào)整大小可能會(huì)造成圖片被擠壓。為達(dá)到最好的圖片展示效果，建議上傳前先調(diào)整好圖片的尺寸和比例。
裁剪模式：固定圖片的一邊，減少顯示的部分。此功能并不改變系統(tǒng)中已保存的圖的大小尺寸，僅在顯示的部分上作出調(diào)整，仍可以通過(guò)恢復(fù)高或?qū)挾葋?lái)恢復(fù)到原圖的樣子
左中右：原圖、縮放模式、裁剪模式

4. 編輯圖片并修改原圖
我們?yōu)榻ㄕ臼褂谜咛峁┝艘惶讏D片編輯插件, 在這里您只需要簡(jiǎn)單的操作, 即可對(duì)自己已經(jīng)上傳并添加至頁(yè)面上的圖片進(jìn)行編輯, 而無(wú)需使用專業(yè)化的圖片編輯軟件, 鼠標(biāo)選中圖片模塊并點(diǎn)擊模塊上方“圖片編輯”功能按鈕  . 系統(tǒng)會(huì)彈出下面界面：
 
圖片編輯功能, 預(yù)設(shè)有美化圖片、人像美容、拼圖、動(dòng)畫(huà)再功能，每種功能有不同效果。具體的每項(xiàng)功能, 您可以在實(shí)踐中慢慢體會(huì)。請(qǐng)記得每做一次調(diào)整，必須點(diǎn)擊“應(yīng)用”再進(jìn)行下一步的調(diào)整或者編輯。

5. 給圖片建立一個(gè)鏈接
雙擊圖片或點(diǎn)擊圖片上的屬性功能按鈕  , 系統(tǒng)彈出圖片設(shè)置對(duì)話框, 點(diǎn)擊“設(shè)置鏈接“按鈕，可以選擇鏈接到：頁(yè)面、站外鏈接、郵件、文件、文章列表、文章詳情、產(chǎn)品列表、產(chǎn)品詳情。

a. 鏈接至頁(yè)面：
在下拉框中選擇對(duì)應(yīng)的頁(yè)面名稱，如需在新窗口中打開(kāi)這個(gè)鏈接，則勾選“在新窗口中打開(kāi)連接”。完成后，點(diǎn)擊“保存”后，對(duì)全局進(jìn)行一次保存，即可預(yù)覽效果。

b. 鏈接至站外鏈接：
在空白處寫(xiě)入目標(biāo)網(wǎng)頁(yè)地址，如需在新窗口中打開(kāi)這個(gè)鏈接，則勾選“在新窗口中打開(kāi)連接”。完成后，點(diǎn)擊“保存”后，對(duì)全局進(jìn)行一次保存，即可預(yù)覽效果。

c. 鏈接到文件
鏈接到文件指的是鏈接到已經(jīng)上傳在文件夾中的文件。點(diǎn)擊時(shí)會(huì)直接打開(kāi)這個(gè)文件（前提是訪客的電腦必須支持這個(gè)文件的程序類型，如word文檔）

d. 鏈接至電子郵件
輸入目標(biāo)電子郵件地址和郵件的主題，點(diǎn)擊“保存”后預(yù)覽，訪客點(diǎn)擊相應(yīng)的文字，只要這個(gè)訪客的電腦有安裝郵件本地客戶端，如outlook或者foxmail,電腦系統(tǒng)會(huì)自動(dòng)彈出一個(gè)使用outlook或者foxmail發(fā)送電郵給contact@yourdomain.com的主題為“產(chǎn)品咨詢”的郵件，訪客只需要填寫(xiě)郵件內(nèi)容即可。
 

e. 鏈接至文章列表
點(diǎn)擊“文章列表”，出現(xiàn)下列界面，選擇對(duì)應(yīng)目標(biāo)列表頁(yè)和分類即可；如需在新窗口中打開(kāi)這個(gè)鏈接，則勾選“在新窗口中打開(kāi)連接”。完成后，點(diǎn)擊“保存”后，對(duì)全局進(jìn)行一次保存，即可預(yù)覽效果。

f. 點(diǎn)擊“文章詳情”，出現(xiàn)下列界面，選擇對(duì)應(yīng)目標(biāo)詳情頁(yè)和詳情即可；如需在新窗口中打開(kāi)這個(gè)鏈接，則勾選“在新窗口中打開(kāi)連接”。完成后，點(diǎn)擊“保存”后，對(duì)全局進(jìn)行一次保存，即可預(yù)覽效果。

g. 鏈接至產(chǎn)品列表
點(diǎn)擊“產(chǎn)品列表”，出現(xiàn)下列界面，選擇對(duì)應(yīng)目標(biāo)列表頁(yè)和分類即可；如需在新窗口中打開(kāi)這個(gè)鏈接，則勾選“在新窗口中打開(kāi)連接”。完成后，點(diǎn)擊“保存”后，對(duì)全局進(jìn)行一次保存，即可預(yù)覽效果。

h. 點(diǎn)擊“產(chǎn)品詳情”，出現(xiàn)下列界面，選擇對(duì)應(yīng)目標(biāo)詳情頁(yè)和詳情即可；如需在新窗口中打開(kāi)這個(gè)鏈接，則勾選“在新窗口中打開(kāi)連接”。完成后，點(diǎn)擊“保存”后，對(duì)全局進(jìn)行一次保存，即可預(yù)覽效果。

6.為圖片模塊添加邊框背景等
在圖片“屬性”的設(shè)置界面的下半部分，有5個(gè)主要的功能：圖片說(shuō)明、圖片模塊邊框、常用、圖片模塊背景和頁(yè)腳元素。

1）圖片說(shuō)明：當(dāng)設(shè)置了圖片說(shuō)明后，訪客鼠標(biāo)放在該圖上就會(huì)自動(dòng)顯示說(shuō)明的內(nèi)容。如圖中：“暢銷(xiāo)產(chǎn)品AAAA！”不指向時(shí)不顯示。

2）模塊邊框：我們可以為每個(gè)圖片設(shè)置邊框，而邊框也可以選擇線條類型、粗細(xì)程度和線條顏色，這個(gè)和word中表格是類似的?，F(xiàn)在來(lái)看看設(shè)置和設(shè)置后的效果（左圖為設(shè)置，右圖是效果）
 
當(dāng)然，如果您不喜歡方正的邊角，還可以對(duì)模塊進(jìn)行圓角顯示的設(shè)置。假設(shè)把圓角數(shù)值設(shè)為26，來(lái)看看右圖的效果，對(duì)比上圖：
 3）常用：點(diǎn)擊“常用”進(jìn)入另外一個(gè)設(shè)置界面，這里沿用了上圖的設(shè)置
填充：在真實(shí)圖片和邊框之間加入空隙位置，一般會(huì)縮小圖片的比例；
邊框：我們可以看到“邊框”數(shù)值是10，事實(shí)上，只要我們不在這個(gè)位置做調(diào)整，系統(tǒng)會(huì)默認(rèn)剛才在“邊框”頁(yè)面所做的設(shè)置。但如果要統(tǒng)一四條邊線的磅數(shù)，可以直接在這里對(duì)4條邊一起調(diào)整；
透明：指這個(gè)圖片的清晰程度，如果數(shù)值越高，意味著越透明；
旋轉(zhuǎn)：圖片相對(duì)于頁(yè)面的角度，可以為0-359°。
中下位置是預(yù)覽圖。

我們來(lái)做一個(gè)效果，可以看到，框和圖間有空白，右圖是半透明并且傾斜的。
 4）背景：為達(dá)到明顯的效果，我們將該圖的透明度調(diào)回0，并且將填充值調(diào)大，然后添加一個(gè)背景。背景可以為一張圖片，也可以是顏色的簡(jiǎn)單填充。（下面第一組圖為填充綠色背景，第二組圖為添加另外一張圖片作為背景）
如果選擇使用背景顏色，就會(huì)簡(jiǎn)單得多，不需要設(shè)置位置對(duì)齊等等。注意：如果同時(shí)添加了圖片背景和顏色背景，必須移除了圖片背景后顏色背景方可生效。
 如果選擇使用圖片，則：點(diǎn)擊“更改背景”，從“我的圖片”中選擇對(duì)應(yīng)的圖片后即可直接生效；點(diǎn)擊“移除背景”將會(huì)刪除該背景；勾選“固定背景”則無(wú)論圖片尺寸多少，該背景相對(duì)于模塊的位置不變；左下角可以設(shè)置背景重復(fù)和對(duì)齊位置。

7. 圖片模塊的其它注意事項(xiàng)
如其它模塊一樣，圖片模塊可以放置在頁(yè)腳，僅需勾選“頁(yè)腳元素”后，將編輯設(shè)置好的圖片拖至已有的頁(yè)腳中即可；
圖片模塊的邊框大小必須大于或者等于圖片的高寬大小，否則無(wú)法正常顯示整張圖片；
網(wǎng)站中的所有模塊都有層次的概念，當(dāng)一個(gè)模塊被另外一個(gè)模塊的框遮住的時(shí)候（可能只是框遮住，但仍能夠看見(jiàn)），底層的框中的鏈接等都會(huì)無(wú)法點(diǎn)選。