網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)網(wǎng)頁(yè)設(shè)計(jì)與制作網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第1頁(yè)。1.1internet基礎(chǔ)1.2網(wǎng)頁(yè)設(shè)計(jì)工具1.3網(wǎng)站建設(shè)流程1.4HTML語(yǔ)言網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第2頁(yè)。1.1internet基礎(chǔ)1.1.1INTERNET的概述

Internet是相互連接的網(wǎng)絡(luò)集合。Internet是由成千上萬(wàn)個(gè)網(wǎng)絡(luò)、上億臺(tái)計(jì)算機(jī)通過(guò)特定的網(wǎng)絡(luò)協(xié)議相互連接而成的全球計(jì)算機(jī)網(wǎng)絡(luò)，是提供信息資源查詢(xún)和信息資源共享的全球最大的信息資源平臺(tái)。網(wǎng)絡(luò)協(xié)議是網(wǎng)絡(luò)中的設(shè)備進(jìn)行通信時(shí)共同遵循的一套規(guī)則，即以何種方法獲得所需的信息。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第3頁(yè)。1.1.1INTERNET的概述Internet最初并不是為商業(yè)性和廣泛使用而設(shè)計(jì)的。它起源于1969年美國(guó)國(guó)防部高級(jí)研究計(jì)劃署協(xié)助開(kāi)發(fā)的ARPANET。最初是只允許國(guó)防部人員進(jìn)入的封閉式網(wǎng)絡(luò)。到1987年，在美國(guó)國(guó)家科學(xué)基金會(huì)的推動(dòng)下，將之主要從軍事用途轉(zhuǎn)向科學(xué)研究和民事用途，形成了今天的Internet主干網(wǎng)雛形NSFNET。全球網(wǎng)絡(luò)的發(fā)展是空前且出人意料的。今天，檢查電子郵件、訪問(wèn)喜愛(ài)的網(wǎng)站這些活動(dòng)已融入我們的日常生活。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第4頁(yè)。從國(guó)內(nèi)Internet的發(fā)展現(xiàn)狀來(lái)看，1994年4月，中科院計(jì)算機(jī)網(wǎng)絡(luò)信息中心正式接入Internet，在10多年的時(shí)間里，中國(guó)Internet發(fā)生了飛速的發(fā)展，截至2006年底，我國(guó)網(wǎng)民人數(shù)達(dá)到了1.37億，即每十人中就有一人是網(wǎng)民。10%的網(wǎng)民普及率將是互聯(lián)網(wǎng)發(fā)展的高速拐點(diǎn)，突破10%之后，中國(guó)互聯(lián)網(wǎng)將迎來(lái)更快速的增長(zhǎng)期。另外網(wǎng)站數(shù)、IP地址等也迅速增長(zhǎng)，分別達(dá)到84.3萬(wàn)和9800萬(wàn)。從域名、網(wǎng)站數(shù)、IP地址等增長(zhǎng)情況來(lái)看，我國(guó)互聯(lián)網(wǎng)資源得到了全面提升。Internet所提供的服務(wù)主要是WWW、E-mail、FTP、網(wǎng)上傳呼、在線聊天、網(wǎng)上購(gòu)物等等，而其中WWW和E-mail是最常用的服務(wù)。1.1.1INTERNET的概述網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第5頁(yè)。1.1.2

WWWWWW(WorldWideWeb)簡(jiǎn)稱(chēng)為Web或萬(wàn)維網(wǎng)，客戶(hù)端只要通過(guò)“瀏覽器”（Browser）就可以非常方便地訪問(wèn)internet上的服務(wù)器端，迅速地獲得所需的信息。如圖所示。internet瀏覽器WEB服務(wù)器客戶(hù)端HTTP網(wǎng)絡(luò)協(xié)議網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第6頁(yè)。用戶(hù)通過(guò)瀏覽器訪問(wèn)WEB服務(wù)器的網(wǎng)頁(yè)，那么如何查找這些網(wǎng)頁(yè)呢？通過(guò)在瀏覽器的地址欄中輸入網(wǎng)址，即URL，統(tǒng)一資源定位器。URL的一般格式為：“協(xié)議名：//主機(jī)名[/文件夾名/文件名]”常用的協(xié)議名如下：HTTP：超文本傳輸協(xié)議，用于轉(zhuǎn)換網(wǎng)頁(yè)。FTP：文件傳輸協(xié)議，主要用于傳輸文件，許多提供軟件下載的網(wǎng)站使用“FTP”作為下載的網(wǎng)址。MAILTO：傳送E-mail協(xié)議，主要用于傳輸電子郵件。例如：

