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

1、4.2 網(wǎng)站的設(shè)計高青一中 張麗麗一、了解網(wǎng)站設(shè)計的基本內(nèi)容二、依據(jù)主題，設(shè)計網(wǎng)站的欄目和版面三、通過設(shè)計主題網(wǎng)站，體驗設(shè)計在建立網(wǎng) 站中的重要性學(xué)習(xí)目標：學(xué)習(xí)目標：設(shè)計制作一個網(wǎng)站，應(yīng)該從哪些方面著手？一、確定主題二、欄目設(shè)置三、版面設(shè)計四、樹立網(wǎng)站整體風(fēng)格五、收集素材網(wǎng)站實例欣賞網(wǎng)站名稱：網(wǎng)站名稱：網(wǎng)站主題：網(wǎng)站主題：展示、推廣學(xué)生文學(xué)原創(chuàng)作品，給華語文學(xué)愛好者提供交流的平臺欄目設(shè)置欄目設(shè)置 欄目設(shè)置需注意：欄目設(shè)置需注意：（1 1）要緊扣主題，盡可能刪除與主題無關(guān)的欄目）要緊扣主題，盡可能刪除與主題無關(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)容描述非常不一班非常不一班班級介紹班級介紹簡介班級情況簡介班級情況班級故事班級故事介紹班級的好人好事介紹班級的好人好事校園圖書館校園圖書館介紹學(xué)校的圖書館介紹學(xué)校的圖書館李明的博客李明的博客介紹李明的個人博客介紹李明的個人博客班級人物班級人物介紹班級的優(yōu)秀學(xué)生介紹班級的優(yōu)秀學(xué)生站點內(nèi)服務(wù)站點內(nèi)服務(wù)給瀏覽者留出發(fā)表

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

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