網(wǎng)頁(yè)制作教程_第1頁(yè)
網(wǎng)頁(yè)制作教程_第2頁(yè)
網(wǎng)頁(yè)制作教程_第3頁(yè)
網(wǎng)頁(yè)制作教程_第4頁(yè)
網(wǎng)頁(yè)制作教程_第5頁(yè)
已閱讀5頁(yè)，還剩63頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)制作教程第1章HTML基礎(chǔ)1思考以下幾個(gè)問(wèn)題？馮·羅依曼提出的計(jì)算機(jī)的五大部件是什么？計(jì)算機(jī)是如何工作的？（工作的原理是什么？）硬件和軟件的關(guān)系是什么？Internet=互聯(lián)網(wǎng)？計(jì)算機(jī)網(wǎng)絡(luò)的概念是什么？HTTP、WWW、DNS、IP的概念是什么？計(jì)算機(jī)病毒是什么？黑客是什么？殺毒軟件和防火墻是一回事嗎？2一馮·羅依曼計(jì)算機(jī)基本結(jié)構(gòu)3二計(jì)算機(jī)的工作原理計(jì)算機(jī)是如何工作的？4計(jì)算機(jī)如何工作？按照“程序存儲(chǔ)，程序控制”的方式工作。具體為將程序和數(shù)據(jù)存放在存儲(chǔ)器中；計(jì)算機(jī)的控制器按照程序中指令序列，從存儲(chǔ)器中取出指令，并分析指令的功能，進(jìn)而發(fā)出各種控制信號(hào)，指揮計(jì)算機(jī)中的各類(lèi)部件來(lái)執(zhí)行該指令。這種通過(guò)取指令、分析指令、執(zhí)行指令的操作重復(fù)執(zhí)行，直到完成程序中的全部指令操作為止。5三硬件和軟件的關(guān)系

計(jì)算機(jī)、軟件及用戶(hù)之間的關(guān)系

6四Internet=互聯(lián)網(wǎng)？Internet——因特網(wǎng)internet——互聯(lián)網(wǎng)7五計(jì)算機(jī)網(wǎng)絡(luò)的概念是什么？定義：兩臺(tái)及兩臺(tái)以上的計(jì)算機(jī)通過(guò)通信介質(zhì)相互連接可以實(shí)現(xiàn)資源共享的集合體。因特網(wǎng)(Internet)是“網(wǎng)絡(luò)的網(wǎng)絡(luò)”。8六一些基本概念HTTPWWWDomainName（域名）DNSIP9七計(jì)算機(jī)病毒、黑客、殺毒、防火墻計(jì)算機(jī)病毒黑客殺毒軟件防火墻10學(xué)習(xí)使用工具1.Dreamweaver8.02.EditPlus3.Frontpage11第1章HTML基礎(chǔ)1.1什么是HTML1.2創(chuàng)建Web頁(yè)1.3發(fā)布Web頁(yè)121.1什么是HTML1.1.1Web頁(yè)的基本概念I(lǐng)nternet與WWW計(jì)算機(jī)網(wǎng)絡(luò)InternetWWWHTTP13WWW示意圖14WWW與瀏覽器15網(wǎng)站與主頁(yè)網(wǎng)站

通常我們把一系列邏輯上可以視為一個(gè)整體的頁(yè)面叫做網(wǎng)站，或者說(shuō)，網(wǎng)站就是一個(gè)有共同主題的頁(yè)面的集合。

主頁(yè)