mailto:duyonghong@163.com網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第7頁(yè)。1.1.3網(wǎng)頁(yè)與網(wǎng)站構(gòu)建WWW的基本單位是網(wǎng)頁(yè)。網(wǎng)頁(yè)中包含所謂的“超鏈接”，通過(guò)已經(jīng)定義好的關(guān)鍵字和圖形，只要用鼠標(biāo)輕輕一點(diǎn)，就可以自動(dòng)跳轉(zhuǎn)到相應(yīng)的其它文件，獲得相應(yīng)的信息，從而實(shí)現(xiàn)網(wǎng)頁(yè)之間的鏈接，從而構(gòu)成了WWW的縱橫交織的網(wǎng)狀結(jié)構(gòu)。通過(guò)超鏈接連接起來(lái)的一系列邏輯上可以視為一個(gè)整體的頁(yè)面，則叫做網(wǎng)站。網(wǎng)站點(diǎn)概念是相對(duì)的，大的如新浪、搜狐等大的門(mén)戶(hù)網(wǎng)站，頁(yè)面非常多，可能分布于多臺(tái)服務(wù)器上；小的如一些個(gè)人網(wǎng)站，可能只有幾個(gè)頁(yè)面，僅在某臺(tái)WEB服務(wù)器的占據(jù)很小的空間。一個(gè)站點(diǎn)的起始頁(yè)面通常被稱(chēng)為“主頁(yè)”，主頁(yè)是一個(gè)網(wǎng)站的開(kāi)始，因此主頁(yè)的好壞決定了這個(gè)網(wǎng)站的訪問(wèn)情況，一般主頁(yè)的名稱(chēng)是固定的index.htm或index.html等。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第8頁(yè)。1.1.4域名與IP地址在Internet上的每臺(tái)網(wǎng)絡(luò)設(shè)備都要有一個(gè)唯一的地址才能被訪問(wèn)到，這個(gè)地址就是IP地址。IP地址是由32bits的二進(jìn)制數(shù)值構(gòu)成，分成4組，轉(zhuǎn)化為十進(jìn)制用點(diǎn)分隔，比如：1。10網(wǎng)絡(luò)號(hào)主機(jī)號(hào)012381624310網(wǎng)絡(luò)號(hào)主機(jī)號(hào)01238162431110網(wǎng)絡(luò)號(hào)主機(jī)號(hào)01238162431A類(lèi)地址的范圍為：

—55

B類(lèi)地址的范圍：

-55C類(lèi)地址的范圍：

