內容簡介
胡秀娥,資深Web技術專家,有10余年網站開發授課經驗,是國內較早專業從事Web開發的一線技術人員和培訓講師。一直致力于對HTML、JavaScript、CSS、jQuery、jQUery Mobile等Web開發技術的研究和實踐。
本書共21章,引導讀者從零開始,一步步掌握網頁設計與布局的全過程。本書緊密圍繞網頁設計師在制作網頁過程中實際需要掌握的技術,全面介紹了使用HTML、CSS、JavaScript進行網頁設計和制作的各方面內容和技巧。本書不是單純講解語法,而是通過一個個鮮活、典型的實戰案例來達到學以致用的目的。每個語法都有相應的實例。每章后面又配有綜合小實例,同時配有習題,力求達到理論知識與實踐操作完美結合的效果。
本書可作為普通高校計算機及相關專業的教材,并可供從事網頁設計與制作、網站開發及網頁編程等行業的人員參考。
前 言
1. 選題背景
近年來隨著網絡信息技術的廣泛應用,越來越多的個人、企業等紛紛建立自己的網站,利用網站來宣傳推廣自己。如果你想從事網頁制作或正在從事網頁制作的相關工作,就必須要學習HTML、CSS、JavaScript,哪怕只是簡單地了解。因為HTML、CSS、JavaScript是網頁制作技術的核心與基礎。本書的第1版在2011年出版后,其銷售在同類書籍中一直名列前茅,重印十多次。由于此書是在2011年6月出版的,寫此書的時間是2010年,已經7年了,HTML 5、CSS 3已經誕生。這次改版重點即增加了HTML 5、CSS 3方面的內容。
2. 主要內容
HTML是Internet的基石。本書介紹了HTML的基礎知識,包括超文本標記語言HTML入門基礎、HTML網頁文檔結構、網頁文本與段落排版、網頁圖像和多媒體信息組織、用HTML創建超鏈接和表單、用表格排列網頁數據、HTML 5入門基礎、HTML 5的結構。接著介紹了CSS入門基礎、用CSS設置文本樣式、用CSS設計圖像和背景、用CSS設置表格和表單樣式、用CSS設置鏈接與導航菜單、CSS+DIV布局入門基礎、CSS+DIV布局方法、CSS 3移動網頁開發。還介紹了JavaScript語法基礎、JavaScript中的事件、JavaScript中的函數和對象。最后采用最流行的CSS+DIV布局的方法,綜合講述了個人網站、企業網站等制作布局方法。
3. 本書特色
與目前市場上的相關書籍比較,本書具有以下幾點特色。
* 知識全面、系統。本書內容完全從網頁創建的實際角度出發,將HTML、CSS和JavaScript的元素進行歸類,每個標記的語法、屬性和參數都有完整詳細的說明,信息量大,知識結構完善。
* 突出實例操作,體現了以應用為核心,以培養學生的實際動手能力為重點,力求做到學與教并重,科學性與實用性相統一。把知識點融匯于系統的案例實訓中,并且結合經典案例進行講解和拓展。
* 配合Dreamweaver進行講解。本書以淺顯的語言和詳細的步驟介紹了在可視化網頁軟件Dreamweaver中,如何運用HTML、CSS和JavaScript代碼來創建網頁,使網頁制作更加得心應手。
* 增加HTML 5和CSS 3的知識,用案例介紹了HTML 5和CSS 3基礎知識以及實際運用技術。
* 配圖豐富,效果直觀。對于每個實例代碼,本書都配有相應的效果圖,讀者無須自己進行編碼,也可以看到相應的運行結果或者顯示效果。
* 習題強化。每章最后提供專門的測試習題,供讀者檢驗所學知識是否牢固掌握。
4. 本書讀者對象
* 網頁設計與制作人員。
* 網站建設與開發人員。
* 大中專院校相關專業師生。
* 網頁制作培訓班學員。
* 個人網站愛好者與自學讀者。
本書是集體的結晶,參加本書編寫的人員均為從事網頁教學工作的資深教師和具有大型商業網站建設經驗的資深網頁設計師,他們有著豐富的教學經驗和網頁設計經驗。參加編寫的人員包括胡秀娥、徐洪峰、何琛、鄧靜靜、李銀修、徐曦、孫魯杰、何海霞、何秀明、孫素華、呂志彬等。由于時間所限,書中疏漏和不妥之處在所難免,懇請廣大讀者朋友批評指正。
編 者
目 錄
第1章 網頁標記語言HTML入門基礎 11.1 HTML概述 11.2 HTML文件的構成 21.2.1 HTML文件結構 21.2.2 編寫HTML文件的注意事項 31.3 怎樣編寫HTML文件 41.3.1 使用記事本文件編寫頁面 41.3.2 使用Dreamweaver編寫HTML頁面 51.4 網頁設計與開發的過程 61.4.1 明確網站定位 61.4.2 收集信息和素材 71.4.3 規劃欄目結構 71.4.4 設計頁面方案 81.4.5 制作頁面 91.4.6 實現后臺功能 101.4.7 網站的測試與發布 111.5 本章小結 111.6 練習題 12第2章 HTML網頁文檔的結構 132.1 HTML文檔主體標記 132.1.1 bgcolor屬性 132.1.2 background屬性 142.1.3 text屬性 152.1.4 設置鏈接文字屬性 162.1.5 設置頁面邊距 192.2 head部分的標記 202.2.1 title標記 202.2.2 定義頁面關鍵字 202.2.3 定義頁面描述 212.2.4 定義編輯工具 222.2.5 定義作者信息 222.2.6 定義網頁文字及語言 232.2.7 定義網頁的定時跳轉 242.3 綜合實例——創建基本的HTML文件 242.4 本章小結 272.5 練習題 28第3章 網頁文本與段落排版 293.1 插入其他標記 293.1.1 空格符號  293.1.2 特殊符號 303.2 設置文字的格式 313.2.1 face屬性 313.2.2 size屬性 323.2.3 color屬性 333.2.4 b、strong、em、u標記 343.2.5 sup與sub標記 353.3 設置段落的格式 363.3.1 p標記 363.3.2 段落對齊屬性align 373.3.3 nobr標記 383.3.4 br標記 393.4 水平線標記 403.4.1 hr標記 403.4.2 水平線寬度與高度屬性:width、size 413.4.3 水平線顏色屬性color 423.4.4 水平線的對齊方式屬性align 433.4.5 水平線去掉陰影屬性noshade 443.5 使用marquee設置滾動效果 453.5.1 marquee標記及其屬性 453.5.2 使用marquee插入滾動公告 463.6 綜合實例——設置頁面文本及段落 483.7 本章小結 503.8 練習題 50第4章 網頁圖像和多媒體 514.1 網頁中常見的圖像格式 514.2 圖像標記及其屬性 524.2.1 img標記 524.2.2 height屬性 534.2.3 width屬性 544.2.4 border屬性 554.2.5 hspace屬性 564.2.6 vspace屬性 574.2.7 align屬性 574.3 添加背景音樂 594.3.1 bgsound標記 594.3.2 loop屬性 604.4 綜合實例 60綜合實例1——多媒體網頁 61綜合實例2——創建圖文混合排版網頁 634.5 本章小結 654.6 練習題 66第5章 用HTML創建超鏈接和表單 675.1 超鏈接的基本概念 675.2 創建超鏈接 675.2.1 超鏈接標記 685.2.2 設置的目標窗口 695.3 創建圖像的超鏈接 705.3.1 設置圖像超鏈接 705.3.2 設置圖像熱區鏈接 715.4 創建錨點鏈接 735.4.1 創建錨點 735.4.2 鏈接到頁面不同位置的錨點鏈接 745.5 表單form 765.5.1 action 765.5.2 表單名稱name 765.5.3 傳送方法method 775.5.4 編碼方式enctype 785.5.5 目標顯示方式target 785.6 綜合實例 79綜合案例1——插入表單對象 79綜合案例2——給網頁添加鏈接 855.7 本章小結 865.8 練習題 87第6章 用表格排列網頁數據 886.1 表格屬性 886.1.1 表格的基本標記table、tr、td 886.1.2 表格寬度和高度width、height 896.1.3 表格標題caption 906.1.4 表格的表頭th 916.1.5 表格對齊方式align 936.1.6 邊框寬度border 956.1.7 表格邊框顏色bordercolor 966.1.8 單元格間距cellspacing 976.1.9 單元格邊距cellpadding 986.1.10 表格的背景色bgcolor 996.1.11 表格的背景圖像 background 1006.2 表格的結構標記 1016.2.1 設計表頭樣式thead 1016.2.2 設計表主體樣式tbody 1036.2.3 設計表尾樣式tfoot 1046.3 綜合實例——使用表格排版網頁 1056.4 本章小結 1116.5 練習題 111第7章 HTML 5入門基礎 1137.1 HTML 5簡介 1137.2 HTML 5與HTML 4的區別 1147.2.1 HTML 5的語法變化 1147.2.2 HTML 5中的標記方法 1147.2.3 HTML 5語法中的3個要點 1157.3 HTML 5新增的元素和廢除的元素 1167.3.1 新增的結構元素 1167.3.2 新增塊級元素 1187.3.3 新增的行內的語義元素 1207.3.4 新增的嵌入多媒體元素與交互性元素 1237.3.5 新增的input元素的類型 1247.3.6 廢除的元素 1267.4 新增的屬性和廢除的屬性 1267.4.1 新增的屬性 1267.4.2 廢除的屬性 1287.5 創建簡單的HTML 5頁面 1297.5.1 HTML 5文檔類型 1297.5.2 字符編碼 1307.5.3 頁面語言 1307.5.4 添加樣式表 1307.5.5 添加JavaScript 1317.5.6 測試結果 1317.6 本章小結 1317.7 練習題 132第8章 HTML 5的結構 1338.1 新增主體結構元素 1338.1.1 article元素 1338.1.2 section元素 1348.1.3 nav元素 1358.1.4 aside元素 1378.2 新增的非主體結構元素 1388.2.1 header元素 1388.2.2 hgroup元素 1398.2.3 footer元素 1408.2.4 address元素 1418.3 本章小結 1428.4 練習題 142第9章 CSS入門基礎 1439.1 為什么要在網頁中加入CSS 1439.1.1 什么是CSS 1439.1.2 使用CSS的好處 1459.1.3 如何編寫CSS 1459.1.4 CSS基本語法 1469.1.5 瀏覽器與CSS 1479.2 在HTML中使用CSS 1479.2.1 鏈接外部樣式表 1479.2.2 行內方式 1489.2.3 嵌入外部樣式表 1489.2.4 定義內部樣式表 1499.3 選擇器類型 1499.3.1 標簽選擇器 1499.3.2 類選擇器 1509.3.3 ID選擇器 1519.4 本章小結 1539.5 練習題 154第10章 用CSS設置文本樣式 15510.1 設計網頁中的文字樣式 15510.1.1 font-family屬性 15510.1.2 font-size屬性 15710.1.3 font-weight屬性 15810.1.4 font-style屬性 15910.1.5 font-variant屬性 16010.1.6 text-decoration屬性 16110.2 設計文本的段落樣式 16210.2.1 line-height屬性 16210.2.2 text-align屬性 16210.2.3 text-indent屬性 16310.2.4 word-spacing屬性 16410.2.5 first-letter首字下沉 16510.2.6 text-transform 16610.3 綜合實例——用CSS排版網頁文字 16810.4 本章小結 17010.5 練習題 170第11章 用CSS設計圖像和背景 17111.1 設置網頁的背景 17111.1.1 background-color屬性 17111.1.2 background-image屬性 17211.2 設置背景圖像的屬性 17311.2.1 background-repeat屬性 17311.2.2 background-attachment屬性 17411.2.3 background-position屬性 17511.3 設置網頁圖像的樣式 17511.3.1 border屬性 17611.3.2 圖文混合排版 17711.4 綜合實例——給圖片添加邊框 17711.5 本章小結 17911.6 練習題 179第12章 用CSS設置表格 和表單樣式 18112.1 網頁中的表格 18112.1.1 表格對象標記 18112.1.2 在Dreamweaver中插入 表格 18212.1.3 表格的bgcolor屬性 18312.1.4 表格的border樣式 18412.1.5 設置表格的陰影 18512.2 網頁中的表單 18612.2.1 表單對象 18612.2.2 表單標記 18612.2.3 表單的布局設計 18712.2.4 設置邊框樣式 19012.2.5 設置背景樣式 19012.2.6 設置輸入文本的樣式 19112.3 綜合實例 192綜合實例1——制作變換背景色的表格 192綜合實例2——設計文本框的樣式 19412.4 本章小結 19612.5 練習題 196第13章 用CSS制作鏈接與網站導航 19813.1 超鏈接基礎 19813.1.1 超鏈接的基本概念 19813.1.2 使用頁面屬性設置超鏈接 19913.2 鏈接標記 20013.2.1 a:link 20013.2.2 a:visited 20013.2.3 a:active 20113.2.4 a:hover 20113.3 各種形式的超鏈接 20213.3.1 背景色變換鏈接 20213.3.2 多姿多彩的下畫線鏈接 20413.3.3 圖像翻轉鏈接 20513.3.4 邊框變換鏈接 20613.4 項目列表 20813.4.1 有序列表 20813.4.2 無序列表 21213.5 橫排導航 21713.5.1 文本導航 21713.5.2 標簽式導航 21913.6 豎排導航 22113.7 綜合實例 222實例1——使用CSS實現鼠標指針形狀改變 222實例2——實現背景變換的導航菜單 22413.8 本章小結 22713.9 練習題 228第14章 CSS+DIV布局入門基礎 22914.1 網站與Web標準 22914.1.1 什么是Web標準 22914.1.2 為什么要建立Web標準 23014.1.3 怎樣改進現有網站 23114.2 Div標記與Span 標記 23214.2.1 Div概述 23214.2.2 Div與Span的區別 23314.3 盒子模型 23514.3.1 盒子模型的概念 23514.3.2 border 23514.3.3 padding 24214.3.4 margin 24414.4 盒子的浮動與定位 24614.4.1 盒子的浮動float 24614.4.2 position定位 24914.4.3 z-index空間位置 25414.5 本章小結 25514.6 練習題 255第15章 CSS+DIV布局方法 25715.1 CSS布局理念 25715.1.1 將頁面用div分塊 25715.1.2 用CSS定位 25815.2 固定寬度布局 25915.2.1 一列固定寬度 25915.2.2 兩列固定寬度 26015.2.3 圓角框 26115.3 可變寬度布局 26315.3.1 一列自適應 26315.3.2 兩列寬度自適應 26415.3.3 兩列右列寬度自適應 26515.3.4 三列浮動中間寬度自適應 26615.3.5 三行二列居中高度自適應布局 26715.4 CSS布局與傳統的表格方式布局分析 26915.5 本章小結 27115.6 練習題 271第16章 CSS 3網頁開發 27316.1 CSS 3概述 27316.1.1 CSS 3的發展歷史 27316.1.2 CSS 3的新增特性 27416.1.3 主流瀏覽器對CSS 3的支持 27816.2 邊框 27916.2.1 圓角邊框 border-radius 27916.2.2 邊框圖片border-image 28016.2.3 邊框陰影box-shadow 28116.3 背景 28316.3.1 背景圖片尺寸 background-size 28316.3.2 背景圖片定位區域 background-origin 28416.3.3 背景繪制區域 background-clip 28616.4 文本 28716.4.1 文本陰影text-shadow 28716.4.2 強制換行word-wrap 28816.4.3 文本溢出text-overflow 28916.5 多列 29016.5.1 創建多列column-count 29116.5.2 列的寬度column-width 29216.6 轉換 29316.6.1 移動translate() 29316.6.2 旋轉rotate() 29416.6.3 縮放scale() 29616.7 實例應用——圖片 29716.8 本章小結 29916.9 練習題 299第17章 JavaScript語法基礎 30017.1 JavaScript簡介 30017.1.1 JavaScript的歷史 30017.1.2 JavaScript的特點 30117.2 JavaScript的放置位置 30117.2.1 <script/>使用方法 30117.2.2 使用外部JavaScript 30217.2.3 添加到事件中 30217.3 JavaScript運算符 30317.3.1 算術運算符 30317.3.2 邏輯運算符 30317.3.3 比較運算符 30317.4 JavaScript程序語句 30417.4.1 使用If語句 30417.4.2 使用for循環 30517.4.3 使用Switch語句 30617.4.4 使用while語句 30717.5 綜合實例——制作倒計時特效 30817.6 本章小結 30917.7 練習題 310第18章 JavaScript中的事件 31118.1 事件概述 31118.2 事件分析 31118.2.1 click事件 31218.2.2 change事件 31318.2.3 Select事件 31318.2.4 focus事件 31418.2.5 load事件 31618.2.6 鼠標移動事件 31718.2.7 onBlur事件 31818.3 其他常用事件 31918.4 綜合實例——將事件應用于按鈕中 32118.5 本章小結 32218.6 練習題 322第19章 JavaScript中的函數和對象 32419.1 什么是函數 32419.2 函數的定義 32519.2.1 函數的普通定義方式 32519.2.2 函數的變量定義方式 32619.2.3 函數的指針調用方式 32719.3 JavaScript對象的聲明和引用 32919.3.1 聲明和實例化 32919.3.2 對象的引用 33019.4 瀏覽器對象 33119.4.1 Navigator對象 33219.4.2 window對象 33319.4.3 location對象 33519.4.4 history對象 33519.4.5 document對象 33619.5 內置對象 33819.5.1 Date對象 33819.5.2 數學對象math 34119.5.3 字符串對象string 34219.5.4 數組對象Array 34319.6 綜合實例——改變網頁背景顏色 34519.7 本章小結 34619.8 練習題 346第20章 設計布局富有個性的個人網站 34820.1 個人網站設計指南 34820.1.1 確定網站主題 34820.1.2 個人網站色彩搭配和結構設計 34920.2 網站前期策劃 34920.2.1 確定網站主題 35020.2.2 確定目錄結構 35020.2.3 網站藍圖的規劃 35020.3 創建本地站點 35120.4 制作網站主頁 35320.4.1 導入外部CSS 35420.4.2 制作頂部導航部分 35620.4.3 制作正文部分 35820.4.4 制作底部版權部分 36320.5 本章小結 36320.6 練習題 364第21章 公司宣傳網站的布局 36521.1 企業網站設計指南 36521.1.1 企業網站的主要功能 36521.1.2 色彩搭配與風格設計 36621.2 分析架構 36721.2.1 內容分析 36721.2.2 HTML結構設計 36821.3 各模塊設計 36921.3.1 布局設計 36921.3.2 制作頁頭部分 37121.3.3 制作網頁正文部分 37321.3.4 制作網頁版權部分 37621.4 本章小結 37821.5 練習題 378附錄 部分習題參考答案 379