第一講網(wǎng)頁設(shè)計(jì)概述

網(wǎng)頁設(shè)計(jì)與制作主講：吳發(fā)根Ｅ－mail：wufagen＠126QQ號：853579269課程定位?網(wǎng)頁設(shè)計(jì)與制作?是軟件技術(shù)專業(yè)的專業(yè)必修課程?網(wǎng)頁設(shè)計(jì)與制作?是以?計(jì)算機(jī)應(yīng)用根底?課程為根底，同時(shí)又是軟件技術(shù)專業(yè)各后續(xù)主要專業(yè)課的根底。通過本課程的學(xué)習(xí)，應(yīng)掌握網(wǎng)頁設(shè)計(jì)與制作的根本理論、根本操作技能和根本分析方法，為以后學(xué)習(xí)Web應(yīng)用程序開發(fā)等后續(xù)專業(yè)課程打下必備的根底。學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)？掌握網(wǎng)頁編程根底html相關(guān)知識知識目標(biāo)

熟練掌握網(wǎng)頁制作軟件Dreamweaver的根本操作和使用技能掌握網(wǎng)頁頁面布局的各種方法掌握表單網(wǎng)頁制作方法掌握圖片與多媒體文件的添加、調(diào)整掌握建立各種形式的超級鏈接的方法CSS層疊樣式表的應(yīng)用理解行為的作用，掌握設(shè)置行為的方法

培養(yǎng)收集、處理信息，準(zhǔn)備、加工素材的能力技能目標(biāo)

學(xué)會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動(dòng)畫和網(wǎng)頁特效等。培養(yǎng)制作靜態(tài)網(wǎng)頁的能力培養(yǎng)設(shè)計(jì)網(wǎng)站的綜合能力培養(yǎng)籌劃能力、色彩感悟能力；充分培養(yǎng)和提高動(dòng)手能力考核方式平時(shí)作業(yè)實(shí)驗(yàn)報(bào)告上課考勤網(wǎng)頁設(shè)計(jì)與制作相關(guān)技術(shù)的實(shí)際應(yīng)用平時(shí)成績(30%)實(shí)踐考核(30%)理論考試(40%)相關(guān)的根底理論、知識點(diǎn)及相關(guān)技術(shù)的應(yīng)用學(xué)生作品第一章網(wǎng)頁根底概述12網(wǎng)頁中的常用術(shù)語34網(wǎng)站開發(fā)的工作流程5什么是網(wǎng)頁？網(wǎng)頁制作工具1什么是網(wǎng)頁？1什么是網(wǎng)頁？瀏覽Web時(shí)所看到的文件稱為Web頁，又稱為網(wǎng)頁。網(wǎng)頁可以將不同類型的多媒體信息〔例如文本、圖像、聲音和電影等〕組合在一個(gè)文檔中。由于這些文檔是用超文本標(biāo)記語言HTML表示的，因此又稱為HTML文檔或超文本。HTMLHTML通過標(biāo)記符〔Tag〕標(biāo)記網(wǎng)頁的各個(gè)組成局部，通過在網(wǎng)頁中添加標(biāo)記符，指示瀏覽器如何顯示網(wǎng)頁內(nèi)容。瀏覽器按順序閱讀網(wǎng)頁文件〔HTML文件〕。任何網(wǎng)頁頁面都是以HTML語言為核心和根底的。網(wǎng)站和網(wǎng)頁

網(wǎng)站是網(wǎng)頁的集合，網(wǎng)頁是組成網(wǎng)站的元素。網(wǎng)站、網(wǎng)頁和主頁網(wǎng)頁大型網(wǎng)站一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁，而一個(gè)大型網(wǎng)站那么可能包含成千上萬個(gè)網(wǎng)頁。小型網(wǎng)站新浪網(wǎng)站首頁主頁也叫首頁，每個(gè)網(wǎng)站都有自己的首頁，它是瀏覽者登錄網(wǎng)站時(shí)看見的第一個(gè)網(wǎng)頁，也是網(wǎng)站的入口。網(wǎng)頁是什么

