《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第1章

模塊1網(wǎng)頁(yè)制作入門(mén)1.1HTML簡(jiǎn)介1.2前端開(kāi)發(fā)工具1.3案例：使用Dreamweaver創(chuàng)建站點(diǎn)思考與練習(xí)題

1.1HTML簡(jiǎn)介

1.1.1初識(shí)HTML

HTML的全稱(chēng)是“HyperTextMarkupLanguage”，即超文本標(biāo)記語(yǔ)言，網(wǎng)頁(yè)就是用HTML語(yǔ)言編寫(xiě)的。HTML是一種描述性的語(yǔ)言，比較容易入門(mén)。

為了更直觀地給大家呈現(xiàn)網(wǎng)頁(yè)制作語(yǔ)言HTML，可以打開(kāi)W3school的網(wǎng)站首頁(yè)，如圖1-1所示。

圖1-1W3school網(wǎng)站首頁(yè)

右擊鼠標(biāo)，選擇“查看頁(yè)面源代碼”(如圖1-2所示)，可查看編寫(xiě)該網(wǎng)頁(yè)的HTML編碼(如圖1-3所示)。圖1-2查看頁(yè)面源代碼

圖1-3W3school網(wǎng)站首頁(yè)的HTML編碼

1.1.2?HTML的發(fā)展歷程

HTML是由Web的發(fā)明者TimBerners-Lee和同事DanielW.Connolly于1990年創(chuàng)立的一種標(biāo)記語(yǔ)言。用HTML將所需要表達(dá)的信息(如網(wǎng)頁(yè)上面的影像、聲音、圖片、文字、動(dòng)畫(huà)、影視等內(nèi)容)按照某種規(guī)則編寫(xiě)成超文本文檔或HTML文檔，這些HTML文檔獨(dú)立于各個(gè)操作系統(tǒng)平臺(tái)(如Windows、Mac等)。瀏覽器可以識(shí)別這些HTML文件，并將其“翻譯”成可以識(shí)別的信息，最終形成了我們所見(jiàn)到的網(wǎng)頁(yè)。

HTML從被發(fā)明使用開(kāi)始，歷史版本如下：

(1)HTML1.0，1993年6月作為互聯(lián)網(wǎng)工作小組(IETF)工作草案發(fā)布。

(2)HTML2.0，1995年11月作為RFC1866發(fā)布，于2000年6月被宣布已經(jīng)過(guò)時(shí)。

(3)HTML3.2，1997年1月14日發(fā)布，W3C推薦標(biāo)準(zhǔn)。

(4)HTML4.0，1997年12月18日發(fā)布，W3C推薦標(biāo)準(zhǔn)。

(5)HTML4.01(微小改進(jìn))，1999年12月24日發(fā)布，W3C推薦標(biāo)準(zhǔn)。

(6)HTML5，是公認(rèn)的下一代Web語(yǔ)言，它極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手。InternetExplorer8及以前的版本不支持HTML5。

1.2前端開(kāi)發(fā)工具

1.2.1?DreamweaverDreamweaver，簡(jiǎn)稱(chēng)DW，是Adobe公司研發(fā)的一款網(wǎng)頁(yè)開(kāi)發(fā)工具，深受廣大用戶(特別是初學(xué)者)的喜愛(ài)?，F(xiàn)在的最新版本是DreamweaverCC。對(duì)于初學(xué)者來(lái)說(shuō)，Dreamweaver是首選。

1.2.2?HBuilder

HBuilder是數(shù)字天堂推出的一款支持HTML5的Web開(kāi)發(fā)集成工具，目前官方主推的是升級(jí)版HBuilderX。H是HTML的首字母，Builder是構(gòu)造者，X是HBuilder的下一代版本，簡(jiǎn)稱(chēng)HX。HBuilder主體本身是由Java編寫(xiě)的，它的特點(diǎn)是快，這是HBuilder的最大優(yōu)勢(shì)。通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊等，可以大幅提升HTML、JS、CSS的開(kāi)發(fā)效率。HBuilderX為C++架構(gòu)，啟動(dòng)速度、大文檔打開(kāi)速度、編碼提示速度都更快，可達(dá)到極速響應(yīng)。

1.2.3?SublimeText

SublimeText是一款流行的代碼編輯器軟件，也是HTML文本編輯器，擁有漂亮的用戶界面和極其強(qiáng)大的功能，是深受許多程序員喜歡的一款文本編輯器軟件。

SublimeText支持多種編程語(yǔ)言的語(yǔ)法高亮，擁有優(yōu)秀的代碼自動(dòng)完成功能，還擁有代碼片段(Snippet)的功能，即可以將常用的代碼片段保存起來(lái)，在需要時(shí)隨時(shí)調(diào)用。它

