網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂（附光盤） pdf epub mobi txt 电子书 下载 2025

☆☆☆☆☆

劉玉紅 著

出版社： 清华大学出版社

ISBN：9787302387138

版次：1

商品编码：11640818

品牌：清华大学

包装：平装

丛书名： 网站开发案例课堂

开本：16开

出版时间：2015-01-01

用纸：胶版纸

页数：504

正文语种：中文

附件：光盘

産品特色

編輯推薦

　　清華大學齣版社“案例課堂”大係
　　叢書以案例的形式講解軟件的內容，讀者可以在實踐中熟練掌握軟件的使用方法。
　　每一個案例都精挑細選，同時配有全程語音講解的視頻文件，方便讀者學習。
　　案例的選材廣泛，涉及到軟件應用的各個領域、各個行業，學習無死角。
　　“CG設計”係列全彩精印，同等價位下內容更多，同等內容下更實惠。
　　“網站開發”係列附贈超值，全麵學習無障礙：
　　CSS屬性速查錶
　　HTML標簽速查錶
　　網頁布局案例賞析
　　精彩網站配色方案賞析
　　精選JavaScript實例
　　JavaScript函數速查手冊
　　CSS+DIV布局案例賞析
　　案例源文件與教學課件

內容簡介

　　《網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂》作者根據在長期教學中積纍的網頁設計教學經驗，完整、詳盡地介紹HTML 5 + CSS 3 + JavaScript網頁設計技術。

　　《網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂》共分24章，分彆介紹HTML 5概述、HTML 5網頁文檔結構、HTML 5網頁中的文本和圖像、HTML 5建立超鏈接、HTML 5建立錶格、HTML 5建立錶單、HTML 5繪製圖形、HTML 5中的音頻和視頻、CSS 3概述和基本語法、美化網頁字體和段落樣式、美化圖片樣式、美化背景和邊框樣式、美化超級鏈接和鼠標、美化網頁菜單、使用CSS 3濾鏡美化網頁元素、JavaScript編程基礎知識、JavaScript程序控製結構和語法、函數、內置對象、HTML 5 + CSS 3 + JavaScript的搭配使用。最後以兩個綜閤網站的設計為例進行講解，使讀者進一步鞏固所學的知識，提高綜閤實戰能力。

　　《網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂》內容全麵、圖文並茂、步驟清晰、通俗易懂、專業性強，使讀者能理解HTML 5 + CSS 3 + JavaScript網頁樣式與布局的技術，並能解決實際工作中的問題，真正做到“知其然，更知其所以然”。

　　《網站開發案例課堂：HTML5+CSS3+JavaScript網頁設計案例課堂》涉及麵廣泛，幾乎涵蓋瞭HTML 5 + CSS 3 + JavaScript網頁樣式與布局的所有重要知識，適閤網頁設計初學者快速入門，同時也適閤想全麵瞭解HTML 5 + CSS 3 + JavaScript網頁設計的專業人員閱讀。

目錄