網(wǎng)頁中除了包含文字外，還包含圖像、動(dòng)畫等內(nèi)容。圖像動(dòng)畫文字我們看到的一個(gè)個(gè)網(wǎng)頁都是由多個(gè)文件組成的。網(wǎng)頁文件是“根〞，圖像和動(dòng)畫文件都是“枝葉〞。圖像文件網(wǎng)頁文件選擇“文件〞>“另存為〞菜單在瀏覽器中選擇“文件〞菜單中的“另存為〞，可將網(wǎng)頁保存到磁盤中。網(wǎng)頁中的元素類型網(wǎng)頁中的文字與圖像文字與圖像是網(wǎng)頁中的根本元素，是瀏覽者獲得相關(guān)信息的主要來源。可在設(shè)計(jì)網(wǎng)頁時(shí)為文字設(shè)置位置、字體、字號、顏色、對齊方式，以及加粗和傾斜等格式。網(wǎng)頁中只能使用和顯示JPEG、GIF和PNG格式的圖像，其他諸如BMP和TIF等格式的圖像目前還都不能用于網(wǎng)頁中。網(wǎng)頁中使用的動(dòng)畫與視頻影像視頻流技術(shù)常見的格式有RealVideo及AppleQuickTime。

GIF動(dòng)畫SWF動(dòng)畫目前，大家在網(wǎng)頁中看到的動(dòng)畫主要包括兩類，即動(dòng)態(tài)GIF格式動(dòng)畫和SWF格式動(dòng)畫。動(dòng)態(tài)GIF格式動(dòng)畫的原理十分簡單，就是高速連續(xù)顯示多幅靜態(tài)圖像，就像播放動(dòng)畫片一樣。通常用于制作簡單的小型動(dòng)畫。如果需要在網(wǎng)頁上使用一些大型、復(fù)雜或帶有聲音的動(dòng)畫，可借助Macromedia的Flash軟件來制作SWF動(dòng)畫。網(wǎng)頁中使用的聲音適當(dāng)?shù)脑诰W(wǎng)頁上加點(diǎn)音樂效果，會使網(wǎng)頁更具吸引力。目前，網(wǎng)上比較流行的音頻格式主要有MIDI、WAV、MP3與RealAudio?？刂埔魳返牟シ艔墓δ芙嵌确治鼍W(wǎng)頁從功能的角度來看，可以將網(wǎng)頁中的元素分為站標(biāo)、導(dǎo)航欄、廣告條、標(biāo)題欄和按鈕。站標(biāo)導(dǎo)航欄廣告條標(biāo)題欄按鈕站標(biāo)站標(biāo)也叫LOGO，是網(wǎng)站的標(biāo)志，其作用是使人看見它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站LOGO通常采用企業(yè)的LOGO。LOGO通常采用帶有企業(yè)特色和思想的圖案，或是與企業(yè)相關(guān)的字符或符號及其變形，當(dāng)然也有很多是圖文組合。導(dǎo)航欄導(dǎo)航欄實(shí)際上是網(wǎng)站內(nèi)多個(gè)頁面的超鏈接組合。導(dǎo)航欄也是網(wǎng)站中所有重要內(nèi)容的概括，可以讓瀏覽者在最短時(shí)間內(nèi)了解網(wǎng)站的主要內(nèi)容。設(shè)計(jì)導(dǎo)航欄時(shí)，有幾點(diǎn)需要注意。如果網(wǎng)站內(nèi)容不多，并且導(dǎo)航欄不超過兩排，可以根據(jù)網(wǎng)站風(fēng)格嘗試靈活擺放，如放在網(wǎng)頁的左側(cè)或者放在頁面上方等。頁面左側(cè)頁面上方如果網(wǎng)站的欄目很多，可以將導(dǎo)航欄分為多排放置在主頁LOGO的下方或右側(cè)，為便于觀看，可為各排設(shè)置不同的底色。LOGO右側(cè)LOGO下方如果導(dǎo)航欄內(nèi)容較多的話，盡量使用文字超鏈接而不用圖片。不過，如果導(dǎo)航欄內(nèi)容不多，或者網(wǎng)頁內(nèi)容比較活潑的話，多采用圖片或Flash制作導(dǎo)航欄。圖片導(dǎo)航欄Flash導(dǎo)航欄廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告，以賺取廣告費(fèi)。廣告條在Banner的制作過程中有一些要點(diǎn)需要注意：Banner可以是靜態(tài)的也可以是動(dòng)態(tài)的。Banner的體積不宜過大，盡量使用GIF格式的圖片與動(dòng)畫或Flash動(dòng)畫。Banner中的文字不要太多，只要到達(dá)一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動(dòng)畫，要防止出現(xiàn)顏色的漸變和光暈效果。這里的標(biāo)題欄不是指整個(gè)網(wǎng)頁的標(biāo)題欄，而是網(wǎng)頁內(nèi)部各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。標(biāo)題欄可以是文字加單元格背景，也可以是圖片，一般的大型網(wǎng)站都采用前者，一些內(nèi)容少的小網(wǎng)站采用后者。標(biāo)題欄標(biāo)題欄標(biāo)題欄網(wǎng)頁中的按鈕被點(diǎn)擊之后，網(wǎng)頁會實(shí)現(xiàn)相應(yīng)的操作，比方頁面跳轉(zhuǎn)，或數(shù)據(jù)的傳輸?shù)取ＴO(shè)計(jì)按鈕時(shí)，要保證按鈕與頁面的協(xié)調(diào)，不能太搶眼，如果按鈕上有字那么盡量使用單色或漸變色背景，保證字跡清晰。當(dāng)頁面上有多個(gè)按鈕的時(shí)候，應(yīng)分清主次，根據(jù)網(wǎng)頁的需要改變按鈕的顏色或者大小。按鈕按鈕按鈕網(wǎng)頁的分類按所處位置分類按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。按表現(xiàn)形式分類

