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