網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)基礎(chǔ)入門

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