網(wǎng)頁制作實(shí)用教程(第3版)第1章課件_第1頁
網(wǎng)頁制作實(shí)用教程(第3版)第1章課件_第2頁
網(wǎng)頁制作實(shí)用教程(第3版)第1章課件_第3頁
網(wǎng)頁制作實(shí)用教程(第3版)第1章課件_第4頁
網(wǎng)頁制作實(shí)用教程(第3版)第1章課件_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第1章網(wǎng)頁制作基礎(chǔ)能夠了解了解認(rèn)識(shí)分析簡(jiǎn)單的網(wǎng)頁源碼html頁面的基本結(jié)構(gòu)網(wǎng)頁的本質(zhì)互聯(lián)網(wǎng)有關(guān)的基礎(chǔ)概念編寫簡(jiǎn)單的靜態(tài)頁面能夠知識(shí)技能目標(biāo)本章主要內(nèi)容預(yù)備知識(shí)1.1網(wǎng)頁1.2網(wǎng)站的一般開發(fā)流程1.31.1預(yù)備知識(shí)1.1.3URL1.1.4DNS1.1.5IP地址1.1.8電子郵件1.1.9HTTP1.1.10HTML1.1.1因特網(wǎng)1.1.2萬維網(wǎng)1.1.6瀏覽器1.1.7FTP1.1.1因特網(wǎng)

因特網(wǎng)（Internet）又稱網(wǎng)際網(wǎng)路或互聯(lián)網(wǎng)、英特網(wǎng)，是網(wǎng)絡(luò)與網(wǎng)絡(luò)之間所串連成的龐大網(wǎng)絡(luò)，這些網(wǎng)絡(luò)以一組通用的協(xié)定相連，形成邏輯上的單一巨大國(guó)際網(wǎng)絡(luò)。這種將計(jì)算機(jī)網(wǎng)絡(luò)互相聯(lián)接在一起的方法可稱作“網(wǎng)絡(luò)互聯(lián)”，在這基礎(chǔ)上發(fā)展出覆蓋全世界的全球性互聯(lián)網(wǎng)絡(luò)稱“互聯(lián)網(wǎng)”，即是“互相連接一起的網(wǎng)絡(luò)”。Internet主要提供的服務(wù)有萬維網(wǎng)（WWW）、文件傳輸協(xié)議（FTP）、電子郵件（E-mail）及遠(yuǎn)程登錄等。1.1.2萬維網(wǎng)萬維網(wǎng)（WorldWideWeb）簡(jiǎn)稱Web或WWW，是一個(gè)基于超文本（Hypertext）方式的信息檢索服務(wù)技術(shù)，它將位于Internet上不同地點(diǎn)的相關(guān)數(shù)據(jù)信息有機(jī)地編織在一起。WWW提供一種良好的信息查詢接口，用戶僅需提出查詢要求，而到什么地方查詢及如何查詢則由WWW自動(dòng)完成。Web是我們登錄Internet后最常利用到的Internet的功能。人們連入Internet后，有一半以上的時(shí)間都是在與各種各樣的web頁面打交道。在基于web方式下，我們可以瀏覽、搜索、查詢各種信息，可以發(fā)布自己的信息，可以與他人進(jìn)行實(shí)時(shí)或者非實(shí)時(shí)的交流，可以游戲、娛樂、購物等。1.1.3URLURL為“UniformResourceLocator”的縮寫，通常翻譯為“統(tǒng)一資源定位器”，它是一個(gè)指定Internet上資源位置的標(biāo)準(zhǔn)，也就是人們常說的網(wǎng)址。其格式為：通訊協(xié)議：//服務(wù)器地址[：通訊端口]/[路徑]通訊協(xié)議：使計(jì)算機(jī)之間能交換信息的一組規(guī)則和標(biāo)準(zhǔn)。服務(wù)器地址：指出WWW頁面所在的服務(wù)器域名。通訊端口：有時(shí)（并非總是這樣）對(duì)某些資源的訪問來說，需給出相應(yīng)的服務(wù)器提供服務(wù)的端口號(hào)。路徑：指明服務(wù)器上某個(gè)資源的位置（其格式與DOS系統(tǒng)中的格式一樣，通常由“目錄/子目錄/文件名”這樣的結(jié)構(gòu)組成）。與端口一樣，路徑并非總是需要的。例如，/

