網(wǎng)頁設(shè)計與制作基礎(chǔ)

1、網(wǎng)頁設(shè)計與制作考核辦法: 期末考試：70% 筆試 機試 課堂紀律平時成績：30% 考勤(遲到、早退） 上機實驗（任務(wù)完成、違 紀） 課后作業(yè) 第一講 課 題：網(wǎng)頁設(shè)計概述 目的及要求：熟練掌握網(wǎng)頁的基本概念、網(wǎng)頁構(gòu)成的元素與分類、網(wǎng)站開發(fā)流程、了解HTML語言 教學重點：網(wǎng)頁的基本概念 教學難點： HTML語言中的標記及其屬性 教學課時：2課時 教學方法：提問與比較教學方式，激發(fā)學生興趣； 教學內(nèi)容與步驟：1.1認識網(wǎng)頁1.1.1網(wǎng)頁的概念網(wǎng)頁的概念網(wǎng)站：也稱為站點，是包括主頁在內(nèi)的一個或多個網(wǎng)頁的網(wǎng)站：也稱為站點，是包括主頁在內(nèi)的一個或多個網(wǎng)頁的集合。集合。根據(jù)內(nèi)容可分為：門戶網(wǎng)站、職能網(wǎng)站

2、、專業(yè)網(wǎng)站、個人根據(jù)內(nèi)容可分為：門戶網(wǎng)站、職能網(wǎng)站、專業(yè)網(wǎng)站、個人網(wǎng)站網(wǎng)站網(wǎng)頁：網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)網(wǎng)頁：網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng) 用的用的 平臺。平臺。 網(wǎng)頁的類型按位置分按表現(xiàn)形式分靜態(tài)網(wǎng)頁：以.htm、.html、.shtml、.xml等為后綴的 動態(tài)網(wǎng)頁：.asp、.jsp、.php、.perl、.cgi等形式為后綴 主頁內(nèi)頁1.2網(wǎng)頁設(shè)計與制作流程1.2.1網(wǎng)頁的系統(tǒng)分析1、 項目立項2、客戶需求說明書（網(wǎng)站的定位）1.2.2 網(wǎng)頁建設(shè)方案1、網(wǎng)頁總體設(shè)計2、網(wǎng)頁詳細設(shè)計網(wǎng)站建設(shè)流程圖網(wǎng)站建設(shè)流程圖網(wǎng)站的制作流程1、規(guī)劃階段（網(wǎng)站的策劃） 站點

3、策劃 、構(gòu)思草圖2、設(shè)計階段（頁面美工） 美工設(shè)計3、實施階段（網(wǎng)頁制作） 圖形制作、腳本編程、圖形頁面整合、測試發(fā)布等構(gòu)思草圖構(gòu)思草圖構(gòu)思草圖 所謂所謂CI（Corporate Identity，企業(yè)形象），是指通過強，企業(yè)形象），是指通過強化視覺效果的手段來加深用戶對企業(yè)形象的印象。在現(xiàn)實化視覺效果的手段來加深用戶對企業(yè)形象的印象。在現(xiàn)實生活中，生活中，CI策劃的例子比比皆是，例如，可口可樂公司擁策劃的例子比比皆是，例如，可口可樂公司擁有全球統(tǒng)一的標志、色彩和產(chǎn)品包裝，給人們的印象極為有全球統(tǒng)一的標志、色彩和產(chǎn)品包裝，給人們的印象極為深刻。深刻。 1設(shè)計網(wǎng)站的標志（設(shè)計網(wǎng)站的標志（Logo

