返回頂部
電(diàn)腦網站 > > 拖拽版網站首頁(yè)設計
拖拽版網站首頁(yè)設計

 

操作(zuò)步驟

 

 


 

第一步   線(xiàn)下規劃好自己想要的網站框架

 

(如下圖  線(xiàn)下規劃圖)

   明确自己規劃圖内容:包含頭部、導航,主體(tǐ)、底部内容。

   必須清楚每一部分(fēn)放置内容,圖,文(wén)字,圖文(wén)字,列表,圖輪播。

   必須是内容已經發布:包括産(chǎn)品,文(wén)章等内容。否則,首頁(yè)無法調用(yòng)。

 

1449279495247372.jpg

  


 

第二步:選擇自主設計模闆

 

2.jpg


 第二步:選擇基礎框架背景及顔色

 

3.jpg

(也可(kě)以查看自己的選擇曆史記錄)

 

 


 

第三步:添加和完善基礎模版

 4.jpg


基礎模版和規劃模版。還有(yǒu)一定差距,需要我們按規劃圖添加相應的模塊。

默認:即系統已經設定的模塊樣式。即一行分(fēn)為(wèi)幾塊内容。滿足目前約大多(duō)數的網站展示樣式。

空白:即沒有(yǒu)内容。

選擇:顯示樣式的選擇或者自主設定。

5.jpg 

自定義樣式:包括邊線(xiàn),背景,高度,顔色,鼠标經過狀态,标題文(wén)字大小(xiǎo),内容文(wén)字大小(xiǎo),字體(tǐ),等設置。設置後即可(kě)保存并使用(yòng)。可(kě)保持每個模塊的統一。

 

6.jpg

這裏可(kě)以先不管是文(wén)字還是圖,隻看規劃圖分(fēn)布的塊狀。即每行是幾塊内容。

适合高級用(yòng)戶,建議在使用(yòng)非常熟悉的狀況下進行。

 

 


 

第四步:查看頁(yè)面總體(tǐ)布局

 

了解區(qū)域布局。确認需要在哪裏設置,部分(fēn)區(qū)域的内容是相同的,如主體(tǐ)區(qū)域。

 

7.jpg  

 


 

 

  第五步:頭部區(qū)域設置

       在這裏可(kě)以選擇需要設計的頁(yè)面,如圖:

首頁(yè)設置設計.jpg

說明:設置方法與首頁(yè)的操作(zuò)設計方法一樣,隻是其他(tā)頁(yè)面不用(yòng)再次設置頭部區(qū)域和底部區(qū)域,僅僅設計主體(tǐ)區(qū)域就可(kě)以了。




  說明:三種模式設置 默認、隐藏、自定義

默認:即系統設定的内容,

隐藏:把要設置的内容隐藏掉,不顯示。

自定義:包括背景圖,邊線(xiàn),高度,邊距等。自己定義設置。

說明:即頁(yè)頭顯示的内容。可(kě)以是圖也可(kě)以是文(wén)字。也可(kě)以是動畫。

标題:即頁(yè)面圖的文(wén)字說明,添加後有(yǒu)利于搜索。

連接:即點擊該區(qū)域,會跳轉到什麽地方。免費用(yòng)戶隻能(néng)添加本地連接

(注意:設置過欄目及發布過内容的都會自動産(chǎn)生連接)

打開方式:即點擊後是在覆蓋本頁(yè)打開還是新(xīn)的窗口打開,可(kě)選擇。

内容:可(kě)選擇是添加圖片或者直接加文(wén)本内容,或者是flah動畫内容,添加後有(yǒu)利于搜索。

(注意:上傳圖或者動畫。一定要仔細查看确認我們提示的尺寸,否則上傳的圖會變形顯示不全)   

 

  樣式選擇:即導航顯示的樣式,可(kě)直接選擇确認。



導航外觀:可(kě)以設置導航的大小(xiǎo),外觀,背景,邊框,高度,等内容,可(kě)以選擇默認。


 

導航欄目項:如下圖,每一項就是一個欄目,可(kě)以設置其高度,文(wén)字大小(xiǎo),字體(tǐ),背景等。可(kě)以單獨設置,也可(kě)直接選擇默認。



下拉菜單的設置:

什麽是下拉菜單?

即點擊該内容,會有(yǒu)下拉的一個列表,可(kě)以減少步驟,快捷進入。例如公(gōng)司有(yǒu)100個産(chǎn)品,所以不能(néng)所有(yǒu)都放在首頁(yè)上,就可(kě)以選擇三種是買的最好的放在下拉菜單裏。這樣客戶就可(kě)以快捷的進入。而不用(yòng)再進一步的查找,如圖有(yǒu)下拉菜單。

 

12.jpg

 

下拉菜單欄目項:主要設置文(wén)字,背景,文(wén)字,高度等内容。

 

