《HTML5+CSS3網(wǎng)頁制作教程》課件-第1章_第1頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第1章_第2頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第1章_第3頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第1章_第4頁
《HTML5+CSS3網(wǎng)頁制作教程》課件-第1章_第5頁
已閱讀5頁,還剩22頁未讀 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

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

1.1HTML簡介

1.1.1初識HTML

HTML的全稱是“HyperTextMarkupLanguage”,即超文本標(biāo)記語言,網(wǎng)頁就是用HTML語言編寫的。HTML是一種描述性的語言,比較容易入門。

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

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

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

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

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

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

HTML從被發(fā)明使用開始,歷史版本如下:

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

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

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

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

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

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

1.2前端開發(fā)工具

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

1.2.2?HBuilder

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

1.2.3?SublimeText

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

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

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

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

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

1.3案例:使用Dreamweaver創(chuàng)建站點

【案例描述】使用Dreamweaver創(chuàng)建一個站點,學(xué)習(xí)如何在計算機中搭建上機環(huán)境?!究己酥R點】使用Dreamweaver創(chuàng)建站點?!揪毩?xí)目標(biāo)】(1)熟悉Dreamweaver軟件環(huán)境。(2)掌握站點的創(chuàng)建方法。

【案例步驟】

1.準備上機環(huán)境

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

圖1-4安裝界面

圖1-5安裝進程

圖1-6軟件主界面

2.創(chuàng)建站點

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

用Dreamweaver之前,必須要創(chuàng)建一個本地站點。

創(chuàng)建站點的步驟如下:

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

圖1-7新建的“站點測試”文件夾

(2)啟動Dreamweaver,選擇“站點”→“新建站點”菜單命令,如圖1-8所示。

圖1-8新建站點

(3)在彈出的對話框中的“站點名稱”文本框中輸入“站點測試”,設(shè)置“本地站點文件夾”為D盤中新建的“站點測試”文件夾,如圖1-9所示。

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

圖1-9選擇本地站點文件夾和名稱

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

思考與練習(xí)題

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

D.XML

2.HTML是指()。

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

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

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

D.以上都不正確

3.網(wǎng)頁的擴展名是()。

A..html

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論