軟件項(xiàng)目化綜合實(shí)訓(xùn)教學(xué)案例下載-樣例

1、軟件項(xiàng)目化綜合實(shí)訓(xùn)教學(xué)案例下載-樣例.doc案例1：英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站雖然每個(gè)Web站點(diǎn)在內(nèi)容、規(guī)模、功能等方面都各有不同，但是有一個(gè)基本設(shè)計(jì)流程可以遵循。從國(guó)內(nèi)的大的門戶站點(diǎn)如搜狐、新浪到一個(gè)微不足道的個(gè)人主頁(yè)，都要以基本相同的步驟來(lái)完成。首先是網(wǎng)站前期策劃與內(nèi)容組織（需求分析、風(fēng)格定位、內(nèi)容組織），然后效果圖設(shè)計(jì)，網(wǎng)頁(yè)編輯，動(dòng)畫設(shè)計(jì)，接下來(lái)是技術(shù)實(shí)現(xiàn)，最后是站點(diǎn)的發(fā)布與維護(hù)。這幾個(gè)階段完整地結(jié)合在一起，直到完成整個(gè)站點(diǎn)的工作，如圖1-1所示。前期策劃內(nèi)容組織包括（需求分析、風(fēng)格定位、內(nèi)容組織）效果圖設(shè)計(jì)網(wǎng)頁(yè)編輯與動(dòng)畫設(shè)計(jì)動(dòng)態(tài)編程或代碼融合發(fā)布測(cè)試（域名空間）網(wǎng)站維護(hù)圖1-1網(wǎng)站的制作

2、流程下面我們結(jié)合企業(yè)網(wǎng)站的開發(fā)工作過(guò)程對(duì)本項(xiàng)目進(jìn)行階段分析與演示。1.1 英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站前期策劃與內(nèi)容組織1.1.4 網(wǎng)站需求分析要進(jìn)行網(wǎng)站的整體設(shè)計(jì)，用戶分析是第一步。眾所周知，進(jìn)行任務(wù)和用戶分析，以及相關(guān)調(diào)研的必要性和重要性。用戶是計(jì)算機(jī)資源、軟件界面信息的使用者，由于目前計(jì)算機(jī)系統(tǒng)以及相關(guān)的信息技術(shù)應(yīng)用范圍很廣，其用戶范圍也遍及各個(gè)領(lǐng)域。設(shè)計(jì)者必須了解各類用戶的習(xí)慣、技能、知識(shí)和經(jīng)驗(yàn)，以便預(yù)測(cè)不同類別的用戶對(duì)網(wǎng)站界面有什么不同的需求與反映，為最終的設(shè)計(jì)提供依據(jù)和參考，使設(shè)計(jì)出的網(wǎng)站更適合于各類用戶的使用。由于用戶具有知識(shí)、視聽能力、智能、記憶能力、可學(xué)習(xí)性、動(dòng)機(jī)、受訓(xùn)練程度不同

3、，以及又有些用戶有易遺忘、易出錯(cuò)等特性，使得對(duì)用戶的分類、分析和設(shè)計(jì)變得更加復(fù)雜化。另外，為了設(shè)計(jì)友好而又人性化的界面，也必須考慮各類不同類型用戶的人文因素。許多人不愿花費(fèi)時(shí)間來(lái)完成這個(gè)階段，因?yàn)檎J(rèn)為他們沒有必要，但是必須把初始計(jì)劃加入工作過(guò)程中，否則到最后當(dāng)進(jìn)行到已經(jīng)無(wú)法再做計(jì)劃的時(shí)候，就要遇到巨大的麻煩。在一開始就進(jìn)行合適的計(jì)劃和組織是建立一個(gè)有效的站點(diǎn)最重要的工作步驟。英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站旨在教學(xué)的改革創(chuàng)新、服務(wù)教學(xué)，利用網(wǎng)絡(luò)平臺(tái)構(gòu)建開放式學(xué)習(xí)方式：所有教學(xué)資源可在網(wǎng)上瀏覽和下載，任何學(xué)生在任何時(shí)候、任何地方都能借助網(wǎng)絡(luò)自主學(xué)習(xí)。英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站的功能示意圖如圖1-2所示。公

