網(wǎng)頁(yè)設(shè)計(jì)和制作

1、關(guān)于網(wǎng)頁(yè)設(shè)計(jì)與制作第一張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.1 Internet的基礎(chǔ)知識(shí) Internet譯為“因特網(wǎng)”，也稱為國(guó)際互聯(lián)網(wǎng)或互聯(lián)網(wǎng)，它是指通過(guò)TCP/IP協(xié)議將世界各地的網(wǎng)絡(luò)連接起來(lái)實(shí)現(xiàn)資源共享，并提供各種應(yīng)用服務(wù)的全球性計(jì)算機(jī)網(wǎng)絡(luò)。它是當(dāng)今世界上最大、最流行的計(jì)算機(jī)網(wǎng)絡(luò)，是信息社會(huì)的基礎(chǔ)，在人類(lèi)社會(huì)的各個(gè)領(lǐng)域中起著重大的作用。 第二張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.1.1 Internet提供的服務(wù)類(lèi)型 Internet擁有不計(jì)其數(shù)的網(wǎng)絡(luò)資源，用戶可以在Internet上獲得所需的任何信息。人們最熟悉的常用功能有網(wǎng)絡(luò)信息瀏覽（WWW）、電子郵件（E-mail

2、）、新聞組（News Group）、文件傳輸（FTP）、遠(yuǎn)程登錄（Telnet）、電子公告板（BBS），以及Internet提供的其他豐富多彩的服務(wù)。 第三張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.1.2 萬(wàn)維網(wǎng)和瀏覽器 萬(wàn)維網(wǎng)（World Wide Web，WWW）也可以簡(jiǎn)稱為Web、W3、3W等，它是基于“超文本”的信息查詢和信息發(fā)布的系統(tǒng)。Web就是以Internet上眾多的Web服務(wù)器所發(fā)布的相互鏈接的文檔為基礎(chǔ)，組成的一個(gè)龐大的信息網(wǎng)，它不僅可以提供文本信息，還可以包括聲音、圖形、圖像以及動(dòng)畫(huà)等多媒體信息，它為用戶提供了圖形化的信息傳播界面網(wǎng)頁(yè)。Internet Explorer（

3、IE）是微軟公司開(kāi)發(fā)的Web瀏覽器，可以搜索、查看和下載Internet上的各種信息。 第四張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.2 IP地址和Internet域名 與Internet相連的任何一臺(tái)計(jì)算機(jī)（稱為主機(jī)）都有唯一的一個(gè)網(wǎng)絡(luò)地址，簡(jiǎn)稱為IP地址。在Internet中域名可以通過(guò)域名系統(tǒng)（Domain Name System，DNS）映射為IP地址，方便人們記憶站點(diǎn)。 第五張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.2.1 IP地址 該地址由32位二進(jìn)制數(shù)組成。，該地址就稱為這臺(tái)主機(jī)的IP地址。IP地址是在Internet網(wǎng)絡(luò)中為每一臺(tái)主機(jī)分配的由32位二進(jìn)制數(shù)組成的唯一標(biāo)識(shí)符，

4、例如，某臺(tái)主機(jī)的IP地址是00001010 01000001 01010111 11011100。為了便于記憶，通常又把32位二進(jìn)制數(shù)分成四個(gè)字節(jié)段，每字節(jié)段8位，用小數(shù)點(diǎn)將它們隔開(kāi)，然后把每一字節(jié)段數(shù)都轉(zhuǎn)換成相應(yīng)的十進(jìn)制數(shù)，稱為點(diǎn)分十進(jìn)制數(shù)。例如，這臺(tái)主機(jī)用點(diǎn)分十進(jìn)制數(shù)表示為20。因此，最小的IP地址值為，最大的地址值為55。IP地址又分為A類(lèi)、B類(lèi)、C類(lèi)、D類(lèi)和E類(lèi)。 第六張，PPT共二十頁(yè)，創(chuàng)作于2022年6月例1-1 根據(jù)IP地址判斷其網(wǎng)絡(luò)類(lèi)別、網(wǎng)絡(luò)地址和主機(jī)地址。若已知主機(jī)的IP地址為33，請(qǐng)確定該主機(jī)所在網(wǎng)絡(luò)的類(lèi)別、網(wǎng)絡(luò)號(hào)及它的主機(jī)號(hào)。分析： (1) 把四組十進(jìn)制數(shù)轉(zhuǎn)變?yōu)樗淖止?jié)32