第1章 初識HTML 5 11.1 HTML 5的基本概念 21.1.1 HTML的發展曆程 21.1.2 什麼是HTML 5 21.1.3 HTML 5文件的基本結構 31.2 HTML 5的優勢 31.2.1 解決瞭跨瀏覽器問題 31.2.2 新增瞭多個新特性 31.2.3 用戶優先的原則 41.2.4 化繁為簡的優勢 51.3 HTML 5文件的編寫方法 51.3.1 使用記事本手工編寫HTML 5 51.3.2 使用Dreamweaver CS6編寫HTML文件 61.4 使用瀏覽器查看HTML 5文件 111.4.1 查看頁麵效果 111.4.2 查看源文件 111.5 疑難解惑 12
第2章 HTML 5網頁的文檔結構 132.1 HTML 5文件的基本結構 142.1.1 HTML 5頁麵的整體結構 142.1.2 HTML 5新增的結構標記 142.2 HTML 5基本標記詳解 152.2.1 文檔類型說明 152.2.2 HTML標記 152.2.3 頭標記head 162.2.4 網頁的主體標記body 182.2.5 頁麵注釋標記 192.3 HTML 5語法的變化 202.3.1 標簽不再區分大小寫 202.3.2 允許屬性值不使用引號 202.3.3 允許部分屬性值的屬性省略 212.4 綜閤示例——符閤W3C標準的HTML 5網頁 212.5 上機練習——簡單的HTML 5網頁 232.6 疑難解惑 23
第3章 HTML 5網頁中的文本和圖像 253.1 在網頁中添加文本 263.1.1 普通文本的添加 263.1.2 特殊字符文本的添加 263.1.3 使用HTML 5標記添加特殊文本 283.2 文本排版 303.2.1 換行標記3.03.2.2 段落標記3.13.2.3 標題標記3.13.3 文字列錶 323.3.1 建立無序列錶323.3.2 建立有序列錶3.43.3.3 建立不同類型的無序列錶 353.3.4 建立不同類型的有序列錶 363.3.5 建立嵌套列錶 363.3.6 自定義列錶 373.4 網頁中的圖像 383.4.1 在網頁中插入圖像 383.4.2 設置圖像的寬度和高度 403.4.3 設置圖像的提示文字 413.4.4 將圖片設置為網頁背景 423.4.5 排列圖像 423.5 綜閤示例——圖文並茂的房屋裝飾裝修網頁 433.6 上機練習——在綫購物網站的産品展示效果 443.7 疑難解惑 45
第4章 用HTML 5建立超鏈接 474.1 URL的概念 484.1.1 URL的格式 484.1.2 URL的類型 484.2 超鏈接標記 494.2.1 設置文本和圖片的超鏈接 494.2.2 創建指嚮不同目標類型的超鏈接 504.2.3 設置以新窗口顯示超鏈接頁麵 524.2.4 鏈接到同一頁麵的不同位置 534.3 創建熱點區域 544.4 創建浮動框架 564.5 綜閤示例——用Dreamweaver精確定位熱點區域 574.6 上機練習——創建熱點區域 594.7 疑難解惑 60
第5章 用HTML 5創建錶格 615.1 錶格的基本結構 625.2 創建錶格 635.2.1 創建普通錶格 635.2.2 創建一個帶有標題的錶格 645.3 編輯錶格 655.3.1 定義錶格的邊框類型 655.3.2 定義錶格的錶頭 665.3.3 設置錶格背景 675.3.4 設置單元格的背景 695.3.5 閤並單元格 705.3.6 排列單元格中的內容 745.3.7 設置單元格的行高與列寬 755.4 完整的錶格標記 765.5 綜閤示例——製作計算機報價錶 775.6 上機練習——製作學生成績錶 795.7 疑難解惑 82
第6章 使用HTML 5創建錶單 856.1 錶單概述 866.2 錶單基本元素的使用 866.2.1 單行文本輸入框text 876.2.2 多行文本輸入框textarea 876.2.3 密碼域password 886.2.4 單選按鈕radio 896.2.5 復選框checkbox 906.2.6 列錶框select 916.2.7 普通按鈕button 916.2.8 提交按鈕submit 926.2.9 重置按鈕reset 936.3 錶單高級元素的使用 946.3.1 url屬性的使用 946.3.2 email屬性的使用 956.3.3 date和time屬性的使用 966.3.4 number屬性的使用 976.3.5 range屬性的使用 976.3.6 required屬性的使用 986.4 綜閤示例——創建用戶反饋錶單 996.5 上機練習——製作用戶注冊錶單 1006.6 疑難解惑 101
第7章 使用HTML 5繪製圖形 1037.1 添加canvas的步驟 1047.2 繪製基本形狀 1047.2.1 繪製矩形 1057.2.2 繪製圓形 1067.2.3 使用moveTo與lineTo繪製直綫 1077.2.4 使用bezierCurveTo繪製貝濟埃麯綫 1087.3 繪製漸變圖形 1097.3.1 繪製綫性漸變 1097.3.2 繪製徑嚮漸變 1117.4 繪製變形圖形 1127.4.1 繪製平移效果的圖形 1127.4.2 繪製縮放效果的圖形 1137.4.3 繪製鏇轉效果的圖形 1147.4.4 繪製組閤效果的圖形 1157.4.5 繪製帶陰影的圖形 1177.5 使用圖像 1187.5.1 繪製圖像 1187.5.2 平鋪圖像 1207.5.3 裁剪圖像 1217.5.4 圖像的像素化處理 1237.6 繪製文字 1257.7 圖形的保存與恢復 1267.7.1 保存與恢復狀態 1267.7.2 保存文件 1287.8 綜閤示例——繪製火柴棒人物 1297.9 上機練習——繪製商標 1327.10 疑難解惑 133
第8章 HTML 5中的音頻和視頻 1358.1 audio標簽概述 1368.1.1 audio標簽概述 1368.1.2 audio標簽的屬性 1378.1.3 audio標簽瀏覽器的支持情況 1378.2 在網頁中添加音頻文件 1388.2.1 添加自動播放音頻文件 1388.2.2 添加帶有控件的音頻文件 1388.2.3 添加循環播放的音頻文件 1398.2.4 添加預播放的音頻文件 1398.3 video標簽概述 1408.3.1 video標簽概述 1408.3.2 video標簽的屬性 1418.3.3 瀏覽器對video標簽的支持情況 1428.4 在網頁中添加視頻文件 1428.4.1 添加自動播放的視頻文件 1428.4.2 添加帶有控件的視頻文件 1438.4.3 添加循環播放的視頻文件 1438.4.4 添加預播放的視頻文件 1448.4.5 設置視頻文件的高度與寬度 1458.5 疑難解惑 146
第9章 CSS 3概述與基本語法 1479.1 CSS 3概述 1489.1.1 CSS 3的功能 1489.1.2 瀏覽器與CSS 3 1489.1.3 CSS 3的基礎語法 1499.1.4 CSS 3的常用單位 1499.2 編輯和瀏覽CSS 3 1549.2.1 手工編寫CSS 3 1549.2.2 用Dreamweaver編寫CSS 1559.3 在HTML 5中使用CSS 3的方法 1569.3.1 行內樣式 1569.3.2 內嵌樣式 1579.3.3 鏈接樣式 1599.3.4 導入樣式 1609.3.5 優先級問題 1619.4 CSS 3的常用選擇器 1639.4.1 標簽選擇器 1649.4.2 類選擇器 1649.4.3 ID選擇器 1659.4.4 全局選擇器 1669.4.5 組閤選擇器 1679.4.6 選擇器繼承 1689.4.7 僞類選擇器 1699.5 選擇器聲明 1709.5.1 集體聲明 1709.5.2 多重嵌套聲明 1719.6 綜閤示例——製作炫彩網站Logo 1729.7 上機練習——製作學生信息統計錶 1759.8 疑難解惑 176
第10章 使用CSS 3美化網頁字體與段落 17910.1 美化網頁文字 18010.1.1 設置文字的字體 18010.1.2 設置文字的字號 18110.1.3 設置字體風格 18210.1.4 設置加粗字體 18310.1.5 將小寫字母轉為大寫字母 18410.1.6 設置字體的復閤屬性 18510.1.7 設置字體顔色 18610.2 設置文本的高級樣式 18710.2.1 設置文本陰影效果 18710.2.2 設置文本的溢齣效果 18810.2.3 設置文本的控製換行 18910.2.4 保持字體尺寸不變 19010.3 美化網頁中的段落 19110.3.1 設置單詞之間的間隔 19110.3.2 設置字符之間的間隔 19210.3.3 設置文字的修飾效果 19310.3.4 設置垂直對齊方式 19410.3.5 轉換文本的大小寫 19610.3.6 設置文本的水平對齊方式 19710.3.7 設置文本的縮進效果 19810.3.8 設置文本的行高 19910.3.9 文本的空白處理 20010.3.10 文本的反排 20110.4 綜閤示例——設置網頁標題 20310.5 上機練習——製作新聞頁麵 20410.6 疑難解惑 205
第11章 使用CSS 3美化網頁圖片 20711.1 圖片縮放 20811.1.1 通過描述標記width和height縮放圖片 20811.1.2 使用CSS 3中的max-width和max-height縮放圖片 20811.1.3 使用CSS 3中的width和height縮放圖片 20911.2 設置圖片的對齊方式 21011.2.1 設置圖片的橫嚮對齊 21011.2.2 設置圖片縱嚮對齊 21111.3 圖文混排 21311.3.1 設置文字環繞效果 21311.3.2 設置圖片與文字的間距 21411.4 綜閤示例——製作學校宣傳單 21611.5 上機練習——製作簡單的圖文混排網頁 21811.6 疑難解惑 219
第12章 使用CSS 3美化網頁背景與邊框 22112.1 使用CSS 3美化背景 22212.1.1 設置背景顔色 22212.1.2 設置背景圖片 22312.1.3 背景圖片重復 22412.1.4 背景圖片顯示 22612.1.5 背景圖片的位置 22712.1.6 背景圖片的大小 22912.1.7 背景的顯示區域 23012.1.8 背景圖像的裁剪區域 23212.1.9 背景復閤屬性 23312.2 使用CSS 3美化邊框 23412.2.1 設置邊框的樣式 23412.2.2 設置邊框的顔色 23612.2.3 設置邊框的綫寬 23712.2.4 設置邊框的復閤屬性 23812.3 設置邊框的圓角效果 23912.3.1 設置圓角邊框 23912.3.2 指定兩個圓角半徑 24012.3.3 繪製四個不同角的圓角邊框 24112.3.4 繪製不同種類的邊框 24312.4 綜閤示例——製作簡單的公司主頁 24512.5 上機練習——製作簡單的生活資訊主頁 24812.6 疑難解惑 249
第13章 使用CSS 3美化超級鏈接和鼠標 25113.1 使用CSS 3來美化超鏈接 25213.1.1 改變超級鏈接的基本樣式 25213.1.2 設置帶有提示信息的超級鏈接 25313.1.3 設置超級鏈接的背景圖 25413.1.4 設置超級鏈接的按鈕效果 25513.2 使用CSS 3美化鼠標特效 25613.2.1 使用CSS 3控製鼠標箭頭 25613.2.2 設置鼠標變幻式超鏈接 25813.2.3 設置網頁頁麵滾動條 25913.3 綜閤示例1——圖片版本的超級鏈接 26113.4 綜閤示例2——關於鼠標特效 26213.5 上機練習——製作一個簡單的導航欄 26413.6 疑難解惑 266
第14章 使用CSS 3美化錶格和錶單的樣式 26714.1 美化錶格的樣式 26814.1.1 設置錶格邊框的樣式 26814.1.2 設置錶格邊框的寬度 27014.1.3 設置錶格邊框的顔色 27114.2 美化錶單樣式 27214.2.1 美化錶單中的元素 27214.2.2 美化提交按鈕 27414.2.3 美化下拉菜單 27614.3 綜閤示例——製作用戶登錄頁麵 27714.4 上機練習——製作用戶注冊頁麵 27914.5 疑難解惑 281
第15章 使用CSS 3美化網頁菜單 28315.1 使用CSS 3美化項目列錶 28415.1.1 美化無序列錶 28415.1.2 美化有序列錶 28515.1.3 美化自定義列錶 28715.1.4 製作圖片列錶 28815.1.5 縮進圖片列錶 28915.1.6 列錶的復閤屬性 29115.2 使用CSS 3製作網頁菜單 29215.2.1 製作無需錶格的菜單 29215.2.2 製作水平和垂直菜單 29415.3 綜閤示例——模擬soso導航欄 29715.4 上機練習——將段落轉變成列錶 29915.5 疑難解惑 301
第16章 使用CSS 3濾鏡美化網頁元素 30316.1 濾鏡概述 30416.2 基本濾鏡 30416.2.1 通道(Alpha)濾鏡 30516.2.2 模糊(Blur)濾鏡 30716.2.3 色彩(Chroma)濾鏡 30816.2.4 投影(DropShadow)濾鏡 30916.2.5 水平翻轉(FlipH)濾鏡 31116.2.6 垂直翻轉(FlipV)濾鏡 31116.2.7 光暈(Glow)濾鏡 31216.2.8 灰度(Gray)濾鏡 31316.2.9 反相(Invert)濾鏡 31416.2.10 遮罩(Mask)濾鏡 31516.2.11 波浪(Wave)濾鏡 31516.2.12 陰影(Shadow)濾鏡 31716.2.13 X-ray濾鏡 31816.3 高級濾鏡 31816.3.1 光照(Light)濾鏡 31916.3.2 漸隱(BlendTrans)濾鏡 32016.3.3 切換(RevealTrans)濾鏡 32216.4 疑難解惑 324
第17章 JavaScript編程基本知識 32517.1 認識JavaScript 32617.1.1 什麼是JavaScript 32617.1.2 JavaScript的特點 32617.1.3 JavaScript與Java的區彆 32717.1.4 JavaScript的版本 32817.2 JavaScript基本語法的應用 32917.2.1 注釋的應用 32917.2.2 語句的應用 33117.2.3 語句塊的應用 33217.3 JavaScript的數據結構 33317.3.1 認識標識符 33317.3.2 認識關鍵字 33317.3.3 認識常量 33417.3.4 認識變量及其應用 33417.4 JavaScript數據類型的使用 33617.4.1 typeof運算符的使用 33617.4.2 undefined類型的使用 33817.4.3 null類型的使用 33817.4.4 Boolean類型的使用 33917.4.5 Number類型的使用 34017.4.6 String類型的使用 34117.4.7 Object類型的使用 34217.5 JavaScript運算符的使用 34217.5.1 算術運算符 34217.5.2 比較運算符 34417.5.3 位運算符 34517.5.4 邏輯運算符 34617.5.5 條件運算符 34717.5.6 賦值運算符 34817.5.7 運算符的優先級 35017.6 綜閤示例——一個簡單的JavaScript程序 35117.7 疑難解惑 352
第18章 JavaScript的程序控製結構與語句 35318.1 賦值語句 35418.2 條件判斷語句 35418.2.1 if語句 35418.2.2 if-else語句 35518.2.3 if ... else if語句 35618.2.4 if語句的嵌套 35718.2.5 switch語句 35918.3 循環控製語句 36018.3.1 while語句 36018.3.2 do-while語句 36118.3.3 for語句 36318.4 跳轉語句 36418.4.1 break語句 36418.4.2 continue語句 36518.5 綜閤示例——在頁麵中顯示距離2015年元旦的天數 36618.6 上機練習——製作一個簡易乘法錶 36718.7 疑難解惑 368
第19章 JavaScript中的函數 36919.1 函數的簡介 37019.2 調用函數 37019.2.1 函數的簡單調用 37019.2.2 在錶達式中調用 37119.2.3 在事件響應中調用函數 37219.2.4 通過鏈接調用函數 37319.3 JavaScript中常用的函數 37419.3.1 嵌套函數 37419.3.2 遞歸函數 37519.3.3 內置函數 37619.4 綜閤示例——購物簡易計算器 38419.5 上機練習——製作閃爍圖片 38619.6 疑難解惑 387
第20章 JavaScript的內置對象 38920.1 字符串對象 39020.1.1 創建字符串對象的方法 39020.1.2 字符串對象常用屬性的應用 39020.1.3 字符串對象常用方法的應用 39120.2 數學對象 39420.2.1 創建Math對象的方法 39420.2.2 數學對象屬性的應用 39420.2.3 數學對象方法的使用 39520.3 日期對象 39720.3.1 創建日期對象 39720.3.2 日期對象常用方法的應用 39820.3.3 日期間的運算 40120.4 數組對象 40220.4.1 創建數組對象 40220.4.2 數組對象屬性的應用 40220.4.3 數組對象常用方法的應用 40520.5 綜閤示例——製作網頁隨機驗證碼 40920.6 上機練習——動態顯示當前時間 41020.7 疑難解惑 412
第21章 JavaScript對象編程 41521.1 文檔對象模型(DOM) 41621.1.1 文檔對象模型(DOM)介紹 41621.1.2 在DOM模型中獲得對象 41621.1.3 事件驅動的應用 41721.2 窗口(window)對象 41921.2.1 創建窗口(window) 41921.2.2 創建對話框 42121.2.3 窗口的相關操作 42321.3 文檔(document)對象 42421.3.1 文檔屬性的應用 42421.3.2 文檔中圖片的使用 42621.3.3 顯示文檔中的所有超鏈接 42721.4 錶單對象 42921.4.1 創建form對象 42921.4.2 form對象屬性與方法的應用 43021.4.3 單選按鈕與復選框的使用 43121.4.4 下拉菜單的使用 43221.5 綜閤示例——錶單注冊與錶單驗證 43321.6 上機練習——省市聯動效果 43821.7 疑難解惑 441
第22章 HTML 5、CSS 3和JavaScript的搭配使用 44322.1 常見的JavaScript編寫工具 44422.1.1 記事本 44422.1.2 Dreamweaver 44522.2 JavaScript在HTML中的使用 44622.2.1 在HTML網頁頭中嵌入JavaScript代碼 44622.2.2 在HTML網頁中嵌入JavaScript代碼 44722.2.3 在HTML網頁的元素事件中嵌入JavaScript代碼 44822.2.4 在HTML中調用已經存在的JavaScript文件 44922.2.5 通過JavaScript僞URL引入JavaScript腳本代碼 45022.3 JavaScript與CSS 3的結閤使用 45122.3.1 動態添加樣式 45122.3.2 動態改變樣式 45222.3.3 動態定位網頁元素 45322.3.4 設置網頁元素的顯示與隱藏 45622.4 HTML 5、CSS 3和JavaScript的搭配應用 45722.4.1 設定左右移動的圖片 45722.4.2 製作顔色選擇器 46022.4.3 製作跑馬燈效果 46222.5 綜閤示例——製作樹形導航菜單 46422.6 上機練習——製作滾動的菜單 46822.7 疑難解惑 470
第23章 製作企業門戶類網頁 47323.1 構思布局 47423.1.1 設計分析 47423.1.2 排版架構 47423.2 內容設計 47523.2.1 使用JavaScript技術實現Logo與導航菜單 47523.2.2 Banner區 47623.2.3 資訊區 47723.2.4 版權信息 47923.3 設置鏈接 48023.4 疑難解惑 480
第24章 製作在綫購物類網頁 48124.1 整體布局 48224.1.1 設計分析 48224.1.2 排版架構 48224.2 模塊分割 48324.2.1 Logo與導航區 48324.2.2 Banner與資訊區 48524.2.3 産品類彆區域 48624.2.4 頁腳區域 48824.3 設置鏈接 48824.4 疑難解惑 488

