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

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

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

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

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

—55

B類地址的范圍：

-55C類地址的范圍：

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

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

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

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