![]() ![]() |
網(wǎng)頁設(shè)計與制作項目教程(HTML+CSS+JavaScript)(第2版) ![]()
本書從初學(xué)者的角度出發(fā),以實用的案例、通俗易懂的語言詳細(xì)介紹了使用HTML、CSS及JavaScript進行網(wǎng)頁制作的一般技巧。
本書分為8個項目,結(jié)合HTML、CSS和JavaScript的基礎(chǔ)知識及應(yīng)用,提供了7種不同類型的網(wǎng)頁設(shè)計案例。其中,項目1介紹了HTML、CSS和JavaScript的基礎(chǔ)知識,包括Web基本概念、HTML簡介、CSS簡介、JavaScript簡介、Dreamweaver工具的使用等;項目2~項目8為7個完整的網(wǎng)頁設(shè)計項目,涉及“博客”“網(wǎng)店”“家居”“教育”“婚戀”“視頻”“美食”多個方向,有助于讀者掌握不同網(wǎng)站的設(shè)計風(fēng)格和制作技巧。本書以項目為導(dǎo)向,通過項目將相關(guān)知識點串聯(lián)起來,學(xué)完項目內(nèi)容就能基本掌握如何制作一個完整的項目頁面,從而極大地激發(fā)讀者的學(xué)習(xí)興趣。
本書附有源代碼、習(xí)題、教學(xué)課件等資源,并且為了幫助初學(xué)者更好地學(xué)習(xí),編者還提供了在線答疑,希望可以幫助更多的讀者。
本書既可作為高等院校本、�?葡嚓P(guān)專業(yè)的網(wǎng)頁設(shè)計與制作課程的教材,也可作為網(wǎng)頁平面設(shè)計的培訓(xùn)教材,還可作為網(wǎng)頁制作、美工設(shè)計、網(wǎng)站開發(fā)、網(wǎng)頁編程等行業(yè)從業(yè)人員的參考讀物。
1.國家“十三五”規(guī)劃教材;
2.黑馬程序員系列教材改版;
3.本書配套豐富的教學(xué)資源,包括PPT、教學(xué)視頻、教學(xué)設(shè)計、教學(xué)大綱、源代碼等。
此次改版,在原書的基礎(chǔ)上更新了部分案例,增加了HTML5和CSS3新屬性的講解和應(yīng)用,增加了網(wǎng)頁視聽技術(shù)的應(yīng)用,主要包括音頻、視頻的嵌入和動畫效果。
黑馬程序員,傳智播客成立于2006年,它是由中國Java培訓(xùn)先行者張孝祥老師發(fā)起,聯(lián)合全球最大的中文IT社區(qū)CSDN、中關(guān)村軟件園共同創(chuàng)辦的一家專業(yè)教育機構(gòu)。辦學(xué)至今,我們一直堅守著“為千萬人少走彎路而著書,為中華軟件之崛起而講課”的辦學(xué)理念,堅持培養(yǎng)優(yōu)秀軟件應(yīng)用工程師的宏偉目標(biāo),在累計培養(yǎng)的十萬余名學(xué)員中,其中90%的學(xué)員均已在北、上、廣等一線城市高薪就業(yè),特別是“黑馬程序員”的平均就業(yè)薪資已達到8K以上。為了迎合軟件市場的需求,我們陸續(xù)開設(shè)了Java、網(wǎng)頁平面、PHP、.Net、iOS、C/C++、Android等9個專業(yè)方向的課程,并且未來將逐漸開設(shè)其他專業(yè)方向的課程。隨著傳智播客的日益壯大,除了北京總部,我們在上海、廣州、武漢、成都、深圳等地也創(chuàng)立了直營分支機構(gòu),傳智播客儼然已成為了國內(nèi)最具專業(yè)口碑的IT教育機構(gòu)。
項目1 網(wǎng)頁制作基礎(chǔ)知識 1
【任務(wù)1-1】認(rèn)識網(wǎng)頁 1
需求分析 1
知識儲備 1
1. 網(wǎng)頁的構(gòu)成 1
2. 網(wǎng)頁的相關(guān)名詞 2
3. Web標(biāo)準(zhǔn) 3
【任務(wù)1-2】網(wǎng)頁制作入門技術(shù) 5
需求分析 5
知識儲備 5
1. HTML簡介 5
2. CSS簡介 6
3. JavaScript簡介 6
4. 常見瀏覽器介紹 7
【任務(wù)1-3】Dreamweaver的使用 9
需求分析 9
知識儲備 9
1. Dreamweaver界面介紹 9
2. Dreamweaver的初始化設(shè)置 13
3. Dreamweaver文檔的基本操作 14
4. 創(chuàng)建網(wǎng)頁 16
【項目總結(jié)】 17
【課后練習(xí)】 17
項目2 “博客”頁面制作 19
【項目描述】 19
【任務(wù)2-1】認(rèn)識HTML 20
需求分析 20
知識儲備 20
1. HTML文檔基本格式 20
2. HTML標(biāo)簽 21
3. HTML標(biāo)簽的屬性 22
4. HTML標(biāo)簽的關(guān)系 22
5. HTML文檔頭部相關(guān)標(biāo)簽 23
【任務(wù)2-2】HTML文本控制標(biāo)簽 24
需求分析 24
知識儲備 24
1. 頁面格式化標(biāo)簽 24
2. 文本樣式標(biāo)簽 26
3. 文本格式化標(biāo)簽 27
4. 特殊字符 28
知識拓展 29
標(biāo)簽 29
【任務(wù)2-3】HTML圖像應(yīng)用 30
需求分析 30
知識儲備 30
1. 常用圖像格式 30
2. 圖像標(biāo)簽 31
3. 相對路徑和絕對路徑 33
知識拓展 34
切圖 34
【任務(wù)2-4】頁面建設(shè)準(zhǔn)備工作 35
網(wǎng)站素材整理 35
1. 建立網(wǎng)站站點 35
2. “博客”頁面切圖 36
頁面結(jié)構(gòu)分析 36
頁面布局 37
【任務(wù)2-5】制作“頭部”模塊 38
效果分析 38
模塊制作 38
【任務(wù)2-6】制作“博主簡介”模塊 39
效果分析 39
模塊制作 39
【任務(wù)2-7】制作“旅行隨筆”模塊 40
效果分析 40
模塊制作 41
【任務(wù)2-8】制作“驢友評論”模塊 42
效果分析 42
模塊制作 43
【任務(wù)2-9】制作“頁腳”模塊 44
效果分析 44
模塊制作 44
【項目總結(jié)】 45
【課后練習(xí)】 45
項目3 “網(wǎng)上花店”專題頁制作 47
【項目描述】 47
【任務(wù)3-1】CSS核心基礎(chǔ) 48
需求分析 48
知識儲備 48
1. 結(jié)構(gòu)與表現(xiàn)分離 48
2. CSS樣式規(guī)則 49
3. CSS樣式表的引入 49
4. CSS基礎(chǔ)選擇器 53
【任務(wù)3-2】CSS文本樣式屬性 55
需求分析 55
知識儲備 55
1. CSS字體樣式屬性 55
2. CSS文本外觀屬性 58
知識拓展 62
使用CSS定義背景顏色 62
【任務(wù)3-3】CSS高級特性 63
需求分析 63
知識儲備 63
1. CSS復(fù)合選擇器 63
2. CSS層疊性與繼承性 65
3. CSS優(yōu)先級 66
【任務(wù)3-4】頁面建設(shè)準(zhǔn)備工作 68
網(wǎng)站素材整理 68
1. 建立網(wǎng)站站點 68
2. “網(wǎng)上花店”專題頁切圖 68
頁面結(jié)構(gòu)分析 69
1. HTML結(jié)構(gòu)分析 69
2. CSS樣式分析 70
定義基礎(chǔ)樣式 70
1. 頁面布局 70
2. 公共樣式設(shè)置 70
【任務(wù)3-5】制作“標(biāo)題”模塊 70
效果分析 70
1. 結(jié)構(gòu)分析 70
2. 樣式分析 71
模塊制作 71
1. 搭建結(jié)構(gòu) 71
2. 控制樣式 71
【任務(wù)3-6】制作“分類”模塊 71
效果分析 71
1. 結(jié)構(gòu)分析 71
2. 樣式分析 72
模塊制作 72
1. 搭建結(jié)構(gòu) 72
2. 控制樣式 72
【任務(wù)3-7】制作“熱賣”模塊 73
效果分析 73
1. 結(jié)構(gòu)分析 73
2. 樣式分析 74
模塊制作 74
1. 搭建結(jié)構(gòu) 74
2. 控制樣式 74
【任務(wù)3-8】制作“頁腳”模塊 75
效果分析 75
1. 結(jié)構(gòu)分析 75
2. 樣式分析 75
模塊制作 75
1. 搭建結(jié)構(gòu) 75
2. 控制樣式 75
【項目總結(jié)】 76
【課后練習(xí)】 76
項目4 “愛家居”企業(yè)網(wǎng)站首頁制作 78
【項目描述】 78
【任務(wù)4-1】認(rèn)識盒子模型 79
需求分析 79
知識儲備 79
【任務(wù)4-2】盒子模型基礎(chǔ)屬性 80
需求分析 80
知識儲備 80
1. 邊框?qū)傩浴?0
2. 內(nèi)邊距屬性 85
3. 外邊距屬性 86
4. 背景屬性 88
5. 寬度屬性和高度屬性 91
【任務(wù)4-3】盒子模型新增屬性 92
需求分析 92
知識儲備 92
1. 顏色透明 92
2. 圓角 93
3. 陰影 95
4. 漸變 96
【任務(wù)4-4】元素的類型與轉(zhuǎn)換 100
需求分析 100
知識儲備 100
1. 元素的類型 100
2. 標(biāo)簽 101
3. 元素類型的轉(zhuǎn)換 102
知識拓展 104
塊元素垂直外邊距的合并 104
【任務(wù)4-5】元素的浮動 106
需求分析 106
知識儲備 106
1. 元素的浮動屬性 106
2. 清除浮動 108
3. overflow屬性 112
【任務(wù)4-6】元素的定位 113
需求分析 113
知識儲備 113
1. 元素的定位屬性 113
2. 靜態(tài)定位 114
3. 相對定位 114
4. 絕對定位 115
5. 固定定位 116
6. z-index屬性 116
【任務(wù)4-7】頁面建設(shè)準(zhǔn)備工作 117
網(wǎng)站素材的整理 117
1. 建立網(wǎng)站站點 117
2. “愛家居”企業(yè)網(wǎng)站首頁切圖 117
頁面結(jié)構(gòu)分析 117
1. HTML結(jié)構(gòu)分析 117
2. CSS樣式分析 118
定義基礎(chǔ)樣式 118
1. 頁面布局 118
2. 定義基礎(chǔ)樣式 119
【任務(wù)4-8】制作“導(dǎo)航及banner” 模塊 119 效果分析 119 1. 結(jié)構(gòu)分析 119 2. 樣式分析 119 模塊制作 120 1. 搭建結(jié)構(gòu) 120 2. 控制樣式 120 【任務(wù)4-9】制作“熱門推薦”模塊 121 效果分析 121 1. 結(jié)構(gòu)分析 121 2. 樣式分析 121 模塊制作 122 1. 搭建結(jié)構(gòu) 122 2. 控制樣式 122 【任務(wù)4-10】制作“夏日生活”模塊 123 效果分析 123 1. 結(jié)構(gòu)分析 123 2. 樣式分析 124 模塊制作 124 1. 搭建結(jié)構(gòu) 124 2. 控制樣式 124 【任務(wù)4-11】制作“版權(quán)信息”模塊和 “懸浮框”模塊 125 效果分析 125 1. 結(jié)構(gòu)分析 125 2. 樣式分析 125 模塊制作 125 1. 搭建結(jié)構(gòu) 125 2. 控制樣式 125 【項目總結(jié)】 126 【課后練習(xí)】 126 項目5 “優(yōu)課教育”網(wǎng)站首頁制作 128 【項目描述】 128 【任務(wù)5-1】列表標(biāo)簽 129 需求分析 129 知識儲備 129 1. 無序列表 129 2. 有序列表 130 3. 定義列表 131 4. 列表的嵌套應(yīng)用 132 【任務(wù)5-2】使用CSS控制列表 項目符號 132 需求分析 132 知識儲備 132 1. list-style復(fù)合屬性 132 2. 通過設(shè)置背景圖像的方式定義列表 項目符號 133 【任務(wù)5-3】超鏈接標(biāo)簽 133 需求分析 133 知識儲備 133 1. 創(chuàng)建超鏈接 133 2. 創(chuàng)建錨點鏈接 135 3. 通過鏈接偽類控制超鏈接 135 【任務(wù)5-4】頁面建設(shè)準(zhǔn)備工作 137 網(wǎng)站素材整理 137 1. 建立站點 137 2. 切圖 137 頁面結(jié)構(gòu)分析 138 1. HTML結(jié)構(gòu)分析 138 2. CSS樣式分析 138 定義基礎(chǔ)樣式 139 1. 頁面布局 139 2. 定義基礎(chǔ)樣式 139 【任務(wù)5-5】制作“導(dǎo)航”模塊 139 效果分析 139 1. 結(jié)構(gòu)分析 139 2. 樣式分析 140 模塊制作 140 1. 搭建結(jié)構(gòu) 140 2. 控制樣式 140 【任務(wù)5-6】制作“banner”模塊和 “課程分類”模塊 141 效果分析 141 1. 結(jié)構(gòu)分析 141 2. 樣式分析 141 模塊制作 141 1. 搭建結(jié)構(gòu) 141 2. 控制樣式 142 【任務(wù)5-7】制作“精品展示”模塊 143 效果分析 143 1. 結(jié)構(gòu)分析 143 2. 樣式分析 144 模塊制作 144 1. 搭建結(jié)構(gòu) 144 2. 控制樣式 144 【任務(wù)5-8】制作“版權(quán)信息”模塊 146 效果分析 146 1. 結(jié)構(gòu)分析 146 2. 樣式分析 146 模塊制作 146 1. 搭建結(jié)構(gòu) 146 2. 控制樣式 146 【項目總結(jié)】 147 【課后練習(xí)】 147 項目6 “千年之戀”注冊頁面制作 149 【項目描述】 149 【任務(wù)6-1】認(rèn)識表格相關(guān)標(biāo)簽 150 需求分析 150 知識儲備 150 1. 創(chuàng)建表格 150 2. 標(biāo)簽的屬性 151 3. 標(biāo)簽的屬性 154 4.
Copyright 1993-2025 www.wsgph.com Inc.All Rights Reserved
技術(shù)支持:山東中教產(chǎn)業(yè)發(fā)展股份有限公司 客服電話:400-0531-123 ![]() | |||