第一講 網(wǎng)頁設(shè)計概述 | |||||||||||||||||||||||||||||||||
【教學(xué)內(nèi)容】
【教學(xué)目的】
【教學(xué)重,、難點】
【教學(xué)方式】采取講授,、討論和案例分析相結(jié)合的方式,。 一、 網(wǎng)頁設(shè)計相關(guān)概念1.web簡介WWW是World Wide Web (世界寬邊網(wǎng)絡(luò))的縮寫,,也可以簡稱為Web,,中文名字為“萬維網(wǎng)”。 20世紀(jì)40年代以來人們就夢想能擁有一個世界性的信息庫,。在這個數(shù)據(jù)庫中信息能被全球的人們存取,。隨著科學(xué)技術(shù)的迅猛發(fā)展,人們的這個夢想已經(jīng)變成了現(xiàn)實,。目前正在使用的最流行的系統(tǒng)叫"WWW"(World Wide Web)萬維網(wǎng),,她可以把全球很多資源互相連接,,從而達(dá)到快速訪問,信息共享的目的,。 全世界目前大概有過億的Web站,,每個Web 站都可以通過超鏈結(jié)(Hyper link)與其它Web 站連接,任何人都可以設(shè)計自己的個人主頁,,放上Web 站,,然后在你的個人主頁上面進(jìn)行鏈結(jié),與他人的網(wǎng)頁進(jìn)行連接,,或是連到其他的Web站點,;別人也一樣可以連到你的Home Page ,或是你的Web 站,,整個信息網(wǎng)就這樣編織了起來,,形成一個巨大的信息網(wǎng)絡(luò)。 典型的web站點有,,新聞信息網(wǎng)站,、娛樂網(wǎng)站、教育站點,、電子郵件站點,、服務(wù)站點、照片共享站點,、社區(qū),、博客與維基等等,Web的使用已遍及了全球,。從目前的情況來看,web仍具有巨大的發(fā)展?jié)摿?,未來其?yīng)用將涵蓋從辦公室共享信息到市場營銷,、服務(wù)等廣泛領(lǐng)域。另外,,web帶來的電子貿(mào)易正改變著現(xiàn)今商業(yè)活動的傳統(tǒng)模式,,其提供的方便而廣泛的互連必將對未來社會生活的各個方面帶來影響。 2.web服務(wù)器及客戶機Web服務(wù)器:存儲和管理供給全球各地用戶瀏覽網(wǎng)頁的服務(wù)器,,軟件支持如:運行在windows 2000 sever系統(tǒng)上的IIS(Internet Information System)Internet信息服務(wù)器,,運行在unix系統(tǒng)上的apache等;其中最常見的是IIS,,它是用于配置和管理WEB站點的軟件,,能響應(yīng)客戶端用戶的請求從而下載網(wǎng)頁到客戶端; 客戶端瀏覽器:通過在地址欄中輸入Web服務(wù)器地址從而訪問Web服務(wù)器的軟件,;目前主要是Internet Explorer(IE)和Netscape,; 3.URl,、常用協(xié)議、IP地址及域名URL:統(tǒng)一資源定位符 (Uniform Resource Locator, URL),,是因特網(wǎng)上可以訪問的文件的惟一的地址,。對于Intranet服務(wù)器或萬維網(wǎng)服務(wù)器上的目標(biāo)文件,可以使用“統(tǒng)一資源定位符 (URL)”地址來確定它的位置,。URL的一般格式為“scheme://host:port/path?query#fragment ”,。 HTTP協(xié)議:(Hypertext Transfer Protocol,超文本傳輸協(xié)議)是TCP/IP協(xié)議的一部分,,用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議,。它可以使瀏覽器更加高效,使網(wǎng)絡(luò)傳輸減少,。它不僅保證計算機正確快速地傳輸超文本文檔,,還確定傳輸文檔中的哪一部分,以及哪部分內(nèi)容首先顯示(如文本先于圖形)等,。 FTP:(File Transfers Protocol)文件傳輸協(xié)議,,在互聯(lián)網(wǎng)上上傳或下載文件的協(xié)議; IP地址:用于標(biāo)識互聯(lián)網(wǎng)上各類計算機和服務(wù)器的唯一地址,,其由32位二進(jìn)制組成,,分成四段,每段8位,,如:192.168.0.1,; 域名:是替代枯燥乏味的IP地址的一種分層次的表示方式;如:www.ahip.cn,;www.yahoo.com.cn ,; 網(wǎng)頁中使用HTTP協(xié)議和域名定義的資源地址(URL)典型事例:Http://www.sina.com.cn;使用IP地址定義資源地址(URL)的典型事例:http://61.157.243.4/,。 二,、 網(wǎng)頁、網(wǎng)頁設(shè)計,、網(wǎng)站和主頁1.什么是網(wǎng)頁我們學(xué)習(xí)的時靜態(tài)網(wǎng)頁設(shè)計,,那么我們不免有這樣的疑問,究竟什么是網(wǎng)頁,,網(wǎng)頁使用來干什么的,,他有什么作用?只有明白了網(wǎng)頁的概念,,我們才能進(jìn)行所謂的設(shè)計,。 先看下面幾個圖例: 圖1-1 四川信息職業(yè)技術(shù)學(xué)院主頁 圖1-2 騰訊網(wǎng)站主頁 圖1-3 聯(lián)想網(wǎng)站主頁 圖1-4 163免費郵件主頁 圖1-5 淘寶網(wǎng)主頁 圖1-6 搜狐網(wǎng)站主頁
看了這幾個網(wǎng)頁,我們可以總結(jié)出網(wǎng)頁就是包含了文字,、圖片,、動畫,、聲音等內(nèi)容的可以在網(wǎng)上傳輸?shù)慕缑妗K梢杂脕砉蚕硇畔?、宣傳自己,、服?wù)用戶等。比如:聯(lián)想的網(wǎng)頁上除了有對聯(lián)想機型等的介紹,,還包括了售后服務(wù)信息這個關(guān)鍵的模塊,;我們學(xué)院的網(wǎng)站上有我們學(xué)院的簡介、最新動態(tài),,為宣傳學(xué)校做出了突出的貢獻(xiàn),,同時也給廣大用戶提供了信息的共享,讓廣大用戶可以方便的了解到我們學(xué)院最近發(fā)生了哪些有意義的大事,,另外網(wǎng)頁上還有行政辦公系統(tǒng)和教務(wù)辦公系統(tǒng),,教師可以在網(wǎng)上辦公,學(xué)生可以通過教務(wù)系統(tǒng)選課,、查詢成績等,,有效的服務(wù)了廣大師生。 我們還了解到同樣是網(wǎng)頁,,給我們的視覺效果是不一樣的,,給我們提供的信息也是不盡相同的。所以說不通類型的網(wǎng)頁時不一樣的,,那么我們平常經(jīng)常到音樂網(wǎng)站上聽一些音樂,,比如久久音樂網(wǎng)、一聽音樂網(wǎng)等,,同樣是音樂,,給我們的感覺是否完全相同哪?答案是否定的,,這就是說,,相同性質(zhì)(類型)的網(wǎng)頁也是不一樣的,從而得出了一個結(jié)論,,網(wǎng)頁是豐富多彩的,。那么這么豐富多彩的網(wǎng)頁究竟如何設(shè)計的呢,?下面我們就來解決網(wǎng)頁設(shè)計的問題? 2.什么是網(wǎng)頁設(shè)計我們了解了“什么是網(wǎng)頁,,網(wǎng)頁是干什么的”這個問題后,我們來看一看什么是網(wǎng)頁設(shè)計,。 網(wǎng)頁設(shè)計是一種建立在新型媒體之上的新型設(shè)計,。它具有很強的視覺效果、互動性,、互操作性,、受眾面廣等其它媒體所不具有的特點,,它是區(qū)別于報刊、影視的一個新媒體,。它既擁有傳統(tǒng)媒體的優(yōu)點,,同時又使傳播變得更為直接、省力和有效,;為了更好的體現(xiàn)網(wǎng)頁這一新型設(shè)計的特點,,將它和傳統(tǒng)媒體進(jìn)行比較,了解它的優(yōu)勢所在,;一個成功的網(wǎng)頁設(shè)計,,首先在觀念上要確立活躍的思維方式,其次,,要有效地將圖形引入網(wǎng)頁設(shè)計之中,,增加人們?yōu)g覽網(wǎng)頁的興趣,在崇尚鮮明個性風(fēng)格的今天,,網(wǎng)頁設(shè)計應(yīng)增加個性化因素,。 網(wǎng)頁設(shè)計區(qū)別與網(wǎng)頁制作,是將策劃案中的內(nèi)容,、網(wǎng)站的主題模式,,以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來;而網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計師所設(shè)計出來的設(shè)計稿,,按照W3C規(guī)范用html語言將其制作成網(wǎng)頁格式,。這就相當(dāng)于一個干腦力活,一個是干體力活,,但是一個優(yōu)秀的網(wǎng)頁設(shè)計師對著兩到工序都是十分了解的,,因為他要知道自己的設(shè)計稿,是否會為網(wǎng)頁制作人員制作頁面帶來麻煩,。 在網(wǎng)站設(shè)計的流程中我們還會聽到說UI/UE的說法,,這是兩個較為重要的環(huán)節(jié),主要都是為瀏覽者著想的,。 UI(User Interface,用戶界面): UI的意思是用戶界面,,是英文User Interface的縮寫。既瀏覽者在瀏覽網(wǎng)頁時,,通過視覺所能觀察到的一切事物,,這些都是需要設(shè)計的部分,在互聯(lián)網(wǎng)行業(yè),,做界面設(shè)計的人被貶義的稱為“美工”,。 其實我們一開始接觸電腦時就應(yīng)該對UI有很深的認(rèn)識,從最早的DOS操作系統(tǒng)到Windows 1.0,再到Windows XP,。我們開機所看到的就叫用戶界面,,DOS操作系統(tǒng)黑底白字的文本界面,Windows XP的經(jīng)典藍(lán)色界面,,這些都是用戶界面的發(fā)展歷程,。從簡單到復(fù)雜,從庸俗到華麗,,也證明了用戶界面設(shè)計越發(fā)成熟,。 UE(User Experience,用戶體驗):UE的意思是用戶體驗,英文叫做User Experience,,縮寫為UE, 或者UX,。是指一個瀏覽者在訪問一個網(wǎng)站或者使用一個產(chǎn)品時的印象和感受,對網(wǎng)站的布局,、色彩,、功能、感覺是否滿意,,在第一次訪問離開后是否還想再回訪,,是否能發(fā)現(xiàn)明顯的Bug(既網(wǎng)站在瀏覽過程中出現(xiàn)的錯誤)。 網(wǎng)頁設(shè)計要注意一下幾個方面: 1)內(nèi)容及框架結(jié)構(gòu)(Frame Sets) 2)圖象區(qū)塊(Image Maps)與flash 3)特效等 3.超級鏈接,、網(wǎng)站和主頁超級鏈接:所謂的超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系,這個目標(biāo)可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應(yīng)用程序,。而在一個網(wǎng)頁中用來超鏈接的對象,可以是一段文本或者是一個圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上,并且根據(jù)目標(biāo)的類型來打開或運行,。 什么叫超級鏈接呢,?舉個簡單的例子;如果你在閱讀某篇文章時,,遇到一個不明白的詞語,,只要在這個詞語上單擊一下,即可出現(xiàn)它的詳細(xì)說明,,看完后點一下返回按鈕,,又可繼續(xù)閱讀,實現(xiàn)這種功能的方法就叫做超級鏈接,。這樣的鏈接可以是文字,,其他文檔,聲音,,圖片,,數(shù)字電影等。 網(wǎng)站:網(wǎng)站(Website)是指在因特網(wǎng)上,,根據(jù)一定的規(guī)則,,使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合,。簡單地說,,網(wǎng)站是一種通訊工具,,就像布告欄一樣,人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊,,或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù),。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站,獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù),。 主頁:網(wǎng)站中的眾多網(wǎng)頁通過超級鏈接的方式集合起來的,。當(dāng)我們打開網(wǎng)站時的映現(xiàn)在我們眼前的第一個網(wǎng)頁通常被叫做主頁,命名為“index”索引(目錄)的意思,,在他上面通過超級鏈接可以打開網(wǎng)站上的其他頁面,。 三、網(wǎng)頁設(shè)計常用工具
Photoshop是由Adobe公司開發(fā)的圖形處理軟件,,它是目前公認(rèn)的PC機上最好的通用平面美術(shù)設(shè)計軟件,,它功能完善、性能穩(wěn)定,、使用方便,,所以在幾乎所有的廣告、出版,、軟件公司,,Photoshop都是首選的平面制作工具。 Fireworks是由Macromedia公司開發(fā)的圖形處理工具,,是第一套專門為制作網(wǎng)頁圖形而設(shè)計的軟件,,同時也是專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案。 Flash是美國Macromedia公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件,它是一種交互式動畫設(shè)計工具,,用它可以將音樂,、聲效、動畫以及富有新意的界面融合在一起,,以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果,。Flash廣泛應(yīng)用于網(wǎng)頁動畫制作,、教學(xué)動畫演示,、網(wǎng)上購物、在線游戲等的制作中,。 FrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁制作工具。FrontPage使網(wǎng)頁制作者能夠更加方便,、快捷地創(chuàng)建和發(fā)布網(wǎng)頁,,具有直觀的網(wǎng)頁制作和管理方法,簡化了大量工作,。 FrontPage界面與Word,、PowerPoint等軟件的界面極為相似,為使用者帶來了極大的方便,。 Swish軟件可以對指定的文字進(jìn)行各種特效處理,,控制文字的移動和位置,最后可以輸出swf格式的文件,,并能導(dǎo)入到Flash動畫中加以編程,。雖然目前Swish只提供了一些文字效果的制作,但據(jù)開發(fā)該軟件的公司說以后將有圖片,、聲音,、按鈕和矢量圖支持。 Dreamweaver是Macromedia公司推出的一款大眾化的網(wǎng)頁制作軟件,,它具有可視化編輯界面,,用戶不用編寫復(fù)雜的HTML源泉代碼就可以生成 跨平臺、跨瀏覽器的網(wǎng)頁,,不僅適合于專業(yè)網(wǎng)頁編輯人員的需要,,同時也容易被業(yè)余網(wǎng)頁制作人員所掌握。市面上有許多種網(wǎng)頁編輯軟件,,有的重視效率,,有的強調(diào)版面設(shè)計,而這些功能在Dreamweaver中都可以很方便地實現(xiàn),。另外,,Dreamweaver的網(wǎng)頁動態(tài)效果與網(wǎng)頁排版功能都比一般的軟件好用,即使是初學(xué)者也能制作出相當(dāng)于專業(yè)水準(zhǔn)的網(wǎng)頁,。所以,,Dreamweaver是網(wǎng)頁設(shè)計者的首選工具。 Dreamweaver支持動態(tài)HTML技術(shù),,并采用了Roundtrip HTML技術(shù),,從而奠定了在網(wǎng)頁高級設(shè)計功能方面的領(lǐng)先地位。在進(jìn)行網(wǎng)頁設(shè)計過程中,,動態(tài) HTML技術(shù)能夠讓用戶輕松設(shè)計復(fù)雜的交互式網(wǎng)頁,,產(chǎn)生動態(tài)效果。而Rpundtrip HTML技術(shù)能夠讓用戶輕松編輯械,,不會產(chǎn)生冗余代碼,,使網(wǎng)頁渲染速度加快,。因此,Dreamweaver是一種可以滿足多層次需求,、功能強大的可視化專業(yè)級網(wǎng)頁設(shè)計與制作工具,。 四、網(wǎng)站建設(shè)的基本步驟及應(yīng)注意的問題網(wǎng)站的制作與建立并不復(fù)雜,,但要制作一個優(yōu)秀的網(wǎng)站并非易事。一個優(yōu)秀的網(wǎng)站是依靠完美的規(guī)劃,、出色的設(shè)計理念,、技術(shù)與軟件等多方面合作完成的。網(wǎng)站的制作主要包括網(wǎng)頁制作,,網(wǎng)站的建立過程還包括事前企劃,,事后維護(hù)更新等工作,即要有一個合理的網(wǎng)站制作流程,。 一個網(wǎng)站的制作流程和一個電視節(jié)目的制作過程很相像,,包括策劃、制作,、廣告宣傳,,以及每天更新等。如果要制作一個個人網(wǎng)站就簡單多了,。 網(wǎng)站制作的基本流程與順序是十分重要的,。因為網(wǎng)站的制作流程可以明確工作目標(biāo)和方向,提高工作效率,,使網(wǎng)站結(jié)構(gòu)清晰,。 1.網(wǎng)頁設(shè)計基本步驟
2.制作網(wǎng)頁時要注意的問題
五、網(wǎng)站建設(shè)的評判標(biāo)準(zhǔn)根據(jù)我們課程建設(shè)團(tuán)隊老師的多年的項目經(jīng)驗,,并容納一些企業(yè)建站思想,,我們總結(jié)了如下評判標(biāo)準(zhǔn),在網(wǎng)頁設(shè)計時可做參考:
【課后小結(jié)】通過對web相關(guān)概念的講解,,使學(xué)生了解web服務(wù)器及客戶機,、URl、常用協(xié)議,、IP地址及域名等基礎(chǔ)知識,。通過典型網(wǎng)站案例分析和討論使同學(xué)們明白了網(wǎng)頁、網(wǎng)站,、主頁的區(qū)別,,了解了網(wǎng)頁設(shè)計及超級鏈接的概念。本節(jié)課還簡單地介紹了網(wǎng)頁設(shè)計常用工具,、網(wǎng)站建設(shè)的基本步驟及應(yīng)注意的問題等知識,。 【練習(xí)題】
|
|