HTML5+CSS3網(wǎng)頁設(shè)計(jì)與網(wǎng)站布局從新手到高手

內(nèi)容概要

　　《從新手到高手：HTML 5+CSS 3網(wǎng)頁設(shè)計(jì)與網(wǎng)站布局從新手到高手》主要介紹使用HTML
5+CSS3進(jìn)行網(wǎng)站圖像、網(wǎng)頁動畫設(shè)計(jì)以及網(wǎng)頁制作的方法和實(shí)踐經(jīng)驗(yàn)，并從網(wǎng)站開發(fā)的角度，詳細(xì)介紹用HTML
5+CSS3開發(fā)不同類型靜態(tài)網(wǎng)站的經(jīng)驗(yàn)與過程。《從新手到高手：HTML 5+CSS
3網(wǎng)頁設(shè)計(jì)與網(wǎng)站布局從新手到高手》共分19章，內(nèi)容涉及HTML5基礎(chǔ)知識；HTML5的主體結(jié)構(gòu)、表單、新增元素和文件操作等內(nèi)容；HTML5的圖形繪制和高級應(yīng)用；HTML5中的多媒體應(yīng)用、本地存儲及離線存儲、通信與線程和獲取本地信息等內(nèi)容；CSS3中的基礎(chǔ)知識、選擇器、文本及盒的相關(guān)樣式等內(nèi)容；CSS3中的用戶界面模塊、變形處理、背景和邊框樣式等；后臺管理頁面的設(shè)計(jì)分析、設(shè)置頁面等。
　　《從新手到高手：HTML 5+CSS
3網(wǎng)頁設(shè)計(jì)與網(wǎng)站布局從新手到高手》圖文并茂、技術(shù)前衛(wèi)，適合網(wǎng)頁設(shè)計(jì)與制作初學(xué)者、網(wǎng)站開發(fā)人員，還可以作為高校相關(guān)專業(yè)的教材。

書籍目錄

第1章 什么是HTML
1.1 網(wǎng)頁的概述
1.2 靜態(tài)網(wǎng)頁
1.3 動態(tài)網(wǎng)頁
1.4 了解網(wǎng)頁瀏覽器
1.5 常用的瀏覽器
1.6 瀏覽器內(nèi)核／網(wǎng)頁排版引擎
1.7 HTML標(biāo)簽語言
1.8 XML可擴(kuò)展標(biāo)識語言
1.9 XHTML標(biāo)簽語言
1.10 HTML5的新功能
1.11 練習(xí)：創(chuàng)建HTML5文檔
1.12 練習(xí)：制作導(dǎo)航條
1.13 高手答疑
第2章 HTML 5的主體結(jié)構(gòu)
2.1 HTML 5結(jié)構(gòu)性標(biāo)簽體系
2.2 新增的主體結(jié)構(gòu)標(biāo)簽
2.3 新增的非主體結(jié)構(gòu)標(biāo)簽
2.4 練習(xí)：個人博客
2.5 練習(xí)：制作水果頁面
2.6 練習(xí)：水墨畫頁面
2.7 高手答疑
第3章 表單及表單驗(yàn)證
3.1 插入表單
3.2 新增表單屬性
3.3 HTML中的標(biāo)簽
3.4 新增表單域
3.5 新的表單元素
3.6 練習(xí)：用戶登錄
3.7 練習(xí)：用戶注冊
3.8 高手答疑
第4章 新增標(biāo)簽及文件操作
4.1 新增頁面標(biāo)簽
4.2 改良標(biāo)簽
4.3 增強(qiáng)的cite標(biāo)簽
4.4 重新定義的small標(biāo)簽
4.5 File List對象與file對象
4.6 Blob對象
4.7 File Reader接口
4.8 拖放接口
4.9 練習(xí)：風(fēng)景推薦線路
4.10 練習(xí)：制作校園簡介
4.11 高手答疑
第5章 使用Canvas API繪制圖形
5.1 認(rèn)識Canvas API元素
5.2 瀏覽器的支持與替代內(nèi)容
5.3 在頁面中放置Canvas元素
5.4 使用路徑功能
5.5 使用變換（Transformation）
5.6 保存圖形狀態(tài)
5.7 描邊樣式和填充樣式
5.8 在Canvas中插入圖片
5.9 繪制文字
5.10 繪制曲線
5.11 創(chuàng)建漸變對象
5.12 創(chuàng)建背景圖
5.13 應(yīng)用陰影
5.14 像素?cái)?shù)據(jù)
5.15 高手答疑
第6章 應(yīng)用多媒體
6.1 插入視頻或音頻
6.2 屬性
6.3 方法
6.4 事件
6.5 練習(xí)：在HTML5中插入音頻
6.6 練習(xí)：制作視頻播放頁面
6.7 高手答疑
第7章 本地存儲和離線應(yīng)用程序
7.1 什么是Web Storage
7.2 Web Storage的優(yōu)勢
7.3 判斷瀏覽器
7.4 Web Storage方法
7.5 本地?cái)?shù)據(jù)庫基本
7.6 本地?cái)?shù)據(jù)庫操作
7.7 離線Web應(yīng)用程序詳解
7.8 Cache Manifest文件
7.9 在線狀態(tài)檢測
7.10 Application Cache對象
7.11 練習(xí)：制作簡單留言簿
7.12 練習(xí)：創(chuàng)建離線瀏覽
7.13 高手答疑
第8章 通信與線程
8.1 跨文檔消息傳輸
8.2 Web Socket通信
8.3 了解Web Sockets API
8.4 使用Web Socket
8.5 了解Web Workers
8.6 Web Workers工作原理
8.7 工作線程與多線程
8.8 線程事件處理模型
8.9 線程生命周期
8.10 瀏覽器與線程
8.11 練習(xí)：制作信息發(fā)送頁
8.12 練習(xí)：多線程運(yùn)行
8.13 練習(xí)：單個線程計(jì)算
8.14 高手答疑
第9章 獲取地理位置信息
9.1 getcurrentPosition方法
9.2 WatchPosition方法
9.3 clearWatch方法
9.4 position對象
9.5 練習(xí)：聯(lián)系我們頁面
9.6 練習(xí)：個人博客
9.7 高手答疑
第10章 揭秘CSS3
10.1 了解CSS
10.2 使用CSS的好處
10.3 CSS的發(fā)展史
10.4 CSS缺點(diǎn)和使用陷阱
10.5 CSS3的新特性
10.6 應(yīng)用CSS
10.7 CSS里的單位
10.8 編寫規(guī)則
10.9 練習(xí)：制作多彩時尚網(wǎng)
10.10 練習(xí)：制作文章頁面
10.11 高手答疑
第11章 CSS3選擇器
11.1 認(rèn)識CSS3選擇器
11.2 屬性選擇器
11.3 偽類選擇器和偽元素
11.4 結(jié)構(gòu)性偽類選擇器
11.5 UI元素狀態(tài)偽類選擇器
11.6 其他關(guān)系選擇器
11.7 練習(xí)：制作圖書列表
11.8 練習(xí)：制作商品列表
11.9 高手答疑
第12章 在頁面中插入內(nèi)容
12.1 使用選擇器來插入文字
12.2 在標(biāo)題前插入圖像文件
12.3 插入圖像文件的好處
12.4 attr屬性應(yīng)用
12.5 使用content屬性
12.6 練習(xí)：企業(yè)新聞列表
12.7 練習(xí)：在線調(diào)查
12.8 高手答疑
……
第13章 文本相關(guān)樣式
第14章 盒相關(guān)樣式
第15章 用戶界面模塊
第16章 背景、邊框樣式及變形處理
第17章 CSS中的動畫
第18章 后臺管理頁面
第19章 君華房產(chǎn)網(wǎng)站首頁

