常見的網(wǎng)頁布局結(jié)構(gòu)（課堂PPT）

1、1電子商務網(wǎng)站的主頁內(nèi)容布局電子商務網(wǎng)站的主頁內(nèi)容布局授課：花小琴2常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v 國字型布局國字型布局由同字型布局進化而來，因布局結(jié)構(gòu)與漢字國相似而得名。其頁面的最上部分一般放置網(wǎng)站的標志和導航欄或Banner廣告，頁面中間主要放置網(wǎng)站的主要內(nèi)容，最下部分一般放置網(wǎng)站的版權(quán)信息和聯(lián)系方式等。 3常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v T型布局T型布局結(jié)構(gòu)因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網(wǎng)站的標志或Banner廣告，下方左側(cè)是導航欄菜單，下方右側(cè)則用于放置網(wǎng)頁正文等主要內(nèi)容。 4常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v 標題正文型標題正文型布局的布局結(jié)

2、構(gòu)一般用于顯示文章頁面、新聞頁面和一些注冊頁面等。 5常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v 左右框架型布局左右框架型布局結(jié)構(gòu)是一些大型論壇和企業(yè)經(jīng)常使用的一種布局結(jié)構(gòu)。其布局結(jié)構(gòu)主要分為左右兩側(cè)的頁面。左側(cè)一般主要為導航欄鏈接，右側(cè)則放置網(wǎng)站的主要內(nèi)容 6常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v 上下框架型上下框架型布局與前面的左右框架型布局類似。其區(qū)別僅在于是一種上下分為兩頁的框架。 7常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v 綜合框架型綜合框架型布局是結(jié)合左右框架型布局和上下框架型布局的頁面布局技術 8常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v POP布局POP布局是一種頗具藝術感和時尚感的網(wǎng)頁

3、布局方式。頁面設計通常以一張精美的海報畫面為布局的主體。 9常見的網(wǎng)頁布局結(jié)構(gòu)常見的網(wǎng)頁布局結(jié)構(gòu)v FLASH布局FLASH布局是指網(wǎng)頁頁面以一個或多個Flash作為頁面主體的布局方式。在這種布局中，大部分甚至整個頁面都是Flash。 頁面布局頁面布局頁面布局效果頁面布局效果條理清晰條理清晰主次分明主次分明色彩對比度適當色彩對比度適當布局疏密適當布局疏密適當網(wǎng)頁布局形式網(wǎng)頁布局形式常見網(wǎng)頁布局形式常見網(wǎng)頁布局形式“國國”字型字型拐角型拐角型標題正文型標題正文型左右框架型左右框架型上下框架型上下框架型綜合框架型綜合框架型封面型封面型Flash型型變化型變化型“國國”字型字型網(wǎng)頁布局形式網(wǎng)頁布局形

4、式拐角型拐角型網(wǎng)頁布局形式網(wǎng)頁布局形式封面型封面型網(wǎng)頁布局形式網(wǎng)頁布局形式Flash型型15網(wǎng)頁版面布局與制作網(wǎng)頁版面布局與制作v 布局就是指以最適合用戶瀏覽的方式將圖片和文字排放在頁面的不同位置?！白钸m合”是一個不確定的形容詞 。v 布局的重要性：挖掘客戶的需求，將用戶需要的內(nèi)容充分展示出來， 為客戶提供舒適、友好、簡單的訪問體驗，進而留住客戶，還能結(jié)合SEO，提升網(wǎng)站的搜索引擎排名。如同蓋房子有草圖一樣，網(wǎng)站設計也同樣有草圖。16草圖草圖17示意圖（布局圖）示意圖（布局圖）美工圖美工圖18網(wǎng)站外形尺寸：網(wǎng)頁黃金分割網(wǎng)站外形尺寸：網(wǎng)頁黃金分割19網(wǎng)站外形尺寸：網(wǎng)頁黃金分割網(wǎng)站外形尺寸：網(wǎng)頁黃

5、金分割20九宮格九宮格在這個九宮格中中間部分就產(chǎn)生了四個交叉點，這四個交叉點就是視覺中心點。 21九宮格九宮格22十六種常見布局形式十六種常見布局形式23網(wǎng)站示意圖網(wǎng)站示意圖v 首頁v 列表頁（文字列表、圖片列表）v 內(nèi)容頁v 單頁面242526272829電電子子商商務務網(wǎng)網(wǎng)站站結(jié)結(jié)構(gòu)構(gòu)圖圖30電子商務網(wǎng)站首頁內(nèi)容電子商務網(wǎng)站首頁內(nèi)容v 用戶入口v 導航條v 商品類型v 搜索框v 首頁廣告v 最新動態(tài)v 推薦商品v 最新商品v 熱賣商品v 特價商品v 購物幫助v 友情鏈接v 版權(quán)所有31323334本次課任務任務本次課任務任務v畫出網(wǎng)站的三級示意圖（布局圖、草圖）1.首頁示意圖；2.二級分頁示意圖（如商品列表）3.二級分頁示意圖（如我