濱海學(xué)院WEB編程基礎(chǔ)設(shè)計(jì)課程PAGE1-WEB編程基礎(chǔ)網(wǎng)站開(kāi)發(fā)設(shè)計(jì)說(shuō)明書(shū)設(shè)計(jì)題目：攝影網(wǎng)站 姓名：李家東學(xué)號(hào)：20101080114班級(jí)：10微高指導(dǎo)教師：畢老師完成日期：2011-12-12目錄前言 -2-一、網(wǎng)站的規(guī)劃 -2-1.1網(wǎng)站的整體規(guī)劃 -2-1.1.1網(wǎng)站定位 -2-1.1.2網(wǎng)站版塊的設(shè)置 -3-1.1.3網(wǎng)站設(shè)計(jì)的相關(guān)技術(shù) -3-1.2網(wǎng)站的功能設(shè)計(jì) -3-1.2.1首頁(yè)功能 -3-1.2.2副頁(yè)功能 -3-二、網(wǎng)站的設(shè)計(jì)與制作 -4-2.1首頁(yè)布局設(shè)計(jì)的特點(diǎn) -4-2.1.1logo設(shè)計(jì) -5-2.1.2Banner的設(shè)計(jì) -5-2.1.3導(dǎo)航的設(shè)計(jì) -6-2.1.4欄目設(shè)計(jì) -6-2.1.5風(fēng)格與色彩單配 -8-2.2副頁(yè)布局設(shè)計(jì)特點(diǎn) -8-三、創(chuàng)新亮點(diǎn) -9-3.1按鈕點(diǎn)擊圖片的輪換 -9-3.2圖片的自動(dòng)輪換 -10-四、總結(jié) -11-內(nèi)容。4：可以方便瀏覽者及時(shí)快捷的與我們公司取得聯(lián)系，可以通過(guò)多種聯(lián)系方式。二、網(wǎng)站的設(shè)計(jì)與制作 2.1首頁(yè)布局設(shè)計(jì)的特點(diǎn)1：首頁(yè)主要采用“T”字型的布局每個(gè)版塊有序排放，將所有的版塊清晰的羅列出來(lái)。2：采用“T”字型可以解決了瀏覽者觀看是產(chǎn)生視覺(jué)上的疲勞，并且有種賞心悅目的感覺(jué)。2-1網(wǎng)站首頁(yè)布局圖注冊(cè)登陸公司的名稱首頁(yè)作品賞影棚實(shí)景影樓簡(jiǎn)介聯(lián)系我們Vip會(huì)員專區(qū)客戶評(píng)價(jià)流動(dòng)歡迎詞（您好！歡迎來(lái)到瞬間beautiful）搜索相關(guān)的內(nèi)容搜索引擎我們展示的照片欣賞按鈕輪換照片最新動(dòng)態(tài)Vip會(huì)員在專區(qū)優(yōu)秀作品展示最新動(dòng)態(tài)套餐介紹友情鏈接2.1.1logo設(shè)計(jì)我們公司的logo是英語(yǔ)單詞beautiful，也許會(huì)有人對(duì)我們不理解，我們之所以將它作為logo，就是象征現(xiàn)在我們的年輕，我們的魅力，我們是有追求的。2.1.2Banner的設(shè)計(jì)網(wǎng)站的banner采用黑色的背景，渲染了我們攝影社的神秘，給瀏覽者留下深刻的印象，更加吸引了瀏覽者對(duì)我們網(wǎng)站的興趣，我們公司的設(shè)計(jì)是公司名與logo相結(jié)合在一起，象征著我們公司的有挑戰(zhàn)新事物的追求，然后緊跟著的使我們的公司攝影口號(hào)，只有瞬間才會(huì)給你們想要的。2.1.3導(dǎo)航的設(shè)計(jì) 導(dǎo)航設(shè)計(jì)上采用七個(gè)長(zhǎng)方塊，利用無(wú)序排列的方式，展示了我們服務(wù)項(xiàng)目，向?yàn)g覽者介紹我們公司的大體情況。設(shè)計(jì)的代碼：Div：css：2.1.4欄目設(shè)計(jì) 我們公司的欄目設(shè)計(jì)主要包括六個(gè)模塊，主要有最新動(dòng)態(tài)、vip會(huì)員專區(qū)、最新動(dòng)態(tài)、優(yōu)秀作品、套餐介紹、圖片欣賞，還有一些小的欄目框等。下面為設(shè)計(jì)表現(xiàn)圖：圖2-1-4（1）圖2-1-4（2）設(shè)計(jì)欄目的設(shè)計(jì)，充分展示我們公司的主要情況，給瀏覽者一種大氣的風(fēng)范，一目了然，簡(jiǎn)單易懂感覺(jué)，有一種想欣賞的感受，充分體現(xiàn)了一種美的享受等。2.1.5風(fēng)格與色彩單配我們公司網(wǎng)站首頁(yè)以灰色為背景顏色，這樣顯得公司深沉穩(wěn)重，腳踏實(shí)地。然后又將一些青春活力的照片加入其中，顯現(xiàn)我們公司的朝氣蓬勃，積極進(jìn)取的創(chuàng)新的精神。2.2副頁(yè)布局設(shè)計(jì)特點(diǎn)1：副頁(yè)采用了簡(jiǎn)單框架的布局方式，向?yàn)g覽者簡(jiǎn)單大方的展示了我們網(wǎng)站的情況。2：版塊有條理性，看起來(lái)很輕松，賞心悅目。3：更加有力的向?yàn)g覽者尋找到自己想要的信息。2-2網(wǎng)站的副頁(yè)布局圖副頁(yè)的名稱攝影的賞析影圖欣賞關(guān)于一些攝影攝影套餐的報(bào)價(jià)介紹聯(lián)系方式友情鏈接副頁(yè)向?yàn)g覽者展示我們網(wǎng)站的首頁(yè)內(nèi)容的詳細(xì)情況，讓瀏覽者更加具體的了解我們公司的情況，同時(shí)讓我們公司的網(wǎng)站更加的完善化，整體化。三、創(chuàng)新亮點(diǎn)3.1按鈕點(diǎn)擊圖片的輪換Div：輪換圖片通過(guò)圖片的輪換更加襯托了我們網(wǎng)站的技術(shù)強(qiáng)大，通過(guò)技術(shù)手段更加證明我們的實(shí)力是不可戰(zhàn)勝的，讓更多的廣大顧客朋友認(rèn)同我們公司的強(qiáng)大，能夠更加的信任我們，只有我們才能給他們帶來(lái)自己需求的東西。3.2圖片的自動(dòng)輪換Js+div：自動(dòng)圖片輪換四、總結(jié)通過(guò)這個(gè)學(xué)期的學(xué)習(xí)，我學(xué)會(huì)了制作網(wǎng)頁(yè)，而且知道了知識(shí)的重要性。網(wǎng)站設(shè)計(jì)是一種非常難做但是又非常有意思的工作，我們可以任意發(fā)揮我們的創(chuàng)意，讓我們飛翔在自由創(chuàng)意的國(guó)度里，但做網(wǎng)頁(yè)也要謹(jǐn)慎小心，要一絲不茍。在這次網(wǎng)站制作中讓我對(duì)Dreamweaver、Fireworks、Flash進(jìn)一步了解，還懂得了許多的知識(shí)。盡管如此，但是我的網(wǎng)頁(yè)還存在著一些問(wèn)題，如顏色的搭配不是很好，框架的結(jié)構(gòu)，可能還有其他一些我沒(méi)有發(fā)現(xiàn)的問(wèn)題，這些問(wèn)題都是需要注意的，我相信通過(guò)學(xué)習(xí)與老師的悉心教導(dǎo)，下一次的網(wǎng)頁(yè)我將會(huì)做得更好。不足之處，希望老師指導(dǎo)與批評(píng)。信息工程學(xué)院《WEB編程基礎(chǔ)》實(shí)踐環(huán)節(jié)考核報(bào)告單2011-2012學(xué)年度第一學(xué)期期末排課編號(hào)：(2011-2012-1)-0501301-01050-1批閱日期：2011年12月17日姓名李家東班級(jí)10微高學(xué)號(hào)20101080114評(píng)分標(biāo)準(zhǔn)及得分評(píng)分標(biāo)準(zhǔn)滿分得分簡(jiǎn)介：概況清晰，目標(biāo)明確。5總體需求明確，結(jié)合實(shí)際，分析詳細(xì)具體全面。10網(wǎng)站架構(gòu)合理，有結(jié)構(gòu)圖。5網(wǎng)站效果圖設(shè)計(jì)符合主流審美觀點(diǎn)，色彩搭配合理。10網(wǎng)站風(fēng)格一致，運(yùn)用模板生成相關(guān)頁(yè)面。5項(xiàng)目開(kāi)發(fā)符合Web網(wǎng)站開(kāi)發(fā)標(biāo)準(zhǔn)，表現(xiàn)與內(nèi)容分離。10導(dǎo)航鏈接準(zhǔn)確，頁(yè)面切換簡(jiǎn)潔流暢。5編碼規(guī)范，可讀性強(qiáng)。5網(wǎng)站目錄結(jié)構(gòu)