-55ABC網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第9頁(yè)。1.1.4域名與IP地址IP地址是一串難以記憶的數(shù)字，因此在1985年開(kāi)始，引入了域名的概念，用具有含義的字符來(lái)表示網(wǎng)絡(luò)中的主機(jī)，以便于瀏覽者訪問(wèn)。域名與IP地址如何對(duì)應(yīng)呢？通過(guò)DNS域名解析系統(tǒng)將域名解析到相應(yīng)的IP地址上，實(shí)現(xiàn)這二者之間的對(duì)應(yīng)關(guān)系。我們知道新浪網(wǎng)的域名：，但很少有人知道新浪網(wǎng)WEB服務(wù)器的IP地址是多少？域名的分類(lèi)：域名系統(tǒng)是一個(gè)分層的樹(shù)狀結(jié)構(gòu)組織，如圖所示。最上面是一個(gè)無(wú)名的根域，下層為頂級(jí)域名，接著是二級(jí)……

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第10頁(yè)。1.1.4域名與IP地址根域ComnetorgjpcntwIbmhpyahooComedunetSinaebayalibaba圖1.2域名結(jié)構(gòu)圖網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第11頁(yè)。域名域名機(jī)構(gòu)附注：全稱(chēng)Com商業(yè)機(jī)構(gòu)CommercialorganizationEdu教育機(jī)構(gòu)EducationalinstitutionGov政府部門(mén)governmentInt國(guó)際性機(jī)構(gòu)InternationalorganizationMil軍隊(duì)militaryNet網(wǎng)絡(luò)機(jī)構(gòu)NetworkingorganizationOrg非盈利機(jī)構(gòu)Non-profitorganization表1.1按組織分類(lèi)的頂級(jí)域名網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第12頁(yè)。表1.2按地理區(qū)域分類(lèi)的項(xiàng)級(jí)域名域名國(guó)家附注：全稱(chēng)cn中國(guó)Chinaca加拿大Canadajp日本Japankr韓國(guó)Korearu俄羅斯Russiatw臺(tái)灣Taiwanhk香港HongKong域名的書(shū)寫(xiě)格式為：葉節(jié)點(diǎn)名.二級(jí)域名.頂級(jí)域名例如：，www：web服務(wù)器名，sohu：企業(yè)名稱(chēng)，com：頂級(jí)域名。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第13頁(yè)。1.2網(wǎng)頁(yè)制作工具目前網(wǎng)頁(yè)制作工具較多，大多數(shù)網(wǎng)頁(yè)制作工作都是通過(guò)“所見(jiàn)即所得”的編輯工具完成的，在網(wǎng)頁(yè)制作過(guò)程，還需要進(jìn)行素材的創(chuàng)作和加工，即圖形和動(dòng)畫(huà)制作工具。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第14頁(yè)。1.2.1網(wǎng)頁(yè)編輯工具網(wǎng)頁(yè)編輯工具主要分為標(biāo)記型和所見(jiàn)即所得型。標(biāo)記型工具常用的是notepad(記事本)、Ultraedit等。所見(jiàn)即所得型的編輯軟件主要有：微軟的Frontpage和Dreamweaver。其中Frontpage繼承了OFFICE系列軟件的界面通用、操作簡(jiǎn)單的特點(diǎn)，十分適合初學(xué)者使用。但與MacroMedia公司的Dreamweaver相比，在HTML源代碼的精確性、實(shí)用性以及對(duì)各種新技術(shù)的支持上都略遜一籌，因此我們這本教材主要介紹的網(wǎng)頁(yè)編輯工具是Dreamweaver。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第15頁(yè)。1.2.2圖形和圖像處理工具目前常用的圖形和圖像處理工具主要：Photoshop及Firework。Photoshop的功能十分強(qiáng)大，是目前最為廣泛的專(zhuān)業(yè)圖形圖像處理軟件之一，它捆綁了ImageReady，能夠?qū)崿F(xiàn)各種專(zhuān)業(yè)化的圖像處理、動(dòng)畫(huà)的制作等。Fireworks是由MacorMedia公司出品的首選WEB圖形圖像處理軟件。它的獨(dú)特之處在于其能夠優(yōu)化處理大圖片、切割圖片、為圖片加入特殊效果、制作網(wǎng)頁(yè)的動(dòng)態(tài)行為等，可以生成FireworkHTML，直接導(dǎo)入到網(wǎng)頁(yè)中，使用非常方便。本教材將在以后的章節(jié)做詳細(xì)的介紹。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第16頁(yè)。1.2.3動(dòng)畫(huà)制作工具Flash是目前網(wǎng)頁(yè)制作中最為出色的動(dòng)畫(huà)制作軟件，它是一種交互式動(dòng)畫(huà)設(shè)計(jì)工具，用它可以將音樂(lè)、聲效、動(dòng)畫(huà)以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁(yè)動(dòng)態(tài)效果。Flash所使用的圖形是壓縮的矢量圖形，采用了網(wǎng)絡(luò)流式媒體技術(shù)，突破了網(wǎng)絡(luò)帶寬的限制，可以邊下載邊播放，這樣避免用戶(hù)長(zhǎng)時(shí)間的等待，設(shè)計(jì)者可以隨心所欲地設(shè)計(jì)出高品質(zhì)的動(dòng)畫(huà)，F(xiàn)lash已經(jīng)慢慢成為網(wǎng)頁(yè)動(dòng)畫(huà)的標(biāo)準(zhǔn)，成為一種新興的技術(shù)發(fā)展方向。本教材將在以后的章節(jié)做詳細(xì)的介紹。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第17頁(yè)。1.3網(wǎng)站建設(shè)流程要建設(shè)一個(gè)優(yōu)秀的網(wǎng)站，通常應(yīng)該遵循以下工作流程：確定站點(diǎn)的核心－網(wǎng)站的規(guī)劃－網(wǎng)站外觀的設(shè)計(jì)－網(wǎng)頁(yè)具體制作－網(wǎng)站性能測(cè)試－網(wǎng)站發(fā)布－網(wǎng)站更新與維護(hù)。規(guī)劃設(shè)計(jì)維護(hù)發(fā)布開(kāi)發(fā)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第18頁(yè)。1.3.1網(wǎng)站規(guī)劃一個(gè)網(wǎng)站的成功與否與建站前的網(wǎng)站規(guī)劃有著極為重要的關(guān)系。在建立網(wǎng)站前應(yīng)明確建設(shè)網(wǎng)站的目的，確定網(wǎng)站的功能，確定網(wǎng)站規(guī)模、投入費(fèi)用，進(jìn)行必要的市場(chǎng)分析等。只有詳細(xì)的規(guī)劃，才能避免在網(wǎng)站建設(shè)中出現(xiàn)的很多問(wèn)題，使網(wǎng)站建設(shè)能順利進(jìn)行。1．明確建立網(wǎng)站的目標(biāo)和用戶(hù)需求2．確定網(wǎng)站的風(fēng)格3．網(wǎng)站的技術(shù)問(wèn)題網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第19頁(yè)。1.3.2網(wǎng)站設(shè)計(jì)對(duì)網(wǎng)站進(jìn)行詳細(xì)的規(guī)劃之后，就可進(jìn)入到設(shè)計(jì)階段。好的Web站點(diǎn)要做到主題鮮明突出，要點(diǎn)明確，以簡(jiǎn)單明確的語(yǔ)言和畫(huà)面體現(xiàn)站點(diǎn)的主題。調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個(gè)性和情趣，突出網(wǎng)站的特點(diǎn)。1．網(wǎng)站的版式設(shè)計(jì)2．色彩在網(wǎng)頁(yè)設(shè)計(jì)中的作用3．網(wǎng)頁(yè)形式與內(nèi)容相統(tǒng)一4．三維空間的構(gòu)成和虛擬現(xiàn)實(shí)5．多媒體功能的利用網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第20頁(yè)。1.3.3網(wǎng)頁(yè)制作靜態(tài)網(wǎng)頁(yè)的制作：采用HTML（超文本標(biāo)記語(yǔ)言）生成的網(wǎng)頁(yè)，供瀏覽者瀏覽。此階段需要根據(jù)設(shè)計(jì)階段制作的示范網(wǎng)頁(yè)，通過(guò)去Dreamweaver等軟件在各個(gè)具體網(wǎng)頁(yè)中添加實(shí)際內(nèi)容，如：文字、圖像、FLASH動(dòng)畫(huà)、多媒體文件等。這類(lèi)靜態(tài)網(wǎng)頁(yè)缺少動(dòng)態(tài)的交互，因此還需添加網(wǎng)頁(yè)的交互性，即動(dòng)態(tài)網(wǎng)頁(yè)的制作。動(dòng)態(tài)網(wǎng)頁(yè)的制作：動(dòng)態(tài)網(wǎng)頁(yè)的編程目前常用的技術(shù)為.ASP\.PHP\.JSP等，實(shí)現(xiàn)客戶(hù)端與服務(wù)器的交互。比如說(shuō)：會(huì)員注冊(cè)、信息查詢(xún)、產(chǎn)品選購(gòu)、留言、論壇等。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第21頁(yè)。1.3.4站點(diǎn)的測(cè)試和上傳網(wǎng)站制作完畢，在本機(jī)上進(jìn)行測(cè)試，查看網(wǎng)站上是否存在某些錯(cuò)誤，如網(wǎng)站是否存在鏈接的錯(cuò)誤，圖片是否正常顯示，網(wǎng)頁(yè)程序代碼是否有錯(cuò)等。測(cè)試完畢，后用上傳工具傳到WEB服務(wù)器上。1.3.5站點(diǎn)更新和維護(hù)要充分發(fā)揮網(wǎng)站的市場(chǎng)功能，及時(shí)更新最新的產(chǎn)品信息。一個(gè)企業(yè)要有專(zhuān)業(yè)的網(wǎng)站維護(hù)人員或交給專(zhuān)業(yè)的網(wǎng)絡(luò)公司來(lái)承擔(dān)這項(xiàng)工作。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第22頁(yè)。1.4

