某職業(yè)技術(shù)學(xué)院校園網(wǎng)站

某職業(yè)技術(shù)學(xué)院校園網(wǎng)站7.1網(wǎng)頁效果圖3本效果圖為FireworksCS3主頁效果圖27.1網(wǎng)頁效果圖3本效果圖為FireworksCS3設(shè)計(jì)與制作。子頁效果圖37.2客戶需求3在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。47.2客戶需求3要建立一個(gè)學(xué)校網(wǎng)站，應(yīng)該需要實(shí)現(xiàn)那些需求呢？1．學(xué)校網(wǎng)站是學(xué)校的“商標(biāo)”，每一所學(xué)校都有自己的特色，每一所學(xué)校都有自己的個(gè)性。在這個(gè)高度信息化的社會(huì)里，建立自己學(xué)校網(wǎng)站是最直接的宣傳手段。網(wǎng)站的超時(shí)空特性，不僅能讓地區(qū)內(nèi)的人們了解學(xué)校，更可讓世界各地的人們了解學(xué)校。憑借學(xué)校網(wǎng)站，有效的提高學(xué)校知名度和聲望，提升教學(xué)層次。2．學(xué)校網(wǎng)站也是實(shí)現(xiàn)教育資源分配的橋梁。網(wǎng)絡(luò)有巨大的教育資源庫，它集全社會(huì)的力量，使教育資源無限增長(zhǎng)。這對(duì)于發(fā)達(dá)地區(qū)和欠發(fā)達(dá)地區(qū)，高投入學(xué)校和條件差的學(xué)校在獲取教育資源的權(quán)力上達(dá)成平等，使每一位教師和學(xué)生都能均等的得到培訓(xùn)和受教育的機(jī)會(huì)，不再受到學(xué)校水平、教材、教師能力的限制。學(xué)校網(wǎng)站作為一個(gè)大的資源庫既極大的提了高教學(xué)效率又實(shí)現(xiàn)公平教育的目的。57.2客戶需求33．學(xué)校網(wǎng)站要能提供教學(xué)互動(dòng)的全新方式。學(xué)校網(wǎng)站使得教師與教師、教師與學(xué)生、學(xué)生與學(xué)生之間的交流有了全新的方式，它不再受到傳統(tǒng)課堂的制約。它可以使廣州與北京、城市與鄉(xiāng)村的學(xué)校同處一室，共同討論，共同共享。地理上的界限在這里模糊和消失了，學(xué)校網(wǎng)站是真正沒有圍墻的學(xué)校。4．學(xué)校網(wǎng)站還要能夠提供個(gè)性化學(xué)習(xí)的平臺(tái)，不同的學(xué)生理解世界的方式各不相同，認(rèn)知世界有諸多方式。網(wǎng)絡(luò)提供的豐富資源可以使學(xué)生尋覓不同的教育方式，各取所需。學(xué)校網(wǎng)站允許不同的學(xué)生沿著自己的途徑，按自己的速度接受教育與學(xué)習(xí)，學(xué)生將有機(jī)會(huì)享受最佳的教育機(jī)會(huì)，充分發(fā)掘自己的內(nèi)在潛力，培植獨(dú)特的個(gè)性和人格。67.2客戶需求3長(zhǎng)春職業(yè)技術(shù)學(xué)院校園網(wǎng)站屬于非營利性的教育類網(wǎng)站。通過以上多角度分析，作為高等院校網(wǎng)站，它擔(dān)負(fù)著宣傳學(xué)校風(fēng)采展示學(xué)校特色的重任，同時(shí)還要滿足校內(nèi)教學(xué)、科研以及完成校內(nèi)校務(wù)實(shí)現(xiàn)網(wǎng)絡(luò)辦公的要求。77.3頁面風(fēng)格定位31、顏色風(fēng)格：營造出各種類型網(wǎng)站的整體氣氛，包括標(biāo)志，色彩，字體，標(biāo)語等色彩，勾勒出網(wǎng)站的整體視覺效果。2、布局風(fēng)格：規(guī)劃出頁面的各種功能區(qū)域，