主頁(yè)是網(wǎng)站中一個(gè)特殊頁(yè)面，它是網(wǎng)站的入口頁(yè)面，其中包含指向其他頁(yè)面的超鏈接。通常主頁(yè)的名稱(chēng)是固定的，例如：index.html。161.1.2HTML的工作原理HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）是表示網(wǎng)頁(yè)的一種規(guī)范（或者說(shuō)是一種標(biāo)準(zhǔn)），它通過(guò)標(biāo)記符定義了網(wǎng)頁(yè)內(nèi)容如何顯示。超鏈接超文本超媒體17如果在瀏覽器中任意打開(kāi)一個(gè)網(wǎng)頁(yè)，然后在窗口中空白位置單擊鼠標(biāo)右鍵，選擇“查看源文件”命令（或者選擇“查看”菜單中的“源文件”命令），則系統(tǒng)會(huì)啟動(dòng)“記事本”，其中包含一些文本信息，如圖1-2所示。18圖1-2網(wǎng)頁(yè)的源文件19網(wǎng)頁(yè)的本質(zhì)—HTML源代碼這些文本其實(shí)就是網(wǎng)頁(yè)的本質(zhì)——HTML源代碼。HTML是表示網(wǎng)頁(yè)的一種規(guī)范（或者說(shuō)是一種標(biāo)準(zhǔn)），它通過(guò)標(biāo)記符定義了網(wǎng)頁(yè)內(nèi)容的顯示。例如，用<table>標(biāo)記符可以在網(wǎng)頁(yè)上定義一個(gè)表格。說(shuō)明：超文本是相對(duì)普通文本而言的，與普通文本按順序定位不同，超文本最典型的特點(diǎn)就是文本中包含指向其他位置的鏈接，通過(guò)這些鏈接使文檔組織成了網(wǎng)狀結(jié)構(gòu)，如圖1-3所示.20圖1-3超文本示意圖21瀏覽器如何顯示網(wǎng)頁(yè)在HTML文檔中，通過(guò)使用標(biāo)記符可以告訴瀏覽器如何顯示網(wǎng)頁(yè)，即確定內(nèi)容的顯示格式。瀏覽器按順序讀取HTML文件，然后根據(jù)內(nèi)容周?chē)腍TML標(biāo)記符解釋和顯示各種內(nèi)容。例如，如果為某段內(nèi)容添加<H1></H1>標(biāo)記符，則瀏覽器會(huì)以比一般文字大的粗體字顯示該段內(nèi)容，如圖1-4所示。22圖1-4瀏覽器解釋HTML標(biāo)記示意23超文本功能HTML中的超文本功能，也就是超鏈接功能，使網(wǎng)頁(yè)之間可以鏈接起來(lái)。網(wǎng)頁(yè)與網(wǎng)頁(yè)的鏈接構(gòu)成了網(wǎng)站，而網(wǎng)站與網(wǎng)站的鏈接就構(gòu)成了多姿多彩的WWW。HTML由國(guó)際組織W3C（萬(wàn)維網(wǎng)聯(lián)盟）制定和維護(hù)，本書(shū)中的主要內(nèi)容是以HTTP4.0為基礎(chǔ)的。24W3C網(wǎng)站：251.1.3創(chuàng)建和測(cè)試Web頁(yè)（使用記事本作演示）261.1.4網(wǎng)頁(yè)編輯工具第一類(lèi)：HTML編輯器EditPlus、HomeSite、BBedit第二類(lèi)：所見(jiàn)即所得編輯器Dreamweaver、FrontPage認(rèn)識(shí)Dreamweaver271.2創(chuàng)建Web頁(yè)1.2.1標(biāo)記符基礎(chǔ)基本的HTML語(yǔ)法標(biāo)記符的屬性1.2.2Web頁(yè)的基本結(jié)構(gòu)HTML標(biāo)記首部標(biāo)記28基本的HTML語(yǔ)法HTML是一種腳本語(yǔ)言，使用標(biāo)記符，語(yǔ)法簡(jiǎn)單。標(biāo)記符都用<>括起來(lái)，一般成對(duì)出現(xiàn)，分別稱(chēng)作開(kāi)始標(biāo)記符和結(jié)束標(biāo)記符。例：<HTML></HTML><HEAD></HEAD>但有些標(biāo)記符只要求單一標(biāo)記號(hào)。例：換行標(biāo)記符<BR>HTML標(biāo)記符不區(qū)分大小寫(xiě)，但約定使用大寫(xiě)。29標(biāo)記符的屬性屬性是用來(lái)描述對(duì)象特征的特性。許多標(biāo)記符還包含一些屬性，以便對(duì)標(biāo)記符作用的內(nèi)容進(jìn)行更詳細(xì)的控制。屬性放在開(kāi)始標(biāo)記符的<>中，屬性與標(biāo)記符之間用空格分隔，屬性值用等號(hào)與屬性連接，屬性之間也用空格分隔。例：<FONTsize=“1”,color=“green”>屬性通常不區(qū)分大小寫(xiě)，但習(xí)慣用小寫(xiě)。301.2.2Web頁(yè)的基本結(jié)構(gòu)<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>31HTML標(biāo)記<HTML>和</HTML>是WEB頁(yè)第一個(gè)和最后一個(gè)標(biāo)記符，其他標(biāo)記符和內(nèi)容都位于這兩個(gè)標(biāo)記符之間。這兩個(gè)標(biāo)記符都可以省略，保留可以使網(wǎng)頁(yè)結(jié)構(gòu)更完整。32首部標(biāo)記<HEAD>和</HEAD>位于Web頁(yè)的開(kāi)頭，其中不包括Web頁(yè)的任何實(shí)際內(nèi)容，而是提供一些與Web頁(yè)有關(guān)的特定信息。首標(biāo)記的內(nèi)容也用特定的標(biāo)記括起來(lái)33TITLE標(biāo)記符<TITLE>和</TITLE>，用于定義網(wǎng)頁(yè)的標(biāo)題。網(wǎng)頁(yè)標(biāo)題可被瀏覽器用作書(shū)簽和收藏清單。當(dāng)網(wǎng)頁(yè)在瀏覽器中顯示時(shí)，網(wǎng)頁(yè)標(biāo)題將在瀏覽器窗口的標(biāo)題欄中顯示。例如，以下HTML代碼在瀏覽器中的顯示如圖1-6所示。34例子<HTML><HEAD><TITLE>這里是網(wǎng)頁(yè)標(biāo)題</TITLE></HEAD><BODY>請(qǐng)看瀏覽器的標(biāo)題欄。</BODY></HTML>35圖1-6TITLE標(biāo)記符的效果362．META標(biāo)記META，它用于說(shuō)明與Web頁(yè)有關(guān)的信息。META標(biāo)記符的常用屬性包括：name屬性給出特性名content屬性給出特性值http-equiv屬性指定HTTP響應(yīng)名稱(chēng)，通常用于替換name屬性，HTTP服務(wù)器使用該屬性值為HTTP響應(yīng)消息頭收集信息。37例子例：<METAhttp-equiv=“Content-Script-Type”content=“text/javascript”>設(shè)置客戶(hù)端行內(nèi)程序的語(yǔ)言是JavaScript。例：<METAhttp-equiv="Content-Style-Type"content="text/css">設(shè)置行內(nèi)樣式的樣式語(yǔ)言為CSS。38設(shè)置自動(dòng)轉(zhuǎn)址功能META標(biāo)記符的一個(gè)常用功能是設(shè)置自動(dòng)轉(zhuǎn)址功能，即使瀏覽器自動(dòng)從一個(gè)地址跳轉(zhuǎn)到另一個(gè)地址，如下所示。39例子<HTML><HEAD><TITLE>META示例</TITLE><METAhttp-equiv="Refresh"content="30;URL=title(tu1-6).htm"></HEAD><BODY>META示例</BODY></HTML>在此例中，完成當(dāng)前文檔加載30秒后將自動(dòng)加載另一個(gè)文檔（即“URL=”后指定的HTML文檔），如圖1-7所示。40圖1-7利用META實(shí)現(xiàn)自動(dòng)轉(zhuǎn)址功能30秒后自動(dòng)跳轉(zhuǎn)41說(shuō)明：要實(shí)現(xiàn)以上效果，必須使“URL=”后指定的HTML文檔存在。在該例子中，我們指定跳轉(zhuǎn)的目標(biāo)為當(dāng)前目錄的某個(gè)文件。在實(shí)際使用此功能時(shí)，也可以直接指定一個(gè)完整的URL地址（例如）。42BGSOUND標(biāo)記符指定網(wǎng)頁(yè)的背景音樂(lè)。只有開(kāi)始標(biāo)識(shí)符，沒(méi)有結(jié)束標(biāo)識(shí)符。語(yǔ)法格式：<BGSOUNDsrc=音樂(lè)文件loop=播放次數(shù)>