4、） 首先設(shè)計者需要設(shè)計一個網(wǎng)站的標志（首先設(shè)計者需要設(shè)計一個網(wǎng)站的標志（Logo）。如同商）。如同商標一樣，標一樣，Logo是站點特色和內(nèi)涵的集中體現(xiàn)。是站點特色和內(nèi)涵的集中體現(xiàn)。 Logo可以是中文、英文字母、符號或圖案，也可以是動可以是中文、英文字母、符號或圖案，也可以是動物或人物等。例如，新浪網(wǎng)用字母物或人物等。例如，新浪網(wǎng)用字母sina加眼睛作為加眼睛作為Logo，體現(xiàn)網(wǎng)站的敏銳和動感的特色。體現(xiàn)網(wǎng)站的敏銳和動感的特色。Logo的設(shè)計創(chuàng)意一般來的設(shè)計創(chuàng)意一般來自網(wǎng)站的名稱和內(nèi)容。自網(wǎng)站的名稱和內(nèi)容。 2設(shè)計網(wǎng)站的標準色彩設(shè)計網(wǎng)站的標準色彩 網(wǎng)站給人的第一印象來自視覺的沖擊，確定網(wǎng)站的標

5、準色網(wǎng)站給人的第一印象來自視覺的沖擊，確定網(wǎng)站的標準色彩是相當重要的一步。不同的色彩搭配，將產(chǎn)生不同的效彩是相當重要的一步。不同的色彩搭配，將產(chǎn)生不同的效果，并可能影響到訪問者的情緒。果，并可能影響到訪問者的情緒。 “標準色彩標準色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。例是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。例如，如，IBM的深藍色，肯德基的紅色條紋，的深藍色，肯德基的紅色條紋，Windows的紅、的紅、藍、黃、綠色塊，都使瀏覽者覺得很貼切，很和諧。藍、黃、綠色塊，都使瀏覽者覺得很貼切，很和諧。 一般來說，一個網(wǎng)站的標準色彩不宜超過一般來說，一個網(wǎng)站的標準色彩不宜超過3種，太多則讓種，太多則讓

6、人眼花繚亂。標準色彩要用于網(wǎng)站的人眼花繚亂。標準色彩要用于網(wǎng)站的Logo、標題、主菜、標題、主菜單和主色塊，給人以整體統(tǒng)一的感覺。至于其他色彩也可單和主色塊，給人以整體統(tǒng)一的感覺。至于其他色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。以使用，只是作為點綴和襯托，絕不能喧賓奪主。 3設(shè)計網(wǎng)站的標準字體設(shè)計網(wǎng)站的標準字體 標準字體是指用于標準字體是指用于Logo、標題和主菜單的特有字體。一般、標題和主菜單的特有字體。一般網(wǎng)頁默認的字體是宋體。為了體現(xiàn)站點的特有風格，設(shè)計網(wǎng)頁默認的字體是宋體。為了體現(xiàn)站點的特有風格，設(shè)計者可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)者可以根據(jù)需要選擇一些特

7、別字體。例如，為了體現(xiàn)專業(yè)性可以使用粗仿宋體，為了體現(xiàn)設(shè)計精美可以用廣告體，性可以使用粗仿宋體，為了體現(xiàn)設(shè)計精美可以用廣告體，為了體現(xiàn)親切隨意可以用手寫體等。為了體現(xiàn)親切隨意可以用手寫體等。 4設(shè)計網(wǎng)站的宣傳標語設(shè)計網(wǎng)站的宣傳標語 網(wǎng)站的宣傳標語也可以說是網(wǎng)站的精神、網(wǎng)站的目標，最網(wǎng)站的宣傳標語也可以說是網(wǎng)站的精神、網(wǎng)站的目標，最好用一句話甚至一個詞來高度概括。它類似于實際生活中好用一句話甚至一個詞來高度概括。它類似于實際生活中的廣告語句，例如，雀巢的的廣告語句，例如，雀巢的“味道好極了味道好極了”，Intel的的“給你給你一顆奔騰的心一顆奔騰的心”，給人們留下的印象都極為深刻，給人們留下的印

