本書以HTML、CSS以及JavaScript為主, 以大量的實例介紹網(wǎng)頁設(shè)計的基本思想、方法和技術(shù), 同時以大量的工程實踐環(huán)節(jié)鞏固網(wǎng)頁設(shè)計的方法和技術(shù), 力圖使學生達到“做中學, 學中做”的狀態(tài)。主要內(nèi)容包括: HTML概述、基本標記、列表、圖像與多媒體、超鏈接、表格、表單與頁面控件、框架與浮動窗口、JavaScript、CSS、地址薄網(wǎng)站的布局以及初始HTML5。
本書采用“教、學、做”一體化的方式撰寫,合理地組織學習單元,每個單元的核心知識講述在靜態(tài)網(wǎng)頁制作中最重要和實用的知識,能力目標講述使用核心知識點進行靜態(tài)網(wǎng)頁制作的能力,任務(wù)驅(qū)動中的“任務(wù)的代碼模板”起著訓練靜態(tài)網(wǎng)頁制作能力的作用,其中“任務(wù)小結(jié)”主要總結(jié)任務(wù)中涉及的重要技巧、注意事項以及擴展知識,通過該“任務(wù)模板”的訓練,讀者有能力完成后續(xù)的實踐環(huán)節(jié)。
全書共13章。第1章是HTML概述,主要介紹HTML文件的基本結(jié)構(gòu)以及如何運行HTML文件。第2章是HTML文件基本標記,在核心知識點和任務(wù)的安排方面特別注重訓練初學者應(yīng)當掌握和理解的重要基礎(chǔ)知識以及知識點。第3章是文字布局與文字效果,在任務(wù)安排上注重結(jié)合實際問題訓練讀者熟練地設(shè)計網(wǎng)頁中文字布局與文字效果。第4章是列表,著重講解在網(wǎng)頁中使用列表設(shè)計結(jié)構(gòu)化的、易讀的文本。第5章是圖像與多媒體,在任務(wù)安排上注重結(jié)合實際問題訓練讀者熟練地使用圖像與多媒體美化網(wǎng)頁。第6章是超鏈接,主要講述在網(wǎng)頁中如何使用超鏈接。第7章是表格,重點介紹表格的創(chuàng)建、屬性以及結(jié)構(gòu)。第8章是本書的重點內(nèi)容之一——表單與頁面控件,主要講述在網(wǎng)頁中使用表單實現(xiàn)程序與用戶的交互。第9章是框架與浮動窗口,主要介紹框架與浮動窗口的用法。第10章是本書的重點內(nèi)容之一——CCS,主要介紹CSS的基本語法、經(jīng)典的網(wǎng)頁布局。第11章是JavaScript,重點介紹JavaScript的基本語法,在任務(wù)安排上注重結(jié)合實際問題訓練讀者在網(wǎng)頁中熟練地使用JavaScript完成客戶端的特定功能。第12章是一個綜合網(wǎng)站案例——地址簿網(wǎng)站的布局,通過一個小型的地址簿網(wǎng)站,講述如何采用DIV+CSS進行網(wǎng)站的前臺布局設(shè)計。第13章是初始HTML5,簡要介紹HTML5的視頻、音頻、畫布、Web存儲以及表單等內(nèi)容,使讀者初步了解HTML5。
本書特別注重引導學生參與課堂教學活動,適合作為高等院校相關(guān)專業(yè)教、學、做一體化的教材。
為了便于教學,本書配有教學課件、源代碼以及實踐環(huán)節(jié)與課后習題參考答案,讀者可從清華大學出版社網(wǎng)站免費下載,也可加入教材交流QQ群(318848387)下載。
由于編者水平有限,書中難免存在疏漏之處,敬請廣大讀者給予批評指正。
編者
2017年5月
第1章HTML概述
1.1HTML文件的基本結(jié)構(gòu)
1.2使用記事本編寫HTML頁面
1.3使用Eclipse編寫HTML頁面
1.4小結(jié)
習題1
第2章HTML文件基本標記
2.1head和title標記
2.2使用meta標記定義編碼方式、定時跳轉(zhuǎn)以及過渡效果
2.3使用body標記設(shè)置背景色和文字顏色
2.4使用body標記設(shè)置背景圖片和邊距
2.5小結(jié)
習題2
第3章文字布局與文字效果
3.1標題標記
3.2使用font標記設(shè)置文字的大小、字體以及顏色
3.3粗體與斜體
3.4上標與下標
3.5刪除線與下畫線
3.6使用p標記設(shè)計段落格式
3.7水平線
3.8文字滾動
3.9小結(jié)
習題3
第4章列表
4.1無序列表
4.2有序列表
4.3嵌套序列表
4.4小結(jié)
習題4
〖2〗〖4〗
HTML+CSS+JavaScript網(wǎng)頁設(shè)計
目錄〖3〗
第5章圖像與多媒體
5.1在網(wǎng)頁中使用圖像
5.2添加網(wǎng)頁背景音樂
5.3在網(wǎng)頁中使用多媒體
5.4小結(jié)
習題5
第6章超鏈接
6.1在網(wǎng)頁中使用基本超鏈接
6.2在網(wǎng)頁中使用錨點鏈接
6.3在網(wǎng)頁中使用其他鏈接
6.4小結(jié)
習題6
第7章表格
7.1創(chuàng)建表格
7.2設(shè)置表格的寬度、高度以及對齊方式
7.3設(shè)置表格的邊框
7.4設(shè)置表格的背景
7.5設(shè)置表格的行屬性
7.6設(shè)置表格的單元格屬性
7.7表格的嵌套
7.8表格的結(jié)構(gòu)
7.9小結(jié)
習題7
第8章表單與頁面控件
8.1表單標記form
8.2input標記——文本框與密碼框
8.3input標記——單選按鈕與復選框
8.4input標記——按鈕
8.5input標記——圖像域、隱藏域以及文件域
8.6列表與文本區(qū)
8.7小結(jié)
習題8
第9章框架與浮動窗口
9.1框架集與框架
9.2浮動框架
9.3框架鏈接
9.4小結(jié)
習題9
第10章CSS
10.1CSS的語法
10.2在網(wǎng)頁中添加CSS的方法
10.3選擇符的分類
10.4偽類及偽對象
10.5字體屬性
10.6文本屬性
10.7背景屬性
10.8定位屬性
10.9邊框?qū)傩?
10.10邊距與間隙屬性
10.11列表屬性
10.12常見的DIV+CSS布局類型
10.13小結(jié)
習題10
第11章JavaScript
11.1在網(wǎng)頁中添加JavaScript的方法
11.2JavaScript基本語法
11.3流程控制與函數(shù)
11.4JavaScript對象
11.5JavaScript對象模型
11.6操作HTML
11.7表單驗證
11.8小結(jié)
習題11
第12章地址簿網(wǎng)站的布局
12.1網(wǎng)站功能需求
12.2網(wǎng)站內(nèi)容設(shè)計
12.3網(wǎng)站首頁的布局設(shè)計
12.4網(wǎng)站主頁的布局設(shè)計
12.5網(wǎng)站其他頁面的布局設(shè)計
第13章初始HTML5
13.1HTML5概述
13.2HTML5視頻與音頻
13.3HTML5canvas
13.4HTML5SVG
13.5HTML5Web存儲
13.6HTML5表單
13.7小結(jié)
習題13
參考文獻
第1
章
HTML概述
(1)HTML文件的基本結(jié)構(gòu)。
(2)簡單的HTML頁面。
可視化的HTML開發(fā)工具固然方便快捷,如Dreamweaver等。但是,可視化開發(fā)工具自身也會產(chǎn)生大量不必要的HTML代碼,這樣會為以后的程序維護埋下隱患。一個優(yōu)秀的網(wǎng)頁設(shè)計者應(yīng)該在掌握HTML語言的基礎(chǔ)上,進一步熟練使用可視化開發(fā)工具,從而達到快速制作網(wǎng)頁和優(yōu)化網(wǎng)頁的目的。
本章通過簡單的實例介紹HTML文件的基本結(jié)構(gòu)和HTML程序的開發(fā)步驟。
1.1HTML文件的基本結(jié)構(gòu)
1.1.1核心知識
HTML的英文全稱是HyperTextMarkupLanguage,即超文本標記語言,它是用于編寫網(wǎng)頁的主要標記語言。下面是一個HTML文件的基本結(jié)構(gòu)。
…
…
從上面的代碼段可以看出,HTML文件的基本結(jié)構(gòu)分為3部分,其中各部分含義如下。
...:表示HTML文件開始和結(jié)束的位置,里面包括head和body等標記。HTML文件中所有的內(nèi)容都應(yīng)該在這兩個標記之間。
...:HTML文件的頭部標記,習慣將這兩個標記之間的內(nèi)容統(tǒng)稱為HTML的頭部。
...:用來指明文檔的主體區(qū)域,網(wǎng)頁所要顯示的內(nèi)容都要放置在這個標記內(nèi)。習慣將這兩個標記之間的內(nèi)容統(tǒng)稱為HTML的主體。
1.1.2能力目標
了解HTML的基本概念,認識并理解HTML文件的基本結(jié)構(gòu)。
1.1.3任務(wù)驅(qū)動
1.任務(wù)的主要內(nèi)容
把“初次見面,請多多照顧”這句話顯示在網(wǎng)頁的主體域中。
2.任務(wù)的代碼模板
將下列example1_1.html中的【代碼】替換為HTML代碼,有關(guān)代碼要求如下:【代碼1】為title標記的結(jié)束;【代碼2】為body標記的開始;【代碼3】為網(wǎng)頁主體的內(nèi)容“初次見面,請多多照顧”。
example1_1.html的代碼模塊如下:
結(jié)束。每個文件都有自己的擴展名,HTML文件的擴展名為.html或.htm。
4.代碼模板的參考答案
【代碼1】
【代碼2】
【代碼3】初次見面,請多多照顧
1.1.4實踐環(huán)節(jié)
首先,參考1.2節(jié)將example1_1.html完整的代碼保存在操作系統(tǒng)自帶的記事本中,并另存為example1_1.html文件;然后,雙擊example1_1.html文件,觀察運行效果。
1.2使用記事本編寫HTML頁面
1.2.1核心知識
編寫HTML頁面有兩種常用方法:一種是利用操作系統(tǒng)自帶的記事本編寫;另一種是利用可視化網(wǎng)頁制作軟件(如Dreamweaver)編寫。使用可視化網(wǎng)頁制作軟件編寫網(wǎng)頁在本書中不涉及。下面講述使用記事本手工編寫HTML頁面。
HTML語言并不需要什么特殊的開發(fā)環(huán)境,可以直接在操作系統(tǒng)自帶的記事本中編寫。使用記事本手工編寫HTML頁面的具體操作步驟如下。
(1)在Windows操作系統(tǒng)下,右擊,選擇“新建”→“文本文檔”命令,在新建的文本文檔中輸入HTML代碼。
(2)編寫完HTML文件后,選擇“文件”→“另存為”命令,在“另存為”對話框中選擇保存的路徑,在“文件名”文本框中輸入文件的名字,如myPage.html,文件的擴展名為.html或.htm,如圖1.1所示。
(3)單擊“保存”按鈕,這時該文本文件就保存成了HTML文件,雙擊HTML文件就可以看到頁面運行的效果。
圖1.1HTML程序的保存