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