8、象都極為深刻。1.3 網(wǎng)頁開發(fā)工具簡介1.3.1 FrontPage FrontPage，簡稱FP，是美國微軟公司推出的一款網(wǎng)頁設(shè)計、制作、發(fā)布、管理的軟件，Office組件的一部分，網(wǎng)頁制作入門級軟件。FrontPage方便簡單，會用Word就能做網(wǎng)頁。如果是初學者，或?qū)W(wǎng)頁制作要求不高，選擇FrontPage，用熟以后，也能做出很專業(yè)的網(wǎng)頁。 FrontPage于2006年前停止提供，被兩款專業(yè)的網(wǎng)頁設(shè)計工具所取代，Expression Web和Sharepoint Designer。第第1章章 網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述1.3 網(wǎng)頁開發(fā)工具簡介1.3.2 Dreamweaver Dream

9、weaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁設(shè)計軟件，它最初由美國見即所得網(wǎng)頁設(shè)計軟件，它最初由美國Macromedia公司開發(fā)，是第一套針對專業(yè)網(wǎng)頁設(shè)公司開發(fā)，是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，使用它可以計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，使用它可以輕松地制作出跨平臺、跨瀏覽器的網(wǎng)頁。輕松地制作出跨平臺、跨瀏覽器的網(wǎng)頁。 Dreamweaver與動畫制作軟件與動畫制作軟件Flash、網(wǎng)頁圖像設(shè)、網(wǎng)頁圖像設(shè)計軟件計軟件Fireworks，三者一起被，三者一起被Macromedia公司公司稱為稱為Dreamteam（夢之隊），由于（

10、夢之隊），由于Adobe在在2005年并購了年并購了Macromedia，所以此軟件現(xiàn)在為，所以此軟件現(xiàn)在為Adobe旗下產(chǎn)品。旗下產(chǎn)品。1.3 網(wǎng)頁開發(fā)工具簡介1.3.3 Fireworks Fireworks美國美國Macromedia開發(fā)的圖像軟件，開發(fā)的圖像軟件，它與它與Dreamweaver和和Flash共同構(gòu)成的開發(fā)套件可共同構(gòu)成的開發(fā)套件可以讓您輕松地創(chuàng)建并優(yōu)化圖像。利用可視化工具可以讓您輕松地創(chuàng)建并優(yōu)化圖像。利用可視化工具可制作出具有專業(yè)品質(zhì)的網(wǎng)頁圖像和動畫來。制作出具有專業(yè)品質(zhì)的網(wǎng)頁圖像和動畫來。 在在Macromedia2005年被年被Adobe并購以后，并購以后，Adob

11、e發(fā)布了發(fā)布了Fireworks CS，該軟件不僅具備編輯矢量圖，該軟件不僅具備編輯矢量圖形與位圖圖像的靈活性，還提供了一個預(yù)先構(gòu)建資形與位圖圖像的靈活性，還提供了一個預(yù)先構(gòu)建資源的公用庫，并可與源的公用庫，并可與Adobe Photoshop CS、Adobe Illustrator CS、Adobe Dreamweaver CS和和 Adobe Flash CS軟件集成。軟件集成。1.3 網(wǎng)頁開發(fā)工具簡介1.3.4 Photoshop Photoshop是美國是美國Adobe公司開發(fā)的圖形處理軟件，公司開發(fā)的圖形處理軟件，主要應(yīng)用于在圖像處理、廣告設(shè)計的一款平面設(shè)計主要應(yīng)用于在圖像處理、廣

12、告設(shè)計的一款平面設(shè)計軟件。最先它只是在軟件。最先它只是在Apple機（機（MAC）上使用，后）上使用，后來也開發(fā)出了來也開發(fā)出了windows的版本。的版本。 Photoshop不僅是一個非常實用的圖像編輯軟件，不僅是一個非常實用的圖像編輯軟件，它的的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視它的的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視頻、出版各方面都有涉及。網(wǎng)絡(luò)應(yīng)用的普及是促使頻、出版各方面都有涉及。網(wǎng)絡(luò)應(yīng)用的普及是促使更多人去學習更多人去學習Photoshop的一個重要原因。因為在的一個重要原因。因為在制作網(wǎng)頁時制作網(wǎng)頁時Photoshop是是必不可少的網(wǎng)頁圖像處理和界面軟件。1.3 網(wǎng)頁開發(fā)

