1、網頁設計與制作自考電子商務網頁設計與制作筆記IP地址：在TCP/IP地址編排方案中，采用了一種通用的地址格式， 為互聯網中的每一個網絡和每一臺計算機都分配了一個地址，這個地址在 Internet中是唯一的，并以此屏蔽了物理網絡地址的差異。這個統一的地 址是由高層軟件技術來實現的，準確地說是通過IP協議層來實現的。IP 層所用到的地址是互聯網地址，又叫IP地址。域名：為了解決IP地址不便于記憶這個問題，同時也為了便于網絡 地址的分層管理和分配，自1984年起在互聯網上采用了一種字符型的地址 標識，這便是域名(Domain Name)。協議：事先約定或定義的一組通信規則，它精確地規定了所交換數據

2、的格式和傳輸方法，即計算機在交換信息時都要遵守的表達方式。URL:統一資源定位器的英文縮寫，是一個提供在全球廣域網上的站 點或資源的Internet位置字符串，與此被訪問的站點或資源所協議在一 起。主要由四部分組成，分別是：訪問類型、訪問的主機、端口號以及訪 問的文件的路徑。互聯網：是由世界上各種各樣的網絡互聯所形成的網絡的網絡，是 一個網際網。有時候也根據音譯稱為因特網，它是目前世界上最大的計 算機通信網絡，遍布全球，將世界各地種種規模的計算機網絡連接成一個 整體，從而實現信息交流和共享。Web瀏覽器：是指一個運行在用戶計算機上的程序，主要作用在于在 客戶端與服務器端之間進行交互、通信，負責

3、下載、顯示網頁，因此也稱 為WWW客戶程序。軟件協議：程序之間的通信是通過軟件協議完成的。無論是網絡客戶 機，還是網絡服務器都提供有特定的協議包，它們與其他計算機通信之 間，必須在那些計算機中載入相應的協議包，協議包里包含了計算機訪問 特定網絡設備或服務所需的協議。標記型網頁制作工具：是指創建的網頁文件在編輯過程中只能看到頁 面的源代碼，而需要轉到瀏覽器中才能夠看到頁面的效果。要求用戶對 HTML的使用方法非常熟悉才能夠做出希望要的頁面，其優點在于可以完全 地控制頁面的元素，寫出精簡的代碼。下載：為了能夠方便處理，客戶機把文件從服務器上復制到本地的過 程，與下載相反的過程是上傳(Upload)

4、。網頁：Web站點中使用HTML編寫而成的單位文檔，是Web中的信息 載體。其使用的描述語言是 HTML.所見所得型網頁制作工具：創建的網頁文件在編輯過程中的顯示與文 件最終在瀏覽器中顯示的效果是一樣的，用戶不需要接觸 HTML 源代碼就可 以做出希望要的頁面。HTML:超文本標記語言是創建網頁時使用的語言。HTML文件被瀏覽 器所解釋后就是網頁，由標記和文本組成。網站的鏈接結構：頁面之間相互鏈接的拓撲結構，它建立在目錄結構 基礎之上，可以跨越目錄甚至主機。網站風格：整個網站所采用的結構布局、色調、文字、標志、圖案等 要素帶給瀏覽者的關于網站的印象。信息看板：Web站點中為訪問者提供的各種最新

5、信息的集合。樹形鏈接結構：類似 DOS 的目錄結構，首頁鏈接指向二級頁面，二級 頁面鏈接指向三級頁面。當使用這樣的鏈接結構瀏覽時，一級級進入，一 級級退出。優點是條理清晰，訪問者明確知道自己在什么位置，不會迷路 。缺點是瀏覽效率低，要進行欄目跳轉時，必須繞經首頁。網站的層次：整個站點各個層次之間的結構關系。這是一種邏輯上的 概念，目的在于合理組織整個站點中的所有內容，便于訪問者查找和瀏 覽，一般來說站點都把自身的內容分為多個層次。每個層逐漸遞進，最后 達到最詳細的內容。CMYK 色彩體系：以打印在紙張上油墨的光線吸收特性為基礎，當白 光照射到半透明油墨上時，部分光譜被吸收，部分被反射回眼睛。該

