網頁設計與制作聽課筆記doc

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

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

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

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

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

6、：所有的色彩都可以通過三原色調配出來。只要對紅、綠、藍三種基色的含量進行配比，就可以調配出其他的顏色，稱為加色原理。頁腳：頁腳和頁眉相呼應，是指在頁面的最下方的一塊空間。頁眉是放置站點主題和標識的地方，而頁腳通常是放置制作者、公司相關信息、版權的地方，有時還會放置一導航欄。色相：是顏色的基本屬性，反映顏色的原貌，通過色相，人們才能區(qū)分種種彩色。飽和度：也叫純度，指顏色的純潔程度。飽和度大，顏色就顯得生動，活潑，有很強的視覺沖擊力；飽和度小，顏色就不純凈，看起來顯得灰暗。抖動：由于瀏覽器不能夠顯示所有的顏色，因此偽造了那些在顏色有限的調色板中不能顯示出來的顏色，通過近鄰像素傾向于混合而產生在圖像

7、中實際不存在的顏色，從而達到一種補償目的?！岸秳印钡膱D像有很多顆粒，圖像顯得非常粗糙。明度：也叫亮度，體現顏色的深淺。通常說顏色“深了”、“淺了”，就是指明度的高低。而非彩色只有明度特征，沒有色相飽和度。造型：就是創(chuàng)造出來的物體形象。這里是指頁面的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序的。雖然，顯示器和瀏覽器都是矩形，但對于頁面的的造型，可以充分運用自然界中各種幾何形狀以及它們的組合：矩形、圓形、三角形、菱形等。WEB安全色：由于瀏覽器在顯示這1670萬種顏色時是有選擇的，它只能選擇其中的216種進行顯示，無論是Rec（00-FF），Green（00-FF）顏色通道，

8、或是Blue（00-FF）對任意一通道，都采取一種“跳躍”的方式進行顏色編碼，即R、G、B都只能在00-FF之間的跳躍取值，而不能任意取值。這種跳躍顯示的色彩被稱為WEB安全色，意義是在任何瀏覽器上都能夠正確顯示。表單：就是網頁中站點服務器處理的一組數據輸入域。當訪問者單按鈕或圖形來提交表單后，數據就會傳送到服務器上。它是非常重要的通過網頁在與服務器之間傳遞信息的途徑，表單網頁可以用來收信瀏覽者的意見和建議，以實現瀏覽者與站點之間的互動?？蚣埽菏且粋€由框架網頁所定義的瀏覽器初見窗區(qū)域，它通過框架網頁實現?？蚣芫W頁是一種特別的HTML網頁，它可將瀏覽器視窗分為不同的框架，而每一個框架則可顯示一個

9、不同網頁?？蛻舳藞D像地圖：它可將每個作用區(qū)的URL位置直接地對應在WEB網頁的圖像上。客戶端圖像映射并不需要通過服務器處理來允許站點訪問者是否可在圖像映射上進行超鏈接，但是，并非所有的瀏覽器都支持客戶端圖像映射。超級鏈接：是指從一個網頁指向另一個目的端的鏈接，是從文本圖片或圖形或圖像映射到全球文域網上網頁或文件的指針。在全球廣域網上，超鏈接是網頁之間和WEB站點之中主要的導航方法。標記：HTML中用來標識網頁元素的類型、格式和外觀的文本字符串。DHTML：就是一種即使在網頁下載進瀏覽器以的仍然能夠隨時變換更新網頁內容排版樣式以及動畫等等的技術，它是一種通過各種技術的綜合發(fā)展而得以實現的概念，主

10、要包括JavaScript、VBScript、DOM、CSS等技術。DOM：為HTML文件定義了一個與平臺無關的程序接口。使用該接口可以控制文件的內容、結構和樣式，WEB開發(fā)人員借助DOM可以在其WEB頁中引入動態(tài)和交互式內容，而不必依賴于WEB服務器來提供新的內容或改變現有內容的顯示方式。JavaScript：一種由Netscape Communications和Sun Microsystems，Inc.所發(fā)展出來的一種Scripting語言。它可以被嵌入在HTML文檔中，在網頁被下載到客戶端后被瀏覽器所處理。CSS：是由全球廣域網協會所發(fā)展出來的HTML的規(guī)范表?？墒筗EB網頁的制作者將樣