按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為：靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。1.1.3網(wǎng)頁設(shè)計(jì)技術(shù)分類 1．靜態(tài)網(wǎng)頁設(shè)計(jì)技術(shù) Internet最早出現(xiàn)時(shí)，站點(diǎn)內(nèi)容都是以HTML靜態(tài)頁面形式存放在效勞器上的，訪問者瀏覽到的頁面都是這些實(shí)際存在的靜態(tài)頁面。靜態(tài)網(wǎng)頁設(shè)計(jì)技術(shù) 靜態(tài)并不是指網(wǎng)頁中的元素都是靜止不動(dòng)的，而是指網(wǎng)頁制作完成后，靜態(tài)網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站效勞器上，無論是否有用戶訪問，每個(gè)靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站效勞器上的。也就是說，靜態(tài)網(wǎng)頁是保存在效勞器上的內(nèi)容不變的文件，每個(gè)網(wǎng)頁都是一個(gè)獨(dú)立的文件。

靜態(tài)網(wǎng)頁設(shè)計(jì)技術(shù) 瀏覽器“閱讀〞靜態(tài)網(wǎng)頁的執(zhí)行過程較為簡單，如圖1-1所示。首先瀏覽器向網(wǎng)絡(luò)中的Web效勞器發(fā)出請求，指向某個(gè)普通網(wǎng)頁；Web效勞器接受請求信號后，將該網(wǎng)頁傳回給瀏覽器，此時(shí)傳送的只是文本文件；瀏覽器接到Web效勞器送來的信號后開始解讀HTML標(biāo)簽，然后進(jìn)行轉(zhuǎn)換，將結(jié)果顯示出來。圖1-1井臺網(wǎng)頁的執(zhí)行過程 由于靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索。 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)，完全依靠靜態(tài)網(wǎng)頁制作方式比較困難。 靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。靜態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是指客戶端瀏覽器發(fā)送URL請求給效勞器，效勞器查找需要的超文本文件不加處理直接返回給客戶端，在客戶端瀏覽器顯示的頁面是由網(wǎng)頁設(shè)計(jì)師先制作完成放在效勞器上的網(wǎng)頁。是純粹HTML格式的網(wǎng)頁，用戶根本上不能參與，只是網(wǎng)站頁面的靜態(tài)發(fā)布。靜態(tài)網(wǎng)頁相對更新起來比較麻煩，適用于一般更新較少的展示型網(wǎng)站。動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁中除了根本網(wǎng)頁中的元素外，還包括一些程序，這些應(yīng)用程序需要瀏覽器與效勞器之間發(fā)生交互行為。

