《網(wǎng)站前臺(tái)設(shè)計(jì)綜合實(shí)訓(xùn)》課件-項(xiàng)目六 企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作

教學(xué)內(nèi)容客戶需求分析網(wǎng)站風(fēng)格定位網(wǎng)站建設(shè)方案網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖任務(wù)二制作平安藥業(yè)集團(tuán)網(wǎng)站的橫幅廣告動(dòng)畫(huà)任務(wù)三平安藥業(yè)集團(tuán)網(wǎng)站的搭建征求客戶意見(jiàn)，修改完善項(xiàng)目實(shí)訓(xùn)項(xiàng)目小結(jié)項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作一、客戶需求分析項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作通過(guò)對(duì)平安藥業(yè)集團(tuán)有限公司建站目的及公司情況的深入了解，擬定本網(wǎng)站具有如下功能：（1）樹(shù)立企業(yè)形象，展示并提高企業(yè)的競(jìng)爭(zhēng)力；（2）展示產(chǎn)品及技術(shù)優(yōu)勢(shì)；（3）發(fā)布信息；（4）推銷(xiāo)新產(chǎn)品；（5）提高工作效率；（6）加強(qiáng)客戶服務(wù)；（7）增進(jìn)與客戶的溝通；（8）為消費(fèi)者服務(wù)；（9）刺激需求。二、網(wǎng)站風(fēng)格定位項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作1．色彩：本項(xiàng)目選定藍(lán)色為主色調(diào)，通過(guò)使用藍(lán)色、灰色及其漸變色，使整個(gè)頁(yè)面色彩統(tǒng)一，富有層次感。除了整體的藍(lán)色以外，頁(yè)面不同欄目配以不同深淺的橙色、綠色等圖片，以達(dá)到色彩的對(duì)比、平衡，避免產(chǎn)生單調(diào)感。二、網(wǎng)站風(fēng)格定位項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作2．排版根據(jù)本網(wǎng)站承載信息量大的特點(diǎn)，以主頁(yè)為例，采用了左中右結(jié)構(gòu)的排版布局。左邊設(shè)置的是一些欄目的快速通道，體現(xiàn)了操作便捷的特點(diǎn)；右邊設(shè)置的是一些實(shí)時(shí)及常識(shí)類(lèi)的欄目，增強(qiáng)了主頁(yè)的功能，將瀏覽者最為關(guān)注的內(nèi)容呈現(xiàn)到了主頁(yè)上；中間大面積為內(nèi)容主區(qū)域，為使網(wǎng)站整體脈絡(luò)清晰，增強(qiáng)頁(yè)面的靈動(dòng)性，在頁(yè)面中間部分使用一個(gè)Flash廣告條進(jìn)行分隔。這樣總體設(shè)計(jì)感覺(jué)簡(jiǎn)潔、清新、大氣而富于時(shí)代感。二、網(wǎng)站風(fēng)格定位項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作3．特效本項(xiàng)目在網(wǎng)站站標(biāo)、廣告條部分及中間廣告條部分制作了Flash動(dòng)畫(huà)；在公告板欄目中設(shè)置了滾動(dòng)字幕效果，使整個(gè)頁(yè)面動(dòng)靜結(jié)合，視覺(jué)清晰。三、網(wǎng)站建設(shè)方案項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作1．頁(yè)面風(fēng)格創(chuàng)意設(shè)計(jì)網(wǎng)站頁(yè)面風(fēng)格顏色初步擬定采用藍(lán)色為基礎(chǔ)色，采用藍(lán)色、灰色及其漸變色的配合，著重體現(xiàn)平安藥業(yè)集團(tuán)的企業(yè)理念，給人以冷靜、理智、安詳、廣闊的視覺(jué)感受。頁(yè)面頂部以大幅Flash動(dòng)畫(huà)來(lái)表現(xiàn)網(wǎng)站站標(biāo)和廣告條部分，給人清新的視覺(jué)沖擊力，同時(shí)，通過(guò)動(dòng)畫(huà)中的廣告語(yǔ)也能讓瀏覽者更快地了解企業(yè)。頁(yè)面設(shè)計(jì)中注重了圖文并茂、動(dòng)靜結(jié)合、清新大氣，使瀏覽者有愉快的心情來(lái)了解企業(yè)、了解企業(yè)產(chǎn)品。三、網(wǎng)站建設(shè)方案項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作2．網(wǎng)站欄目劃分根據(jù)我們對(duì)平安藥業(yè)集團(tuán)的了解，建立了以下欄目。