11、式表附加到HTML文件上。樣式表包括了該如何顯示網頁的排版信息，也可在HTML文件樣式表與用戶自定義樣式混合的情況下工作。靜態(tài)聯編：是指程序語言的各種對象和庫的引用必須在編譯時進行，以使編譯器能夠實現強類型檢查，Java就屬于靜態(tài)聯編類的語言。動態(tài)聯編：是指程序語言的各種對象和庫的引用在運行時再進行檢查，如不經運行就無法實現對象引用的檢查。JavaScript就屬于動態(tài)聯編類的語言。函數：是一系列指令的集合，是對反復使用或可能重用的行為的抽象，從本質上看，函數是存放代碼的代碼段。這些代碼可能在某些時候被執(zhí)行，或在文檔被裝載時立即被執(zhí)行，也可能是對被觸發(fā)事件的響應。選擇符：在層疊樣式表的樣式定義

12、中（可樣式規(guī)則中），把HTML組件連接到一個樣式內容和值的特定組合。內聯式樣式單：它利于現有的HTML標記，把特殊的樣式加入到那些由標記控制的信息中。貼層：是用于更精確地定位頁面元素的一種CSS屬性，它把網頁想象為一個平面，具有貼層（clip）屬性的元素就像一個貼層漂浮在網頁之上，三維方向的位置都是可以控制的。主題：是一套經過許多專業(yè)網站設計人員的圖形、色彩、字體的組合，可以用來對網頁進行修飾，增強網頁的視覺效果。BOX模型：在CSS中把HTML中以<標記>的部分稱為BOX（容器）。每個BOX都有三種基本屬性：margin，padding和border.站點：是一個各種媒體的集合的

13、抽象概念，有時也被翻譯為“站臺”。在物理上它可能是一個有許多子目錄的大目錄，但是站點的許多媒體也可能分布在其他各個不同的物理位置上。WEB服務器通常以站點為單位來組織要發(fā)布的信息。熱區(qū)：在客戶端圖像地圖上設置的一片區(qū)域，并為這片區(qū)域設置了相應的超級鏈接。當在瀏覽器中單擊圖片上相應的區(qū)域時，可以跳轉到預先設置的目標超級鏈接上。網頁動態(tài)效果：在Frontpage內增加文檔與對象的演示文稿效果，可以利用DHTML效果工具欄添加效果網頁元素內，且不需要任何編程。向導：是被嵌入在程序中的一種程序，可以被用來與用戶不斷交互，最后依用戶在向導的輸入窗格中所做的選項來創(chuàng)建完成用戶需要完成的事情。模板：指一類特

14、殊文檔，可提供構造最終文檔的基本工具。模板中可包含以下元素：在同類型的所有文件中都相同的文字或格式設置，如備忘錄或報表樣式。其他的文件通過引用模板就可以完成格式的規(guī)范化等標準工作。CPC：“Cost Per Click throuth”的縮寫，為每千次點擊成本，與CPM類似，也是千次成計算單位，以廣告圖形被點擊并連接到相關網址或詳細內容頁面1000次為基準的網絡廣告收費模式。雖然CPC費用比CPM的費用高很多，但效率比較高，廣告主往往更傾向選擇依據CPC付費。CGI：（common Gateway Interface）通用網關接口，是指在WEB服務器上定義的一套WEB客戶請求與應答的方法?？蛻?/p>

15、機向服務器的請求只要屬于CGI范圍，WEB服務器將自動啟動一個CGI（網關）程序。它的任務是把客戶的請求從網關程序的環(huán)境變量中取出，并進行相應的加工處理，由CGI程序決定如何對客戶的請求做出應答。CGI是WEB服務器不可缺少的組成部分，它是WWW與現有數據程序或實用文件檢索系統之間的橋梁。“結構良好的”規(guī)則：XML文件的結構是按其標記集的語法規(guī)則進行控制的。有一些一般規(guī)則應用于所有的XML文件以確定文檔是否為“結構良好的”。要進行語法分析的XML文件必須為“良好格式”。PWS：（Personal Web Server）個人WEB服務器，是一個在window 9X平臺下運行的WEB服務器。其目的

16、主要是便于調試網頁和在局域網中的基于網頁的信息發(fā)布。UNIX：一個多用戶、多任務的操作系統，以許多種形式存在和實現，一般用在專用的計算機工作站上。許多站點服務器是在UNIX系統上執(zhí)行。虛擬主機：是使用特殊的軟硬件技術，把一臺運行在因特網上的服務器主機分成多臺“虛擬”主機，每一臺虛擬主機都具有獨立的域名和IP地址，具有完事的Internet服務器（WWW，FTP，E-mail）等功能，虛擬主機之間完全獨立，并可由用戶自行管理，在WEB上看，每一臺虛擬主機和一臺獨立的主機完全一樣。CPM：“Cost Per one thousand impressions”的縮寫，每千播放次數成本，以廣告圖形（D