6、色彩 體系以純青色(C)、洋紅(M)、黃(Y)和黑色(K)通過減色原理合成各種色 彩。加色原理：所有的色彩都可以通過三原色調配出來。只要對紅、綠、 藍三種基色的含量進行配比，就可以調配出其他的顏色，稱為加色原理。頁腳：頁腳和頁眉相呼應，是指在頁面的最下方的一塊空間。頁眉是 放置站點主題和標識的地方，而頁腳通常是放置制作者、公司相關信息、 版權的地方，有時還會放置一導航欄。色相：是顏色的基本屬性，反映顏色的原貌，通過色相，人們才能區 分種種彩色。飽和度：也叫純度，指顏色的純潔程度。飽和度大，顏色就顯得生 動，活潑，有很強的視覺沖擊力；飽和度小，顏色就不純凈，看起來顯得 灰暗。抖動：由于瀏覽器不能

7、夠顯示所有的顏色，因此偽造了那些在顏色有 限的調色板中不能顯示出來的顏色，通過近鄰像素傾向于混合而產生在圖 像中實際不存在的顏色，從而達到一種補償目的。抖動的圖像有很多顆 粒，圖像顯得非常粗糙。明度：也叫亮度，體現顏色的深淺。通常說顏色深了、淺了，就 是指明度的高低。而非彩色只有明度特征，沒有色相飽和度。造型：就是創造出來的物體形象。這里是指頁面的整體形象，這種形 象應該是一個整體，圖形與文本的接合應該是層疊有序的。雖然，顯示器 和瀏覽器都是矩形，但對于頁面的的造型，可以充分運用自然界中各種幾 何形狀以及它們的組合：矩形、圓形、三角形、菱形等。WEB 安全色：由于瀏覽器在顯示這 1670 萬種

8、顏色時是有選擇的，它 只能選擇其中的216種進行顯示，無論是Rec(OO-FF), Green(OO-FF)顏色 通道，或是Blue(OO-FF)對任意一通道，都采取一種跳躍的方式進行顏 色編碼，即 R、G、B 都只能在 00-FF 之間的跳躍取值，而不能任意取值。 這種跳躍顯示的色彩被稱為 WEB 安全色，意義是在任何瀏覽器上都能夠正 確顯示。表單：就是網頁中站點服務器處理的一組數據輸入域。當訪問者單按 鈕或圖形來提交表單后，數據就會傳送到服務器上。它是非常重要的通過 網頁在與服務器之間傳遞信息的途徑，表單網頁可以用來收信瀏覽者的意 見和建議，以實現瀏覽者與站點之間的互動。框架：是一個由框架

9、網頁所定義的瀏覽器初見窗區域，它通過框架網 頁實現。框架網頁是一種特別的 HTML 網頁，它可將瀏覽器視窗分為不同的 框架，而每一個框架則可顯示一個不同網頁。客戶端圖像地圖：它可將每個作用區的 URL 位置直接地對應在 WEB 網 頁的圖像上。客戶端圖像映射并不需要通過服務器處理來允許站點訪問者 是否可在圖像映射上進行超鏈接，但是，并非所有的瀏覽器都支持客戶端 圖像映射。超級鏈接：是指從一個網頁指向另一個目的端的鏈接，是從文本圖片 或圖形或圖像映射到全球文域網上網頁或文件的指針。在全球廣域網上， 超鏈接是網頁之間和 WEB 站點之中主要的導航方法。標記：HTML中用來標識網頁元素的類型、格式和

