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