布局通常有左右、上下、居中等幾個(gè)主要形式，細(xì)分還有“廠”字型、“品”字型、“田”字型等等。3、內(nèi)容結(jié)構(gòu)風(fēng)格：是網(wǎng)站的信息支撐，是控制網(wǎng)站風(fēng)格方向的根基，是風(fēng)格個(gè)性化的主導(dǎo)因素。4、語言風(fēng)格：要注意不同的語言字符對(duì)網(wǎng)站的影響亦不盡相同。如英文字符較為精簡(jiǎn)，適宜做小巧精致類型的網(wǎng)站，中文字符雅致繁復(fù)，較適宜做端莊嚴(yán)肅類型的網(wǎng)站。87.3頁面風(fēng)格定位3“校園網(wǎng)站”在設(shè)計(jì)上根據(jù)客戶需求，其風(fēng)格設(shè)計(jì)主要體現(xiàn)在以下：確保形成統(tǒng)一整體和界面風(fēng)格。網(wǎng)頁上所有的圖像、文字，包括背景顏色、區(qū)分線、字體、標(biāo)題、注腳等形成統(tǒng)一的整體。確保網(wǎng)頁界面的清晰、簡(jiǎn)潔、美觀。這會(huì)產(chǎn)生更大的易用性。確保視覺元素的合理安排，讓瀏覽者體驗(yàn)到視覺的秩序感、節(jié)奏感、新奇感。具體表現(xiàn)在：1、顏色風(fēng)格：本網(wǎng)站主色調(diào)采用了藍(lán)色和白色。頁面中的文字、鏈接、欄目等主要以藍(lán)色進(jìn)行設(shè)計(jì)。2、布局風(fēng)格：主頁和子頁面中采用了上。下布局模式3、內(nèi)容結(jié)構(gòu)風(fēng)格：高等院校的校園網(wǎng)站信息量較大，信息主要由圖片和文字兩大要素構(gòu)成。因此在主頁設(shè)置的欄目相對(duì)較多、信息量較大。4、語言風(fēng)格：由于本網(wǎng)站是國內(nèi)教育類網(wǎng)站，語言采用中文版。97.4網(wǎng)站建設(shè)方案3從接到客戶的業(yè)務(wù)咨詢開始，經(jīng)過雙方不斷的接洽和了解，并通過基本的可行性討論，初步達(dá)成制作協(xié)議，就需要將項(xiàng)目立項(xiàng)，一般需要給客戶一個(gè)網(wǎng)站建設(shè)方案。通過網(wǎng)站建設(shè)方案制訂項(xiàng)目的所有細(xì)節(jié)，這樣對(duì)雙方都有益處。107.4網(wǎng)站建設(shè)方案3網(wǎng)站建設(shè)方案包括以下幾個(gè)部分：客戶情況分析；網(wǎng)站需要實(shí)現(xiàn)的目的和目標(biāo)；網(wǎng)站形象說明；網(wǎng)站的欄目板塊和結(jié)構(gòu)；網(wǎng)站內(nèi)容的安排，相互鏈接關(guān)系；使用軟件、硬件和技術(shù)分析說明；開發(fā)時(shí)間進(jìn)度表；宣傳推廣方案；維護(hù)方案；制作費(fèi)用；本公司簡(jiǎn)介：成功作品，技術(shù)，人才說明等。117.4網(wǎng)站建設(shè)方案3“長(zhǎng)春職業(yè)技術(shù)學(xué)院校園網(wǎng)站”在完成前期工作后，建設(shè)方案主要內(nèi)容包括以下幾點(diǎn)：（1）網(wǎng)站建設(shè)費(fèi)用預(yù)算。（2）確定付款方式及開發(fā)人員。①簽定合同的同時(shí)先付預(yù)付金，網(wǎng)站設(shè)計(jì)完成并認(rèn)可后，付清余款。②合理安排項(xiàng)目開發(fā)人員。（3）制訂開發(fā)時(shí)間表：開發(fā)周期*若干個(gè)工作日（4）網(wǎng)站維護(hù)及培訓(xùn)。①網(wǎng)站維護(hù)：每年網(wǎng)站維護(hù)更新的標(biāo)準(zhǔn)及內(nèi)容。②培訓(xùn)：網(wǎng)站運(yùn)行時(shí)的技術(shù)、美術(shù)、內(nèi)容維護(hù)(服務(wù))；根據(jù)網(wǎng)站規(guī)模培訓(xùn)幾名網(wǎng)站維護(hù)和日常操作人員；網(wǎng)站擴(kuò)展建設(shè)。通過與用戶的多次協(xié)商后，為了保證項(xiàng)目的質(zhì)量并順利實(shí)施，通過合同的方式把所有細(xì)節(jié)以書面的方式定義下來，明確雙方的責(zé)任與權(quán)利，為項(xiàng)目的開發(fā)、維護(hù)、管理提供法律等方面的保證。127.5網(wǎng)站主頁設(shè)計(jì)3網(wǎng)站主頁即首頁，擔(dān)負(fù)著網(wǎng)站“形象大使”的任務(wù)，從首頁就可以窺探出網(wǎng)站的定位和服務(wù)對(duì)象，由于網(wǎng)站功能定位的不同，不同類型網(wǎng)站首頁的表現(xiàn)形式也各有千秋，也就是說首頁功能、表達(dá)形式、傳遞信息內(nèi)容、設(shè)計(jì)風(fēng)格、頁面布局等要合理清晰。校園網(wǎng)站作為學(xué)校辦公，師生交流，資源共享的網(wǎng)絡(luò)平臺(tái)，它的作用不僅要實(shí)現(xiàn)其網(wǎng)站的功能，還要實(shí)現(xiàn)友好的界面設(shè)計(jì)。網(wǎng)頁效果圖設(shè)計(jì)主頁制作開發(fā)流程137.5網(wǎng)站主頁設(shè)計(jì)37.5.1效果圖設(shè)計(jì)147.5網(wǎng)站主頁設(shè)計(jì)37.5.1效果圖設(shè)計(jì)1.設(shè)計(jì)要領(lǐng)利用FireworksCS3軟件來完成圖1-4所示頁面效果圖的設(shè)計(jì)主要把握下面3個(gè)要點(diǎn)。（1）色彩設(shè)計(jì)：本頁面為“長(zhǎng)春職業(yè)技術(shù)學(xué)院校園網(wǎng)站”的主頁面，在頁面設(shè)計(jì)上本頁面采用了藍(lán)色和白色搭配的方式，突出學(xué)術(shù)氛圍，頁面的Logo采用動(dòng)畫效果，突出網(wǎng)站充滿活力。（2）圖片設(shè)計(jì)：本頁面以不同線條幾小圖案的配合展示欄目，具有清晰明了的效果。（3）布局設(shè)計(jì)：本頁面采用了典型的頁面布局模式，頁面布局為上中下結(jié)構(gòu)，分別為L(zhǎng)OGO站標(biāo)、導(dǎo)航、網(wǎng)站欄目等內(nèi)容。157.5網(wǎng)站主頁設(shè)計(jì)37.5.1效果圖設(shè)計(jì)2.技術(shù)要點(diǎn)1）在效果圖的制作過程中，主要利用矢量工具箱中的工具進(jìn)行圖形的繪制、組合。2）利用變形工具，對(duì)所繪制的圖形進(jìn)行任意變形操作。3）利用顏料桶工具，對(duì)對(duì)象填充顏色。167.5網(wǎng)站主頁設(shè)計(jì)37.5.1效果圖設(shè)計(jì)3.任務(wù)實(shí)施對(duì)于網(wǎng)站來說，頁面設(shè)計(jì)的吸引力是很重要的，在頁面的制作上寬度多采用百分比模式，背景圖是可以自由伸展的，因此重點(diǎn)是要做好效果圖的內(nèi)容區(qū)域，下面詳細(xì)說明制作過程。(1)設(shè)置網(wǎng)頁區(qū)域?qū)挾葹?75*830px。(2)在頂部區(qū)域繪制Banner區(qū)域?yàn)?75*150px。(3)在Banner區(qū)域下邊繪制導(dǎo)航區(qū)域?yàn)?75*35px。(4)在導(dǎo)航區(qū)域下面繪制一條分割區(qū)域?yàn)?75*15px。(5)在分割區(qū)域下邊繪制各個(gè)欄目?jī)?nèi)容所在的區(qū)域?yàn)?75*630px。177.5網(wǎng)站主頁設(shè)計(jì)37.5.1效果圖設(shè)計(jì)187.5網(wǎng)站主頁設(shè)計(jì)37.5.1效果圖設(shè)計(jì)197.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

