本書是一本專注于HTML5、CSS3、jQuery開發(fā)和Bootstrap相關(guān)內(nèi)容開發(fā)的活頁式教材, 內(nèi)容涉及Web前端開發(fā)與設(shè)計(jì)、主流頁面布局方法、導(dǎo)航菜單制作、圖文排版、頁面交互等方面的基礎(chǔ)知識(shí), 突出內(nèi)容的實(shí)用性和實(shí)踐性,堅(jiān)持以職業(yè)能力為本位,以滿足職業(yè)崗位的需要,與相應(yīng)的“1+X”證書標(biāo)準(zhǔn)接軌。本書有效融入課程思政, 并突出其職業(yè)引導(dǎo)功能。讀者通過教材了解職業(yè)、熱愛職業(yè)崗位,樹立正確的價(jià)值觀、擇業(yè)觀, 形成良好的職業(yè)道德和職業(yè)意識(shí)。
本書的編寫從滿足Web前端開發(fā)工程師崗位的技術(shù)和能力需求出發(fā)，系統(tǒng)深入地介紹了Web前端開發(fā)的基礎(chǔ)知識(shí)與前沿技術(shù)，還融入了《Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》中的職業(yè)素養(yǎng)和崗位技術(shù)技能，以專業(yè)技能為模塊、以項(xiàng)目任務(wù)為驅(qū)動(dòng)、以課程思政為綱要進(jìn)行組織編寫。為落實(shí)“黨的二十大精神”課程思政元素的實(shí)施方案，以堅(jiān)持立德樹人為根本任務(wù)，從愛國情懷、民族自信、社會(huì)責(zé)任、法制意識(shí)、工業(yè)文化、職業(yè)態(tài)度、職業(yè)素養(yǎng)等方面著眼，以學(xué)生綜合職業(yè)能力培養(yǎng)為中心推進(jìn)編寫工作。幫助學(xué)習(xí)者有效提升Web前端開發(fā)能力，確保學(xué)習(xí)者擁有最關(guān)鍵的Web前端開發(fā)工程師崗位技能；提升個(gè)人生活質(zhì)量與升學(xué)、就業(yè)、職場(chǎng)競(jìng)爭(zhēng)力。
本書組織方式
本書共六個(gè)模塊，主要介紹HTML+CSS+jQuery+Bootstrap前端技術(shù)基礎(chǔ)知識(shí)，具體包括初識(shí)HTML、構(gòu)建HTML網(wǎng)頁文件、CSS新樣式修飾網(wǎng)頁、盒子模型、元素的浮動(dòng)與定位、網(wǎng)頁布局技術(shù)、網(wǎng)頁表單的應(yīng)用、跨平臺(tái)響應(yīng)式技術(shù)等。其中模塊六為綜合實(shí)戰(zhàn)篇，其目的是實(shí)現(xiàn)特產(chǎn)網(wǎng)系統(tǒng)的開發(fā)。
本書特色內(nèi)容
書中運(yùn)用二維碼呈現(xiàn)微課視頻，掃碼即可查看與圖書內(nèi)容深度融合的精彩紛呈的微課視頻。
章節(jié)具體結(jié)構(gòu)如下：
核心概念：章節(jié)職業(yè)能力中重要概念、關(guān)鍵詞的解釋或定義。
學(xué)習(xí)目標(biāo)：重點(diǎn)要掌握的基礎(chǔ)知識(shí)和操作技巧，進(jìn)行點(diǎn)睛指引。
基本知識(shí)：章節(jié)職業(yè)能力中涉及的知識(shí)點(diǎn)與技能點(diǎn)。
活動(dòng)組織：引入案例，并結(jié)合案例提出一些問題，引發(fā)學(xué)生思考，激發(fā)學(xué)生學(xué)習(xí)興趣。在項(xiàng)目活動(dòng)組織中提高學(xué)生的動(dòng)手能力和創(chuàng)新能力，培養(yǎng)學(xué)生的邏輯分析能力與解決實(shí)際問題的能力，逐步將學(xué)生培養(yǎng)成兼具基礎(chǔ)素養(yǎng)、邏輯思維、設(shè)計(jì)能力以及應(yīng)用創(chuàng)新能力的綜合性人才，初步具備Web應(yīng)用開發(fā)程序員的素質(zhì)。
模塊一 Web前端開發(fā)的準(zhǔn)備
任務(wù)1．1 Web相關(guān)概念
職業(yè)能力1．1．1 掌握Web前端開發(fā)基本概念
職業(yè)能力1．1．2 了解常用Web前端開發(fā)工具
模塊二 使用HTML5建立網(wǎng)頁結(jié)構(gòu)
任務(wù)2．1 初識(shí)HTML
職業(yè)能力2．1．1 HTML基本語法
職業(yè)能力2．1．2 HTML的主體元素
任務(wù)2．2 HTML常用標(biāo)簽
職業(yè)能力2．2．1 文本、圖像
職業(yè)能力2．2．2 超鏈接、音頻、視頻
職業(yè)能力2．2．3 列表、表格
職業(yè)能力2．2．4 表單
模塊三 使用CSS3樣式修飾網(wǎng)頁
任務(wù)3．1 初識(shí)CSS
職業(yè)能力3．1．1 CSS樣式基本語法結(jié)構(gòu)
職業(yè)能力3．1．2 CSS的選擇器
任務(wù)3．2 CSS常用樣式
職業(yè)能力3．2．1 CSS樣式的單位和顏色
職業(yè)能力3．2．2 文本與字體樣式
職業(yè)能力3．2．3 背景樣式
職業(yè)能力3．2．4 列表樣式
職業(yè)能力3．2．5 表格樣式
任務(wù)3．3 定位與布局
職業(yè)能力3．3．1 盒子模型
職業(yè)能力3．3．2 定位方式
職業(yè)能力3．3．3 彈性盒子布局
職業(yè)能力3．3．4 響應(yīng)式布局
任務(wù)3．4 CSS3
職業(yè)能力3．4．1 邊框和陰影
職業(yè)能力3．4．2 2D和3D變換
職業(yè)能力3．4．3 過渡和動(dòng)畫
模塊四 輕量級(jí)框架應(yīng)用
任務(wù)4．1 jQuer基礎(chǔ)
職業(yè)能力4．1．1 在網(wǎng)頁中使用JavaScript的語句
職業(yè)能力4．1．2 使用BOM對(duì)象與瀏覽器窗口交互
職業(yè)能力4．1．3 使用DOM對(duì)象改變文檔對(duì)象
職業(yè)能力4．1．4 在網(wǎng)頁中使用jQuery框架
職業(yè)能力4．1．5 使用jQuer在網(wǎng)頁中添加事件
任務(wù)4．2 jQuery效果
職業(yè)能力4．2．1 使用jQuer操作網(wǎng)頁樣式
職業(yè)能力4．2．2 使用jQuer添加動(dòng)畫
任務(wù)4．3 jQueryAJAX
職業(yè)能力4．3．1 在網(wǎng)頁中使用AJAX
模塊五 響應(yīng)式開發(fā)技術(shù)
任務(wù)5．1 Bootstrap基本架構(gòu)
職業(yè)能力5．1．1 在頁面中引入Bootstrap
職業(yè)能力5．1．2 使用Bootstrap的柵格系統(tǒng)搭建網(wǎng)頁結(jié)構(gòu)
任務(wù)5．2 Bootstrap樣式
職業(yè)能力5．2．1 使用Bootstrap的文本與顏色樣式
職業(yè)能力5．2．2 使用Bootstrap的圖文樣式
職業(yè)能力5．2．3 使用Bootstrap的表格樣式與列表樣式
職業(yè)能力5．2．4 使用Bootstrap制作表單
任務(wù)5．3 Bootstrap組件
職業(yè)能力5．3．1 使用Bootstrap的按鈕和按鈕組快捷開發(fā)
職業(yè)能力5．3．2 使用Bootstrap的導(dǎo)航樣式
職業(yè)能力5．3．3 使用Bootstrap徽章、警告窗和卡片樣式
職業(yè)能力5．3．4 使用Bootstrap制作輪播圖
模塊六 綜合項(xiàng)目實(shí)戰(zhàn)
任務(wù)6．1 特產(chǎn)網(wǎng)網(wǎng)站項(xiàng)目分析
職業(yè)能力6．1．1 進(jìn)行網(wǎng)站整體規(guī)劃
任務(wù)6．2 網(wǎng)頁實(shí)現(xiàn)
職業(yè)能力6．2．1 實(shí)現(xiàn)導(dǎo)航欄和輪播圖模塊
職業(yè)能力6．2．2 實(shí)現(xiàn)特產(chǎn)展示模塊
職業(yè)能力6．2．3 實(shí)現(xiàn)特產(chǎn)網(wǎng)新聞模塊
職業(yè)能力6．2．4 實(shí)現(xiàn)頁腳和版權(quán)信息模塊
書單推薦
