word文檔可自由復制編輯《網頁頁面設計》教案教學對象：教學總學時：主講教師：主講教師單位：時間：年月日概要本門課程的教學目標和要求：通過教學訓練，使學生的設計能力、軟件應用能力及實際操作能力得到深入的提高。通過理論講解與實例分析，學生可熟悉網頁頁面設計與制作的相關知識；通過應用訓練，學生可掌握相關軟件，并逐步培養學生的創造能力；通過綜合訓練，學生可以將理論知識應用于實踐，并逐步提高學生的設計能力。學生在完成本課程學習后，應達到如下要求：（1）正確理解網頁頁面的含義。（2）掌握網頁頁面設計的基本知識和基本規律。（3）熟悉網頁頁面設計的方法。（4）能夠將理論與實踐相結合，獨立完成網頁頁面設計與制作。教學要點：不同類型的網頁頁面設計。教學重點及難點：綜合運用平面制圖軟件進行網頁頁面的設計與制作。教學方法：先課堂講授,掌握一定基礎知識，然后進行實例教學，啟發創作，在課堂形成教學互動；最后創作練習，培養學以致用，實戰能力。教學總時數：56學時教學參考書：《網頁頁面設計與制作》目錄課題一網頁概述課題二網頁設計視聽元素課題三交互式視覺元素課題四網頁版面設計課題五網頁配色課題六PS網頁切圖教案首頁班級授課時間年月日課次時數課題課題一網頁概述教學目的通過本堂課的學習，使學生了解什么是網頁頁面設計，網頁頁面的規格、網頁頁面版面以及相關設計軟件等。授課提要１、網站與網頁２、網頁設計相關軟件３、網站的類型４、網頁的類型和規格5、網頁頁面劃分重點１、網頁的類型和規格２、網頁頁面劃分難點１、網頁的類型和規格２、網頁頁面劃分教具案例、教材、多媒體作業通過對網頁頁面設計的學習完成網頁主頁設計。后記課題一網頁概述具體授課內容：網站設計是一個系統的軟件應用工程，工作內容千頭萬緒，涉及到項目管理、頁面設計，程序設計，網站測試，資料收集、文檔編輯等方面工作，它需要不同的人員分工合作才能完成。只有建立和實施規范的網站設計流程，有效整合各方面的工作內容，才能高效有序地開展網站設計工作，最終順利地實現網站開發的目標。通過本堂課的學習，使學生了解什么是網頁頁面設計，網頁頁面的規格、網頁頁面版面以及相關設計軟件等。概念分解：一、網站與網頁1、網站：為了更好的推廣企業、機構、活動等整體形象，利用互聯網技術（數字技術）實現的超鏈接網絡信息查詢的多個頁面。2、網頁：網站中，用來提供相關信息的單一頁面。3、網站與網頁的區別：瀏覽器窗口中顯示的單一頁面，是網頁。而多個可以實現超鏈接的頁面統稱為網站。知識要點：二、網頁設計相關軟件1、網頁編輯軟件Dreamweaver是MacromediaStudio的一部分，MacromediaStudio是包括Flash、Fireworks、Contribute和FlashPaper的集成套件。2、圖形圖像軟件（1）AdobePhotoshop和ImageReadyPhotoshop是數字專業圖像編輯領域內使用最普及的軟件，它提供高效的圖像編輯、處理以及文件處理功能，與其他軟件的兼容性強，支持各種主流圖像格式。（2）FireworksFireworks是專業的網頁圖片編輯工具,它與Dreamweaver軟件的融合度很高，可以制作專門針對網頁優化的各種元素或效果，如導航條、切片、GIF動畫等。（3）CorelDRAWCorelDRAW也是一款專業的矢量繪圖軟件，功能豐富、接口開放性好，自帶許多工具，可以將位圖圖像轉換為矢量圖形，其最新的版本在圖片編輯方面增加了許多新的特性、新的學習工具，在插畫和頁面布局方面也進行了加強。（4）AdobeIllustratorAdobeIllustrator是一個矢量繪圖軟件，在MicrosoftWindows平臺和AppleMacintosh平臺上都能良好地運行。通過它我們可以創建復雜的藝術作品，技術圖解，用于打印的圖形和頁面設計圖樣，多媒體以及Web。Illustrator有強大的圖形處理功能，提供了廣泛的強大繪圖和著色工具，支持所有主要的圖形圖像格式。3、網頁動畫軟件（1）FLASHFLASH是一款功能強大的動畫制作軟件,利用它，我們能制作出具有一流動畫效果的FLASH影片。（2）KoolMovesFlashEditorKoolMoves