HTML語(yǔ)言網(wǎng)頁(yè)的本質(zhì)是HTML，HTML-超文本標(biāo)記語(yǔ)言，超文本使網(wǎng)頁(yè)之間具有跳轉(zhuǎn)能力，使瀏覽者可以選擇閱讀路徑。使用HTML編寫(xiě)的WEB頁(yè)面稱(chēng)之為HTML文件，這種文件一般以“.html”或者“.htm”為擴(kuò)展名，可以使用記事本、Altraedit標(biāo)記型軟件編輯，也可使用Dreamweaver、Frontpage等所見(jiàn)即所得類(lèi)網(wǎng)頁(yè)制作工具來(lái)快速創(chuàng)建HTML文件。HTML文件通常分為頭部和主體兩部分，頭部（HEAD）包含了編寫(xiě)頁(yè)面的說(shuō)明信息，如頁(yè)面的類(lèi)型、使用的字符集、使用的編寫(xiě)工具以及頁(yè)面的標(biāo)題等，這部分內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)中；主體（BODY）則包含希望表達(dá)的信息，可以是正文、圖像、指向另一個(gè)WEB頁(yè)面的超鏈接指針等。

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第23頁(yè)。一、HTML標(biāo)簽的格式HTML文件的所有控制語(yǔ)句稱(chēng)為標(biāo)簽，標(biāo)簽在一對(duì)尖括號(hào)之間，格式如下：<標(biāo)簽>HTML語(yǔ)言元素</標(biāo)簽>1）標(biāo)簽分為成對(duì)標(biāo)簽和非成對(duì)標(biāo)簽，比如：<title>、<table>、<font>等屬于成對(duì)標(biāo)簽，而<br>、<hr>等屬于非成對(duì)標(biāo)簽，標(biāo)簽忽略大小寫(xiě)，書(shū)寫(xiě)格式非常靈活。2）可使用標(biāo)簽的屬性來(lái)進(jìn)一步限定標(biāo)簽，一個(gè)標(biāo)簽可以有多個(gè)屬性項(xiàng)，各屬性項(xiàng)的次序不限定，各屬性項(xiàng)間用空格來(lái)進(jìn)行分隔。例如：<imgsrc="images/girl.gif"width="100"height="87">3）HTML中使用的注釋語(yǔ)句為<!—注釋內(nèi)容-->，注釋內(nèi)容可插入文本中任何位置，注釋內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)中。網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全文共28頁(yè)，當(dāng)前為第24頁(yè)。二、常見(jiàn)標(biāo)簽如下介紹1）<HTML>…</HTML>標(biāo)識(shí)HTML文件的開(kāi)始與結(jié)束。中間是一些HTML語(yǔ)言的元素。它允許網(wǎng)絡(luò)瀏覽器把文件內(nèi)容確認(rèn)為HTML文件。2）<HEAD>…</HEAD>頭部標(biāo)簽，其中的信息不會(huì)出現(xiàn)在網(wǎng)頁(yè)中。但其中包含了許多網(wǎng)頁(yè)的屬