動(dòng)態(tài)網(wǎng)頁技術(shù)根據(jù)程序運(yùn)行的地點(diǎn)不同，又分為效勞器端動(dòng)態(tài)技術(shù)〔ASP、JSP、PHP等〕和客戶端動(dòng)態(tài)技術(shù)〔JavaScript、VBScript〕。動(dòng)態(tài)網(wǎng)頁一般涉及數(shù)據(jù)庫操作，例如注冊、登錄、查詢、購物等，都需要設(shè)計(jì)強(qiáng)大的效勞器端動(dòng)態(tài)程序，并考慮各種可能出現(xiàn)的出錯(cuò)情況，以保證網(wǎng)站的交互性和平安性。動(dòng)態(tài)網(wǎng)頁的工作原理：客戶端瀏覽器向效勞器發(fā)出URL請求，效勞器查找到相應(yīng)的頁面之后，首先讀取動(dòng)態(tài)網(wǎng)頁上的代碼，根據(jù)代碼中的指令完成網(wǎng)頁，然后將代碼從網(wǎng)頁上去掉，所得的結(jié)果將是一個(gè)靜態(tài)網(wǎng)頁；應(yīng)用程序效勞器將該網(wǎng)頁傳送回網(wǎng)頁效勞器，網(wǎng)頁效勞器將網(wǎng)頁發(fā)送到瀏覽器，瀏覽器得到的仍然是一個(gè)純HTML的靜態(tài)網(wǎng)頁。網(wǎng)頁的結(jié)構(gòu)標(biāo)題欄地址欄菜單欄主頁狀態(tài)欄網(wǎng)頁中的根本元素網(wǎng)頁中的主要元素有：文本、圖像、超級鏈接、導(dǎo)航欄、表格、表單、多媒體等。1.文本網(wǎng)頁的主體一般以文本為主。在制作網(wǎng)頁時(shí)，可以根據(jù)需要設(shè)置文本的字體、字號、顏色以及所需要的其他格式。2.圖像圖像可以用作標(biāo)題、網(wǎng)站標(biāo)志〔Logo〕、網(wǎng)頁背景、鏈接按扭、導(dǎo)航欄、網(wǎng)頁主圖等。使用最多的文件格式是JPEG和GIF格式。3.超級鏈接

超級鏈接是從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接。4.導(dǎo)航欄

導(dǎo)航欄能使瀏覽者方便地返回主頁或繼續(xù)下一頁的訪問。導(dǎo)航欄可以是按鈕、文本或圖像。5.表格

網(wǎng)頁中的表格是一種用于控制網(wǎng)頁頁面布局的有效方法。

6.表單

表單通常用于收集信息或?qū)崿F(xiàn)一些交互式的效果。表單的主要功能是接收瀏覽者在瀏覽器端的輸入信息，然后將這些信息發(fā)送到瀏覽者設(shè)置的目的端。7.多媒體網(wǎng)頁包含有聲音、動(dòng)畫、視頻等多媒體元素。