主頁制作頁面整合效果圖切片動(dòng)畫設(shè)計(jì)主頁開發(fā)流程圖207.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

1.設(shè)計(jì)要領(lǐng)從效果圖中利用切片的方式提取網(wǎng)頁制作中所需的文字或圖片素材。切片如圖用Fireworks完成效果圖切片217.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

2.技術(shù)要點(diǎn)在Fireworks中設(shè)計(jì)好的效果圖，要進(jìn)行切片和優(yōu)化，然后在XTHML中進(jìn)行布局，這是網(wǎng)頁設(shè)計(jì)與制作的一般流程，導(dǎo)出效果圖的步驟一般由切片、優(yōu)化、導(dǎo)出組成。一般背景由背景色與背景圖片組成，在實(shí)際使用中一般包括三種情況。1、網(wǎng)頁的背景僅有背景色，這樣情況下背景不需要作切片，只要在XHTML進(jìn)行整合時(shí)對(duì)body標(biāo)簽的背景色進(jìn)行設(shè)置就可以。2、網(wǎng)頁僅有背景圖片，這樣情況下要以圖片的效果為出發(fā)點(diǎn)，當(dāng)背景圖較大的情況下，可以采取對(duì)于切片中的大圖片分割成多個(gè)小圖片的方法。如果背景圖片有一定規(guī)律可尋的話，可通過CSS對(duì)小圖片進(jìn)行重復(fù)來完成背景圖片的重組。3、當(dāng)背景圖包含背景色和背景圖片時(shí)，背景色不用作切片，背景圖切片的規(guī)律同第二種情況。注：切片的目的是獲取圖像素材，要合理進(jìn)行選擇。