就是典型的URL地址。1.1.4DNSDNS是“DomainNameService”的縮寫，通常翻譯為“域名管理系統(tǒng)”，簡(jiǎn)稱為域名，它采用分層管理模式，用于將機(jī)器的名稱轉(zhuǎn)變成IP地址。DNS使用階層式的命名標(biāo)準(zhǔn)。此階層的運(yùn)作方式是由右而左，在右邊的表示最高等級(jí)。簡(jiǎn)單的范例如圖1-1所示：圖1-1DNS階層式的命名1.1.5IP地址IP（InternetProtocol）即因特網(wǎng)協(xié)議，是為計(jì)算機(jī)網(wǎng)絡(luò)相互連接進(jìn)行通信而設(shè)計(jì)的協(xié)議，是計(jì)算機(jī)在因特網(wǎng)上進(jìn)行相互通信時(shí)應(yīng)當(dāng)遵守的規(guī)則。IP地址是給因特網(wǎng)上的每臺(tái)計(jì)算機(jī)和其他設(shè)備分配的一個(gè)唯一的地址。1.1.6瀏覽器瀏覽器是指將互聯(lián)網(wǎng)上的文本文檔（或其他類型的文件）翻譯成網(wǎng)頁，并讓用戶與這些文件交互的一種軟件工具，主要用于查看網(wǎng)頁的內(nèi)容。在Windows環(huán)境中較為流行的Web瀏覽器為微軟的InternetExplorer，MozillaFirefox，谷歌的Chrome，這些瀏覽器在性能方面各有千秋，在用戶界面上也有所不同。本文的實(shí)例全部使用IE瀏覽器打開查看。1.1.7FTPFTP（FileTransferProtocol）即文件傳輸協(xié)議，是一種快速、高效和可靠的信息傳輸方式，通過該協(xié)議可把文件從一個(gè)地方傳輸?shù)搅硪粋€(gè)地方，從而真正實(shí)現(xiàn)資源共享。制作好的網(wǎng)頁要上傳到服務(wù)器上，就要用到FTP。1.1.8電子郵件電子郵件又稱E-mail,是目前Internet上使用最多、最受歡迎的一種服務(wù)。電子郵件是利用計(jì)算機(jī)網(wǎng)絡(luò)的電子通信功能傳送信件、單據(jù)、資料等電子媒體信息的通信方式，它最大的特點(diǎn)是可以在任何地方、任何時(shí)間收發(fā)信件，大大提高了工作效率，為辦公自動(dòng)化、商業(yè)活動(dòng)提供了很大的便利。1.1.9HTTP超文本傳輸協(xié)議（HyertextTransferProtocol，HTTP），它是一種最常用的網(wǎng)絡(luò)通信協(xié)議。若想鏈接到某一特定的網(wǎng)頁時(shí)，就必須通過HTTP協(xié)議，不論你是用哪一種網(wǎng)頁編輯軟件，無論在網(wǎng)頁中加入什么資料，或是使用哪一種瀏覽器，利用HTTP協(xié)議都可以看到正確的網(wǎng)頁效果。1.1.10HTMLHTML（HyperTextMarkupLanguage）即超文本標(biāo)記語言，是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言，也是制作網(wǎng)頁最基本的語言，它可以直接由瀏覽器執(zhí)行。1.2網(wǎng)頁網(wǎng)頁的本質(zhì)1.2.11.2.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁1.2.3網(wǎng)頁設(shè)計(jì)的概述·

