網(wǎng)頁設(shè)計與開發(fā)（HTML5+CSS3） 課件 項目9 實戰(zhàn)開發(fā)-制作信息技術(shù)網(wǎng)站首頁

項目9

實戰(zhàn)開發(fā)——制作信息技術(shù)網(wǎng)站首頁項目描述前面的項目制作的網(wǎng)頁基本是靜態(tài)效果，在傳統(tǒng)網(wǎng)頁設(shè)計中，一般使用JavaScript腳本或者Flash來制作網(wǎng)頁動態(tài)特效，而CSS3提供了對動畫的強(qiáng)大支持，可以實現(xiàn)變形、過渡、動畫等效果，大大降低了制作網(wǎng)頁特效的難度。本項目利用CSS3的這些功能制作一個“旋轉(zhuǎn)的3D相冊”頁面。項目規(guī)劃在搭建網(wǎng)站之前，一般要先對整個網(wǎng)站進(jìn)行一個整體的規(guī)劃。網(wǎng)站規(guī)劃主要包括確定網(wǎng)站主題、規(guī)劃網(wǎng)站結(jié)構(gòu)、收集素材、設(shè)計效果圖。1．確定網(wǎng)站主題信息技術(shù)網(wǎng)站是一個傳播新興信息技術(shù)的平臺，用于介紹當(dāng)下流行的信息技術(shù)。網(wǎng)站以藍(lán)、白為主要色調(diào)，橙色為輔助色調(diào)，該配色適用于科技信息類網(wǎng)站。網(wǎng)站以簡潔、清晰為主要風(fēng)格。2．規(guī)劃網(wǎng)站結(jié)構(gòu)在對網(wǎng)站進(jìn)行規(guī)劃時，可在草稿上或利用畫圖工具做好網(wǎng)站的結(jié)構(gòu)設(shè)計。一個網(wǎng)站主要包含網(wǎng)頁頭部、導(dǎo)航、內(nèi)容主體部分和尾部，內(nèi)容主體部分可根據(jù)模塊再進(jìn)行細(xì)分。有了一個大概的結(jié)構(gòu)后，在編寫網(wǎng)頁結(jié)構(gòu)代碼時也會胸有成竹。項目規(guī)劃3．收集素材規(guī)劃好網(wǎng)站結(jié)構(gòu)后，就要根據(jù)網(wǎng)站主題、風(fēng)格等搜集合適的素材。素材包括文本素材和圖片素材等。文本素材可以在同行業(yè)網(wǎng)站中收集整理，也可在相關(guān)主題報刊中提取內(nèi)容并進(jìn)行加工，將其轉(zhuǎn)化為網(wǎng)站原創(chuàng)內(nèi)容。在搜集圖片素材時可根據(jù)網(wǎng)站配色風(fēng)格以及主題等搜集合適的圖片，也可在相關(guān)圖像編輯軟件中設(shè)計與整合網(wǎng)站所需的圖片素材，右圖為設(shè)計與整合后的banner（橫幅）圖。項目規(guī)劃4．設(shè)計效果圖（1）在開始制作效果圖之前，首先明確設(shè)計需求與目標(biāo)，要了解網(wǎng)站內(nèi)容的定位以及想要傳達(dá)的信息，為后續(xù)效果圖制作提供明確的指導(dǎo)方向。（2）選擇合適的工具，制作網(wǎng)頁效果圖需要合適的工具，目前常用的包括Photoshop、Sketch、Illustrator等，可根據(jù)個人喜好進(jìn)行選擇。（3）設(shè)計草圖與布局，選好工具后，就要進(jìn)行草圖與布局的設(shè)計，重點是要確定網(wǎng)站的整體風(fēng)格、色彩搭配、頁面結(jié)構(gòu)等，可以手繪，也可以使用工具繪制草圖，清晰表達(dá)自己的設(shè)計思路。（4）制作效果圖，完成草圖與布局后，就可以制作效果圖了，大概按照如下流程：確定頁面元素、制作素材、排版與布局、調(diào)整色彩搭配、調(diào)整細(xì)節(jié)。項目效果圖知識小結(jié)本項目結(jié)合本書前面項目所學(xué)的重點知識，完成了一個網(wǎng)站綜合項目——信