靜態網頁設計網站製作：第一講 網頁設計概述

第一講 網頁設計概述【教學內容】本節課主要講解了web相關概念，包括：web伺服器及客戶機、URl、常用協議、IP地址及域名等基礎知識。 重點講解了什麼是網頁、什麼是網頁設計以及超級鏈接、網站和主頁的一些概念。 簡單介紹了網頁設計常用工具、網站建設的基本步驟及應注意的問題等知識。 網站建設評判標準【教學目的】了解web伺服器及客戶機、URl、常用協議、IP地址及域名等相關概念 了解什麼是網頁、什麼是網頁設計以及超級鏈接、網站和主頁的一些概念 了解網頁設計常用工具 掌握網站建設的基本步驟 了解網站建設時應注意的問題 了解網站建設的評判標準【教學重、難點】重點：網頁設計中的若干術語 （web伺服器及客戶機、URl、常用協議、IP地址及域名、網頁、網站、主頁、超級鏈接）；網站建設的基本步驟。 難點：網站建設的基本步驟。【教學方式】採取講授、討論和案例分析相結合的方式。一、 網頁設計相關概念1.web簡介WWW是World Wide Web （世界寬邊網路）的縮寫，也可以簡稱為Web，中文名字為「萬維網」。20世紀40年代以來人們就夢想能擁有一個世界性的信息庫。在這個資料庫中信息能被全球的人們存取。隨著科學技術的迅猛發展，人們的這個夢想已經變成了現實。目前正在使用的最流行的系統叫"WWW"(World Wide Web)萬維網，她可以把全球很多資源互相連接，從而達到快速訪問，信息共享的目的。全世界目前大概有過億的Web站，每個Web 站都可以通過超鏈結(Hyper link)與其它Web 站連接，任何人都可以設計自己的個人主頁，放上Web 站，然後在你的個人主頁上面進行鏈結，與他人的網頁進行連接，或是連到其他的Web站點；別人也一樣可以連到你的Home Page ，或是你的Web 站，整個信息網就這樣編織了起來，形成一個巨大的信息網路。典型的web站點有，新聞信息網站、娛樂網站、教育站點、電子郵件站點、服務站點、照片共享站點、社區、博客與維基等等，Web的使用已遍及了全球。從目前的情況來看，web仍具有巨大的發展潛力，未來其應用將涵蓋從辦公室共享信息到市場營銷、服務等廣泛領域。另外，web帶來的電子貿易正改變著現今商業活動的傳統模式，其提供的方便而廣泛的互連必將對未來社會生活的各個方面帶來影響。2.web伺服器及客戶機Web伺服器：存儲和管理供給全球各地用戶瀏覽網頁的伺服器，軟體支持如：運行在windows 2000 sever系統上的IIS（Internet Information System）Internet信息伺服器，運行在unix系統上的apache等；其中最常見的是IIS，它是用於配置和管理WEB站點的軟體，能響應客戶端用戶的請求從而下載網頁到客戶端；客戶端瀏覽器：通過在地址欄中輸入Web伺服器地址從而訪問Web伺服器的軟體；目前主要是Internet Explorer（IE）和Netscape；3.URl、常用協議、IP地址及域名URL：統一資源定位符 (Uniform Resource Locator, URL)，是網際網路上可以訪問的文件的惟一的地址。對於Intranet伺服器或萬維網伺服器上的目標文件，可以使用「統一資源定位符 (URL)」地址來確定它的位置。URL的一般格式為「scheme://host:port/path?query#fragment 」。HTTP協議：（Hypertext Transfer Protocol，超文本傳輸協議）是TCP/IP協議的一部分，用於從WWW伺服器傳輸超文本到本地瀏覽器的傳送協議。它可以使瀏覽器更加高效，使網路傳輸減少。它不僅保證計算機正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪部分內容首先顯示(如文本先於圖形)等。FTP：（File Transfers Protocol）文件傳輸協議，在互聯網上上傳或下載文件的協議；IP地址：用於標識互聯網上各類計算機和伺服器的唯一地址，其由32位二進位組成，分成四段，每段8位，如：192.168.0.1；域名：是替代枯燥乏味的IP地址的一種分層次的表示方式；如：www.ahip.cn；www.yahoo.com.cn ；網頁中使用HTTP協議和域名定義的資源地址（URL）典型事例：Http://www.sina.com.cn；使用IP地址定義資源地址（URL）的典型事例：http://61.157.243.4/。二、 網頁、網頁設計、網站和主頁1.什麼是網頁我們學習的時靜態網頁設計，那麼我們不免有這樣的疑問，究竟什麼是網頁，網頁使用來幹什麼的，他有什麼作用？只有明白了網頁的概念，我們才能進行所謂的設計。先看下面幾個圖例：

