本書以一個弘揚中國優(yōu)秀傳統(tǒng)文化主題網(wǎng)站首頁的制作為主線，將網(wǎng)站首頁制作分解成若干個小案例，分布到各個項目單元中，按照從整體到部分、從簡單到復(fù)雜，循序漸進地進行知識、技能展示。全書按照Web前端開發(fā)的流程，從網(wǎng)頁內(nèi)容結(jié)構(gòu)HTML、網(wǎng)頁樣式CSS以及網(wǎng)頁行為jQuery三大知識內(nèi)容進行編寫。以2020年5月*《高等學(xué)校課程思政建設(shè)指導(dǎo)綱要》提出的課程思政建設(shè)五大內(nèi)容入手，將以習(xí)近平談網(wǎng)絡(luò)安全和信息化相關(guān)論述、中國IT界風(fēng)云人物、古詩詞、中華美食、中華名勝古跡、網(wǎng)絡(luò)安全法等作為教材相關(guān)知識點教學(xué)案例的文字素材，項目案例以慢談歷史、話說家鄉(xiāng)、趣談美食、中國節(jié)日、網(wǎng)絡(luò)安全法律法規(guī)等為主題進行設(shè)計。*后用一個綜合案例對全書知識進行貫穿總結(jié)，使讀者全面掌握Web前端設(shè)計與制作知識與技能；本書將價值塑造、知識傳授和能力培養(yǎng)三者融為一體，實現(xiàn)專業(yè)教育與思政教育同向同行，形成協(xié)同效應(yīng)。全書內(nèi)容結(jié)構(gòu)合理，實例簡單易懂，既適合高職院校Web前端開發(fā)課程教學(xué)使用，也適合從事網(wǎng)頁設(shè)計相關(guān)工作的初學(xué)者閱讀或作為社會培訓(xùn)教材使用。
1.采用項目-任務(wù)-能力式組織體例、發(fā)揮教材育人功能本教材按照網(wǎng)頁設(shè)計三大構(gòu)成技術(shù)（HTMl CSS jQuery），以案例為主線，根據(jù)學(xué)生特點和認(rèn)知規(guī)律，把教學(xué)內(nèi)容重組、整合和分割成一個個相對獨立又彼此聯(lián)系的項目單元，每個項目單元采用項目導(dǎo)入、項目目標(biāo)、項目設(shè)計、項目任務(wù)、項目案例、項目小結(jié)、本項目習(xí)題的方式組織教材內(nèi)容。這種編寫方式具有目標(biāo)的整體性、知識的系統(tǒng)性、訓(xùn)練的序列性。2.有效融入思政元素、實現(xiàn)專業(yè)教育與思政教育同向同行本教材以2020年5月*《高等學(xué)校課程思政建設(shè)指導(dǎo)綱要》提出的課程思政建設(shè)五大內(nèi)容入手，將以習(xí)近平談網(wǎng)絡(luò)安全和信息化相關(guān)論述、中國IT界風(fēng)云人物、古詩詞、中華美食、中華名勝古跡、網(wǎng)絡(luò)安全法等作為教材相關(guān)知識點教學(xué)案例的文字素材，項目案例以話說家鄉(xiāng)、趣談美食、中國節(jié)日、網(wǎng)絡(luò)安全法律法規(guī)等為主題進行設(shè)計。將將價值塑造、知識傳授和能力培養(yǎng)三者融為一體，實現(xiàn)專業(yè)教育與思政教育同向同行，形成協(xié)同效應(yīng)。3.提供數(shù)字化教學(xué)資源平臺、創(chuàng)設(shè)全新的教育時空提供與紙質(zhì)教材緊密融合的掃碼通平臺易智教云教學(xué)平臺，教材的全部教學(xué)資源如教學(xué)視頻、PPT、電子教案、圖片素材、典型案例、習(xí)題庫等都上傳到易智教云教學(xué)平臺，該平臺除了具有瀏覽查詢、下載資源功能外，還提供了許多實用教學(xué)功能。如視頻學(xué)習(xí)、項目練習(xí)、在線測試等，可以滿足學(xué)生自主學(xué)習(xí)、個性化學(xué)習(xí)的需求，適應(yīng)互聯(lián)網(wǎng) 信息化教育的需要。
本書若有印裝質(zhì)量問題,請向出版社營銷中心調(diào)換全國免費服務(wù)熱線:400-6679-118竭誠為您服務(wù)版權(quán)所有侵權(quán)必究近幾年 ,隨著移動互聯(lián)網(wǎng)的迅速發(fā)展 ,各大公司都在大量招聘網(wǎng)頁前端設(shè)計人員 ,同時對前端設(shè)計師的技能要求也大大提高。如今的網(wǎng)頁設(shè)計師需要了解整個 Web前端開發(fā)的技術(shù)及標(biāo)準(zhǔn)才能制作出符合規(guī)范的頁面。本書主要介紹 Web前端開發(fā)*的三大技術(shù) ,即 HTML5、CSS3和JavaScript,還包括響應(yīng)式布局和 Bootstrap前端框架技術(shù)。編者以原創(chuàng)案例 茅草屋網(wǎng)站 為主線 ,根據(jù)學(xué)生特點和認(rèn)知規(guī)律 ,將 Web前端開發(fā)所需的三大核心技術(shù)分割成一個個相對獨立又彼此聯(lián)系的項目模塊 ,每個項目模塊中 ,先提出項目任務(wù) ,然后介紹知識點 ,隨之實現(xiàn)相關(guān)項目任務(wù) ,學(xué)習(xí)者以任務(wù)驅(qū)動的方式進行學(xué)習(xí) ,通過任務(wù)實施的過程來鞏固和吸收所學(xué)知識。本書適合網(wǎng)頁設(shè)計的初學(xué)者閱讀 ,并提供圖片、代碼等相關(guān)素材。建議在閱讀本書的同時,使用網(wǎng)頁制作工具及瀏覽器同步操作 ,在完成實例后及時瀏覽查看結(jié)果 ,這樣學(xué)習(xí)效率會大大提高。一、本書內(nèi)容概述全書共分為 10個項目。項目 1 Web前端開發(fā)概述 :介紹網(wǎng)頁和網(wǎng)站的基本概念、網(wǎng)頁制作的三大技術(shù)及標(biāo)準(zhǔn)、網(wǎng)頁制作的工具。項目 2使用 HTML5組織頁面內(nèi)容 :介紹 HTML5的基礎(chǔ)知識、常用 HTML標(biāo)簽的使用方法 ,使讀者掌握 HTML5標(biāo)記語言的使用方法。項目 3使用 HTML5新增的標(biāo)簽 :介紹 HTML5新增的語義標(biāo)簽、音頻標(biāo)簽、視頻標(biāo)簽及表單元素標(biāo)簽 ,使讀者學(xué)會使用 HTML標(biāo)簽組織頁面內(nèi)容。項目 4使用 CSS樣式設(shè)置頁面外觀 :介紹 CSS樣式規(guī)則、CSS選擇器、CSS文本與字體樣式屬性、背景與超鏈接樣式屬性 ,使讀者學(xué)會使用 CSS樣式設(shè)置頁面外觀。項目 5網(wǎng)頁布局與定位 :介紹盒子模型、元素的定位機制及常見頁面布局的實現(xiàn)方法。項目 6設(shè)置頁面導(dǎo)航條和列表樣式 :介紹 CSS列表樣式屬性、邊框樣式屬性以及邊距樣式屬性 ,并通過實例講解導(dǎo)航條、圖片列表、新聞列表的制作方法。項目 7使用 CSS3美化頁面 :介紹 CSS3文本陰影、圓角邊框、字體圖標(biāo)、2D轉(zhuǎn)換、過渡與動畫屬性 ,使讀者學(xué)會使用 CSS3樣式屬性美化頁面。項目 8使用 JavaScript和jQuery實現(xiàn)動態(tài)效果 :介紹 JavaScript編程基礎(chǔ)和 jQuery 常用動態(tài)效果的制作方法。項目9使用 Bootstrap構(gòu)建響應(yīng)式網(wǎng)頁:介紹響應(yīng)式布局的概念、媒體查詢的含義、 Bootstrap前端框架技術(shù)的使用。項目10綜合案例:以原創(chuàng)案例鐘山文化之旅網(wǎng)站的制作為案例,將整本書的知識融會貫通。二、本書特點 (1)以原創(chuàng)案例為主線,采用六段式編寫體例組織教材內(nèi)容。本書以原創(chuàng)案例茅草屋網(wǎng)站為主線,根據(jù)學(xué)生特點和認(rèn)知規(guī)律,將 Web前端開發(fā)所需的三大技術(shù)分割成一個個相對獨立又彼此聯(lián)系的項目模塊,每個項目模塊采用學(xué)習(xí)目標(biāo)、案例導(dǎo)入、任務(wù)驅(qū)動、項目總結(jié)、項目習(xí)題、項目實驗六段式的編寫方式組織教材內(nèi)容。 (2)案例設(shè)計有效融入思政元素,實現(xiàn)專業(yè)教育與思政教育同向同行。網(wǎng)站案例的文字、圖片素材均是圍繞思政元素進行設(shè)計,本書將價值塑造、知識傳授和能力培養(yǎng)三者融為一體,實現(xiàn)專業(yè)教育與思政教育同向同行,形成協(xié)同效應(yīng)。 (3)教材的教學(xué)資源如教學(xué)視頻、PPT、電子教案、圖片素材、典型案例、習(xí)題庫等全部上傳到云教學(xué)平臺,可以滿足學(xué)生自主學(xué)習(xí)、個性化學(xué)習(xí)的需求,適應(yīng)互聯(lián)網(wǎng) 信息化教育的需要。本書項目1至項目6由南京交通職業(yè)技術(shù)學(xué)院張淑梅編寫,項目7至項目10由江蘇經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院宋維堂編寫,教材由常州機電職業(yè)技術(shù)學(xué)院李桂秋教授主審。由于編者水平有限,書中難免有不足之處,敬請廣大讀者批評、指正!為了方便教學(xué),本書還配有電子課件等資料,任課教師可以發(fā)郵件至 hustpeit@163. com索取。編者 2023年5月
張淑梅，女，教授，中共黨員。1991年哈爾濱師范大學(xué)數(shù)學(xué)專業(yè)畢業(yè)。獲得江蘇省交通運輸系統(tǒng)教學(xué)名師榮譽稱號。主要講授Web開發(fā)技術(shù)（HTML）、數(shù)據(jù)庫應(yīng)用與管理、動態(tài)網(wǎng)頁設(shè)計（ASP.NET）、C語言程序設(shè)計、C#程序設(shè)計等課程。主要研究成果包括：主持完成江蘇省現(xiàn)代教育技術(shù)、江蘇省教育信息化、中國交通教育研究會等教育研究課題多項，主持完成院級科研項目多項，主編十二五江蘇省高等學(xué)校重點教材1部。在中國職業(yè)教育、中國電力教育、數(shù)字技術(shù)與應(yīng)用等期刊發(fā)表研究論文多篇。
項目 1 Web前端開發(fā)概述
1.1
認(rèn)識網(wǎng)頁和網(wǎng)站 …………………… 2
1.2
Web前端開發(fā)技術(shù)及標(biāo)準(zhǔn) ……… 6
1.3網(wǎng)頁制作工具
………………………8
項目 2使用 HTML5組織頁面內(nèi)容
2.1
HTML基礎(chǔ) ……………………… 16
2.2
HTML5常用標(biāo)簽 ……………… 20
2.3項目案例
………………………… 40
2.4
HTML表單 ………………………41
項目 3使用 HTML5新增的標(biāo)簽
3.1
HTML5新增的語義標(biāo)簽 ……… 55
3.2
HTML5視頻、音頻標(biāo)簽 ………… 65
3.3項目案例
………………………… 69
3.4
HTML5新增的表單元素 ………72
項目 4使用 CSS樣式設(shè)置頁面外觀
4.1認(rèn)識
CSS ………………………… 83
4.2
CSS選擇器 ……………………… 89
4.3
CSS文本與字體樣式屬性 ……… 97
4.4
CSS背景樣式屬性 ……………… 106
4.5項目案例
…………………………110
5.1網(wǎng)頁布局概述
…………………… 118
5.2盒子模型
………………………… 120
5.3定位機制
………………………… 124
5.4
CSS布局 ………………………… 135
5.5項目案例
…………………………139
項目 6設(shè)置頁面導(dǎo)航條和列表樣式
6.1
CSS列表樣式屬性 ……………… 146
6.2
CSS邊框樣式屬性 ……………… 153
6.3
CSS邊距樣式屬性 ……………… 157
6.4項目案例
…………………………159
項目 7使用 CSS3美化頁面
7.1
CSS3邊框?qū)傩?………………… 176
7.2
文本陰影與文本溢出屬性 ……… 184
7.3
CSS3字體 ……………………… 187
7.4
CSS3的2D轉(zhuǎn)換、過渡與動畫 …… ……………………………………… 193
7.5項目案例
…………………………199
項目 8使用 JavaScript和jQuery實現(xiàn)動態(tài)效果
8.1初識
JavaScript………………… 211
8.2
JavaScript語言基礎(chǔ) …………… 213
8.3
JavaScript流程控制語句 ……… 218
8.4
函數(shù)的定義及使用 ……………… 222
8.5
數(shù)組的定義及使用 ……………… 223
8.6
HTMLDOM(文檔對象模型 )…… ……………………………………… 226
8.7認(rèn)識
JQuery …………………… 232
8.8
jQuery選擇器 ………………… 234
8.9
jQuery事件操作 ……………… 238
8.10
jQuery的文檔操作 …………… 238
8.11
jQuery動畫特效 ……………… 242
8.12項目案例
………………………251
項目 9使用 Bootstrap構(gòu)建響應(yīng)式網(wǎng)頁
9.1
響應(yīng)式布局與媒體查詢 ………… 264
9.2
Web前端框架 Bootstrap的使用 … ……………………………………… 267
9.3項目案例
…………………………291
項目 10綜合案例
10.1
鐘山文化之旅 網(wǎng)站首頁制作 …… ……………………………………… 299
10.2響應(yīng)式布局
鐘山文化之旅 網(wǎng)站首頁制作 ………………………………… 317
書單推薦
