網(wǎng)頁設計與制作

關于網(wǎng)頁設計與制作第1頁，共20頁，2022年，5月20日，20點7分，星期五1.1Internet的基礎知識Internet譯為“因特網(wǎng)”，也稱為國際互聯(lián)網(wǎng)或互聯(lián)網(wǎng)，它是指通過TCP/IP協(xié)議將世界各地的網(wǎng)絡連接起來實現(xiàn)資源共享，并提供各種應用服務的全球性計算機網(wǎng)絡。它是當今世界上最大、最流行的計算機網(wǎng)絡，是信息社會的基礎，在人類社會的各個領域中起著重大的作用。第2頁，共20頁，2022年，5月20日，20點7分，星期五1.1.1Internet提供的服務類型Internet擁有不計其數(shù)的網(wǎng)絡資源，用戶可以在Internet上獲得所需的任何信息。人們最熟悉的常用功能有網(wǎng)絡信息瀏覽（WWW）、電子郵件（E-mail）、新聞組（NewsGroup）、文件傳輸（FTP）、遠程登錄（Telnet）、電子公告板（BBS），以及Internet提供的其他豐富多彩的服務。第3頁，共20頁，2022年，5月20日，20點7分，星期五1.1.2萬維網(wǎng)和瀏覽器萬維網(wǎng)（WorldWideWeb，WWW）也可以簡稱為Web、W3、3W等，它是基于“超文本”的信息查詢和信息發(fā)布的系統(tǒng)。Web就是以Internet上眾多的Web服務器所發(fā)布的相互鏈接的文檔為基礎，組成的一個龐大的信息網(wǎng)，它不僅可以提供文本信息，還可以包括聲音、圖形、圖像以及動畫等多媒體信息，它為用戶提供了圖形化的信息傳播界面——網(wǎng)頁。InternetExplorer（IE）是微軟公司開發(fā)的Web瀏覽器，可以搜索、查看和下載Internet上的各種信息。第4頁，共20頁，2022年，5月20日，20點7分，星期五1.2IP地址和Internet域名與Internet相連的任何一臺計算機（稱為主機）都有唯一的一個網(wǎng)絡地址，簡稱為IP地址。在Internet中域名可以通過域名系統(tǒng)（DomainNameSystem，DNS）映射為IP地址，方便人們記憶站點。第5頁，共20頁，2022年，5月20日，20點7分，星期五1.2.1IP地址該地址由32位二進制數(shù)組成。，該地址就稱為這臺主機的IP地址。IP地址是在Internet網(wǎng)絡中為每一臺主機分配的由32位二進制數(shù)組成的唯一標識符，例如，某臺主機的IP地址是00001010010000010101011111011100。為了便于記憶，通常又把32位二進制數(shù)分成四個字節(jié)段，每字節(jié)段8位，用小數(shù)點將它們隔開，然后把每一字節(jié)段數(shù)都轉(zhuǎn)換成相應的十進制數(shù)，稱為點分十進制數(shù)。例如，這臺主機用點分十進制數(shù)表示為20。因此，最小的IP地址值為，最大的地址值為55。IP地址又分為A類、B類、C類、D類和E類。第6頁，共20頁，2022年，5月20日，20點7分，星期五例1-1

根據(jù)IP地址判斷其網(wǎng)絡類別、網(wǎng)絡地址和主機地址。若已知主機的IP地址為33，請確定該主機所在網(wǎng)絡的類別、網(wǎng)絡號及它的主機號。分析：(1)把四組十進制數(shù)轉(zhuǎn)變?yōu)樗淖止?jié)32位的二進制數(shù)。四組十進制數(shù)33對應32位二進制數(shù)11001010110001000000000010000101。(2)確定網(wǎng)絡類別。第一字節(jié)是11001010，則它的前三位進制數(shù)為110，所以該主機所在網(wǎng)絡的類別是C類。(3)確定網(wǎng)絡地址。C類網(wǎng)的前三個字節(jié)是它的網(wǎng)絡地址，即202.196.0。(4)確定主機地址。C類網(wǎng)的主機地址是第四字節(jié)，所以它的主機地址是10000101。結(jié)論：該主機所在網(wǎng)絡的類別是C類，網(wǎng)絡號為201.196.0，主機號為133。第7頁，共20頁，2022年，5月20日，20點7分，星期五1.2.2域名系統(tǒng)由于IP地址是數(shù)字標識，使用時難以記憶和書寫，因此在IP地址的基礎上又發(fā)展出一種符號化的地址方案，來代替數(shù)字型的IP地址。每一個符號化的地址都與特定的IP地址對應，這樣網(wǎng)絡上的資源訪問起來就容易得多了。這個與網(wǎng)絡上的數(shù)字型IP地址相對應的字符型地址，就被稱為域名。例如，清華大學的IP地址為00