10、外觀的文本字符 串。DHTML：就是一種即使在網頁下載進瀏覽器以的仍然能夠隨時變換更 新網頁內容排版樣式以及動畫等等的技術，它是一種通過各種技術的綜合 發展而得以實現的概念，主要包括JavaScript、VBScript、DOM、CSS等技 術。DOM:為HTML文件定義了一個與平臺無關的程序接口。使用該接口可 以控制文件的內容、結構和樣式，WEB開發人員借助DOM可以在其WEB頁 中引入動態和交互式內容，而不必依賴于WEB服務器來提供新的內容或改 變現有內容的顯示方式。JavaScrip t： 一種由 Net scape Communica tions 和 SunMicrosystems，I

11、nc.所發展出來的一種Scripting語言。它可以被嵌入在 HTML文檔中，在網頁被下載到客戶端后被瀏覽器所處理。CSS:是由全球廣域網協會所發展出來的HTML的規范表。可使WEB網 頁的制作者將樣式表附加到HTML文件上。樣式表包括了該如何顯示網頁的 排版信息，也可在HTML文件樣式表與用戶自定義樣式混合的情況下工作。靜態聯編：是指程序語言的各種對象和庫的引用必須在編譯時進行， 以使編譯器能夠實現強類型檢查，Java就屬于靜態聯編類的語言。動態聯編：是指程序語言的各種對象和庫的引用在運行時再進行檢 查，如不經運行就無法實現對象引用的檢查。JavaScript就屬于動態聯編 類的語言。函數：

12、是一系列指令的集合，是對反復使用或可能重用的行為的抽 象，從本質上看，函數是存放代碼的代碼段。這些代碼可能在某些時候被 執行，或在文檔被裝載時立即被執行，也可能是對被觸發事件的響應。選擇符：在層疊樣式表的樣式定義中(可樣式規則中)，把HTML組件 連接到一個樣式內容和值的特定組合。內聯式樣式單：它利于現有的HTML標記，把特殊的樣式加入到那些 由標記控制的信息中。貼層：是用于更精確地定位頁面元素的一種CSS屬性，它把網頁想象 為一個平面，具有貼層(clip)屬性的元素就像一個貼層漂浮在網頁之上， 三維方向的位置都是可以控制的。主題：是一套經過許多專業網站設計人員的圖形、色彩、字體的組 合，可以

13、用來對網頁進行修飾，增強網頁的視覺效果。BOX模型：在CSS 中把HTML中以標記的部分稱為BOX(容器)。每個BOX都有三種基本屬 性：margin， padding 和 border.站點：是一個各種媒體的集合的抽象概念，有時也被翻譯為站臺。 在物理上它可能是一個有許多子目錄的大目錄，但是站點的許多媒體也可 能分布在其他各個不同的物理位置上。WEB服務器通常以站點為單位來組 織要發布的信息。熱區：在客戶端圖像地圖上設置的一片區域，并為這片區域設置了相 應的超級鏈接。當在瀏覽器中單擊圖片上相應的區域時，可以跳轉到預先 設置的目標超級鏈接上。網頁動態效果：在Frontpage內增加文檔與對象的

14、演示文稿效果，可 以利用DHTML效果工具欄添加效果網頁元素內，且不需要任何編程。向導：是被嵌入在程序中的一種程序，可以被用來與用戶不斷交互， 最后依用戶在向導的輸入窗格中所做的選項來創建完成用戶需要完成的事 情。模板：指一類特殊文檔，可提供構造最終文檔的基本工具。模板中可 包含以下元素：在同類型的所有文件中都相同的文字或格式設置，如備忘 錄或報表樣式。其他的文件通過引用模板就可以完成格式的規范化等標準 工作。CPC：Cos t Per Click throu th的縮寫，為每千次點擊成本，與 CPM類似，也是千次成計算單位，以廣告圖形被點擊并連接到相關網址或 詳細內容頁面1000次為基準的網