2網(wǎng)頁中的常用術(shù)語WWWURL文件傳輸協(xié)議〔FTP〕IP地址域名超級鏈接網(wǎng)站2.1WWWWWW〔WorldWideWeb〕，中文稱為萬維網(wǎng)，也可以簡稱網(wǎng)。它是一個(gè)大規(guī)模的在線信息集合，是一個(gè)資料空間。可以通過一種叫做瀏覽器的應(yīng)用程序進(jìn)行檢索與查看。www的起源蒂姆·伯納斯·李〔TimBernersLee〕1989年，伯納斯·李提出了“WorldWideWeb〞的全球超文本工程方案。1990年，伯納斯·李開發(fā)出了架構(gòu)起全球信息網(wǎng)的三大根本技術(shù)：(超文件傳輸協(xié)議——電腦與效勞器之間的溝通語言)、html(超文本標(biāo)記語言——全球通用的文件格式)，以及URL(網(wǎng)址——文件位置的標(biāo)示系統(tǒng))。1991年，伯納斯·李把自己開發(fā)的全球信息網(wǎng)放到互聯(lián)網(wǎng)上。于是，一個(gè)劃時(shí)代的奇跡，在歐洲粒子物理研究所、在伯納斯·李的手中誕生了——這就是今天風(fēng)行世界的WWW。www有什么缺乏的地方嗎？萬維網(wǎng)創(chuàng)始人伯納斯·李于1998年提出了有關(guān)下一代萬維網(wǎng)的設(shè)想——語義網(wǎng)。語義網(wǎng)是機(jī)器可以理解數(shù)據(jù)含義的下一代萬維網(wǎng)。比爾·蓋茨比爾·蓋茨的豪華住宅 比爾·蓋茨那幢坐落在西雅圖，被 喻為未來生活預(yù)言的科技住宅無疑 是當(dāng)今世界上最現(xiàn)代化的豪華住 宅，堪稱是智能建筑的經(jīng)典之作。豪宅內(nèi)共鋪設(shè)各種電纜52英里，房子內(nèi)所有的電器設(shè)備相互連接成了一個(gè)智能網(wǎng)絡(luò)。主人在回家途中便可在車內(nèi)利用計(jì)算機(jī)遙控家中的浴缸自動(dòng)放水并調(diào)溫，作好一切迎接準(zhǔn)備。房屋裝有氣象感知器，可以根據(jù)各項(xiàng)氣象指標(biāo)，控制室內(nèi)的溫度和通風(fēng)情況。走進(jìn)大廳時(shí)，空調(diào)系統(tǒng)會將室溫調(diào)整至你感覺最舒適的溫度，音響系統(tǒng)也會針對你的喜好播放音樂，燈光系統(tǒng)自動(dòng)調(diào)整照明顏色與強(qiáng)度，就連墻上的LCD顯示屏，也會自動(dòng)顯示你喜愛的世界名畫或播放你上次只看到一半的影片。

