HTML5+ CSS3+JavaScript 網頁設計實戰


HTML5+ CSS3+JavaScript 網頁設計實戰

本書特色

本書內容

本書代碼、課件與教學視頻下載

本書讀者

1 網站與HTML網頁►

1.1 什么是網站和網頁

1.2 網站的組成

1.2.1 網址
1.2.2 網站空間
1.2.3 DNS域名解析
1.2.4 網站程序
1.2.5 數據庫
1.2.6 Web服務器

1.3 HTML網頁的組成

1.3.1 HTML網頁結構
1.3.2 HTML網頁頭部
1.3.3 HTML網頁主體
1.3.4 HTML網頁要求
1.3.5 HTML網頁標簽
1.3.6 HTML與XHTML

1.4 靜態網頁與動態網頁

1.5 Web標准

1.5.1 結構標准
1.5.2 表現標准
1.5.3 行為標准
1.5.4 代碼標准
1.5.5 標准測試
1.5.6 HTML、CSS與JavaScript三者的關系

1.6 HTML 5介紹

1.6.1 HTML 5的發展歷史
1.6.2 HTML 5的設計理念
1.6.3 HTML 5的新特性
1.6.4 HTML 5的新變革
1.6.5 HTML 5的新標簽
1.6.6 HTML 5的移動特性及未來

1.7 如何創建一個HTML 5網頁

1.7.1 HTML 5代碼的編寫
1.7.2 使用文本編輯器開發
1.7.3 使用EditPlus編輯器開發
1.7.4 使用Sublime編輯器開發
1.7.5 使用WebStorm平台開發
1.7.6 使用Dreamweaver平台開發

2 HTML網頁結構►

2.1 DOCTYPE標簽

2.1.1 概念及作用
2.1.2 使用規則
2.1.3 DTD類型

2.2 HTML標簽

2.2.1 概念及作用
2.2.2 使用方法

2.3 head標簽

2.3.1 基本概念
2.3.2 功能作用
2.3.3 使用方法

2.4 refresh重定向

2.4.1 基本概念
2.4.2 使用方法
2.4.3 http-equiv屬性

2.5 base基址標簽

2.5.1 基本概念及作用
2.5.2 常規用法
2.5.3 特殊用法

2.6 引用CSS樣式文件

2.6.1 概述
2.6.2 功能用法
2.6.3 簡單示例

2.7 引用JavaScript腳本文件

2.7.1 概述
2.7.2 內嵌式JavaScript腳本
2.7.3 引入外部JavaScript腳本

2.8 HTML網頁注釋

2.9 瀏覽器對HTML屬性的支持

3 HTML網頁文字與排版►

3.1 段落排版

3.1.1 段落標簽
3.1.2 對齊與縮進
3.1.3 分割線
3.1.4 標題

3.2 文字排版

3.2.1 字形字體
3.2.2 上、下標字體

3.3 項目符號與編號

3.3.1 符號列表
3.3.2 編號列表
3.3.3 自定義列表

3.4 特殊符號

3.5 項目實戰:在線新聞瀏覽

4 HTML網頁圖像►

4.1 網頁圖片基礎

4.1.1 圖片尺寸、像素與分辨率
4.1.2 在網頁中顯示原始圖片
4.1.3 在網頁中調整圖片尺寸

4.2 網頁圖片效果

4.2.1 背景圖片
4.2.2 圖片對齊
4.2.3 浮動圖片
4.2.4 替換圖片的文本
4.2.5 圖片鏈接

4.3 項目實戰:在線圖文雜志

4.3.1 在線圖文雜志源代碼結構
4.3.2 在線圖文雜志頁眉設計
4.3.3 在線圖文雜志目錄設計
4.3.4 在線圖文雜志正文設計
4.3.5 在線圖文雜志頁腳設計

5 HTML網頁超鏈接►

5.1 超鏈接基礎

5.1.1 什么是超鏈接
5.1.2 超鏈接類型

5.2 超鏈接標簽

5.2.1 超鏈接格式
5.2.2 超鏈接語法

5.3 超鏈接應用

5.3.1 關鍵字超鏈接
5.3.2 圖片超鏈接
5.3.3 電子郵件鏈接

5.4 創建熱點區域

5.5 項目實戰:電子書制作

5.5.1 電子書源代碼結構
5.5.2 電子書主頁設計
5.5.3 電子書功能頁設計
5.5.4 電子書參考書籍頁設計

6 HTML網頁中的表格與表單►

6.1 HTML表格基礎

6.1.1 什么是HTML表格
6.1.2 HTML表格組成

6.2 HTML表格標簽

6.2.1 表格標簽
6.2.2 表格語法

6.3 HTML表格應用

