本書秉持“學(xué)生易學(xué)”的理念，注重實踐能力訓(xùn)練，內(nèi)容編排遵循“零基礎(chǔ)入門—— 技能進階—— 實戰(zhàn)應(yīng)用”的遞進式教學(xué)路徑，以企業(yè)級項目實戰(zhàn)任務(wù)為載體，精選了“企業(yè)網(wǎng)站”“美麗鄉(xiāng)村網(wǎng)站”“數(shù)字智慧黨建網(wǎng)站”3個真實的案例。主教材把這3個案例分解成9個單元，內(nèi)容包括搭建開發(fā)環(huán)境、HTML基礎(chǔ)、HTML進階、CSS基礎(chǔ)、CSS盒子模型、CSS彈性布局、CSS動畫、JavaScript基礎(chǔ)和JavaScript進階，側(cè)重理論講解與示例演示。實訓(xùn)手冊共10個單元，在主教材對應(yīng)實訓(xùn)內(nèi)容的基礎(chǔ)上增加了制作數(shù)字智慧黨建網(wǎng)站的完整項目實戰(zhàn)，并采用AIGC輔助開發(fā)的模式，幫助讀者實現(xiàn)自然語言生成代碼、代碼續(xù)寫、代碼優(yōu)化、代碼解釋、注釋生成以及研發(fā)智能問答等 多項功能。主教材與實訓(xùn)手冊相輔相成，引導(dǎo)學(xué)生運用人工智能工具完成網(wǎng)頁開發(fā)全流程，形成了一套融“教、學(xué)、做、用”于一體的系統(tǒng)化教學(xué)方法。本書可以作為各類職業(yè)院校Web前端開發(fā)和網(wǎng)站開發(fā)相關(guān)課程的教材，也可以作為 Web前端開發(fā)愛好者的學(xué)習(xí)參考書。本書配有微課視頻、教學(xué)課件、課程標(biāo)準(zhǔn)、習(xí)題答案、程序源代碼、實訓(xùn)手冊、拓展任務(wù)案例和考試試卷，選用本書作為教材的教師可登錄機械工業(yè)出版社教育服務(wù)網(wǎng)（www.cmpedu.com）注冊后免費下載，或聯(lián)系編輯（010-88379194）咨詢。本書還整合了超星“示范教學(xué)包”，為師生提供一站式的“能學(xué)、輔教”的數(shù)字化課程資源服務(wù)，提升教學(xué)質(zhì)量與效率。
本書遵循職業(yè)教育教材編寫規(guī)律和職業(yè)院校學(xué)生學(xué)習(xí)規(guī)律，配套齊全
前 言本書由主教材和實訓(xùn)手冊兩部分組成，結(jié)合Web前端開發(fā)課程的發(fā)展背景，以實際項目為驅(qū)動，系統(tǒng)地介紹了Web前端開發(fā)的相關(guān)知識和技能。本書以社會主義核心價值觀為引領(lǐng)，傳承中華傳統(tǒng)文化，內(nèi)容體現(xiàn)時代性和創(chuàng)造性，注重立德樹人，采用“項目引導(dǎo)、單元驅(qū)動”式教學(xué)法，設(shè)計了9個單元，通過實際操作提升學(xué)生的實踐能力。一、編寫特色1．注重學(xué)生素養(yǎng)提升，落實立德樹人根本任務(wù)在編寫過程中，注重將立德樹人的教育理念融入教材內(nèi)容中，系統(tǒng)地設(shè)計了工匠精神、精益求精，家國情懷、為國育人，技術(shù)自信、勇于創(chuàng)新，嚴(yán)謹(jǐn)規(guī)范、攻堅克難，與時俱進、終身學(xué)習(xí)等學(xué)生素養(yǎng)元素主線，貫穿于整本教材，體現(xiàn)“價值塑造、知識傳授、能力培養(yǎng)”三位一體的人才培養(yǎng)目標(biāo)。2．融入AIGC輔助學(xué)習(xí)工具，提升學(xué)習(xí)效率和質(zhì)量本書巧妙地融入了AIGC（人工智能生成內(nèi)容）輔助學(xué)習(xí)工具，并在實訓(xùn)手冊中重點練習(xí)。利用這些工具，學(xué)生可以實現(xiàn)自然語言生成代碼、行級和函數(shù)級代碼續(xù)寫、代碼優(yōu)化、代碼注釋生成、測試數(shù)據(jù)生成、代碼解釋以及研發(fā)智能問答等多項功能，極大地提升了學(xué)習(xí)效率和質(zhì)量，滿足個性化學(xué)習(xí)需要，提升學(xué)生的人工智能素養(yǎng)。在實訓(xùn)手冊中，構(gòu)建“AI+場景化開發(fā)”訓(xùn)練體系，詳細(xì)設(shè)計了與AIGC輔助學(xué)習(xí)工具的結(jié)合使用方法。在局部網(wǎng)頁模塊制作階段，通過自然語言交互生成HTML、CSS布局代碼；在全站網(wǎng)頁開發(fā)階段，支持HTML、JavaScript和CSS智能代碼補全，以及實時代碼注釋和解釋；在調(diào)試階段，可根據(jù)輸入報錯信息獲得AI建議和指導(dǎo)。同時，設(shè)置大量的企業(yè)案例實戰(zhàn)練習(xí)，讓學(xué)生在使用AIGC工具解決具體問題的過程中，深化對知識的理解，在真實工程場景中掌握Web前端開發(fā)技術(shù)和經(jīng)驗。3．項目引導(dǎo)、單元驅(qū)動，力求“學(xué)生易學(xué)、樂學(xué)”本書內(nèi)容編排遵循“零基礎(chǔ)入門—— 技能進階—— 實戰(zhàn)應(yīng)用”的遞進式教學(xué)路徑，精選了3個真實的項目案例，并將其分解為9個單元，每個單元再細(xì)化為2～5個子任務(wù)，形成了一套融“教、學(xué)、做、用”于一體的教學(xué)系統(tǒng)。4．提供教學(xué)“一站式”解決方案，踐行“老師易教、樂教”本書提供了豐富的數(shù)字化、立體化教學(xué)資源，包括微課視頻、教學(xué)課件、課程標(biāo)準(zhǔn)、習(xí)題答案、程序源代碼、實訓(xùn)手冊、拓展任務(wù)案例和考試試卷，最大限度地滿足教學(xué)實施、課程考評等需求。此外，本書配套建立超星“示范教學(xué)包”，定位“能學(xué)、輔教”，共享優(yōu)質(zhì)教學(xué)資源。5．校企雙元開發(fā)，融合企業(yè)真實案例本書由職業(yè)院校與企業(yè)資深工程師共同完成，引入3個企業(yè)真實案例，以項目化理念重構(gòu)教學(xué)內(nèi)容。編寫成員包括具有多年教學(xué)經(jīng)驗的雙師型職業(yè)院校教師以及來自企業(yè)開發(fā)一線、具有豐富實踐經(jīng)驗的工程師；企業(yè)工程師參與教材項目的選取、項目的設(shè)計和資源制作等環(huán)節(jié)。二、主要內(nèi)容本書采用雙線并行設(shè)計：教學(xué)主線以“企業(yè)網(wǎng)站”和“美麗鄉(xiāng)村網(wǎng)站”貫穿始終，循序漸進地講解核心知識；研發(fā)線則以“數(shù)字智慧黨建網(wǎng)站”為綜合實踐項目，系統(tǒng)地培養(yǎng)學(xué)生運用HTML、CSS、JavaScript和JSON的工程能力。下表是學(xué)時分配建議，教學(xué)實施時可參考并靈活調(diào)整。單元 技能點 任務(wù)規(guī)劃 72學(xué)時 90學(xué)時單元1 搭建開發(fā)環(huán)境 Web前端開發(fā)概述，Web前端開發(fā)常用術(shù)語，HTML5的基本結(jié)構(gòu)，Web瀏覽器簡介，Web開發(fā)工具簡介，AI輔助編程工具簡介 HBuilder X的安裝和使用，Visual Studio Code的安裝和使用，瀏覽器的安裝和使用，Dreamweaver的安裝和使用，PHPStudy的安裝和使用 2 4單元2 HTML基礎(chǔ) HTML標(biāo)記和語義元素，HTML文本標(biāo)記，HTML超鏈接，HTML圖像，HTML表格 制作企業(yè)簡介網(wǎng)頁，制作企業(yè)統(tǒng)計表網(wǎng)頁，制作企業(yè)聯(lián)系方式網(wǎng)頁 6 8單元3 HTML進階 HTML列表，HTML5媒體元素，HTML5表單控件，HTML內(nèi)聯(lián)框架 制作企業(yè)視頻宣傳網(wǎng)頁，制作志愿活動征集表單網(wǎng)頁，制作音頻播放網(wǎng)頁和招聘報名網(wǎng)頁 6 8單元4 CSS基礎(chǔ) CSS和CSS3簡介，引入CSS，CSS基本語法，CSS文本屬性，CSS常用背景屬性，CSS的選擇器與權(quán)重，CSS表格與列表屬性 美化企業(yè)簡介網(wǎng)頁，制作工匠技能認(rèn)證網(wǎng)頁，美化用戶登錄網(wǎng)頁和招聘報名網(wǎng)頁 8 10單元5 CSS盒子模型 盒子模型的概念，盒子模型的構(gòu)成屬性，盒子模型的定位 制作美麗鄉(xiāng)村首頁，制作下拉菜單式網(wǎng)站導(dǎo)航，制作民宿詳情網(wǎng)頁 8 10單元6 CSS彈性布局 Flex布局簡介，F(xiàn)lex容器屬性，F(xiàn)lex項目屬性，媒體查詢與響應(yīng)式布局 制作美麗鄉(xiāng)村新聞網(wǎng)頁，制作瀑布流相冊，制作新聞詳情介紹網(wǎng)頁 8 10單元7 CSS動畫 CSS動畫簡介和坐標(biāo)系，transform變形屬性，transition過渡屬性，animation動畫屬性 制作美麗鄉(xiāng)村照片墻網(wǎng)頁，制作客棧網(wǎng)頁的遮罩效果，制作新聞網(wǎng)頁的動畫效果 8 8單元8 JavaScript基礎(chǔ) JavaScript簡介，語法基礎(chǔ)，數(shù)據(jù)類型，運算符，數(shù)據(jù)類型轉(zhuǎn)換，流程控制語句，函數(shù)，對象 制作網(wǎng)頁版計算器，制作網(wǎng)頁貸款計算器，制作表單注冊驗證網(wǎng)頁 8 12單元9 JavaScript進階 DOM簡介，DOM對象操作，BOM簡介和操作，JavaScript事件處理，JavaScript JSON，JavaScript Ajax 渲染美麗鄉(xiāng)村網(wǎng)站首頁；制作Tab選項卡效果，制作直播評論彈幕網(wǎng)頁 10 12單元10 制作數(shù)字智慧黨建網(wǎng)站 項目描述，網(wǎng)站規(guī)劃，制作管理后臺的注冊網(wǎng)頁和登錄網(wǎng)頁，制作管理后臺的用戶列表網(wǎng)頁，制作網(wǎng)站的圖片列表網(wǎng)頁，制作網(wǎng)站的新聞列表網(wǎng)頁，制作網(wǎng)站的首頁 8 8主教材側(cè)重理論講解與示例演示，對應(yīng)“技能點”模塊；實訓(xùn)手冊創(chuàng)新采用AIGC輔助開發(fā)模式，通過企業(yè)級項目實戰(zhàn)任務(wù)，引導(dǎo)學(xué)生運用智能工具完成網(wǎng)頁開發(fā)全流程，對應(yīng)“任務(wù)規(guī)劃”模塊，充分體現(xiàn)“項目驅(qū)動、任務(wù)引領(lǐng)”的職業(yè)教育特色。三、編寫隊伍及分工本書由藍(lán)永健和劉徑平擔(dān)任主編，古振忠、謝秀玲、蔡秀梅擔(dān)任副主編，何倍廷、韋權(quán)、黃潔燕、李天鳳、鄧愛玲、林麗婷、陳曉麗、陳利娟和范智峰參加編寫。其中，藍(lán)永健編寫了單元2、單元3和實訓(xùn)手冊的單元10，劉徑平編寫了單元8和單元9，古振忠編寫了單元5和單元6，謝秀玲編寫了單元1和單元7，蔡秀梅編寫了單元4。何倍廷、韋權(quán)、黃潔燕、李天鳳、鄧愛玲、林麗婷、陳曉麗和陳利娟分別完成了單元2～單元9練習(xí)題庫、拓展任務(wù)和實訓(xùn)任務(wù)書的編寫工作。范智峰提供了企業(yè)項目和案例并參與了單元項目的設(shè)計和資源制作。全書由藍(lán)永健統(tǒng)稿。由于編者水平有限，書中難免存在不妥和疏漏之處，歡迎廣大讀者提出寶貴意見。編 者
職業(yè)院校教師
目錄前言二維碼索引單元1 搭建開發(fā)環(huán)境 // 0011.1 Web前端開發(fā)概述 // 0021.2 Web前端開發(fā)常用術(shù)語 // 0021.3 HTML5的基本結(jié)構(gòu) // 0031.4 Web瀏覽器簡介 // 0051.5 Web開發(fā)工具簡介 // 0051.6 AI輔助編程工具簡介 // 007技能實訓(xùn) // 009小結(jié) // 009單元2 HTML基礎(chǔ) // 0102.1 HTML標(biāo)記和語義元素 // 0112.2 HTML文本標(biāo)記 // 0122.3 HTML超鏈接 // 0142.4 HTML圖像 // 0182.5 HTML表格 // 020技能實訓(xùn) // 026小結(jié) // 026單元3 HTML進階 // 0273.1 HTML列表 // 0283.2 HTML5媒體元素 // 0303.3 HTML5表單控件 // 0323.4 HTML內(nèi)聯(lián)框架 // 039技能實訓(xùn) // 041小結(jié) // 041單元4 CSS基礎(chǔ) // 0424.1 CSS和CSS3簡介 // 0434.2 引入CSS // 0434.3 CSS基本語法 // 0444.4 CSS文本屬性 // 0474.5 CSS常用背景屬性 // 0504.6 CSS的選擇器與權(quán)重 // 0544.7 CSS表格與列表屬性 // 059技能實訓(xùn) // 062小結(jié) // 062單元5 CSS盒子模型 // 0635.1 盒子模型的概念 // 0645.2 盒子模型的構(gòu)成屬性 // 0665.3 盒子模型的定位 // 072技能實訓(xùn) // 077小結(jié) // 078單元6 CSS彈性布局 // 0796.1 Flex布局簡介 // 0806.2 Flex容器屬性 // 0826.3 Flex項目屬性 // 0906.4 媒體查詢與響應(yīng)式布局 // 093技能實訓(xùn) // 095小結(jié) // 096單元7 CSS動畫 // 0977.1 CSS動畫簡介和坐標(biāo)系 // 0987.2 transform變形屬性 // 0997.3 transition過渡屬性 // 1047.4 animation動畫屬性 // 106技能實訓(xùn) // 111小結(jié) // 111單元8 JavaScript基礎(chǔ) // 1128.1 JavaScript簡介 // 1138.2 語法基礎(chǔ) // 1138.3 數(shù)據(jù)類型 // 1158.4 運算符 // 1188.5 數(shù)據(jù)類型轉(zhuǎn)換 // 1218.6 流程控制語句 // 1238.7 函數(shù) // 1288.8 對象 // 129技能實訓(xùn) // 131小結(jié) // 131單元9 JavaScript進階 // 1329.1 DOM簡介 // 1339.2 DOM對象操作 // 1339.3 BOM簡介和操作 // 1389.4 JavaScript事件處理 // 1439.5 JavaScript JSON // 1499.6 JavaScript Ajax // 150技能實訓(xùn) // 152小結(jié) // 152參考文獻 // 153
書單推薦