在住宅各處隨意走動(dòng)時(shí)，地板能在6英寸的范圍內(nèi)跟蹤到人的足跡，在有人經(jīng)過時(shí)自動(dòng)翻開照明，離去時(shí)自動(dòng)關(guān)閉。每個(gè)房間的溫度、照明、音響等等都將隨不同的設(shè)定自動(dòng)調(diào)整。就算是在水池中，也會從池底“冒〞出如影隨形的音樂。尤其有意思的是，比爾·蓋茨非常喜歡車道旁邊一棵140歲的老楓樹，所以就通過專門的監(jiān)視系統(tǒng)對其進(jìn)行24小時(shí)的全方位監(jiān)控﹐一旦監(jiān)視系統(tǒng)發(fā)現(xiàn)它有任何枯燥的跡象，灌溉系統(tǒng)就會啟動(dòng)?！鞘裁醇舛说目萍枷到y(tǒng)使得蓋茨先生的豪宅擁有如此高的智能化水平？要等到哪一個(gè)世紀(jì)才能讓這樣現(xiàn)代化的住宅走入尋常百姓家？通過擴(kuò)展今天的萬維網(wǎng)〔即WWW，是WorldWideWeb的簡稱〕就完全可以使這一夢想變?yōu)楝F(xiàn)實(shí)。這種擴(kuò)展后的萬維網(wǎng)稱為語義網(wǎng)(SemanticWeb〕。2.2URLURL〔UniformResourceLocator〕主要是用來指定協(xié)議〔如HTTP或FTP〕以及對象、文檔、萬維網(wǎng)網(wǎng)頁或其他目標(biāo)在Internet的位置和存取方式。一個(gè)URL被用來標(biāo)識一個(gè)網(wǎng)絡(luò)路徑，可以通過互聯(lián)網(wǎng)在這個(gè)URL上訪問到對應(yīng)的資源。通信協(xié)議主機(jī)名所要訪問的網(wǎng)頁路徑及名稱主機(jī)名為。所要訪問的網(wǎng)頁路徑及名稱是/111/welcome.htm。2.3FTPFTPFTP〔FileTransferProtocol〕是一種廣泛使用的文件傳輸協(xié)議，是快速、高效和可靠的信息傳輸方法。FTP是基于客戶/效勞器模型的TCP/IP的應(yīng)用，所以只要在客戶端和效勞器之間建立了TCP/IP連接，無論兩臺電腦的位置遠(yuǎn)近、連接方式的異同以及使用的操作系統(tǒng)的異同，都能通過FTP協(xié)議進(jìn)行文件的傳輸。2.4IPIP地址用來標(biāo)識連接到Internet上電腦的指定編號，每一個(gè)IP地址對應(yīng)一臺電腦，這與用號碼標(biāo)識網(wǎng)絡(luò)中的相同。電腦識別的IP地址由32位二進(jìn)制數(shù)值組成，電腦上以十進(jìn)制數(shù)值來顯示，一組數(shù)值分為4局部，每一局部均不能大于255，中間用“.〞分隔，如2.5域名域名就是常說的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)址、網(wǎng)易的網(wǎng)址等就是一個(gè)域名，域名由漢語拼音或英文字符加上數(shù)字表示，在訪問網(wǎng)絡(luò)時(shí)，域名將通過域名效勞器轉(zhuǎn)換成IP地址，這種轉(zhuǎn)換是在后臺完成的。2.6超級鏈接超級鏈接是網(wǎng)頁中最常用的元素之一，網(wǎng)頁就是通過無數(shù)的超級鏈接才能組成一個(gè)網(wǎng)站。超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面、對象，也可以鏈接到其他網(wǎng)站，大大方便了用戶在各個(gè)頁面對象之間實(shí)現(xiàn)跳轉(zhuǎn)。2.7網(wǎng)站網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面。2.7網(wǎng)站網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面。網(wǎng)易搜狐新浪重大中國政府網(wǎng)中國稅務(wù)網(wǎng)中國日報(bào)南方周末聯(lián)眾游戲中國足球旅游咨詢3網(wǎng)頁制作工具網(wǎng)頁設(shè)計(jì)軟件(1).FrontPageFrontPage是Microsoft公司出品的入門級網(wǎng)頁編輯軟件。(2).DreamweaverDreamweaver是Macromedia公司推出的網(wǎng)頁制作產(chǎn)品，它是一個(gè)用于可視化設(shè)計(jì)與管理網(wǎng)頁和網(wǎng)站的工具，它與Macromedia公司的Flash、Fireworks配合使用，被稱為“網(wǎng)頁制作三劍客〞。Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計(jì)軟件。網(wǎng)頁圖像與動(dòng)畫制作工具制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設(shè)計(jì)人員選擇的是Fireworks或Photoshop。(1).Fireworks

Fireworks是Macromedia公司專門設(shè)計(jì)的Web圖形工具軟件，它可以用最少的步驟生成最小但質(zhì)量很高的JPEG和GIF圖像。(2).Photoshop

Photoshop是由Adobe公司出品的著名的圖形圖像處理軟件。

動(dòng)畫制作軟件

