123,123

內(nèi)容簡(jiǎn)介

　　本書(shū)系統(tǒng)全面地介紹了網(wǎng)頁(yè)制作和前端開(kāi)發(fā)技術(shù)的基本理論和實(shí)際應(yīng)用。全書(shū)共10章，邏輯上可分為三大部分。前5章為第1部分，主要介紹了網(wǎng)頁(yè)制作的基本理論——HTML 和CSS，同時(shí)介紹了Photoshop在網(wǎng)頁(yè)制作過(guò)程中的應(yīng)用；第6章和第7章為第2部分，主要介紹了CSS技術(shù)的高級(jí)應(yīng)用技巧和JavaScript編程，并對(duì)各種常見(jiàn)的前端開(kāi)發(fā)技術(shù)進(jìn)行了系統(tǒng)梳理；最后3章為第3部分，其中，第8章從心理學(xué)和設(shè)計(jì)理論視角介紹了如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，第9章介紹了如何使用Dreamweaver 進(jìn)行網(wǎng)站開(kāi)發(fā)，第10章則從項(xiàng)目實(shí)踐的角度論述了如何設(shè)計(jì)和開(kāi)發(fā)一個(gè)網(wǎng)站，使讀者能夠在具體應(yīng)用中鞏固所學(xué)知識(shí)。本書(shū)以實(shí)用為基本出發(fā)點(diǎn)，不僅包括各種網(wǎng)頁(yè)制作和前端開(kāi)發(fā)技術(shù)的基礎(chǔ)理論，還強(qiáng)調(diào)了它們的具體應(yīng)用，使讀者既能打下堅(jiān)實(shí)的理論基礎(chǔ)，又能掌握實(shí)際的操作技能。本書(shū)絕大部分內(nèi)容經(jīng)過(guò)了長(zhǎng)期的教學(xué)檢驗(yàn)，證明是重點(diǎn)突出而詳略得當(dāng)?shù)?。本?shū)可作為各類(lèi)本科院校、高等職業(yè)學(xué)校、成人高校和培訓(xùn)班講授“網(wǎng)頁(yè)制作”和“前端開(kāi)發(fā)”等課程的教材或參考書(shū)，也適合廣大愛(ài)好者或相關(guān)從業(yè)人員自學(xué)之用。

作者簡(jiǎn)介

　　趙豐年，北京理工大學(xué)“我愛(ài)我?guī)煛痹u(píng)選十佳教師，軟件學(xué)院“我最喜愛(ài)的教師”，北京理工大學(xué)“T-more優(yōu)秀教師獎(jiǎng)”一等獎(jiǎng)，負(fù)責(zé)***精品課程2門(mén)，***教優(yōu)秀學(xué)團(tuán)隊(duì)成員，主編北京市精品教材3部，***規(guī)劃教材4部，研究方向：數(shù)字媒體技術(shù)、教育技術(shù)、游戲化（gamification）。成果：發(fā)表學(xué)術(shù)論文和教改論文多篇，獲得***和省部級(jí)教學(xué)獎(jiǎng)多項(xiàng)。

圖書(shū)目錄

