本書以一個完整的電子商務網站網頁制作為案例，采用迭代遞增的網頁設計方法，每一個項目完成一部分需求，隨即學習相關知識並動手實現。全書按照網頁設計的步驟，圍繞描述網頁內容的HTML、描述網頁樣式的CSS以及描述網頁行為的JavaScript三個知識點進行編寫。同時還涉及響應式布局、字體式圖標和框架技術等流行的網頁設計技術。最後用兩個案例對全書知識進行貫穿總結，使讀者全面掌握網頁設計技能。 本書內容結構合理，實例簡單易懂，既適合高職院校網頁設計課程教學使用，也適合從事網頁設計相關工作的初學者閱讀，或作為社會培訓教材使用。

本書以一個完整電子商務網站的網頁制作為案例，采用迭代遞增的網頁設計方法，每一個項目完成一部分需求，隨即學習相關知識並動手實現。全書按照網頁設計的步驟，圍繞描述網頁內容的HTML、描述網頁樣式的CSS以及描述網頁行為的JavaScript三個知識點進行編寫。同時還涉及響應式布局、字體式圖標和框架技術等流行的網頁設計技術。最後用兩個項目案例對全書知識進行貫穿總結，使讀者全面掌握網頁設計技能。
本書內容結構合理，實例簡單易懂，既適合高職院校網頁設計課程的教學使用，也適合從事網頁設計相關工作的初學者閱讀，或作為社會培訓教材使用。
本書封面貼有清華大學出版社防偽標簽，無標簽者不得銷售。

徐琴,工學學士，管理學碩士，蕪湖職業技術學院副教授，主要從事電子商務專業《電子商務網頁設計與制作》、《Photoshop圖像處理》等課程的教學。發表論文9篇，主持省級教科研項目4項，參與多項，獲得全國信息化大賽二等獎及三等獎，帶領學生參加比賽獲得國家級和省級獎項十餘項。

目錄

項目1認知網頁設計

任務1認識網頁和網站

任務2選擇網頁制作工具

項目2構建HTML 5網頁

任務創建HTML 5網頁

項目3實現網頁布局

任務進行網頁布局

實訓布局實訓

項目4對鏈接應用樣式

任務修改鏈接樣式

實訓鏈接樣式實訓

項目5設置網頁導航條和列表樣式

任務制作導航條和列表

實訓創建垂直導航條

項目6和用戶交互——表單

任務利用表單進行用戶交互

實訓創建用戶注冊界面

項目7美 化 頁 面

任務對頁面進行美化

實訓美化導航條

項目8添加動態效果

任務為頁面添加動態效果

實訓顯示隱藏菜單

項目9響應式布局

任務對頁面添加響應式布局

實訓響應式布局實訓

項目10用Bootstrap重構網頁

任務重構網頁

實訓利用Bootstrap設置標簽頁

項目11綜 合 練 習

任務1學校網站制作

任務2響應式布局學校網站制作

參考文獻

隨著互聯網的迅速發展，各大公司都在大量招聘網頁前端設計人員，同時對前端設計師的技能要求也大大提高。如今的網頁設計師需要了解整個Web標準體繫纔能制作出符合規範的頁面。

HTML 5是W3C與WHATWG合作的結果，雖然它仍處於完善之中，但是，目前大部分瀏覽器已經支持HTML 5。HTML 5是Web開發的一次重大改變，可以說它代表著未來的發展趨勢。

黨的二十大報告指出“堅持教育優先發展、科技自立自強，人纔引領驅動”，為我國科技創新和計算機技術應用的全面發展提出了新的要求和目標。本書緊扣國家戰略和二十大精神，旨在幫助讀者深入理解以HTML 5為核心的Web前端開發技術，並在實際操作中掌握其應用技巧，推進數字化、智能化、網絡化、信息化的發展進程，為推動高質量教育發展做出新的貢獻。
本書主要介紹前端網頁開發的技術： HTML 5、CSS 3及JavaScript，還包括響應式布局、字體式圖標和框架等網頁設計主流技術。每個項目中，介紹知識點後會隨之實現相關任務，使讀者以任務驅動的方式來學習，通過任務實施的過程來鞏固和吸收所學知識。

本書適合網頁設計的初學者閱讀，並提供圖片、代碼等相關素材。建議在閱讀本書的同時，使用網頁制作工具及瀏覽器同步操作，在完成實例後及時查看結果，使學習效率大大提高。

本書內容概述

全書共分為11個項目。

項目1認知網頁設計： 介紹網頁和網站的基本概念與網頁制作的工具。

項目2構建HTML 5網頁： 介紹HTML 5的基礎知識，使讀者掌握HTML 5置標語言的使用方法。

項目3實現網頁布局： 介紹實現網頁布局的多種方法，包括固定寬度的布局、流式布局和彈性布局等，使讀者在掌握CSS基礎、盒模型、浮動、框架等知識的基礎上，學會設置常見布局。

項目4對鏈接應用樣式： 介紹修改默認樣式的方法，使讀者能夠創建按鈕式鏈接。

項目5設置網頁導航條和列表樣式： 介紹列表在網頁導航條、圖片列表和新聞列表中的作用，以及利用列表和樣式實現它們的方法。

項目6和用戶交互——表單： 介紹各種表單的類型和用法，使讀者能夠為頁面添加搜索欄、創建用戶登錄界面和制作購物車等。

項目7美化頁面： 介紹美化頁面的主要方法，以設置文本效果、創建圓角邊框和字體式圖標為實例，講解美化頁面的具體思路和步驟。

項目8添加動態效果： 主要介紹JavaScript基礎知識，完成顯示與取消搜索框默認關鍵詞、圖片輪播、圖片放大鏡、提示窗口和選項卡切換的動態效果。

項目9響應式布局： 主要講解響應式布局的概念、頁面優化的方法。

項目10用Bootstrap重構網頁： 介紹Bootstrap的概念，使讀者掌握利用Bootstrap重構頁面的方法。

項目11綜合練習： 以學校網站的制作及學校手機網頁的制作為項目案例，將整本書的知識融會貫通。

本書特點

（1） 情境導入、任務驅動、項目導向，每一個項目完善網頁的一部分。

（2） 每個任務由學習情境、任務描述、任務知識、任務實施等模塊組成，理論和實踐緊密結合。

（3） 多個實例環環相扣，迭代遞增。

（4） 采用當前最主流的HTML 5、CSS 3和JavaScript，涉及響應式布局、字體式圖標及框架技術。

（5） 書中舍去Photoshop圖片處理、Flash動畫制作等內容，從純網頁編輯的角度進行編寫。

（6） 本書配套相關教學資源，提供圖片、代碼等相關素材供免費使用。

(7) 教學團隊已建立課程微信公眾號，並不斷更新維護，歡迎大家關注與討論。微信公眾號可從清華大學出版社讀者服務部索取。

本書約定

本書代碼以灰色為背景，如下所示。

!doctype html

html

head

meta charset="utf-8"

title文檔標題/title

/head

body

!--此處為頁面正文部分--

/body

/html

由於編者水平有限，書中難免有不足之處，敬請廣大讀者批評、指正。

編者2023年2月