6.3.1 空單元格表格
6.3.2 單元格邊距和間距
6.3.3 細線邊框表格
6.3.4 跨行與跨列的表格
6.3.5 表格背景顏色
6.3.6 單元格內容對齊方式
6.3.7 表格嵌套元素

6.4 HTML表單基礎

6.4.1 什么是HTML表單
6.4.2 HTML表單框架

6.5 HTML表單組成

6.5.1 表單
標簽
6.5.2 表單組成
6.5.3 一個簡單的表單頁面

6.6 HTML表單元素

6.6.1 文本域及其標記
6.6.2 密碼域
6.6.3 單選按鈕
6.6.4 復選框
6.6.5 下拉列表
6.6.6 多行文本域
6.6.7 分組框(Fieldset)

6.7 HTML 5表單新屬性

6.7.1 自動完成屬性
6.7.2 自動焦點屬性

6.8 HTML 5表單輸入類型

6.8.1 email類型
6.8.2 number類型
6.8.3 range類型
6.8.4 search類型
6.8.5 url類型
6.8.6 日期選擇器(Data Pickers)

6.9 項目實戰:HTML 5用戶注冊頁面

7 HTML 5應用►

7.1 畫布 工具

7.1.1 畫布 工具介紹
7.1.2 畫布 標簽定義
7.1.3 畫布 工具對象、坐標、路徑和填充
7.1.4 使用畫布 繪制圖形
7.1.5 使用畫布 繪制文字
7.1.6 畫布 特效

7.2 HTML 5離線緩存

7.2.1 HTML 5離線緩存API介紹
7.2.2 使用Manifest文件
7.2.3 使用ApplicationCache API

7.3 HTML 5 Web存儲

7.3.1 HTML 5 Web存儲概述
7.3.2 localStorage存儲方式
7.3.3 sessionStorage存儲方式

7.4 項目實戰:搭建簡單的HTML 5離線APP

8 CSS與CSS 3►

8.1 回顧CSS

8.1.1 什么是CSS
8.1.2 CSS發展簡史
8.1.3 XHTML+CSS設計標准

8.2 CSS語法構成

8.2.1 CSS基礎語法
8.2.2 CSS高級語法
8.2.3 CSS選擇器

8.3 CSS標簽語義化

8.4 CSS命名規范

8.4.1 CSS文件名稱命名規范
8.4.2 頁面功能區域的命名規范
8.4.3 頁面位置的命名規范
8.4.4 父子關系的命名規范
8.4.5 具體功能的命名規范
8.4.6 控件的命名規范
8.4.7 自定義命名規范

8.5 CSS使用方法

8.5.1 外鏈式
8.5.2 嵌入式
8.5.3 內聯式
8.5.4 優先級

8.6 創建並編輯CSS的工具

8.6.1 CSS創建與編輯工具
8.6.2 使用集成開發平台

8.7 CSS 3新增特性概述

8.7.1 CSS 3屬性選擇器
8.7.2 RGBA透明度
8.7.3 CSS 3多欄布局
8.7.4 CSS 3字符串溢出
8.7.5 CSS 3圓角
8.7.6 CSS 3陰影

9 CSS選擇器►

9.1 CSS選擇器基礎

9.1.1 什么是CSS選擇器
9.1.2 CSS選擇器分類
9.1.3 CSS選擇器優先級

9.2 CSS選擇器應用

9.2.1 標簽選擇器
9.2.2 類選擇器
9.2.3 id選擇器
9.2.4 派生選擇器
9.2.5 后代選擇器
9.2.6 子選擇器
9.2.7 相鄰兄弟選擇器
9.2.8 屬性選擇器
9.2.9 偽類選擇器

9.3 項目實戰:應用CSS選擇器設計頁面

10 CSS基礎樣式►

10.1 背景樣式

10.1.1 背景顏色
10.1.2 背景圖片
10.1.3 背景重復
10.1.4 背景定位
10.1.5 固定背景位置

10.2 字體樣式

10.2.1 字體系列
10.2.2 字體風格
10.2.3 字體加粗
10.2.4 字體變形
10.2.5 字體大小

10.3 文本樣式

10.3.1 文本對齊方式
10.3.2 文本縮進
10.3.3 文本間隔
10.3.4 文本修飾
10.3.5 文本方向
10.3.6 處理文本空白符

10.4 文本美化

10.4.1 文本陰影
10.4.2 文本溢出
10.4.3 文本邊框輪廓

10.5 顏色樣式

10.5.1 十六進制顏色
10.5.2 RGB顏色
10.5.3 RGBA顏色

10.6 項目實戰:報紙風格頁面

11 CSS表格與列表►

11.1 CSS表格

11.1.1 表格邊框
11.1.2 表格折疊邊框
11.1.3 表格內邊距
11.1.4 表格寬度和高度
11.1.5 表格文本對齊

11.2 CSS列表

11.2.1 列表標記類型
11.2.2 列表標記位置
11.2.3 圖片列表標記