用Fireworks完成效果圖切片227.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

3.任務(wù)實(shí)施（1）選擇“切片”工具，如圖所示。按照上圖中的切片規(guī)劃，在背景中繪制出切片區(qū)域。用Fireworks完成效果圖切片237.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

（2）從“窗口”菜單中打開“優(yōu)化”面板，如圖所示?？梢愿鶕?jù)需要選擇合適的圖片格式進(jìn)行優(yōu)化。用Fireworks完成效果圖切片247.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

（3）選擇菜單“文件”|“導(dǎo)出”，打開“導(dǎo)出”窗口，設(shè)置“文件名”及“導(dǎo)出”選項(xiàng)如圖所示。單擊“保存”按鈕，完成背景圖片的切片。用Fireworks完成效果圖切片257.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

1.設(shè)計(jì)要領(lǐng)在Banner區(qū)域主要完成動(dòng)畫的制作，利用動(dòng)態(tài)效果，增強(qiáng)網(wǎng)站的活力與吸引力。2.技術(shù)要點(diǎn)（1）各種Flash元件的創(chuàng)建。（2）Flash各種面板的使用。（3）常用動(dòng)畫效果的運(yùn)用。用Flash完成動(dòng)畫設(shè)計(jì)267.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

3.任務(wù)實(shí)施（1）創(chuàng)建影片文檔執(zhí)行【文件】|【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文件（ActionScript3.0）】選項(xiàng)后，點(diǎn)擊【確定】按鈕，新建一個(gè)影片文檔，在【屬性】面板上設(shè)置文件大小為775*150象素，【背景色】為白色。用Flash完成動(dòng)畫設(shè)計(jì)277.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