17、emographic）被瀏覽者LOAD（裝載）1000次為基準的網絡廣告收費模式。國內ICP編愛這種計費模式。SGML：“Standard Generalized Markup Language”（通用標識語言標準）。它是國際上定義電子文件結構和內容描述的標準。XML：（Extensible Markup Language可擴展標記語言）是一種基于SGML標準的網絡信息描述語言，能夠使用戶自己根據文件的結構來創(chuàng)建自己的DTD（Document Type Definition文件類型定義），從而使XML能夠脫離固定標記而表述數據的含義。DTD：Document Type Definition文件

18、類型定義，是一個或是一些用XML書寫的文件，包含了對一種文件的正式定義，定義了文件中的元素能用什么名字，能放在什么位置，應該怎樣組合等定義。什么是網絡協議，內容主要包括：網絡協議是一系列通信規(guī)則的總稱，主要包括：1.用戶數據與控制信息的結構和格式；2.需要發(fā)出的控制信息以及相應要完成的操作與響應；3.對事件實順序的詳細說明等三部分內容。規(guī)劃目錄結構時應當遵循的幾個原則：1.不要將所有文件都存放在根目錄下；2.按欄目內容分別建立子目錄；3.在每個主目錄下都建立獨立的images目錄；4.目錄的層次不要太深；5.切忌使用中文目錄；6.不要使用過長的目錄；7.盡量使用意義明確的目錄。網絡中存在著多種

19、級別的協議?？偟膩碚f可以分為：1、硬件協議：定義了硬件設備如何動作以及如何協同工作。2、軟件協議：程序之間的通信是通過軟件協議完成的。除創(chuàng)意之外，在網站設計時還需要考慮以下基本原則：1.網頁內容要便于閱讀；2.站點內容要精、專和及時更新；3.注重色彩搭配；4.考慮帶寬；5.要適當考慮不同游覽器、不同分辨率的情況；6.提供交互性；7.簡單即為美。整個站點設計大體分為八個部分：1、初始商討；2、構思；3、綜合內容；4、頁面布局和導航；5、圖像制作；6、內容流程；7、測試；8、驗收交付；網頁設計的通用規(guī)則：1.網站的設計目的決定設計方案；2.瀏覽者的需求第一位；3.頁面的有效性；4.頁面布局的保持統

20、一性；5.使用表格和適當的結構來設計網頁；6.謹慎使用圖片；7.平面設計意識；8.減少Java Applet和其他多媒體的使用。JavaScript的基本特點：1、一種腳本編寫語言；2、基于對象；3、簡單性；4、安全性；5、基于事件；6、跨平臺。有關商業(yè)網站的風格特征：1.公司徽標或商標應當出現在頁面最上方，盡可能做到色彩醒目，同時占用版面?。?.可以采用主題圖形產品廣告來突出公司形象與風格。3.主要欄目一般采用圖文并茂的超級鏈接實現，要考慮到主要欄目圖片、文字之間的色彩配合，同時要和主題圖形相互襯托，主題圖形如果較大，則欄目必須縮?。?.不要把主要欄目和次要欄目都顯示在同一個頁面上；5.商業(yè)

21、網站一般都有固定的欄目頁面，如：Support，service，About us等；6.必須建立站內搜索引擎，以便瀏覽者在站內查找所需要的信息。請仔細閱讀P15-16的細節(jié)內容JavaScript對象：1.Window對象2.String對象3.Document對象4.Navigator對象5.String對象6.Math對象7.Date對象使用DHTML的原因：1.DHTML將網頁上的每一個元素劃分成許多獨立的對象，這些對象的屬性通過CSS來指定。2.DHTML將每個對象向一個編程和腳本語言的框架開放，可使用編程語言C+操縱網頁上的對象，也可以使用JavaScript，VBScript操縱網

22、頁上的對象。JavaScript與Java的區(qū)別：1.兩者語言間的異同：B. JavaScript是基于對象和事件驅動的編程語言，Java是一種真正面向對象的語言；C.前者是一種解釋性編程語言，后者的源代碼在傳遞到客戶端執(zhí)行之前，須經過編譯；D.強變量和弱變量。前者采用弱定義類型變量檢查，后者相反。E.前者的代碼是一種文本字符格式，可以直接嵌入HTML文件中，并可用動態(tài)裝載，后者是一種與HTML無關格式，必須通過像HTML中引用外媒體那樣進行裝載，其代碼以字節(jié)代碼的形式保存在獨立的文檔中；F.嵌入方式不一樣，前者使用來標識，后者用 來標識；G.前者采用動態(tài)聯編，后者使用靜態(tài)聯編。2.語言性能的

