網頁與網站基礎知識

網頁與網站基礎知識第1頁，課件共49頁，創(chuàng)作于2023年2月越來越多的人開始熟悉網絡，熟悉網頁。人們已經漸漸意識到網絡正在改變日常生活。人們需要為個人、企業(yè)制作一個精彩的網站，這就帶來一個新的問題：怎樣設計制作一個實用而美觀的網站？在一個網站開發(fā)者眼中，如果脫離了網頁的實用性來談網頁的美，是不實際的。設計制作一個網頁，首先是高效科學地安排頁面，然后才是對它進行進一步的美化。本課程就帶領同學們如何做出一個美觀而實用的網站。第2頁，課件共49頁，創(chuàng)作于2023年2月第一章網頁與網站基礎知識網頁與網站的概念網頁的設計網站的規(guī)劃網站的開發(fā)流程第3頁，課件共49頁，創(chuàng)作于2023年2月

1.1網頁與網站的概念Internet的概述WWW網頁與網站域名與IP地址第4頁，課件共49頁，創(chuàng)作于2023年2月1.1.1Internet的概述

Internet是由成千上萬個網絡、上億臺計算機通過特定的網絡協議相互連接而成的全球計算機網絡，是提供信息資源查詢和信息資源共享的全球最大的信息資源平臺。第5頁，課件共49頁，創(chuàng)作于2023年2月Internet最初并不是為商業(yè)性和廣泛使用而設計的。它起源于1969年美國國防部高級研究計劃署協助開發(fā)的ARPANET。最初是只允許國防部人員進入的封閉式網絡。到1987年，在美國國家科學基金會的推動下，將之主要從軍事用途轉向科學研究和民事用途，形成了今天的Internet主干網雛形NSFNET。全球網絡的發(fā)展是空前且出人意料的。今天，檢查電子郵件、訪問喜愛的網站這些活動已融入我們的日常生活。第6頁，課件共49頁，創(chuàng)作于2023年2月從國內Internet的發(fā)展現狀來看，1994年4月，中科院計算機網絡信息中心正式接入Internet，在10多年的時間里，中國Internet發(fā)生了飛速的發(fā)展，截至2006年底，我國網民人數達到了1.37億，即每十人中就有一人是網民。10%的網民普及率將是互聯網發(fā)展的高速拐點，突破10%之后，中國互聯網將迎來更快速的增長期。另外網站數、IP地址等也迅速增長，分別達到84.3萬和9800萬。從域名、網站數、IP地址等增長情況來看，我國互聯網資源得到了全面提升。

Internet所提供的服務主要是WWW、E-mail、FTP、網上傳呼、在線聊天、網上購物等等，而其中WWW和E-mail是最常用的服務。第7頁，課件共49頁，創(chuàng)作于2023年2月1.1.2

WWWWWW(WorldWideWeb)簡稱為Web或萬維網，客戶端只要通過“瀏覽器”（Browser）就可以非常方便地訪問Internet上的服務器端，迅速地獲得所需的信息。如圖所示。Internet瀏覽器WEB服務器HTTP網絡協議第8頁，課件共49頁，創(chuàng)作于2023年2月●用戶通過瀏覽器訪問WEB服務器的網頁，那么如何查找這些網頁呢？通過在瀏覽器的地址欄中輸入網址，即URL，統一資源定位器?！馯RL的一般格式如下：

〈通信協議〉：//〈主機域名〉/〈路徑〉/〈文件名〉

其中，〈通信協議〉指提供該文件的服務器所使用的通信協議；〈主機域名〉指上述服務器所在主機的域名；〈路徑〉指該文件在主機上的路徑；〈文件名〉指文件的名稱。例如/homepage/cslab/sxuc1.htm

其中，http是WWW服務器與WWW客戶之間遵循的通信協議。用來標識該文件存儲在山西大學的WWW服務器上，第二部分是文件所在的路徑，最后一部分sxuc1.htm這個文件的名稱。

第9頁，課件共49頁，創(chuàng)作于2023年2月1.1.3網頁與網站◆構建WWW的基本單位是網頁。網頁中包含所謂的“超鏈接”，通過已經定義好的關鍵字和圖形，只要用鼠標輕輕一點，就可以自動跳轉到相應的其它文件，獲得相應的信息，從而實現網頁之間的鏈接，從而構成了WWW的縱橫交織的網狀結構?！敉ㄟ^超鏈接連接起來的一系列邏輯上可以視為一個整體的頁面，則叫做網站。第10頁，課件共49頁，創(chuàng)作于2023年2月1.1.4域名與IP地址在Internet上的每臺網絡設備都要有一個唯一的地址才能被訪問到，這個地址就是IP地址。IP地址是由32bits的二進制數值構成，分成4組，轉化為十進制用點分隔。比如：00第11頁，課件共49頁，創(chuàng)作于2023年2月1.2網頁的設計網頁主題網頁的文字網頁的色彩網頁版式和布局第12頁，課件共49頁，創(chuàng)作于2023年2月1.2.1網頁主題

