近期應粉絲要求，出多個前端大總結，適合小白復習查閱
#第一章 Web基礎知識
?
Web開發基本概念
1、萬維網是一個由許多相互鏈接的超文本組成的系統，通過互聯網訪問。
2、web：worldwideweb，萬維網，簡稱web，www，通常稱為網頁。
3、web開發：進行網頁頁面制作及其閣下你給功能開發。
4、瀏覽器：顯示網頁內容，并讓用戶與這些文件交互 一種軟件。（常用：IE、谷歌、火狐）
5、web服務器：提供web服務的計算機。
6、URL（統一資源定位符）：互聯網上標準資源的地址，可以從互聯網上得到資源的位置和訪問方法。
??? 組成：協議、服務器地址、資源路徑。
7、網頁文件的擴展名：html、htm。文件內容：HTMl代碼和文本內容。
8、網頁：瀏覽器中打開的一個頁面。網站：一組域名相同的網頁的集合。
9、B/S架構：不需要下載客戶端，通過URL訪問。有跨平臺能力。無縫升級，客戶端免維修。不能直接使用客戶端硬件資源，用戶體驗單一。
10、C/S架構：需要安裝特定的客戶端程序。針對不同平臺開發不同版本。升級應用需要重新安裝。充分應用客戶端硬件資源，構建大型3D效果應用。
11、互聯網發展：web1.0??? web2.0?? 移動互聯網
12、web開發過程：項目提出、需求分析、設計（UI設計、系統設計）、開發（前端開發、后臺開發）、系統測試、發布維護。
13、網站類型：(1)、按網站主體性質劃分：政府網站、教育科研網站、企業網站、商業網站、個人網站
?????????????????????? (2)、按網站功能劃分：宣傳展示型網站、營銷型網站、電子商務、網上購物、門戶網站
14、樹形結構：有主頁有分支有葉子。扁平結構：扁平結構可以理解為是一種特殊的樹形結構， 只有主干和樹葉，是當前流行的一種網站結構，對 搜索引擎特別友好。
15、頁面分類：首頁：也稱主頁，是一個網站的入口網頁。
?????????????????????? 列表頁：一般都是二級頁面，是欄目的具體展示頁。
?????????????????????? 內容頁：一般就是具體內容的頁面。
16、頁面元素：文字、表單、視頻、圖片、音頻、動畫。
?
?
萬維網:www，通常也稱網頁。
?
網頁：瀏覽器中打開的一個頁面。
?
網站：一組域名相同的網頁的集合。
?
瀏覽器：顯示網頁內容，并讓用于與這些文件交互的一種軟件。
?
服務器：提供web服務的計算機。
?
URL：統一資源定位符，協議、域名、資源路徑。
?
網站訪問過程：
?????? ⑴ 通過輸入網址（URL）指定要訪問的網頁。
?????? ⑵ 瀏覽器向服務器發送請求：請把XXX網頁文件傳送給我。
?????? ⑶ 服務器做出響應：把XXX網頁文件傳送給瀏覽器。
?????? ⑷ 瀏覽器解析網頁文件，呈現出網頁。
?
軟件架構分類及各自特征：
????????? B/S架構
?????? 無需安裝特定客戶端程序，通過URL訪問
?????? 跨平臺能力（Windows、Linux、Android、IOS…） ?
?????? 無縫升級，客戶端免維護 ?
?????? 不能直接使用客戶端硬件資源，用戶體驗單一 ?
?????????? C/S架構 ?
?????? 需要安裝特定客戶端程序 ?
?????? 針對不同平臺開發不同版本 ?
?????? 升級應用須重新安裝 ?
?????? 充分應用客戶端硬件資源，構建大型3D效果應用
?
web系統開發過程，及相關知識體系。
?????? 項目提出--需求分析--設計（UI、系統）--開發（前端、后臺）--系統測試--發布/維護
?
網站類型
?????? 主體性質（政府網站、教育科研網站、企業網站、商業網站、個人網站）
?????? 功能劃分（宣傳展示型網站、營銷型網站、電子商務、網上購物、門戶網站、企業門戶、在線?????? 交易平臺、政府門戶）
?????? 網站結構（樹型結構、扁平結構（特殊））
?
網站頁面
?????? 頁面分類（主頁、列表頁、內容頁）
?????? 頁面元素（文字、圖片、表單、視頻、 音頻、動畫）
?
學習Web開發的意義
?????? ?掌握HTML、CSS語言
?????? ?? 能夠構建內容豐富、界面美觀的Web頁面
?????? ?? 掌握相關開發、調試工具的使用方法
?????? ?? 為后續Java、PHP等 課程打下基礎
?
?
?
?
?
?
?
?
#第二章 HTML語言基礎
?
網頁與網頁文件。
?????? 網頁：瀏覽器中打開的一個頁面
?????? 網頁文件：文本文件，擴展名html、htm，內容為HTML代碼和文本內容。
?
網頁與網頁文件的關系：?瀏覽器中看到的網頁實質為：網頁文件
?
網頁頁面的組成：內容+結構。
?
HTML簡介
?????? 語言特點
?????? 發展過程
?????? 應用領域
?
HTML基本語法：語法、語義、詞匯。
?
HTML標記分類（單/雙標記），HTML屬性的概念。
?
HTML文檔結構（文檔聲明、html、head、body、title、meta）。
?
開發工具簡介
?
編輯器
?
瀏覽器
?
瀏覽器開發工具
?
幫助手冊
?
?
?
?
?
?
?
#第三章 構建頁面（一）
?
網頁元素包含內容：圖片、文字、列表、超鏈接
?
在網頁中插入文字（文字、實體、注釋）
標題<h1>--<h6>
段落<p>
換行<br/>
水平線<hr/>
實體:
?????? ? <? >? &? "
注釋:<!--...-->
在網頁中插入列表及相關屬性的設置。
?????? 有序列表
?????? <ol>
?????? ? <li>..</li>
?????? </ol>
?????? 無序列表
?????? <ul>
?????? ? <li>..</li>
?????? </ul>
?
?
?
?
?
?
#第四章 構建頁面（二）
?
在網頁中插入圖片及常用相關屬性（src、alt）。
?
在網頁中設置熱區。
?????? <img src="#" alt=".." usemap="#ming">
?????? <map name="ming" id="ming">
????????????? <area shape="circle" coords="180,139,14" href="url" alt=".."></area>
????????????? <area shape="rect" coords="0,0,110,260" href="url" alt=".."></area>
????????????? <area shape="toly" coords="180,139,14" href="url" alt=".."></area>
?????? </map>
?????? ·id屬性和name屬性表示名稱，設置為相同值，與<img />標簽的usemap屬性匹配。創建?????? 圖像與熱區之間的關系
?????? ·alt屬性：該區域的替代文本；
?????? shape屬性：該區域的形狀；（rect、circle、poly）
?????? coords屬性：該區域在原始圖片上的坐標值。
?????? href屬性：該區域的鏈接地址；
?
在網頁中插入超鏈接及常用相關屬性（href、target）
?????? href:鏈接地址
?????? target：目標窗口在何處打開
????????????? _blank：在新窗口打開
???????????? _self：在當前窗口打開
???????????? _parent：在父窗口打開
????????????? _top：在頂層窗口打開
?
錨的應用。
?????? 錨點：網頁中的某一位置。
?????? 錨點鏈接：在同一個頁面跳到指定位置的方式。
創建錨點鏈接：
①建立錨點
?????? <a name=“錨點名稱”>錨（顯示在頁面上的文本）</a>
②創建指向該錨的鏈接
?????? <a href=“#錨點名稱”>……</a>
?
相對路徑、絕對路徑的概念。
?
在網頁中使用內聯框架（iframe）。
?????? <iframe>標簽的常用屬性是:
?????? src：文件的路徑
?????? width： “內聯框架”區域的寬度
?????? height：“內聯框架”區域的高度
?????? scrolling：規定是否在 iframe 中顯示滾動條：
?????? ???????????????? No：不出現滾動條? Yes：顯示滾動條? Auto：自動出現滾動條
?????? frameBorder：設置是否顯示框架的邊框。(1，0)
?????? name：框架的名字，用來進行識別。
?
<iframe? src="URL"? width="x"? height="y"??? scrolling="[OPTION]" frameborder="x"? name="main"></iframe>
?
?
?
?
?
?
?
#第五章 構建頁面（三）
?
在網頁中插入表格及簡單樣式修飾。
?
?????? ?詞匯(標簽)：<tr></tr>
????????????? 語法：1. 成對出現 2. 嵌套于<table></table>標簽內
?????? ??? ?????? 語義：定義一行 ?
?????? ??? 詞匯(標簽)：<th></th>
?????? ??? ?????? 語法：1. 成對出現 2. 嵌套于<tr></tr>標簽內
????????????? 語義：定義表頭 ?
?????? ??? 詞匯(標簽)：<td></td>
????????????? 語法：1. 成對出現 2. 位于<tr></tr>內
????????????? 語義：定義一個單元格
?????? ??? 相關屬性
????????????? width:規定表格元素的寬度（pixels或%）
????????????? bgcolor：表格背景顏色
????????????? background：表格背景圖
????????????? align：表格的對齊方
?????? ????? border： 表格邊框的寬度（pixels）
????????????? bordercolor：表格邊框的顏色
????????????? cellpadding :? 單元邊沿與其內容之間的距離
????????????? cellspacing :?? 單元格之間的空白（pixels或%）
????????????? colspan:跨列
????????????? rowspan:跨行
在網頁中插入表單及簡單樣式修飾。
?????? 標簽：<form action=""? method="">? </form>??
?????? action：規定當提交表單時向何處發送表單數據 值：URL
?????? method：規定用于發送 form-data 的 HTTP 方法。 值：get/post
?
?????? 標簽：<input? type=".."? name=".."? value="..">
?????? text
?????? password
?????? radio
?????? checkbox
?????? file
?????? submit
?????? button
?????? reset
?????? <textarea? rows="3" cols="2">...</textarea>
?????? <select? name="..">
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
????????????? <option value="..">..</option>
?????? </select>
?
?
?
?
?
?
?
?
#第六章 HTML4.01與HTML5
?
HTML5與HTML4.01。
?????? <object> 定義嵌入對象????? html4???? html5????
?????? <emject>????? 定義外部交互內容或插件?? html5
?????? <audio> 定義聲音內容???????????? html5
?????? <video> 定義視頻???????????????????? html5
?
HTML多媒體概述。
?????? video與audio。
??????
?????? object與embed
多媒體元素基本屬性和常用方法。
Canvas基礎知識。
使用canvas繪制簡單圖形。
HTML樣式修飾性標簽介紹
font規定文本的字體、字體尺寸、字體顏色。
?????? < font? color=“red” size=“5” face=“黑體”>< /font >
strong用于強調文本
?????? <strong>你好</strong>
b規定粗體文本
?????? <b>你好</b>
?
?
?
?
?
?
?
?
?
#第七章 CSS語言基礎
?
為什么使用CSS。
?????? 1、針對元素樣式設置的屬性太少
?????? 2、修改元素樣式太麻煩
?????? 3、控制元素樣式的代碼冗余度過高
?????? 更專業的樣 式修飾方法
?????? 更簡約的布 局方法
?????? 更簡便的樣 式修飾方法
?????? 改一處動全局的方法
CSS簡介。
?????? CSS是 Cascading Style Sheet 的縮寫。譯作 「層疊樣式表」。 是用于(增強)控制網頁樣式?????? 并允許將樣式與網頁 內容分離的一種標記性語言。
?
CSS的基本語法：CSS代碼是由一條條語句構成，而每一條語句的結構，都基本相同
??????
樣式寫法：選擇器 {屬性：屬性值；屬性：屬性值；..... }
?
選擇器
?????? 1、標簽選擇器——選擇器是HTML標簽。影響整個頁面中該種標簽的樣式。
?????? 2、類選擇器——以“.”開頭定義的選擇符。影響所有以class屬性引用該類的標簽樣式。
????????????? 注意：類名的第一個字符不能使用數字
????????????? 元素可以加入多個類。把各個類名放在class屬性中，各個類名之間用一 個空格分????????????? 隔。類名的順序并不重要。
?????? 3、id選擇器——以“#”開頭定義的選擇符。影響以id屬性引用該選擇符的標簽樣式。
????????????? 單一頁面中，一個id選擇器只能使用一次！
?
樣式表
?????? 1、行內樣式——在元素標簽內通過style屬性添加樣式
????????????? 用途：指定網頁中個別元素的顯示效果。不符合 樣式與內容分離原則不推薦用
?????? 2、頁內樣式——在head部分的style標簽內添加樣式
????????????? 用途：對頁面中某些標簽或元素設置樣式風格。控 制當前頁面樣式，維護較困難
?????? 3、外部樣式——引用外部建立的.css文件
????????????? 用途：可同時控制多個頁面，適用于各類大型網站， 可用性最強，推薦使用。
?
樣式優先級：
?????? 1、ID選擇器 > 類選擇器> 標簽選擇器
?????? 2、行內樣式>頁內樣式>外部樣式
?????? 3、就近原則，距離元素最近的樣式優先級最高
?
注釋方法： /*…*/? 多行注釋
?
多個樣式，在同一內容上共同實現， 叫做：CSS樣式的疊加
?
文檔中的某些元素，將沿用為其父元素所設置的 樣式，這種特點叫做：CSS樣式的可繼承性
?
結構和樣式分離思想。
?
CSS基本應用示例。
?
?
?
?
?
?
?
#第八章 文本樣式和字體樣式
?
CSS字體相關類樣式修飾。
?
字體系列：font-family：‘宋體’，‘仿宋’；
字體大小：font-size：20px;(2em;)
字體風格：font-style:italic(normal\italic\oblique);
字體加粗：font-weight:900;(100~900;)(lighter\normal\bold\bolder)
字體綜合設置：font:italic? bold? 36px? '宋體';
?
?
CSS文本類樣式修飾。
?
文本縮進：text-indent:2em;(20px;)
水平對齊：text-align:left(right\center)
文本修飾：text-decoration:none;(underline\line-through\blink)
文本顏色：color:red;(#000000;)
行高：line-height:2em;(20px;)
?
?
?
?
?
?
?
#第九章 超鏈接和偽類
?
CSS超鏈接的修飾。
未被訪問的超鏈接a:link
鼠標經過超鏈接a:hover
鏈接被點擊的那一刻a:acitve
訪問過的超鏈接a:visited
特定順序設置： :link ，:visited，:hover, :active
超鏈接應用
CSS偽類的使用方法。
CSS偽元素的使用方法。
?
?
?
?
?
?
?
#第十章 背景樣式和列表樣式
?
CSS背景類樣式修飾
背景色：background-color
?????? 關鍵字（gray）
? ? 十六進制表示方式（#808080）
? ? rgb表示方式，如：rgb（128,128,128）
?
背景圖像：background-image
?????? background-image:url(images/f1.png)
?
背景重復：background-repeat:repeat-x;
?????? repeat;默認
?????? repeat-x;
?????? repeat-y;
?????? no-repeat;
?????? inherit;繼承父元素
??????
背景定位：background-position:50%50%;
?????? center
?????? top
?????? bottom
?????? right
?????? left
?
背景綜合屬性：background
?????? background:red?? url(images/11.png)?? no-repeat? center;
?
CSS列表類樣式修飾
列表類型：list-style-type
?????? none?? 無
?????? circle? 空心圓
?????? square?? 實心方塊
?????? decimal? 數字
?????? lower-alpha? 小寫英文
?
列表項圖像：list-style-image
?????? url（images/f1.png）
?
列表標志位置：list-style-position
?????? outside
?????? inside
?
列表綜合設置
?????? list-style:square ??inside?? url(images/f1.png)
?
?
?
?
?
?
?
#第十一章 網頁布局
?
布局簡介: 網頁布局是指網頁內容 在頁面上所處位置的設計。
布局概念
?????? 頁面尺寸：
分辨率:800x600時，頁面尺寸:780x428個像素
分辨率:640x480時，頁面尺寸:620x311個像素
分辨率:1024x768時，頁面尺寸:1005x600個像素
布局常見版式
布局的方法
布局思想：由整體到局部
?
結構性標簽div、span
?????? Div
????????????? ? div相當于一個容器（盒子）
? div標簽可以把文檔分割為獨立的、不同的部分
? 通過id或class屬性區分不同的容器
div具有盒子模型的所有屬性， 布局時用來控制元素之間的距離和相對位置
?
應用浮動float
?????? 浮動：定義元素在哪個方向浮動，改變頁面中對象的前后流動順序
?????? Left??????? 左浮動
?????? Right????? 右浮動
?????? None????? 不浮動
?????? Inherit??? 繼承父元素float屬性
?
float所產生的問題
?????? 1. 浮動元素距離父元素邊框的位置，是該側的父元 素padding+自身margin的值
2. 通常不會超過父元素的邊界
3. 元素一旦浮動就不屬于父元素了
4. 浮動元素不會相互重疊
5. 不能上下浮動，通常只設一種浮動即可
6. 如果父元素寬度不夠，浮動元素會另起一行顯示。
?
Overflow
?????? 1、父元素不設高度并且子元素浮動時，使父元素高度自 動適應子元素高度。
2、父元素設置的高度或寬度小于子元素時，使父元素出 現相應滾動條或隱藏子元素超出部分內容
?
Clear
?????? 用來設置該元素邊上沒有其他元素可以浮動
?????? clear: left / right / both / none
?
相對定位、絕對定位
?????? ? 絕對定位
? position:absolute
?1、與left，right，top，bottom等屬性共同使用
?2、如果父元素未設置position屬性，則以瀏覽器 窗口左上角為起始位置
?3、如果父元素設置了position屬性，則以父元素 左上角為起始位置
? 相對定位
? position:relative
?1、與left，right，top，bottom等屬性共同使用
?2、以自身本應在的位置為起始位置
?
?
float和position相似點：
1、都是將元素浮動起來
2、元素一旦設置就與父元素沒關系了 float和position
不同點：
1、position與top、left等配套使用
2、float位置移動通過margin、padding等實現
3、overflow和clear對position無效
4、布局通常使用float，而不是position
?
?
布局示例。
?
?
?
?
?
?
?
#第十二章 CSS盒子模型
?
行內元素、塊級元素的概念及display屬性的用法。
CSS盒子模型簡介。
Web中的盒子：一個矩形區域，內容包裹在盒子中。盒子的 堆疊與嵌套形成整個頁面的內容排布。
?
盒子模型
寬度
高度
邊框
內邊距
外邊距
?
根據HTML元素的顯示特征，可分為：
?塊級元素（block level element）
? 元素在顯示時會獨占一行，并同時具有寬、高、內外邊距特征。
? 舉例：form – 交互表單 ，h1 – 1級標題 ，hr – 水平分隔線 ，p – 段落 ，table – 表格 ，ul – 無序列表
?行內元素（inline element）
? 在顯示時通常不會以新行開始，橫向排列，到最右端自動折行。
? 舉例：a – 鏈接 ，img – 圖片 ，input – 輸入框 ，select – 項目選擇 ，font – 字體設定 ，b – 粗體 ，i – 斜體 ，strong – 粗體強調
?
Display：block/inline/none；
?
?
border-top? 上邊框
border-right? 右邊框
border-bottom? 下邊框
border-left? 左邊框
?邊框的寬度：border-width
?邊框的顏色：border-color
?邊框的樣式：border-style
?
border-width：20px；四面
border-width：20px 10px；上下，左右
border-width：20px 10px 5px 10px；上右下左
復合
border：width style color；?????? border:1px solid #cccccc；
padding、margin與border相同
?
?
?
?
?
?
?
#第十三章 CSS高級內容
?
CSS高級選擇器
分組選擇器
派生選擇器
屬性選擇器
后代選擇器
子元素選擇器
相鄰兄弟選擇器
導航欄
圖片庫
圖片透明
CSS顏色
CSS單位
網絡安全字體
CSS聽覺參考手冊
?
?
?
?
?
?
?
#第十四章 div+CSS布局實戰
?
瀏覽器調試工具的使用方法。
?????? 網頁中選定需要修改或查看樣式的網頁元素，右鍵，審查元素。
?
根據實例資料，完成頁面搭建。
- ? 網頁設計基本流程
- 需求獲取
- 制作UI效果圖
- 網頁設計與實現
- 分析網頁結構
- 用HTML實現網頁結構
- 用CSS實現網頁結構布局
- 填充網頁內容
- 修飾網頁樣式
- 調整瀏覽器兼容性
- 網站上線運營
?
布局技巧總結。
-
-
- 網頁布局遵循從整體到局部的原則。
- margin容易產生邊界的重合，邊界重合時利用padding或border來避免。
- 使用浮動功能時記得適當清除指令。
-
?
?
?
?
?
?
?
?
?
#第十五章 瀏覽器兼容性調整
?
瀏覽器兼容性問題簡介。
常見的瀏覽器兼容性問題。
?????? 1、網頁居中問題。問題癥狀：IE6下常規設置無法使頁面居中。
????????????? 解決方案：body{text-align:center}
?????? 2、某些瀏覽器不支持某些屬性。問題癥狀：IE6下不支持min-width、max-height等屬性。
????????????? 解決方案：具體情況具體分析
?????? 3、png透明圖片支持問題。問題癥狀：IE6下不支持透明圖片。
????????????? 解決方案：js方法或css濾鏡
?????? 4、不同瀏覽器的標簽默認的外邊距和內邊距不同。問題癥狀：不加樣式控制的情況下，各自的margin 、padding、p等差異較大。
????????????? 解決方案：CSS里??? *{margin:0; padding:0;}
?????? 5、塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
????????????? 問題癥狀：常見癥狀是IE6中后面的一塊被頂到下一行。
????????????? 解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性；或使用hack方法
?
?
?
?
?
?
??????
?
?
CSS Hack跨瀏覽器解決方案。
?????? 1、使用合適的文檔聲明（DOCTYPE）
?????? 2、對標準瀏覽器進行兼容
-
- 編寫代碼時，要了解客戶群的瀏覽器使用情況。
- 編寫代碼時，以標準瀏覽器（Firefox/Chrome）為參考，暫時不考慮特殊瀏覽器行為（IE6類）。
- 一般情況下，先做一些通用設置，把兼容性問題扼殺在萌芽中。
3、標準的網頁代碼
-
- ??? 盡量使代碼符合w3c標準
- 借助w3c提供的HTML驗證器和CSS驗證器對代碼進行網上標準化驗證
4、借助瀏覽器開發者工具調試
?
IE條件注釋。
?????? 1、HTML頭部引用Hack（條件注釋法）
????????????? <!--[if IE]>這段文字只在IE瀏覽器顯示<![endif]-->
<!--[if IE 6]>這段文字只在IE6瀏覽器顯示<![endif]-->
<!--[if gte IE 6]>這段文字只在IE6以上(包括)版本IE瀏覽器顯示<![endif]-->
<!--[if ! IE 8]>這段文字在非IE8瀏覽器顯示<![endif]-->
<!--[if !IE]>這段文字只在非IE瀏覽器顯示<![endif]-->
?????? 2、CSS類內部Hack（類內屬性前綴法）
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。
?
?
W3C驗證。
?
?
?
?
?
?
?
#第十六章 網頁視覺設計
?
網頁布局
?
網頁尺寸
柵格布局（頁面柵格、產品柵格）
- ? 柵格系統
- 柵格設計系統（又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。（維基百科）
?
- ? 網頁設計中的柵格系統
- 以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。
?
?????? 柵格系統的設計原理及應用
-
- 在網頁設計中，我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A” 。
?
留白
?????? １、版塊間距均為10px
２、版塊與內容間距為10px
３、內容單元之間間距為10px
?4、內容的間距均為10px
?
網頁風格
?
版式（軸型、自由型、框型、T字型、標準T字型、同字型、混合型）
?????? 1、軸型：圖片和文字內容集中在頁面的中軸位置，可以是橫軸也可以是縱軸分布。
?????? 2、焦點型：圖片和文字集中在頁面的某一位置，用對比強烈的顏色或者圖片表達。
?????? 3、格型：圖片和文字被比較均勻的方格所劃分。
?????? 4、框型：主要內容在中間的較大區域，而導航欄和常規欄目則分布在類似邊框的周圍區域。
?????? 4、自由型：沒有固定的版式和風格，完全隨意安排文字和圖片的位置。
?????? 5、混合型：兩種或兩種以上的頁面版式結合使用。
??????
?
?
風格
?????? 歐美風格
??? 歐美國家慣用的設計風格，一類簡潔明了、色彩單一；一類構圖復雜、色彩濃烈。
?????? 韓國風格
?????? 韓國慣用的界面設計，色彩清爽、多用藍、綠色、多用大圖片、漸變色、人物和卡通矢量圖。
?????? 中國風格
??? 具有中國古典風格的設計，古色古香，以具有中國特色的花紋或圖案來裝飾。
?
?
網頁用色（色彩原理、色彩的心理感受、網頁色彩運用）
?????????????
?
網頁設計趨勢
?
?
?
?
?
?
?
#第十七章 網頁元素設計
?
文字設計
字體、字體
標題、正文文字設計
文字顏色
行、與段落
圖片設計
logo設計
banner設計
背景圖片設計
網頁配圖
圖文混排
表單設計
Tab設計
按鈕設計
圖標設計
?
?
?
?
?
?
?
#第十八章 網頁設計規范
?
頁面規劃
尺寸兼容
欄目
布局
頁面元素
顏色運用
創意設計
細節設計
交互設計
統一設計
醒目
用戶體驗友好性設計
