閆華華-網(wǎng)頁設(shè)計實踐設(shè)計

《閆華華-網(wǎng)頁設(shè)計實踐設(shè)計》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、網(wǎng)頁設(shè)計（含html,三劍客）設(shè)計說明書姓名：閆華華班級：11電商1班指導(dǎo)教師：李淑娟完成日期：2012年6月25日設(shè)計要求考核目的通過課程設(shè)計，考查學(xué)生對dreamweaver網(wǎng)頁設(shè)計的綜合應(yīng)用能力，要求學(xué)生能夠獨立制作出獨特的網(wǎng)頁作品，突出強調(diào)知識的系統(tǒng)性與制作方法的實用性?？己隧椖恳?、制作主題明確，內(nèi)容健康。2、網(wǎng)頁色彩搭配協(xié)調(diào)，布局合理。3、創(chuàng)意新穎，風(fēng)格獨特，具有現(xiàn)實意義。4、網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)合理。5、整體效果好，實用性較強。6、站點命名準(zhǔn)確，網(wǎng)站的可移植性強。7、網(wǎng)站必須由作者本人親自構(gòu)思，采集素材，整理加

2、工，不得抄襲他人作品。目錄第一章規(guī)劃網(wǎng)站11.1策劃網(wǎng)站主題11.2確定網(wǎng)站風(fēng)格11.3構(gòu)思網(wǎng)站欄目結(jié)構(gòu)11.4規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)21.5設(shè)計主要頁面的布局2第二章準(zhǔn)備素材32.1準(zhǔn)備文本32.2準(zhǔn)備logo32.3準(zhǔn)備圖片42.4準(zhǔn)備動畫42.5建立庫項目5第三章創(chuàng)建網(wǎng)站53.1創(chuàng)建本地站點53.2網(wǎng)站目錄結(jié)構(gòu)的搭建5第四章網(wǎng)站首頁的設(shè)計與制作54.1網(wǎng)站首頁的布局設(shè)計54.2編輯CSS樣式文件64.3編輯美化網(wǎng)站首頁6第五章制作二級欄目網(wǎng)頁和內(nèi)容網(wǎng)頁75.1制作模板75.2制作基于模板的二級欄網(wǎng)頁75.3制作框架網(wǎng)頁7

3、參考文獻(xiàn)8青島食品股份有限公司網(wǎng)頁設(shè)計（含html,三劍客）設(shè)計說明書第一章規(guī)劃網(wǎng)站1.1策劃網(wǎng)站主題在山東半島南端，依山傍海，風(fēng)光秀麗，氣候宜人，是一座獨具特色的海濱城市。她是中國東部重要的海濱城市，是中國重要的經(jīng)濟中心城市和港口城市，國家歷史文化名城和風(fēng)景旅游勝地。是中國的品牌之都，曾經(jīng)獲得“中國人居環(huán)境獎”。旅游資源瀕臨黃海，環(huán)抱膠州灣，是一座著名的旅游城市——青島。在這個城市之中有一個著名的食品廠是青島食品股份有限公司。青島食品股份有限公司創(chuàng)建于1950年1月。歷經(jīng)50多年發(fā)展，現(xiàn)已成為全國輕工行業(yè)、食品行業(yè)中的重點企業(yè)。

4、公司擁有20多條國內(nèi)外食品生產(chǎn)線，主要生產(chǎn)餅干面食品、花生制品、豆制品、巧克力糖果、乳制品及嬰幼兒方便食品等6大類100多個系列品種，最高年產(chǎn)量5萬多噸。產(chǎn)品暢銷全國，遠(yuǎn)銷日、韓、美、俄、澳大利亞、新西蘭及東南亞等近20個國家和地區(qū)。為了更好的宣傳青食企業(yè)，所以設(shè)計了只做了這個網(wǎng)站的主題，是為了宣傳青島，宣傳青島食品股份有限公司。為消費者提供一個資訊的網(wǎng)頁，更加了解青食的產(chǎn)品。1.2確定網(wǎng)站風(fēng)格因為青島食品股份有限公司是以餅干為主，所以在網(wǎng)站的背景選取上采用的是一個橙色背景色。主色調(diào)為（#FF8040）橙黃色，輔助色調(diào)為(#FF9

5、900)橙黃色。橙黃色給人一種想吃的感覺，所以使用橙黃色可以勾起消費者的食欲。1.3構(gòu)思網(wǎng)站欄目結(jié)構(gòu)banner導(dǎo)航欄企業(yè)概況商品世界8企業(yè)圖片企業(yè)介紹文字焦點圖片廣告聯(lián)系方式新聞中心主要的聯(lián)系內(nèi)容青食新聞內(nèi)容圖片滾動展示版權(quán)信息1.4規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)規(guī)劃網(wǎng)站imageFlashPic.jsIndex.html1.5設(shè)計主要頁面的布局網(wǎng)頁布局模式采用二分欄結(jié)構(gòu)，具有簡潔大方的效果，各個分欄清晰明了，便于查找。主頁如下圖1-1所示8圖1-1第二章準(zhǔn)備素材2.1準(zhǔn)備文本從網(wǎng)頁中搜索關(guān)于青食的圖片和文字的相關(guān)素材，為設(shè)計的網(wǎng)頁

6、準(zhǔn)備充分的素材資料。2.2準(zhǔn)備logoLogo在photoshop中建立一個964*170的矩形，填充為橙黃色，將圖片引入后融入其中，然后放入Dreamweaver那個運用。STEP1在Photoshopzhong新建立一個“寬度”和“高度”為964像素*170像素，分辨率為72像素/英寸的白色背景文檔，命名為“青島食品股份有限公司logo”。STEP2設(shè)置“前景色”為橙色(#ff5a00)，新建圖層1，選擇“矩形工具”，在工具選項欄中激活“填充像素”按鈕，設(shè)置“矩形選項”為固定大小964像素*170像素STEP3首先設(shè)置好文字字

7、體、大小、顏色。新建圖層2，用“橫排文字工具”寫上青食二字，在創(chuàng)建新的圖層3，用“橢圓工具”，畫一個橢圓，再用“自定義形狀工具繪制棧橋標(biāo)志物，，再刪除背景層，最后選擇“圖層”→“合并可見圖層”，合并成一個新的圖層1,這個圖就完成了。8STEP4從上一步合成的新圖層開始，新建圖層2，在寫字之前先調(diào)好文字字體、大小、顏色等，用“橫排文字工具”寫上青島食品股份有限公司，再用“添加圖層樣式”改變字的效果，最后用“移動工具”調(diào)整好字的位置。新建圖層3，選擇“橫排文字工具”，用英語寫上qingdaofoodsco.ld，再用“添加圖層樣式”，

8、改變字的效果，最后用“移動工具”調(diào)好字的位置。STEP5打開網(wǎng)頁素材images“字母餅干.jpg”圖片，將圖片拖拽至新建文檔中，再用“圖像”→“圖像大小”進行調(diào)制圖像的的大小，知道合適為止。至此，該網(wǎng)站的logo就制作完成了。Logo如下圖2-1