音樂(lè)文件格式一般為.wav、.mid、.mp3等。例：<BGSOUNDsrc=“千里之外.mp3”loop=“2”>43正文標(biāo)記符<BODY>和</BODY>包含Web頁(yè)的具體內(nèi)容，包括文字、圖形、超鏈接以及其他各種HTML對(duì)象。如果沒(méi)有其他標(biāo)記符修飾，正文標(biāo)記符中的文字將以無(wú)格式的形式顯示（如果瀏覽器窗口顯示不下，則自動(dòng)換行）。例如，以下HTML代碼在瀏覽器中的顯示如圖1-8所示。44例子<HTML><HEAD><TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE></HEAD><BODY>正文，正文，正文，正文，正文，正文，正文，正文，正文</BODY></HTML>45圖1-846注意：空格、回車(chē)這些格式控制在顯示時(shí)都不起作用，如要使它們起作用，應(yīng)使用預(yù)格式化標(biāo)記符<PRE>和</PRE>將需要采用原始格式的內(nèi)容包含起來(lái)。471.2.3設(shè)置頁(yè)面屬性設(shè)置頁(yè)面背景顏色在<BODY>標(biāo)記符中使用bgcolor屬性可以為網(wǎng)頁(yè)設(shè)置背景顏色。例如，如果想為網(wǎng)頁(yè)設(shè)置黑色背景，應(yīng)使用以下HTML語(yǔ)句：<BODYbgcolor="black">在指定背景顏色時(shí)，有16種標(biāo)準(zhǔn)顏色可供選擇，通過(guò)顏色名表示顏色通過(guò)設(shè)置RGB（RedGreenBlue）值來(lái)表示顏色如表1-1所示。48表1-116種標(biāo)準(zhǔn)顏色色彩名十六進(jìn)制值色彩名十六進(jìn)制值A(chǔ)qua（水藍(lán)色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（藍(lán)色）#0000FFPurple（紫色）#800080Fuchsia（櫻桃色）#FF00FFRed（紅色）#FF0000Gray（灰色）#808080Silver（銀色）#C0C0C0Green（綠色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐紅色）#800000Yellow（黃色）#FFFF004950設(shè)置頁(yè)面背景圖像單純使用一種顏色作為背景顯然有些單調(diào)，網(wǎng)頁(yè)設(shè)計(jì)者也可選擇特定圖案作為頁(yè)面的背景——使用BODY標(biāo)記符的background屬性即可。HTML語(yǔ)句為：<BODYbackground="網(wǎng)頁(yè)背景圖案的地址">51使用背景圖案時(shí)，如果圖案小于瀏覽器窗口的大小，則瀏覽器會(huì)自動(dòng)象鋪地板磚一樣平鋪背景圖案。例如，以下代碼顯示了設(shè)置背景圖案的效果，如圖1-9所示。<HTML><HEAD><TITLE>背景圖案示例</TITLE></HEAD><BODYbackground="background.jpg">背景圖案示例</BODY></HTML>52圖1-9背景圖案示例53注意：如果要使以上代碼正確工作，必須在網(wǎng)頁(yè)所在目錄包含background.jpg文件。用戶(hù)也可以同時(shí)設(shè)置網(wǎng)頁(yè)的背景圖案和背景色，在這種情況下，只有在瀏覽器不能顯示圖像時(shí)才顯示背景色。例如，如果用戶(hù)將瀏覽器設(shè)置為不顯示圖像（選擇“工具”菜單中的“Internet選項(xiàng)”命令，然后選擇“高級(jí)”選項(xiàng)卡，在“多媒體”下設(shè)置），那么給網(wǎng)頁(yè)設(shè)置的背景圖案將不顯示，而是顯示背景顏色。54設(shè)置背景圖像水印效果例：<BODYbackground=“background.jpg”bgproperties=“fixed”>55設(shè)置文字和超鏈接的顏色text屬性用于設(shè)置正文的顏色Link屬性用于設(shè)置未被訪問(wèn)的超鏈接顏色Vlink屬性用于設(shè)置已訪問(wèn)的超鏈接顏色Alink屬性用于活動(dòng)超鏈接的顏色例：<BODYbgcolor=“#000000”text=“#FFFFFF”link=“#999999”vlink=“#cccccc”alink=“#666666”>561.2.4添加注釋格式：<!--和結(jié)束標(biāo)記符-->這兩個(gè)標(biāo)記符之間的任何內(nèi)容都將被瀏覽器解釋為注釋?zhuān)辉跒g覽器中顯示。57例：<HTML><HEAD><TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE></HEAD><BODY>正文，正文，正文，正文<!--本行文字將不會(huì)在瀏覽器中顯示！--></BODY></HTML>58圖1-10注釋不在網(wǎng)頁(yè)中顯示注意：注釋可插入在Web頁(yè)的任何位置。591.2.5顯示特殊字符如果用戶(hù)需要在網(wǎng)頁(yè)中顯示某些特殊字符，例如：<、>等與HTML語(yǔ)法沖突的符號(hào)（瀏覽器會(huì)自動(dòng)將<號(hào)后的內(nèi)容解釋為HTML標(biāo)記符），或者×、∑、±等無(wú)法直接用鍵盤(pán)輸入的符號(hào)，則需使用參考字符來(lái)表示，而不能直接輸入。60參考字符以“&”號(hào)開(kāi)始，以“；”結(jié)束，既可以使用數(shù)字代碼，也可以使用代碼名稱(chēng)。最常見(jiàn)的參考字符為：<表示為<>表示為>&表示為&空格表示為 有關(guān)參考字符完整的編碼請(qǐng)參見(jiàn)附錄2。注意：與HTML標(biāo)記符不同，字符代碼名稱(chēng)區(qū)分大小寫(xiě)。61

例如，要在Web頁(yè)中顯示內(nèi)容“<Tom&Jerry>isapopularVCDprogram.”，則需使用參考字符。HTML代碼如下，在瀏覽器中的顯示如圖1-11所示。<HTML><HEAD>

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論