精彩書摘

　　第1章 HTML基礎語法

　　自從網頁技術誕生以來，構建網頁的語言一直在不斷地演化。現在，一係列最佳實踐已經齣現，用戶在設計網頁時，通常會將HTML、CSS和JavaScript技術結閤運用：使用HTML創建一些基本的網頁內容，使用CSS控製網頁內容的外觀，讓它們更加引人注目，使用JavaScript添加具有很強動態感的功能。本書會詳細地嚮讀者介紹HTML、CSS和JavaScript的知識。本章將主要介紹HTML語言。

　　通過對本章的學習，讀者不僅可以瞭解HTML的特點、發展曆史和開發工具，還可以掌握HTML的語法結構、一些常用的標記，以及編寫HTML的注意事項。

　　本章學習目標如下：

　　熟悉HTML的特點和發展曆史。

　　瞭解HTML的編輯器。

　　掌握Dreamweaver工具的使用。

　　掌握HTML的標記語法和屬性語法。

　　瞭解HTML中常用的全局屬性。

　　掌握頭部內容的一些常用標記。

　　掌握bgcolor屬性的使用。

　　熟悉與頁麵邊距有關的屬性設置。

　　掌握段落標記和超鏈接標記的使用。

　　掌握圖像標記和標題顯示標記。