網(wǎng)頁動(dòng)畫制作中最常用的軟件非Flash莫屬。4網(wǎng)站開發(fā)的工作流程在制作網(wǎng)頁的過程中，要遵循一定的順序才能協(xié)調(diào)分配整個(gè)制作過程的資源與進(jìn)度。確定主題搜集材料規(guī)劃網(wǎng)站網(wǎng)站規(guī)劃推銷網(wǎng)站維護(hù)更新后期維護(hù)網(wǎng)站制作制作網(wǎng)站正式上傳測試評估圖網(wǎng)站設(shè)計(jì)的工作流程4.1網(wǎng)站規(guī)劃1.確定網(wǎng)站的主題確定網(wǎng)站主題應(yīng)遵循以下原那么：〔1〕主題鮮明。一個(gè)網(wǎng)站必須要有一個(gè)明確的主題，在主題范圍內(nèi)做到內(nèi)容全而精?！?〕明確設(shè)立網(wǎng)站的目的?！?〕表達(dá)自己的個(gè)性。把自己的興趣、愛好盡情地發(fā)揮出來，突出自己的個(gè)性，辦出自己的特色2.搜集材料圍繞主題搜集材料，作為自己制作網(wǎng)頁的素材。3.規(guī)劃網(wǎng)站⑴主題欄的設(shè)置

突出主題。把主題欄放在最明顯的地方，讓瀏覽者更快、更明確的知道網(wǎng)站所表現(xiàn)的內(nèi)容。 設(shè)計(jì)一個(gè)“最近更新〞欄目，讓瀏覽者一目了然的知道更新內(nèi)容。 欄目不要設(shè)置太多。⑵目錄結(jié)構(gòu)設(shè)計(jì)

按欄目內(nèi)容建立子目錄。

每個(gè)目錄下分別為圖像文件創(chuàng)立一個(gè)子目錄image〔圖像較少時(shí)可不創(chuàng)立〕。目錄的層次不要太深，主要欄目最好能直接從首頁到達(dá)。盡量使用意義明確的非中文目錄。⑶顏色搭配網(wǎng)頁選用的背景應(yīng)和頁面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原那么。⑷網(wǎng)站標(biāo)志Logo人教網(wǎng)Logo網(wǎng)易Logo搜狐Logo新浪Logo清華大學(xué)Logo263Logo⑸版面布局版面布局一般應(yīng)遵循的原那么是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志〔Logo〕、主菜單等最重要的模塊放在突出的位置。⑹圖像的運(yùn)用圖像是為主頁內(nèi)容效勞的，不能讓圖像喧賓奪主。

圖像要兼顧大小和美觀。圖片不僅要好看，還應(yīng)在保證圖片質(zhì)量的情況下盡量縮小圖片的大小〔即字節(jié)數(shù)〕。圖像過大將影響網(wǎng)頁的傳輸速度。

合理地采用JPEG和GIF圖像格式。顏色較少的〔256色以內(nèi)〕圖像，可處理為GIF格式；色彩比較豐富的圖像，最好處理為JPEG格式。4.2網(wǎng)站制作1.制作網(wǎng)站包括以下步驟⑴建立本地站點(diǎn)：建立站點(diǎn)根文件夾，用于存放首頁、相關(guān)網(wǎng)頁和網(wǎng)站中用到的其他文件。⑵在站點(diǎn)根文件夾下創(chuàng)立子文件夾：將頁面文件和圖像文件分開存放。⑶向站點(diǎn)添加所需要的空網(wǎng)頁。⑷設(shè)計(jì)網(wǎng)頁尺寸：選擇適宜的網(wǎng)頁大小。⑸設(shè)置網(wǎng)頁屬性：包括頁面標(biāo)題、背景圖像、背景顏色、鏈接顏色、文字顏色等。⑹向網(wǎng)頁中插入文本、圖形圖像、動(dòng)畫等對象。⑺建立所需要的超級鏈接。⑻預(yù)覽和保存網(wǎng)頁。確定網(wǎng)頁尺寸與版面布局目前顯示器最常用的分辨率是1024×768像素和800×600像素。在1024×768的分辨率下顯示的頁面的尺寸應(yīng)該為1007×600像素，而800×600的分辨率下顯示的頁面尺寸為778×435像素。確定了網(wǎng)頁尺寸后，接下來的任務(wù)就是確定網(wǎng)頁布局類型了。網(wǎng)頁布局類型沒有確定的標(biāo)準(zhǔn)，可以根據(jù)需要制