走進(jìn)平安

新聞中心

產(chǎn)業(yè)基地

科技研發(fā)

市場(chǎng)營(yíng)銷(xiāo)

品牌展示

企業(yè)文化

新品推介

旗下企業(yè)

公告板

快速通道

企業(yè)榮譽(yù)

健康專(zhuān)欄

版權(quán)說(shuō)明三、網(wǎng)站建設(shè)方案項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作3．網(wǎng)站欄目?jī)?nèi)容簡(jiǎn)介4．網(wǎng)站建設(shè)拓?fù)鋱D四、網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖平安藥業(yè)集團(tuán)網(wǎng)站包含了旗下企業(yè)、企業(yè)動(dòng)態(tài)、公告板、企業(yè)榮譽(yù)、快速通道、政策法規(guī)、行業(yè)資訊、健康專(zhuān)欄、特色欄目等內(nèi)容，頁(yè)面風(fēng)格清晰，信息容量大，同時(shí)體現(xiàn)了操作便捷的特點(diǎn)。五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，首頁(yè)效果圖圖像文件規(guī)格設(shè)置為，寬度1004像素，高度1460像素，分辨率72像素/英寸。1．網(wǎng)站Logo、Banner和導(dǎo)航欄的制作2．導(dǎo)航與內(nèi)容區(qū)過(guò)渡部分的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作3．平安藥業(yè)集4.快速通道欄目的制作團(tuán)旗下企業(yè)欄目的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作5．上市公司、心系社會(huì)、視頻中心、平安送藥萬(wàn)里行四個(gè)欄目的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作6．企業(yè)動(dòng)態(tài)欄目的制作7.政策法規(guī)欄目的制作

五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作8．行業(yè)資訊欄目的制作

五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作9．公告板、企業(yè)榮譽(yù)、健康專(zhuān)欄三個(gè)欄目的制作

五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作10．產(chǎn)品查詢(xún)欄目的制作11.版權(quán)欄目的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“走進(jìn)平安”效果圖的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“走進(jìn)平安”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁(yè)“走進(jìn)平安”效果圖圖像文件規(guī)格設(shè)置為，寬度1004像素，高度1340像素，分辨率72像素/英寸。該子頁(yè)的框架與首頁(yè)基本相同，子頁(yè)各個(gè)欄目制作用到的知識(shí)首頁(yè)中均已介紹過(guò)，故這里不再進(jìn)行詳細(xì)闡述。五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁(yè)“新聞中心”效果圖的制作五、任務(wù)一制作平安藥業(yè)集團(tuán)網(wǎng)站效果圖項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁(yè)“新聞中心”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁(yè)“新聞中心”效果圖圖像文件規(guī)格設(shè)置為，寬度為1004像素，高度為1413像素，分辨率為72像素/英寸。該子頁(yè)的框架與首頁(yè)基本相同，子頁(yè)各個(gè)欄目制作用到的知識(shí)首頁(yè)中均已介紹過(guò)，故這里不再進(jìn)行詳細(xì)闡述。六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作本網(wǎng)站的橫幅廣告由兩部分組成。一是網(wǎng)站的Logo和Banner部分。這部分Flash動(dòng)畫(huà)在色彩設(shè)計(jì)方面，為了與頁(yè)面整體色彩相一致，主要采用以藍(lán)色為基礎(chǔ)色，配以綠色、灰色，增加畫(huà)面的層次感；在內(nèi)容上，主要表達(dá)兩層含義，質(zhì)量保證“做良心藥、做放心藥”；企業(yè)精神“開(kāi)拓創(chuàng)新、超越自我”，增加百姓對(duì)企業(yè)的信心。二是網(wǎng)站中間的橫幅廣告條。其主要作用是宣傳企業(yè)品牌形象，即世界制藥50強(qiáng)企業(yè)、中國(guó)百姓放心的品牌。六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash動(dòng)畫(huà)制作