13、工具簡介1.3.5 Flash Flash英文含義為英文含義為“閃光的閃光的”，它是風靡全球的計，它是風靡全球的計算機動畫設(shè)計軟件，也表示用該軟件制作的動畫作算機動畫設(shè)計軟件，也表示用該軟件制作的動畫作品。品。 Flash動畫是動畫是Web交互式矢量圖和動畫標準，被大交互式矢量圖和動畫標準，被大量應(yīng)用于互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫文件格式。使用向量應(yīng)用于互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫文件格式。使用向量運算量運算Vector Graphics的方式，產(chǎn)生出來的的方式，產(chǎn)生出來的影片占用存儲空間較小。影片占用存儲空間較小。 FLASH的前身叫做的前身叫做Future Splash，被，被Macromedia收購后改

14、名為收購后改名為FLASH 1.0，在被，在被Adobe收購之前的版本為收購之前的版本為Flash 8.0，其后更名為，其后更名為Adobe Flash，由，由Adobe公司繼續(xù)開發(fā)推出最新版公司繼續(xù)開發(fā)推出最新版Adobe Flash CS3。語言是網(wǎng)頁的基礎(chǔ)，可以通過瀏覽器的語言是網(wǎng)頁的基礎(chǔ)，可以通過瀏覽器的“查看查看” -源代碼源代碼看到該頁的看到該頁的代碼。大家不必看到語代碼。大家不必看到語言就感到害怕，言就感到害怕， 和和C語言不一樣，它只是一系語言不一樣，它只是一系列標記的組合。列標記的組合。 在實際應(yīng)用中，只需要掌握、記憶一些基本的、常在實際應(yīng)用中，只需要掌握、記憶一些基本的、常

15、用的用的標記即可。標記即可。 HTML語言利用標記（tag）來描述網(wǎng)頁的字體、大小、顏色及頁面布局的語言，使用任何的文本編輯器都可以對它進行編輯。把標記寫在記事本中，存盤時擴展名為.htm 或.html。保存類型為文本文檔。 在Internet explorer中打開文件，查看源文件-修改-保存-刷新。如：FrontPage，Dreamweaver。（ASP，PHP，JSP）動態(tài)的生成。 （主題部分，一般來說是不（主題部分，一般來說是不可見的）可見的） （正文部分，在瀏覽器中是（正文部分，在瀏覽器中是可見的）可見的） 構(gòu)成構(gòu)成HTML文檔的主體部分，其內(nèi)容是瀏覽器頁文檔的主體部分，其內(nèi)容是瀏覽

16、器頁面中顯示的主體內(nèi)容。面中顯示的主體內(nèi)容。 Web頁的所有內(nèi)容，文字、圖形、鏈接以頁的所有內(nèi)容，文字、圖形、鏈接以及其他頁面元素都包含在該標記內(nèi)。在此標志對及其他頁面元素都包含在該標記內(nèi)。在此標志對之間可包含之間可包含、等等眾多的標志，它們所定義的文本、圖像等等眾多的標志，它們所定義的文本、圖像等將會在瀏覽器的框內(nèi)顯示出來。兩個標志必須等將會在瀏覽器的框內(nèi)顯示出來。兩個標志必須一塊使用。一塊使用。 . 屬性屬性用途用途示例示例body 設(shè)置背景顏色。默認是白色。設(shè)置背景顏色。默認是白色。 紅色背景紅色背景body Background= 設(shè)置背景圖像。設(shè)置背景圖像。body Background=Cat059.jpgbody Background=Cat059.jpgbody 設(shè)置網(wǎng)頁中不包含超鏈接文設(shè)置網(wǎng)頁中不包含超鏈接文本的文本