本書通過一個完整的門戶網站項目全面系統地介紹了使用HTML+CSS+JavaScript技術來制作靜態網站的方法,內容包括網站開發流程和相關崗位職責與要求、HTML+CSS+JavaScript的基本語法、網頁客戶端開發方法與技巧、網站的部署和運營等。本書以“講清語法、學以致用”為指導思想,秉承“教、學、做合一”的原則,以“激發學者興趣”為著眼點,認真組織內容,精心設計案例。書中內容淺顯易懂并且實用,不僅僅將筆墨著力于語法講解上,還通過一個個鮮活、典型的小實例,以及完整的門戶網站來貫穿全書,達到學以致用的目的。同時又緊跟HTML5與CSS3的最新發展動態,適應性和實戰性較強。
第1章 網站部署與發布及設計分析 /1
1.1 網頁的基本概念 /1
1.2 網站的發布與測試 /5
1.2.1 在實驗室或局域網內部發布HTML頁面 /5
1.2.2 在Internet上發布網站 /7
1.3 軟件開發流程 /8
1.4 網站開發人員相關崗位職責和要求 /10
1.5 網站開發工具和項目實施 /11
1.6 項目實訓:免費域名的注冊與空間申請 /12
1.7 綜合練習 /12
第2章 HTML頁面與框架 /14
2.1 HTML頁面文件的整體結構 /15
2.2 HTML文件的標簽與語法 /15
2.3 HTML文檔編寫規范 /16
2.4 利用Dreamweaver進行HTML頁面設計 /16 第1章 網站部署與發布及設計分析 /1
1.1 網頁的基本概念 /1
1.2 網站的發布與測試 /5
1.2.1 在實驗室或局域網內部發布HTML頁面 /5
1.2.2 在Internet上發布網站 /7
1.3 軟件開發流程 /8
1.4 網站開發人員相關崗位職責和要求 /10
1.5 網站開發工具和項目實施 /11
1.6 項目實訓:免費域名的注冊與空間申請 /12
1.7 綜合練習 /12
第2章 HTML頁面與框架 /14
2.1 HTML頁面文件的整體結構 /15
2.2 HTML文件的標簽與語法 /15
2.3 HTML文檔編寫規范 /16
2.4 利用Dreamweaver進行HTML頁面設計 /16
2.4.1 Dreamweaver介紹 /16
2.4.2 Dreamweaver設計頁面過程 /19
2.5 項目實訓:獨立動手制作網頁 /21
2.6 認識框架與框架集網頁 /21
2.7 典型應用項目范例:利用框架制作設計院門戶網站網頁 /23
2.8 項目實訓:利用框架設計網頁 /27
2.9 綜合練習 /27
第3章 表格 /29
3.1 表格標簽 /29
3.1.1 利用<table>標簽布局網站頁面 /29
3.1.2 利用<tr>、<th>和<td>標簽設計統計數據表格 /30
3.2 格式化表格與單元格 /32
3.2.1 通過設置表格的寬度高度和邊框顏色來突出網頁主題 /32
3.2.2 設置滾動公告消息的背景顏色與背景圖片 /33
3.2.3 設置表格的邊框大小和顯示方式 /34
3.2.4 數據表格整體位置及單元格數據對齊方式的設置 /35
3.2.5 單元格背景顏色與背景圖片的制作 /36
3.3 表格標題制作 /37
3.4 合并單元格 /38
3.5 設置表格的表頭、主體與表尾 /39
3.6 表格列的設置 /41
3.7 典型應用項目范例:利用表格布局門戶網站頁面 /42
3.8 項目實訓:大學門戶網站首頁布局設計 /46
3.9 綜合練習 /47
第4章 表單 /48
4.1 認識表單 /48
4.1.1 表單簡介 /48
4.1.2 <form>標簽 /48
4.2 使用輸入標簽<input>插入數據控件 /50
4.3 列表標簽<select> /53
4.4 文字域標簽<textarea> /55
4.5 虛框修飾標簽<fieldset><legend> /56
4.6 典型應用項目范例:設計用戶注冊功能 /57
4.7 文件上傳與下載 /60
4.8 項目實訓:學生獨立完成留言簿功能 /63
4.9 綜合練習 /64
第5章 HTML網頁格式設置 /65
5.1 HTML網頁文字美化 /65
5.1.1 標題字格式 /65
5.1.2 文字修飾 /67
5.1.3 字體設置 /71
5.2 HTML網頁段落設置 /73
5.3 HTML網頁列表顯示 /75
5.3.1 有序列表 /76
5.3.2 無序列表 /77
5.4 HTML網頁其他標簽 /80
5.4.1 水平線標簽<HR> /80
5.4.2 滾動文字標簽<MARQUEE> /82
5.4.3 輸入空格等特殊符號 /84
5.4.4 插入或刪除線標簽 /84
5.4.5 設置提示文字 /84
5.4.6 設置跑馬燈效果 /85
5.5 典型應用項目范例:網站滾動消息公告設計 /86
5.6 綜合練習 /89
第6章 圖片與超鏈接 /90
6.1 網頁圖片的格式 /90
6.2 插入圖片 /91
6.3 設置影像地圖 /94
6.3.1 定義影像地圖熱點 /94
6.3.2 在HTML文件中建立影像地圖 /95
6.3.3 建立圖像影像關聯 /96
6.4 典型應用項目范例:影像地圖在門戶網站中的應用 /97
6.5 路徑的概念 /98
6.5.1 統一資源定位器URL /98
6.5.2 相對路徑和絕對路經 /99
6.6 超鏈接標簽<A> /100
6.7 超鏈接的應用 /101
6.7.1 圖片鏈接 /101
6.7.2 郵箱鏈接 /102
6.7.3 書簽鏈接 /103
6.7.4 其他相關標簽 /104
6.8 典型應用項目范例:超鏈接在項目中的應用 /105
6.9 綜合練習 /107
第7章 網頁上的特殊元素與特效 /109
7.1 加入音樂 /109
7.1.1 常見的音樂格式 /110
7.1.2 音樂相關的標簽 /111
7.2 加入視頻和Flash /113
7.3 元信息標簽<META>的應用 /115
7.4 嵌入Java Applet實現煙花特效網頁 /118
7.5 嵌入JavaScript實現跑馬燈特效網頁 /119
7.6 典型應用項目范例:嵌入Flash網頁動畫 /120
7.7 綜合練習 /121
第8章 JavaScript基礎語法 /123
8.1 JavaScript概述 /123
8.2 JavaScript的功能 /124
8.3 編寫第一個JavaScript程序 /125
8.4 在HTML頁面中引入JavaScript的方式 /126
8.4.1 內部引用JavaScript /126
8.4.2 外部引用JavaScript /127
8.4.3 內聯引用JavaScript /128
8.5 JavaScript基本語法 /129
8.5.1 JavaScript代碼編寫格式及規范 /129
8.5.2 JavaScript保留字 /130
8.5.3 基本的輸出方法 /130
8.6 JavaScript交互基本方法 /131
8.6.1 顯示警告對話框的alert( )方法 /131
8.6.2 顯示確認對話框的confirm( )方法 /132
8.6.3 顯示提示對話框的prompt( )方法 /133
8.7 基本數據類型、常量和變量 /135
8.7.1 基本數據類型 /135
8.7.2 常量 /135
8.7.3 變量 /136
8.7.4 變量的聲明及作用域 /136
8.8 表達式和運算符 /137
8.8.1 表達式 /137
8.8.2 算術運算符和賦值運算符 /138
8.8.3 比較運算符和邏輯運算符 /141
8.8.4 位運算符和條件運算符 /143
8.8.5 其他運算符 /144
8.8.6 運算符的優先級 /147
8.9 典型應用項目范例:在網頁上顯示系統日期時間 /148
8.10 項目實訓:根據半徑的值求圓的周長、面積和體積 /149
8.11 綜合練習 /149
第9章 JavaScript程序控制語句 /150
9.1 順序控制語句 /150
9.2 分支控制語句 /152
9.2.1 if語句 /152
9.2.2 if...else語句 /153
9.2.3 switch語句 /155
9.3 循環控制語句 /157
9.3.1 while語句 /157
9.3.2 do…while語句 /158
9.3.3 for 語句 /159
9.3.4 for…in語句 /161
9.3.5 break和continue語句 /163
9.4 典型應用項目范例:網頁分時問候 /163
9.5 項目實訓:將成績分數按4個等級輸出結果 /165
9.6 綜合練習 /165
第10章 JavaScript函數與對象 /166
10.1 函數概述 /166
10.2 JavaScript內置函數 /167
10.3 自定義函數 /181
10.4 典型應用項目范例:在網頁上實現日期驗證 /183
10.5 內置對象 /186
10.5.1 瀏覽器信息對象(navigator) /186
10.5.2 窗口對象(window) /188
10.5.3 屏幕對象(screen) /191
10.5.4 歷史記錄對象(history) /191
10.5.5 文檔對象(document) /191
10.6 JavaScript操作頁面中標簽元素與屬性 /192
10.6.1 頁面標簽對象的引用 /192
10.6.2 HTML文檔中控件對象的屬性 /195
10.6.3 表單及其控件的訪問 /196
10.7 典型應用項目范例:彈出“用戶登記”新窗口 /197
10.8 綜合練習 /199
第11章 JavaScript事件觸發與響應處理 /200
11.1 事件觸發與響應 /200
11.2 常用事件程序編寫 /201
11.2.1 click事件 /201
11.2.2 change事件 /202
11.2.3 select事件 /202
11.2.4 focus事件 /203
11.2.5 load事件 /204
11.2.6 鼠標移動事件 /205
11.2.7 onblur事件 /207
11.3 其他常用事件 /208
11.4 典型應用項目范例:Web頁面打印 /210
11.5 綜合練習 /212
第12章 JavaScript應用實例 /213
12.1 狀態欄跑馬燈 /213
12.2 禁止使用鼠標右鍵 /214
12.3 隨機播放背景音樂 /216
12.4 動態導航菜單 /217
12.5 具有提示效果的超鏈接 /218
12.6 在網頁上實現表單驗證 /219
12.7 綜合練習 /221
第13章 CSS /222
13.1 CSS文檔制作與應用 /222
13.1.1 CSS文檔制作 /222
13.1.2 CSS語言在HTML文檔中的應用方式 /223
13.2 CSS選擇器 /225
13.3 設置CSS樣式 /226
13.3.1 設置字體樣式 /226
13.3.2 設置文字樣式(Text Property) /228
13.3.3 設置背景樣式(Background Property) /230
13.3.4 設置區域樣式(Box Property) /231
13.3.5 設置分類樣式(Classification Property) /233
13.4 典型應用項目范例:門戶網站菜單列表的設計 /234
13.5 定位效果制作 /241
13.5.1 利用層制作圖層疊加特殊效果 /241
13.5.2 制作圖片透明效果 /242
13.5.3 鼠標指針變換 /243
13.6 綜合練習 /243
第14章 認識HTML5 /245
14.1 HTML5語法的改變 /245
14.1.1 HTML5中的標記方法 /245
14.1.2 HTML5與早期版本HTML的兼容性 /246
14.2 新增的和廢除的元素 /247
14.3 新增的和廢除的屬性 /249
14.4 全局屬性 /251
14.5 典型應用項目范例:HTML5離線訪問功能的實現 /253
14.6 綜合練習 /256
第15章 認識CSS3 /257
15.1 概要介紹 /257
15.1.1 CSS3新特性 /257
15.1.2 CSS的發展歷史 /259
15.2 CSS3的功能 /259
15.2.1 模塊與模塊化結構 /259
15.2.2 CSS3自動拉伸背景圖片新功能應用 /260
15.3 典型應用項目范例:CSS3文字特殊效果制作 /262
15.4 綜合練習 /263
附錄A /265
參考文獻 /270
本書適合的讀者
本書通過一個整體門戶網站項目來講解HTML、JavaScript和CSS的基本語法,書中每個知識點都有一個鮮活、典型的小實例,并在每章節后面有一個章節為知識綜合案例,使學者達到學以致用的目的。本書可作為網頁制作初學者的入門教程,同時也可為網站建設的專業人士提供一些參考。
為什么要學習HTML、JavaScript和CSS技術
Internet又稱因特網,是全球性的網絡,是一種公用信息的載體,這種大眾傳媒比以往的任何一種通訊媒體都要快,它縮短了人與人之間的距離,而網站就是Internet中信息載體的宿主單元,網站中的網頁是人與人交流的主要窗口,因此,作為計算機相關專業的學生,無論是專業的網站設計人員,還是網站愛好者,都應該掌握一定的網站建設與制作技術。
如今建設互聯網的各種新技術層出不窮并且日新月異,但有一點是肯定的,不管是采用什么技術設計的網站,用戶在客戶端通過瀏覽器打開看到的網頁都是靜態網頁,都是由HTML、JavaScript和CSS技術構成的,所以如果您想從事網頁設計或從事網站管理相關工作,就必須學習HTML、JavaScript和CSS技術,哪怕只是簡單地了解,因為HTML、JavaScript和CSS技術是網頁制作技術的基礎和核心。
本書特色
(1)針對性、適用性強。
本書的編者都有10年以上軟件開發教學經驗,3年以上軟件企業項目開發與管理企業經驗,教材的編寫是在大量的企業需求調查、學校學生調查的基礎上進行的,重點講解HTML、JavaScript和CSS網站客戶端技術。
在本書的編寫中,本著“學生會學,教師好教,企業需要”的原則,注意理論與實踐的一體化,并注重實用性,每個知識點的介紹采用理論介紹、案例源代碼、運行效果和源代碼解釋4個步驟完成,每章節有一個綜合案例,綜合案例針對軟件企業項目開發過程來講解,步驟為提出問題,分析問題,一步步解決問題,適用性非常強。并且為了學生擴展能力的培養,每章節中安排了學生任務擴展的項目實訓。
(2)精心設計,理論與案例實訓完美結合。
本書以HTML語言、JavaScript腳本、CSS樣式三方面的知識,將教材分為15章,每章節的講解都是先講解理論知識,再介紹小案例,最后以完整網站項目貫通詳解。
本書不僅僅分章節講解HTML語言、JavaScript腳本、CSS樣式三方面的知識,還試圖為讀者描繪一幅HTML、CSS、JavaScript的角色圖,即HTML、CSS、JavaScript三者在網頁制作這個大的生態環境中各自扮演的角色。
其中,HTML是網頁制作的主要語言,是頁面的基礎架構;CSS簡稱樣式表,是目前唯一的網頁頁面排版樣式標準,它能使任何瀏覽器都聽從指令,可開發Internet客戶端的應用程序,Javascript是基于對象和事件驅動并具有相對安全性的客戶端腳本語言,主要用來給HTML網頁添加動態功能,比如響應用戶的各種操作,減輕服務器端壓力。
設計網站時需要利用相關工具來完成,好的工具能使設計者事半功倍,目前比較流行的網頁設計工具是Dreamweaver,利用Dreamweaver進行網頁設計在本書中有詳細介紹。
設計出來的網站,必須能通過瀏覽器訪問,甚至要能通過Internet來訪問,所以網站必須要部署與發布,部署與發布有局域網和Internet發布,并且發布需要熟悉過程和一些網絡術語,這在本書中都有詳細介紹。
了解了以上內容,可以使讀者理清思路,避免盲目學習,不然讀者在學習過程中會有盲人摸象的感覺。
致謝
本書的編寫過程是一個不斷解決問題和完善的過程,在編寫的過程中,所有參加教材編寫的老師都是盡心盡力,利用寶貴的休息時間來編寫的,是他們對本書編寫進行了大量的調研,多次審訂,并提出寶貴的修改意見,才使得本書得以順利出版,否則本書不可能形成,在此表示忠心的感謝,同時也感謝書后參考文獻的所有作者們,感謝他們的資料給予本書的引導作用。
本書由謝英輝任主編并負責教材總體設計與統稿,胡勝豐、雷軍環,彭維捷,劉燦勛任副主編,參與了本書的編寫工作和相關資料的整理工作,其中謝英輝負責第1、2、3、13、14、15章的編寫,胡勝豐負責第8、9、10、11、12章的編寫,雷軍環負責第4、5章的編寫,彭維捷負責第6章的編寫,劉燦勛負責第7章的編寫。
本書的結構是一種新的嘗試,能否得到同行的認可,能否給教學帶來新的感受,都要經過實踐的檢驗。由于作者水平有限,錯誤之處在所難免,懇請各位讀者給予批評和指正。
編 者