1.素材準(zhǔn)備依據(jù)網(wǎng)站風(fēng)格定位及客戶要求，F(xiàn)lash影片文件的大小設(shè)置為，寬度1004像素，高度347像素，頻率12幀/秒。六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

1.素材準(zhǔn)備制作場(chǎng)景背景圖片六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

1.素材準(zhǔn)備制作文字素材站標(biāo)圖片素材六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

2.動(dòng)畫(huà)制作（部分效果）六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間橫幅廣告條的制作

1.素材準(zhǔn)備六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間橫幅廣告條的制作

1.素材準(zhǔn)備合成圖片六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間橫幅廣告條的制作

1.素材準(zhǔn)備六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間橫幅廣告條的制作

1.素材準(zhǔn)備六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間橫幅廣告條的制作

1.素材準(zhǔn)備六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間橫幅廣告條的制作

2.動(dòng)畫(huà)制作（部分效果）七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作網(wǎng)站搭建是項(xiàng)目建設(shè)的最后一個(gè)環(huán)節(jié)，是依據(jù)網(wǎng)站效果圖，把網(wǎng)站用網(wǎng)頁(yè)編輯工具搭建成形，以便于網(wǎng)上瀏覽。

進(jìn)行網(wǎng)站搭建時(shí)，首先要利用Photoshop切片工具，將效果圖進(jìn)行切片輸出。切出的圖片作為網(wǎng)站的圖片素材。七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)的制作1.創(chuàng)建站點(diǎn)2.創(chuàng)建主頁(yè)文件3.制作頂部的Banner部分4.制作導(dǎo)航欄5.制作平安藥業(yè)集團(tuán)旗下企業(yè)欄目6.制作快速通道欄目7.制作上市公司、心系社會(huì)、視頻中心、平安送藥萬(wàn)里行四個(gè)欄目8.制作企業(yè)動(dòng)態(tài)欄目七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)的制作9.制作公告板欄目10.制作企業(yè)榮譽(yù)欄目11.添加中間Flash廣告條12.制作政策法規(guī)欄目13.制作行業(yè)資訊欄目14.制作健康專(zhuān)欄欄目15.制作產(chǎn)品查詢(xún)欄目16.制作版權(quán)說(shuō)明欄目17.為欄目文字添加鏈接七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作步驟二

網(wǎng)站子頁(yè)的制作本網(wǎng)站的子頁(yè)在形式上套用了主頁(yè)的結(jié)構(gòu)，使之在風(fēng)格上與主頁(yè)完全統(tǒng)一。頁(yè)面特點(diǎn)：（1）通過(guò)表格的嵌套、單元格的拆分與合并來(lái)進(jìn)行網(wǎng)頁(yè)元素的布局；（2）表單的制作；（3）欄目背景圖片的制作。步驟三鏈接主頁(yè)與子頁(yè)對(duì)主頁(yè)與各子頁(yè)之間進(jìn)行鏈接，并使鏈接暢通。八、征求客戶意見(jiàn)，修改完善項(xiàng)目六企業(yè)類(lèi)網(wǎng)站的設(shè)計(jì)與制作對(duì)制作完成的平安藥業(yè)集團(tuán)企業(yè)網(wǎng)站進(jìn)行調(diào)試發(fā)布，在廣泛征集客戶意見(jiàn)的基礎(chǔ)上，盡可能地按照客戶的要求進(jìn)行配套修