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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用Flash完成動畫設計317.5網(wǎng)站主頁設計37.5.2主頁制作

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

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

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

347.5網(wǎng)站主頁設計37.5.2主頁制作

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

357.5網(wǎng)站主頁設計37.5.2主頁制作

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

367.5網(wǎng)站主頁設計37.5.2主頁制作

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