21世紀高等學校計算機類課程創(chuàng)新規(guī)劃教材·微課版
網頁設計與Web前端開發(fā)案例教程
HTML5、CSS3、JavaScript
主編: 莫小梅
副主編: 毛衛(wèi)英
參編: 隋慧蕓張浩斌應可珍
視頻錄制: 毛衛(wèi)英王華瓊
內 容 簡 介
本書分為理論篇和應用篇兩個部分。其中,理論篇在內容上詳細剖析了最新Web標準的三大部分HTML5、CSS3、JavaScript,及其在網頁設計與Web前端開發(fā)中的應用; 應用篇則從實用的角度補充了綜合實訓指導及課業(yè)拓展知識等。本書知識結構體系較新,較全面地覆蓋了目前企業(yè)前端工程師所需的相關理論和應用技能,同時案例形式豐富,既有針對單一知識點的小實例及貫穿特定案例網站的開發(fā)實錄,也有針對Web前端技術重點和難點的案例實踐,更有階段性的綜合案例實戰(zhàn)。在案例設計方面,既突出新知識點的應用技巧,又以不同的方式鞏固學過的技能,使讀者能夠一步一個腳印、循序漸進地扎實掌握網頁設計與Web前端開發(fā)的各項技能。
本書提供了配備的課程資源包,內容包括教學大綱、制作精良的教學課件(PPT)、電子教案、重點及難點綜合案例的教學視頻、
本書所有的實例和綜合案例的程序源碼、
課后題庫的參考答案等。其中,程序源碼全部經過精心測試,能夠在Windows 系統(tǒng)及以Chrome為代表的主流瀏覽器下編譯和運行。
本書可作為普通高校計算機及相關專業(yè)教材、高職高專教材,適用于課堂教學、實驗實訓及綜合課程設計等相關的教學活動,并可供從事網頁設計與制作、Web前端開發(fā)、網頁編程等行業(yè)人員參考。
本書封面貼有清華大學出版社防偽標簽,無標簽者不得銷售。
版權所有,侵權必究。侵權舉報電話: 0106278298913701121933
圖書在版編目(CIP)數(shù)據(jù)
網頁設計與Web前端開發(fā)案例教程: HTML5、CSS3、JavaScript/莫小梅主編.北京: 清華大學出版社,2019
(21世紀高等學校計算機類課程創(chuàng)新規(guī)劃教材·微課版)
ISBN 9787302534532
Ⅰ. ①網…Ⅱ. ①莫…Ⅲ. ①超文本標記語言-程序設計-高等學校-教材 ②網頁制作工具-高等學校-教材 ③JAVA語言-程序設計-高等學校-教材Ⅳ. ①TP312.8 ②TP393.092
中國版本圖書館CIP數(shù)據(jù)核字(2019)第162825號
策劃編輯: 魏江江
責任編輯: 王冰飛
封面設計: 劉鍵
責任校對: 梁毅
責任印制: 宋林
出版發(fā)行: 清華大學出版社
網址: http://www.tup.com.cn, http://www.wqbook.com
地址: 北京清華大學學研大廈A座
郵編: 100084
社總機: 01062770175郵購: 01062786544
投稿與讀者服務: 01062776969, cservice@tup.tsinghua.edu.cn
質量反饋: 01062772015, zhiliang@tup.tsinghua.edu.cn
課件下載: http://www.tup.com.cn,01062795954
印裝者: 清華大學印刷廠
經銷: 全國新華書店
開本: 185mm260mm印張: 30.5字數(shù): 743千字
版次: 2019年9月第1版印次: 2019年9月第1次印刷
印數(shù): 1~1500
定價: 79.80元
產品編號: 08163601
前言
本書是在編者的2012年版《網頁編程基礎XHTML、CSS、JavaScript》教材多年使用的基礎上,參考了現(xiàn)有大量同類書刊、資料,吸收眾家之長后結合多年網頁編程基礎教學的經驗以及學習網頁設計與Web前端開發(fā)的最新技術進展優(yōu)化、增改而成的。
隨著互聯(lián)網技術和企業(yè)需求的發(fā)展日新月異,Web標準的定位和發(fā)展方向也發(fā)生了根本的變化,XHTML規(guī)范不再更新,而HTML5則成為了當今Web時代的前沿技術。在本書成稿之際,時間已是2019年的5月,距離上一版教材的完稿時間已過去了7年多。在這過去的7年里,我們見證了以HTML5、CSS3、JavaScript為三大基石的H5技術的快速發(fā)展和強大功能,H5技術增強了包括傳統(tǒng)PC端Web頁面制作在內的,兼容手機、iPad等各種設備和平臺的響應式和自適應布局等Web前端技術,強化了包括新增的音頻、視頻標簽等多媒體播放技術,以及Canvas圖形繪制和動畫制作等表現(xiàn)能力,追加了localStorage等本地存儲數(shù)據(jù)功能,同時JavaScript的語法也從ES5升級到ES6這一更簡潔、實用的語法。H5的應用不僅覆蓋到網頁的前端制作,還包括游戲開發(fā)、輕應用、Web APP、微站、小程序等方方面面,游戲化、場景化、跨屏互動等全新特性使得H5未來會在更多的領域展示其獨特的魅力和應用前景。因此,本書的改版是順應時代的潮流,為讀者梳理和分享與HTML5、CSS3、JavaScript等H5前端開發(fā)相關的前沿技術和案例應用,為迎接時代的變革和分享技術的紅利打好扎實的基礎。
主要內容
本書主要圍繞Web最新標準的三大關鍵技術( HTML5、CSS3和JavaScript)來介紹網頁設計與Web前端開發(fā)的必備知識及相關應用。其中,HTML5負責網頁結構; CSS3負責網頁樣式及表現(xiàn); JavaScript負責網頁行為和功能。
全書共9章,分為理論篇和應用篇兩大部分。其中,第1~7章為理論篇,從技術的角度重點介紹Web前端開發(fā)的基礎概念及相關技術; 第8~9章為應用篇,從實用的角度補充介紹了綜合實踐指導及課業(yè)拓展知識。
在第一部分理論篇的編寫上,編者全面、系統(tǒng)地介紹了當前最新的Web前端知識體系,以一個綜合案例網站的實際開發(fā)為主線,采用知識點結合典型實例、重難點結合案例實踐、階段性復習結合綜合案例實戰(zhàn)的多層次、全方位的配套實踐案例體系,使讀者既能夠真正從網站建設的全局上把握Web標準各個部分的語法、聯(lián)系和應用,又能結合不同階段、不同層次的案例實踐學以致用,扎實掌握相關的理論和實踐應用技能。
第1、2章為基礎知識和HTML入門,為后續(xù)知識的學習打下初步的基礎。其中,第1章介紹了網頁設計與Web前端基礎中相關的概念、網站開發(fā)的工作流程和開發(fā)工具,在網站開發(fā)的工作流程部分列舉了網站架構與內容、素材收集實用技能、案例網站的首頁設計草圖和實體模型等實用的案例和技能,使得讀者對網站開發(fā)的流程有一個初步、清晰、具體的印象; 第2章介紹了HTML的語言基礎、常用標簽和相關的典型實例。
第3、4章主要涉及PC端的主流前端布局技術。其中,第3章詳細介紹了CSS3樣式表的基本概念、使用方法和常用的CSS3屬性,以及相關的實例; 第4章重點介紹了HTML CSS的相關布局技術及各種應用。這一部分是全書的重點和Web前端技術的基礎。
第5章重點介紹了HTML5 CSS3的移動網站布局技術,這一章體現(xiàn)了較多的HTML5和CSS3的新技術和新應用,同時也有一些難點。
第6章詳細介紹了JavaScript包括ES5和ES6的兩種主流語法和基于對象的編程技術,重點介紹了JavaScript在操作HTML頁面、響應用戶操作及驗證數(shù)據(jù)等方面的應用。
第7章重點介紹了HTML5新增的Canvas元素及其在繪制Web頁面中的圖形、圖像和動畫方面的應用。由于Canvas元素需要通過JavaScript語句實現(xiàn)具體的繪制功能,所以安排在理論篇的最后。
第3~7章共同的特點是除了通過列舉大量的典型實例來介紹基本的概念和語法以外,還結合了案例網站的首頁及相關頁面的實例,配以大量的案例實踐,以及每章一個綜合案例實戰(zhàn)加以鞏固。
理論部分的各章把Web標準三大部分的分工及合作一步一步地展現(xiàn)在讀者面前,使讀者在學習了這一部分內容以后,能夠對Web標準及其內涵有更具體和深入的了解,并能在實際的網站開發(fā)中加以運用。
在第二部分應用篇的編寫思路上,主要是考慮到從綜合實踐的角度為讀者提供實用性的指導。其中,第8章結合兩個商業(yè)網站案例項目書的目錄結構及課程網站的開發(fā)全程,全面介紹了網站設計綜合實訓的完整流程,并提供了相關課程設計的要求及指導; 第9章則從讀者后續(xù)的自我提高角度出發(fā),指出一些課業(yè)拓展的方向和參考,并為使用本書進行授課的教師提供一些建立學生實踐環(huán)境的建議。
以上的編寫方法不僅符合理論和實踐相結合的學習規(guī)律,而且還為讀者后續(xù)學習動態(tài)數(shù)據(jù)庫網站的制作打下了堅實的基礎。
本書特點
(1) 時新性、系統(tǒng)性和實用性相結合: 本書結合當前新興的企業(yè)前端工程師的必備知識體系和技能要求,以企業(yè)前端開發(fā)工程師的能力需求為導向,系統(tǒng)、全面地覆蓋時下網頁設計與Web前端開發(fā)的知識體系和實踐技巧。本書在原有的基礎知識體系的基礎上引入了HTML5、CSS3,以及JavaScript中ES6的新特性和應用案例,囊括了傳統(tǒng)HTML CSS布局、新興的HTML5 CSS3移動端布局、JavaScript基于對象的編程和交互應用,以及HTML5的Canvas圖形圖像和動畫繪制技能。
(2) 以項目帶動全局: 本書延續(xù)了上一版本教材中以項目帶動全局的綜合性案例教學特點,即從第1章開始就以一個案例網站首頁的設計草圖和實體模型為例,引導初學者在學習具體的技術之前先對網站開發(fā)的工作流程有一個簡單而又明確的了解,并在后面的Web標準三大技術學習的過程中貫穿整個案例網站的建設和完善過程,以幫助讀者理順這三大技術的分工與合作,同時在課后的實踐練習中也始終貫穿這種以項目帶動全局的思路。
(3) 基礎實例與綜合案例相結合,典型案例實踐與綜合案例實戰(zhàn)相結合: 本書在保留已有教材中基礎實例與項目案例相結合的基礎上,進一步對主要章節(jié)的重點和難點配備了典型的案例實踐,以幫助讀者加強理解和運用能力。此外,在第4~7章中通過規(guī)模性和復雜度更強的綜合案例實戰(zhàn)提供階段性的綜合實訓案例和方法,使讀者能夠循序漸進地在不同的層面上扎實掌握相關理論和綜合實踐技能。
(4) 與時俱進的實用知識和配套資源: 本書在第二部分應用篇的第8章綜合實訓部分全面介紹了當前主流的網頁布局方案,綜合實訓中的案例首頁布局也升級為綜合運用理論篇所介紹的HTML5結構標簽、彈性布局、怪異盒模型等最新的實用布局技術; 第9章課業(yè)拓展部分也刪除了部分過時的內容,并引入了大量實用、前沿的拓展知識和技能。
教學資源
為了幫助讀者和任課教師更好地使用本書,編者特意準備了一些輔助教學材料,具體如下:
(1) 教學大綱。
(2) 教學課件(PPT)。
(3) 電子教案。
(4) 習題解答手冊。
注: 掃描封底的書圈二維碼,可以下載以上配套資源。
(5) 各章實例(含基礎實例、案例網站、案例實踐和實戰(zhàn))程序源碼。掃描目錄上方的二維碼,可以下載程序源碼。
(6) 主要綜合案例的配套教學視頻,共計1000分鐘。掃描書中的二維碼,可以在線觀看、學習。本書的附錄部分列出了書中視頻對應的二維碼的匯總表,方便讀者查閱。
(7) 應用篇中提到的本課程學習網站,課程網址為http://real.zjicm.edu.cn/mxm。
本書編者
本書的編者都是工作在教學和科研第一線的骨干教師,具有豐富的教學實踐經驗。全書由莫小梅負責規(guī)劃。
本書編寫的具體分工如下: 第1章的個別節(jié)、第2~3章、第5~6章以及第8章的大部分(除8.8節(jié)外)由莫小梅編寫,第1章的大部分、第4章由毛衛(wèi)英和應可珍共同編寫,第7章由隋慧蕓編寫,第8.8節(jié)以及第9章由張浩斌編寫。
配套案例教學視頻錄制的分工如下: 毛衛(wèi)英負責第4章案例的視頻錄制,王華瓊負責第3、5、6章案例的視頻錄制。
本書初稿由各位編者共同進行編排和審定,由莫小梅進行統(tǒng)稿。
由于編者水平有限,書中難免出現(xiàn)不足之處,請廣大讀者批評指正。
編者
2019年5月
第一部分理論篇
第1章網頁設計與Web前端基礎
1.1Web概述
1.1.1Web的歷史
1.1.2Web體系結構
1.1.3基本Web技術
1.1.4相關概念
1.2網頁標準簡介
1.2.1結構標準語言
1.2.2表現(xiàn)標準語言
1.2.3行為標準語言
1.3網站開發(fā)工作流程
1.3.1擬定網站主題
1.3.2規(guī)劃網站架構與內容
1.3.3收集相關資料
1.3.4頁面設計和布局規(guī)劃
1.3.5網頁制作、測試與上傳
1.3.6網站的推廣與更新維護
1.4Web開發(fā)工具
1.4.1Adobe Dreamweaver
1.4.2Sublime Text
1.4.3Notepad
1.4.4EditPlus
1.4.5WebStorm
1.4.6Visual Studio Code
1.5習題
第2章HTML常用標簽
2.1HTML5網頁結構
2.1.1HTML的發(fā)展歷程
2.1.2初識HTML標簽
2.1.3HTML5文檔的基本結構
2.1.4HTML文檔主體標簽
2.2網頁文本
2.2.1注釋標簽
2.2.2段落和換行標簽
2.2.3標題標簽
2.2.4特定文字樣式標簽
2.2.5網頁特殊字符
2.3圖片標簽及屬性
2.3.1常見圖片格式
2.3.2網頁圖片的四要素
2.4超鏈接標簽
2.4.1超鏈接的基本格式
2.4.2URL鏈接
2.4.3本地鏈接
2.4.4書簽鏈接
2.4.5下載文件鏈接
2.4.6郵件鏈接
2.5插入多媒體
2.5.1在外部窗口中播放多媒體
2.5.2在當前文檔中播放音頻
2.5.3在當前文檔中播放視頻
2.6習題
第3章使用CSS3樣式表
3.1初識CSS樣式表
3.1.1第一個CSS案例
3.1.2CSS基本語法
3.1.3CSS的創(chuàng)建
3.1.4組合選擇器
3.1.5后代選擇器
3.1.6類選擇器的創(chuàng)建和引用
3.1.7id選擇器的創(chuàng)建和引用
3.2盒模型
3.2.1盒模型的概念
3.2.2樣式初始化
3.2.3邊框屬性
3.2.4內邊距屬性
3.2.5外邊距屬性
3.2.6外邊距合并
3.2.7盒模型案例實踐
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.5CSS的常用屬性
3.5.1背景屬性
3.5.2字體屬性
3.5.3文本屬性
3.5.4鼠標屬性
3.5.5CSS常用屬性案例實踐
3.6高級選擇器
3.6.1子元素選擇器
3.6.2相鄰元素選擇器
3.6.3關聯(lián)元素選擇器
3.6.4屬性選擇器
3.6.5偽類選擇器
3.6.6偽元素選擇器
3.6.7高級選擇器案例實踐
3.7CSS繼承與優(yōu)先
3.7.1CSS樣式繼承
3.7.2選擇器的優(yōu)先級
3.7.3樣式優(yōu)先級
3.7.4CSS書寫順序
3.8常用CSS3屬性
3.8.1圓角屬性
3.8.2方框陰影屬性
3.8.3文本陰影屬性
3.8.4溢出屬性
3.8.5可見性屬性
3.8.6常用CSS3屬性案例實踐
3.9習題
第4章使用HTML CSS布局網頁
4.1CSS布局概述
4.1.1CSS布局相關概念
4.1.2CSS的3種定位機制
4.2元素的浮動
4.2.1浮動
4.2.2浮動的常規(guī)用法
4.2.3浮動的特殊情況
4.2.4與inlineblock的比較
4.2.5清除屬性
4.2.6元素浮動案例實踐
4.3元素的定位
4.3.1定位屬性
4.3.2相對定位
4.3.3絕對定位
4.3.4固定定位
4.3.5zindex
4.3.6定位元素的居中
4.3.7元素定位案例實踐
4.4圖片及布局
4.4.1圖片布局的幾個概念
4.4.2水平對齊
4.4.3垂直對齊
4.4.4圖片布局案例實踐
4.5表單及布局
4.5.1表單的基本結構
4.5.2表單元素
4.5.3表單相關偽類
4.5.4表單布局案例實踐
4.6表格及布局
4.6.1表格標簽
4.6.2合并單元格
4.6.3表格的樣式
4.6.4表格的特征
4.6.5表格布局及案例實踐
4.7內聯(lián)框架
4.7.1內聯(lián)框架的基本用法
4.7.2內聯(lián)框架布局案例實踐
4.8CSS進階應用
4.8.1網頁logo應用
4.8.2阿里圖標應用
4.8.3CSS代碼復用
4.8.4CSS進階應用案例實踐
4.9PC端網頁布局綜合案例實戰(zhàn)
4.10習題
第5章HTML5 CSS3移動網站布局
5.1HTML5新增標簽
5.1.1HTML5概述
5.1.2HTML5結構性標簽
5.1.3HTML5語義化標簽
5.1.4HTML5網頁案例實踐
5.2CSS3新增偽類和偽元素
5.2.1以fisrt、last、only為前綴的偽類
5.2.2以nth為前綴的偽類
5.2.3其他偽類和偽元素
5.2.4CSS3新增偽類案例實踐
5.3CSS3變形、過渡及動畫
5.3.1變形
5.3.2過渡
5.3.3動畫
5.3.4變形、過渡及動畫案例實踐
5.4CSS3新增屬性
5.4.1新增背景屬性
5.4.2新增顏色屬性
5.4.3倒影
5.4.4遮罩
5.4.5CSS3新增屬性案例實踐
5.5CSS3彈性盒模型
5.5.1基本彈性盒模型設置
5.5.2彈性容器相關屬性
5.5.3彈性項目相關屬性
5.5.4怪異盒模型
5.5.5動態(tài)計算calc()
5.5.6彈性盒模型案例實踐
5.6響應式布局和自適應布局
5.6.1媒體查詢
5.6.2視口
5.6.3自適應布局
5.7移動端網頁布局案例實戰(zhàn)
5.8習題
第6章使用JavaScript腳本
6.1初識JavaScript
6.1.1JavaScript簡介
6.1.2JavaScript的使用
6.1.3JavaScript代碼規(guī)范
6.1.4彈窗與調試
6.1.5獲取元素及操作內容
6.1.6簡單認識DOM0級事件
6.1.7定義變量
6.1.8JS基本應用案例實踐
6.2JavaScript的基本元素
6.2.1數(shù)據(jù)類型
6.2.2常量
6.2.3運算符和表達式
6.2.4數(shù)據(jù)類型轉換
6.3操作瀏覽器對象屬性及CSS樣式
6.3.1操作對象屬性
6.3.2操作對象屬性案例實踐
6.3.3操作CSS樣式
6.3.4操作CSS樣式案例實踐
6.4JavaScript的條件語句
6.4.1if語句
6.4.2switch語句
6.4.3條件語句案例實踐
6.5JavaScript的循環(huán)語句
6.5.1for循環(huán)語句
6.5.2while循環(huán)語句
6.5.3do…while循環(huán)語句
6.5.4break和continue語句
6.5.5循環(huán)語句案例實踐
6.6使用JavaScript函數(shù)
6.6.1函數(shù)分類
6.6.2函數(shù)參數(shù)
6.6.3返回語句
6.6.4變量的作用域
6.6.5JS函數(shù)案例實踐
6.7JavaScript對象的操作語句
6.7.1with語句
6.7.2for…in語句
6.7.3對象關鍵字及操作符
6.8JavaScript常用內置對象
6.8.1數(shù)組對象
6.8.2字符串對象
6.8.3數(shù)學對象
6.8.4日期對象
6.9DOM對象及操作
6.9.1HTML DOM簡介
6.9.2HTML中的節(jié)點類型
6.9.3DOM節(jié)點的訪問
6.9.4DOM節(jié)點的操作
6.9.5DOM對象案例實踐
6.10BOM對象及操作
6.10.1BOM簡介
6.10.2窗口對象
6.10.3文檔對象
6.10.4位置對象
6.10.5歷史對象
6.10.6瀏覽器信息對象
6.11localStorage對象及操作
6.11.1HTML5 Web存儲簡介
6.11.2localStorage對象的基本用法
6.11.3本地存儲案例實踐
6.12Web交互開發(fā)案例實戰(zhàn)
6.13習題
第7章圖形繪制
7.1初識Canvas
7.2Canvas的坐標系統(tǒng)
7.3添加Canvas元素
7.4Canvas繪制環(huán)境
7.5繪圖API
7.5.1繪制路徑
7.5.2漸變色的使用
7.5.3圖形變換
7.5.4繪制環(huán)境的保存與恢復
7.5.5繪制圖像
7.5.6繪制文本
7.6動畫制作
7.7時鐘案例實戰(zhàn)
7.8習題
第二部分應用篇
第8章網站設計綜合實訓
8.1網站的規(guī)劃
8.1.1網站設計項目書的書寫
8.1.2網站的主要規(guī)劃過程及創(chuàng)建
8.2網站的素材準備及管理
8.3網頁外觀設計及布局
8.3.1網頁外觀布局方法
8.3.2網頁布局的方案
8.4向頁面添加內容
8.5使用CSS設置頁面
8.6添加網頁特效及功能
8.6.1添加網頁特效
8.6.2添加網頁功能
8.7站點的本地測試
8.7.1運行站點報告
8.7.2檢查站點范圍的鏈接
8.8發(fā)布及維護Web站點
8.8.1上傳文件
8.8.2獲取網站地址
8.8.3實機測試
8.8.4日常維護
8.9課程設計及要求
8.9.1課程設計的基本目的
8.9.2課程設計的基本要求
8.9.3課程設計的考核方式與評分方法
第9章課業(yè)拓展
9.1瀏覽器開發(fā)者工具
9.1.1瀏覽器開發(fā)者工具簡介
9.1.2激活工具欄
9.1.3選擇元素與Element標簽
9.1.4Console標簽欄
9.1.5Network標簽欄
9.1.6Source標簽欄
9.2jQuery庫
9.2.1jQuery簡介
9.2.2jQuery基礎用法
9.2.3文檔參考
9.3Bootstrap框架
9.3.1Bootstrap簡介
9.3.2Bootstrap快速上手
9.4架設互聯(lián)網網站
9.4.1域名服務
9.4.2主機托管
9.4.3虛擬主機
9.5云服務
9.5.1阿里云虛擬主機
9.5.2阿里云ECS
附錄書中視頻對應二維碼匯總表
參考文獻
專題學習資源網址