4、告與通知考試動(dòng)態(tài)考試介紹與動(dòng)態(tài)聽力訓(xùn)練考試指南模擬試題經(jīng)驗(yàn)交流單項(xiàng)訓(xùn)練模塊友情鏈接計(jì)數(shù)器試題庫(kù)英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站的功能高分突破精選匯總成績(jī)查詢考試咨詢考試論壇考試詞匯網(wǎng)站輔助模塊圖1-2英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站的功能示意圖1.1.4 風(fēng)格定位首先要了解網(wǎng)站的類型，確定一個(gè)大致的風(fēng)格走向，不同網(wǎng)站的風(fēng)格肯定是不盡相同的，營(yíng)造出各種類型的氛圍，需要對(duì)各種行業(yè)有敏感的洞察力，如果設(shè)計(jì)者還不是很熟悉這個(gè)行業(yè)，不知什么樣的風(fēng)格是適合它的，大致該用什么樣的色調(diào)和筆觸，那么花一定時(shí)間先做一些調(diào)查和學(xué)習(xí)是必要的。這樣可以保證在設(shè)計(jì)者的腦海里有一個(gè)較為確定的概念，并不一定會(huì)馬上或明顯地顯露到工作中去，但是

5、必然會(huì)對(duì)設(shè)計(jì)者的工作產(chǎn)生專業(yè)的影響。英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站是高校教育類網(wǎng)站，他的主要用戶為青年學(xué)生，同時(shí)也是信息行業(yè)的網(wǎng)站，所以主色采用藍(lán)色為主色調(diào)，因?yàn)樗{(lán)色具有清涼、自由的感覺，使人們?nèi)菀茁?lián)想到天空、海洋、科技，通過(guò)本站傳達(dá)個(gè)使用的用戶以輕松、愉快、舒適的感覺。1.1.4 規(guī)劃草圖對(duì)于一般的網(wǎng)站來(lái)說(shuō)，一個(gè)項(xiàng)目往往從一個(gè)簡(jiǎn)單的界面開始，但要把所有的東西組織到一起并不是件容易的事情。首先，要先畫一個(gè)站點(diǎn)的草圖，勾畫出所有客戶想要看到的東西。然后，將它詳細(xì)的描述交給美工人員，讓他們知道在每一屏上都要顯示那些內(nèi)容。如圖1-3所示的是本站的草圖。網(wǎng)站Logo標(biāo)志輔助導(dǎo)航模塊公告與通知考試指南模擬試題

6、版權(quán)信息課程動(dòng)畫展示考試介紹與動(dòng)態(tài)經(jīng)驗(yàn)交流閱讀訓(xùn)練聽力訓(xùn)練完型、改錯(cuò)、翻譯、簡(jiǎn)答寫作訓(xùn)練圖1-3英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)站的草圖1.1.4 規(guī)劃站點(diǎn)結(jié)構(gòu)站點(diǎn)結(jié)構(gòu)將決定如何去引導(dǎo)瀏覽者在站點(diǎn)中漫游。要結(jié)構(gòu)清晰、易于導(dǎo)航。網(wǎng)站結(jié)構(gòu)就像人的骨骼，構(gòu)筑起網(wǎng)站的整體框架，雖然表現(xiàn)形式各異，但讓人迷失終歸不好，尤其是內(nèi)容豐富的網(wǎng)站更應(yīng)注意，如何合理地組織自己要發(fā)布的信息內(nèi)容，以便瀏覽者能夠快速、準(zhǔn)確地檢索到要找的內(nèi)容，否則它就很難吸引瀏覽者。而且，這一步驟還將決定將要使用的命名規(guī)則。導(dǎo)航圖和命名規(guī)則都是建立項(xiàng)目的主干。以后所有的工作都要由此展開。網(wǎng)站的目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄。目錄的結(jié)構(gòu)是一個(gè)容易忽略的

