本書共分為4個(gè)模塊, 模塊1主要介紹了HTML語言, 主要包括常用標(biāo)簽、表格、表單、HTML5新增的音視頻元素和語義元素等內(nèi)容。模塊2主要介紹了CSS基礎(chǔ)知識, 包括CSS選擇器、常用屬性、盒子模型、定位和布局等內(nèi)容。模塊3主要講解JavaScript語言, 通過大量案例, 介紹了JavaScript基本語法、數(shù)組、函數(shù)、內(nèi)置對象、DOM操作、定時(shí)器、繪圖等內(nèi)容的基本概念和實(shí)際應(yīng)用。模塊4通過一個(gè)綜合案例, 綜合運(yùn)用前3章所學(xué)知識, 模仿制作揚(yáng)工院主頁, 并實(shí)現(xiàn)一定的動態(tài)效果。
前言
編者結(jié)合多年Web前端教學(xué)經(jīng)驗(yàn)，將平時(shí)授課中所用的素材和案行精心整理，編寫了這本案例豐富、難度適中、適合零基礎(chǔ)讀者入門的《Web前端設(shè)計(jì)基礎(chǔ)教程》。
本書具有以下：
（1）編寫時(shí)嚴(yán)格篩選知識點(diǎn)，摒棄在實(shí)際開發(fā)中早已淘汰或使用很少的技術(shù)，不求面面俱到，每個(gè)模塊覆蓋常用、重要的技術(shù)和知識，對讀行。
（2)在兼顧傳統(tǒng)HTML、CSS、JavaScript基礎(chǔ)知識的前提下，盡量滲透從新標(biāo)準(zhǔn)中帶來的新理念和新技術(shù)。
（3)綜合實(shí)例選擇模仿制作學(xué)校網(wǎng)站主頁，對讀者熟悉的情行開發(fā)，能顯著提升讀者的成就感。
（4）發(fā)揮“互聯(lián)網(wǎng)+教材”的優(yōu)勢，讀者使用手機(jī)掃描書中二維碼即可獲得在線的數(shù)字資源。同時(shí)，本書提供配套教學(xué)課件、素材、源代碼、試卷等供任課教師使用。
本書由揚(yáng)州工業(yè)職業(yè)技術(shù)學(xué)院秦久明和張亮任主編，奚修學(xué)和戴菲任副主編，董學(xué)樞主審。薛娟、郭靜和唐蘇旭在過程中提出了寶貴意見，在此一并表示感謝。
盡管我們已經(jīng)盡了大努力，但書中難免存在不足之處，歡迎讀者提出寶貴意見，我們將不勝感激�？梢酝ㄟ^電子郵件與我們?nèi)〉寐?lián)系，請發(fā)送電子郵件至zhliang@ypi.edu.cn。
模塊1HTML基礎(chǔ)
1.1網(wǎng)站開發(fā)綜述
1.1.1網(wǎng)站的基本概念
1.1.2靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁
1.1.3Web前端與后端
1.1.4網(wǎng)站開發(fā)技術(shù)路線
1.1.5HTML簡介
1.2常用標(biāo)簽
1.2.1文檔標(biāo)題
1.2.2段落
1.2.3文本格式化・
1.2.4超鏈接
1.2.5圖像
1.2.6列表
1.3表格
1.3.1表格元素
1.3.2表格項(xiàng)目
1.4表單
1.4.1表單簡介
1.4.2表單元素
1.4.3表單項(xiàng)目
1.5音元素
1.5.1audio元素
1.5.2 video元素
1.6語義元素
1.6.1〈header>元素
1.6.2〈section〉元素
1. 6.3〈article〉元素
1.6.4
元素
1.6.5 〈aside〉元素…
1.6.6 〈footer〉元素
1.6.7 〈figure〉元素和〈figcaption〉元素
1.6.8布局項(xiàng)目…
1.7練訓(xùn)·
模塊2CSS基礎(chǔ)
2.1CSS概述
2.1.1CSS簡介
2.1.2CSS的基本使用
2.1.3CSS選擇器
2.1.4案例：東坡居
2.2CSS常用屬性·
2.2.1文本屬性
2.2.2字體屬性
2.2.3顏色和背景屬性
2.2.4超鏈接屬性…
2.2.5列表屬性
2.2.6表格屬性
2.2.7案例：圖文文檔樣式
2.3盒子模型
2.3.1盒子模型簡介
2.3.2盒子模型屬性
2.3.3案例：用戶注冊頁面
2.4定位與布局
2.4.1定位
2.4.2浮動
2.4.3頁面布局
2.5綜合項(xiàng)目
2.5.1項(xiàng)目介紹
2.5.2網(wǎng)頁結(jié)構(gòu)描述
2.5.3浮動問題
2.5.4頁面頭部設(shè)計(jì)
2.5.5頁面主體內(nèi)容設(shè)計(jì)
2.5.6頁面?zhèn)冗厵谠O(shè)計(jì)
2.5.7頁腳設(shè)計(jì)
2.5.8練訓(xùn)
模塊3JavaScript基礎(chǔ)
3.1 JavaScript入門——以九九乘法表為例
……
3.5.2繪圖技術(shù)
3.5.3 項(xiàng)目JavaScript部分
3.5.4補(bǔ)充案例：笑臉
3.5.5補(bǔ)充案例：《黑客帝國》屏保
3.5.6練訓(xùn)
3.6綜合項(xiàng)目：畫冊·
3.6.1 Font Awesome 圖標(biāo)
3.6.2項(xiàng)目文件結(jié)構(gòu)·
3.6.3項(xiàng)目HTML部分
3.6.4項(xiàng)目CSS部分
3.6.5項(xiàng)目相關(guān)技術(shù)
3.6.6 項(xiàng)目JavaScript部分·
3.6.7練訓(xùn)
模塊4綜合實(shí)例
4.1準(zhǔn)備工作
4.2靜態(tài)頁面實(shí)現(xiàn)
4.2.1頁面結(jié)構(gòu)分析和初始化代碼
4.2.2 header區(qū)域?qū)崿F(xiàn)
4.2.3logo區(qū)域?qū)崿F(xiàn)
4.2.4 menu 區(qū)域?qū)崿F(xiàn)
4.2.5 main 區(qū)域?qū)崿F(xiàn)
4.2.6 news 區(qū)域?qū)崿F(xiàn)
4.2.7department 區(qū)域?qū)崿F(xiàn)
4.2.8 slogan 區(qū)域?qū)崿F(xiàn)
4.2.9 footer 區(qū)域?qū)崿F(xiàn)
4.3使用JavaScript 添加動態(tài)效果
4.3.1下拉菜單實(shí)現(xiàn)
4.3.2飄浮廣告實(shí)現(xiàn)
4.3.3輪播圖片實(shí)現(xiàn)
4.4實(shí)例小結(jié)
參考文獻(xiàn)
書單推薦
