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