11.3 項目實戰:CSS登錄頁面

12 JavaScript概述►

12.1 了解JavaScript腳本語言

12.1.1 什么是JavaScript腳本語言
12.1.2 JavaScript的發展歷史
12.1.3 JavaScript組成與特點

12.2 在網頁中使用JavaScript腳本語言

12.2.1 在網頁中嵌入JavaScript腳本
12.2.2 引入外部JavaScript文件

12.3 創建並編輯JavaScript的工具

12.4 JavaScript腳本語言開發與調試

12.4.1 使用WebStorm開發平台創建項目並編輯代碼
12.4.2 使用Firefox瀏覽器調試js腳本

13 JavaScript語法►

13.1 JavaScript語法基礎

13.1.1 JavaScript語句
13.1.2 JavaScript代碼及執行
13.1.3 JavaScript語法補充
13.1.4 JavaScript代碼注釋

13.2 JavaScript變量與數據類型

13.2.1 JavaScript變量
13.2.2 JavaScript數據類型
13.2.3 JavaScript對象
13.2.4 null與undefined數據類型
13.2.5 JavaScript保留關鍵字

13.3 JavaScript運算符與表達式

13.3.1 JavaScript算術運算符及表達式
13.3.2 JavaScript賦值運算符及表達式
13.3.3 JavaScript比較運算符及表達式
13.3.4 JavaScript邏輯運算符及表達式
13.3.5 JavaScript條件運算符及表達式
13.3.6 JavaScript位運算符及表達式
13.3.7 JavaScript字符串連接運算符
13.3.8 JavaScript運算符優先級

13.4 JavaScript流程控制語句

13.4.1 if語句
13.4.2 if…else…語句
13.4.3 if…else if…else…語句
13.4.4 switch語句
13.4.5 for語句
13.4.6 while語句
15.4.7 break語句
15.4.8 continue語句

13.5 JavaScript函數

13.5.1 JavaScript函數介紹
13.5.2 JavaScript函數聲明、定義與調用
13.5.3 JavaScript系統函數

13.6 項目實戰:簡易在線JavaScript計算器

14 JavaScript對象模型編程►

14.1 對象模型編程基礎

14.2 JavaScript瀏覽器對象模型

14.3 JavaScript文檔對象模型

14.3.1 文檔對象模型基礎
14.3.2 通過id獲取DOM元素對象
14.3.3 通過name獲取DOM元素對象
14.3.4 通過tag標簽獲取DOM元素對象
14.3.5 通過class獲取DOM元素對象

14.4 JavaScript表單對象模型

14.4.1 表單(Form)對象模型
14.4.2 獲取表單(Form)元素對象屬性
14.4.3 獲取表單(Form)內元素的方法

14.5 項目實戰:動態操作DOM元素

15 JavaScript事件►

15.1 JavaScript事件基礎

15.1.1 HTML事件
15.1.2 DOM事件類型

15.2 JavaScript窗口事件

15.2.1 窗口(Window)加載事件
15.2.2 窗口(Window)加載多個事件
15.2.3 窗口(Window)加載事件(JS方式)

15.3 JavaScript表單事件

15.3.1 表單(Form)元素變化事件
15.3.2 表單(Form)元素被選中事件
15.3.3 表單(Form)元素焦點事件
15.3.4 表單(Form)重置與提交事件

15.4 JavaScript鍵盤事件

15.5 JavaScript鼠標事件

15.5.1 鼠標單擊事件
15.5.2 鼠標雙擊事件
15.5.3 鼠標懸停與移出事件

15.6 項目實戰:鼠標坐標位置應用

16 項目實戰——自適應Web主頁►

16.1 自適應Web主頁介紹

16.2 自適應Web主頁模塊

16.2.1 頁面框架
16.2.2 頁面頭部導航工具條
16.2.3 頁面主體部分
16.2.4 頁面頁腳部分

16.3 自適應Web主頁交互功能

16.4 自適應Web主頁媒體查詢

17 項目實戰——用戶管理系統►

17.1 用戶管理系統介紹

17.2 數據存儲結構

17.3 瀏覽器本地存儲

17.4 用戶管理系統功能模塊

17.4.1 用戶管理系統主頁
17.4.2 登錄頁面
17.4.3 用戶管理頁面(用戶權限)
17.4.4 新建用戶信息
17.4.5 編輯用戶信息
17.4.6 刪除用戶信息
17.4.7 新用戶注冊

思維導圖

HTML5+ CSS3+JavaScript 網頁設計實戰

防止博客圖床圖片失效,防止圖片源站外鏈:

http://www.processon.com/chart_image/5e5b386ce4b0cb56dab11f16.png)

思維導圖在線編輯鏈接:

https://www.processon.com/view/5e5b386ce4b0cb56dab11f13


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM