網頁設計與製作(html5+css3+javascript)(2020年清華大學出版社的圖書)

《網頁設計與製作(html5+css3+javascript)》2020年清華大學出版社的圖書。本書作者是梁莉菁、劉巧麗，由易到難、由簡到繁，循序漸進地介紹網頁前端設計與製作的基礎知識與基本技能。

基本介紹

• 中文名：網頁設計與製作(html5+css3+javascript)
• 作者：梁莉菁、劉巧麗
• 出版社：清華大學出版社
• ISBN：9787302560074
• 類別：文化/書籍

內容簡介

本課程提供慕課教程（https://mooc1-1.chaoxing.com/course/200123083.html製作中）課程將從Web發展史講起，對Html標籤、CSS樣式設定作了詳細講解，並涉及了簡單的JavaScript腳本套用以及Html5 CSS3新功能的介紹，由易到難、由簡到繁，循序漸進地介紹網頁前端設計與製作的基礎知識與基本技能。

目錄

第1章網頁設計基礎知識

【目標任務】

【知識技能】

1.1Web發展史

1.2網頁基本概念

1.2.1網際網路

1.2.2TCP/IP協定

1.2.3全球資訊網

1.2.4超文本傳輸協定

1.2.5檔案傳輸協定

1.2.6統一資源定位符

1.2.7IP位址

1.2.8域名地址

1.2.9域名系統

1.2.10超文本和超連結

1.2.11網頁和網站

1.2.12靜態網頁與動態網頁

1.2.13超文本標記語言

1.2.14層疊樣式表

1.2.15JavaScript

1.2.16Web標準

1.3網站開發基本流程

1.4網頁設計與製作的主流開發工具與瀏覽器

【項目實戰】

項目11使用記事本等網頁製作工具創建簡HTML結構網頁

項目12在Dreamweaver中創建站點

【實訓作業】

實訓任務11創建站點目錄結構及個HTML網頁

實訓任務12下載安裝多種瀏覽器和主流開發工具

第2章HTML網頁結構基礎

【目標任務】

【知識技能】

2.1HTML文檔基本格式

2.1.1文檔類型聲明 ﹤ !doctype html ﹥

2.1.2HTML頁面結構

2.1.3文檔標籤 ﹤ html ﹥ … ﹤ /html ﹥

2.1.4文檔頭標籤 ﹤ head ﹥ … ﹤ /head ﹥

2.1.5檔案主體標籤 ﹤ body ﹥ … ﹤ /body ﹥

2.1.6文檔標題標籤 ﹤ title ﹥ … ﹤ /title ﹥

2.1.7引用外部檔案標籤 ﹤ link/ ﹥

2.1.8內嵌樣式標籤 ﹤ style ﹥ … ﹤ /style ﹥

2.1.9頁面元信息標籤 ﹤ meta ﹥

2.1.10頁面注釋標籤

2.1.11標籤的屬性

2.2HTML文本控制標籤及屬性

2.2.1標題標籤及其屬性

2.2.2段落標籤及其屬性

2.2.3換行標籤

2.2.4特殊字元

2.2.5預格式文本

2.2.6水平線標籤及其屬性

2.2.7文本格式化標籤

2.2.8 ﹤ span ﹥ 標籤

2.3圖像標籤及屬性

2.3.1 ﹤ img ﹥ 標籤基本語法

2.3.2 ﹤ img ﹥ 標籤其他屬性

2.4超連結標籤及屬性

2.5列表標籤及屬性

2.5.1有序列表

2.5.2無序列表

2.5.3定義列表

2.6HTML5新增的語義化結構標籤

2.6.1 ﹤ header ﹥ … ﹤ /header ﹥ 標籤

2.6.2 ﹤ nav ﹥ … ﹤ /nav ﹥ 標籤

2.6.3 ﹤ section ﹥ … ﹤ /section ﹥ 標籤

2.6.4 ﹤ article ﹥ … ﹤ /article ﹥ 標籤

2.6.5 ﹤ aside ﹥ … ﹤ /aside ﹥ 標籤

2.6.6 ﹤ footer ﹥ … ﹤ /footer ﹥ 標籤

2.6.7﹤ figure ﹥ … ﹤ /figure ﹥ 標籤與 ﹤ figcaption ﹥ … ﹤ /figcaption ﹥

標籤

【項目實戰】

項目 21製作“網頁設計與製作”課程作業網站

【實訓作業】

實訓任務21製作“第2章 HTML網頁結構基礎”案例作業網站

第3章CSS網頁樣式基礎

