第1章初識網站1*主要內容1.1網站的基本概念11.2網頁設計與網站建設基礎入門21.3網站開發流程32*1.4網站頁面策劃與設計41.5視覺空間的構成51.6網頁色彩搭配及精美網站賞析61.7上機實訓——查看與分析網站71.8本章小結81.1認識網站3*1.1.1什么是網站網站是因特網上一塊固定的面向全世界發布消息的地方，由域名和網站空間構成。網站頁面通常包括主頁和其他具有超鏈接功能的頁面。如今，許多公司都擁有自己的網站，并利用網站平臺來進行產品宣傳、資訊發布、人員招聘等。隨著網頁制作技術的流行與普及，很多人也開始擁有個人主頁，通常是制作者用來自我介紹、展現個性的地方。與此同時，也涌現出一批專業企業網站制作的公司，通常這些公司的網站上提供了各種有關服務、新聞、旅游、娛樂、經濟等的資訊。1.1認識網站4*1.1.2網站的分類及特點1.個人網站2.企業類網站3.娛樂休閑類網站4.機構類網站5.電子商務類網站6.綜合門戶類網站7.搜索引擎類網站圖1-1個人網站1.1認識網站5*1.1.3什么是網頁用戶在訪問網站時所看到的實際內容即為網頁。一個網站中通常由許多的網頁構成，常見的網頁文件格式為HTML格式，其文件擴展名為“.html”、“.htm”、“.asp”、“.aspx”、“.php”和“.jsp”等。網頁是構成網站的基本元素，而網頁則是由一些基本元素構成的，包括文本、圖像、超鏈接、表格、動畫、音樂和交互式表單等。1.1認識網站6*1.1.4網頁基本構成1.文本2.圖像和動畫3.聲音和視頻4.表單5.超鏈接6.表格7.其他元素圖1-11網頁中的表單1.1認識網站7*1.1.5網頁的類型根據網頁中的交互功能，可將網頁分為靜態網頁和動態網頁兩種類型。純粹HTML格式的網頁通常被稱為“靜態網頁”，也就是以.htm、.html、.shtml和.xml等為后綴的文件。“動態網頁”的文件里包含了程序代碼，通過后臺數據庫與Web服務器進行信息交互，由后臺數據庫提供實時數據更新和數據查詢服務。1.2網站建設的工具軟件及技術8*1.2.1網頁效果圖設計軟件Photoshop軟件是由Adobe公司推出的圖像處理軟件，它具有界面友好、易學易用等優點，目前已被廣泛應用于印刷、廣告設計、網頁圖像制作和照片編輯等領域。Fireworks軟件是創建、編輯和優化網頁圖像的多功能應用程序。圖1-12PhotoshopCS5工作界面圖1-13FireworksCS5工作界面1.2網站建設的工具軟件及技術9*1.2.2網頁內容編排軟件圖1-14DreamweaverCS5工作界面1.2網站建設的工具軟件及技術10*1.2.3網頁動畫制作軟件圖1-15FlashCS5工作界面1.2網站建設的工具軟件及技術11*1.2.4超文本標記語言HTML的英文全稱是HyperTextMarkupLanguage，中文通常稱為“超文本標記語言”或“超文本標簽語言”，是互聯網上編寫網頁的主要語言，提供了精簡而有力的文件定義，可以設計出多姿多彩的超媒體文件，通過HTTP通信協議還可以在全球互聯網（WorldWideWeb）上進行跨平臺的文件交換。1.2網站建設的工具軟件及技術12*1.2.5CSS標記語言CSS（CascadingStyleSheet，可譯為“層疊樣式表”或“級聯樣式表”）是一組格式設置規則，用于控制Web頁面的外觀。通過使用CSS樣式設置頁面的格式，可以將頁面的內容與表現形式分離，將頁面內容存放在HTML文檔中，而用于定義表現形式的CSS規則被存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。將內容與表現形式分離，不僅可以使維護站點的外觀更加容易，還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。1.2網站建設的工具軟件及技術13*1.2.6網頁腳本程序語言JavaScript是一種基于對象和事件驅動并具有安全性能的腳本語言，利用JavaScript程序可以使頁面更加生動、活潑，以小的程序量完成大的功能。使用它的目的是與超文本標識語言、JavaScript語言一起實現在一個網頁中鏈接多個對象，與網絡客戶交互，從而可以開發客戶端的應用程序。它是通過嵌入或調入到標準的HTML語言中實現的。1.2網站建設的工具軟件及技術14*1.2.7動態網站編程語言動態網頁是與靜態網頁相對應的，網頁URL的后綴不是以.htm、.html、.shtml、.xml等靜態網頁的常見動態網頁制作形式存在的，而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式為后綴的。常見的動態網站編程語言有ASP、PHP、JSP、ASP.NET等。1.3網站開發流程15*1.3.1網站整體規劃對網站的整體風格和特色做出定位，可以從以下幾個方面考慮。（1）明確建立網站的目的：是宣傳產品、進行電子商務還是建立行業性網站？是企業需要還是市場需求?（2）整合公司資源，確定網站的類型：產品宣傳、網上營銷、客戶服務、電子商務。（3）當前網站的規模及其擴展性。1.3網站開發流程16*1.3.2收集、整理網站資源重要的文本重要的圖像庫文件Flash等多媒體元素1.3網站開發流程17*1.3.3設計網頁效果圖網頁效果圖設計是網站規劃中的一個非常重要的環節。網頁的設計包括網站的LOGO設計、網頁的布局設計、網頁的色彩搭配和網站的字體等。圖1-16Photoshop中設計的網頁效果圖1.3網站開發流程18*1.3.4編輯、制作網頁設計完網頁效果圖后，通常需要將網頁效果圖中要作為網頁圖像的部分圖像切片導出，然后按照規劃逐步制作網頁。編輯制作網頁是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜的順序來進行制作。圖1-17使用Dreamweaver編輯、制作網頁1.3網站開發流程19*1.3.5開發動態網站模塊頁面設計制作完成后，如果還需要動態功能，就需要開發動態功能模塊。網站中常用的功能模塊有新聞發布系統、搜索功能、留言板、產品展示管理系統、在線調查系統、在線購物、會員注冊管理系統、招聘系統、統計系統、留言系統、論壇及聊天室等。圖1-18在線購物網站1.3網站開發流程20*1.3.6申請域名和空間域名是企業或事業單位在因特網上進行相互聯絡的網絡地址。在網絡時代，域名是企業、機構進入因特網必不可少的身份認證。域名是由一串用“.”分隔的名稱組成的因特網上某一臺計算機或計算機組的名稱，用于在數據傳輸時標識計算機的電子方位（有時也指地理位置）。目前，域名已經成為互聯網的品牌、網上商標保護必備的產品之一。1.3網站開發流程21*1.3.7網站測試及維護（1）制訂網站改版計劃，及時更新網頁內容：站點信息的不斷更新，讓瀏覽者了解企業的發展動態和網上職務等，同時也會幫助企業建立良好的形象。（2）制訂相關網站維護規定：服務器及相關軟、硬件維護，數據庫維護。（3）網站發布前進行細致周密的測試，保證正常瀏覽和使用：服務器、程序和數據庫、網頁兼容性及其他。（4）測試通過后，為網站發布進行相關的公關、廣告活動。1.3網站開發流程22*1.3.8網站推廣及優化網站的推廣對網站的運營有重大的作用，例如，可以促進企業的網絡營銷等。常見的網站推廣方法包括搜索引擎推廣、電子郵件推廣、網站資源合作推廣、信息發布推廣、網絡廣告推廣和傳統廣告推廣。目前較為流行的推廣方式為SEO推廣（SearchEngineOptimization，譯為搜索引擎優化），主要目的是增加特定關鍵字的曝光率以增加網站的能見度，進而增加銷售的機會。1.4網站頁面策劃與設計23*1.4.1網頁的內容1．網站標志（LOGO）2．背景3．文字部分4．圖片5．頁眉和頁腳6．導航欄7．其他內容圖1-22網頁中的頁眉和頁腳1.4網站頁面策劃與設計24*1.4.2頁面布局策劃1．主次分明，中心突出2．大小搭配，相互呼應3．圖文并茂，相得益彰4．形式與內容的統一圖1-27不同風格的網站1.5視覺空間的構成25*1.5.1點點是構成網頁的最基本單位。在網頁設計中，經常需要我們主觀地加些點，如在新聞的標題后加個NEW，在每小行文字的前面加個方形或者圓形的點。點在頁面中起到活潑生動的作用，使用得當，甚至可以達到畫龍點睛的效果。一個網頁往往需要有數量不等，形狀各異的點來構成。點的形狀、方向、大小、位置、聚集、發散能夠給人帶來不同的心理感受。1.5視覺空間的構成26*1.5.2線圖1-28線在網頁中的應用1.5視覺空間的構成27*1.5.3面圖1-29面在網頁中的應用1.6網頁色彩搭配及精美網站賞析28*1.6.1色彩的基礎理論1．色彩的類別2．色彩的三要素3．色彩的混合4．色彩的心理效應5．色彩的搭配圖1-30明度變化、色相環和飽和度變化1.6網頁色彩搭配及精美網站賞析29*1.6.2精美網站賞析1．資訊類網站2．娛樂類網站3．生活類網站4．文化類網站5．機構類網站6．電子商務類網站7．企業網站圖1-31資訊類網站1.7