圖1-1 四川信息職業技術學院主頁

圖1-2 騰訊網站主頁

圖1-3 聯想網站主頁

圖1-4 163免費郵件主頁

圖1-5 淘寶網主頁

圖1-6 搜狐網站主頁看了這幾個網頁，我們可以總結出網頁就是包含了文字、圖片、動畫、聲音等內容的可以在網上傳輸的界面。他可以用來共享信息、宣傳自己、服務用戶等。比如：聯想的網頁上除了有對聯想機型等的介紹，還包括了售後服務信息這個關鍵的模塊；我們學院的網站上有我們學院的簡介、最新動態，為宣傳學校做出了突出的貢獻，同時也給廣大用戶提供了信息的共享，讓廣大用戶可以方便的了解到我們學院最近發生了哪些有意義的大事，另外網頁上還有行政辦公系統和教務辦公系統，教師可以在網上辦公，學生可以通過教務系統選課、查詢成績等，有效的服務了廣大師生。我們還了解到同樣是網頁，給我們的視覺效果是不一樣的，給我們提供的信息也是不盡相同的。所以說不通類型的網頁時不一樣的，那麼我們平常經常到音樂網站上聽一些音樂，比如久久音樂網、一聽音樂網等，同樣是音樂，給我們的感覺是否完全相同哪？答案是否定的，這就是說，相同性質（類型）的網頁也是不一樣的，從而得出了一個結論，網頁是豐富多彩的。那麼這麼豐富多彩的網頁究竟如何設計的呢？下面我們就來解決網頁設計的問題?2.什麼是網頁設計我們了解了「什麼是網頁，網頁是幹什麼的」這個問題後，我們來看一看什麼是網頁設計。網頁設計是一種建立在新型媒體之上的新型設計。它具有很強的視覺效果、互動性、互操作性、受眾面廣等其它媒體所不具有的特點，它是區別於報刊、影視的一個新媒體。它既擁有傳統媒體的優點，同時又使傳播變得更為直接、省力和有效；為了更好的體現網頁這一新型設計的特點，將它和傳統媒體進行比較，了解它的優勢所在；一個成功的網頁設計，首先在觀念上要確立活躍的思維方式，其次，要有效地將圖形引入網頁設計之中，增加人們瀏覽網頁的興趣，在崇尚鮮明個性風格的今天，網頁設計應增加個性化因素。網頁設計區別與網頁製作，是將策劃案中的內容、網站的主題模式，以及結合自己的認識通過藝術的手法表現出來；而網頁製作通常就是將網頁設計師所設計出來的設計稿，按照W3C規範用html語言將其製作成網頁格式。這就相當於一個干腦力活，一個是干體力活，但是一個優秀的網頁設計師對著兩到工序都是十分了解的，因為他要知道自己的設計稿，是否會為網頁製作人員製作頁面帶來麻煩。在網站設計的流程中我們還會聽到說UI/UE的說法，這是兩個較為重要的環節，主要都是為瀏覽者著想的。UI(User Interface,用戶界面): UI的意思是用戶界面，是英文User Interface的縮寫。既瀏覽者在瀏覽網頁時，通過視覺所能觀察到的一切事物，這些都是需要設計的部分，在互聯網行業，做界面設計的人被貶義的稱為「美工」。其實我們一開始接觸電腦時就應該對UI有很深的認識，從最早的DOS操作系統到Windows 1.0，再到Windows XP。我們開機所看到的就叫用戶界面，DOS操作系統黑底白字的文本界面，Windows XP的經典藍色界面，這些都是用戶界面的發展歷程。從簡單到複雜，從庸俗到華麗，也證明了用戶界面設計越發成熟。UE(User Experience,用戶體驗):UE的意思是用戶體驗，英文叫做User Experience，縮寫為UE, 或者UX。是指一個瀏覽者在訪問一個網站或者使用一個產品時的印象和感受，對網站的布局、色彩、功能、感覺是否滿意，在第一次訪問離開後是否還想再回訪，是否能發現明顯的Bug（既網站在瀏覽過程中出現的錯誤）。網頁設計要注意一下幾個方面：1）內容及框架結構(Frame Sets)2）圖象區塊(Image Maps)與flash3）特效等3.超級鏈接、網站和主頁超級鏈接：所謂的超鏈接是指從一個網頁指向一個目標的連接關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。而在一個網頁中用來超鏈接的對象,可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片後,鏈接目標將顯示在瀏覽器上,並且根據目標的類型來打開或運行。什麼叫超級鏈接呢？舉個簡單的例子；如果你在閱讀某篇文章時，遇到一個不明白的詞語，只要在這個詞語上單擊一下，即可出現它的詳細說明，看完後點一下返回按鈕，又可繼續閱讀，實現這種功能的方法就叫做超級鏈接。這樣的鏈接可以是文字，其他文檔，聲音，圖片，數字電影等。網站：網站(Website)是指在網際網路上，根據一定的規則，使用HTML等工具製作的用於展示特定內容的相關網頁的集合。簡單地說，網站是一種通訊工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的資訊，或者利用網站來提供相關的網路服務。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的資訊或者享受網路服務。主頁：網站中的眾多網頁通過超級鏈接的方式集合起來的。當我們打開網站時的映現在我們眼前的第一個網頁通常被叫做主頁，命名為「index」索引（目錄）的意思，在他上面通過超級鏈接可以打開網站上的其他頁面。三、網頁設計常用工具網頁美化工具（圖像）：photoshop和fireWork等網頁美化工具（動畫）：flash和swish等網頁排版工具：DreamWeaver和FrontPage等Photoshop是由Adobe公司開發的圖形處理軟體，它是目前公認的PC機上最好的通用平面美術設計軟體，它功能完善、性能穩定、使用方便，所以在幾乎所有的廣告、出版、軟體公司，Photoshop都是首選的平面製作工具。Fireworks是由Macromedia公司開發的圖形處理工具，是第一套專門為製作網頁圖形而設計的軟體，同時也是專業的網頁圖形設計及製作的解決方案。作為一款為網路設計而開發的圖像處理軟體，Fireworks還能夠自動切割圖像、生成游標動態感應的JavaScript程序等等，而且Fireworks具有強大的動畫功能和一個相當完美的 網路圖像生成器。用戶可以從http://www. macromedia.com／站點下載該軟體。Flash是美國Macromedia公司開發的矢量圖形編輯和動畫創作的專業軟體，它是一種互動式動畫設計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以製作出高品質的網頁動態效果。Flash廣泛應用於網頁動畫製作、教學動畫演示、網上購物、在線遊戲等的製作中。FrontPage是由Microsoft公司推出的新一代Web網頁製作工具。FrontPage使網頁製作者能夠更加方便、快捷地創建和發布網頁，具有直觀的網頁製作和管理方法，簡化了大量工作。 FrontPage界面與Word、PowerPoint等軟體的界面極為相似，為使用者帶來了極大的方便。Swish軟體可以對指定的文字進行各種特效處理，控制文字的移動和位置，最後可以輸出swf格式的文件，並能導入到Ｆlash動畫中加以編程。雖然目前Swish只提供了一些文字效果的製作，但據開發該軟體的公司說以後將有圖片、聲音、按鈕和矢量圖支持。Dreamweaver是Macromedia公司推出的一款大眾化的網頁製作軟體，它具有可視化編輯界面，用戶不用編寫複雜的HTML源泉代碼就可以生成　跨平台、跨瀏覽器的網頁，不僅適合於專業網頁編輯人員的需要，同時也容易被業餘網頁製作人員所掌握。市面上有許多種網頁編輯軟體，有的重視效率，有的強調版面設計，而這些功能在Dreamweaver中都可以很方便地實現。另外，Dreamweaver的網頁動態效果與網頁排版功能都比一般的軟體好用，即使是初學者也能製作出相當於專業水準的網頁。所以，Dreamweaver是網頁設計者的首選工具。Dreamweaver支持動態HTML技術，並採用了Roundtrip HTML技術，從而奠定了在網頁高級設計功能方面的領先地位。在進行網頁設計過程中，動態　HTML技術能夠讓用戶輕鬆設計複雜的互動式網頁，產生動態效果。而Rpundtrip HTML技術能夠讓用戶輕鬆編輯械，不會產生冗餘代碼，使網頁渲染速度加快。因此，Dreamweaver是一種可以滿足多層次需求、功能強大的可視化專業級網頁設計與製作工具。四、網站建設的基本步驟及應注意的問題網站的製作與建立並不複雜，但要製作一個優秀的網站並非易事。一個優秀的網站是依靠完美的規劃、出色的設計理念、技術與軟體等多方面合作完成的。網站的製作主要包括網頁製作，網站的建立過程還包括事前企劃，事後維護更新等工作，即要有一個合理的網站製作流程。一個網站的製作流程和一個電視節目的製作過程很相像，包括策劃、製作、廣告宣傳，以及每天更新等。如果要製作一個個人網站就簡單多了。網站製作的基本流程與順序是十分重要的。因為網站的製作流程可以明確工作目標和方向，提高工作效率，使網站結構清晰。1.網頁設計基本步驟A 進行用戶調研，確定網頁的內容（主體）：確定網站的名稱什麼，也就是說確定我們要做的究竟是一個什麼網站；確定在這個名稱主題下，用戶要表現的主要內容是什麼，即用戶的意圖，用戶想從那個側面來表現他的主題。B 設計網頁欄目及組織結構：網站結構一般包括三種，即層狀結構、線性結構、Web結構（網狀結構）。層狀結構：層狀結構類似於目錄系統的樹型結構，由網站文件的主頁開始，依次劃分為一級標題、二級標題等等，逐級細化，直至提供給瀏覽者具體信息；線性結構：線性結構類似於數據結構中的線性表，用於組織本身的線性順序形式存在的信息，可以引導瀏覽者按部就班地瀏覽整個網站文件。這種結構一般都用在意義是平行的頁面上。通常情況下，網站文件的結構是層狀結構和線性結構相結合的。這樣可以充分利用兩種結構各自的特點，使網站文件既具有條理性、規範性，又可同時滿足設計者和瀏覽者的要求；Web結構：Web結構類似於Internet的組成結構，各網頁之間形成網狀連接，允許用戶隨意瀏覽。C 準備素材：收集與整理相關資料D 界面設計：根據網站的訪問者對象、要提供的信息以及製作目標得出一個最適合的網頁架構E 網頁排版（頁面實現）:根據所設計的界面進行網頁排版。F 網頁測試與發布：網頁測試包括功能性測試和完整性測試兩個方面。所謂功能性測試就是要保證網頁的可用性，達到最初的內容組織設計目標，實現所規定的功能，讀者可方便快速地尋找到所需的內容。完整性測試就是保證頁面內容顯示正確，鏈接準確，無差錯無遺漏。如果在測試過程中發現了錯誤，就要及時修改，在準確無誤後, 方可正式在Internet上發布。網頁設計好，必須把它發布到互連網上，否則網站形象仍然不能展現出去。發布的伺服器可以是遠程，也可以是本地。G 網頁推廣與維護：網站建成之後，隨後的工作就是進行推廣。網站如果不進行推廣，就容易成為信息的孤島，長期沒有多少人訪問，漸漸地失去了建站的意義。2.製作網頁時要注意的問題A 網頁的標題要簡潔，明確。B 對重點內容要強調顯示。C 網頁中插入的圖片要盡量的小。D 圖形要附加文字說明，以便關閉圖像時查看。E 網頁中引用的資料及商標（或圖標），不能侵犯版權。五、網站建設的評判標準根據我們課程建設團隊老師的多年的項目經驗，並容納一些企業建站思想，我們總結了如下評判標準，在網頁設計時可做參考：四川信息職業技術學院網站建設評判標準（申報網）序號觀測點分值1需求分析充分、欄目設置合理、功能完善152主題鮮明，能體現網站功能153頁面布局（排版）美觀大方，有個性154色彩搭配合理，能表現主題，特色鮮明155多媒體元素運用得當，適合網路傳輸，運行速度快。106操作方便、自然清新，適應不同人群107方便後期開發與維護88內容健康、正確、合法，鏈接準確12合計100【課後小結】通過對web相關概念的講解，使學生了解web伺服器及客戶機、URl、常用協議、IP地址及域名等基礎知識。通過典型網站案例分析和討論使同學們明白了網頁、網站、主頁的區別，了解了網頁設計及超級鏈接的概念。本節課還簡單地介紹了網頁設計常用工具、網站建設的基本步驟及應注意的問題等知識。【練習題】填空題：1.Internet是在__________經過不斷發展變化而形成的。2.ＷＷＷ是__________的縮寫，也可以簡稱為Ｗeb，中文名字為「萬維網」。3.為了區別各個站點，必須為每個站點分配一個唯一的地址，這個地址即稱__________4.ｃ類地址的表示範圍為__________，默認網路掩碼為__________。選擇題：1．下列不屬於Macromedia公司產品的是（）。A．DreamweaverB．FirewoksC．FlashD．Frontpage問答題：1.常見的網頁元素有哪些？2.上網瀏覽一些著名網站（如搜狐、網易、新浪、騰訊(QQ)等）的主頁，並這些網頁和我們學院的主頁在結構和版面等方面有什麼區別？3.請瀏覽我院主頁，至少說出兩種網頁中包含的主要網頁元素。4.常見的網頁製作工具有哪些？5.列舉你所了解的美化網頁工具。6.總結建立網站的基本流程。
推薦閱讀：