章節(jié)摘錄

版權(quán)頁：   插圖：   問題4：圖片如何隨頁面滾動加載？ 解答：其實(shí)這是很多大型網(wǎng)站都使用的方法，比如淘寶、拍拍等。在游戲官網(wǎng)里做了一些嘗試，效果不錯，初期為首頁節(jié)省了幾十KB的下載量，因?yàn)椴煌@示器分辨率不同，所以第一屏高度不一樣，這個數(shù)據(jù)有所浮動。 首先，將圖片的路徑存儲在img標(biāo)簽的一個非src屬性中，首頁是存儲在rel屬性中的，此舉是避免頁面直接加載圖片。然后使用Js的監(jiān)聽方法（IE是attachEvent，其他瀏覽器是addEventListener），監(jiān)聽頁面的scroll事件。 一旦頁面滾動，就會執(zhí)行一個編寫的函數(shù)，來判斷圖片是否處于瀏覽器的當(dāng)前一屏內(nèi)，如果是，將rel屬性內(nèi)的地址賦值給src屬性，如果不是，繼續(xù)監(jiān)聽。當(dāng)板塊內(nèi)的所有圖片都被加載后，取消監(jiān)聽。 問題5：如何減少頁面加載量？ 解答：減少頁面加載量最主要的目的是減少資源消耗，加快頁面的呈現(xiàn)速度。雖然延遲加載可以在一定程度上優(yōu)化頁面的性能，但不是所有的內(nèi)容都需要第一時間加載給用戶看或者重復(fù)加載的。 例如，用戶在瀏覽頁面第一屏的內(nèi)容，那么頁面在打開時就加載第一屏以下的一些內(nèi)容就不是很有必要。再或者，官網(wǎng)頁面申一些相同的部分，如導(dǎo)航、腳部聲明等部分，這些修改率極低的內(nèi)容每次都從服務(wù)器請求，在一定程度上增加了頁面加載的負(fù)荷。 減少頁面加載量的方法有很多，這主要用到了以下方法。 采用HTML 5本地存儲技術(shù)，在用戶電腦里存儲頁面的一些內(nèi)容，如導(dǎo)航、合作媒體、腳部聲明等。這樣用戶在加載頁面時，瀏覽器直接從本地獲取這些內(nèi)容，在一定程度上減少了資源的消耗。 圖片隨滾動條滾動加載，使用戶在瀏覽頁面時，動態(tài)按需加載圖片。比如，用戶在瀏覽第一屏內(nèi)容時，第一屏以后的圖片是沒有加載的，當(dāng)用戶滾動頁面時，呈現(xiàn)在瀏覽器申的部分會動態(tài)加載圖片。 優(yōu)化輪播廣告的加載方式，頁面打開時只加載第一張圖片，在輪播到第二張圖片時，才請求加載第二張圖片，以此類推。 按需加載頁卡的內(nèi)容，官網(wǎng)首頁右上角的新聞版塊，加載時只請求第一個頁卡的內(nèi)容， 當(dāng)用戶點(diǎn)擊其他頁卡時，再加載頁卡的內(nèi)容。

編輯推薦

《HTML 5+CSS 3網(wǎng)頁設(shè)計(jì)與網(wǎng)站布局:從新手到高手(雙色印刷)》圖文并茂、技術(shù)前衛(wèi)，適合網(wǎng)頁設(shè)計(jì)與制作初學(xué)者、網(wǎng)站開發(fā)人員，還可以作為高校相關(guān)專業(yè)的教材。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    HTML5+CSS3網(wǎng)頁設(shè)計(jì)與網(wǎng)站布局從新手到高手 PDF格式下載

---