第一部分基礎知識第1頁，課件共63頁，創作于2023年2月初識網頁網頁一般又稱為HTML（HyperTextMarkupLanguage）文件，英文名稱為WebPage，是一種可以在WWW上傳輸，能被瀏覽器認識并翻譯成頁面，進而顯示出來的文件。通常看到的網頁，大都是以.htm或.html后綴結尾的文件。除此之外，網頁文件還有以.cgi、.asp、.php、和.jsp等后綴結尾。根據生成的方式，網頁大致可分為靜態網頁和動態網頁兩種。第2頁，課件共63頁，創作于2023年2月1．靜態網頁靜態網頁是網站建設初期經常采用的一種形式。網站建設者把內容設計成靜態網頁，訪問者只能被動地瀏覽網站建設者提供的網頁內容。其特點如下：網頁內容不會發生變化，除非網頁設計者修改了網頁內容。不能實現和瀏覽網頁的用戶之間的交互，信息流向是單向的，即從服務器到瀏覽器。服務器不能根據用戶的選擇調整返回給用戶的內容，靜態網頁的瀏覽過程如下圖所示。第3頁，課件共63頁，創作于2023年2月瀏覽器Web服務器HTTP請求HTTP應答圖1靜態網頁瀏覽第4頁，課件共63頁，創作于2023年2月2．動態網頁所謂動態網頁是指網頁文件里包含了程序代碼,通過后臺數據庫與Web服務器進行信息交互,由后臺數據庫提供實時數據更新和數據查詢服務。這種網頁的后綴名稱一般根據不同的程序設計語言而有所不同，如ASP文件的后綴為.asp，JSP文件的后綴為.jsp。動態網頁能夠根據不同時間和不同訪問者而顯示不同內容。如常見的BBS、留言板和聊天室通常用動態網頁實現。動態網頁的制作比較復雜，需要用到ASP、PHP、JSP和ASP.NET等專門的動態網頁實現技術。動態網頁的瀏覽過程如下圖所示。第5頁，課件共63頁，創作于2023年2月瀏覽器HTTP請求HTTP應答圖2動態網頁瀏覽數據庫程序Web服務器第6頁，課件共63頁，創作于2023年2月

以電影網站的播放頁面為例，一個電影網站上千部電影，而且每一部電影的集數不只一集，如果一部電影一個播放頁面，制作及維護就會非常麻煩，而且服務器的空間放這些頁面也是個問題。因此這類網站均為動態網站形式，當用戶選擇某個電影或某一集時，相當于提出了請求，動態程序判斷用戶請求后根據請求內容從數據庫中獲得所需內容反饋給用戶，頁面可始終公用一個，哪一天看著頁面不合適，修改這么一個就可以了，不用修改每個單獨的靜態頁面。由此可見動態網頁占用的服務器空間少，容易更新維護，對管理員來說非常方便。

動態網站舉例：/

第7頁，課件共63頁，創作于2023年2月3.動態網頁和靜態網頁

網站采用動態網頁還是靜態網頁主要取決于網站的功能需求和網站內容的多少，如果網站功能比較簡單，內容更新量不是很大，采用純靜態網頁的方式會更簡單，反之一般要采用動態網頁技術來實現。如果網頁上只包含有GIF動態圖片或Flash動畫或JS的動態效果，而不具備與后臺數據庫交互功能的網頁并不是動態網頁，還屬于靜態網頁。靜態網頁是動態網頁的基礎，學習網頁設計的前提是首先掌握靜態網頁制作，然后再進行動態網頁技術的學習。

