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

下載本文檔

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

文檔簡介

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

計算機、軟件及用戶之間的關(guān)系

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

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

主頁

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

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

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

溫馨提示

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

評論

0/150

提交評論