人民郵電出版社·1.2.1網(wǎng)頁的本質(zhì)網(wǎng)頁實(shí)際上就是一個(gè)文件，這個(gè)文件存放在世界上某個(gè)地方的某一臺(tái)計(jì)算機(jī)中，而且這臺(tái)計(jì)算機(jī)必須要與因特網(wǎng)相連接。網(wǎng)頁是由網(wǎng)址（URL）來識(shí)別與存取的。在瀏覽器的地址欄中輸入網(wǎng)頁的地址后，經(jīng)過復(fù)雜而又快速的程序解析后，網(wǎng)頁文件就會(huì)被傳送到計(jì)算機(jī)中，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，最后展現(xiàn)在瀏覽者的眼前。什么是網(wǎng)頁的本質(zhì)？在回答這個(gè)問題之前先請(qǐng)?jiān)L問一個(gè)網(wǎng)頁，首先向IE瀏覽器地址欄輸入U(xiǎn)RL地址（例如網(wǎng)易的主頁），這也就是向服務(wù)器發(fā)送了一個(gè)請(qǐng)求，當(dāng)服務(wù)器接收到這個(gè)請(qǐng)求時(shí)，則必須做出反應(yīng)，也就是反饋。之后客戶端接收到了反饋信息，并在瀏覽器中顯示所要的內(nèi)容。這個(gè)過程也可以用圖簡(jiǎn)單表示，如圖1-2所示。圖1-2?訪問網(wǎng)頁的一般過程·

人民郵電出版社·網(wǎng)頁打開了，出現(xiàn)在眼前的是圖文并貌的網(wǎng)頁頁面。它們是怎么傳過來的呢？選擇IE瀏覽器頁面中的“查看>源文件”命令，會(huì)彈出一個(gè)用記事本打開的文本文件（用其他瀏覽器，可能會(huì)在瀏覽器新打開一個(gè)標(biāo)簽顯示網(wǎng)頁源碼），這就是該網(wǎng)頁的源碼，也就是所謂的網(wǎng)頁的本質(zhì)。該文件的內(nèi)容是從Web服務(wù)器端傳遞過來的，如圖1-3所示。圖1-3

查看網(wǎng)頁源文件從記事本中可以看到，網(wǎng)頁的源文件由一些類似<html>這樣的標(biāo)簽組成。這些標(biāo)簽是HTML語言的標(biāo)記。HTML的英文全稱是HyperTextMarkupLanguage，直譯為超文本標(biāo)記語言。該語言不是一種程序設(shè)計(jì)語言，而是一種描述文檔結(jié)構(gòu)的標(biāo)記語言。它的作用是通過一些標(biāo)簽來指示瀏覽器如何顯示包含在標(biāo)簽中的內(nèi)容。參考下面一段程序：<HTML><HEAD><TITLE>MyHomepage</TITLE></HEAD><BODY><fontcolor=red>Helloworld!!</font></BODY></HTML>1．HTML標(biāo)記<html>標(biāo)記放在HTML文件的開頭，以</html>標(biāo)記結(jié)尾，用以向?yàn)g覽器說明，該文件是HTML文件。2．“文件頭”標(biāo)記

文件頭標(biāo)記是以<head>開頭，以</head>結(jié)尾。一般放在<html>標(biāo)記的后面，用以說明網(wǎng)頁的標(biāo)題，連接，關(guān)鍵字等信息。3．“文件標(biāo)題”標(biāo)記

標(biāo)題標(biāo)記為<title>和</title>。這對(duì)標(biāo)記用來設(shè)定文件的標(biāo)題，注釋該文件的內(nèi)容。瀏覽器通常都會(huì)將文件標(biāo)題顯示在瀏覽器窗口的左上角。4．“文件體”標(biāo)記

文件體標(biāo)記為<body>和</body>。一般用來指明HTML文檔的內(nèi)容，如文字、標(biāo)題、段落和列表等，也可以用來定義頁面的背景顏色。以下幾個(gè)標(biāo)記都是包含在body標(biāo)記中的。5．“標(biāo)題”標(biāo)記

標(biāo)題標(biāo)記的格式為<hn>和</hn>。(n代表從1~6的數(shù)字)。此標(biāo)記被用來設(shè)置標(biāo)題字體的大小。HTML準(zhǔn)許有<h1>至<h6>這6級(jí)標(biāo)題。6．“字體”標(biāo)記

字體標(biāo)記的格式為<font>和</font>，用來設(shè)置網(wǎng)頁中文字的各種屬性，比如字體、大小、顏色等。7．“表格”標(biāo)記

表格標(biāo)記的格式為<table>和</table>，用來在網(wǎng)頁中插入表格，表格在網(wǎng)頁中的應(yīng)用十分廣泛，除了用以顯示數(shù)據(jù)外，還可以使用它來進(jìn)行網(wǎng)頁布局，實(shí)現(xiàn)網(wǎng)頁元素定位。在<table>和</table>標(biāo)簽中，還可以使用<tr>和</tr>標(biāo)記定義表格行，<th>和</th>標(biāo)記定義表頭，<td>和</td>標(biāo)記定義表格單元。8．“圖片”標(biāo)記