7、問(wèn)題，大多數(shù)設(shè)計(jì)者都是未經(jīng)規(guī)劃、隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞對(duì)瀏覽者來(lái)說(shuō)并沒有什么太大的感覺，但是對(duì)于站點(diǎn)本身的上傳維護(hù)、內(nèi)容未來(lái)的擴(kuò)充和移植有著重要的影響。下面是建立目錄結(jié)構(gòu)的一些建議：l 不要將所有文件都存放在根目錄下有人為了方便，將所有文件都放在根目錄下。這樣造成的不利影響在于：首先，文件管理混亂。常常搞不清哪些文件需要編輯和更新，哪些無(wú)用的文件可以刪除，哪些是相關(guān)聯(lián)的文件，最終影響工作效率。其次，上傳速度慢。服務(wù)器一般都會(huì)為根目錄建立一個(gè)文件索引。當(dāng)所有文件都放在根目錄下，那么即使只上傳更新一個(gè)文件，服務(wù)器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時(shí)間也

8、將越長(zhǎng)。l 按欄目?jī)?nèi)容建立子目錄子目錄的建立，首先按主菜單欄目建立。例如：本站點(diǎn)可以根據(jù)模塊類別分別建立相應(yīng)的目錄，如Flash、CSS、Javascript等；企業(yè)站點(diǎn)可以按公司簡(jiǎn)介、產(chǎn)品介紹、價(jià)格、在線定單、反饋聯(lián)系等建立相應(yīng)目錄。其他的次要欄目，類似導(dǎo)航，友情鏈接內(nèi)容較多，需要經(jīng)常更新的可以建立獨(dú)立的子目錄。而一些相關(guān)性強(qiáng)、不需要經(jīng)常更新的欄目，例如：關(guān)于本站、聯(lián)系我們、站點(diǎn)導(dǎo)航等可以合并放在一個(gè)統(tǒng)一目錄下。所有程序一般都存放在特定目錄中。為了便于維護(hù)管理，所有需要下載的內(nèi)容也最好放在一個(gè)目錄下。l 在每個(gè)主目錄下都建立獨(dú)立的images目錄默認(rèn)的一個(gè)站點(diǎn)根目錄下都有一個(gè)images目錄

9、。這是最方便管理的。而根目錄下的images目錄只是用來(lái)放首頁(yè)和一些次要欄目的圖片。l 目錄的層次不要太深目錄的層次建議不要超過(guò)3層。原因很簡(jiǎn)單，維護(hù)管理方便。如圖1-4為本站的站點(diǎn)結(jié)構(gòu)圖。網(wǎng)站根目錄ImagesFlashStyleAdmin其他網(wǎng)頁(yè)圖1-4網(wǎng)站結(jié)構(gòu)圖1.2 網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作1.2.2 網(wǎng)頁(yè)的創(chuàng)意網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)具有挑戰(zhàn)意味的新設(shè)計(jì)，在網(wǎng)頁(yè)時(shí)代，也許還應(yīng)該重復(fù)。不要熱衷于技術(shù)的花樣性，而忘記優(yōu)秀設(shè)計(jì)和清晰表達(dá)的重要性，如圖1-5為網(wǎng)站創(chuàng)意圖。圖1-5網(wǎng)站創(chuàng)意圖設(shè)計(jì)效果圖效果圖制作的原則：先背景，后前景，先上后下，先左后右。本系統(tǒng)最終的效果圖如圖1-6所示。圖1-6本系統(tǒng)效

10、果圖制作軟件：Photoshop CS各種版本，本實(shí)例采用的是Photoshop CS4中文版。針對(duì)以上網(wǎng)頁(yè)的效果圖，采用前面談的效果圖制作的先背景，后前景，先上后下，先左后右的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)。本效果圖設(shè)計(jì)中用到的主要知識(shí)：n 圖像的摳取n 輔助線的應(yīng)用n 圖層樣式與圖層混合模式的應(yīng)用n 蒙版的應(yīng)用下面本圖的具體制作步驟如下：1) 打開Photoshop 軟件，新建文件命名為“英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)”，大小為：1000 *1000，背景色為“00aae2”，執(zhí)行“視圖”-“新建參考線”命令，添加4條垂直輔助線（依次為30pix，250 pix，610 pix，970 pix），添加2條水平輔