23、差異：a. JavaScript的本質是解釋的；b. JavaScript實現了SRC屬性；c. JavaScript代碼能方便地修改，并立即在瀏覽器中看到修改的結果；d. JavaScript能有效地與DOM結合控制瀏覽器的行為，能方便地使用插件、瀏覽器事件、窗體等技術，以實現用戶與網頁的交互；e.由于JavaScript代碼置于HTML文件中，這樣，JavaScript代碼便暴露在眾人面前，源碼存在安全問題；f.雖然JavaScript的功能非常強大，但是它在處理非常復雜的應用時就被其自身機制的局限性所限制。FrontPage2000增加的新功能：1.更容易建立專業(yè)的、美觀的網站；2.Fr

24、ontPage2000不僅僅可以用來制作網頁，用戶還可以使用它來建設和維護自己的整個網站，更方便地檢測、更新網站；3.FrontPage2000比其它Office組件的事例性更加提高，打開和運行的速度比FrontPage98更快，并擁有更方便的DBM；4.方便地使用主題；5.能夠以圖形化的方式展示一個完事的WEB站點，也可以向一個完事的WEB站點引入HTML文件，或由現有WE耳聞目睹點引出文件，而且能夠自動維護站點內部的所有超級鏈接的正確性；6.能夠自動創(chuàng)建WE耳聞目睹點的文本索引，通過FrontPage提供的webbit搜索組件查找索引，可以無需編程進行站點內部的全文檢索；7.加強了數據庫訪

25、問能力，提供了許多設計時控件，使WEB頁面與數據庫進行聯系的能力得到加強。FrontPage主要功能：1.創(chuàng)建和管理Web站點；2.制作網頁；3.發(fā)布站點；4.維護站點。非商業(yè)組織的網站風格：1.強調頁面的主色調；2.主題圖形要求反映單位的風采，設計應有創(chuàng)意、有內涵，莊重中不乏活潑；3.超級鏈接的分類一定要清晰，可采用圖形，必要時可建立站內搜索引擎；4.信息看板很重要，因為非商業(yè)組織的網站更新不如商業(yè)網站頻繁，始終如一的畫面顯得枯燥，所以經常去更新信息查看板，將增加訪問者的訪問興趣。運用色塊制作網頁時需要掌握的幾個要點：1.冷暖色調在均勻使用時不宜靠近；2.純度相同的兩種顏色也不宜放在一起；3

26、.整個頁面中最好有一個主色調，否則整個頁面就顯得凌亂。“所見即所得”編輯器的一些致使的弱點：1.難以精確達到與瀏覽器完全一致的顯示效果；2.因為“所見即所得”編輯器在生成代碼時，是按照軟件編制人員事先設計好的模式做的；因此不能完全適應各種不同的情況，尤其在實現同樣效果地，“所見即所得”的編輯器往往會書寫出冗余度高的代碼，不如手工書寫的來得簡潔。WEB在實際應用中主要包含三個方面：1.實現資源引用的統一命名機制；2.使用標準的WEB文件傳輸機制HTTP；3.文本的邏輯結構采用標記語言HTML描述協議；Dreamweaver有以下幾個基本特征：1.最佳的制作效率；2.網站管理；3.無可比擬的控制能

27、力；4.豐富模板和XML支援；5.多瀏覽器平臺的支持。Dreamweaver最大的特點在于其全新的軟件操作界面、強大的動態(tài)網頁編輯功能和開放的插件環(huán)境。個人網站的基本風格：1.主題圖形式：最顯著的標志是主頁有一個醒目的圖形，該圖形很大程度上反映了網頁作者希望自己的網頁具有的一種意境。2.信息發(fā)布式：主要看重網站的信息量，這類網站都發(fā)布大量的信息，其作者較熱衷于貢獻信息。3.介于兩者之間的形式：這種網站既想突出個人形象，又想發(fā)布大量信息，組織形式不鮮明。建立網站的鏈接結構有哪幾種形式，其各自的優(yōu)缺點：1.樹形鏈接結構（一對一）：優(yōu)點：條理清晰，訪問者明確知道自己在什么位置，不會“迷路”；缺點：瀏

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