HTML+CSS+JavaScript網頁設計（簡體書）

HTML與CSS網頁設計是動漫設計與制作、視覺效果設計、多媒體技術、計算機網絡技術等專業的必修課程，也是許多計算機愛好者所希望掌握的技能。

本書采用“教、學、做”一體化方式撰寫，精選大量的真實案例，循序漸進地介紹使用HTML和CSS創建網頁以及進行頁面布局的基礎知識。注重結合實例講解一些難點和關鍵技術，在實例上側重實用性和啟發性。特別強調知識點的能力目標，通過合理的任務驅動和實踐環節提高靜態網頁制作能力。全書分為13章，內容包括HTML概述、HTML文件基本標記、文字布局與文字效果、列表、圖像與多媒體、超鏈接、表格、表單與頁面控件、框架與浮動窗口、CSS、JavaScript、地址簿網站的布局以及初始HTML5。

本書適合作為高等院校動漫設計與制作、計算機網絡技術等專業的相關課程教材。

第1章HTML概述

1.1HTML文件的基本結構

1.2使用記事本編寫HTML頁面

1.3使用Eclipse編寫HTML頁面

1.4小結

習題1

第2章HTML文件基本標記

2.1head和title標記

2.2使用meta標記定義編碼方式、定時跳轉以及過渡效果

2.3使用body標記設置背景色和文字顏色

2.4使用body標記設置背景圖片和邊距

2.5小結

習題2

第3章文字布局與文字效果

3.1標題標記

3.2使用font標記設置文字的大小、字體以及顏色

3.3粗體與斜體

3.4上標與下標

3.5刪除線與下畫線

3.6使用p標記設計段落格式

3.7水平線

3.8文字滾動

3.9小結

習題3

第4章列表

4.1無序列表

4.2有序列表

4.3嵌套序列表

4.4小結

習題4

〖2〗〖4〗

HTML+CSS+JavaScript網頁設計

目錄〖3〗

第5章圖像與多媒體

5.1在網頁中使用圖像

5.2添加網頁背景音樂

5.3在網頁中使用多媒體

5.4小結

習題5

第6章超鏈接

6.1在網頁中使用基本超鏈接

6.2在網頁中使用錨點鏈接

6.3在網頁中使用其他鏈接

6.4小結

習題6

第7章表格

7.1創建表格

7.2設置表格的寬度、高度以及對齊方式

7.3設置表格的邊框

7.4設置表格的背景

7.5設置表格的行屬性

7.6設置表格的單元格屬性

7.7表格的嵌套

7.8表格的結構

7.9小結

習題7

第8章表單與頁面控件

8.1表單標記form

8.2input標記——文本框與密碼框

8.3input標記——單選按鈕與復選框

8.4input標記——按鈕

8.5input標記——圖像域、隱藏域以及文件域

8.6列表與文本區

8.7小結

習題8

第9章框架與浮動窗口

9.1框架集與框架

9.2浮動框架

9.3框架鏈接

9.4小結

習題9

第10章CSS

10.1CSS的語法

10.2在網頁中添加CSS的方法

10.3選擇符的分類

10.4偽類及偽對象

10.5字體屬性

10.6文本屬性

10.7背景屬性

10.8定位屬性

10.9邊框屬性

10.10邊距與間隙屬性

10.11列表屬性

10.12常見的DIV+CSS布局類型

10.13小結

習題10

第11章JavaScript

11.1在網頁中添加JavaScript的方法

11.2JavaScript基本語法

11.3流程控制與函數

11.4JavaScript對象

11.5JavaScript對象模型

11.6操作HTML

11.7表單驗證

11.8小結

習題11

第12章地址簿網站的布局

12.1網站功能需求

12.2網站內容設計

12.3網站首頁的布局設計

12.4網站主頁的布局設計

12.5網站其他頁面的布局設計

第13章初始HTML5

13.1HTML5概述

13.2HTML5視頻與音頻

13.3HTML5canvas

13.4HTML5SVG

13.5HTML5Web存儲

13.6HTML5表單

13.7小結

習題13

參考文獻

第1

章

HTML概述

(1)HTML文件的基本結構。

(2)簡單的HTML頁面。

可視化的HTML開發工具固然方便快捷，如Dreamweaver等。但是，可視化開發工具自身也會產生大量不必要的HTML代碼，這樣會為以后的程序維護埋下隱患。一個優秀的網頁設計者應該在掌握HTML語言的基礎上，進一步熟練使用可視化開發工具，從而達到快速制作網頁和優化網頁的目的。

本章通過簡單的實例介紹HTML文件的基本結構和HTML程序的開發步驟。

1.1HTML文件的基本結構

1.1.1核心知識

HTML的英文全稱是HyperTextMarkupLanguage，即超文本標記語言，它是用于編寫網頁的主要標記語言。下面是一個HTML文件的基本結構。

…

…

從上面的代碼段可以看出，HTML文件的基本結構分為3部分，其中各部分含義如下。

...：表示HTML文件開始和結束的位置，里面包括head和body等標記。HTML文件中所有的內容都應該在這兩個標記之間。

...：HTML文件的頭部標記，習慣將這兩個標記之間的內容統稱為HTML的頭部。

...：用來指明文檔的主體區域，網頁所要顯示的內容都要放置在這個標記內。習慣將這兩個標記之間的內容統稱為HTML的主體。

1.1.2能力目標

了解HTML的基本概念，認識并理解HTML文件的基本結構。

1.1.3任務驅動

1.任務的主要內容

把“初次見面，請多多照顧”這句話顯示在網頁的主體域中。

2.任務的代碼模板

將下列example1_1.html中的【代碼】替換為HTML代碼，有關代碼要求如下：【代碼1】為title標記的結束；【代碼2】為body標記的開始；【代碼3】為網頁主體的內容“初次見面，請多多照顧”。

example1_1.html的代碼模塊如下：

結束。每個文件都有自己的擴展名，HTML文件的擴展名為.html或.htm。

4.代碼模板的參考答案

【代碼1】

【代碼2】

【代碼3】初次見面，請多多照顧

1.1.4實踐環節

首先，參考1.2節將example1_1.html完整的代碼保存在操作系統自帶的記事本中，并另存為example1_1.html文件；然后，雙擊example1_1.html文件，觀察運行效果。

1.2使用記事本編寫HTML頁面

1.2.1核心知識

編寫HTML頁面有兩種常用方法：一種是利用操作系統自帶的記事本編寫；另一種是利用可視化網頁制作軟件(如Dreamweaver)編寫。使用可視化網頁制作軟件編寫網頁在本書中不涉及。下面講述使用記事本手工編寫HTML頁面。

HTML語言并不需要什么特殊的開發環境，可以直接在操作系統自帶的記事本中編寫。使用記事本手工編寫HTML頁面的具體操作步驟如下。

(1)在Windows操作系統下，右擊，選擇“新建”→“文本文檔”命令，在新建的文本文檔中輸入HTML代碼。

(2)編寫完HTML文件后，選擇“文件”→“另存為”命令，在“另存為”對話框中選擇保存的路徑，在“文件名”文本框中輸入文件的名字，如myPage.html，文件的擴展名為.html或.htm，如圖1.1所示。

(3)單擊“保存”按鈕，這時該文本文件就保存成了HTML文件，雙擊HTML文件就可以看到頁面運行的效果。

圖1.1HTML程序的保存