　　掌握HTML文件中的注釋。

　　瞭解編寫HTML文件的注意事項。

　　1.1 瞭解HTML語言

　　HTML是HyperText Markup Language的縮寫，通常被譯為“超文本標記語言”，它是標準通用標記語言下的一個應用。“超文本”就是指頁麵內可以包含圖片、鏈接，甚至是音樂和程序等的非文字元素。

　　下麵我們來簡單瞭解HTML語言的基本知識，包括HTML語言的特點、發展曆史和編輯工具等內容。

　　1.1.1 HTML概述

　　HTML是用來描述網頁的一種標記語言，它使用標記來描述網頁。例如，下麵的代碼是一段簡單的HTML內容：

　　我的HTML網頁示例

　　第一次進行測試，謝謝大傢包容。

　　將上述內容復製到一個記事本文件中，並且將記事本文件的後綴名更改為“.html”或者是“.htm”，然後在瀏覽器（例如Chrome瀏覽器）的地址欄中輸入路徑進行測試，效果如圖1-1所示。

　　圖1-1 簡單的HTML例子

　　從上麵的例子可以看齣，HTML網頁的製作很簡單。

　　HTML有多種特點，說明如下。

　　升級簡單性：HTML版本升級采用超集方式，從而更加靈活、方便。所謂超集，可以這樣理解，如果一個集閤V1中的每一個元素都在集閤V2中，且集閤V2中可能包含V1中沒有的元素，則集閤V2就是V1的一個超集。若V2是V1的超集，則V1是V2的真子集。

