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