【目標任務】

【知識技能】

3.1什麼是CSS樣式

3.2Dreamweaver CC中創建樣式表並設定CSS樣式的方法

3.2.1認識【CSS樣式】面板

3.2.2創建並編輯CCS樣式的過程

3.3引入CSS樣式表的方法

3.3.1外部樣式表

3.3.2內部樣式表

3.3.3行內樣式

3.3.4CSS樣式表的混合使用

3.4CSS樣式的語法規則

3.5CSS樣式基礎選擇器

3.5.1標籤選擇器

3.5.2類選擇器

3.5.3ID選擇器

3.5.4通配符選擇器

3.6常用CSS文本樣式

3.6.1fontstyle（字型風格）

3.6.2fontvariant（變體）

3.6.3fontweight（字型粗細）

3.6.4fontsize（字號大小）

3.6.5lineheight（行高）

3.6.6fontfamily（字型）

3.6.7font（綜合設定字型樣式）

3.6.8color（文本顏色）

3.6.9textdecoration（文本裝飾）

3.6.10textalign（水平對齊方式）

3.6.11textindent（首行縮進）

3.7CSS控制列表樣式

3.8CSS複合選擇器

3.8.1群組選擇器

3.8.2標籤指定選擇器

3.8.3後代選擇器

3.8.4子選擇器

3.9CSS的繼承性

3.10 CSS的優先權

3.10.1外部樣式表、內部樣式表和行內樣式的優先權

3.10.2基礎選擇器的優先權

3.10.3複合選擇器的優先權

3.11CSS的層疊性

3.11.1樣式不衝突的層疊

3.11.2樣式衝突且存在優先權差別的層疊

3.11.3樣式衝突且選擇器優先權相同的層疊

3.11.4樣式衝突且同一標籤運用不同類型選擇器的層疊

【項目實戰】

項目31百度搜尋結果網頁局部樣式設定

項目32端午節習俗新聞頁面

【實訓作業】

實訓任務31Web前端試學班廣告頁局部樣式設定

實訓任務32“商品推薦”頁局部樣式設定

第4章CSS網頁樣式進階

【目標任務】

【知識技能】

4.1認識盒子模型

4.2盒子模型相關屬性

4.2.1寬高屬性

4.2.2框線屬性

4.2.3內邊距屬性

4.2.4外邊距屬性

4.2.5背景屬性

4.3元素類型

4.3.1塊級元素

4.3.2行內元素

4.3.3行內塊元素

4.4元素類型的轉換

4.5元素所占空間的計算

4.5.1元素未設定width 和height屬性

4.5.2元素設定width 和height屬性

4.5.3CSS3新增的 boxsizing 屬性

4.6CSS3選擇器與常用的樣式屬性

4.6.1CSS3簡介

4.6.2CSS3兄弟選擇器

4.6.3CSS3屬性選擇器

4.6.4CSS3偽類選擇器

4.6.5CSS3圓角框線屬性和陰影屬性

4.6.6CSS3中的顏色設定

4.6.7CSS3中的過渡效果

【項目實戰】

項目41利用盒子模型原理製作“專題學習”模組效果

項目42精靈圖技術的運用

項目43仿騰訊IMQQ網頁視差背景效果

【實訓作業】

實訓任務41使用精靈圖技術製作淘寶首頁局部效果

實訓任務42商品展示頁局部效果的實現

第5章網頁布局基礎

【目標任務】

【知識技能】

5.1DIV CSS布局的思路

5.2文檔流

5.3Float浮動

5.3.1浮動的基本語法

5.3.2浮動的基本原理

5.3.3清除浮動clear屬性

5.3.4子元素浮動，父元素空間不足的情況

5.3.5浮動子元素對未設定高度的父元素的影響及解決辦法

5.4overflow屬性

5.5定位屬性

5.5.1定位屬性

5.5.2靜態定位

5.5.3相對定位

5.5.4定位

5.5.5固定定位

5.5.6zindex層疊等級屬性

【項目實戰】

項目51“國”字型布局網頁效果製作

項目52商品廣告版塊效果製作

【實訓作業】

實訓任務51新浪微博發言版塊製作

實訓任務52製作第5章案例作業網站

第6章導航與超連結

【目標任務】

【知識技能】

6.1超連結的類型

6.2超連結的基本語法

6.2.1href屬性

6.2.2target屬性

6.2.3title屬性

6.3電子郵件超連結

6.4檔案下載超連結

6.5錨點連結

6.6圖像熱區超連結

6.7超連結樣式的設定