　　可擴展性：HTML的應用非常廣泛，它帶來瞭加強的功能。HTML采取子類元素的方式，為係統擴展帶來保證。

　　平颱無關性：雖然個人計算機被廣泛應用，但是使用其他計算機（例如Mac）的也大有人在。HTML可以廣泛應用在多種平颱上，都能獲得一緻的效果。

　　通用性：HTML是網絡的通用語言，它允許網頁製作者建立文本與圖片相結閤的復雜頁麵，這些頁麵可以被網上的任何用戶瀏覽到，無論使用的是什麼類型的計算機或者瀏覽器。

　　1.1.2 HTML發展曆史

　　在整個20世紀90年代，網絡呈爆炸式增長，越來越多的網頁設計者和瀏覽器開發者參與到網絡中來，每一個人都有不同的想法和目標，每一個人都會按照自己的想法和目標參與到網絡中來。網頁設計者會按照自己的想法和目標去編寫網頁，而瀏覽器的開發者則可能與網頁設計者的想法不同，它會按照自己的方式去呈現網頁。

　　當網頁的設計者和瀏覽器的開發者發生分歧時，必然會帶來非常不同的呈現。這時，設計者要麵嚮所有的用戶，就必須為每種瀏覽器創作不同的網頁，來實現相同的呈現。這就必然要增加創作的成本，從而導緻萬維網的分裂。因此，隻有網頁的設計者和瀏覽器的開發者都按照同一個規範來編寫和呈現網頁時，纔會避免萬維網的分裂。正是這個原因促使各瀏覽器開發商協調起來，共同實現瞭同一個HTML規範。

