網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)論文――運(yùn)動(dòng)與健康1

1、遼寧工業(yè)大學(xué)網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)(論文題目:運(yùn)動(dòng)與健康院(系:管理學(xué)院專業(yè)班級(jí):學(xué)號(hào):學(xué)生姓名:指導(dǎo)教師:教師職稱:課程設(shè)計(jì)(論文任務(wù)及評(píng)語(yǔ)院(系:管理學(xué)院教研室:電子商務(wù)學(xué)號(hào)學(xué)生姓名專業(yè)班級(jí)電子商務(wù)091課程設(shè)計(jì)(論文題目運(yùn)動(dòng)與健康課程設(shè)計(jì)(論文任務(wù)1.網(wǎng)頁(yè)總數(shù)不少于30頁(yè),界面友好2.具有明顯自己設(shè)計(jì)的特征.3.在DREAMWEAVER設(shè)計(jì)部分,鏈接靈活方便,完全能夠?qū)崿F(xiàn).,表單,表格,含有自己設(shè)計(jì)篩理過(guò)的圖像,框架, 建立自己的站點(diǎn),文件管理規(guī)范4.在FIREWORKS設(shè)計(jì)部分,必須有自己設(shè)計(jì)的圖像,進(jìn)行效果處理,動(dòng)畫設(shè)計(jì).5.在FLASH設(shè)計(jì)部分,自己設(shè)計(jì)動(dòng)畫,動(dòng)作動(dòng)畫與形狀動(dòng)畫至少

2、各一個(gè),獨(dú)立完成的,元件,二個(gè)以上場(chǎng)景,含有聲音,FLASH文本設(shè)計(jì),具有行為效果.將FLASH 要放在自己設(shè)計(jì)的網(wǎng)頁(yè)中.6.網(wǎng)站主題明確,不得抄襲.7.具有實(shí)用性.8.根據(jù)自己設(shè)計(jì)的內(nèi)容寫出個(gè)人總結(jié),不少于1000字指導(dǎo)教師評(píng)語(yǔ)及成績(jī)頁(yè)面設(shè)計(jì)符合要求、布局合理、有創(chuàng)意、有特點(diǎn)且結(jié)合實(shí)時(shí)新聞。鏈接運(yùn)行正常、合理,具有從主頁(yè)到子頁(yè),從子頁(yè)到主頁(yè)的完整鏈接功能。Flash制作精美,功能正常,符合網(wǎng)頁(yè)內(nèi)容。頁(yè)面文字圖片搭配協(xié)調(diào),簡(jiǎn)潔大方,便于瀏覽。Firework設(shè)計(jì)部分,圖像運(yùn)行正常,效果實(shí)施完整。主題符合實(shí)際,且相互有關(guān)聯(lián),整體網(wǎng)頁(yè)運(yùn)行正常,功能完善,貼近學(xué)生生活,具有實(shí)用性。但網(wǎng)頁(yè)設(shè)計(jì)較為簡(jiǎn)單

3、,firework和flash的運(yùn)用也只是基礎(chǔ)功能的實(shí)現(xiàn),希望多加練習(xí),學(xué)習(xí)和了解更多網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的知識(shí)。成績(jī):指導(dǎo)教師簽字:2012年 07 月 06日目錄第1章課程設(shè)計(jì)目的與要求 (11.1 課程設(shè)計(jì)目的 (11.2 課程設(shè)計(jì)的實(shí)驗(yàn)環(huán)境 (11.3 課程設(shè)計(jì)的預(yù)備知識(shí) (11.4 課程設(shè)計(jì)要求 (1第2章課程設(shè)計(jì)內(nèi)容 (22.1 課程設(shè)計(jì)的目標(biāo) (22.2 網(wǎng)站開發(fā)需求分析 (22.3 開發(fā)工具的選用及介紹 (32.4 網(wǎng)頁(yè)設(shè)計(jì)的要素 (52.5 制作網(wǎng)頁(yè)的步驟 (62.6 網(wǎng)頁(yè)的設(shè)計(jì)技巧 (72.7 網(wǎng)頁(yè)的主要模塊 (72.8 網(wǎng)頁(yè)具體制作詳細(xì) (17第3章課程設(shè)計(jì)的問(wèn)題與解決 (203

4、.1 課程設(shè)計(jì)的問(wèn)題 (203.2 問(wèn)題的解決思路 (203.2 個(gè)人總結(jié) (20參考文獻(xiàn) (22第1章課程設(shè)計(jì)目的與要求1.1 課程設(shè)計(jì)目的本課程的課程設(shè)計(jì)實(shí)際是電子商務(wù)專業(yè)學(xué)生學(xué)習(xí)完網(wǎng)頁(yè)設(shè)計(jì)與制作課程后,進(jìn)行的一次全面的綜合訓(xùn)練,其目的在于加深對(duì)基本知識(shí)的理解,掌握運(yùn)用各種書本學(xué)習(xí)過(guò)軟件的基本方法。1.2 課程設(shè)計(jì)的實(shí)驗(yàn)環(huán)境硬件要求能運(yùn)行Windows 9.X操作系統(tǒng)的微機(jī)系統(tǒng)。數(shù)據(jù)庫(kù)應(yīng)用系統(tǒng)開發(fā)軟件可以選用:FoxPro for Windows;Visual FoxPro;Microsoft Access,或其他數(shù)據(jù)庫(kù)管理系統(tǒng);以及其它學(xué)習(xí)或自己使用過(guò)的相關(guān)軟件.1.3 課程設(shè)計(jì)的預(yù)備知

5、識(shí)熟悉數(shù)據(jù)庫(kù)的基本知識(shí)及一種以上數(shù)據(jù)庫(kù)系統(tǒng)開發(fā)軟件。及有關(guān)網(wǎng)頁(yè)設(shè)計(jì)的工具軟件.1.4 課程設(shè)計(jì)要求按課程設(shè)計(jì)指導(dǎo)書提供的課題(參考,應(yīng)根據(jù)下一節(jié)給出的基本需求獨(dú)立完成各個(gè)方面的設(shè)計(jì),可以組成設(shè)計(jì)小組,分模塊進(jìn)行,共同協(xié)作完成一個(gè)應(yīng)用系統(tǒng)的開發(fā)任務(wù)。要求書寫詳細(xì)的設(shè)計(jì)說(shuō)明書,對(duì)復(fù)雜的代碼段和程序段,應(yīng)畫出程序流程圖。在界面設(shè)計(jì)中,畫出每個(gè)窗口的布局,有多個(gè)窗口時(shí),按模塊調(diào)用的方式畫出窗口調(diào)用圖,用手工畫好報(bào)表和標(biāo)簽樣式,嚴(yán)禁相互抄襲。第2章課程設(shè)計(jì)內(nèi)容2.1 課程設(shè)計(jì)的目標(biāo)21世紀(jì)是信息高速發(fā)達(dá)的時(shí)代,網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來(lái)越被人們接受,而作為新世紀(jì)的計(jì)算機(jī)系大學(xué)生更應(yīng)該具備一

6、定的網(wǎng)絡(luò)知識(shí),來(lái)充實(shí)和武裝自己。網(wǎng)站的建設(shè)首先能豐富學(xué)生自己的文化知識(shí),在建設(shè)網(wǎng)站的過(guò)程中能學(xué)到實(shí)際的網(wǎng)絡(luò)知識(shí)。這樣不僅對(duì)自己原有的知識(shí)是個(gè)實(shí)踐性的提高,而且還積累了實(shí)際的設(shè)計(jì)經(jīng)驗(yàn)。而對(duì)于即將畢業(yè)的學(xué)生,網(wǎng)站能對(duì)他有什么樣的幫助呢?這是一個(gè)很好的網(wǎng)絡(luò)身份證,因?yàn)榫W(wǎng)站的作用是讓別人了解自己認(rèn)識(shí)自己,以達(dá)到讓別人對(duì)自己更好的了解。有這么一個(gè)自己設(shè)計(jì)和制作的網(wǎng)站在這里完全可以證明你擁有一定水平的計(jì)算機(jī)能力,也加大了你被錄取的可能性。而且對(duì)于那些計(jì)算機(jī)水平很高的人來(lái)說(shuō),建設(shè)一個(gè)個(gè)人網(wǎng)站首先證明了自己的水平。這樣比簡(jiǎn)單空白的文本式簡(jiǎn)歷要更有說(shuō)服力的多。在網(wǎng)頁(yè)制作中,運(yùn)用了Photoshop和firewo

7、rks強(qiáng)大的圖像制作和處理能力。以自己在網(wǎng)上收集的素材作為圖片素材。進(jìn)行了大量的圖片制作,從而給人以強(qiáng)烈的美感。整個(gè)網(wǎng)站的架構(gòu)是由Dreamwaver軟件完成的。整個(gè)網(wǎng)站運(yùn)用了CSS的方法定位、設(shè)計(jì)。用這個(gè)方法可以減少內(nèi)存,更易瀏覽。HTML編輯器,雖然HTML代碼復(fù)雜,編輯和調(diào)試要花費(fèi)大量的時(shí)間,但因HTML的穩(wěn)定性、廣泛支持性及可創(chuàng)建復(fù)雜的頁(yè)面效果,仍受高級(jí)網(wǎng)頁(yè)制作人員的青睞。就目前來(lái)說(shuō),有眾多的編輯器供選擇,這些編輯器廣泛支持復(fù)雜頁(yè)面創(chuàng)建及高級(jí)HTML規(guī)范。2.2 網(wǎng)站開發(fā)需求分析一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的,這種需求往往來(lái)自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要

8、,其中客戶的實(shí)際需求也就是說(shuō)這種交易性質(zhì)的需求占了絕大部分。面對(duì)對(duì)網(wǎng)站開發(fā)擁有不同知識(shí)層面的客戶,項(xiàng)目的負(fù)責(zé)人對(duì)用戶需求的理解程度,在很大程度上決定了此類網(wǎng)站開發(fā)項(xiàng)目的成敗。因此如何更好地的了解、分析、明確用戶需求,并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個(gè)成員,保證開發(fā)過(guò)程按照滿足用戶需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行,是每個(gè)網(wǎng)站開發(fā)項(xiàng)目管理者需要面對(duì)的問(wèn)題。運(yùn)動(dòng)和健康越來(lái)越受大大家的重視,一個(gè)集體育資訊和健康知識(shí)于一體的網(wǎng)站,一定回受到大家的關(guān)注。2.3 開發(fā)工具的選用及介紹2.3.1 Dreamweaver簡(jiǎn)介Dreamweaver 是沒(méi)過(guò)Adpbe(原Macromedia,20

9、05年唄Adobe收購(gòu)公司開發(fā)的及網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器,它是一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開發(fā)工具,利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。它不僅是優(yōu)秀的WYSIWYG編輯器,更是優(yōu)秀的代碼編輯器,有代碼加亮,代碼提示等豐富功能,提供各種示例代碼,并支持Javascript、PHP、ASP、JSP等多種腳本語(yǔ)言。此外,Dreamweaver MX 2004提供基于強(qiáng)大的規(guī)范管理來(lái)確保高質(zhì)量的設(shè)計(jì),設(shè)計(jì)環(huán)境提供CSS迅速高效的開發(fā)代碼簡(jiǎn)潔、專業(yè)規(guī)范的站點(diǎn)。如果用戶熟悉手工編寫標(biāo)記代碼,Dreamweaver包括許多與編碼相關(guān)的

10、工具和功能,其使用將更加靈活。并且,借助Dreamweaver還可以使用服務(wù)器語(yǔ)言生成支持動(dòng)態(tài)數(shù)據(jù)庫(kù)的Web應(yīng)用程序。Macromedia Dreamweaver MX 是創(chuàng)建專業(yè)網(wǎng)站的最佳途徑, 同時(shí)也是構(gòu)建強(qiáng)大Internet 應(yīng)用程序的最簡(jiǎn)便的途徑。開發(fā)人員第一次能在一個(gè)環(huán)境內(nèi)快速創(chuàng)建和管理網(wǎng)站及 Internet應(yīng)用程序。Dreamweaver MX 是一個(gè)完整、集成的解決方案, 可為您提供可視化的布局工具、快速的 web應(yīng)用程序開發(fā)以及廣泛的代碼編輯支持了全面、系統(tǒng)地提升網(wǎng)絡(luò)設(shè)計(jì)、開發(fā)者的 Macromedia Dreamweaver MX 及其它軟件應(yīng)用水平。2.3.2 Flash

11、 簡(jiǎn)介Flash是由macromedia公司推出的交互式矢量圖和 Web 動(dòng)畫的標(biāo)準(zhǔn),由Adobe公司收購(gòu)。網(wǎng)頁(yè)設(shè)計(jì)者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。Flash也是存儲(chǔ)芯片的一種,通過(guò)特定的程序可以修改里面的數(shù)據(jù)。Flash的前身是Future Wave公司的Future Splash,是世界上第一個(gè)商用的二維矢量動(dòng)畫軟件,用于設(shè)計(jì)和編輯Flash文檔。1996年11月,美國(guó)Macromedia公司收購(gòu)了Future Wave,并將其改名為Flash。在出到Flash 8以后,Macromedia又被Adobe公司收購(gòu)。Flash 通常也指Macrome

12、dia Flash Player(現(xiàn)Adobe Flash Player。Flash,是一種動(dòng)畫創(chuàng)作與應(yīng)用程序開發(fā)于一身的創(chuàng)作軟件,目前最新的零售版本為Adobe Flash Professional CS6(2012年發(fā)布。Adobe Flash Professional CS6為創(chuàng)建數(shù)字動(dòng)畫、交互式Web站點(diǎn)、桌面應(yīng)用程序以及手機(jī)應(yīng)用程序開發(fā)提供了功能全面的創(chuàng)作和編輯環(huán)境。Flash廣泛用于創(chuàng)建吸引人的應(yīng)用程序,它們包含豐富的視頻、聲音、圖形和動(dòng)畫?？梢栽贔lash中創(chuàng)建原始內(nèi)容或者從其它Adobe應(yīng)用程序(如Photoshop 或Illustrator導(dǎo)入它們,快速設(shè)計(jì)簡(jiǎn)單的動(dòng)畫,以及使

13、用Adobe AcitonScript 3.0開發(fā)高級(jí)的交互式項(xiàng)目。設(shè)計(jì)人員和開發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其它允許用戶交互的內(nèi)容。Flash可以包含簡(jiǎn)單的動(dòng)畫、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的任何內(nèi)容。通常,使用Flash創(chuàng)作的各個(gè)內(nèi)容單元稱為應(yīng)用程序,即使它們可能只是很簡(jiǎn)單的動(dòng)畫。您也可以通過(guò)添加圖片、聲音、視頻和特殊效果,構(gòu)建包含豐富媒體的Flash應(yīng)用程序。2.3.3 HTML語(yǔ)言的簡(jiǎn)介HTML一種為普通文件中某些字句加上標(biāo)示的語(yǔ)言,其目的在于運(yùn)用標(biāo)記(tag使文件達(dá)到預(yù)期的顯示效果。HTML只是標(biāo)示語(yǔ)言,基本上你只要明白了各種標(biāo)記的用法便算學(xué)懂了 htm

14、l,html 的格式非常簡(jiǎn)單,只是由文字及標(biāo)記組合而成,于編輯方面,任何文字編輯器都可以,只要能將文件另存成 ascii 純文字格式即可,當(dāng)然以專業(yè)的網(wǎng)頁(yè)編輯軟件為佳。設(shè)計(jì)HTML語(yǔ)言的目的是為了能把存放在一臺(tái)電腦中的文本或圖形與另一臺(tái)電腦中的文本或圖形方便地聯(lián)系在一起,形成有機(jī)的整體,人們不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上。只需使用鼠標(biāo)在某一文檔中點(diǎn)取一個(gè)圖標(biāo),Internet就會(huì)馬上轉(zhuǎn)到與此圖標(biāo)相關(guān)的內(nèi)容上去,而這些信息可能存放在網(wǎng)絡(luò)的另一臺(tái)電腦中。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說(shuō)明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭

15、部(Head、主體(Body兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說(shuō)明的具體內(nèi)容。另外,HTML是網(wǎng)絡(luò)的通用語(yǔ)言,一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面,這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到,無(wú)論使用的是什么類型的電腦或?yàn)g覽器。神奇嗎?一點(diǎn)都不神奇,因?yàn)楝F(xiàn)在你看到的就是這種語(yǔ)言寫的頁(yè)面。也許你聽(tīng)說(shuō)過(guò)許多可以編輯網(wǎng)頁(yè)的軟件,事實(shí)上,你不需要用任何專門的軟件來(lái)建立HTML頁(yè)面;你所需要的只是一個(gè)文字處理器以及HTML的工作常識(shí)。其實(shí)你很快就會(huì)發(fā)現(xiàn),基礎(chǔ)的HTML語(yǔ)言簡(jiǎn)直容易死了。HTML只不過(guò)是組合成一個(gè)文本文件的一系列標(biāo)簽。它們很像樂(lè)隊(duì)的指揮

16、,告訴樂(lè)手們哪里需要停頓,哪里需要激昂。2.4 網(wǎng)頁(yè)設(shè)計(jì)的要素1、網(wǎng)頁(yè)的整體布局設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)作為一種視覺(jué)語(yǔ)言,要講究編排和布局,雖然主頁(yè)的設(shè)計(jì)不等同于平面設(shè)計(jì),但它們有許多相近之處,應(yīng)充分加以利用和借鑒。版式設(shè)計(jì)通過(guò)文字圖形的空間組合,表達(dá)出和諧與美。一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)者也應(yīng)該知道哪一段文字圖形該落于何處,才能使整個(gè)網(wǎng)頁(yè)生輝。多頁(yè)面站點(diǎn)頁(yè)面的編排設(shè)計(jì)要求把頁(yè)面之間的有機(jī)聯(lián)系反映出來(lái),特別要處理好頁(yè)面之間和頁(yè)面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們?cè)诶镁W(wǎng)頁(yè)效果體現(xiàn)在線營(yíng)銷的意圖時(shí),更要注意為了達(dá)到最佳的視覺(jué)表現(xiàn)效果,而講究整體布局的合理性,比如一家生產(chǎn)型的企業(yè),它所提供產(chǎn)品的名稱、類別、型號(hào)、價(jià)格、

17、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個(gè)流暢的視覺(jué)體驗(yàn),從而方便他對(duì)產(chǎn)品的了解,促成最后的購(gòu)買。2、網(wǎng)頁(yè)設(shè)計(jì)中色彩的運(yùn)用色彩是藝術(shù)表現(xiàn)的要素之一,在網(wǎng)頁(yè)設(shè)計(jì)中,根據(jù)和諧、均衡和重點(diǎn)突出的原則,將不同的色彩進(jìn)行組合、搭配來(lái)構(gòu)成美麗的頁(yè)面。根據(jù)色彩對(duì)人們心理的影響,合理地加以運(yùn)用,按照色彩的記憶性原則,一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì),如紅色象征血、太陽(yáng);藍(lán)色象征大海、天空和水面等。所以如果我們?cè)趯?duì)一家出售冷食的商店進(jìn)行虛擬店面的頁(yè)面設(shè)計(jì)時(shí),應(yīng)使用淡雅而沉靜的顏色,使人心理上感覺(jué)涼爽一些,增強(qiáng)人們的購(gòu)買心理,使得在線營(yíng)銷得到很好的實(shí)踐效果。另要注意的是網(wǎng)頁(yè)的顏色應(yīng)用雖沒(méi)有限制

18、,但不能毫無(wú)節(jié)制地運(yùn)用多種顏色,一般情況下,先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào),在已經(jīng)有了完備的CIS(企業(yè)形象識(shí)別系統(tǒng)的企業(yè)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí),更應(yīng)該按照其中的VI進(jìn)行色彩運(yùn)用。在色彩的運(yùn)用過(guò)程中,還應(yīng)注意的一個(gè)問(wèn)題是:由于國(guó)家和種族、宗教和信仰的不同,以及生活的地理位置、文化修養(yǎng)的差異等,不同的人群對(duì)色彩的喜惡程度有著很大的差異。如:兒童喜歡對(duì)比強(qiáng)烈、個(gè)性鮮明的純顏色;生活在草原上的人喜歡紅色;生活在鬧市中的人喜歡淡雅的顏色;生活在“沙漠”中的人喜歡綠色。在設(shè)計(jì)中要考慮眾多因素。3、網(wǎng)頁(yè)形式與內(nèi)容相統(tǒng)一要將豐富的意義和多樣的形式組織成統(tǒng)一的頁(yè)面結(jié)構(gòu),形式語(yǔ)言必須符合頁(yè)面的內(nèi)容,體現(xiàn)內(nèi)容的豐

19、富含義。運(yùn)用對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律以及留白等手段,通過(guò)空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài),產(chǎn)生和諧的美感。如對(duì)稱原則在頁(yè)面設(shè)計(jì)中,它的均衡有時(shí)會(huì)使頁(yè)面顯得呆板,但如果加入一些富有動(dòng)感的文字、圖案,或采用夸張的手法來(lái)表現(xiàn)內(nèi)容往往會(huì)達(dá)到比較好的效果。點(diǎn)、線、面作為視覺(jué)語(yǔ)言中的基本元素,要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁(yè)面效果。網(wǎng)頁(yè)設(shè)計(jì)中點(diǎn)、線、面的運(yùn)用并不是孤立的,很多時(shí)候都需要將它們結(jié)合起來(lái),表達(dá)完美的設(shè)計(jì)意境。2.5 制作網(wǎng)頁(yè)的步驟在做網(wǎng)頁(yè)之前,我確定了做網(wǎng)頁(yè)的五個(gè)步驟。1、確定網(wǎng)站主題:網(wǎng)站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容,一個(gè)網(wǎng)站必須

20、要有一個(gè)明確的主題。2、搜集材料:明確了網(wǎng)站的主題以后,你就要圍繞主題開始搜集材料了。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來(lái),也可以從互聯(lián)網(wǎng)上搜集,然后把搜集的材料去粗取精,去偽存真,作為自己制作網(wǎng)頁(yè)的素材。3、規(guī)劃網(wǎng)站:一個(gè)網(wǎng)站設(shè)計(jì)得成功與否,很大程度上決定于設(shè)計(jì)者的規(guī)劃水平,規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣,圖紙?jiān)O(shè)計(jì)好了,才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多,如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等,你只有在制作網(wǎng)頁(yè)之前把這些方面都考慮到了,才能在制作時(shí)駕輕就熟,胸有成竹。也只有如此制作出來(lái)的網(wǎng)頁(yè)才能有個(gè)性、有特色,具有吸引力。4、選擇合適的制

21、作工具:盡管選擇什么樣的工具并不會(huì)影響你設(shè)計(jì)網(wǎng)頁(yè)的好壞,但是一款功能強(qiáng)大、使用簡(jiǎn)單的軟件往往可以起到事半功倍的效果。5、制作網(wǎng)頁(yè):材料有了,工具也選好了,下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了,這是一個(gè)復(fù)雜而細(xì)致的過(guò)程,一定要按照先大后小、先簡(jiǎn)單后復(fù)雜來(lái)進(jìn)行制作。所謂先大后小,就是說(shuō)在制作網(wǎng)頁(yè)時(shí),先把大的結(jié)構(gòu)設(shè)計(jì)好,然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡(jiǎn)單后復(fù)雜,就是先設(shè)計(jì)出簡(jiǎn)單的內(nèi)容,然后再設(shè)計(jì)復(fù)雜的內(nèi)容,以便出現(xiàn)問(wèn)題時(shí)好修改。在制作網(wǎng)頁(yè)時(shí)要多靈活運(yùn)用模板,這樣可以大大提高制作效率。2.6 網(wǎng)頁(yè)的設(shè)計(jì)技巧一張完美的主頁(yè)設(shè)計(jì)需要積累豐富的知識(shí)以及掌握大量的技巧。在這里從框架和CSS樣式

22、的運(yùn)用兩方面來(lái)介紹網(wǎng)頁(yè)設(shè)計(jì)的技巧。FRAME(框架是Web上經(jīng)常會(huì)看到的頁(yè)面結(jié)構(gòu)?？蚣艿淖畛Ｒ?jiàn)用途就是導(dǎo)航。一組框架通常包括一個(gè)含有導(dǎo)航條的框架和另一個(gè)要顯示主要內(nèi)容頁(yè)面的框架。使用框架具有以下優(yōu)點(diǎn):訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形;每個(gè)框架都具有自己的滾動(dòng)條(如果內(nèi)容太大,在窗口中顯示不下,因此訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架。例如,當(dāng)框架中的內(nèi)容頁(yè)面較長(zhǎng)時(shí),如果導(dǎo)航條位于不同的框架中,那么向下滾動(dòng)到頁(yè)面底部的訪問(wèn)者就不需要再滾動(dòng)回頂部來(lái)使用導(dǎo)航條。使用框架具有以下缺點(diǎn):可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對(duì)齊;對(duì)導(dǎo)航進(jìn)行測(cè)試可能很耗時(shí)間。許多專業(yè) Web 設(shè)計(jì)人員不喜歡使

23、用框架,并且許多瀏覽 Web 的人也不喜歡框架。在大多數(shù)情況下,這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾厥褂每蚣艿恼军c(diǎn)(例如,每當(dāng)訪問(wèn)者單擊導(dǎo)航按鈕時(shí)就重新加載導(dǎo)航框架內(nèi)容的框架集。如果框架使用得法(例如,在允許其他框架的內(nèi)容發(fā)生更改的同時(shí),使一個(gè)框架中的導(dǎo)航控件保持靜態(tài),則這些框架對(duì)于某些站點(diǎn)可能非常有用。2.6.2 CSS樣式的使用CSS(層疊樣式表是一種制作網(wǎng)頁(yè)的新技術(shù),它的全稱是級(jí)聯(lián)樣式表,即Cascading StyleSheets的縮寫,又稱之為風(fēng)格樣式表單。CSS是在網(wǎng)頁(yè)制作過(guò)程中普遍用到的技術(shù)。采用了CSS技術(shù)控制的網(wǎng)頁(yè),設(shè)計(jì)者會(huì)更輕松、有效地對(duì)頁(yè)面的整體布局、顏色、

24、字體、鏈接、背景以及同一頁(yè)面的不同部分、不同頁(yè)面的外觀和格式等效果實(shí)現(xiàn)更加精確地控制。2.7 網(wǎng)頁(yè)的主要模塊網(wǎng)頁(yè)主要模塊展示圖 1、網(wǎng)站首頁(yè)左側(cè)展示運(yùn)動(dòng)健康小知識(shí),中間展示全民健身視頻,上方為網(wǎng)頁(yè)主要鏈接,分別有籃球資訊、羽毛球資訊、足球資訊、圖片。 2、籃球1籃球首頁(yè)我愛(ài)NBA鏈接:最新資訊、最愛(ài)的球隊(duì)、最愛(ài)的球星、聯(lián)盟MVP、總冠軍球隊(duì)、發(fā)展與起源利用firework制作滾動(dòng)的圖片橫幅,展示NBA球隊(duì)利用flash制作視頻,NBA球隊(duì)簡(jiǎn)介 2籃球籃球最新資訊頁(yè)面。每條信息都可點(diǎn)擊閱讀,打開新的頁(yè)面。最下方是利用firework 制作的滾動(dòng)圖片 每個(gè)球隊(duì)名稱都可點(diǎn)擊并打開新頁(yè)面,打開后的網(wǎng)頁(yè)

25、展示球隊(duì)相關(guān)信息。 4最愛(ài)的球星頁(yè)面 5籃球的起源頁(yè)面左側(cè)的籃球的起源、籃球的發(fā)展、籃球的規(guī)則均為鏈接,點(diǎn)擊展示新內(nèi)容。 3、足球1足球首頁(yè) 2球隊(duì)資訊頁(yè)面左側(cè)分欄,建立鏈接展示球隊(duì)資訊、球員資訊、起源于發(fā)展點(diǎn)擊球隊(duì)或球員的圖標(biāo)后,可打開相關(guān)資訊頁(yè)面 3球員資訊頁(yè)面 4起源于發(fā)展頁(yè)面 4、羽毛球1羽毛球首頁(yè)建立鏈接:羽毛球發(fā)展與起源、圖片集錦、最新資訊等利用flash制作視頻,介紹羽毛球的起源和發(fā)展以及現(xiàn)在羽毛球運(yùn)動(dòng)的發(fā)展 左側(cè)羽毛球的起源、羽毛球的發(fā)展、羽毛球的規(guī)則均為鏈接,點(diǎn)擊可打開新內(nèi)容。 展示大賽圖片,最新賽況。 展示最新羽毛球賽況,最新比賽資訊。 2.8 網(wǎng)頁(yè)具體制作詳細(xì)2.8.1

26、字幕的設(shè)計(jì)做網(wǎng)頁(yè)是可以做一條滾動(dòng)字幕,這樣可以使網(wǎng)頁(yè)加入豐富的動(dòng)態(tài)效果,設(shè)計(jì)出生動(dòng)活潑的網(wǎng)頁(yè)。首先進(jìn)入設(shè)計(jì)視圖,將插入點(diǎn)放到要添加的新Web組件的位置。然后單擊插入/Web組件,然后再單擊字幕。2.8.2 圖片的插入當(dāng)把一個(gè)與主題相關(guān)的圖片作為網(wǎng)頁(yè)的背景,可能會(huì)更加吸引人們的眼球。因?yàn)槲易龅氖顷P(guān)于我愛(ài)NBA的網(wǎng)頁(yè),所以我所選的背景是一幅NBA球星集合的畫面。我把圖片保存在我的磁盤上,在設(shè)計(jì)模式下,用鼠標(biāo)右擊該網(wǎng)頁(yè),選擇快捷菜單上的網(wǎng)頁(yè)屬性,在網(wǎng)頁(yè)屬性的對(duì)話框中,單擊格式選項(xiàng)卡,選擇背景圖片復(fù)選框,然后單擊瀏覽,確定背景圖片的文件,單擊打開。就這樣可以增添背景了為了使網(wǎng)頁(yè)達(dá)到圖文并茂的效果,需要

27、在網(wǎng)頁(yè)中插入一些NBA的圖片。在制作之前我先在“NBA網(wǎng)站”里找了大量的有關(guān)的圖片,保存在我的可移動(dòng)磁盤里。只有擴(kuò)展名為GIF和JPEG的圖形文件才能成為我們的頁(yè)面的一部分。因?yàn)檫@兩種圖形格式不僅應(yīng)用廣泛,而且有利于節(jié)省存貯空間。下面我就可以把圖片插入到網(wǎng)頁(yè)中因首先把光標(biāo)定位在需要插入圖片的位置,然后選擇插入/圖片命令,單擊常用工具欄中的插入文件中的圖片按紐。在默認(rèn)情況下,插入圖片,就這樣就完成了圖片的添加了。但圖片需要保存在磁盤了,否則下次打開時(shí)圖片可能打不開。2.8.3 字體的設(shè)制字體設(shè)置:選上文字,打開格式工具欄的字體下拉列表框,在里面選擇相應(yīng)的字體就可以了。字的顏色:單擊格式工具欄字體

28、顏色按鈕旁的向下箭頭,選擇適當(dāng)?shù)念伾?字的顏色就改變了。還可以對(duì)字體進(jìn)行一些其他設(shè)置。選擇格式菜單的字體命令,在這里我們還可以作進(jìn)一步的設(shè)置。這里除了格式工具欄可以做的設(shè)置以外,還可以設(shè)置許多效果。字符間距選項(xiàng)卡:它是用來(lái)設(shè)置文字的間距的。單擊間距下拉列表,可以選擇字符的間距是普通、擴(kuò)充還是緊縮的。選擇擴(kuò)充,這時(shí)預(yù)覽框的文字間距就變大了。也可以調(diào)整間距大小來(lái)改變間距,輸入10,文字的間距就更大了。為了使網(wǎng)頁(yè)的字體美觀,我還設(shè)置了一些藝術(shù)字,首先選擇藝術(shù)字的種類,然后確定要寫的藝術(shù)字。就這樣藝術(shù)字的設(shè)計(jì)就完成了2.8.4 超鏈接選擇插入菜單的超鏈接的命令,在文件列表框選擇頁(yè)面1.htm文件,在U

29、RL 文本框中顯示了該文件的地址。單擊確定按鈕。超鏈接就制作成功了。我切換到預(yù)覽模式(單擊預(yù)覽按鈕,但我把鼠標(biāo)指向主頁(yè)時(shí)鼠標(biāo)變成手形,單擊它,就可以切換到主頁(yè)了。如果是鏈接的網(wǎng)頁(yè)需要對(duì)網(wǎng)頁(yè)進(jìn)行保存,這樣才在以后的打開網(wǎng)頁(yè)時(shí)信息不會(huì)丟失。FrontPage做了一個(gè)主頁(yè),里面有一些圖片,在本地一切正常,但上傳后背景、圖片就顯示卻顯示不出來(lái),經(jīng)查閱書發(fā)現(xiàn)圖片都需要保存,我又只好把所有的圖片都保存了一遍。只有這樣一個(gè)完整的網(wǎng)頁(yè)才做好了。設(shè)計(jì)的頁(yè)面,應(yīng)該檢查它在瀏覽器中是否顯示正常。方法是,一般只要切換到預(yù)覽模式就可以了。單擊預(yù)覽選項(xiàng)卡,在這個(gè)預(yù)覽模式下的顯示和在瀏覽器中的顯示是一樣的。第3章課程設(shè)計(jì)的

30、問(wèn)題與解決3.1 課程設(shè)計(jì)的問(wèn)題1、網(wǎng)站制作非常的復(fù)雜,需要了解W3C的HTML4.0規(guī)范、CSS層疊樣式表的基本知識(shí)、Java script、VBScript的基本知識(shí)。對(duì)于常用的一些腳本程序如ASP、CGI、PHP 也要有適當(dāng)了解,還要熟練使用圖形處理工具和動(dòng)畫制作工具以及矢量繪圖工具,并能部分了解多種圖形圖像動(dòng)畫工具的基本用法,所以單單靠我們平時(shí)學(xué)習(xí)的還遠(yuǎn)遠(yuǎn)不夠。還需要借鑒課外教材。2、確定網(wǎng)站色彩,網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊,不同的色彩搭配產(chǎn)生不同的效果,并可能影響到訪問(wèn)者的情緒。而且,瀏覽者在瀏覽網(wǎng)頁(yè)時(shí),留下的第一印象就是頁(yè)面的色彩設(shè)計(jì),它的好壞直接影響閱讀者的觀賞興趣。因此,色

31、彩設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中居于十分重要的地位。3、版面布局,好的布局可以讓瀏覽者非常容易地找到他想看的東西。網(wǎng)站建設(shè)初學(xué)者,最容易犯的錯(cuò)誤就是:確定題材后立刻開始制作,沒(méi)有進(jìn)行合理規(guī)劃。從而導(dǎo)致網(wǎng)站結(jié)構(gòu)不清晰,板塊編排混亂等。結(jié)果不但瀏覽者看得糊里糊涂,制作者自己在擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。所以,我們?cè)趧?dòng)手制作網(wǎng)頁(yè)前,一定要考慮好欄目和板塊的編排問(wèn)題。3.2 問(wèn)題的解決思路1、在制作網(wǎng)站之前,到圖書館借閱關(guān)于網(wǎng)站制作、網(wǎng)頁(yè)制作的相關(guān)書籍。上網(wǎng)下載相關(guān)視頻,瀏覽相關(guān)網(wǎng)頁(yè),去了解更多關(guān)于這方面的知識(shí)。做到防范與未然,與小組人共同努力,團(tuán)結(jié)互助,在遇到解決不了的問(wèn)題時(shí),多與指導(dǎo)老師請(qǐng)教。2、一般來(lái)說(shuō),一個(gè)網(wǎng)

32、站的標(biāo)準(zhǔn)色彩不超過(guò)3種,太多則讓人眼花繚亂。適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有:藍(lán)色,黃/橙色,黑/灰/白色三大系列色。3. 網(wǎng)站的題材確定后,就要將收集到的資料內(nèi)容作一個(gè)合理的編排。多去網(wǎng)上瀏覽一些優(yōu)秀的個(gè)人網(wǎng)站,學(xué)習(xí)、借鑒他們的布局和一些好的板塊。3.2 個(gè)人總結(jié)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)有一段時(shí)間了,我對(duì)網(wǎng)頁(yè)設(shè)計(jì)非常感興趣,想設(shè)計(jì)出一個(gè)美觀、實(shí)用、內(nèi)容豐富的個(gè)人網(wǎng)頁(yè)。我通過(guò)自己動(dòng)手、動(dòng)腦,通過(guò)網(wǎng)絡(luò)資源和老師的指導(dǎo),在不斷發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的過(guò)程中學(xué)到了很多知識(shí),增強(qiáng)了我的創(chuàng)作能力和動(dòng)手能力,在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中,從構(gòu)思到設(shè)計(jì)、完善、維護(hù),整個(gè)過(guò)程我都全身心投入,使我真正學(xué)到了網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)。在本次網(wǎng)頁(yè)設(shè)計(jì)中,我不僅學(xué)到了很多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)方面的只是,也從中學(xué)會(huì)了關(guān)于使用網(wǎng)頁(yè)制作軟件方面的知識(shí)。在這個(gè)過(guò)程中,我利用了已經(jīng)學(xué)過(guò)的Dreamweaver網(wǎng)頁(yè)軟件,并且學(xué)會(huì)了簡(jiǎn)單地使用Dreamweaver。做好網(wǎng)頁(yè),并不是一件容易的事,它包括個(gè)人網(wǎng)頁(yè)的選題、內(nèi)容采集整理、圖片的處理、頁(yè)面的排版設(shè)置、背景及其整套網(wǎng)頁(yè)的色調(diào)等很多