，對應的域名為。第8頁，共20頁，2022年，5月20日，20點7分，星期五下面以清華大學的域名（）來分析一下域名的構(gòu)成：www是為用戶提供服務的主機類型；tsinghua代表清華大學；edu代表教育科研網(wǎng)；cn代表中國。域名的結(jié)構(gòu)是一種分層次結(jié)構(gòu)，根據(jù)域的大小，從小到大用“.”分隔。按照Internet的組織模式，域名有兩種分類方法：一種是按照機構(gòu)進行分類，如表1-2所示。另一種是按國家和地區(qū)進行分類，如cn（中國）、us（美國）、hk（香港）等。第9頁，共20頁，2022年，5月20日，20點7分，星期五1.2.3統(tǒng)一資源定位器客戶機與Web服務器的交互是通過超文本傳輸協(xié)議（HTTP）來完成的，用戶要查詢的某一臺Web服務器是通過統(tǒng)一資源定位器(UniformResourceLocator，URL)來指定的。URL是一個指定因特網(wǎng)或內(nèi)聯(lián)網(wǎng)服務器中目標定位位置的格式化字符串，與在計算機中根據(jù)指明的路徑查找文件類似，它是在WWW中瀏覽超文本文檔時保證準確定位的一種機制。它既可指向本地計算機硬盤上的某個文件，也可指向Internet上的某一個網(wǎng)頁。也就是說，通過URL可訪問Internet上任何一臺主機或者主機上的文件和文件夾。它包含有被訪問資源的類型、服務器的地址、文件的位置等，也被稱為“網(wǎng)址”。URL一般格式如下：訪問協(xié)議：//主機域名或IP地址［：端口號］/路徑/文件名第10頁，共20頁，2022年，5月20日，20點7分，星期五1.3網(wǎng)頁瀏覽原理Web技術經(jīng)歷了重大演變。最早的網(wǎng)頁僅僅是由靜態(tài)文檔構(gòu)成，用戶瀏覽時只能被動接受網(wǎng)頁內(nèi)容。這與傳統(tǒng)媒體相比沒有什么變化。隨著網(wǎng)絡技術的發(fā)展，不僅可以在網(wǎng)頁中嵌入程序，而且可以在運行過程中向網(wǎng)頁添加動態(tài)內(nèi)容，用戶可以與網(wǎng)頁進行交互，實現(xiàn)了全新的媒體形式。第11頁，共20頁，2022年，5月20日，20點7分，星期五靜態(tài)網(wǎng)頁的特點簡要歸納如下：靜態(tài)網(wǎng)頁每個頁面都有一個固定的URL，且網(wǎng)頁的URL以.htm、.html、.shtml等常見形式為后綴。網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務器上，無論是否有用戶訪問，每個靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務器上的，也就是說，靜態(tài)網(wǎng)頁是實實在在保存在服務器上的文件，每個網(wǎng)頁都是一個獨立的文件。靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索。靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護方面工作量較大，因此當網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難。靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。

1.3.1靜態(tài)網(wǎng)頁第12頁，共20頁，2022年，5月20日，20點7分，星期五1.3.2動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁的特點簡要歸納如下：

動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術為基礎，可以大大減少網(wǎng)站維護的工作量。采用動態(tài)網(wǎng)頁技術的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等。

動態(tài)網(wǎng)頁實際上并不是獨立存在于服務器上的網(wǎng)頁文件，只有當用戶請求時，服務器才會返回一個完整的網(wǎng)頁。

采用動態(tài)網(wǎng)頁的網(wǎng)站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求