13.jpg


增加欄目,欄目管理(lǐ),内容管理(lǐ):(請在欄目設置裏查看)

 

14.jpg

  

焦點圖設置: 主要為(wèi)高度,邊框,上下距離的設置。

 

15.jpg


添加内容:即上傳圖片


16.jpg


管理(lǐ)内容:發布後可(kě)進行再編輯,或行删除管理(lǐ)


17.jpg 

  高級設置:對焦點圖播放速度及顯示樣式,展示位置的設定。


18.jpg

  注意:圖片大小(xiǎo)尺寸,連接查找設置同上。

 


  

  第五步:主體(tǐ)區(qū)域設置

 

19.jpg

 

内容基本一緻主要分(fēn)為(wèi)模塊風格,模塊内容,編輯内容。

 

模塊風格:

皮膚選擇:主要是選擇展示樣式。

  

20.jpg

 

外觀:主要是對細節的處理(lǐ),如背景,高度,邊框的設置。可(kě)自定義。


21.jpg

 

标題欄:對标題的設置,包括背景,文(wén)字大小(xiǎo),邊線(xiàn)等内容。可(kě)自定義。


22.jpg

 

内容區(qū):對背景,邊線(xiàn),文(wén)字大小(xiǎo),的設置。可(kě)以自定義。


23.jpg

 

模塊内容:即該模塊展示的是文(wén)字還是圖。還是圖文(wén)内容的選擇。


24.jpg


 

編輯内容:選擇的内容不同,所編輯的内容也不同,(以下選擇的是視頻,就提示需要上傳視頻,如果是文(wén)字。就是文(wén)字+連接的方式。如果是圖就是圖片+連接的方式。)


  

 

       動畫效果:可(kě)以為(wèi)模塊添加動畫。動畫效果分(fēn)為(wèi)進場動畫和圖片交互動畫。進場動畫指的是在浏覽網站時模塊進入時的動畫效果,交互動畫是指鼠标移動到圖片上時圖片所出現的動畫效果,所以圖片交互動畫隻能(néng)應用(yòng)于圖文(wén)混排,單張圖片,圖文(wén)信息櫥窗展示這幾種類型的模塊當中(zhōng)。

 

設置進場動畫操作(zuò)如圖:

 

 模塊進場動畫.jpg

 

       注:動畫效果僅支持谷歌浏覽器、火狐、IE10及以上或者以谷歌浏覽器為(wèi)内核的如:搜狗浏覽器、360極速版、獵豹、遨遊等。

 

       圖片交互動畫操作(zuò)如圖:

 

 圖片交互動畫.jpg

 

 





 

第七步   底部區(qū)域

 

26.jpg 

  外觀樣式和内容樣式的設置基本一樣:主要為(wèi)背景,高度,邊框,文(wén)字大小(xiǎo),字體(tǐ)等設置。


27.jpg

        

第八步   其他(tā)設置

 

28.jpg


可(kě)以上下,左右直接拉高或者拉寬。優點是方便直觀,缺點:不容易确認高度大小(xiǎo),如是圖片欄目,需要在編輯内容時才能(néng)确定圖的大小(xiǎo)。

 29.jpg



向上移動整行      

 

30.jpg


按住鼠标直接拖動      

 

31.jpg

整行隐藏      

 

32.jpg


設置整行樣式

 

33.jpg

删除整行      

 



第九步   設置完成。保存預覽。

 

34.jpg

 

 

 


 

常見問題

 

問:拖拽版和成品版有(yǒu)什麽區(qū)别?

答(dá):拖拽版是自主設計版本。框架及内容都需要自己設定,相對而言,靈活度高,設計複雜。成品版是系統設定的,不能(néng)修改框架及内容,隻能(néng)直接上傳或者調用(yòng)内容。

 

問:每一個欄目樣式都要設置,太麻煩,有(yǒu)方便點的沒?

答(dá):在添加模塊時直接自定義一下模塊内容,就可(kě)以一直選擇這個模版,樣式就是統一的,如果是系統的必須每一個都要設置。

 

問:模塊内容可(kě)以随時更換嗎?

答(dá):可(kě)以,點模塊内容就可(kě)以更換。

 

問:操作(zuò)有(yǒu)誤,怎麽恢複?

答(dá):點模闆選擇,就有(yǒu)曆史記錄,隻要是操作(zuò)過,并保存的就會有(yǒu)記錄在内。就可(kě)以選擇恢複。

 

問:拖拽版和成品版可(kě)以随時切換嗎?

答(dá):可(kě)以,如果兩個版本都設置過。并且保存了,就可(kě)以随時切換使用(yòng)。如果沒有(yǒu)設置過。可(kě)以切換,但沒有(yǒu)設置的内容就為(wèi)空。