網頁設計與網站建設基礎入門

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