（2）設(shè)置背景圖層動(dòng)畫效果將“圖層1”重命名為“背景圖層”。執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到舞臺(tái)】命令，將“模糊背景.jpg”導(dǎo)入到舞臺(tái)中。用鼠標(biāo)選中該圖片，將屬性面板中的寬和高設(shè)置成與舞臺(tái)寬和高相同，即寬775像素，高150像素。調(diào)整圖片位置讓其邊緣與舞臺(tái)邊緣重合。用Flash完成動(dòng)畫設(shè)計(jì)287.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

選中該圖片，按F8鍵，將該圖片轉(zhuǎn)換為圖形元件并命名為“模糊背景”如圖所示。用Flash完成動(dòng)畫設(shè)計(jì)297.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

在該圖層的第6、24幀處按F6鍵，加入關(guān)鍵幀，在該層的第90幀按F5鍵插入普通幀，然后選中第5幀，單擊鼠標(biāo)右鍵執(zhí)行插入空白關(guān)鍵幀命名，讓時(shí)間軸播放到該幀時(shí)沒有內(nèi)容。單擊選中該層第6幀，設(shè)置“屬性”面板的“動(dòng)畫”為“補(bǔ)間”，然后在單擊第6幀中的圖形元件，在屬性面板中設(shè)置該元件的屬性中的“顏色”的“Alpha”值為“0%”。用Flash完成動(dòng)畫設(shè)計(jì)307.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

用Flash完成動(dòng)畫設(shè)計(jì)317.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

單擊“文字”圖層名稱，然后單擊插入圖層按鈕，插入一個(gè)圖層，這個(gè)圖層位于“文字”圖層上方。將該層命名為“遮罩”圖層。在該圖層的第24幀處按F6鍵，加入關(guān)鍵幀，選擇工具欄中的橢圓工具，在舞臺(tái)上畫一個(gè)實(shí)心圓，圓的寬、高均為80。選擇橢圓將之轉(zhuǎn)化為圖形元件。然后在該層的第34、35、39、48、90幀處按F6鍵，加入關(guān)鍵幀。調(diào)整各幀位置以及大小關(guān)系。用Flash完成動(dòng)畫設(shè)計(jì)327.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

在第90幀處將該圓形的寬設(shè)置為1076，高設(shè)置為200，然后將文字及圖片覆蓋住。分別選中該層的第24、35、39、48幀，將屬性面板中的“動(dòng)畫”設(shè)置為“補(bǔ)間”。將該層設(shè)置為“遮罩層”。最終的時(shí)間軸如圖所示。（5）動(dòng)畫完成后將該動(dòng)畫生成.swf格式的文件以便在網(wǎng)頁中引用。用Flash完成動(dòng)畫設(shè)計(jì)337.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

1.設(shè)計(jì)要領(lǐng)已經(jīng)將背景圖以網(wǎng)頁的形式整體導(dǎo)出，那么網(wǎng)頁的布局就變得容易。2.技術(shù)要點(diǎn)打開導(dǎo)出的網(wǎng)頁，使用Table進(jìn)行布局及文本的編排。7.5.2.3用Dreamweaver完成XHTML的頁面整合

347.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

3.任務(wù)實(shí)施（1）建立站點(diǎn)：1）打開Dreamweaver軟件，在菜單欄中選擇“站點(diǎn)”中的“新建站點(diǎn)”，設(shè)置“站點(diǎn)名稱”為“web”，本地根文件夾為“D:\web”，然后單擊“確定”按鈕。7.5.2.3用Dreamweaver完成XHTML的頁面整合

357.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

2）在“文件”面板中如圖所示，對(duì)web站點(diǎn)通過右鍵點(diǎn)擊index.html將該頁設(shè)置為網(wǎng)站的主頁，文件夾images存放圖像，文件夾files存放子頁，文件夾Scripts存放樣式表。7.5.2.3用Dreamweaver完成XHTML的頁面整合

367.5網(wǎng)站主頁設(shè)計(jì)37.5.2主頁制作

（2）制作index.html頁面1）打開index.html頁面，此時(shí)該頁面內(nèi)容由在Fireworks的切片構(gòu)成，且各個(gè)切片