　　HTML沒有1.0版本，這是因為一開始有多種不同版本的HTML，當時W3C還沒有成立，HTML在1993年6月作為互聯網工程工作小組（Internet Engineering Task Force，IETF）的第一份草案發布，但是並未被推薦為正式規範。

　　在IETF的支持下，根據以往的通用實踐，在1995年整理和發布瞭HTML 2.0。

　　但HTML 2.0是作為RFC（Request For Comments）1866發布的，其後又經過瞭多次修改。後來的HTML+和HTML 3.0也提齣瞭很多好的建議，並且增加瞭大量的內容，然而這些版本還未能上升到創建一個規範的程度，許多商傢實際上並未嚴格遵守這些版本的格式。

　　1996年，W3C的HTML工作組編撰瞭通用的實踐，並在第二年公布瞭HTML 3.2規範。同期，IETF宣布關閉HTML工作組，開始由W3C負責開發和維護HTML規範。

　　1997年12月，HTML 4.0被W3C正式推薦為規範，並且在1999年12月推齣瞭一個修訂版——HTML 4.01，該版本引入瞭樣式錶、腳本、框架、嵌入對象、錶格以及錶單等多種內容。

　　此後，W3C解散瞭HTML工作組，HTML規範長時間處於停滯狀態，並轉而開發XHTML，直到發布XHTML 1.0規範和XHTML 2.0規範。但由於XHTML規範越來越復雜，這導緻其長期不能被瀏覽器商傢接受。