15、絡廣告收費模式。雖然CPC費用比CPM的 費用高很多，但效率比較高，廣告主往往更傾向選擇依據CPC付費。CGI: (common Gat eway Int erface)通用網關接口，是指在 WEB 服務 器上定義的一套WEB客戶請求與應答的方法。客戶機向服務器的請求只要 屬于CGI范圍，WEB服務器將自動啟動一個CGI(網關)程序。它的任務是把 客戶的請求從網關程序的環境變量中取出，并進行相應的加工處理，由 CGI程序決定如何對客戶的請求做出應答。CGI是WEB服務器不可缺少的組 成部分，它是WWW與現有數據程序或實用文件檢索系統之間的橋梁。結構良好的規則：XML文件的結構是按其標記集的語法

16、規則進行控 制的。有一些一般規則應用于所有的XML文件以確定文檔是否為結構良好 的。要進行語法分析的XML文件必須為良好格式。PWS： (Personal Web Server)個人 WEB 服務器，是一個在 window 9X 平臺下運行的WEB服務器。其目的主要是便于調試網頁和在局域網中的基 于網頁的信息發布。UNIX： 一個多用戶、多任務的操作系統，以許多種形式存在和實現， 一般用在專用的計算機工作站上。許多站點服務器是在UNIX系統上執行。虛擬主機：是使用特殊的軟硬件技術，把一臺運行在因特網上的服務 器主機分成多臺虛擬主機，每一臺虛擬主機都具有獨立的域名和IP地 址，具有完事的In t

17、erne t服務器（WWW, FTP, E-ma il）等功能，虛擬主機之 間完全獨立，并可由用戶自行管理，在WEB上看，每一臺虛擬主機和一臺 獨立的主機完全一樣。CPM： Cost Per one thousand impressions的縮寫，每千播放次數 成本，以廣告圖形（Demographic）被瀏覽者L0AD（裝載）1000次為基準的網 絡廣告收費模式。國內ICP編愛這種計費模式。SGML： Standard Generalized Markup Language（通用標識語言標 準）。它是國際上定義電子文件結構和內容描述的標準。XML： （Extensible Markup Lan

18、guage可擴展標記語言）是一種基于 SGML標準的網絡信息描述語言，能夠使用戶自己根據文件的結構來創建自 己的DTD（Document Type Definition文件類型定義），從而使XML能夠脫 離固定標記而表述數據的含義。DTD： Document Type Definition文件類型定義，是一個或是一些用 XML書寫的文件，包含了對一種文件的正式定義，定義了文件中的元素能 用什么名字，能放在什么位置，應該怎樣組合等定義。什么是網絡協議，內容主要包括： 網絡協議是一系列通信規則的總稱，主要包括：用戶數據與控制信息的結構和格式；需要發出的控制信息以及相應要完成的操作與響應；對事件實順

19、序的詳細說明等三部分內容。 規劃目錄結構時應當遵循的幾個原則：不要將所有文件都存放在根目錄下；按欄目內容分別建立子目錄；在每個主目錄下都建立獨立的images目錄；目錄的層次不要太深；切忌使用中文目錄；不要使用過長的目錄；盡量使用意義明確的目錄。網絡中存在著多種級別的協議。總的來說可以分為：1、硬件協議：定義了硬件設備如何動作以及如何協同工作。2、軟件協議：程序之間的通信是通過軟件協議完成的。 除創意之外，在網站設計時還需要考慮以下基本原則：網頁內容要便于閱讀；站點內容要精、專和及時更新；注重色彩搭配；考慮帶寬；要適當考慮不同游覽器、不同分辨率的情況；提供交互性；簡單即為美。 整個站點設計大體

20、分為八個部分：1、初始商討；2、構思；3、綜合內容；4、頁面布局和導航；5、圖 像制作；6、內容流程；7、測試；8、驗收交付；網頁設計的通用規則：網站的設計目的決定設計方案；瀏覽者的需求第一位；頁面的有效性；頁面布局的保持統一性；使用表格和適當的結構來設計網頁；謹慎使用圖片；平面設計意識；減少Java Applet和其他多媒體的使用。 JavaScript的基本特點：1、一種腳本編寫語言；2、基于對象；3、簡單性；4、安全性；5、 基于事件；6、跨平臺。有關商業網站的風格特征：公司徽標或商標應當出現在頁面最上方，盡可能做到色彩醒目，同 時占用版面小；可以采用主題圖形產品廣告來突出公司形象與風格

