第7章網頁設計基礎_第1頁
第7章網頁設計基礎_第2頁
第7章網頁設計基礎_第3頁
第7章網頁設計基礎_第4頁
第7章網頁設計基礎_第5頁
已閱讀5頁,還剩53頁未讀 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

第七章

網頁基礎學習目標網頁的基本概念

HTML基礎

了解網頁制作的常用工具Part1網頁的基本概念Internet通俗地講,Internet(因特網)就是許多功能不同的計算機通過線路連接起來組成的一個世界范圍的網絡。Internet提供的主要服務Internet提供的服務:WWW服務(網上沖浪)電子郵件服務(Email)即時通信(QQ)文件傳輸(FTP)電子商務WWWWWW是WorldWideWeb的縮寫,也可簡寫為Web,中文叫做萬維網。萬維網是虛擬的。它是無數不斷變化的、種類不同的文檔的集合,這些文檔駐留在因特網上的某個地方,都是用某種形式的HTML編寫的。Web服務器與瀏覽器WWW的結構主要分為兩個部分,一為服務器端(Server;二為客戶端(Client)。這種模式稱為客戶機/服務器(Client/Server)模式。Web服務器:將網頁資源有機地組織到一起,供用戶通過瀏覽器下載、瀏覽。WWW是由遍布在Internet上的稱為Web服務器的計算機組成。Web客戶端:用來訪問Web服務器資源的瀏覽器,現在最常用瀏覽器的就是IE。瀏覽器是獲取WWW服務的基礎。Web服務器與瀏覽器HTTPHyperTextTransferProtocol——超文本傳輸協(xié)議瀏覽Web就是以HTTP在Internet上傳送以HTML(HypertextMarkupLanguage)——超文本標記語言編寫的網頁內容。從而進行信息交流。HTMLHTML(HypertextMarkupLanguage:超文本標記語言),它是一種規(guī)范,它通過標記符(tag)來標記要在網頁中顯示的各個部分。HTML用于描述超文本的顯示方式,從控制文字的顏色、大小,到標識資料的種類為圖形文件或者聲音等。根據HTML語法所寫出來的文件稱為HTML文件。HTML文件在保存時,需保存為純文本文件,并用.html或.htm作為擴展名。網頁與網站網頁(Webpages)

網頁(html文檔)是網站的組成部分。它是網站的一個元素,每個網頁對應著磁盤上的一個文件,由Web瀏覽器下載并格式化。

網站(Website)

在邏輯上可視為一個整體的一系列頁面的有機集合稱為網站(WebSite或Site)。主頁主頁(Homepage)

一個網站開始點的頁面稱為“主頁”(也叫“首頁”)。通常將其命名為index.html(或default.html)。

它和一般的網頁一樣,也是一個單獨的網頁文件,可以介紹各種信息,但作為主頁,它的主要功能是作為瀏覽站點其他網頁的出發(fā)點和其他網頁的匯總點。

HTML由國際組織W3C(萬維網聯(lián)盟)制定和維護,目前常用的HTML的版本是4.0(幾乎所有瀏覽器都支持),HTML4.01對HTML4.0作了一些小的修正。本課程的主要內容是以4.0為基礎的。如果需要了解HTML的更詳細情況,請訪問W3C的官方網站:,可以從該網站中獲得最新的HTML規(guī)范。HTML版本HTML和CSS老板本的HTML將內容、結構和格式化指令組合在一個文檔中,這雖然比較簡單,但是不夠強大。W3C設計了一個新系統(tǒng),在這個系統(tǒng)中,格式化指令可以與內容和結構分開保存,因此可以根據需要應用于單一段落或網頁,甚至整個網站。這個系統(tǒng)就稱為CSS(層疊樣式表)本課程主要介紹使用HTML和CSS技術來編寫網頁。CSS層疊樣式表CSS是CascadingStyleSheet的縮寫。譯作「層疊樣式表」。是用于控制網頁元素的顯示方式樣式表的宗旨就是將結構(內容)和格式分離CSS也是一種標記語言,有很多屬性來源于HTML,它也需要通過瀏覽器解釋執(zhí)行。XML和XHTML從外表來看,XML與HTML很相似,它們都是由標記、屬性和值組成的。XML是一種用來創(chuàng)建其他語言的語言。W3C用XML重寫了HTML,被稱為XHTML,它具有HTML和XML兩者的優(yōu)點。這種新語言具有HTML的所有特性,因此所有瀏覽器都能夠理解它。統(tǒng)一資源定位器(URL)URL的全文為UniformResourceLocator,譯為統(tǒng)一資源定位器URL可分為四部分:

協(xié)議://主機名/地點/文件名協(xié)議:說明數據傳輸的方式(服務類型)。常見的服務協(xié)議有:http、ftp、file、mailto等。主機名:指的是服務器的地址,可以是IP地址或域名。地點:指的是在服務器中網頁所在的目錄。文件名:指的是要瀏覽的網頁文件名。URL舉例

長沙理工大學的網址:http:///pub/cslg/index.htm

等價于:http:///pub/cslg/Web服務器及其工作原理

Web服務器負責對來自客戶的請求做出回答,并且負責管理信息、尋找信息和傳遞信息。常見的Web服務器軟件有:IIS(Internetinformationserver)ApacheTomcat瀏覽網頁的工作過程用戶通過瀏覽器發(fā)出請求;WEB服務器接到請求后選擇相應的網頁發(fā)給用戶的瀏覽器;瀏覽器接收到網頁文件(HTML文件)后,根據HTML標記符解釋和顯示各種內容。網頁技術概況目前的網頁技術,大致可分為三個方面靜態(tài)網頁(HTML、CSS):僅展示信息靜態(tài)網頁是用HTML編寫,擴展名為.htm或.html。靜態(tài)網頁只能單純地在網頁中展示文字與圖片,它是所有網頁的基礎技術。網頁美工(Flash、Fireworks)動態(tài)網頁(JavaScript/VBScript、ASP、JSP、PHP等):可實現交互功能網頁編輯和美化工具網頁編輯(1)超文本標識語言(HTML)(2)Dreamweaver(3)FrontPage網頁美化(1)Photoshop(2)Fireworks(3)Flash超文本標識語言(HTML)

HTML(HypertextMarkupLanguage)是一種專門用于Web頁制作的編程語言,用來描述超文本各個部分的內容,告訴瀏覽器如何顯示文本,怎樣生成與別的文本或圖像的鏈接點。超文本標識語言(HTML)

HTML文檔由三種基本組件組成:文本內容,包括頁面上出現的標題和段落;對更復雜的內容的偶爾引用,比如鏈接、圖像和Flash動畫,等等;以及標記,也就是描述內容和引用應該如何顯示的指令。重要的是,這些組件都是由文本組成的。這個基本特性意味著網頁可以保存為純文本格式,可以使用任何文本編輯器進行網頁編輯,可以在任何平臺上用任何瀏覽器查看。Dreamweaver

Dreamweaver是由Macromedia公司推出的一款在網頁制作方面大眾化的軟件,它具有可視化編輯界面,用戶不必編寫復雜的HTML源代碼就可以生成跨平臺、跨瀏覽器的網頁,不僅適合于專業(yè)網頁編輯人員的需要,同時也容易被業(yè)余網友們所掌握。

Dreamweaver支持動態(tài)HTML,是一種可以滿足多層次需求、功能強大的可視化專業(yè)級網頁設計及制作工具。FrontPageFrontPage是由Microsoft公司推出的新一代Web網頁制作工具。FrontPage使網頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網頁,具有直觀的網頁制作和管理方法,簡化了大量工作。FrontPage界面與Word、PowerPoint等軟件的界面極為相似,為使用者帶來了極大的方便,Microsoft公司將FrontPage封裝入Office之中,成為Office家族的一員,使之功能更為強大。PhotoshopPhotoshop是由Adobe公司開發(fā)的圖形處理軟件,它是目前公認的PC機上最好的通用平面美術設計軟件,它功能完善、性能穩(wěn)定、使用方便,所以在幾乎所有的廣告、出版、軟件公司,Photoshop都是首選的平面制作工具。FireworksFireworks是由Macromedia公司開發(fā)的圖形處理工具,它的出現使Web作圖發(fā)生了革命性的變化。因為Fireworks是第一套專門為制作網頁圖形而設計的軟件,同時也是專業(yè)的網頁圖形設計及制作的解決方案。作為一個圖像處理軟件,Fireworks能夠自由地導入多種格式的圖像進行處理。Fireworks還能夠自動切割圖像、生成光標動態(tài)感應的JavaScript程序等等,而且Fireworks具有強大的動畫功能和一個相當完美的網絡圖像生成器。FlashFlash是美國Macromedia公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件,它是一種交互式動畫設計工具,用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起,以制作出高品質的網頁動態(tài)效果。已成為交互式矢量動畫的標準。Flash廣泛應用于網頁動畫制作、教學動畫演示、網上購物、在線游戲等的制作中。學習HTML的重要性學習網頁制作除了學習Frontpage或者Dreamweaver

等工具,還要學習HTML語言,因為一些精細的工作還是需要手工編寫部分代碼。了解HTML基礎知識對學習Frontpage或者是Dreamweaver有一定的幫助,也會為下一步學習ASP/PHP等動態(tài)腳本語言打下基礎。Part2HTML基礎如果在瀏覽器中任意打開一個網頁,然后在窗口中空白位置單擊鼠標右鍵,選擇“查看源文件”命令(或者選擇“查看”菜單中的“源文件”命令),則系統(tǒng)會啟動“記事本”,其中包含一些文本信息。HTML文檔中華人民共和國教育部網站中華人民共和國教育部網站

首頁源程序這些文本其實就是網頁的本質——HTML源代碼。HTML(HyperTextMarkupLanguage,超文本標記語言)是表示網頁的一種規(guī)范(或者說是一種標準),它通過標記符定義了網頁內容的顯示。例如,用<table>標記符可以在網頁上定義一個表格。網頁的本質中華人民共和國教育部

教育管理信息中心網頁中華人民共和國教育部

教育管理信息中心網頁源程序

超文本是相對普通文本而言的,與普通文本按順序定位不同,超文本最典型的特點就是文本中包含指向其他位置的鏈接,通過這些鏈接使文檔組織成了網狀結構,如下圖所示(這實際上也是WWW信息組織的基本原理)。說明圖超文本示意圖我們可以把常規(guī)意義上的書本理解為普通文本,而把由超鏈接組織起來的電子文檔理解為超文本。超文本示意圖在HTML文檔中,通過使用標記符可以告訴瀏覽器如何顯示網頁,即確定內容的顯示格式。瀏覽器按順序讀取HTML文件,然后根據內容周圍的HTML標記符解釋和顯示各種內容。例如,如果為某段內容添加<H1></H1>標記符,則瀏覽器會以比一般文字大的粗體字顯示該段內容,如下圖所示。HTML標記符圖瀏覽器解釋HTML標記符示意標記符與瀏覽器HTML標簽概述HTML并不是一種程序,它是一種控制網頁中資料顯示的標記語言元素:當用一組HTML標簽將一段文字包含在中間時,這段文字與包含文字的HTML標簽被稱之為一個元素。一個HTML文件由一系列元素組成。元素是HTML文件的重要組成部分,如title(文檔標題)、img(圖像)、table(表格)等等。HTML標簽概述在HTML中,所有的標記符都用尖括號括起來。例如,<html>、<a>。<a

href="">W3School</a><a>元素最重要的屬性是href屬性,它指定鏈接的目標。HTML標記符是不區(qū)分大小寫的。<html>、<Html>和<HTML>沒有區(qū)別。HTML標簽概述絕大多數標記符都是成對出現的,包括開始標記符和結束標記符。某些標記符,例如<BR>,只要求單一標記符號(也可為<BR/>)。開始標記符與結束標記符的區(qū)別在于:結束標記符多一個斜杠“/”(不是反斜杠“\”?。〩TML標簽的屬性屬性是用來描述對象特征的特性。例如,一個人的身高、體重就是人這個對象的屬性。在HTML中,所有的屬性都放置在開始標記符的尖括號里,多個屬性之間用空格分開,通常也不區(qū)分大小寫。HTML標簽的屬性例如,可以用字體標記符和字號屬性指定文字的大小。<FONTsize=4color=red>

本行為4號字,顏色為紅色。</FONT>Web頁的基本結構在HTML語法中,一個元素可以包含另一元素,因此,整個HTML文件就像是一個大元素,包含了許多小元素。

在HTML文件中,最外層的元素是<html>標簽,它包含兩個主要的子元素,這兩個子元素是由<head>標簽與<body>標簽建立.<head>標簽所建立的元素的內容為文件標題<body>標簽所建立的元素內容為文件主體。HTML文檔結構下面我們開始編寫一個HTML文檔。<html><head><title>第一個HTML示例</title></head><body>HTML的基本結構。

</body></html>在瀏覽器上的顯示結果從上述代碼中我們可以看出HTML文檔的基本結構如下圖所示:網頁文件命名*.htm或*.html無空格無特殊符號(例如&符號),只可以有下劃線“_”,只可以為英文、數字區(qū)分大小寫(為避免出錯,最好全用小寫)首頁文件名默認為:index.htm或index.htmlHEAD標簽首部標記<HEAD>和</HEAD>位于Web頁的開頭其中不包括Web頁的任何實際內容,而是提供一些與Web頁有關的特定信息。HEAD標簽首部標記也可包含其它元素。例如,樣式表(CSS)定義位于<STYLE>和</STYLE>之間;

腳本定義位于<SCRIPT></SCRIPT>之間;

溫馨提示

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

評論

0/150

提交評論