本節簡介：學習常用的網頁布局模式：上下結構式、左右結構式、上左右結構式、上左中右結構式；會對網頁結構進行變形；學習網頁設計的風格類型。
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
上下式結構：上方為導航或廣告，下方正文。（個人網站和少量企業網站）
結構和內容是相匹配的。常用網頁布局模式，設計風格。
上下結構，較常見與企業商務或者個人網站的首頁就是展示形象內的網站首頁。同樣上下結構中，上面個主導航條，中間是主題圖片內容（形象展示）下面是一個次幾導航條；或者頭部的導航條直接落到頁面的底部為導航條。一般在設計這樣的頁面是要將頁面限制在一個屏幕范圍之內，一般尺寸為1024*768的一個像素之內。頁面一般控制在1000*680之間這樣可以控制瀏覽者方便快捷瀏覽頁面。
網站結構：上下結構；左右結構；上左右結構（大型或中型企業，網頁內容需要表達較多）；上左中右結構（大型電子商務，政府，教育，門戶，學校網站，大型網站都會使用這種模式）；綜合結構（163，搜狐，新浪等這類門戶網站）；不規則結構（一個形象或廣告模式顯示，凸顯網站個性，重在渲染氣氛）。
左右時結構網頁適合用在公司內容稍微多一點的網站 更加多用于企業的網站 特別是一些不是特別大的一些小型公司 因為他們涉及的內容不是很多 而是基于需要把企業的形象展現出來
左右結構式 和上下式相類似 它是將頁面分為左右兩個部分 要注意的是主次的對比和變化 通常會把把導航放在左邊的區域 左邊的區域比較小 用來做導航 右邊則為正文的部分 這樣形成了強烈的對比 是瀏覽者一眼可以看清主次 根據人們的閱讀習慣 通常都會把導航區放在上方或者是左側 網站的LOGO通常都是放在網頁的左上角 不管是上下結構還是左右結構 都是一樣
上下式結構 通常上方為導航或廣告區域 下方為正文部分 一般出現在個人網站 極少量企業網站的首頁
左右結構式：清晰分列兩旁的框架結構。一般左側是導航條，有時最上方會有一個小標題或標志，另一側是正文內容。企業網站大多采用這類結構
上下式結構：通常上方為導航，或廣告區域。下發為正文部分。這類結構常出現在個人網站及少量企業網站的首頁
不規則結構式，信息量少，風格隨意，凸顯網站個性，重在渲染氣氛。
上左中右式 又稱三欄式，是大中型企業，電子商務，門戶網站
Photoshop
illustrator
CorelDraw
Auto Cad
3D MAX
SketchUp
After Effects
Cinema 4D
Maya
Lumion
UG
Solidworks
Pro/E
