本節簡介:學習常用的網頁布局模式:上下結構式、左右結構式、上左右結構式、上左中右結構式;會對網頁結構進行變形;學習網頁設計的風格類型。
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
布局清晰方面了解網站內容——骨架 上下式結構 信息少 常用于個人網站 少量企業網站
網頁主要的結構模式分為六種:上下結構,左右結構,上左右結構,上左中右結構,綜合式,不規則式
6種結構:上下式結構(個人網站)、左右式結構、上左右式結構、上左中右式結構、綜合式結構、不規則結構
6、不規則結構:信息量少,通常以一張形象、廣告圖片來表示。風格較為隨意,凸顯網站個性,重在渲染氣氛。深受一些企業網站、個人網站的喜愛。
5、綜合式結構:通常情況下,網站不是只選用一種結構,而是幾種結構的綜合應用,在同一個頁面里面可以拆除幾個不同的框架結構,來配合信息內容的需要。eg:門戶網站
4、上左中右式結構:又稱為三欄式,是大中型企業、電子商務、門戶網站比較喜歡的框架模式,是較為常見的結構式(顏色通常不花哨,一般下方采用白色背景)。通常上方為導航菜單,下方左側為欄目及內容、小廣告區,右側為登陸、搜索區或重要內容導航區。eg:美食網站。
3、上左右式結構:大中型企業比較喜歡的框架模式。通常上方為導航菜單,下方為欄目及小廣告,右下側為內容(可以利用面積來凸顯重要層級)。eg:汽車輪胎企業網站、地產公司網站、星巴克公司網站(產品圖片放在左側)、咖啡產品網站
2、左右式結構:清晰分列兩旁的框架結構。一般左側是導航條,(左上角最重要位置放置企業logo)有時最上方會有一個小標題或者標志,另一側是正文內容,一般用于企業網站。eg:設計網站、個人網站(信息量少)
網頁結構:1、上下式結構,通常上方是導航或廣告區域(logo或企業動態形象),下方為正文部分/大圖片/Flash(常見于個人網站及少量的企業網站的首頁)。eg:汽車網站、商務網站、個人網站(屏幕像素1024*768,導航條在下方網頁尺寸需控制在1000*680)
上下結構式網頁大小盡量控制在1000*680px的尺寸范圍內
不規則結構:信息量少,通常以一張形象、廣告圖片來表示。風格比較隨意,凸顯網站個性,重在渲染氣氛
綜合式結構:通常情況下,網站不是只選用一種結構,而是幾種結構的綜合應用,在同一個頁面上可以拆出幾個不同的框架結構,來配合信息內容的需要
上左中右結構:又稱三欄式,是大中型企業、電子商務、門戶網站比較喜歡的框架模式。是常見的結構式。通常上方為導航菜單,下方左中側為欄目及內容、小廣告區,右側為登錄、搜索區或重要內容導航區
上左右式結構:是大中型企業比較喜歡的框架模式。通常上方為導航菜單,下方為欄目及小廣告,右下側為內容