6.8超連結偽類控制超連結

6.9列表技術製作導航

6.9.1縱向一級導航

6.9.2橫向一級導航

6.9.3縱向二級導航

6.9.4橫向二級導航

【項目實戰】

項目61滑動門技術製作一級導航

項目62錨點連結製作類似選項卡側邊欄導航效果

【實訓作業】

實訓任務61微軟商城網站頁腳效果製作

實訓任務62二級下拉導航選單的製作

第7章表格及樣式設定

【目標任務】

【知識技能】

7.1創建表格

7.2表格的基本語法

7.2.1表格的基本結構

7.2.2HTML表格的表頭標籤

7.2.3表格相關的HTML標籤

7.2.4表格標籤的屬性

7.2.5合併單元格

7.3表格的樣式設定

7.3.1表格的框線摺疊樣式

7.3.2表格的框線樣式

7.3.3表格的背景

7.3.4表格內容的對齊

7.4常見表格的製作

7.4.1常規細線表格的製作

7.4.2隔行變色表格的製作

7.4.3nthchild()實現隔行變色

7.4.4僅橫線或僅豎線表格

7.4.5滑鼠懸停表格效果

【項目實戰】

項目71製作中學期末考試成績表

【實訓作業】

實訓任務71模擬製作GitHub表格樣式效果

實訓任務72模擬製作百度萬年日曆滑鼠懸停效果

第8章表單及樣式設定

【目標任務】

【知識技能】

8.1創建表單

8.1.1插入表單選單命令及表單工具組

8.1.2Dreamweaver CC創建表單的方法

8.2表單的基本語法

8.2.1表單標籤

8.2.2表單元素

8.3 ﹤ input ﹥ 標籤

8.3.1 ﹤ input ﹥ 標籤的type類型

8.3.2HTML5 新增的type類型

8.4表單CSS樣式的設定

8.4.1表單布局樣式

8.4.2表單控制項樣式

【項目實戰】

項目81商城的登錄表單效果製作

【實訓作業】

實訓任務81模擬製作網易信箱登錄界面

實訓任務82製作客戶留言表單

第9章JavaScript基礎

【目標任務】

【知識技能】

9.1JavaScript概述

9.1.1JavaScript在網頁中的作用

9.1.2在網頁中套用JavaScript

9.2JavaScript的語法基礎

9.2.1JavaScript的代碼格式

9.2.2JavaScript輸出

9.2.3JavaScript的數據類型

9.2.4JavaScript運算符

9.2.5條件語句

9.2.6循環語句

9.3JavaScript對象

9.3.1JavaScript 對象

9.3.2BOM瀏覽器對象模型

9.3.3DOM文檔對象模型

9.4JavaScript 函式

9.4.1JavaScript 函式

9.4.2函式的調用

9.4.3JavaScript 事件

【項目實戰】

項目91仿淘寶首頁焦點輪播圖效果製作

項目92圖片循環滾動仿跑馬燈效果製作

【實訓作業】

實訓任務91仿焦點新聞效果製作縱向圖片新聞循環滾動

實訓任務92製作本章案例作業網站

第10章回響式網頁布局基礎

【目標任務】

【知識技能】

10.1回響式Web設計概述

10.2固定布局

10.3百分比布局

10.4相對字型大小

10.5彈性布局

10.6回響式圖片

10.7彈性盒子

10.7.1設定父元素的display屬性值為flex

10.7.2justifycontent屬性

10.7.3alignitems屬性

10.7.4flexdirection屬性

10.7.5flexwrap屬性

10.7.6flex屬性

10.7.7order屬性

10.7.8flexflow屬性

10.8視口與媒體查詢

10.8.1視口

10.8.2媒體查詢

10.9Bootstrap回響式網頁設計

10.9.1Bootstrap獲取與安裝

10.9.2Bootstrap柵格系統

10.9.3Bootstrap組件

10.9.4JavaScript外掛程式

【項目實戰】

項目101利用百分比與固定布局相結合實現通欄布局

項目102利用媒體查詢製作《福爾摩斯歷險記》回響式網頁

項目103Bootstrap網頁布局案例“Flash雲課堂”網站首頁

【實訓作業】

實訓任務101製作“Web前端學習網”回響式網頁框架

實訓任務102利用Bootstrap布局技術重構作業網站首頁

參考文獻

作者簡介

梁莉菁，萍鄉學院信息與計算機工程學院，副教授，1969.5。1987.8從事教學工作至今，一直從事一線教學工作，研究方向：網路多媒體教育技術套用。