　　與此同時，WHATWG認為XHTML並不是用戶所需要的，於是繼續開發HTML的後續版本，並將其定名為HTML 5.0。隨著萬維網的發展，WHATWG的工作取得瞭很多廠商的支持，並最終使W3C認可，終止瞭XHTML的開發，重新啓動瞭HTML工作組，在WHATWG工作的基礎上開發HTML 5，並最終發布瞭HTML 5規範。

　　1.1.3 HTML編輯器

　　編輯HTML代碼時可以使用記事本，通過記事本，可以按照以下幾個步驟來創建網頁。

　　（1） 啓動記事本。啓動記事本最簡單的一種辦法是，直接單擊計算機“開始”菜單中的“運行”命令，然後在彈齣的對話框中輸入“notepad”，即可直接打開記事本窗口。

　　（2） 在打開的記事本窗口中可以編寫HTML代碼。

　　（3） 需要把HTML代碼保存為HTML格式的網頁文件。在記事本窗口的菜單欄中選擇“文件”→“另存為”命令，在彈齣的“另存為”對話框中設置保存類型為“所有文件”；設置HTML文件的擴展名為“.html”或者“.htm”，這兩種擴展名沒有區彆，可以根據讀者的喜好進行選擇。

　　經過上述步驟編輯並保存好HTML文件後，即可在瀏覽器中運行瞭。

　　上麵的例子隻是說明瞭如何在記事本中編寫HTML代碼。其實，任何文本編輯器都可以編寫HTML代碼，例如寫字闆、Word、WPS等編輯程序。除瞭這些程序外，還可以使用更加專業化的工具來編輯HTML。

　　錶1-1對各種HTML開發工具進行瞭分類。

　　錶1-1 HTML開發工具分類

　　分 類說 明代錶工具不 足

　　所見即所得的工具所謂“所見即所得”，是指在編輯網頁時即能同步地看到效果，與使用瀏覽器時看到的效果基本一緻Drumbeat、NetobjectFusion容易産生廢代碼

　　續錶

　　分 類說 明代錶工具不 足

　　HTML

　　代碼編輯工具用純粹的HTML代碼編輯工具，用戶可以對頁麵進行完全的控製記事本等用戶必須掌握

　　HTML語言

　　混閤型

　　工具介於上述兩種工具之間，混閤型工具可以在所見即所得的工作環境下完成主要的工作，同時也能切換到代碼編輯器Adobe Dreamweaver、

　　FrontPage、CutePage、

　　QuickSiteaver通常也不能完全控製HTML頁麵的代碼，也容易産生廢代碼

　　1.1.4 認識Dreamweaver工具

　　Adobe Dreamweaver，簡稱DW，是美國Macromedia公司開發的集網頁製作和管理網站於一身的所見即所得型的網頁編輯器，它是一種為專業的網頁設計師特彆開發的可視化網頁設計工具，利用它，可以輕而易舉地製作齣跨平颱、跨瀏覽器的充滿動感的網頁。

　　1．Dreamweaver的版本

　　Dreamweaver 1.0版本於1997年12月由Macromedia公司發布。目前，Dreamweaver CC是其最新版本。

　　錶1-2給齣瞭Dreamweaver版本發布的曆史情況。

　　錶1-2 Dreamweaver的曆史版本

　　所處時期版 本

　　Macromedia時期Dreamweaver 1.0、Dreamweaver 2.0、Dreamweaver 2.01、Dreamweaver 3、Dreamweaver 4、Dreamweaver 5、Dreamweaver MX、Dreamweaver MX 2004和Dreamweaver 8.0

　　Adobe時期Dreamweaver CS3、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5.5和Dreamweaver CS6

　　2013Dreamweaver Creative Cloud，即Dreamweaver CC

　　2．係統要求

　　對於Windows操作係統來說，使用Dreamweaver工具時，需要滿足以下幾個要求：

　　Intel Pentium 4或者AMD Athlon 64處理器。

　　Microsoft Windows XP（帶有Service Pack 2，推薦Service Pack 3）；Windows Vista Home Premium、Business、Ultimate或Enterprise（帶有Service Pack 1）；Windows 7和Windows 8。

　　512MB內存。

　　1GB可用硬盤空間，用於安裝；安裝過程中還需要額外的可用空間（無法安裝在可移動閃存設備上）。

　　1024×768屏幕，16位顯卡。

　　DVD-ROM驅動器。

　　在綫服務需要寬帶Internet連接，並不斷驗證訂閱版本（如果適用）。

　　3．操作界麵

　　雖然Dreamweaver CC是最新的版本，但是目前Dreamweaver CS4和Dreamweaver CS5版本經常使用。本書以Dreamweaver CS5工具進行編輯，使用該工具之前，需要從網絡下載，下載成功後進行安裝，由於很簡單，這裏不再給齣具體的安裝步驟。

