《Web前端開發(fā)與項目實踐》以項目式的教學方式,合理組織 HTML、CSS 和 JavaScript 知識點的學習,引導讀者循序漸 進地學習 Web 前端相關開發(fā)技術。 全書共 9 個項目,分別是網頁入門、個人簡歷、個人博客、企業(yè)網站首頁、用戶注冊頁面、酒 店客房預訂網站、視頻播放網站、在線訂餐頁面和快遞柜取件頁面。每個項目劃分成若干任務,以 任務驅動的方式展開介紹,項目的前幾個任務介紹項目所需掌握的知識點,后面若干任務對項目進 行分析,并介紹相關實現(xiàn)方法。 本書既可以作為高等院校計算機、數(shù)字媒體等專業(yè)本科生的網頁設計課程的教材,同時也可以 作為 Web 前端開發(fā)初學者的參考讀物。
《Web前端開發(fā)與項目實踐》具有如下特點:教材內容針對性強,滿足高校課程設置與教學要求;內容精簡實用,符合對Web前端開發(fā)方向的培養(yǎng)目標;方法與時俱進,縮短了教學與生產實際的距離;本教材主要特色是:源代碼教學、項目導向、任務驅動、分階段教學。
(1)源代碼教學。突出HTML5、CSS3、Javascript、jQuery代碼的教學,對于編輯工具則要求會用即可。
(2)項目導向、任務驅動。突出項目式教學,書中八個項目從個人到企業(yè)、從PC端到移動端,涵蓋了目前常見的網站類型。每個項目搭載若干任務,以任務驅動學習。
(3)分階段教學。內容分為四篇:個人與企業(yè)網站設計篇、門戶型網站設計篇以及響應式與移動端網站設計篇、綜合實例篇。
移動互聯(lián)網時代,基于HTML5技術的Web應用得到快速發(fā)展,傳統(tǒng)設計已經無
法滿足多元化需求,網頁設計人才缺口巨大。本書旨在培養(yǎng)Web前端開發(fā)技術人才,
為后續(xù)復雜的Web應用、移動應用開發(fā)打下堅實的基礎。
Web前端開發(fā)涉及的知識和技術廣泛,具有很強的操作性和綜合實踐性,本書
強調實踐教學,并且兼顧理論知識。在項目導向和任務驅動模式下,本書內容圍繞
職業(yè)活動,從實際出發(fā),模擬真實工作情境,采用逆向推導的思維方法,根據(jù)
實際工作任務講解相關理論知識,重在培養(yǎng)學生的職業(yè)崗位能力。同時通過9個項
目,由淺及深、較為全面地介紹Web前端開發(fā)的相關理論,包括HTML5、CSS3和
ECMAScript中最新定義的標準。
本書適用于零基礎讀者。授之以魚,不如授之以漁。知識在不斷地更新變化,
要及時掌握新知識,學習的方式方法尤為重要。本書通過項目教學引導讀者入門,旨
在引導讀者掌握Web前端開發(fā)的基本方法和技巧。
本書主要特色是源代碼教學、項目導向和任務驅動、分階段教學。
1.源代碼教學
本書側重源代碼教學,突出介紹HTML、CSS、JavaScript,使讀者能夠熟練使用
HTML代碼設計網站內容,使用CSS設計頁面樣式,使用JavaScript實現(xiàn)網站的動態(tài)性。
希望讀者通過學習,能做到知其然,知其所以然。
2.項目導向和任務驅動
本書重點突出項目式教學,書中9個項目從個人到企業(yè),從PC端到移動端,涵
蓋了目前常見的Web應用場景。每個項目搭載若干任務,以任務驅動學習,由淺及深、
較為全面地介紹Web前端開發(fā)的相關知識及技巧。本書注重知識內容的實用性和綜合
性,側重實用設計方法、設計技能和設計過程的講述。
3.分階段教學
本書內容共5篇,分別是開篇、個人網站設計篇、企業(yè)網站設計篇、行業(yè)網站設
計篇以及響應式網站設計篇。分階段的教學內容使讀者能在不同的階段掌握不同的技
能要求,以適應不同的崗位需求。
Web
II
前端開發(fā)與項目實踐
●開篇:旨在讓讀者建立起網頁設計技術的基本認識,使讀者能夠搭建并制作一
個簡單的網站。
●個人網站設計篇:側重靜態(tài)網頁的基礎教學,重點介紹HTML與CSS的基
礎知識。通過該篇的學習,可使讀者掌握界面風格較為簡單的靜態(tài)網頁設計
方法。
●企業(yè)網站設計篇:側重靜態(tài)網頁的進階教學,重點介紹HTML與CSS的進階
知識。通過該篇的學習,使讀者能夠設計出界面風格更復雜、靈活的網頁。
●行業(yè)網站設計篇:側重動態(tài)網頁的教學,重點介紹HTML與JavaScript的相關
知識。通過該篇的學習,使讀者可以掌握交互性網站的設計方法,為今后復雜
的Web應用開發(fā)的學習打好基礎。
●響應式網站設計篇:該篇屬于拓展知識,主要介紹如何利用主流的前端開發(fā)技
術快速設計出適應不同設備的網站。
本書項目1、2、6、7由魏慧編寫,項目4、5、8、9由胡沁涵編寫,項目3由魏慧、
胡沁涵共同編寫,由魏慧負責統(tǒng)稿。本書的編寫得到蘇州大學計算機科學與技術學院
和蘇州城市學院的大力支持。由于作者水平有限,不足之處在所難免,懇請廣大讀者
和同行提出寶貴意見,在此深表感謝!
作 者
2023年1月于蘇州大學
開 篇
項目1 網頁入門003
任務1-1 基本概念004
任務1-2 制作第一個頁面006
個人網站設計篇
項目2 個人簡歷017
任務2-1 基本概念019
任務2-2 文本023
任務2-3 圖像029
任務2-4 表格031
任務2-5 個人簡歷頁面037
項目3 個人博客043
任務3-1 利用區(qū)塊標簽進行簡單布局045
任務3-2 CSS樣式的基本概念(1)048
任務3-3 CSS樣式的基本概念(2)054
任務3-4 文本樣式062
任務3-5 個人博客頁面分析072
任務3-6 個人博客頁面頁首、頁腳模塊的實現(xiàn)075
任務3-7 個人博客頁面博客內容模塊的實現(xiàn)077
IV
企業(yè)網站設計篇
項目4 企業(yè)網站首頁085
任務4-1 盒子模型087
任務4-2 盒子模型進階089
任務4-3 顯示類型設置098
任務4-4 定位設置104
任務4-5 背景設置114
任務4-6 CSS3新增效果設置129
任務4-7 企業(yè)網站首頁分析143
任務4-8 導航模塊的實現(xiàn)146
任務4-9 巨幕、服務和產品介紹模塊的實現(xiàn)148
任務4-10 浮動圖標和頁腳模塊的實現(xiàn)154
行業(yè)網站設計篇
項目5 用戶注冊頁面159
任務5-1 表單的基本概念161
任務5-2 表單控件164
任務5-3 表單樣式設計182
任務5-4 企業(yè)用戶注冊頁面分析194
任務5-5 表單模塊的實現(xiàn)197
項目6 酒店客房預訂網站205
任務6-1 JavaScript概念207
任務6-2 JavaScript的基本使用210
任務6-3 控制流程216
任務6-4 函數(shù)223
任務6-5 設計酒店客房預訂頁面228
目 錄
V
任務6-6 頁首模塊的實現(xiàn)232
任務6-7 酒店介紹模塊的實現(xiàn)233
任務6-8 客房預訂模塊的實現(xiàn)240
任務6-9 酒店客房預訂網站腳本的實現(xiàn)248
項目7 視頻播放網站255
任務7-1 JavaScript對象257
任務7-2 事件278
任務7-3 多媒體283
任務7-4 地理位置288
任務7-5 視頻播放網站頁面分析291
任務7-6 頁首模塊的實現(xiàn)294
任務7-7 視頻播放模塊的實現(xiàn)297
任務7-8 熱門視頻模塊的實現(xiàn)310
任務7-9 視頻播放網站腳本的實現(xiàn)313
響應式網站設計篇
項目8 在線訂餐頁面319
任務8-1 響應式設計320
任務8-2 媒體查詢323
任務8-3 彈性布局327
任務8-4 使用彈性布局進行響應式設計337
任務8-5 在線訂餐頁面分析341
任務8-6 在線訂餐頁面中導航和訂單模塊的實現(xiàn)344
任務8-7 在線訂餐頁面中菜單模塊的實現(xiàn)348
任務8-8 在線訂餐頁面中業(yè)務邏輯的實現(xiàn)354
項目9 快遞柜取件頁面359
任務9-1 網格布局360
任務9-2 網格容器屬性的設置364
任務9-3 網格項目屬性的設置373
任務9-4 使用網格布局實現(xiàn)響應式設計377
任務9-5 快遞柜取件頁面分析382
任務9-6 快遞柜取件頁面中導航模塊的實現(xiàn)384
任務9-7 快遞柜取件頁面中取件模塊的實現(xiàn)386
任務9-8 快遞柜取件頁面中業(yè)務邏輯的實現(xiàn)390
參考文獻392
附錄A HTML常用標簽簡介393
附錄B CSS屬性值簡介395