11、助線（依次為20pix，980 pix），然后使用矩形選框工具選中中間區(qū)域，將其填充為白色，如圖 1-7所示。圖1-7英語(yǔ)等級(jí)考試專題學(xué)習(xí)網(wǎng)輔助線分布2) 打開“圖標(biāo).jpg”文件，分別將三個(gè)圖標(biāo)拖放到文件的右上角，然后在每個(gè)圖標(biāo)的后面分別輸入“學(xué)院主頁(yè)、教務(wù)頻道、聯(lián)系我們”，調(diào)整位置后，如圖1-8所示。圖1-8 放入圖標(biāo)后的效果3) 打開“院標(biāo).psd”文件,將院標(biāo)拖放到文檔中去，調(diào)整其大小，然后添加“全國(guó)大學(xué)英語(yǔ)四、六級(jí)等級(jí)考試專題”和“江蘇省大學(xué)生英語(yǔ)應(yīng)用能力A、B級(jí)考試專題網(wǎng)”兩行網(wǎng)站名稱，文字大小為24pix，如圖1-9所示。圖1-9 添加院標(biāo)與文字的效果4) 選擇剛輸入的文字圖層，

12、點(diǎn)擊“圖層”面板下方的“添加涂層樣式”按鈕，文字增加效果，分別設(shè)置“投影”效果，“斜面與浮雕”效果、“漸變疊加”效果、“描邊”效果，設(shè)置如圖1-10所示，最終效果如圖1-11所示。 a) “投影”效果設(shè)置 b) “漸變疊加”效果設(shè)置 c) “斜面與浮雕”效果設(shè)置 d) “描邊”效果設(shè)置 圖1-10 添加文字圖層效果圖1-11 添加文字圖層效果后的文字5) 在“全國(guó)大學(xué)英語(yǔ)四、六級(jí)等級(jí)考試專題”和“江蘇省大學(xué)生英語(yǔ)應(yīng)用能力A、B級(jí)考試專題網(wǎng)”右方，添加文字“首頁(yè) 精選匯總 高分突破 考試咨詢 試題庫(kù)”與“考試動(dòng)態(tài) 在線聽力 成績(jī)查詢 考試指南 考試論壇”兩行文字，效果如圖1-12所示。圖1-12

13、 添加導(dǎo)航文字6) 添加新圖層，使用矩形選框工具選擇矩形，并填充顏色為“54c2e4”，然后打開素材“笑美人.jpg”圖片，將其拖入到文檔中，然后調(diào)整其大小，點(diǎn)擊“添加蒙版圖層”按鈕，對(duì)笑美人圖層添加蒙版調(diào)整后的效果，如圖 1-13所示。 a) 笑美人圖片 b) 笑美人圖層的蒙版c)添加圖層的蒙版后的效果圖1-13 添加笑美人7) 打開素材“教學(xué)樓.jpg”，使用多邊形套索工具將教學(xué)樓扣出，如圖1-14 所示。 圖1-14 扣出教學(xué)樓圖片8) 復(fù)制教學(xué)樓到文檔中，命名圖層為“教學(xué)樓”，使用快捷鍵Ctl+T調(diào)整圖層的大小，然后點(diǎn)擊“添加蒙版圖層”按鈕，對(duì)教學(xué)樓圖層添加蒙版，調(diào)整后的效果如圖1-1

14、5所示。圖1-15 填加教學(xué)樓圖片后的效果9) 用文字工具添加“改革創(chuàng)新 服務(wù)教學(xué)”文字，顏色設(shè)置為：ffffff，字體大小為30像素，字體為“方正大黑簡(jiǎn)體”（素材文件夾有，復(fù)制字體到C:WINDOWSFonts目錄即可），如圖1-16所示。圖1-16添加“改革創(chuàng)新 服務(wù)教學(xué)”文字10) 在背景層之上新建一層，命名為“虛線布局”，添加水平輔助線7條，分別為（296pix,334pix,494pix,532pix,692pix,890pix）,然后按住shift鍵，用“單行選框工具”沿著剛建立的輔助線建立選區(qū)，用“單列選框工具”沿著三條垂直的輔助線選取，然后設(shè)置前景色為“d7d7d7”，使用快捷鍵Alt+Delete進(jìn)行前景色填充，最后將中間多余的線刪除，如圖1-17所示。圖1-17添加輔助線并繪制布局線條11) 新建一層，命名為”left1”，使用“矩形選框