第8頁，課件共63頁，創作于2023年2月3.網頁的基本構成不同性質的網頁，構成的基本元素是不同的。一般地，網頁的構成包括網頁標題、網頁標志、網頁Banner、導航欄、主內容區、頁腳版權信息等，如下圖所示。第9頁，課件共63頁，創作于2023年2月網頁標題網頁的標志網頁的Banner網頁導航主內容區版權信息第10頁，課件共63頁，創作于2023年2月網頁標題網站中的每一個頁面都有標題，用來提示該頁面的主要內容。標題在瀏覽器標題欄中，它的作用是引導訪問者清楚地知道所要瀏覽的網站內容，不至于迷失方向。網頁導航欄導航欄是網頁設計中的重要部分，又是整個網站設計中較獨立的部分。一般來說，網站中的導航欄在各個頁面中出現的位置比較固定，而且風格較為一致。第11頁，課件共63頁，創作于2023年2月導航欄的位置一般有4種：頁面的左側、右側、頂部和底部。有時候在同一個頁面中運用了多種導航欄，比如在頂部設置了主菜單，而在頁面左側設置了折疊式的折疊菜單，同時又在頁面底部設置了多種鏈接，這樣便增強了網站的可訪問性。當然并不是導航欄在頁面中出現的次數越多越好，而是要合理地運用，使頁面總體協調一致。第12頁，課件共63頁，創作于2023年2月網頁的標志網頁的標志是一個站點的象征，也是一個站點是否正規的標志之一。一個好的標志可以很好地樹立公司的形象。網頁標志一般放在網站的左上角。通常有3種尺寸：88×31（像素）、120×60（像素）和120×90（像素）。第13頁，課件共63頁，創作于2023年2月網頁的BannerBanner是橫幅廣告，是互聯網廣告中最基本的廣告形式。Banner可以位于網頁的頂部、中部或底部的任意一處，一般橫向貫穿整個或者大半個頁面。常見的尺寸是480×60（像素）或233×30（像素），Banner可使用靜態圖像文件也可以使用動畫圖像，除普通的GIF動畫格式外，Flash能賦予Banner更強的表現力和交互內容。第14頁，課件共63頁，創作于2023年2月主內容區網頁的主內容區是網頁的主要內容顯示區域。頁腳版權信息頁腳是防置網站版權信息的地方，可以放置一些聯系方式或其他的導航欄目。第15頁，課件共63頁，創作于2023年2月認識網站網站也稱為站點，英文名稱為WebSite，是指具有獨立域名、獨立存放空間的集合，這些內容可能是網頁，也可能是程序或其它文件。通俗地說網站就是在互聯網上一塊固定的面向全世界發布消息的地方。放置到指定的網站空間中（服務器或虛擬主機），通過域名（也就是網站地址）進行訪問。衡量一個網站的性能，通常從網站空間大小、網站連接速度、服務器主機配置、主機性能等幾個方面考慮。第16頁，課件共63頁，創作于2023年2月網站的分類網站按內容進行分類可分為門戶網站、垂直網站、地方網站；而其中垂直網站又可分為新聞網站、娛樂網站、體育網站、科技網站、游戲網站、生活服務網站和教育職業網站等。網站按服務進行分類，可分為內容提供、搜索引擎、即時通信、電子商務、在線娛樂等。網站按使用群體的不同進行分類。可分為門戶網站、導航網站、電子商務網站、企業網站、政府部門網站和個人網站等。第17頁，課件共63頁，創作于2023年2月網頁制作中的專業術語網站服務器（Web服務器）：也稱為WWW服務器，是專門提供網上信息瀏覽服務的高性能計算機。上網所瀏覽的網頁必須存放在網站服務器中才能供人們訪問瀏覽。第18頁，課件共63頁，創作于2023年2月Browser（瀏覽器）：瀏覽器（Browser）就是指在電腦上安裝的，用來顯示指定文件的程序。常用的瀏覽器有IE6.0，IE7.0，IE8.0，Firefox,Opera等。第19頁，課件共63頁，創作于2023年2月HTTP協議：HTTP是HyperTextTransferProtocol的縮寫，也就是超文本傳輸協議，專門用于從WWW服務器傳輸超文本標記語言（HTML--HyperTextMarkupLanguage）寫的文件，也就是我們通常說的網頁，通過這個協議，我們可以瀏覽網絡上的各種信息，在瀏覽器上看到豐富多彩的文字與圖片。這就是網頁地址都是以“http：//”開頭的原因。第20頁，課件共63頁，創作于2023年2月IP地址：Internet上有無數臺計算機要通過網絡相互連通，為了能夠準確地訪問每臺電腦，就必須指定一個唯一的識別標記。主機在Internet上的唯一標志稱為IP地址（InternetProtocolAddress）。它是一串4組由圓點分割的數字組成的，其中每一組數字都在0－256之間，如：0－255．0－255．0－255．0－255．0－255；如，202．202．96．33就是一個主機服務器的IP地址。第21頁，課件共63頁，創作于2023年2月域名：IP地址是數字化的，比較難記，所以人們提出了一種新方法來代替這種，即“域名”地址。域名由幾個英文單詞組成，如具有一定的意義，其中cn代表中國，com代表商業網，sina代表新浪，www代表萬維網（WorldWideWeb）,整個域名合起來就代表新浪站點。域名地址和IP地址實際上是一回事，只是形式上不同而已。在訪問一個站點的時候，可以輸入該站點IP地址也可以輸入域名地址。這里就存在一個域名地址和對應的IP地址相互轉換的問題，這些信息實際上是存放在域名服務器中，當輸入一個域名地址時，域名服務器就會搜索其對應的IP地址，然后訪問到該地址所表示的站點。第22頁，課件共63頁，創作于2023年2月URL(UniformResourceLocator--統一資源定位器)：是專為標識Internet網上資源位置而設的一種編址方式，我們平時所說的網頁地址指的即是URL，它一般由三部分組成（傳輸協議：//主機IP地址或域名/地址資源所在路徑和文件名）,如洪恩在線-電腦樂園的URL為：/pc/index.htm其中http超文本傳輸協議(HyperTextTransferProtocol)是web服務器域名地址pc是網頁所在路徑index.html是相應的網頁文件。第23頁，課件共63頁，創作于2023年2月FTP:文件傳輸協議，是FileProtocol的縮寫，用FTP協議登錄到FTP服務器。可以顯示該服務器上的文件及目錄清單，并且能夠向FTP服務器上傳或下載文件。FTP支持多種文件類型和文件格式的傳輸，包括ASCII和二進制文件。第24頁，課件共63頁，創作于2023年2月Banner（橫幅廣告）：橫幅廣告是互聯網廣告中最基本的廣告形式。它是一個表現商家廣告內容的圖片，放置在廣告商的頁面上，尺寸是480×60像素，或233×30像素；一般是Gif格式的圖像文件，可以使用靜態圖形，也可用多幀圖像拼接為動畫圖像；除普通Gif格式外，新興的RichMediaBanner（富媒體廣告）能賦予Banner更強的表現力和交互內容，但一般需要用戶使用的瀏覽器插件支持（Plug-in）。Banner一般翻譯為網幅廣告、旗幟廣告、橫幅廣告等。第25頁，課件共63頁，創作于2023年2月Click（點擊次數）：用戶通過點擊廣告而訪問廣告主的網頁，稱點擊一次。點擊次數是評估廣告效果的指標之一。Cookie：Cookie電腦中記錄用戶在網絡中行為的文件。網站可通過Cookie來識別用戶是否曾經訪問過該網站。當瀏覽某些Web站點時，這些站點會在用戶的硬盤上用很小的文本文件存儲一些信息，這些文件就稱為Cookie。Cookie中包含的信息與瀏覽者的愛好有關第26頁，課件共63頁，創作于2023年2月Database（數據庫）：Database通常指的是利用現代計算機技術，將各類信息有序地分類整理，便于查找和管理。在網絡營銷中，指利用互聯網收集用戶個人信息，并存檔、管理，例如姓名、性別、年齡、地址、電話、興趣愛好、消費行為等。KeyWord（關鍵字）：KeyWord是用戶在搜索引擎中提交的文字，以便快速查詢所需內容。第27頁，課件共63頁，創作于2023年2月常用網頁制作軟件網頁過程中常用制作軟件包括網頁編輯軟件，圖像處理軟件、動畫處理軟件。第28頁，課件共63頁，創作于2023年2月網頁編輯軟件MicrosoftFrontPage：由微軟公司推出,目前用到的版本有FrontPage2003、FrontPage2007、FrontPage2010等。它的特點是簡單易用，容易上手，而且與IE、Word等軟件結合的很好。缺點是兼容性差，對于復雜的動態網頁設計能力有限。Dreamweaver：由Macromedia公司推出，比較經典的版本有ＤreamWeaverMX2004、ＤreamWeaver8等。被Adobe公司收購后推出ＤreamWeaverCS3、CS4、CS5三個版本。它的特點是操作方便，代碼簡潔，面板設計豐富多樣、對動態網頁編程與設計給予了很好的支持，以及與Fireworks，Flash，Photoshop等軟件能緊密的結合。UltraEdit-32：代碼編輯工具，主要編輯ASP等動態網頁。第29頁，課件共63頁，創作于2023年2月圖像處理軟件做網頁需要有一定的平面設計基礎。如果設計者只會寫程序，沒有一定的界面設計功底，即便你的程序編寫得再好，沒有美觀的界面為依托，還是沒有人愿意來看你的網頁，就像一件衣服一樣，衣料再好，樣子不好看也不會有人去買。在制作網頁過程中常用的圖像處理軟件有：Photoshop，網頁設計者必須精通的一個圖形處理工具。Imageready，在用Photoshop將界面設計完成后，切換到Imageready中進行界面分割處理，快速完成由圖到網頁的過渡。不過凡事有利弊，要學會靈活運用。ACDSee，目前最流行的數字圖像處理軟件，它能廣泛應用于圖片的獲取、管理、瀏覽、優化，甚至和他人進行分享。Fireworks，制作網頁的高級輔助工具，可以進行動畫制作，圖像優化，熱點、切片和輪替按鈕，文件導入和導出，無須學習代碼即可創建具有專業品質的網頁圖形和動畫，例如變換圖像和彈出菜單等。第30頁，課件共63頁，創作于2023年2月動畫制作軟件網頁的動畫一般分為兩種，即GIF動畫和Flash動畫。這兩種動畫都可以通過Flash軟件來完成，而GIF動畫有很多種工具可以實現，Flash的文字動畫也有專門的工具，這些工具對于想做出好的動畫，又不能熟練使用Flash的制作者提供了極大的方便。Flash：Flash是交互式矢量圖和Web動畫的標準，網頁設計者使用Flash能創建漂亮的、可改變尺寸的動畫，可以創建極其緊密的導航界面、技術說明以及其他奇特的效果。Swish：在此工具中做好文字動畫后可以導出為.swf格式的文件，再導入到Flash中進行進一步的處理，讓Flash更生動，更炫目多彩。第31頁，課件共63頁，創作于2023年2月UleadGIFAnimator：友立公司出版的動畫GIF制作軟件，內建的Plugin有許多現成的特效可以立即套用，可將AVI文件轉換成動畫GIF文件，而且還能將動畫GIF圖片最佳化，能將放在網頁上的GIF動畫減肥，以便讓人能夠更快速地瀏覽網頁。碩思閃客精靈：支持將SWF文件導出成FLA文件，幫助丟失FLA文件的影片作者重新獲得FLA文件，從而可以再編輯。碩思閃客之錘：是一款具有專業水準的動畫制作工具。它支持圖形設計、運動動畫、引導線、遮罩效果、流聲音和事件聲音、幀標記、設置電影剪輯、按鈕等符號。文字動畫特效制作SwishZone：特效中有許多細節結合使用能得到非常炫的效果，直接預覽，能直接導出為SWF文檔格式。GIF動畫制作GIFMovieGear3.0：GIF動畫制作軟件，幾乎有需要制作GIF動畫的編輯功能它都有，無須再用其他的圖形軟件輔助。第32頁，課件共63頁，創作于2023年2月網站設計的學習內容從網站設計需要掌握和運用的知識分析，可分為內容組織、美工設計、頁面編輯、網站編程4個方面內容。內容組織：確定網站的內容和功能，制定網站的目標和組織網站的信息資源，繪制網站內容組織框架結構圖，根本目的是通過構建網頁之間的有機信息聯系，幫助用戶找到信息，即進行信息構建（IA）。美工設計：根據網站布局框架圖，進行頁面風格和美觀設計。常用軟件有Photoshop、Fireworks、Flash等。頁面編輯：根據美工設計圖進行頁面代碼化編輯，常用軟件有Dreamweaver、FrontPage，常用技術有HTML、XHTML、CSS等。網站編程：進行腳本編寫和功能模塊實現，即實現網站所需功能及網站內容的便捷式管理和更新。常用技術有asp、php、jsp、、c#、Ajax、java、Delphi、Perl等動態網站編程技術。第33頁，課件共63頁，創作于2023年2月信息構建（IA）對于美工設計和網站編程我們在后面的課程中都會有涉及，在這里對于信息構建（IA）做以簡要介紹。1975年美國的建筑師沃爾曼(RichardSaulWurman)創造性地提出了InformationArchitecture一詞，并在1976年召開的美國建筑師協會全國會議上將它公布于世。他強調要把復雜的信息以一種易于理解的方式描述出來，滿足人們的信息需求。從事IA設計的人員被稱為信息建筑師(InformationArchitect)，沃爾曼明確指出信息建筑師的工作任務：(1)組織數據中的固有模式、化復雜為明晰；(2)創建信息結構或地圖，令他人找到通向知識的個人路徑。第34頁，課件共63頁，創作于2023年2月在具體實踐中信息建筑師們會履行下列職責：(1)收集和定義信息用戶的需求內容，用戶需求功能的要求并且幫助定義信息產品的視覺外觀；(2)在可理解層次去組織信息，通常會利用網站地圖、內容地圖或信息模型。這包括發展受控詞匯和辭典；(3)在屏幕層次決定內容位置與交互。要在最終設計之前添加原型導航、內容關系與用戶交互。通常最后要形成一份書面的技術說明書；(4)進行用戶研究（訪問、觀察、統計研究、市場分割研究等等）和可用性測試（啟發式評估、用途分析、用戶測試等等）。第35頁，課件共63頁，創作于2023年2月IA并沒有自身的傳統、標準與文化，它是從一系列背景領域中誕生的。這些領域包括計算機科學、圖書館學、信息學、知識管理、圖形設計、交互設計、信息設計、可用性研究、認知科學、圖形設計、品牌策略、社會科學等等。這些都是IA的基礎學科，IA不斷從這些學科中吸取知識構筑自身的理論與實踐體系。第36頁，課件共63頁，創作于2023年2月網站建設流程在網站建設時，需要進行網站定位、申請網站域名、申請服務器空間、確定網站主題、網站制作、網站發布與上傳、后期更新與維護、網站推廣幾個步驟。第37頁，課件共63頁，創作于2023年2月第一步：網站定位網站定位就是確定網站的形式，明確網站的主要功能與特點，常用的網站主要分以下幾類：綜合門戶網站主要特點是功能強大、內容豐富、信息齊全，網站有著強大的功能與美觀的頁面。這類網站開發是一個龐大的項目，需要專業的開發團隊來完成。在網站開發的學習與工作中，可以學習這類網站的網頁風格和功能模塊。這類網站的代表有新浪、搜狐、網易。第38頁，課件共63頁，創作于2023年2月第一步：網站定位新聞資訊網站是一種可以發布大量的新聞與圖片內容的網站。用戶可以方便的查看這些新聞資訊的內容，這類網站主要開發內容是網站的美術設計與網站內容的管理功能。這類網站的代表有人民網、新華網、央視國際網站。第39頁，課件共63頁，創作于2023年2月第一步：網站定位公司宣傳網站此類網站是開發工作中最常見的網站類型。企業借助網站推廣企業形象、樹立企業品牌、發布企業產品。企業網站的設計重點是精美的網頁和企業產品的發布管理功能。這類網站有：金山軟件、中企動力等。第40頁，課件共63頁，創作于2023年2月第一步：網站定位娛樂網站娛樂網站是一種很常用的網站形式，此類網站的設計非常靈活，可以使用各種個性化的色彩和布局，此類網站代表有：新浪娛樂、激動網、E視網等。電子商務網站此類網站常包括產品、廣告、購物、市場推廣等。設計重點是網站的產品管理功能和用戶的交互功能。代表有：易趣、淘寶、拍拍等。第41頁，課件共63頁，創作于2023年2月第一步：網站定位網址導航網站此類網站的內容是將常用的網站鏈接整理到一個網站上，方便用戶使用。這類網站的開發重點是網站鏈接與分類管理。代表有：網址之家、網址大全、265上網導航。第42頁，課件共63頁，創作于2023年2月第一步：網站定位下載網站下載網站可以方便地為用戶提供各種資料下載，此類網站的開發重點是資料的管理與分類，著名的下載網站有霏凡軟件、天空軟件、百度MP3下載等。搜索引擎網站是為用戶提供內容搜索功能的網站，主要內容是實現網站的搜索與內容管理功能，這類網站的代表有百度、谷歌、雅虎等。第43頁，課件共63頁，創作于2023年2月第一步：網站定位個人網站個人網站也叫個人主頁，是網絡中個人宣傳類的網站，其形式非常靈活，可以包含不同的內容，個人網站的內容沒有特別規則，可以根據個人喜好，進行各種發揮。第44頁，課件共63頁，創作于2023年2月第二步：申請網站域名域名是由國際域名管理組織和國內的相關機構統一管理的，很多域名服務商可以代理域名的注冊業務，較著名的域名服務商有：中資源（）、西部數碼（）、中國萬網（）、新網（）、中國數據()、武漢數據（）第45頁，課件共63頁，創作于2023年2月第三步：申請服務器空間訪問網站的過程實際就是用戶計算機和服務商進行數據鏈接和數據傳遞的過程，這就要求網站必須存放在服務器上才能被訪問，一般的網站，不是使用一個獨立的服務器，而是在網絡公司租用一個一定大小的存儲空間來支持網站運行，這個租用的網站存儲空間就是服務器空間。第46頁，課件共63頁，創作于2023年2月第三步：申請服務器空間不同的服務器空間的主要區別是支持網站的程序和支持的數據庫不同，常用的服務器空間可能分別支持下面這些不同的網站程序：ASP：使用Windows系統和IIS服務器。PHP:使用Linux系統或Windows系統，使用Apache網站服務器。.NET：使用Windows系統和IIS服務器。JSP：使用Windows系統和Java的網站服務器第47頁，課件共63頁，創作于2023年2月第三步：申請服務器空間不同的服務器空間可能支持不同的數據庫，常用的服務器空間支持數據庫有以下幾種：Access：常用于ASP網站SqlServer2000：常用于ASP網站或.NET網站。Mysql：常用于PHP或JSP網站Oracle：常用于JSP網站第48頁，課件共63頁，創作于2023年2月第四步：確定網站主題網站的主題是指一個網站在建設中需要完成的任務和要實現的設計思想。這是網站開發的一項重要工作，相關的設計思想需要在這個過程完成，設計思想需要書寫設計文檔。第49頁，課件共63頁，創作于2023年2月第五步：網站制作包括網頁平面設計圖設計，網頁頁面設計，網站功能模塊實現等。這部分內容為這一學期里重點掌握的內容部分。第50頁，課件共63頁，創作于2023年2月第六步：網站發布與上傳網站完成設計與調試后，需要上傳到租用的服務器空間中才能被www上的用戶訪問。網站發布就是把自己計算機中的網站內容發布到網絡上服務器空間的過程。上傳一般選擇FTP軟件進行，常用的FTP軟件有LeapFTP、CuteFTP、SmartFTP等。圖4為CuteFTP上傳的截圖。第51頁，課件共63頁，創作于2023年2月圖4CuteFTP連接建立第52頁，課件共63頁，創作于2023年2月圖4CuteFTP的使用第53頁，課件共63頁，創作于2023年2月舉例：http://www.3v.cm/用戶名：qazwsx-123密碼：789456123第54頁，課件共63頁，創作于2023年2月第七步：后期更新與維護網站完成設計和上傳后，還要定期對網站的內容進行更新和維護，否則一成不變的內容很難吸引瀏覽者。網站在運行的過程中還可能出現一些錯誤和問題，因此也需要分析錯誤原因修正錯誤，解決問題。第55頁，課件共63頁，創作于2023年2月第八步：網站推廣新網站在發布后并不會有很多人訪問，要提高網站的知名度就需要對網站進行推廣，網站推廣分自由推廣和付費推廣兩種。自由推廣和相關的站點交換友情鏈接。在論壇、博客、留言板上發帖或留言。把自己網站添加到各種搜索引擎。