本書從網站基礎開始, 結合大量案例, 全面、翔實地介紹了使用HTML+CSS+JavaScript開發Web前端頁面的具體方法與步驟, 引導讀者從零開始, 一步步掌握Web開發的工程。
“網絡開發視頻大講堂”叢書系清華社“視頻大講堂”重點大系之一。該大系包括多個子系列,每個子系列的圖書在其同品種的圖書中銷售名列前茅,其中:
4個品種榮獲“全行業暢銷品種”
1個品種榮獲2012年清華大學出版社“專業熱銷書”一等獎
絕大多數品種在“計算機零售圖書排行榜”同品種排行中名列前茅
截至目前該大系累計銷售超過55萬冊
該大系已成為近年來清華社計算機專業基礎類零售圖書熱銷的品牌之一
“網絡開發視頻大講堂”系列作為清華社“視頻大講堂”大系的子系列之一,繼承和創新了清華社“視頻大講堂”大系的編寫模式、寫作風格和優良品質。本書突出了以下內容:
368節大型高清同步視頻演示講解,可反復觀摩,讓學習更為快捷、高效
數百個典型中小實例,通過實例學習更深入,更有趣,更有動力
4個綜合實戰案例,展現工作過程,積累工作經驗
?實用網頁模板380套,網頁配色辭典1部,協調色配色參考7套,網頁色彩搭配圖43張,不同色系實物配色卡540張,實用配色參考18部,網頁設計素材13類
?PS分層模板10套,PS樣式8類,PS濾鏡46個,PS漸變樣式6類,PS筆刷樣式9類,PS填充圖案5類,PS字體集合1000個
?HTML工具集6部,CSS工具集8部,JavaScript工具集16部,PS幫助手冊1部
?HTML應用案例360個,CSS3應用案例510個,JavaScript+jQuery應用案例900個,網頁交互設計案例1000個
?Web前端開發規范手冊1部,JavaScript知識點思維導圖10張,HTML+CSS面試題351道,JavaScript面試題685道,網頁欣賞
作者簡介:
胡曉霞,資深Web技術專家,有10余年開發經驗,是國內較早專業從事Web開發的一線技術人員和培訓講師。一直致力于對HTML5、JavaScript、CSS3、jQuery、jQUery Mobile等Web開發技術的研究和實踐,在HTML頁面的優化與用戶體驗的研究,以及頁面框架搭建、數據流向分析、頁面靜態優化等方面都擁有豐富的實踐經驗。他還是微軟技術方面的專家,精通C#、ASP.NET和SQL Server等技術。
目錄:
第1章網頁設計基礎
1.1熟悉網頁設計概念
1.1.1網頁和網站
1.1.2網頁類型
1.1.3網頁構成
1.2網頁設計學習任務
1.2.1學習HTML
1.2.2學習DIV結構
1.2.3學習CSS
1.2.4學習JavaScript
1.3網頁設計素養
1.3.1網頁設計任務
1.3.2網頁設計原則
1.3.3網頁設計流程
1.3.4網頁配色
1.4網站開發流程
1.4.1個人網站開發流程
1.4.2應用項目開發流程
1.4.3承包網站開發流程
附錄一:《網站建設合同》參考范本
附錄二:《網站維護說明書》
參考范本
第2章HTML基礎
視頻講解:26分鐘
2.1HTML歷史
2.2HTML規范雛形
2.3HTML與XHTML
2.4HTML基礎
2.4.1HTML語言作用
2.4.2HTML文檔基本結構
2.4.3HTML基本語法
2.4.4HTML常用標簽
2.5XHTML基礎
2.5.1XHTML文檔基本結構
2.5.2XHTML基本語法
2.5.3XHTML文檔類型
2.5.4DTD文檔類型解析
2.5.5名字空間
2.6HTML元信息
第3章設計符合語義的頁面
視頻講解:67分鐘
3.1網頁語義化概述
3.2元素分類
3.2.1結構語義
3.2.2內容語義
3.2.3修飾語義
3.3屬性分類
3.3.1核心屬性
3.3.2語言屬性
3.3.3鍵盤屬性
3.3.4內容屬性
3.3.5其他屬性
3.4定義文本信息
3.4.1設計標題信息
3.4.2設計段落信息
3.4.3設計引用信息
3.4.4設計強調信息
3.4.5設計格式信息
3.4.6設計輸出信息
3.4.7設計信息縮寫
3.4.8設計插入和刪除信息
3.4.9設計其他文本信息
3.5定義列表信息
3.5.1認識列表
3.5.2設計普通列表
3.5.3設計定義列表
3.5.4使用定義列表的誤區
3.6設計表格
3.6.1認識表格結構
3.6.2使用表格元素
3.6.3表格分組
3.7設計表單
3.7.1認識表單結構
3.7.2使用表單元素
3.7.3form元素
3.7.4input元素
3.7.5textarea和select元素
3.7.6表單分組
3.7.7綁定提示標簽
3.7.8定義快捷鍵、訪問鍵和禁止訪問
3.7.9select選項分區
3.7.10使用按鈕
3.8案例實戰
3.8.1設計一個自我介紹簡單頁面
3.8.2解決網頁亂碼現象
3.8.3把HTML轉換為XHTML
3.8.4輸出唐詩
第4章設計符合標準的結構
4.1元素顯示類型
4.1.1認識元素顯示類型
4.1.2塊狀元素
4.1.3行內元素
4.1.4其他元素
4.2結構嵌套規則
4.2.1分析結構亂套現象
4.2.2嚴謹的嵌套規則
4.2.3HTML嵌套規則應用
4.3案例實戰:設計CSS禪意花園
4.3.1認識CSS禪意花園
4.3.2定義網頁結構
4.3.3設計嵌套結構
4.3.4構建基本框架
4.3.5設計局部結構
4.3.6正文版式設計
第5章設計HTML5文檔
視頻講解:36分鐘
5.1HTML5基礎
5.1.1HTML5語法
5.1.2HTML5元素
5.1.3HTML5對象屬性
5.1.4HTML5全局屬性
5.2認識HTML5文檔結構
5.3HTML5元素分類
5.4構建主體內容
5.4.1標識文章
5.4.2給內容分段
5.4.3設計導航信息
5.4.4設計輔助信息
5.4.5設計微格式
5.4.6添加發布日期
5.5添加語義模塊
5.5.1添加標題塊
5.5.2給標題分組
5.5.3添加腳注塊
5.5.4添加聯系信息
5.6案例實戰:使用HTML5設計博客主頁
5.6.1設計大綱
5.6.2設計樣式
第6章CSS基礎
視頻講解:79分鐘
6.1CSS概述
6.1.1什么是CSS樣式
6.1.2為什么學習CSS
6.1.3CSS特點
6.2CSS語法和用法
6.2.1CSS基本結構
6.2.2CSS基本用法
6.2.3CSS樣式表
6.2.4導入外部樣式表
6.2.5CSS注釋和版式
6.3CSS屬性和單位
6.3.1CSS屬性
6.3.2CSS單位
6.4簡單選擇器
6.4.1標簽選擇器
6.4.2類選擇器
6.4.3ID選擇器
6.4.4通配選擇器
6.5復合選擇器
6.5.1子選擇器
6.5.2相鄰選擇器
6.5.3包含選擇器
6.5.4多層選擇器嵌套
6.5.5屬性選擇器
6.5.6偽選擇器和偽元素選擇器
6.5.7選擇器分組
6.6CSS3新增選擇器
6.6.1兄弟選擇器
6.6.2目標偽類選擇器
6.6.3結構偽類選擇器
6.6.4否定偽類選擇器
6.6.5狀態偽類選擇器
6.7CSS繼承性、層疊性和特殊性
6.7.1CSS繼承性
6.7.2CSS層疊性
6.7.3CSS優先級
6.7.4CSS特殊性
6.8案例實戰
6.8.1設計導航菜單
6.8.2設計登錄表單
第7章設計文本樣式
視頻講解:56分鐘
7.1字體樣式
7.1.1定義字體類型
7.1.2定義字體大小
7.1.3定義字體顏色
7.1.4定義字體粗細
7.1.5定義斜體字體
7.1.6定義下劃線
7.1.7定義字體大小寫
7.2文本樣式
7.2.1定義文本對齊
7.2.2定義垂直對齊
7.2.3定義字距和詞距
7.2.4定義行高
7.2.5定義縮進
7.3案例實戰
7.3.1設計英文格式1
7.3.2設計英文格式2
7.3.3設計中文報刊版式
7.3.4設計中文層級版式
第8章設計圖像樣式
視頻講解:72分鐘
8.1網頁中的圖像
8.2圖像樣式
8.2.1定義圖像大小
8.2.2定義圖像邊框
8.2.3定義圖像不透明度
8.2.4定義圓角圖像
8.2.5定義陰影圖像
8.2.6圖文混排
8.3綜合實戰:設計圖文新聞內容頁
8.4背景圖像
8.4.1定義背景圖像
8.4.2定義顯示方式
8.4.3定義顯示位置
8.4.4定義固定背景
8.5綜合實戰
8.5.1設計博客首頁
8.5.2設計社區相冊
8.5.3CSSSprites
第9章設計超鏈接樣式
視頻講解:26分鐘
9.1定義超鏈接樣式
9.1.1認識超鏈接
9.1.2偽類和偽對象
9.1.3定義鏈接樣式
9.2案例實戰
9.2.1定義下劃線樣式
9.2.2定義立體樣式
9.2.3定義動態樣式
9.2.4定義圖像交換樣式
9.2.5定義鼠標樣式
9.2.6設計圖形化按鈕樣式
9.2.7設計滑動門樣式
第10章設計列表樣式
視頻講解:49分鐘
10.1設計列表結構
10.1.1無序列表
10.1.2有序列表
10.1.3定義列表
10.2定義列表樣式
10.2.1定義列表類型
10.2.2自定義項目符號
10.2.3用背景圖模擬項目符號
10.3列表布局
10.3.1列表堆疊
10.3.2水平布局
10.4案例實戰
10.4.1設計背景水平滑動菜單
10.4.2設計背景垂直滑動菜單
10.4.3設計Tab面板菜單
10.4.4設計下拉式面板菜單
10.5設計列表欄目樣式
10.5.1案例1:音樂榜單
10.5.2案例2:圖文列表欄
第11章設計表格樣式
視頻講解:45分鐘
11.1設計表格結構
11.1.1早期表格結構
11.1.2標準表格結構
11.2定義表格基本樣式
11.2.1使用表格標簽屬性
11.2.2設計細線表格
11.2.3定義單元格空隙
11.2.4隱藏空單元格
11.3設計表格特殊樣式
11.3.1表格布局特性
11.3.2定義列組和行組樣式
11.3.3定義表格標題樣式
11.3.4合并單元格
11.3.5表格樣式的層疊順序
11.4案例實戰
11.4.1設計單線表格
11.4.2設計層級表格樣式
11.4.3設計日歷表
第12章設計表單樣式
視頻講解:42分鐘
12.1設計表單
12.1.1表單框
12.1.2輸入框
12.1.3選擇框
12.1.4優化結構
12.2定義表單樣式
12.2.1設計文本框
12.2.2設計單選按鈕和復選框
12.2.3設計下拉菜單和列表框
12.3案例實戰
12.3.1設計用戶登錄頁
12.3.2設計用戶注冊頁
12.3.3設計搜索框
第13章CSS網頁布局
視頻講解:41分鐘
13.1網頁布局概述
13.1.1認識div和span
13.1.2認識display
13.1.3網頁布局分類
13.2CSS盒模型
13.2.1認識盒模型
13.2.2定義邊界
13.2.3邊界重疊
13.2.4定義邊框
13.2.5定義補白
13.3網頁布局基本方法
13.3.1定義float
13.3.2使用clear
13.3.3定義position
13.3.4設置層疊順序
13.4案例實戰
13.4.1設計網頁居中顯示
13.4.2設計定位版三欄頁面布局
13.4.3設計多欄高度自適應頁面
13.4.4設計負margin頁面
第14章CSS兼容技法
視頻講解:39分鐘
14.1認識瀏覽器
14.1.1瀏覽器類型
14.1.2瀏覽器解析模式
14.2基本兼容方法
14.2.1IE條件語句
14.2.2屬性過濾器
14.2.3選擇器過濾器
14.3案例實戰:流動問題與處理
14.3.1標簽的默認樣式
14.3.2有序列表高度問題
14.3.3列表寬度問題
14.3.4項目符號變異問題
14.3.5列表行雙倍高度問題
14.3.6列表項錯行問題
14.3.7默認高度問題
14.3.8失控的子標簽問題
14.3.9使用背景圖代替文本問題
14.4案例實戰:浮動問題與處理
14.4.1浮動被流動包含問題
14.4.2高度自適應問題
14.4.3欄目內容被隱藏
14.4.4邊界和浮動問題
14.4.5半個像素問題
14.4.63像素問題
14.4.7多出字符問題
14.5案例實戰:定位問題與處理
14.5.1定位參照物的問題
14.5.2定位層疊問題
14.5.3定位丟失問題
第15章JavaScript基礎
視頻講解:262分鐘
15.1JavaScript入門
15.1.1網頁中的JavaScript
15.1.2使用JavaScript文件
15.1.3JavaScript語法基礎
15.1.4認識JavaScript語法特性
15.2常量和變量
15.3表達式和運算符
15.4語句
15.4.1表達式語句和語句塊
15.4.2條件語句
15.4.3循環語句
15.4.4跳轉語句
15.4.5異常處理語句
15.4.6var語句和function語句
15.4.7with語句和空語句
15.5數據類型和類型轉換
15.5.1數值
15.5.2字符串
15.5.3布爾型
15.5.4null和undefined
15.5.5引用型數據
15.6函數
15.6.1定義函數
15.6.2調用函數
15.6.3函數參數
15.6.4函數應用
15.6.5閉包函數
15.7對象
15.7.1創建對象
15.7.2訪問對象
15.8數組
15.8.1定義數組
15.8.2存取元素
15.8.3數組應用
15.9案例實戰
15.9.1檢測數據類型
15.9.2數值計算與類型轉換
15.9.3字符串替換
15.9.4增強數組排序
15.9.5使用高階函數
15.9.6函數柯里化
15.9.7靈活使用this
13.1網頁布局概述
布局是一個很藝術的技術話題,即便是相同的HTML結構,不同的想法可能會設計出不同的效果。禪意花園(http://www.csszengarden.com/)就是一個典型案例,如圖13.1所示,禪意花園的作者DaveShea設計并開放了一個固定而又簡單的結構,讓網友參與設計和展示個人創意,結果在該網站共提交了200多份風格迥異的頁面設計效果。
圖13.1禪意花園CSS布局分享網站
13.1.1認識div和span
標簽早在HTML3.0版本中就已經被定義,受傳統布局的影響,最初并沒有廣泛應用。直到CSS普及,
標簽才逐漸被廣泛使用。
div全稱為division,中文翻譯為分隔或分開的意思,一般使用該元素來分隔頁面不同區塊。習慣上把