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

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

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

WWWWWW(WorldWideWeb)簡稱為Web或萬維網(wǎng)，客戶端只要通過“瀏覽器”（Browser）就可以非常方便地訪問internet上的服務器端，迅速地獲得所需的信息。如圖所示。internet瀏覽器WEB服務器客戶端HTTP網(wǎng)絡協(xié)議網(wǎng)頁設(shè)計基礎(chǔ)知識全文共28頁，當前為第6頁。用戶通過瀏覽器訪問WEB服務器的網(wǎng)頁，那么如何查找這些網(wǎng)頁呢？通過在瀏覽器的地址欄中輸入網(wǎng)址，即URL，統(tǒng)一資源定位器。URL的一般格式為：“協(xié)議名：//主機名[/文件夾名/文件名]”常用的協(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è)計基礎(chǔ)知識全文共28頁，當前為第7頁。1.1.3網(wǎng)頁與網(wǎng)站構(gòu)建WWW的基本單位是網(wǎng)頁。網(wǎng)頁中包含所謂的“超鏈接”，通過已經(jīng)定義好的關(guān)鍵字和圖形，只要用鼠標輕輕一點，就可以自動跳轉(zhuǎn)到相應的其它文件，獲得相應的信息，從而實現(xiàn)網(wǎng)頁之間的鏈接，從而構(gòu)成了WWW的縱橫交織的網(wǎng)狀結(jié)構(gòu)。通過超鏈接連接起來的一系列邏輯上可以視為一個整體的頁面，則叫做網(wǎng)站。網(wǎng)站點概念是相對的，大的如新浪、搜狐等大的門戶網(wǎng)站，頁面非常多，可能分布于多臺服務器上；小的如一些個人網(wǎng)站，可能只有幾個頁面，僅在某臺WEB服務器的占據(jù)很小的空間。一個站點的起始頁面通常被稱為“主頁”，主頁是一個網(wǎng)站的開始，因此主頁的好壞決定了這個網(wǎng)站的訪問情況，一般主頁的名稱是固定的index.htm或index.html等。網(wǎng)頁設(shè)計基礎(chǔ)知識全文共28頁，當前為第8頁。1.1.4域名與IP地址在Internet上的每臺網(wǎng)絡設(shè)備都要有一個唯一的地址才能被訪問到，這個地址就是IP地址。IP地址是由32bits的二進制數(shù)值構(gòu)成，分成4組，轉(zhuǎn)化為十進制用點分隔，比如：1。10網(wǎng)絡號主機號012381624310網(wǎng)絡號主機號01238162431110網(wǎng)絡號主機號01238162431A類地址的范圍為：

—55

B類地址的范圍：

-55C類地址的范圍：

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

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

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

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