?
如何新增圖文模塊、如何更換原有的圖片、如何線上調(diào)整圖片的尺寸或者編輯圖片、如何為圖片添加鏈接、如何為圖文模塊添加邊框背景?如何編輯文本內(nèi)容等等
提示:,每張圖的大小不超過(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)象。
一. 添加圖文模塊
首先,點(diǎn)擊頁(yè)面左上角“添加”, 在彈出功能條中選擇“圖文”并拖至頁(yè)面中的任意位置:
松手,該模塊添加成功,后續(xù)仍可以鼠標(biāo)拖動(dòng)該模塊進(jìn)行任意移動(dòng)。松手后,系統(tǒng)會(huì)自動(dòng)彈出“模式更換”選擇您需要的樣式:
選擇后效如下
二、 編輯圖片
1.更換圖片
在這個(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.eznetonline.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的流程選用即可
(注意:請(qǐng)調(diào)整自己的圖片尺寸比例以配合本身設(shè)計(jì)的比例)
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)畫再功能,每種功能有不同效果。具體的每項(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è)置鏈接按鈕選擇鏈接到:網(wǎng)址、頁(yè)面、郵件、文件等您需要的的地方。
“站外鏈接”:是指可以將圖片鏈接到互聯(lián)網(wǎng)上的某個(gè)頁(yè)面或某個(gè)站點(diǎn), 只要您把地址填進(jìn)去即可。如下圖,以www.google.com為例,勾選“在新窗口打開鏈接”可以在新增的選項(xiàng)卡中打開www.google.com的頁(yè)面。
“頁(yè)面”:是指可以將圖片鏈接到您網(wǎng)站上面的某個(gè)頁(yè)面, 屬于站內(nèi)鏈接。設(shè)置好后,客戶點(diǎn)擊這個(gè)圖片,就會(huì)打開目標(biāo)的頁(yè)面以達(dá)到展示更多內(nèi)容的目的。如下圖中鏈接指向“商城動(dòng)態(tài)”,則訪客點(diǎn)擊這張圖片時(shí),會(huì)打開“商城動(dòng)態(tài)”這個(gè)頁(yè)面。
“郵件”:是指可以將圖片鏈接到郵箱上, 當(dāng)點(diǎn)擊該鏈接時(shí),系統(tǒng)會(huì)自動(dòng)調(diào)用本地的郵件發(fā)送程序(如outlook或者foxmail,注意:訪客必須本地有安裝這樣的客戶端方可打開,否則點(diǎn)擊沒有反應(yīng)),發(fā)送email到您設(shè)定的賬戶。如下圖的設(shè)置,當(dāng)點(diǎn)擊圖片的時(shí)候,會(huì)打開客戶端郵件編輯界面并進(jìn)入編輯一封主題為“產(chǎn)品咨詢”、收件人為abcde@google.com的郵件。
“文件”:是指可以將圖片鏈接到您已上傳在“我的文件”中的文件(如jpg,pdf,word,mp3等等)。當(dāng)點(diǎn)擊該圖片時(shí),系統(tǒng)會(huì)調(diào)用訪客本地電腦的相關(guān)程序并打開相應(yīng)的文件。注意:如果訪客本地客戶端沒有可以支持的軟件或者版本不支持,將無(wú)法打開這個(gè)文件。添加的方式如下圖:選擇好文件后確定,再保存即可。
6.為圖片模塊添加邊框背景等
在圖片“屬性”的設(shè)置界面的下半部分,有5個(gè)主要的功能:圖片說(shuō)明、圖片模塊邊框、常用、圖片模塊背景和頁(yè)腳元素。
1)圖片說(shuō)明:當(dāng)設(shè)置了圖片說(shuō)明后,訪客鼠標(biāo)放在該圖上就會(huì)自動(dòng)顯示說(shuō)明的內(nèi)容。如圖中:“暢銷產(chǎn)品AAAA!”不指向時(shí)不顯示。
2)模塊邊框:我們可以為每個(gè)圖片設(shè)置邊框,而邊框也可以選擇線條類型、粗細(xì)程度和線條顏色,這個(gè)和word中表格是類似的。現(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í)候(可能只是框遮住,但仍能夠看見),底層的框中的鏈接等都會(huì)無(wú)法點(diǎn)選。
8.設(shè)置圖片外邊距
可以設(shè)置圖片與文本之間的間距調(diào)整后效果如下
三.文本模塊編輯
雙擊編輯區(qū)域就可以調(diào)用出文本編輯工具條, 進(jìn)行文本編輯. 文本模塊上方有一排功能按鈕, 他們的具體功能如下:
:網(wǎng)站是由很多的模塊組成的,這樣就會(huì)有層次的關(guān)系,這兩個(gè)功能可以將模塊移到上一層或下一層, 這是每個(gè)不同類型的模塊都有的功能, 不局限于文本模塊;
:內(nèi)容編輯, 點(diǎn)擊后即可調(diào)出文本編輯工具條,可對(duì)文本進(jìn)行增刪、字體字號(hào)顏色等等各種操作:
:模塊屬性, 這個(gè)功能每個(gè)功能模塊都有, 我們可以在這里設(shè)置模塊的邊框線, 背景圖或背景顏色等, 讓模塊具有更強(qiáng)的表現(xiàn)力。功能界面如下:
勾選“頁(yè)腳元素”后,這個(gè)模塊可以被拖入網(wǎng)頁(yè)的頁(yè)腳中。
:對(duì)齊按鈕, 您可以在這里進(jìn)行模塊對(duì)齊, 我們提供了豐富的對(duì)齊功能.
您在做網(wǎng)站時(shí), 可以使用此功能進(jìn)行單模塊、多模塊的對(duì)齊, 讓您網(wǎng)站更整齊美觀。
:上鎖功能, 當(dāng)您的頁(yè)面模塊調(diào)整好位置后,為避免誤操作帶來(lái)的不便, 點(diǎn)擊該按鈕對(duì)該模塊上鎖, 一旦上鎖之后, 該模塊就無(wú)法用鼠標(biāo)移動(dòng)位置, 除非進(jìn)行解鎖. 上鎖后狀態(tài)為: 。
:模塊刪除按鈕。點(diǎn)此按鈕模塊被刪除,如需要恢復(fù),直接點(diǎn)擊撤銷即可。保存當(dāng)前頁(yè)面并進(jìn)入另一個(gè)頁(yè)面后,無(wú)法刪除后進(jìn)行保存后,該模塊無(wú)法恢復(fù),請(qǐng)謹(jǐn)慎操作。