第13頁，共20頁，2022年，5月20日，20點7分，星期五1.3.3網(wǎng)頁制作語言網(wǎng)頁制作語言主要有以下幾種：HTML：是一種利用標記（tag）來描述字體、大小、顏色及頁面布局的語言。XML：是一種定義語言，任何人、任何行業(yè)都可以遵循這些法則，定義各種標識來描述信息中的所有元素，然后通過一種被稱為分析程序的小型程序進行處理，使信息能“自我描述”。ASP：由微軟公司提供的開發(fā)動態(tài)網(wǎng)頁的技術，提供了VBScript或JavaScript兩種腳本引擎，主要用于網(wǎng)絡數(shù)據(jù)庫的查詢和管理。ASP.NET：也是微軟公司提供的開發(fā)動態(tài)網(wǎng)頁的技術，是一種已經(jīng)編譯的、基于.NET環(huán)境，可以使用任何與.NET兼容的語言（如C#、VB.NET）構(gòu)造Web應用程序。PHP：是一種在服務器端運行，在HTML文檔中嵌入的腳本語言。JSP：是一項基于Java語言的動態(tài)網(wǎng)頁技術標準，為創(chuàng)建可支持跨平臺和Web服務器的動態(tài)頁面提供了簡潔而有效的工具，并逐漸成為動態(tài)網(wǎng)頁的主流開發(fā)工具。。（6）VRML：用于描述三維的物體及其連接的網(wǎng)頁格式。第14頁，共20頁，2022年，5月20日，20點7分，星期五1.3.4網(wǎng)頁制作軟件Deamweaver：Deamweaver是針對專業(yè)網(wǎng)頁設計師開發(fā)的網(wǎng)頁制作軟件。FrontPage：FrontPage是由微軟公司推出的網(wǎng)頁制作工具。Flash：

Flash是一種二維動畫設計軟件，被大量應用于網(wǎng)頁矢量動畫的設計。Flash目前已經(jīng)成為了Web動畫的標準。Firworks：Firworks是一種創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。Photoshop：Photoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認的最好的通用平面設計軟件。AudioEditor：AudioEditor是Ulead公司MediaStudioPro6.5中的一個專門進行波形文件編輯的軟件。第15頁，共20頁，2022年，5月20日，20點7分，星期五1.4網(wǎng)站規(guī)劃與網(wǎng)頁設計在設計網(wǎng)頁之前，應該對自己的網(wǎng)站有一個總體的策劃和設計，明確網(wǎng)站的主題。根據(jù)網(wǎng)站的主題進一步設計網(wǎng)頁的整體風格、網(wǎng)頁的色彩搭配、網(wǎng)頁的布局和層次結(jié)構(gòu)等內(nèi)容。第16頁，共20頁，2022年，5月20日，20點7分，星期五1.4.1網(wǎng)站定位只有確定了網(wǎng)站的主題和瀏覽網(wǎng)頁的對象，才能在網(wǎng)頁內(nèi)容選取、美工設計、劃分欄目各方面盡力做到合理，并吸引祝更多的眼球。確定了網(wǎng)站的主題和瀏覽群，就可以來創(chuàng)意網(wǎng)站的風格了。一個好的創(chuàng)意加上一定基礎的美工，會使網(wǎng)站收到意想不到的效果，大大增加網(wǎng)站的回頭率。整體網(wǎng)站應該使用統(tǒng)一的風格。第17頁，共20頁，2022年，5月20日，20點7分，星期五1.4.2網(wǎng)站結(jié)構(gòu)網(wǎng)站的結(jié)構(gòu)可以大致分為三種基本類型：層次結(jié)構(gòu)、線性結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)。層次結(jié)構(gòu)：我們平時看到的一些軟件的在線幫助或者教學文檔都屬于層次型結(jié)構(gòu)站點，這種網(wǎng)站結(jié)構(gòu)的優(yōu)點是層次分明、結(jié)構(gòu)清晰，訪問者很清楚自己需要尋找的內(nèi)容在什么位置。線性結(jié)構(gòu)：線形結(jié)構(gòu)的站點一般只能確定某個鏈接和下一個鏈接之間的必然聯(lián)系，它們之間是有序的線形排列關系，就好像一個工廠生產(chǎn)線的工藝流程一樣。這種結(jié)構(gòu)的站點適合用來組織某種流程式的網(wǎng)頁結(jié)構(gòu)。網(wǎng)狀結(jié)構(gòu)：網(wǎng)狀結(jié)構(gòu)也是現(xiàn)在使用最多的一種網(wǎng)站結(jié)構(gòu)，尤其是在大型的門戶站點中，該結(jié)構(gòu)幾乎是無處不在，只要是一個頁面中的內(nèi)容和其他頁面有某種聯(lián)系，就將它們之間制作成超鏈接，訪問者可以在網(wǎng)站中隨意跳轉(zhuǎn)瀏覽。第18頁，共20頁，2022年，5月20日，20點7分，