網(wǎng)站制作關(guān)于CMS結(jié)構(gòu)拆解實(shí)現(xiàn)方案，網(wǎng)站
制作公司前面已經(jīng)講解了頁面的組成元素，接下來我們看一下所有元素的具體內(nèi)容是什么。首先來看一下“樣式”的概念。樣式是指把所有段落、間距甚至字體以一種標(biāo)準(zhǔn)的規(guī)則輸出。在頁面加載的時(shí)候使用統(tǒng)一的樣式規(guī)則來排版布局。目前主流的網(wǎng)頁樣式是以DIV+CSS的方式來布局的，具體的語法在這里不做詳述，我們主要看一下對于布局來說的一些空間定義，如圖3-35所示。
●邊框：指組件或者區(qū)域可以看到的邊界，邊框可以顯示也可以不顯示，視覺上的邊界就是通過邊框來劃分的。
●外邊距：組件或區(qū)域的邊框之外需要保持空白的距離。
●內(nèi)邊距：組件或區(qū)域的邊框和元素之間需要保持空白的距離。
●尺寸（高度、寬度）：指組件或區(qū)域中的元素部分所占用的面積，面積為高度×寬度。
●元素區(qū)域：即我們所能盛放內(nèi)容的區(qū)域，所有的圖片、文字和鏈接等內(nèi)容都是在這個(gè)區(qū)域中顯示的。布局的美觀就是通過調(diào)整這些空間樣式屬性達(dá)到的。根據(jù)情況來調(diào)整外邊距和內(nèi)邊距，以保證視覺上的合理性。當(dāng)然，除了解決控件布局的樣式語法，還有很多其他的樣式語法，比如字體、浮層和上色等。在頁面上加載樣式也叫樣式渲染，頁面的美觀整齊主要靠樣式來表達(dá)。一個(gè)網(wǎng)站或者App統(tǒng)一的樣式定義也可以是該平臺的設(shè)計(jì)規(guī)范。
樣式的渲染離不開它的載體，也就是組件。組件的概念在電商平臺被廣泛應(yīng)用，不同的組件展現(xiàn)出的商品信息和效果也是不同的。構(gòu)成組件的核心內(nèi)容就是圖片加文字，下面我們了解一下構(gòu)成組件的基本元素都有哪些。
●專題信息：一般指廣告圖片和專題標(biāo)題，需要根據(jù)組件的尺寸來規(guī)定圖片的尺寸，考慮到圖片加載的時(shí)間和流量，一般會通過CMS限制圖片的尺寸和分辨率，同時(shí)為不同尺寸的圖片設(shè)定默認(rèn)底圖（即加載不出圖片時(shí)默認(rèn)展示的圖片內(nèi)容，通常會使用公司Logo或者吉祥物作為底圖），避免加載過慢或者懶加載時(shí)出現(xiàn)頁面留白的問題。
●商品信息：這里主要指商品的相關(guān)展示信息，包括商品圖片、價(jià)格、庫存、商品名名稱或者商品標(biāo)題，其中商品標(biāo)題和名稱理論上是同一個(gè)信息，但考慮到電商平臺的商品眾多，為了增加曝光率，在搜索時(shí)一般會在名稱上加上一些促銷信息或形容詞匯，從而形成商品標(biāo)題；商品標(biāo)題和商品名稱是獨(dú)立的，顯示時(shí)可以根據(jù)情況來判斷是否需要商品標(biāo)題字段。
●文案描述：部分組件中會顯示少量的文案描述用來闡述商品信息。
●鏈接：組件中的商品或者專題信息可以通過點(diǎn)擊的方式跳轉(zhuǎn)到商品詳情或者專題頁來進(jìn)行購買的流程，跳轉(zhuǎn)主要通過在CMS中配置商品而生成的鏈接來實(shí)現(xiàn)。
●展示形式及時(shí)間：組件的展示類型和顯示的時(shí)間窗口期，展示類型稍后會詳細(xì)介紹；時(shí)間窗口期是通過CMS配置組件內(nèi)容顯示的時(shí)間區(qū)間，主要作用于限時(shí)類的組件上，超時(shí)后該組件則不再顯示。組件與組件之間的差別主要來自于組件內(nèi)元素的布局排列。前面也講解了構(gòu)成組件的核心元素主要是圖文加上元素?cái)?shù)量。布局排列也是圍繞圖文混排的方式，按位置分類有如下幾種：
●圖文左右布局；
●圖文上下布局；
●圖文上下嵌套（即圖片為底圖，文字為浮層）；
●大圖廣告（單張大圖，一般用于頭條或者核心展位）；
●圖片組合（多種圖展示，代表不同內(nèi)容入口，一般用于分類入口或者聚合頁入口）；
●圖文不規(guī)則布局（即大小圖混排）；
●特殊組件（用于特殊功能的組件，如首頁的分類入口或Banner輪播等，多為定制化用途）。比如，移動端常見的商品列表就是圖文上下布局的方式，每行兩個(gè)SKU。而首頁的各各種促銷模塊、分類入口則多用圖片組合的方式進(jìn)行，凸顯視覺沖擊力，如圖3-36所示。圖3-36我們這里單獨(dú)說一下特殊組件，特殊組件多用于特殊用途的操作，布局上一般是按照規(guī)則和功能展示，多數(shù)不由后臺CMS進(jìn)行配置，主要有：
●搜索組件（配置搜索關(guān)鍵字）；
●Banner輪播圖（輪播圖片、鏈接）；
●分類導(dǎo)航（由分類基礎(chǔ)數(shù)據(jù)直接顯示）；
●個(gè)人中心；
●面包屑導(dǎo)航；
●……確定了布局和展示的結(jié)構(gòu)，接下來我們看一下具體的展示內(nèi)容需要注意哪些事情。前面講到的各種構(gòu)成組件的元素一般都是由運(yùn)營人員通過CMS上傳設(shè)置的。現(xiàn)在越來越多的電商平臺在推行“千店千面”的概念，因此，除了促銷模塊的組件以外，其他的基礎(chǔ)數(shù)據(jù)大多也會通過商品列表、搜索和推薦等系統(tǒng)來實(shí)現(xiàn)個(gè)性化變化。CMS中配置的商品列表也要根據(jù)用戶的信息情況來動態(tài)顯示商品數(shù)據(jù)。最后我們需要關(guān)注模塊的埋點(diǎn)，以便收集數(shù)據(jù)。關(guān)于數(shù)據(jù)埋點(diǎn)，
網(wǎng)站制作公司不做詳述，后面會在BI系統(tǒng)中說明。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