5、位的二進(jìn)制數(shù)。四組十進(jìn)制數(shù)33對(duì)應(yīng)32位二進(jìn)制數(shù)11001010110001000000000010000101。(2) 確定網(wǎng)絡(luò)類(lèi)別。第一字節(jié)是11001010，則它的前三位進(jìn)制數(shù)為110，所以該主機(jī)所在網(wǎng)絡(luò)的類(lèi)別是C類(lèi)。(3) 確定網(wǎng)絡(luò)地址。C類(lèi)網(wǎng)的前三個(gè)字節(jié)是它的網(wǎng)絡(luò)地址，即202.196.0。(4) 確定主機(jī)地址。C類(lèi)網(wǎng)的主機(jī)地址是第四字節(jié)，所以它的主機(jī)地址是10000101。結(jié)論： 該主機(jī)所在網(wǎng)絡(luò)的類(lèi)別是C類(lèi)，網(wǎng)絡(luò)號(hào)為201.196.0，主機(jī)號(hào)為133。 第七張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.2.2 域名系統(tǒng) 由于IP地址是數(shù)字標(biāo)識(shí)，使用時(shí)難以記憶和書(shū)寫(xiě)，因此在IP地址的基

6、礎(chǔ)上又發(fā)展出一種符號(hào)化的地址方案，來(lái)代替數(shù)字型的IP地址。每一個(gè)符號(hào)化的地址都與特定的IP地址對(duì)應(yīng)，這樣網(wǎng)絡(luò)上的資源訪問(wèn)起來(lái)就容易得多了。這個(gè)與網(wǎng)絡(luò)上的數(shù)字型IP地址相對(duì)應(yīng)的字符型地址，就被稱為域名。例如，清華大學(xué)的IP地址為00，對(duì)應(yīng)的域名為。 第八張，PPT共二十頁(yè)，創(chuàng)作于2022年6月下面以清華大學(xué)的域名（）來(lái)分析一下域名的構(gòu)成：www是為用戶提供服務(wù)的主機(jī)類(lèi)型；tsinghua代表清華大學(xué)；edu代表教育科研網(wǎng)；cn代表中國(guó)。域名的結(jié)構(gòu)是一種分層次結(jié)構(gòu)，根據(jù)域的大小，從小到大用“.”分隔。按照Internet的組織模式，域名有兩種分類(lèi)方法：一種是按照機(jī)構(gòu)進(jìn)行分類(lèi)，如表1-2所示。另一種

7、是按國(guó)家和地區(qū)進(jìn)行分類(lèi)，如cn（中國(guó)）、us（美國(guó)）、hk（香港）等。 第九張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.2.3 統(tǒng)一資源定位器 客戶機(jī)與Web服務(wù)器的交互是通過(guò)超文本傳輸協(xié)議（HTTP）來(lái)完成的，用戶要查詢的某一臺(tái)Web服務(wù)器是通過(guò)統(tǒng)一資源定位器(Uniform Resource Locator，URL)來(lái)指定的。URL是一個(gè)指定因特網(wǎng)或內(nèi)聯(lián)網(wǎng)服務(wù)器中目標(biāo)定位位置的格式化字符串，與在計(jì)算機(jī)中根據(jù)指明的路徑查找文件類(lèi)似，它是在WWW中瀏覽超文本文檔時(shí)保證準(zhǔn)確定位的一種機(jī)制。它既可指向本地計(jì)算機(jī)硬盤(pán)上的某個(gè)文件，也可指向Internet上的某一個(gè)網(wǎng)頁(yè)。也就是說(shuō)，通過(guò)URL可訪問(wèn)In