網頁的主題指網頁所要表現的最主要的思想內涵，可以說是網頁的靈魂。主題的概念是很模糊的，它是一種約束，是同一站點中各個頁面于五彩繽紛中體現出統一風格的約束；它也是一種力量，是將各個設計者的作品有機結合起來的力量。主題必須與Web頁面主要推銷或展示的產品或服務緊密相關，同時它又必須有相當的吸引力。第13頁，課件共49頁，創(chuàng)作于2023年2月1.2.2網頁的文字

文字是網頁最主要的表達形式，盡管圖形和解構的表格五彩繽紛，但大多數瀏覽者大部分時間仍將注意力集中在頁面中的文字上面，他們總是首先瀏覽文字內容，而甚少關心其他頁面元素，甚至對導航系統也是如此。所以，給瀏覽者一個親和的文字界面是必要的。

為了保證不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px

和14.7px

這是經過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px

的字號比較合適。第14頁，課件共49頁，創(chuàng)作于2023年2月1.2.３網頁的色彩

在制作網站的時候，色彩的選擇和搭配十分重要，因為一個網站格調的確定，往往取決于色彩的選擇與搭配是否適當，一般的情況下，從以下幾個方面來考慮色彩的選擇：色彩的鮮明性

網站色彩的選擇與搭配要鮮艷，這樣比較容易吸引訪問者的注意，而且在訪問者的記憶中駐留的時間也比較長。色彩的獨特性

網站色彩的選擇與搭配要與眾不同，這樣就可以使得訪問者留下深刻的印象。第15頁，課件共49頁，創(chuàng)作于2023年2月色彩的合適性

網站色彩的選擇與搭配要與網站的內容氣氛相適合。色彩的聯想性

不同的色彩會產生不同的聯想，在網站的設計中多運用具有美好聯想的色彩，可以使你的網站流露出另外一種氣息。頁面中各處用色的選擇

首先確定主色。主色是指頁面中相對來說較大面積使用的色彩。主色可以反映出整個網頁的風格，亦可使頁面內容以色彩語言表達出來。接下來是確定輔助色。輔助色可以有多種，其應用范圍包括輸入框的顏色，表格邊框顏色、表格的底色、小圖標用色、文字顏色以及鏈接色等等。第16頁，課件共49頁，創(chuàng)作于2023年2月1.2.４網頁版式和布局

版面設計的步驟

（1）畫出頁面的結構草圖：只需畫出頁面的大體結構。注：分辨率為640*480時，頁面顯示尺寸為620*311；分辨率為800*600時，頁面顯示尺寸為780*428；分辨率為1024*768時，頁面顯示尺寸為1007*600；

（2）布局細化和調整：將需要放置的功能模塊安排在頁面上，注意突出重點和平衡協調

（3）定格：確定出完美的布局方案，定格為最后的版式。

第17頁，課件共49頁，創(chuàng)作于2023年2月T型結構同字結構川字結構三字結構常見網頁布局

第18頁，課件共49頁，創(chuàng)作于2023年2月T型結構第19頁，課件共49頁，創(chuàng)作于2023年2月同字結構

第20頁，課件共49頁，創(chuàng)作于2023年2月川字結構第21頁，課件共49頁，創(chuàng)作于2023年2月三字結構第22頁，課件共49頁，創(chuàng)作于2023年2月單一結構

第23頁，課件共49頁，創(chuàng)作于2023年2月1.3網站的規(guī)劃定位網站主題和名稱網站的風格網站的CI形象確定網站的欄目和版塊確定網站的目錄結構和鏈接結構第24頁，課件共49頁，創(chuàng)作于2023年2月1.3.1定位網站主題和名稱設計一個站點，首先遇到的問題就是定位網站主題。所謂主題也就是你的網站的題材。

對于題材的選擇，應注意：（1）主題要小而精。定位要小，內容要精。調查結果也顯示，網絡上的“主題站”比“萬全站”更受人們喜愛，就好比專賣店和百貨商店。（2）題材最好是你自己擅長或者喜愛的內容。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網站的動力，沒有熱情，很難設計制作出杰出的作品。

（3）題材不要太濫或者目標太高。“太濫”是指到處可見，人人都有的題材；“目標太高”是指在這一題材上已經有非常優(yōu)秀，知名度很高的站點，你要超過它是很困難的。

第25頁，課件共49頁，創(chuàng)作于2023年2月網站名稱的選擇也是非常重要的。和現實生活中一樣，網站名稱是否正氣，響亮，易記，對網站的形象和宣傳推廣也有很大影響。一般的建議是：（1）名稱要正。也就是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會安全的名詞語句。（2）名稱要易記。根據中文網站瀏覽者的特點，除非特定需要，網站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。

