網(wǎng)站的設(shè)計(jì)——建立自己的主題網(wǎng)站

1、4.2 網(wǎng)站的設(shè)計(jì)高青一中 張麗麗一、了解網(wǎng)站設(shè)計(jì)的基本內(nèi)容二、依據(jù)主題，設(shè)計(jì)網(wǎng)站的欄目和版面三、通過設(shè)計(jì)主題網(wǎng)站，體驗(yàn)設(shè)計(jì)在建立網(wǎng) 站中的重要性學(xué)習(xí)目標(biāo)：學(xué)習(xí)目標(biāo)：設(shè)計(jì)制作一個(gè)網(wǎng)站，應(yīng)該從哪些方面著手？一、確定主題二、欄目設(shè)置三、版面設(shè)計(jì)四、樹立網(wǎng)站整體風(fēng)格五、收集素材網(wǎng)站實(shí)例欣賞網(wǎng)站名稱：網(wǎng)站名稱：網(wǎng)站主題：網(wǎng)站主題：展示、推廣學(xué)生文學(xué)原創(chuàng)作品，給華語(yǔ)文學(xué)愛好者提供交流的平臺(tái)欄目設(shè)置欄目設(shè)置 欄目設(shè)置需注意：欄目設(shè)置需注意：（1 1）要緊扣主題，盡可能刪除與主題無(wú)關(guān)的欄目）要緊扣主題，盡可能刪除與主題無(wú)關(guān)的欄目（2 2）盡可能將網(wǎng)站最有吸引力的內(nèi)容列在欄目上）盡可能將網(wǎng)站最有吸引力的內(nèi)容列

2、在欄目上（3 3）盡可能方便訪問者的瀏覽和查詢。如：設(shè)置）盡可能方便訪問者的瀏覽和查詢。如：設(shè)置“本站指本站指南南”或或“網(wǎng)站地圖網(wǎng)站地圖”欄目可以幫助初訪者快速找到他們想欄目可以幫助初訪者快速找到他們想要的內(nèi)容要的內(nèi)容一、欄目設(shè)置一、欄目設(shè)置網(wǎng)站名稱網(wǎng)站名稱欄目名稱欄目名稱內(nèi)容描述內(nèi)容描述非常不一班非常不一班班級(jí)介紹班級(jí)介紹簡(jiǎn)介班級(jí)情況簡(jiǎn)介班級(jí)情況班級(jí)故事班級(jí)故事介紹班級(jí)的好人好事介紹班級(jí)的好人好事校園圖書館校園圖書館介紹學(xué)校的圖書館介紹學(xué)校的圖書館李明的博客李明的博客介紹李明的個(gè)人博客介紹李明的個(gè)人博客班級(jí)人物班級(jí)人物介紹班級(jí)的優(yōu)秀學(xué)生介紹班級(jí)的優(yōu)秀學(xué)生站點(diǎn)內(nèi)服務(wù)站點(diǎn)內(nèi)服務(wù)給瀏覽者留出發(fā)表

3、意見的給瀏覽者留出發(fā)表意見的空間空間思考：下面是一個(gè)班級(jí)主頁(yè)的欄目設(shè)置，哪些地方設(shè)計(jì)不合理？還可以為這個(gè)班級(jí)主頁(yè)添加一些欄目嗎？一、欄目設(shè)置一、欄目設(shè)置 任務(wù)一：分組確定網(wǎng)站主題，并圍繞主題設(shè)計(jì)網(wǎng)站的欄目 小組中的每位同學(xué)經(jīng)過討論、交流，填寫以下內(nèi)容 網(wǎng)站主題：網(wǎng)站名稱：網(wǎng)站欄目名稱 本欄目主要內(nèi)容一、欄目設(shè)置一、欄目設(shè)置常見樣式特點(diǎn)布局形式“廠”字型頁(yè)面頂部為主菜單以及橫頁(yè)面頂部為主菜單以及橫條網(wǎng)站標(biāo)志條網(wǎng)站標(biāo)志+ +廣告條，下方廣告條，下方左面為主菜單，右面顯示左面為主菜單，右面顯示內(nèi)容的布局內(nèi)容的布局 優(yōu)點(diǎn)：頁(yè)面結(jié)構(gòu)清晰，優(yōu)點(diǎn)：頁(yè)面結(jié)構(gòu)清晰， 主次分明；主次分明； 缺點(diǎn)：呆板，如果細(xì)節(jié)缺

4、點(diǎn)：呆板，如果細(xì)節(jié)色彩上不注意，容易色彩上不注意，容易“看看之無(wú)味之無(wú)味”參考示例參考示例主菜單以及橫條網(wǎng)站標(biāo)志主菜單以及橫條網(wǎng)站標(biāo)志+廣告條廣告條主要內(nèi)容主菜單二、版面設(shè)計(jì)二、版面設(shè)計(jì)常見樣式特點(diǎn)布局形式“口口”字型字型頁(yè)面一般上下放主菜單和頁(yè)面一般上下放主菜單和廣告條，左面是主菜單，廣告條，左面是主菜單，右面放友情鏈接等，中間右面放友情鏈接等，中間是主要內(nèi)容是主要內(nèi)容 優(yōu)點(diǎn)：充分利用版面，信息量?jī)?yōu)點(diǎn)：充分利用版面，信息量大，與其他頁(yè)面的鏈接多，切大，與其他頁(yè)面的鏈接多，切換方便；換方便； 缺點(diǎn)：頁(yè)面擁擠，不夠靈活缺點(diǎn)：頁(yè)面擁擠，不夠靈活主菜單主菜單和廣告條主要內(nèi)容友情鏈接等參考示例參考示例二、版面設(shè)計(jì)二、版面設(shè)計(jì)常見樣式特點(diǎn)布局形式自由式：自由式：又稱又稱POPPOP布局，頁(yè)面布局像布局，頁(yè)面布局像一張宣傳海報(bào)，以一張精美一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心，圖片作為頁(yè)面的設(shè)計(jì)中心，菜單欄目自由擺放菜單欄目自由擺放優(yōu)點(diǎn)：漂亮、吸引人，適優(yōu)點(diǎn)：漂亮、吸引人，適宜于藝術(shù)類網(wǎng)站宜于藝術(shù)類網(wǎng)站缺點(diǎn)：顯示速度慢，文字缺點(diǎn)：顯示速度慢，文字信息量少信息量少自由式自由式 參考示例參考示例二、版面設(shè)計(jì)二、版面設(shè)計(jì)二、版面設(shè)計(jì)二、版面設(shè)計(jì)標(biāo)題欄（網(wǎng)站標(biāo)志及廣告條）標(biāo)題欄（網(wǎng)站標(biāo)志及廣告條）欄目設(shè)置欄目設(shè)置內(nèi)容設(shè)置內(nèi)容設(shè)置小結(jié)小結(jié)一、欄目設(shè)置一、欄目設(shè)