8、ternet上任何一臺(tái)主機(jī)或者主機(jī)上的文件和文件夾。它包含有被訪問(wèn)資源的類(lèi)型、服務(wù)器的地址、文件的位置等，也被稱為“網(wǎng)址”。URL一般格式如下： 訪問(wèn)協(xié)議：/主機(jī)域名或IP地址： 端口號(hào)/路徑/文件名 第十張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.3 網(wǎng)頁(yè)瀏覽原理 Web技術(shù)經(jīng)歷了重大演變。最早的網(wǎng)頁(yè)僅僅是由靜態(tài)文檔構(gòu)成，用戶瀏覽時(shí)只能被動(dòng)接受網(wǎng)頁(yè)內(nèi)容。這與傳統(tǒng)媒體相比沒(méi)有什么變化。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，不僅可以在網(wǎng)頁(yè)中嵌入程序，而且可以在運(yùn)行過(guò)程中向網(wǎng)頁(yè)添加動(dòng)態(tài)內(nèi)容，用戶可以與網(wǎng)頁(yè)進(jìn)行交互，實(shí)現(xiàn)了全新的媒體形式。 第十一張，PPT共二十頁(yè)，創(chuàng)作于2022年6月靜態(tài)網(wǎng)頁(yè)的特點(diǎn)簡(jiǎn)要?dú)w納如下：靜態(tài)

9、網(wǎng)頁(yè)每個(gè)頁(yè)面都有一個(gè)固定的URL，且網(wǎng)頁(yè)的URL以.htm、.html、.shtml等常見(jiàn)形式為后綴。網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問(wèn)，每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說(shuō)，靜態(tài)網(wǎng)頁(yè)是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件。靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索。靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁(yè)制作方式比較困難。靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。 1.3.1 靜態(tài)網(wǎng)頁(yè) 第十二張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.3.2 動(dòng)態(tài)網(wǎng)頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)的特點(diǎn)簡(jiǎn)要?dú)w納如

10、下：動(dòng)態(tài)網(wǎng)頁(yè)以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大減少網(wǎng)站維護(hù)的工作量。采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理、訂單管理等。動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)，服務(wù)器才會(huì)返回一個(gè)完整的網(wǎng)頁(yè)。采用動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)站在進(jìn)行搜索引擎推廣時(shí)需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求 第十三張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.3.3 網(wǎng)頁(yè)制作語(yǔ)言 網(wǎng)頁(yè)制作語(yǔ)言主要有以下幾種：HTML：是一種利用標(biāo)記（tag）來(lái)描述字體、大小、顏色及頁(yè)面布局的語(yǔ)言。XML：是一種定義語(yǔ)言，任何人、任何行業(yè)都可以遵循這些法則，定義各種標(biāo)識(shí)來(lái)描述信息中的所

11、有元素，然后通過(guò)一種被稱為分析程序的小型程序進(jìn)行處理，使信息能“自我描述”。ASP：由微軟公司提供的開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，提供了VBScript或JavaScript兩種腳本引擎，主要用于網(wǎng)絡(luò)數(shù)據(jù)庫(kù)的查詢和管理。ASP.NET：也是微軟公司提供的開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，是一種已經(jīng)編譯的、基于.NET環(huán)境，可以使用任何與.NET兼容的語(yǔ)言（如C#、VB.NET）構(gòu)造Web應(yīng)用程序。PHP：是一種在服務(wù)器端運(yùn)行，在HTML文檔中嵌入的腳本語(yǔ)言。JSP：是一項(xiàng)基于Java語(yǔ)言的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)，為創(chuàng)建可支持跨平臺(tái)和Web服務(wù)器的動(dòng)態(tài)頁(yè)面提供了簡(jiǎn)潔而有效的工具，并逐漸成為動(dòng)態(tài)網(wǎng)頁(yè)的主流開(kāi)發(fā)工具。（6）VRM