還支持VIM(文本編輯器)模式，可以使用VIM模式下的多數(shù)命令。

SublimeText具有良好的擴(kuò)展能力、完全開(kāi)放的用戶自定義配置，以及神奇實(shí)用的編輯狀態(tài)恢復(fù)功能，支持強(qiáng)大的多行選擇和多行編輯。該編輯器在界面上比較有特色的是支持多種布局和代碼縮略圖。利用右側(cè)的文件縮略圖滑動(dòng)條，可以方便地觀察當(dāng)前窗口在文件中的位置。

SublimeText具有編輯狀態(tài)恢復(fù)的能力，即當(dāng)你修改了一個(gè)文件，沒(méi)有保存就退出時(shí)，軟件不會(huì)詢問(wèn)用戶是否保存，但在下次啟動(dòng)軟件后，之前的編輯狀態(tài)都會(huì)被完整恢復(fù)。

1.3案例：使用Dreamweaver創(chuàng)建站點(diǎn)

【案例描述】使用Dreamweaver創(chuàng)建一個(gè)站點(diǎn)，學(xué)習(xí)如何在計(jì)算機(jī)中搭建上機(jī)環(huán)境。【考核知識(shí)點(diǎn)】使用Dreamweaver創(chuàng)建站點(diǎn)。【練習(xí)目標(biāo)】(1)熟悉Dreamweaver軟件環(huán)境。(2)掌握站點(diǎn)的創(chuàng)建方法。

【案例步驟】

1.準(zhǔn)備上機(jī)環(huán)境

首先在計(jì)算機(jī)上安裝Dreamweaver，下載并雙擊文件夾中的安裝程序(Setup.exe)進(jìn)行安裝，安裝過(guò)程中需要登錄(沒(méi)有Adobe賬戶的用戶需要先行注冊(cè))，登錄后安裝程序會(huì)自動(dòng)運(yùn)行。接受軟件的安裝許可協(xié)議后，會(huì)進(jìn)入軟件的第一次使用界面，設(shè)置軟件的工作區(qū)和主題后，即可進(jìn)入軟件主界面，如圖1-4～圖1-6所示。

圖1-4安裝界面

圖1-5安裝進(jìn)程

圖1-6軟件主界面

2.創(chuàng)建站點(diǎn)

一個(gè)站點(diǎn)是一個(gè)存儲(chǔ)區(qū)，它存儲(chǔ)了一個(gè)網(wǎng)站包含的所有文件。通俗一些說(shuō)，一個(gè)站點(diǎn)就是一個(gè)網(wǎng)站所有內(nèi)容存放的文件夾。Dreamweaver的使用是以站點(diǎn)為基礎(chǔ)的，所以在使

用Dreamweaver之前，必須要?jiǎng)?chuàng)建一個(gè)本地站點(diǎn)。

創(chuàng)建站點(diǎn)的步驟如下：

(1)在計(jì)算機(jī)中選擇合適的目錄，新建一個(gè)文件夾。如在D盤(pán)建立一個(gè)名為“站點(diǎn)測(cè)試”的文件夾，如圖1-7所示，將所有相關(guān)的網(wǎng)頁(yè)文件和文件夾都存儲(chǔ)在該文件夾中。

圖1-7新建的“站點(diǎn)測(cè)試”文件夾

(2)啟動(dòng)Dreamweaver，選擇“站點(diǎn)”→“新建站點(diǎn)”菜單命令，如圖1-8所示。

圖1-8新建站點(diǎn)

(3)在彈出的對(duì)話框中的“站點(diǎn)名稱(chēng)”文本框中輸入“站點(diǎn)測(cè)試”，設(shè)置“本地站點(diǎn)文件夾”為D盤(pán)中新建的“站點(diǎn)測(cè)試”文件夾，如圖1-9所示。

(4)點(diǎn)擊“保存”按鈕，站點(diǎn)就創(chuàng)建完了，如圖1-10所示，之后在這個(gè)目錄下新建的文件或文件夾都會(huì)顯示在右邊的目錄里面。

圖1-9選擇本地站點(diǎn)文件夾和名稱(chēng)

圖1-10創(chuàng)建好的站點(diǎn)

思考與練習(xí)題

一、選擇題1.網(wǎng)頁(yè)的基本語(yǔ)言是()。A.JavaScriptB.VBScriptC.HTML

D.XML

2.HTML是指()。

A.超文本標(biāo)記語(yǔ)言(hypertextmarkuplanguage)

B.家庭工具標(biāo)記語(yǔ)言(hometoolmarkuplanguage)

C.超鏈接和文本標(biāo)記語(yǔ)言(hyperlinksandtextmarkuplanguage)

D.以上都不正確

3.網(wǎng)頁(yè)的擴(kuò)展名是()。

A..html