（3）名稱要有特色。名稱平實就可以接受，如果能體現一定的內涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。這里舉幾個例子：音樂前衛(wèi)，網頁陶吧，天籟絕音。在體現出網站主題的同時，能點出特色之處。

第26頁，課件共49頁，創(chuàng)作于2023年2月1.3.2網站的風格

風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標志，色彩，字體，標語），版面布局，瀏覽方式，交互性，文字，語氣，內容價值，存在意義，站點榮譽等等諸多因素。第27頁，課件共49頁，創(chuàng)作于2023年2月風格是獨特的，是站點不同與其他網站的地方?；蛘呱剩蛘呒夹g，或者是交互方式，能讓瀏覽者明確分辨出這是你的網站獨有的。如何樹立網站風格呢？我們可以分這樣幾個步驟：

第一，確信風格是建立在有價值內容之上的。一個網站有風格而沒有內容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證內容的質量和價值性。這是最基本的，無須置疑。

第二，你需要徹底搞清楚自己希望站點給人的印象是什么。

第三，在明確自己的網站印象后，開始努力建立和加強這種印象。

第28頁，課件共49頁，創(chuàng)作于2023年2月對于確定風格，這里提供一些參考：

1.將你的標志logo,盡可能的出現在每個頁面上。或者頁眉，或者頁腳，或則背景。

2.突出你的標準色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標準色彩一致的色彩。

3.突出你的標準字體。在關鍵的標題，菜單，圖片里使用統一的標準字體。

4.想一條朗朗上口宣傳標語。把它做在你的banner里，或者放在醒目的位置，告訴大家你的網站的特色。

5.使用統一的語氣和人稱。即使是多個人合作維護，也要讓讀者覺得是同一個人寫的。

6.使用統一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。

7.創(chuàng)造一個你的站點特有的符號或圖標。比如在一句鏈接前的一個點，可以使用,.?！睢?/p>

□△→（區(qū)位碼里自己參看）等等。雖然很簡單的一個變化，卻給人與眾不同的感覺。

8.用自己設計的花邊，線條，點。

第29頁，課件共49頁，創(chuàng)作于2023年2月1.3.3網站的CI形象

所謂CI，是借用的廣告術語。(CI是英文corporateidentity的縮寫)，意思是通過視覺來統一企業(yè)的形象。標志，色彩，字體，標語是一個網站樹立CI形象的關鍵，確切的說是網站的表面文章，設計并完成這幾步，你的網站將脫胎換骨，整體形象就會有一個提高。

第30頁，課件共49頁，創(chuàng)作于2023年2月在您的網站主題和名稱定下來之后，需要思考的就是網站的CI形象。設計網站的標志(logo)如同商標一樣，logo是你站點特色和內涵的集中體現，看見logo就讓大家聯想起你的站點。標志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：新浪用字母sina+眼睛作為標志。標志的設計創(chuàng)意來自你網站的名稱和內容。比如：

(1).網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊威體壇的籃球鯊魚。

(2).網站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標志。比如中國銀行的銅板標志，奔馳汽車的方向盤標志。

第31頁，課件共49頁，創(chuàng)作于2023年2月新浪用字母sina+眼睛作為標志。北京億恒偉業(yè)房地產開發(fā)有限公司的標志是以“億恒偉業(yè)”四個漢字的變形為主體?！皟|”字左半部變形為數字“1”，預示著公司將成為行業(yè)的龍頭老大，也預示者公司全體員工永爭第一的拼搏精神和“信譽第一、質量第一”的經營理念，同時也寓意著公司的發(fā)展一帆風順。北京愛永恒影樓的標志是以英文字母“LOVE"和一顆紅心為主體，紅心中間是抽象的一男一女攜手前進的圖形，寓意著兩個人一顆心，從而寓意著愛永恒。

第32頁，課件共49頁，創(chuàng)作于2023年2月北京市昌平區(qū)第一屆機關運動會的會徽是以“昌平”的漢拼“CHANGPING”的第一個字母“C”和“機關”的漢拼“JIGUAN”的第一個字母“J”變形組合的綠色跑道和運動員為主題。整個標志充滿活力和激情，寓意著昌平區(qū)各機關人員在區(qū)政府的正確領導下，各項事業(yè)蓬勃發(fā)展，充滿生機！第33頁，課件共49頁，創(chuàng)作于2023年2月設計網站的標準色彩網站給人的第一印象來自視覺沖擊，確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，并可能影響到訪問者的情緒。

“標準色彩”是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了：IBM的深藍色，肯得基的紅色條型，windows視窗標志上的紅藍黃綠色塊，都使我們覺得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會有什么感覺？一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用于網站的標志，標題，主菜單和主色塊。給人以整體統一的感覺。至于其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。一般來說，適合于網頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。

