“網(wǎng)頁設計與制作”是一門專業(yè)必修課,以培養(yǎng)學生的網(wǎng)頁設計與制作能力為出發(fā)點,本書參考《Web前端開發(fā)》職業(yè)技能證書標準,對接1+X Web前端開發(fā)等級考試和Web前端開發(fā)崗位需求,重構課程內容,以學習導航為點、學習環(huán)節(jié)為線、思政案例為面,介紹使用HTML、CSS及JavaScript進行網(wǎng)頁設計與制作的一般技巧。全書共十一個情境,從邏輯上可分為三大部分,前五個情境為第一篇基礎篇,主要介紹網(wǎng)頁中的主要組成元素—文本、圖片、表格和超鏈接等知識;情境六至情境九為第二篇進階篇,主要介紹模板、表單、CSS、JavaScript等知識;最后兩個情境為第三篇應用篇,主要從實際應用的角度出發(fā),綜合前面所學的知識進行綜合網(wǎng)站的實現(xiàn)、測試及發(fā)布。本書以實用為基本出發(fā)點,不僅包括各種網(wǎng)頁設計與制作的基礎理論,還強調了它們的具體應用,使讀者既能打下堅實的理論基礎,又能掌握實際的操作技能。本書內容經(jīng)過了長期的教學檢驗,證明是符合當下職業(yè)教育發(fā)展要求的。本書可作為高職院校、成人高校和培訓班的“網(wǎng)頁設計與制作”“Web前端開發(fā)”等課程的教材或參考書,也適合廣大網(wǎng)頁制作愛好者或相關從業(yè)人員使用。本書配套教學PPT、案例代碼、教學視頻等資源,可登錄華信教育資源網(wǎng)(http://www.hxedu.com.cn)注冊后免費下載,如有問題可與電子工業(yè)出版社聯(lián)系(E-mail:hxedu@phei.com.cn)。
劉磊,男,副教授,江西南昌人,現(xiàn)就職于江西工業(yè)職業(yè)技術學院,曾以主編、副主編身份分別出版教材《C語言程序設計》《計算機應用基礎》。
目 錄
第一篇 基礎篇
情境一 網(wǎng)頁設計與制作概述 3
【學習導航】 3
1 制作第一個網(wǎng)頁 3
2 職業(yè)技能與知識點要求 3
3 素質目標 3
【學習環(huán)節(jié)】 3
1 學習路線 3
2 知識小天地 4
2.1 認識網(wǎng)頁 4
2.2 網(wǎng)頁概念 4
2.3 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 5
2.4 Web服務器和客戶端 5
2.5 統(tǒng)一資源定位器(URL) 6
2.6 網(wǎng)頁制作的基本技術 6
2.7 常見網(wǎng)頁制作工具 7
【考核評價】 12
【同步技能考點測試】 12
【課后拓展】 12
情境二 制作純文本網(wǎng)頁 13
【學習導航】 13
1 制作革命根據(jù)地網(wǎng)頁 13
2 職業(yè)技能與知識點要求 13
3 素質目標 13
【學習環(huán)節(jié)】 13
1 學習路線 13
2 知識小天地 14
2.1 HTML發(fā)展歷程 14
2.2 HTML特點 14
2.3。!DOCTYPE>標記 15
2.4。糷tml></html>標記 15
2.5。糷ead></head>標記 15
2.6 <meta />標記—設置編碼格式 15
2.7。糾eta />標記—設置網(wǎng)頁描述 15
2.8。糾eta />標記—設置作者信息 16
2.9。糾eta />標記—設置頁面自動刷新和跳轉 16
2.10。紅itle></title>標記 16
2.11。糽ink />標記 16
2.12。約cript></script>標記 17
2.13。糱ody></body>標記 17
2.14。糷n></hn>標題標記 17
2.15。紁></p>段落標記 18
2.16。糷r />水平線標記 19
2.17 <br />換行標記 19
2.18。糵ont></font>字體標記 20
2.19 字體樣式標記 21
【考核評價】 24
【同步技能考點測試】 25
【課后拓展】 25
情境三 制作圖文混排網(wǎng)頁 26
【學習導航】 26
1 制作中國古代科技文化成就介紹網(wǎng)頁 26
2 職業(yè)技能與知識點要求 26
3 素質目標 26
【學習環(huán)節(jié)】 26
1 學習路線 26
2 知識小天地 27
2.1 無序列表 27
2.2 有序列表 28
2.3 自定義列表 29
2.4 常用圖片格式 30
2.5。糹mg>圖片標記 31
2.6 圖片路徑的表示方法 33
【考核評價】 39
【同步技能考點測試】 40
【課后拓展】 40
情境四 制作表格布局的網(wǎng)頁 41
【學習導航】 41
1 制作歷史人物故事網(wǎng)頁 41
2 職業(yè)技能與知識點要求 41
3 素質目標 41
【學習環(huán)節(jié)】 41
1 學習路線 41
2 知識小天地 42
2.1 表格標記 42
2.2 合并單元格 45
【考核評價】 51
【同步技能考點測試】 52
【課后拓展】 52
情境五 制作包含超鏈接的網(wǎng)頁 53
【學習導航】 53
1 綠水青山網(wǎng)站的設計與制作 53
2 職業(yè)技能與知識點要求 53
3 素質目標 53
【學習環(huán)節(jié)】 54
1 學習路線 54
2 學習小天地 54
2.1 超鏈接的定義 54
2.2 超鏈接的分類 54
2.3 文本超鏈接 54
2.4 圖像超鏈接 55
2.5 錨點超鏈接 57
【考核評價】 65
【同步技能考點測試】 65
【課后拓展】 65
第二篇 進階篇
情境六 使用模板制作網(wǎng)頁 69
【學習導航】 69
1 書籍網(wǎng)頁的設計與制作 69
2 職業(yè)技能與知識點要求 69
3 素質目標 69
【學習環(huán)節(jié)】 69
1 學習路線 69
2 知識小天地 70
2.1 新建模板 70
2.2 管理模板 72
【考核評價】 78
【同步技能考點測試】 78
【課后拓展】 78
情境七 制作注冊網(wǎng)頁 79
【學習導航】 79
1 個人信息注冊網(wǎng)頁制作 79
2 職業(yè)技能與知識點要求 79
3 素質目標 79
【學習環(huán)節(jié)】 79
1 學習路線 79
2 知識小天地 80
2.1 表單的作用 80
2.2 表單標記 80
【考核評價】 88
【同步技能考點測試】 89
【課后拓展】 89
情境八 使用CSS美化網(wǎng)頁 90
【學習導航】 90
1 中國航天成就網(wǎng)頁的設計與制作 90
2 職業(yè)技能與知識點要求 90
3 素質目標 90
【學習環(huán)節(jié)】 91
1 學習路線 91
2 知識小天地 91
2.1 什么是CSS 91
2.2 CSS的引入方式 91
2.3 CSS的兩個特性 92
2.4 CSS的基本語法 93
2.5 CSS選擇器的分類 93
2.6 CSS的屬性 98
【考核評價】 121
【同步技能考點測試】 121
【課后拓展】 121
情境九 使用JavaScript制作交互式注冊頁面 122
【學習導航】 122
1 交互式注冊頁面的設計與制作 122
2 職業(yè)技能與知識點要求 122
3 素質目標 122
【學習環(huán)節(jié)】 122
1 學習路線 122
2 知識小天地 123
2.1 JavaScript的組成 123
2.2 JavaScript的引用 124
2.3 JavaScript的語法 124
2.4 JavaScript的關鍵字 125
2.5 JavaScript的變量、數(shù)據(jù)類型和聲明 125
2.6 JavaScript的標識符 125
2.7 JavaScript的全局屬性 126
2.8 JavaScript的運算符 126
2.9 JavaScript的分支循環(huán) 128
2.10 JavaScript的數(shù)組 130
2.11 JavaScript的字符串 132
2.12 JavaScript的正則表達式 133
2.13 JavaScript的函數(shù) 136
2.14 BOM對象 137
2.15 DOM對象 140
2.16 JavaScript的事件 142
【考核評價】 149
【同步技能考點測試】 150
【課后拓展】 150
第三篇 應用篇
情境十 綜合網(wǎng)站規(guī)劃與設計 153
【學習導航】 153
1 學習網(wǎng)站的規(guī)劃與設計 153
2 職業(yè)技能與知識點要求 153
3 素質目標 153
【學習環(huán)節(jié)】 153
1 學習路線 153
2 知識小天地 154
2.1 網(wǎng)站設計與制作流程 154
2.2 定位網(wǎng)站主題 154
2.3 收集網(wǎng)站素材 155
2.4 設計網(wǎng)站導航菜單 155
2.5 設計網(wǎng)站LOGO 155
2.6 設計網(wǎng)站布局和風格 156
【考核評價】 161
【同步技能考點測試】 162
【課后拓展】 162
情境十一 綜合網(wǎng)站的實現(xiàn)、測試與發(fā)布 163
【學習導航】 163
1 學習網(wǎng)站的實現(xiàn)、測試與發(fā)布 163
2 職業(yè)技能與知識點要求 163
3 素質目標 163
【學習環(huán)節(jié)】 163
1 學習路線 163
2 知識小天地 164
2.1 文件命名規(guī)范 164
2.2 HTML規(guī)范 165
2.3 CSS代碼規(guī)范 165
2.4 JavaScript代碼規(guī)范 165
2.5 在網(wǎng)頁中插入視頻 165
2.6 網(wǎng)站的測試 166
2.7 網(wǎng)站的發(fā)布 167
【考核評價】 174
【同步技能考點測試】 174
【課后拓展】 175