本書共分為4個模塊, 模塊1主要介紹了HTML語言, 主要包括常用標簽、表格、表單、HTML5新增的音視頻元素和語義元素等內(nèi)容。模塊2主要介紹了CSS基礎(chǔ)知識, 包括CSS選擇器、常用屬性、盒子模型、定位和布局等內(nèi)容。模塊3主要講解JavaScript語言, 通過大量案例, 介紹了JavaScript基本語法、數(shù)組、函數(shù)、內(nèi)置對象、DOM操作、定時器、繪圖等內(nèi)容的基本概念和實際應(yīng)用。模塊4通過一個綜合案例, 綜合運用前3章所學(xué)知識, 模仿制作揚工院主頁, 并實現(xiàn)一定的動態(tài)效果。
前言
編者結(jié)合多年Web前端教學(xué)經(jīng)驗,將平時授課中所用的素材和案行精心整理,編寫了這本案例豐富、難度適中、適合零基礎(chǔ)讀者入門的《Web前端設(shè)計基礎(chǔ)教程》。
本書具有以下:
(1)編寫時嚴格篩選知識點,摒棄在實際開發(fā)中早已淘汰或使用很少的技術(shù),不求面面俱到,每個模塊覆蓋常用、重要的技術(shù)和知識,對讀行。
(2)在兼顧傳統(tǒng)HTML、CSS、JavaScript基礎(chǔ)知識的前提下,盡量滲透從新標準中帶來的新理念和新技術(shù)。
(3)綜合實例選擇模仿制作學(xué)校網(wǎng)站主頁,對讀者熟悉的情行開發(fā),能顯著提升讀者的成就感。
(4)發(fā)揮“互聯(lián)網(wǎng)+教材”的優(yōu)勢,讀者使用手機掃描書中二維碼即可獲得在線的數(shù)字資源。同時,本書提供配套教學(xué)課件、素材、源代碼、試卷等供任課教師使用。
本書由揚州工業(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常用標簽
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練訓(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綜合項目
2.5.1項目介紹
2.5.2網(wǎng)頁結(jié)構(gòu)描述
2.5.3浮動問題
2.5.4頁面頭部設(shè)計
2.5.5頁面主體內(nèi)容設(shè)計
2.5.6頁面?zhèn)冗厵谠O(shè)計
2.5.7頁腳設(shè)計
2.5.8練訓(xùn)
模塊3JavaScript基礎(chǔ)
3.1 JavaScript入門——以九九乘法表為例
……
3.5.2繪圖技術(shù)
3.5.3 項目JavaScript部分
3.5.4補充案例:笑臉
3.5.5補充案例:《黑客帝國》屏保
3.5.6練訓(xùn)
3.6綜合項目:畫冊·
3.6.1 Font Awesome 圖標
3.6.2項目文件結(jié)構(gòu)·
3.6.3項目HTML部分
3.6.4項目CSS部分
3.6.5項目相關(guān)技術(shù)
3.6.6 項目JavaScript部分·
3.6.7練訓(xùn)
模塊4綜合實例
4.1準備工作
4.2靜態(tài)頁面實現(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下拉菜單實現(xiàn)
4.3.2飄浮廣告實現(xiàn)
4.3.3輪播圖片實現(xiàn)
4.4實例小結(jié)
參考文獻