第34頁，課件共49頁，創(chuàng)作于2023年2月設計網站的標準字體和標準色彩一樣，標準字體是指用于標志，標題，主菜單的特有字體。一般我們網頁默認的字體是宋體。為了體現站點的“與眾不同”和特有風格，我們可以根據需要選擇一些特別字體。例如，為了體現專業(yè)可以使用粗仿宋體，體現設計精美可以用廣告體，體現親切隨意可以用手寫體等等。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC里沒有安裝你的特別字體，那么您的辛苦設計制作便付之東流啦！設計網站的宣傳標語網站的宣傳標語可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如：鵲巢的“味道好極了”；麥斯威爾的“好東西和好朋友一起分享”；Intel的“給你一個奔騰的心”。

第35頁，課件共49頁，創(chuàng)作于2023年2月1.3.4確定網站的欄目和版塊在動手制作網頁前，一定要考慮好以下三方面：

(1)確定欄目和版塊

(2)確定網站的目錄結構和鏈接結構

(3)確定網站的整體風格創(chuàng)意設計

第36頁，課件共49頁，創(chuàng)作于2023年2月(1)確定欄目和版塊欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網站欄目安排要注意以下幾方面：

①

一定記住要緊扣你的主題！

一般的做法是：將你的主題按一定的方法分類并將它們作為網站的主欄目。主題欄目個數在總欄目中要占絕對優(yōu)勢，這樣的網站顯的專業(yè)，主題突出，容易給人留下深刻印象。

②

設一個最近更新或網站指南欄目

如果你的首頁沒有安排版面放置最近更新內容信息，就有必要設立一個“最近更新”的欄目。這樣做是為了照顧常來的訪客，讓你的主頁更有人性化。第37頁，課件共49頁，創(chuàng)作于2023年2月

③

設定一個可以雙向交流的欄目

不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。有調查表明，提供雙向交流的站點比簡單的留一個“Emailme”的站點更具有親和力。

④設定一個下載或常見問題回答欄目

網絡的特點是信息共享。如果你看到一個站點有大量的優(yōu)秀的有價值的資料，你肯定希望能一次性下載，而不是一頁一頁瀏覽存盤?！皩⑿谋刃摹痹谀阕约旱闹黜撋显O置一個資料下載欄目，會得到大家的喜歡。另外，如果您的站點經常收到網友關于某方面的問題來信，你最好設立一個常見問題回答的欄目，既方便了網友，也可以節(jié)約自己更多時間用以學習。

第38頁，課件共49頁，創(chuàng)作于2023年2月總結以上幾點，我們得出劃分欄目需要注意的是：

●盡可能刪除與主題無關的欄目

●盡可能將網站最有價值的內容列在欄目上

●盡可能方便訪問者的瀏覽和查詢

第39頁，課件共49頁，創(chuàng)作于2023年2月上面說的是欄目，我們再看看版塊設置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網易的站點分新聞，體育，財經，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點內容少，只有主欄目(主菜單)就夠了，不需要設置版塊。第40頁，課件共49頁，創(chuàng)作于2023年2月⑴在網站根目錄中開設images

、common

、temp

三個子目錄，根據需要再開設media

子目錄.images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志logo、banner

條、菜單、按鈕等等；common

子目錄中放css、include

等公共文件；temp

子目錄放客戶提供的各種文字圖片等等原始資料；media

子目錄中放flash,

avi,

quick

time

等多媒體文件

。(2)網站的目錄結構第41頁，課件共49頁，創(chuàng)作于2023年2月在根目錄中按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images

和media

的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。按欄目內容建立子目錄。目錄的層次不要太深。第42頁，課件共49頁，創(chuàng)作于2023年2月目錄、文件的名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱.第43頁，課件共49頁，創(chuàng)作于2023年2月關于鏈接結構的設計，在實際的網頁制作中是非常重要一環(huán)。采用什么樣的鏈接結構直接影響到版面的布局。例如你的主菜單放在什么位置，是否每頁都需要放置，是否需要加入返回首頁的鏈接。在連接結構確定后，再開始考慮鏈接的效果和形式，是采用下拉表單，還是動態(tài)菜單等等。鏈接結構第44頁，課件共49頁，創(chuàng)作于2023年2月圖片的命名原則

圖片的命名原則遵循以下幾條規(guī)范

：

☆

名稱分為頭尾兩兩部分，用下劃線隔開。

☆

頭部分表示此圖片的大類性質，例如廣告、標志、菜單、按鈕等等

☆

尾部分用來表示圖片的具體含義。下面是幾個樣例，大家應該能夠一眼看明白圖片的意義：

banner_sohu.gif

banner_sina.gi