網頁制作實戰
-
【作 者】主編 肖睿 羅保山
【I S B N 】978-7-5170-4890-9
【責任編輯】李炎
【適用讀者群】本專通用
【出版時間】2016-11-01
【開 本】16開
【裝幀信息】平裝（光膜）
【版 次】第1版第1次印刷
【頁 數】180
【千字數】275
【印 張】11.25
【定 價】￥29
【叢 書】前端開發工程師系列
【備注信息】
簡介
本書特色
前言
章節列表
精彩閱讀
下載資源
相關圖書
隨著信息時代的到來，網絡已完全融入我們的工作和生活，從網絡上獲取信息或通過網絡交換信息，這些都離不開網絡的承載者——網頁。一個優秀的網站設計，能夠使瀏覽者快速地找到所需內容，并且擁有愉快的網絡體驗。本教材通過基本的HTML標簽學習，加之CSS美化技術來開發網站，讓你進入多姿多彩的網絡世界。
本套前端開發教材最大的特點就是以流行網站元素為項目實戰。本書使用HTML和CSS進行網站設計開發，并配以完善的學習資源和支持服務，為學習者帶來全方位的學習體驗，包括視頻教程、案例素材下載、學習交流社區、討論組等終身學習內容，更多技術支持請訪問課工場www.kgc.cn。
科學的訓練模式—— 科學的課程體系；創新的教學模式；技能人脈，實現多方位就業；隨需而變，支持終身學習。
真實的項目驅動—— 覆蓋80% 的網站效果制作；幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。
便捷的學習體驗—— 每章提供二維碼掃描，可以直接觀看相關視頻講解和案例操作；課工場開辟教材配套版塊，提供素材下載、學習社區等豐富在線學習資源。
前 言
隨著互聯網技術的飛速發展，“互聯網+”時代已經悄然到來，這自然催生了互聯網行業工種的細分，前端開發工程師這個職業應運而生，各行業、企業對前端設計開發人才的需求也日益增長。與傳統網頁開發設計人員相比，新“互聯網+”時代對前端開發工程師提出了更高的要求，傳統網頁開發設計人員已無法勝任。在這樣的大環境下，這套“前端開發工程師系列”教材應運而生，它旨在幫助讀者朋友快速成長為符合“互聯網+”時代企業需求的優秀的前端開發工程師。
“前端開發工程師系列”教材是由課工場（kgc.cn）的教研團隊研發的。課工場是北京大學下屬企業北京課工場教育科技有限公司推出的互聯網教育平臺，專注于互聯網企業各崗位人才的培養。平臺匯聚了數百位來自知名培訓機構、高校的頂級名師和互聯網企業的行業專家，面向大學生以及需要“充電”的在職人員，針對與互聯網相關的產品設計、開發、運維、推廣和運營等崗位，提供在線的直播和錄播課程，并通過遍及全國的幾十家線下服務中心提供現場面授以及多種形式的教學服務，并同步研發出版最新的課程教材。參與本書編寫的還有羅保山、王春蘭、楊洋、孫琳、張云青等院校教師。
課工場為培養互聯網前端設計開發人才，特別推出“前端開發工程師系列”教育產品，提供各種學習資源和支持，包括：
現場面授課程。
在線直播課程。
錄播視頻課程。
案例素材下載。
學習交流社區。
QQ討論組（技術，就業，生活）。
以上所有資源請訪問課工場www.kgc.cn。
本套教材特點
（1）科學的訓練模式
科學的課程體系。
創新的教學模式。
技能人脈，實現多方位就業。
隨需而變，支持終身學習。
（2）真實的項目驅動
覆蓋80%的網站效果制作。
幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。
（3）便捷的學習體驗
每章提供二維碼掃描，可以直接觀看相關視頻講解和案例操作。
課工場開辟教材配套版塊，提供素材下載、學習社區等豐富在線學習資源。
讀者對象
（1）初學者：本套教材將幫助你快速進入互聯網前端開發行業，從零開始逐步成長為專業的前端開發工程師。
（2）初級前端開發者：本套教材將帶你進行全面、系統的互聯網前端設計開發學習，幫助你梳理全面、科學的技能理論，提供實用開發技巧和項目經驗。
課工場出品（kgc.cn）
- 大學生創新創業基礎 [主編 姜國權 姜福佳]
- 信息技術（微課版） [王云 徐江鴻 李清霞 羅學鋒 ]
- 管理基礎與實務 [主編 王鳳基 顏漢軍]
- 高等數學導學篇（上冊） [主編 李文婧 胡雷 尹金生]
- 高等數學（下冊） [主編 李愛芹 胡雷 尹金生]
- 高等數學（上冊） [主編 李愛芹 胡雷 尹金生]
- 人工智能應用基礎 [主編 楊纓 李佳]
- 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
- 電路與電子技術Ⅱ——電路分析基礎 [主編 陳曉 金哲]
- 人工智能概論（第二版） [主編 任云暉 丁紅 徐迎春 ]
- 信息時代美育之道 [主編 劉宏宇 黎婭]
- 數字媒體交互設計項目式教程（微課版） [主編 蘇陸]
- Amazing！兒童英語自然拼讀分級教材（全8冊） [王玲 編著]
- Spark大數據處理技術 [主編 劉仁山 周洪翠 莊新妍]
- 人工智能算法與實踐 [主編 梁琨 張翼英]
- 計算機網絡技術項目化教程（微課版） [主編 王艷萍 安華萍]
- 數據清洗 [黃源 劉智楊 孫大松]
- 電路設計與PCB制作實操教程 [主編 周永宏]
- 電路與電子技術Ⅰ—數字電子技術 [主編 鄭玉珍 王淑琴]
- Java編程基礎案例式教程 [主編 陳艷華 唐春蘭]
- Excel在會計工作中的應用（第三版） [主 編 趙艷莉 耿聰慧]
- 應用數學 [主編 劉東海 劉麗瑤]
- Web用戶界面設計與制作 [主編 趙娟]
- 計算機網絡基礎創新教程（模塊化+課程思政版） [主編 唐繼勇 李旭]
- 計算機應用技術基礎案例教程 [主編 周麗娟 王璐]
- Unity應用開發與實戰（微課版） [主 編 程永恒]
- PHP程序設計項目化教程 [主 編 杜海穎]
- 文學基礎與影視欣賞 [楊華軻 朱偉利 畢雪燕 羅玲誼]
- 路由交換技術項目化教程 [主編 范國娟]
- 信息技術基礎立體化教程 [鄒承俊 周洪林 劉和文 葉煜 ]
課程設計說明
關于引用作品版權說明
第1章 走進HTML 1
1 HTML基礎 2
1.1 HTML簡介 2
1.2 HTML開發工具 3
1.3 HTML基本結構 4
1.4 HTML基本標簽 6
1.5 HTML圖像標簽 10
1.5.1 常見的圖像格式 10
1.5.2 圖像標簽的基本語法 11
1.6 HTML超鏈接標簽 11
1.6.1 超鏈接的基本用法 11
1.6.2 超鏈接的應用場合 13
1.7 注釋和特殊符號 17
2 揭開CSS的神秘面紗 18
2.1 什么是CSS 19
2.2 CSS基本語法 20
2.3 CSS選擇器 21
2.4 網頁中引用CSS樣式 26
本章總結 29
本章作業 29
第2章 網頁穿上美麗外衣 31
1 使用CSS美化文本 32
1.1 字體樣式 32
1.1.1 標簽 32
1.1.2 字體類型 34
1.1.3 字體大小 34
1.1.4 字體風格 36
1.1.5 字體粗細 36
1.1.6 字體屬性 37
1.2 文本樣式 38
1.2.1 文本顏色 38
1.2.2 水平對齊方式 39
1.2.3 首行文本的縮進和行高 39
1.2.4 文本裝飾 40
1.3 CSS設置超鏈接樣式 42
1.3.1 超鏈接偽類 42
1.3.2 CSS設置鼠標形狀 44
2 背景樣式 45
2.1 認識
2.2 背景屬性 46
2.2.1 背景顏色 46
2.2.2 背景圖像 48
2.2.3 背景屬性簡寫 50
3 列表樣式 51
3.1 認識列表 51
3.2 列表的使用 52
3.2.1 無序列表 52
3.2.2 有序列表 54
3.2.3 定義列表 56
3.3 列表的樣式 58
3.3.1 list-style-type 58
3.3.2 list-style-image 59
3.3.3 list-style-position 59
3.3.4 list-style 59
本章總結 61
本章作業 61
第3章 使用CSS美化表單 63
1 表格 64
1.1 表格基本結構 64
1.2 表格基本語法 65
1.3 表格的跨行跨列 66
1.3.1 表格的跨列 66
1.3.2 表格的跨行 67
1.3.3 表格的跨行跨列 68
2 表單 70
2.1 表單基本結構 71
2.2 表單元素 72
2.2.1 文本框 73
2.2.2 密碼框 74
2.2.3 單選按鈕 75
2.2.4 復選框 75
2.2.5 列表框 76
2.2.6 按鈕 78
2.2.7 多行文本域 79
2.2.8 文件域 80
2.3 表單的高級應用 82
2.3.1 設置表單的隱藏域 82
2.3.2 表單的只讀與禁用設置 83
2.4 表單語義化 84
2.4.1 關于語義化 84
2.4.2 語義化的表單 85
2.4.3 表單元素的標注 86
3 CSS高級選擇器 87
3.1 CSS復合選擇器 87
3.1.1 后代選擇器 88
3.1.2 交集選擇器 89
3.1.3 并集選擇器 90
3.2 CSS繼承特性 91
3.2.1 繼承關系 91
3.2.2 繼承的應用 93
本章總結 95
本章作業 95
第4章 盒子模型 97
1 盒子模型 98
1.1 什么是盒子模型 98
1.2 邊框 100
1.2.1 border-color 100
1.2.2 border-width 101
1.2.3 border-style 102
1.2.4 border簡寫屬性 102
1.3 外邊距 105
1.4 內邊距 107
1.5 盒子模型的尺寸 108
2 標準文檔流 110
2.1 標準文檔流的組成 110
2.1.1 塊級元素 110
2.1.2 內聯元素 111
2.2 display屬性 111
本章總結 115
本章作業 115
第5章 浮動 117
1 網頁布局 118
2 浮動 119
2.1 網頁中浮動的應用 120
2.2 float屬性 121
3 清除浮動 126
3.1 清除浮動影響 127
3.1.1 清除左側浮動 127
3.1.2 清除右側浮動 128
3.1.3 清除兩側浮動 129
3.2 擴展盒子高度 129
4 溢出處理 131
4.1 overflow屬性 131
4.2 overflow屬性的妙用 133
本章總結 135
本章作業 135
第6章 定位 138
1 定位在網頁中的應用 139
2 position屬性 140
2.1 static 140
2.2 relative 142
2.3 absolute 145
3 z-index屬性的應用 152
本章總結 156
本章作業 156
第7章 項目案例：制作1號店首頁 159
1 項目說明 160
1.1 需求概述 160
1.2 技能要點 161
2 前置技能分析 161
2.1 網站開發流程 161
2.2 網站的文件結構 161
2.3 網頁布局分析 162
3 項目實現 162
3.1 網頁整體布局 162
3.2 制作網站導航 164
3.3 制作焦點輪播圖效果 165
3.4 制作焦點圖右側內容 166
3.5 制作食品飲料模塊 167
3.6 制作個護廚衛模塊 168
3.7 制作網站版權 168