是一個網站動畫制作軟件，它能夠制作

Flash電影以及其他與動畫相關的素材。該軟件還能夠制作動畫

GIF、制作文字特效、導入矢量剪貼畫、附加

WAV

音頻文件，為文字按鈕和幀增加動作等。（3）GIFMovieGearGIFMovieGear是一款GIF動畫制作軟件，幾乎所有制作GIF動畫所需的編輯功能它都有，無須再用其他的圖形軟件輔助。它可以處理背景透明化，而且操作簡便，通過最佳化處理壓縮圖片的容量。其次，它除了可以把做好的圖片存成GIF的動畫圖外，還可支持PSD、JPEG、AVI、BMP、GIF與AVI格式輸出。三、網站的類型1、按照行業特點劃分網站類型經濟類網站（服飾類、食品類、生活用品類等）娛樂類網站醫藥類網站教育類網站2、按照網站規模劃分網站類型門戶類網站企業類網站個人網站四、網頁的類型和規格1、首頁設計（1）什么是首頁？首頁就是網站中第一個頁面，通常用英文indext來表示，網站中除了首頁之外的其他頁面都稱之為子頁面或分頁面。（2）首頁的種類首頁分為兩種，形象頁及傳統型首頁。有的企業會為自己的網站制定形象頁。2、欄目頁設計當網站首頁以形象面表現，企業欄目便缺失了，此時欄目頁將很好的起到補充作用。3、內容頁用來根據欄目項逐一進行內容介紹的頁面。4、頁面形式（1）一屏頁面：介于兩者之間的尺寸。都是一屏界面。（2）多屏頁面：多于一屏的界面，叫做多屏界面。5、網頁的規格（1）640*480實際尺寸620*311（2）800*600實際尺寸780*428（760~788）（3）1024*768實際尺寸1007*600（788~1007）主頁主頁欄目頁內容網頁五、網頁頁面劃分1、頁眉（頁頭）頁頭就是頁眉，作用是定義頁面的主題，其中包括Logo、網站標題、旗幟廣告、還有導航欄。這些都是頁面的重要組成部分。2、內容頁用于整個網站信息展示、內容介紹。3、頁腳（頁尾）頁腳和頁頭一樣有很多要素：副導航欄、制作者或公司的信息、版權說明等。實訓能力：課題作業實踐作業名稱：《網頁形象頁面》設計實踐內容1、企業形象的展示2、網頁圖片的選用與設計3、說明文案的編排考慮4、構成要素的考慮實踐目標熟悉掌握網頁設計中的視聽元素，獨立完成網頁形象頁面設計。課題要求1、網頁主頁規格1024*768。2、色彩模式RGB分辨率72像素。3、保存——學號姓名.PSD文件。教案首頁班級授課時間年月日課次時數課題課題二網頁設計的視聽元素教學目的通過本堂課的學習，使學生了解網頁設計的視聽元素，掌握不同形式的網頁元素特點。授課提要１、網頁文字２、網頁圖形圖形3、網頁動畫4、網頁音頻與視頻5、網頁交互式元素重點１、網頁文字２、網頁交互式元素難點１、網頁交互式元素教具案例、教材、多媒體作業通過對網頁頁面設計的學習完成網頁主頁設計。后記課題二網頁設計的視聽元素具體授課內容：通過本堂課的學習，使學生了解網頁設計的視聽元素，掌握不同形式的網頁元素特點。知識要點：一、網頁文字1、文本文字所謂文本，是指在網頁編輯軟件中可以編輯和更改內容的字符，它具有字體、字號、色彩等的基本屬性。2、圖形文字圖形文字是指內容不可編輯、已經圖形化的各種文字。3、網頁文字的設計準則（1）文字的風格和編排符合網頁主題。（2）保持文字的可讀性。（3）保持文字設計的整體性。（4）大量的文字適合使用文本文字，文本文字應選用常用的系統字體。（5）圖形文字要注意控制文件的大小。二、網頁圖形圖像1、矢量圖矢量圖也稱為向量圖，矢量圖是通過數學方法計算對象的輪廓線和填充屬性來描述圖形的。2、位圖位圖也稱為點陣圖或像素圖，它由網格上的點組成，這些點稱為像素。位圖是連續色調圖像（如照片或數字繪畫）最常用的電子媒介，因為它可以表現陰影和顏色的細微層次。3、矢量圖和位圖相互轉化4、圖形圖像的設計要點在進行網頁圖形圖像設計時，要根據網頁的特點注意以下要點：（1）96dpi是網頁圖像的最佳分辨率。（2）控制圖像文件的大小。（3）根據不同目的，選擇適當圖像文件格式。（4）大小：單張30KB，單頁60KB，較大圖像應進行“切割”，圖象的格式：GIF、JPEG。5、網頁中常用的圖形圖像格式（1）GIF圖像格式：GIF是GraphicInterchangeFormat（圖像交換格式）的縮寫，以.gif作為擴展名。（2）JPEG圖像格式：JPEG是JointPictureExpertGroup（聯合圖像專家組）的縮寫。由于它支持全彩色模式，所以很適合用來優化顏色豐富的圖像。（3）PNG圖像格式：PNG是PortableNetwortGraphics（可移植網絡圖像）的縮寫，是由Netscape公司開發出來的圖像格式。它汲取了GIF和JPG的優點。（4）SWF格式：SWF文件格式是一種基于矢量的圖形文件格式，也是目前Internet上唯一獲廣泛支持的矢量圖形格式。三、網頁動畫1、GIF動畫GIF動畫是像素圖像動畫，通過若干變化的256色位圖圖像間隔一定時間連續播放產生動畫效果，屬于逐幀動畫。逐幀動畫是指動畫的每一幀都需要繪制的動畫生成方式。2、Flash動畫通過Micromedia公司的Flash軟件能夠制作出一種擴展名為SWF（ShockwaveFormat）的動畫，通常我們叫這種動畫為Flash動畫。3、控件動畫控件動畫是指通過編寫程序代碼，使圖形或文字在一定的觸發條件下產生各種變形的動畫生成方式。四、網頁音頻與視頻1、音頻（1）MIDI文件：MIDI（擴展名為.midi或.mid）文件只能用于器樂，不能表現自然人聲。（2）WAV文件和AIF文件 ：WAV文件（擴展名為.wav）是微軟公司開發的一種聲音文件格式，AIF文件（擴展名為.aif或.aiff）是蘋果公司開發的聲音文件格式。（3）MP3文件：MP3文件（即MPEG-音頻層-3，擴展名為.mp3）是一種壓縮格式，它可令聲音文件明顯縮小，MP3是現在網絡音頻文件格式的主流。（4）RealAudio文件：RealAudio文件(擴展名為.ra、.ram、.rpm)具有非常高的壓縮程度，文件數據量要小于MP3。（5）WMA文件：WMA(WindowsMediaAudio，擴展名為.wma)格式是微軟公司開發的壓縮音樂格式。2、視頻（1）RealMedia（文件擴展名為.RM）（2）QuickTime（文件擴展名為：.qt、.qtm、.mov）（3）WindowsMedia媒體文件為ASF格式（擴展名為.asf或.wmv）五、交互式視覺元素1、按鈕按鈕在網頁中最為常見，它可以實現超鏈接功能。按鈕點擊后能夠產生某種行為，或實現某種操作，多用于頁面導航、信息提交以及各種功能的激活。2、導航條導航條實際上是一系列不同功能按鈕或鏈接圖標的組合，由于多個按鈕或鏈接圖標排列形成橫條或豎條，所以被稱為導航條。3、表單表單是用于信息收集和用戶反饋的一類對象。設計表單時應盡量簡單。實訓能力：課題作業實踐作業名稱：《網頁形象頁面》設計實踐內容1、企業形象的展示2、網頁圖片的選用與設計3、說明文案的編排考慮4、構成要素的考慮實踐目標熟悉掌握網頁設計中的視聽元素，獨立完成網頁形象頁面設計。課題要求1、網頁主頁規格1024*768。2、色彩模式RGB分辨率72像素。3、保存——學號姓名.PSD文件。教案首頁班級授課時間年月日課次時數課題課題三網頁交互式視覺元素教學目的通過本堂課的學習，使學生了解網頁交互式視覺元素，掌握網頁按鈕和導航條的設計，能夠獨立完成網頁導航條設計。授課提要１、按鈕類型２、導航條設計重點１、按鈕類型２、導航條設計難點１、導航條設計教具案例、教材、多媒體作業通過對網頁交互式視覺元素的學習完成網頁按鈕與導航條設計。后記課題三交互式視覺元素具體授課內容：通過本堂課的學習，使學生了解網頁交互式視覺元素，掌握網頁按鈕和導航條的設計，能夠獨立完成網頁導航條設計。概念分解：一、按鈕類型網頁中的按鈕主要有兩種類型:一種是單純以圖案作為按鈕，例如箭頭、三角形等簡單的圖案或符號作為示意；另一種是附有文字的按鈕，如例“首頁”、“進入”、“下一步”等，能夠直觀地表達按鈕的作用。二、導航條設計一個網站通常綜合了各種豐富的信息，并以多個頁面(頻道)將不同的內容呈現，為了在網頁中提供鏈接到其他頁面的通道，一般會設計導航條并將同一個導航條放置在所有網頁的相同位置，以便瀏覽者快速打開其他網頁獲得更多的信息。1、導航的形式優秀的網站導航總是能夠盡量回答用戶好的導航問題，這些是通過使用導航幫助系統如URL、網頁標簽、標記網頁和導航條等工具實現的。導航可以包括很多形式，常見的有標簽形式、按鈕形式、彈出菜單形式、無框圖標形式、Flash形式、多導航系統等。（1）標簽形式的導航標簽形式的導航通常用于圖片比例大、文字提供信息量少、網站風格較為簡單的網站中。（2）按鈕形式的導航按鈕形式的導航是傳統的導航樣式，按鈕可以制作成多種形狀，無論是規則還是不規則形狀的按鈕，都是最容易使讀者理解點擊含義的導航形式。（3）彈出菜單形式的導航為了節省頁面的空間，很多網站的導航采用彈出菜單的形式。當鼠標指針放在文字或圖片上時，菜單隨即彈出，這樣即可以節省空間，又可以增強頁面的交互效果。（4）無框圖標形式的導航無框圖標形式的導航將圖標去掉邊框，使用多種不規則的圖案或線條，給用戶以輕快的自由感，增強了網站的趣味性。（5）Flash形式的導航現在很多網站的導航是有Flash制作而成的。追求動感的時尚類網站通常采用這種風格的導航形式。（6）多導航系統在多導航系統中，不存在從屬關系，每個導航的作用都是不同的，導航內部可以采用多種形式表現。2、導航的方向與位置（1）導航的方向按照方向來劃分導航，可以將其劃分為垂直導航、橫排導航、傾斜導航和亂序導航。（2）導航的位置導航元素的位置不僅僅是一個品味的問題，它還是直接影響到用戶訪問網頁的便利性。通常網頁頁面中實際上有五個基本區域來放置導航元素。實訓能力：課題作業實踐作業名稱：《網頁導航欄》設計實踐內容1、導航形式的選擇2、導航元素設計3、導航色彩的考慮實踐目標熟悉掌握網頁設計中的導航設計，獨立完成網頁頁面按鈕與導航欄設計。課題要求1、網頁主頁規格1024*768。2、色彩模式RGB分辨率72像素。3、保存——學號姓名.PSD文件。教案首頁班級授課時間年月日課次時數課題課題四網頁版面設計教學目的通過本堂課的學習，使學生了解網頁版面及版面布局的原則、方法及形式。授課提要１、網頁版面２、版面布局原則３、版面布局常用方法4、版面布局形式（分欄布局）重點１、版面布局常用方法２、版面布局形式（分欄布局）難點１、版面布局常用方法２、版面布局形式（分欄布局）教具案例、教材、多媒體作業通過對網頁版面的設計學習完成網頁分頁面設計設計。后記課題四網頁版面設計具體授課內容：通過本堂課的學習，使學生了解網頁版面及版面布局的原則、方法及形式。知識要點：一、網頁版面1、網頁版面網頁版型就是網頁的頁面布局，版式設計指在指定的頁面空間上將各種視聽元素規劃組合在一起，形成所需的某種布局。設計者應該根據主題定位為網頁規劃合適的版式，使網頁呈現個性風格，讓瀏覽者產生視覺美感。2、網頁界面界面指某種設計的綜合布局形式，具有與外界交流及相互操作的作用。網頁界面要求具有一定版型的同時，能夠與瀏覽者交流互動，相互施加影響。與網頁版型不同，界面設計除了一般的布局處理，還要添加相關的操作功能。二、版面布局原則1、主次分明，中心突出2、大小搭配，相互呼應3、圖文并茂，相得益彰三、版面布局方法1、正常平衡2、異常平衡3、對比4、凝視5、空白6、圖片解說四、版面布局形式（分欄布局）1、Ⅰ和Ⅱ以二分欄作為基礎結構。分欄式結構是最常見的網頁框架，也可以稱為豎分欄。這是一種超過一屏半，把頁面從上到下分割為幾列構架的設計結構。分欄式結構是豎長方形頁面的框架。2、Ⅱ是Logo和導航處在頁面下方的情況。二分欄結構一般是左窄右寬，導航居左，底色加重表示強調。也有的情況是右窄左寬，導航居右，但非主流。3、Ⅲ是以三分欄作為基礎結構的。三分欄屬于開放式結構，給人的感覺十分大氣，適用于門戶和流量大的網站。常規內容設置是：導航橫排在頁面上部，左右兩欄為功能區和附加信息區。中欄為主要信息顯示區和重要資料顯示區。根據信息源，將中欄進行一些小分欄變化，以確立網站特色。色彩分布則主要是左右兩欄色彩深一些，而中欄為白色等常見情況。4、Ⅳ中的前兩個是四分欄的結構框架，后兩個是五分欄的結構框架。四分欄式結構會使得頁面相對很擁擠，給人一種網站的信息量很大的感覺。信息儲備少的站點采用這種框架，可以在視覺感觀上調整信息量少的不足。由于英文字比中文方塊漢字占用空間小，因而四分欄在國外比較多見。作為突破性的設計，應該有一些嘗試，也許會發現它的妙用之處。如果細心觀察，你會注意到在變化了的二分欄或三分欄骨架中會出現小的四分欄式結構。5、小四分欄式結構由于英文字比中文方塊漢字占用空間小，因而四分欄在國外比較多見。作為突破性的設計，應該有一些嘗試，也許會發現它的妙用之處。如果細心觀察，你會注意到在變化了的二分欄或三分欄骨架中會出現小的四分欄式結構。實訓能力：課題作業實踐作業名稱：《網頁分頁面》設計實踐內容1、企業形象的展示2、網頁圖片的選用與設計3、說明文案的編排考慮4、網頁布局形式的考慮實踐目標熟悉掌握網頁設計中的版面設計，獨立完成網頁分頁面設計。課題要求1、網頁主頁規格1024*768。2、色彩模式RGB分辨率72像素。3、保存——學號姓名.PSD文件。教案首頁班級授課時間年月日課次時數課題課題五網頁配色教學目的通過本堂課的學習，使學生了解什么是網頁安全色，掌握網頁基本配色。授課提要１、認識網頁安全色２、三原色原理3、網頁基本配色4、網頁配色分析重點１、網頁基本配色２、網頁配色分析難點1、網頁配色分析教具案例、教材、多媒體作業通過對網頁配色設計的學習完成網頁分頁面設計。后記課題五網頁配色具體授課內容：通過本堂課的學習，使學生了解什么是網頁安全色，掌握網頁基本配色。知識要點：一、認識網頁安全色1、網頁安全色就是指在不同硬件環境、不同操作系統、不同瀏覽器中都能夠正常顯示的顏色集合，而使用網頁安全色作為配色方案可以解決網頁顏色失真的問題。2、網頁安全色總共包含216種顏色，因此網頁安全色也稱為216安全色。二、三原色原理在實用美術中，常有“遠看色彩近看花，先看顏色后看花，七分顏色三分花”的說法。這也就說明，在任何設計中，色彩對視覺的刺激起到第一信息傳達的作用。因此，對色彩的基礎知識的良好掌控，在網頁設計中才能做到游刃有余。1、色環色環是色彩按紅、黃、綠、藍、紅依次過度漸變呈現出來的不同顏色，就可以得到一個色彩環。色環通常包括12種不同的顏色。2、原色也叫“三原色”。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調配不出來的。除白色外，把三原色相互混合，可以調和出其他種顏色。根據三原色的特性做出相應的色彩搭配，有最迅速最有力最強烈的傳達視覺信息效果。三、網頁基本配色1、無色設計：不用彩色，只用黑、白、灰色。2、類比設計：相鄰的顏色我們稱為類比色。類比色都擁有共同的顏色。這種顏色搭配產生了一種令人悅目、低對比度的和諧美感。類比色非常豐富，在設計時應用這種搭配同樣讓你輕易產生不錯的視覺效果。在色相環上任選三個連續的色彩或其任一明色和暗色。3、沖突設計：把一個顏色和它補色左邊或右邊的色彩配合起來。4、互補設計：在色輪上直線相對的兩種顏色稱為補色。補色形成強列的對比效果，傳達出活力、能量、興奮等意義。補色要達到最佳的效果，最好是其中一種面積比較小，另一種比較大。比如在一個藍色的區域里搭配橙色的小圓點。使用色相環上全然相反的顏色。5、單色設計：一種色相由暗、中、明三種色調組成。這就是單色。單色搭配上并沒有形成顏色的層次，但形成了明暗的層次。這種搭配在設計中應用時，出來的效果永遠不錯，其重要性也可見一斑。把一個顏色和任一個或它所有的明、暗色配合起來。。6、中性設計：一種色相由暗、中、明三種色調組成。這就是單色。單色搭配上并沒有形成顏色的層次，但形成了明暗的層次。這種搭配在設計中應用時，出來的效果永遠不錯，其重要性也可見一斑。加入一個顏色的補色或黑色使它色彩消失或中性化。7、分裂補色設計：如果我們同時用補色及類比色的方法來確定的顏色關系，就稱為分裂補色。這種顏色搭配既具有類比色的低對比度的美感，又具有補色的力量感。形成了一種既和諧又有重點的顏色關系。把一個顏色和它補色任一邊的顏色組合起來。8、原色設計：除了在一些兒童的產品中，三原色同時使用是比較少見的。但是，無論是在中國還是在美國的文化中，紅黃搭配都是非常受歡迎。紅黃搭配應用的范圍很廣——從快餐店到加油站，我們都可以看見這兩種顏色同時在一起。藍紅搭配也很常見，但只有當兩者的區域是分離時，才會顯得吸引人，如果是緊鄰在一起，則會產生沖突感。把純原色紅、黃、藍色結合起來。9、二次色設計：二次色之間都擁有一種共同的顏色——其中兩種共同擁有藍色，兩種共同擁有黃色，兩種共同擁有紅色——所以它們輕易能夠形成協調的搭配。如果三種二次色同時使用，則顯得很舒適、吸引，并具有豐富的色調。它們同時具有的顏色深度及廣度，這一點在其它顏色關系上很難找到。把二次色綠、紫、橙色結合起來。10、三次色三色設計：三次色三色設計是下面二個組合中的一個：紅橙、黃綠、藍紫色或是藍綠，黃橙、紅紫色，并且在色相環上每個顏色彼此都有相等的距離。實訓能力：四、網頁配色分析其實運用色輪分析后，很容易得到答案。A:單色搭配B:補色搭配C:三原色搭配D:類比色搭配實訓能力：課題作業實踐作業名稱：《網頁分頁面》設計實踐內容1、企業形象的展示2、網頁圖片的選用與設計3、說明文案的編排考慮4、網頁色彩的考慮實踐目標熟悉掌握網頁設計中的配色設計，獨立完成網頁分頁面設計。課題要求1、網頁主頁規格1024*768。2、色彩模式RGB分辨率72像素。3、保存——學號姓名.PSD文件。教案首頁班級授課時間年月日課次時數課題課題六PS網頁切圖教學目的通過本堂課的學習，使學生了解什么是網頁切圖與切片，掌握網頁切圖的方法，能夠獨立完成網頁頁面切圖。授課提要切圖與切片切圖操作過程從切圖到生成網頁重點１、切圖與切片2、切圖操作過程難點１、切圖操作過程2、從切圖到生成網頁教具案例、教材、多媒體作業通過對網頁頁面切圖的學習完成網頁頁面切圖設計。后記課題六PS網頁切圖具體授課內容：通過本堂課的學習，使學生了解什么是網頁切圖與切片，掌握網頁切圖的方法，能夠獨立完成網頁頁面切圖。知識要點：一、切圖與切片1、切圖，是一種網頁制作技術，他是將美工效果圖轉換為頁面效果圖的重要技術。Photoshop、Illistrator、Coreldraw提供了強大的切圖工具，Fireworks也提供了切圖技術，Flash則直接提供了網頁格式輸出技術（不需要切圖）。2、切片，是切圖的直接結果，切圖實際上就將圖切分為一系列的切片。這些圖片通常按照統一的名稱進行編碼。3、切圖的作用使用切片可以有效地減小頁面文件的大小，提高瀏覽者瀏覽頁面的體驗。想想看是把一個圖片完整下載下來快，還是把一個圖片分成若干個小圖同時下載快呢？所以，這就是切圖的必要性。二