第 1章 HTML5 基礎(chǔ)．．．．．．．．．．．．．．．．．．． 1
1．1　什么是HTML ．．．．．．．．．．．．．．．．．．．．．．．1
1．1．1　網(wǎng)頁(yè)的基本概念．．．．．．．．．．．．．．．．．．．．．．．．　1
1．1．2　HTML 的工作原理．．．．．．．．．．．．．．．．．．．．　3
1．1．3　創(chuàng)建和測(cè)試網(wǎng)頁(yè)．．．．．．．．．．．．．．．．．．．．．．．．　5
1．1．4　網(wǎng)頁(yè)編輯工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．　6
1．2　創(chuàng)建網(wǎng)頁(yè)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．7
1．2．1　標(biāo)記符基礎(chǔ)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　7
1．2．2　網(wǎng)頁(yè)的基本結(jié)構(gòu)．．．．．．．．．．．．．．．．．．．．．．．．　8
1．2．3　在網(wǎng)頁(yè)中添加內(nèi)容．．．．．．．．．．．．．．．．．．．　12
1．3　綜合實(shí)例：人物介紹網(wǎng)頁(yè)．．．．．．．．13
練習(xí)題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．15
第　2章文本格式與超鏈接．．．．．．．．．．．．　16
2．1　設(shè)置文本格式．．．．．．．．．．．．．．．．．．．．．．16
2．1．1　段落格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　16
2．1．2　字體格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　19
2．1．3　列表格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　20
2．2　創(chuàng)建超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．22
2．2．1　URL 概述．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　22
2．2．2　頁(yè)面鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　23
2．2．3　錨點(diǎn)鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　25
2．3　綜合實(shí)例：唐詩(shī)宋詞網(wǎng)站．．．．．．．．27
2．3．1　網(wǎng)站規(guī)劃．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　28
2．3．2　網(wǎng)頁(yè)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　29
2．3．3　網(wǎng)頁(yè)制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　30
練習(xí)題?。?3
第3章　CSS3 基礎(chǔ)．．．．．．．．．．．．．．．．．．．．　34
3．1　CSS 入門(mén)．．．．．．．．．．．．．．．．．．．．．．．．．．34
3．1．1　什么是CSS ．．．．．．．．．．．．．．．．．．．．．．．．．．．．34
3．1．2　CSS 樣式定義．．．．．．．．．．．．．．．．．．．．．．．．．35
3．1．3　CSS 的屬性單位．．．．．．．．．．．．．．．．．．．．．36
3．2　在網(wǎng)頁(yè)中使用CSS ．．．．．．．．．．．．．．37
3．2．1　使用站點(diǎn)樣式．．．．．．．．．．．．．．．．．．．．．．．．．．37
3．2．2　使用網(wǎng)頁(yè)樣式．．．．．．．．．．．．．．．．．．．．．．．．．．39
3．2．3　使用行內(nèi)樣式．．．．．．．．．．．．．．．．．．．．．．．．．．39
3．3　CSS3 基本選擇器．．．．．．．．．．．．．．．40
3．3．1　標(biāo)記符選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．40
3．3．2　類(lèi)選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41
3．3．3　ID 選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41
3．3．4　偽類(lèi)選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．42
3．3．5　群組選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．43
3．4　CSS3 基礎(chǔ)屬性．．．．．．．．．．．．．．．．．．43
3．4．1　顏色與背景屬性．．．．．．．．．．．．．．．．．．．．．．．43
3．4．2　字體屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．45
3．4．3　文本屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
3．5　綜合實(shí)例：電影欣賞網(wǎng)站．．．．．．．．48
3．5．1　網(wǎng)站規(guī)劃與設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．49
3．5．2　網(wǎng)頁(yè)制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50
練習(xí)題?。?3
第4章　圖像與多媒體．．．．．．．．．．．．．．．．．．　54
4．1　網(wǎng)頁(yè)圖像基礎(chǔ)．．．．．．．．．．．．．．．．．．．．．．54
4．1．1　位圖與矢量圖．．．．．．．．．．．．．．．．．．．．．．．．．．54
4．1．2　網(wǎng)頁(yè)圖像格式．．．．．．．．．．．．．．．．．．．．．．．．．．55
4．1．3　使用網(wǎng)頁(yè)圖像的要點(diǎn)．．．．．．．．．．．．．．．．56
4．2　圖像處理基本操作．．．．．．．．．．．．．．．．57
4．2．1　Photoshop 的界面．．．．．．．．．．．．．．．．．．57
4．2．2　修改圖像的大小．．．．．．．．．．．．．．．．．．．．．．．58
4．2．3　調(diào)整圖像的顏色．．．．．．．．．．．．．．．．．．．．．．．58
4．2．4　修補(bǔ)圖像與摳像．．．．．．．．．．．．．．．．．．．．．．　59
4．2．5　用適當(dāng)?shù)母袷奖４鎴D像．．．．．．．．．．．．．　61
4．3　圖像標(biāo)記符img ．．．．．．．．．．．．．．．．．．．62
4．3．1　插入圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　62
4．3．2　設(shè)置圖像屬性．．．．．．．．．．．．．．．．．．．．．．．．．．　63
4．4　使用多媒體對(duì)象．．．．．．．．．．．．．．．．．．．67
4．4．1　多媒體對(duì)象概述．．．．．．．．．．．．．．．．．．．．．．　67
4．4．2　插入多媒體對(duì)象．．．．．．．．．．．．．．．．．．．．．．　67
練習(xí)題?。?0
第5章　表格與表單．．．．．．．．．．．．．．．．．．．．．　72
5．1　創(chuàng)建表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．72
5．1．1　表格的基本構(gòu)成．．．．．．．．．．．．．．．．．．．．．．　72
5．1．2　合并單元格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　74
5．1．3　構(gòu)造表格的步驟．．．．．．．．．．．．．．．．．．．．．．　74
5．2　表格的屬性設(shè)置．．．．．．．．．．．．．．．．．．．75
5．2．1　邊框與分隔線(xiàn)．．．．．．．．．．．．．．．．．．．．．．．．．．　75
5．2．2　控制單元格空白．．．．．．．．．．．．．．．．．．．．．．　76
5．2．3　表格的對(duì)齊．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　78
5．3　創(chuàng)建表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．80
5．3．1　什么是表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　80
5．3．2　表單控件的類(lèi)型．．．．．．．．．．．．．．．．．．．．．．　82
5．3．3　form 標(biāo)記符．．．．．．．．．．．．．．．．．．．．．．．．．．．．　82
5．4　創(chuàng)建表單控件．．．．．．．．．．．．．．．．．．．．．．83
5．4．1　文本框與密碼框．．．．．．．．．．．．．．．．．．．．．．　83
5．4．2　復(fù)選框與單選框．．．．．．．．．．．．．．．．．．．．．．　84
5．4．3　按鈕．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　86
5．4．4　多行文本框．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　87
5．4．5　選項(xiàng)菜單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　88
5．5　綜合實(shí)例：表格與表單．．．．．．．．．．．89
5．5．1　復(fù)雜表格頁(yè)面．．．．．．．．．．．．．．．．．．．．．．．．．．　89
5．5．2　登錄注冊(cè)頁(yè)面．．．．．．．．．．．．．．．．．．．．．．．．．．　90
練習(xí)題?。?3
第6章　CSS3 進(jìn)階．．．．．．．．．．．．．．．．．．．．　95
6．1　CSS3 高級(jí)選擇器．．．．．．．．．．．．．．．．95
6．1．1　后代選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．95
6．1．2　子元素選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．97
6．1．3　相鄰兄弟選擇器．．．．．．．．．．．．．．．．．．．．．．．97
6．1．4　屬性選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．98
6．2　CSS3 布局．．．．．．．．．．．．．．．．．．．．．．．．99
6．2．1　CSS 盒模型．．．．．．．．．．．．．．．．．．．．．．．．．．．．99
6．2．2　CSS 定位概述．．．．．．．．．．．．．．．．．．．．．．．103
6．2．3　浮動(dòng)定位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．105
6．2．4　相對(duì)定位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107
6．2．5　絕對(duì)定位與固定定位．．．．．．．．．．．．．．．108
6．3　CSS3 高級(jí)屬性．．．．．．．．．．．．．．．．　111
6．3．1　分類(lèi)屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．111
6．3．2　列表屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．113
6．3．3　特效屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．115
6．4　CSS3 樣式的優(yōu)先級(jí)．．．．．．．．．．．　118
6．4．1　一般性規(guī)則．．．．．．．．．．．．．．．．．．．．．．．．．．．．118
6．4．2　樣式優(yōu)先級(jí)的計(jì)算．．．．．．．．．．．．．．．．．．119
6．5　綜合實(shí)例：中華美食網(wǎng)站．．．．．．　122
6．5．1　網(wǎng)站規(guī)劃與設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．123
6．5．2　網(wǎng)頁(yè)制作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．124
練習(xí)題?。?30
第7章　JavaScript 與前端開(kāi)發(fā)技術(shù)．．．．．．．．．．131
7．1　使用客戶(hù)端腳本．．．．．．．．．．．．．．．．．　131
7．1．1　使用script 標(biāo)記符．．．．．．．．．．．．．．．．．131
7．1．2　直接添加腳本．．．．．．．．．．．．．．．．．．．．．．．．132
7．1．3　鏈接腳本文件．．．．．．．．．．．．．．．．．．．．．．．．132
7．2　JavaScript 編程．．．．．．．．．．．．．．．　133
7．2．1　JavaScript 語(yǔ)言基礎(chǔ)．．．．．．．．．．．．．133
7．2．2　使用JavaScript 對(duì)象．．．．．．．．．．．．．139
7．2．3　使用瀏覽器對(duì)象．．．．．．．．．．．．．．．．．．．．．144
7．2．4　使用HTML DOM 對(duì)象．．．．．．．．．．147
7．3　前端開(kāi)發(fā)技術(shù)．．．．．．．．．．．．．．．．．．．．　159
7．3．1　使用jQuery ．．．．．．．．．．．．．．．．．．．．．．．．．．159
7．3．2　使用Bootstrap．．．．．．．．．．．．．．．．．．．．．　164
7．3．3　使用Vue．js ．．．．．．．．．．．．．．．．．．．．．．．．．．　172
7．3．4　使用AngularJS ．．．．．．．．．．．．．．．．．．．　176
7．3．5　使用React．．．．．．．．．．．．．．．．．．．．．．．．．．．　179
練習(xí)題?。?80
第8章　網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)．．．．．．．．．．．．．．．．　182
8．1　設(shè)計(jì)與認(rèn)知．．．．．．．．．．．．．．．．．．．．．．．　182
8．1．1　格式塔理論概述．．．．．．．．．．．．．．．．．．．．　182
8．1．2　認(rèn)知時(shí)的組織原則．．．．．．．．．．．．．．．．．　182
8．2　設(shè)計(jì)原則．．．．．．．．．．．．．．．．．．．．．．．．．．　185
8．2．1　緊湊原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　185
8．2．2　對(duì)齊原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　187
8．2．3　重復(fù)原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　189
8．2．4　對(duì)比原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　190
8．3　設(shè)計(jì)適于掃描的網(wǎng)頁(yè)．．．．．．．．．．．．　191
8．3．1　建立清楚的視覺(jué)層次．．．．．．．．．．．．．．　192
8．3．2　使用習(xí)慣用法．．．．．．．．．．．．．．．．．．．．．．．．　193
8．3．3　劃分明確的頁(yè)面區(qū)域．．．．．．．．．．．．．．　194
8．3．4　減輕視覺(jué)污染．．．．．．．．．．．．．．．．．．．．．．．．　194
8．4　設(shè)計(jì)導(dǎo)航．．．．．．．．．．．．．．．．．．．．．．．．．．　195
8．4．1　網(wǎng)頁(yè)導(dǎo)航慣例．．．．．．．．．．．．．．．．．．．．．．．．　195
8．4．2　全局導(dǎo)航．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　196
8．4．3　站點(diǎn)ID．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　197
8．4．4　導(dǎo)航條．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198
8．4．5　實(shí)用工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198
8．4．6　返回主頁(yè)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198
8．4．7　搜索功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　199
8．4．8　頁(yè)面名稱(chēng)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　199
8．4．9　當(dāng)前位置與面包屑．．．．．．．．．．．．．．．．．　200
8．4．10　網(wǎng)站導(dǎo)航測(cè)試．．．．．．．．．．．．．．．．．．．．．．　202
8．5　設(shè)計(jì)版式．．．．．．．．．．．．．．．．．．．．．．．．．．202
8．5．1　頁(yè)面比例．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　202
8．5．2　網(wǎng)頁(yè)的分欄．．．．．．．．．．．．．．．．．．．．．．．．．．．　203
8．5．3　版面率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　205
8．5．4　圖版面積．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　206
8．5．5　跳躍率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　207
練習(xí)題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　208
第9章　用Dreamweaver制作網(wǎng)頁(yè)．．．．．．．．．．．．　210
9．1　Dreamweaver 的界面．．．．．．．　210
9．2　使用本地站點(diǎn)．．．．．．．．．．．．．．．．．．．．　211
9．2．1　創(chuàng)建本地站點(diǎn)．．．．．．．．．．．．．．．．．．．．．．．．211
9．2．2　站點(diǎn)文件操作．．．．．．．．．．．．．．．．．．．．．．．．213
9．3　編輯網(wǎng)頁(yè)．．．．．．．．．．．．．．．．．．．．．．．．．．　215
9．3．1　制作網(wǎng)頁(yè)的一般過(guò)程．．．．．．．．．．．．．．215
9．3．2　使用文本．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．217
9．3．3　使用超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．218
9．3．4　使用圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．220
9．3．5　使用音頻與視頻．．．．．．．．．．．．．．．．．．．．．221
9．3．6　使用表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．222
9．3．7　使用表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．225
9．4　使用CSS 樣式．．．．．．．．．．．．．．．．．　227
9．4．1　創(chuàng)建CSS 樣式表．．．．．．．．．．．．．．．．．．227
9．4．2　定義樣式規(guī)則．．．．．．．．．．．．．．．．．．．．．．．．229
9．4．3　應(yīng)用樣式規(guī)則．．．．．．．．．．．．．．．．．．．．．．．．230
9．4．4　使用CSS 設(shè)計(jì)頁(yè)面布局．．．．．．．．．230
9．5　高級(jí)功能．．．．．．．．．．．．．．．．．．．．．．．．．．　232
9．5．1　快速代碼編寫(xiě)．．．．．．．．．．．．．．．．．．．．．．．．232
9．5．2　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．237
9．5．3　使用Bootstrap ．．．．．．．．．．．．．．．．．．．．．243
9．5．4　使用jQuery ．．．．．．．．．．．．．．．．．．．．．．．．．．248
練習(xí)題?。?49
第　10章綜合項(xiàng)目實(shí)踐．．．．．．．．．．．．．．．．　251
10．1　網(wǎng)站開(kāi)發(fā)的項(xiàng)目管理．．．．．．．．．．　251
10．1．1　網(wǎng)站開(kāi)發(fā)流程．．．．．．．．．．．．．．．．．．．．．．251
10．1．2　網(wǎng)站開(kāi)發(fā)團(tuán)隊(duì)．．．．．．．．．．．．．．．．．．．．．．253
10．1．3　網(wǎng)站策劃書(shū)．．．．．．．．．．．．．．．．．．．．．．．．．．254
10．2　“游戲天地”網(wǎng)站規(guī)劃．．．．．．．．256
10．2．1　網(wǎng)站目標(biāo)．．．．．．．．．．．．．．．．．．．．．．．．．．．．　256
10．2．2　站點(diǎn)風(fēng)格與技術(shù)因素．．．．．．．．．．．．　256
10．2．3　信息架構(gòu)．．．．．．．．．．．．．．．．．．．．．．．．．．．．　257
10．3　“游戲天地”網(wǎng)站設(shè)計(jì)．．．．．．．257
10．3．1　導(dǎo)航設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．　258
10．3．2　頁(yè)面設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．　259
10．4　“游戲天地”網(wǎng)站實(shí)現(xiàn)．．．．．．．　261
10．4．1　實(shí)現(xiàn)流程．．．．．．．．．．．．．．．．．．．．．．．．．．．．　261
10．4．2　網(wǎng)頁(yè)基本結(jié)構(gòu)的實(shí)現(xiàn)．．．．．．．．．．．．　262
10．4．3　典型頁(yè)面的實(shí)現(xiàn)．．．．．．．．．．．．．．．．．．　265
練習(xí)題?。?76
附錄1　HTML 和CSS 顏色表．．．　278
附錄2　HTML5 快速參考．．．．．．．．．．　280
附錄3　CSS3 快速參考．．．．．．．．．．．．　283