12、L：用于描述三維的物體及其連接的網(wǎng)頁(yè)格式。 第十四張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.3.4 網(wǎng)頁(yè)制作軟件Deamweaver：Deamweaver是針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師開(kāi)發(fā)的網(wǎng)頁(yè)制作軟件。FrontPage：FrontPage是由微軟公司推出的網(wǎng)頁(yè)制作工具。Flash：Flash是一種二維動(dòng)畫(huà)設(shè)計(jì)軟件，被大量應(yīng)用于網(wǎng)頁(yè)矢量動(dòng)畫(huà)的設(shè)計(jì)。Flash 目前已經(jīng)成為了 Web 動(dòng)畫(huà)的標(biāo)準(zhǔn)。Firworks：Firworks是一種創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。Photoshop：Photoshop是由Adobe公司開(kāi)發(fā)的圖形處理軟件，它是目前公認(rèn)的最好的通用平面設(shè)

13、計(jì)軟件。Audio Editor：Audio Editor是Ulead公司Media Studio Pro 6.5中的一個(gè)專門(mén)進(jìn)行波形文件編輯的軟件。第十五張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.4 網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì) 在設(shè)計(jì)網(wǎng)頁(yè)之前，應(yīng)該對(duì)自己的網(wǎng)站有一個(gè)總體的策劃和設(shè)計(jì)，明確網(wǎng)站的主題。根據(jù)網(wǎng)站的主題進(jìn)一步設(shè)計(jì)網(wǎng)頁(yè)的整體風(fēng)格、網(wǎng)頁(yè)的色彩搭配、網(wǎng)頁(yè)的布局和層次結(jié)構(gòu)等內(nèi)容。 第十六張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.4.1 網(wǎng)站定位 只有確定了網(wǎng)站的主題和瀏覽網(wǎng)頁(yè)的對(duì)象，才能在網(wǎng)頁(yè)內(nèi)容選取、美工設(shè)計(jì)、劃分欄目各方面盡力做到合理，并吸引祝更多的眼球。確定了網(wǎng)站的主題和瀏覽群，就可以來(lái)

14、創(chuàng)意網(wǎng)站的風(fēng)格了。一個(gè)好的創(chuàng)意加上一定基礎(chǔ)的美工，會(huì)使網(wǎng)站收到意想不到的效果，大大增加網(wǎng)站的回頭率。整體網(wǎng)站應(yīng)該使用統(tǒng)一的風(fēng)格。 第十七張，PPT共二十頁(yè)，創(chuàng)作于2022年6月1.4.2 網(wǎng)站結(jié)構(gòu)網(wǎng)站的結(jié)構(gòu)可以大致分為三種基本類(lèi)型：層次結(jié)構(gòu)、線性結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)。層次結(jié)構(gòu)：我們平時(shí)看到的一些軟件的在線幫助或者教學(xué)文檔都屬于層次型結(jié)構(gòu)站點(diǎn)，這種網(wǎng)站結(jié)構(gòu)的優(yōu)點(diǎn)是層次分明、結(jié)構(gòu)清晰，訪問(wèn)者很清楚自己需要尋找的內(nèi)容在什么位置。線性結(jié)構(gòu)：線形結(jié)構(gòu)的站點(diǎn)一般只能確定某個(gè)鏈接和下一個(gè)鏈接之間的必然聯(lián)系，它們之間是有序的線形排列關(guān)系，就好像一個(gè)工廠生產(chǎn)線的工藝流程一樣。這種結(jié)構(gòu)的站點(diǎn)適合用來(lái)組織某種流程式的網(wǎng)頁(yè)結(jié)構(gòu)。網(wǎng)狀結(jié)構(gòu)：網(wǎng)狀結(jié)構(gòu)也是現(xiàn)在使用最多的一種網(wǎng)站結(jié)構(gòu)，尤其是在大型的門(mén)戶站點(diǎn)中，該結(jié)構(gòu)幾乎是無(wú)處不在，只要是一個(gè)頁(yè)面中的內(nèi)容和其他頁(yè)面有某種聯(lián)系，就將它們之間制作成超鏈接，訪問(wèn)者可以在網(wǎng)站中隨意跳轉(zhuǎn)瀏覽。 第十八張，PPT共二十頁(yè)，創(chuàng)作于2022年6月