　　安裝成功後，直接打開，初始界麵如圖1-2所示。

　　圖1-2 Dreamweaver的界麵效果

　　用戶可以在如圖1-2所示的界麵中編輯HTML代碼，也可以執行其他的操作。通常情況下，為瞭利於HTML文件的維護和修改，可以首先在Dreamweaver中創建一個站點，然後在該站點下創建其他文件（例如.html文件、.txt文件和文件夾等）。

　　【例1-1】

　　本例演示如何創建一個站點，以及如何嚮站點中添加文件。實現步驟如下。

　　（1） 在打開的Dreamweaver界麵的菜單欄中選擇“站點”→“新建站點”命令，這時會彈齣如圖1-3所示的對話框。在該對話框中，輸入站點名稱並選擇或輸入站點文件夾，然後單擊“保存”按鈕即可。

　　（2） 創建成功後，會在“文件”選項卡中顯示站點名稱，然後選擇當前站點，並單擊鼠標右鍵，從快捷菜單中選擇要執行的命令，例如“新建文件”、“新建文件夾”、“打開”等多個命令。

　　（3） 直接選擇要執行的命令。這裏在新站點下添加一個image文件夾和一個test.html文件，效果如圖1-4所示。

　　圖1-3 新建站點

　　圖1-4 創建文件夾和文件

　　（4） 嚮test.html文件中添加一段文本字符串，添加完畢後，單擊如圖1-5所示的按鈕，選擇在瀏覽器中瀏覽網頁效果。在圖1-5中，用戶選擇“編輯瀏覽器列錶”命令可以添加或者編輯瀏覽器。

　　圖1-5 選擇在瀏覽器中預覽/調試

　　……

前言/序言

　　目前，HTML 5和CSS 3的齣現，大大減輕瞭前端開發者的工作量，降低瞭開發成本，所以HTML 5在未來的技術市場中將更有競爭力。因此學習流行的HTML 5 + CSS 3 + JavaScript黃金搭檔可以讓讀者掌握目前最新的前端技術，使前端設計從外觀上變得更炫、技術上更簡易。本書從易到難，詳細、透徹地講解各個知識點，非常適閤沒有基礎的讀者學習，同時也可以讓有HTML 4基礎的讀者學會HTML 5技術。

　　1. 本書特色

　　（1）知識全麵：涵蓋瞭所有的HTML 5 + CSS 3 + JavaScript知識點，可以幫助讀者由淺入深地掌握網頁設計方麵的技能。

　　（2）圖文並茂：在介紹案例的過程中，每一個操作均有對應的插圖。這種圖文結閤的方式使讀者在學習過程中能夠直觀、清晰地看到操作的過程及效果，便於更快地理解和掌握。

　　（3）易學易用：顛覆傳統的“看”書觀念，變成一本能“操作”的圖書。

　　（4）案例豐富：把知識點融會於係統的案例實訓中，並且結閤經典案例進行講解和拓展，進而實現“知其然，並知其所以然”的效果。

　　（5）提示周到：本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“注意”等形式進行說明，避免讀者在學習的過程中走彎路。

　　（6）超值贈送：除瞭本書的素材和結果外，還將贈送封麵所述的大量資源，使讀者可以全麵掌握網頁設計方方麵麵的知識。

　　2. 讀者對象

　　本書不僅適閤網頁設計初級讀者入門學習，還可作為中、高級用戶的參考手冊。書中大量的示例模擬瞭真實的網頁設計案例，對讀者的工作有現實的藉鑒意義。

　　3. 作者團隊

　　本書作者劉玉紅長期從事網站設計與開發工作。另外，鬍同夫、梁雲亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海鬆等人參與瞭編寫工作。

　　本書雖然傾注瞭作者的心血，但由於水平有限，書中難免有錯漏之處，懇請讀者諒解。讀者如果遇到問題或有意見和建議，敬請與我們聯係，我們將全力提供幫助。

　　編 者

评分☆☆☆☆☆

不错 介绍的挺详细的 扩展的内容也很丰富

评分☆☆☆☆☆

书本还不错，材质也挺不错的，值得推荐

评分☆☆☆☆☆

书不错，还没有看过书不错，还没有看过

评分☆☆☆☆☆

书介绍的比较详细～内容还可以～不错哦

评分☆☆☆☆☆

不错，讲解很详细，内容安排合理！

评分☆☆☆☆☆

书的质量很好，还是彩色的，内容还没看

评分☆☆☆☆☆

感觉很不错的入门教材。

评分☆☆☆☆☆

很基础，入门必备

评分☆☆☆☆☆

很不错的书，看了下目录，内容还算详细，可以好好的扎实一下基础了