圖片標(biāo)記的格式為<imgsrc=#>（#代表圖片的URL）。用于在網(wǎng)頁中顯示圖片，要注意圖片標(biāo)記與上面的幾個(gè)標(biāo)記不同，它沒有結(jié)尾標(biāo)記。HTML文檔結(jié)構(gòu)如圖1-4所示。圖1-4

HTML文檔結(jié)構(gòu)

用記事本編輯上文提到的HTML代碼，并保存為“MyHomepage.html”，如圖1-5(a)所示。然后用瀏覽器打開該文件（直接雙擊文件圖標(biāo)），得到如圖1-5(b)所示的結(jié)果。圖1-5（a）記事本查看網(wǎng)頁

圖1-5（b）瀏覽器打開網(wǎng)頁從圖1-5(a)中可以看到，在<font>標(biāo)記里有“color=red”代碼，用于指明字體的顏色是紅色。標(biāo)記中用來修飾標(biāo)記內(nèi)容的部分叫做標(biāo)記屬性，color就是font標(biāo)記中修飾字體顏色的屬性。屬性是用來修飾標(biāo)記的，通過對(duì)屬性賦予不同的值，可使網(wǎng)頁顯示不同的風(fēng)格。HTML的規(guī)則很多，用戶不需要全部掌握，能夠看懂各種HTML標(biāo)記，會(huì)給標(biāo)記屬性賦值就可以了?？炊瓾TML代碼，不僅可以使自己制作網(wǎng)頁時(shí)得心應(yīng)手，還可以借助別人的技術(shù)來充實(shí)自己的網(wǎng)頁。另外，在HTML文件中，還可以加入腳本語言(如JavaScript或VBScript)，使用腳本語言，可以制作出許多網(wǎng)頁特效。1.2.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是相對(duì)于動(dòng)態(tài)網(wǎng)頁而言的，并不是說網(wǎng)頁中的元素是靜止不動(dòng)的。靜態(tài)網(wǎng)頁是指瀏覽器與服務(wù)器端不發(fā)生交互的網(wǎng)頁，網(wǎng)頁中的Gif動(dòng)畫、Flash以及Flash按鈕等都會(huì)發(fā)生變化。靜態(tài)網(wǎng)頁的執(zhí)行過程大致為：1.瀏覽器向網(wǎng)絡(luò)中的服務(wù)器發(fā)出請(qǐng)求，指向某個(gè)靜態(tài)網(wǎng)頁。2.服務(wù)器接到請(qǐng)求后，將傳輸給瀏覽器，此時(shí)傳送的只是文本文件。3.瀏覽器接到服務(wù)器傳來的文件后解析HTML標(biāo)簽，將結(jié)果顯示出來。1.2.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁除了靜態(tài)網(wǎng)頁中的元素外，還包括一些應(yīng)用程序，這些程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為，而且應(yīng)用程序的執(zhí)行需要服務(wù)器中的應(yīng)用程序服務(wù)器才能完成。無論網(wǎng)頁是否具有動(dòng)態(tài)效果，采用動(dòng)態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁都稱為動(dòng)態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁是相對(duì)應(yīng)的，靜態(tài)網(wǎng)頁的URL后綴是以htm、html、shtml、xml等常見形式出現(xiàn)的。而動(dòng)態(tài)網(wǎng)頁的URL后綴是以asp、jsp、php、perl、cgi等形式出現(xiàn)的。利用DreamweaverCS6即可以創(chuàng)建靜態(tài)網(wǎng)頁，也可以創(chuàng)建動(dòng)態(tài)網(wǎng)頁。本書主要介紹創(chuàng)建靜態(tài)網(wǎng)頁技術(shù)。1.2.3網(wǎng)頁設(shè)計(jì)的概述網(wǎng)頁設(shè)計(jì)是一個(gè)網(wǎng)頁創(chuàng)作的過程，是根據(jù)客戶需求從無到有的過程，網(wǎng)頁設(shè)計(jì)具有很強(qiáng)的視覺效果、互動(dòng)性、操作性等其他媒體所不具有的特點(diǎn)。一個(gè)成功的網(wǎng)頁設(shè)計(jì)，首先在觀念上要確立動(dòng)態(tài)的思維方式，其次要有效地將圖形引入網(wǎng)頁設(shè)計(jì)中，提高人們?yōu)g覽網(wǎng)頁的興趣。在崇尚鮮明個(gè)性風(fēng)格的今天，網(wǎng)頁設(shè)計(jì)應(yīng)該增加個(gè)性化的因素。網(wǎng)頁設(shè)計(jì)并非是純粹的技術(shù)型工作，而是融合了網(wǎng)絡(luò)應(yīng)用技術(shù)與美術(shù)設(shè)計(jì)兩個(gè)方面。因此，對(duì)從業(yè)人員來說，僅掌握網(wǎng)頁設(shè)計(jì)制作的相關(guān)軟件是遠(yuǎn)遠(yuǎn)不夠的，還需要有一定的美術(shù)功底和審美能力。1.3.5發(fā)布站點(diǎn)1.3.4測(cè)試站點(diǎn)1.3.3網(wǎng)頁的實(shí)施與細(xì)化1.3.2規(guī)劃站點(diǎn)1.3.1收集資料和素材1.3.6更新和維護(hù)站點(diǎn)網(wǎng)站的一般開發(fā)流程1.3網(wǎng)站的一般開發(fā)流程1.3.1收集資料和素材網(wǎng)站里最重要的資源是文字資源和圖片資源，因此大部分的收集工作應(yīng)圍繞這兩種資源展開。資源收集的途徑很多。概括說來，主要有網(wǎng)絡(luò)資源收集、光盤資源收集和書籍資源收集三種。如果這三種方式都不能找到所需要的資源，那么只好請(qǐng)專人進(jìn)行創(chuàng)作了。網(wǎng)站中不應(yīng)該只使用收集來的資源，原創(chuàng)的內(nèi)容能吸引更多的訪問者。因此，雖然親自進(jìn)行創(chuàng)作是一件很辛苦的工作，但我們鼓勵(lì)在網(wǎng)站建設(shè)中盡可能多地使用原創(chuàng)內(nèi)容。對(duì)于收集到的資源，有必要對(duì)其進(jìn)行分類、整理以及編輯、處理，使其符合自己的要求。值得一提的是，如果收集來的資源是有版權(quán)的，使用前應(yīng)先與作者聯(lián)系，在使用時(shí)也應(yīng)署名出處。尊重版權(quán)是每一個(gè)網(wǎng)站制作者應(yīng)遵循的原則1.3.2規(guī)劃站點(diǎn)在創(chuàng)建站點(diǎn)之前需要對(duì)站點(diǎn)進(jìn)行規(guī)劃，站點(diǎn)的形式有并列、層次和網(wǎng)狀等，需根據(jù)實(shí)際情況進(jìn)行選擇。在規(guī)劃站點(diǎn)時(shí)應(yīng)按站點(diǎn)所包含的內(nèi)容進(jìn)行頻道的劃分，如要制作一個(gè)綜合性網(wǎng)站，其包含的內(nèi)容非常多，如軍事、文學(xué)、社會(huì)、時(shí)政、體育和情感等多個(gè)方面，在各主頻道下面又有很多的小欄目，各小欄目下面又包括許多的網(wǎng)頁，設(shè)計(jì)網(wǎng)站時(shí)需要考慮到各個(gè)網(wǎng)頁的內(nèi)容及版式。1.3.3網(wǎng)頁的實(shí)施與細(xì)化完成站點(diǎn)規(guī)劃后，便可具體到每一個(gè)頁面的制作，在制作網(wǎng)頁時(shí)，首先要做的就是設(shè)計(jì)版面布局，就像傳統(tǒng)的報(bào)刊雜志制作一樣，可將網(wǎng)頁看作一張報(bào)紙進(jìn)行排版布局。版面指的是在瀏覽器中看到的完整的頁面大小。因?yàn)椴煌娘@示器分辨率不同，所以，同一個(gè)頁面的大小可

溫馨提示

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

評(píng)論

0/150

提交評(píng)論