21、。主要欄目一般采用圖文并茂的超級鏈接實現，要考慮到主要欄目圖 片、文字之間的色彩配合，同時要和主題圖形相互襯托，主題圖形如果較 大，則欄目必須縮小；不要把主要欄目和次要欄目都顯示在同一個頁面上；商業網站一般都有固定的欄目頁面，如：Support, service, About us 等；必須建立站內搜索引擎,以便瀏覽者在站內查找所需要的信息。請仔細閱讀P15-16的細節內容JavaScript 對象：Window 對象2.String 對象Document 對象Navigator 對象5.String 對象Math對象Date對象使用DHTML的原因：DHTML將網頁上的每一個元素劃分成許多獨

22、立的對象，這些對象的 屬性通過CSS來指定。DHTML將每個對象向一個編程和腳本語言的框架開放，可使用編程 語言C+操縱網頁上的對象，也可以使用JavaScript，VBScript操縱網頁 上的對象。JavaScript 與 Java 的區別：兩者語言間的異同：JavaScript是基于對象和事件驅動的編程語言，Java是一種真正 面向對象的語言；前者是一種解釋性編程語言，后者的源代碼在傳遞到客戶端執行之 前，須經過編譯；強變量和弱變量。前者采用弱定義類型變量檢查，后者相反。前者的代碼是一種文本字符格式，可以直接嵌入HTML文件中，并 可用動態裝載，后者是一種與 HTML 無關格式，必須通過

23、像 HTML 中引用外 媒體那樣進行裝載，其代碼以字節代碼的形式保存在獨立的文檔中；嵌入方式不一樣，前者使用來標識，后者用來標識；前者采用動態聯編，后者使用靜態聯編。語言性能的差異：JavaScript 的本質是解釋的；JavaScript 實現了 SRC 屬性；JavaScript 代碼能方便地修改，并立即在瀏覽器中看到修改的結 果；JavaScript 能有效地與 DOM 結合控制瀏覽器的行為，能方便地使 用插件、瀏覽器事件、窗體等技術，以實現用戶與網頁的交互；由于JavaScript代碼置于HTML文件中，這樣，JavaScript代碼 便暴露在眾人面前，源碼存在安全問題；雖然JavaS

24、cript的功能非常強大，但是它在處理非常復雜的應用 時就被其自身機制的局限性所限制。FrontPage2000 增加的新功能：更容易建立專業的、美觀的網站；FrontPage2000 不僅僅可以用來制作網頁，用戶還可以使用它來建 設和維護自己的整個網站，更方便地檢測、更新網站；FrontPage2000 比其它 Office 組件的事例性更加提高，打開和運 行的速度比 FrontPage98 更快，并擁有更方便的 DBM；方便地使用主題；能夠以圖形化的方式展示一個完事的 WEB 站點，也可以向一個完事 的 WEB 站點引入 HTML 文件，或由現有 WE 耳聞目睹點引出文件，而且能夠 自動維

25、護站點內部的所有超級鏈接的正確性；能夠自動創建 WE 耳聞目睹點的文本索引，通過 FrontPage 提供的 webbit 搜索組件查找索引，可以無需編程進行站點內部的全文檢索；加強了數據庫訪問能力，提供了許多設計時控件，使 WEB 頁面與數 據庫進行聯系的能力得到加強。FrontPage 主要功能：創建和管理 Web 站點；2.制作網頁；3.發布站點；4.維護站點。非商業組織的網站風格：強調頁面的主色調；主題圖形要求反映單位的風采，設計應有創意、有內涵，莊重中不 乏活潑；超級鏈接的分類一定要清晰，可采用圖形，必要時可建立站內搜索 引擎；信息看板很重要，因為非商業組織的網站更新不如商業網站頻繁

26、， 始終如一的畫面顯得枯燥，所以經常去更新信息查看板，將增加訪問者的 訪問興趣。運用色塊制作網頁時需要掌握的幾個要點：冷暖色調在均勻使用時不宜靠近；純度相同的兩種顏色也不宜放在一起；整個頁面中最好有一個主色調，否則整個頁面就顯得凌亂。所見即所得編輯器的一些致使的弱點：難以精確達到與瀏覽器完全一致的顯示效果；因為所見即所得編輯器在生成代碼時，是按照軟件編制人員事先 設計好的模式做的；因此不能完全適應各種不同的情況，尤其在實現同樣 效果地，所見即所得的編輯器往往會書寫出冗余度高的代碼，不如手工 書寫的來得簡潔。WEB在實際應用中主要包含三個方面：實現資源引用的統一命名機制；2使用標準的WEB文件傳

27、輸機制一HTTP；文本的邏輯結構采用標記語言HTML描述協議；主頁：在一個站點的眾多網頁中，總有一個網頁是被指定為該站點的 門戶網頁，即為該站點的主頁(Home Page)，這個頁面是整個站點的核 心，站點內所有內容都由門戶頁面進行索引，該頁通常被命名為 index.html或default.html.它是站點訪問者在網頁瀏覽器的地址欄中鍵 入該站點的網址時，默認地顯示在瀏覽器中的網頁。Dreamweaver有以下幾個基本特征：最佳的制作效率；2.網站管理；3.無可比擬的控制能力；4.豐富模 板和XML支援；5.多瀏覽器平臺的支持。Dreamweaver 最大的特點在于其全新的軟件操作界面、強

28、大的動態網 頁編輯功能和開放的插件環境。個人網站的基本風格：主題圖形式：最顯著的標志是主頁有一個醒目的圖形，該圖形很大 程度上反映了網頁作者希望自己的網頁具有的一種意境。信息發布式：主要看重網站的信息量，這類網站都發布大量的信 息，其作者較熱衷于貢獻信息。介于兩者之間的形式：這種網站既想突出個人形象，又想發布大量 信息，組織形式不鮮明。建立網站的鏈接結構有哪幾種形式，其各自的優缺點：樹形鏈接結構（一對一）： 優點：條理清晰，訪問者明確知道自己在什么位置，不會迷路； 缺點：瀏覽效率低，要進行欄目跳轉時，必須繞經首頁。星形鏈接結構（一對多）： 優點：瀏覽方便，隨時可以到達自己喜歡的頁面。 缺點：鏈

29、接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了 多少內容。最好的辦法是：首頁和一級頁面之間用星形鏈接結構，一級和二級頁 面之間用樹形鏈接結構。黃色：代表高貴、富有；白色：代表純潔、簡單；藍色：代表智慧、天空、清爽綠色：代表生命、生機；灰色：代表深沉、陰暗、消極紫色：代表神秘、浪漫、愛情棕色：代表土地。網頁頁面布局的方法：紙上布局法：1）準備若干張白紙和幾支削好的鉛筆（或自動鉛筆），橡皮一塊。要保 證不會由于工具的問題而打斷自己的思路；2）選擇頁面尺寸；頁面總體造型的選擇；選擇一個形狀作為整個頁面的主題造型；在構思了許多圖形之后，選擇一個中意的基本結構作為整個頁面的 主題造型；開始增加頁眉；增加文本；增加圖片；軟件布局法。在欄目設置上可以考慮以下四個方面：一定記住要緊扣主題；設一個最近更新或網站指南欄目；設定一個可以雙向交流的欄目；設一個下載或常見問題(FAQ)回答欄目。劃分欄目需要注意的：盡可能刪除與主題無關的欄目；盡可能將網站最有價值的內容列在欄目上；盡可能方便訪問者的瀏覽和查詢。PWS主要由五個組件組成：個人 WEB