《網(wǎng)站前臺設(shè)計綜合實訓》課件-項目六 企業(yè)類網(wǎng)站的設(shè)計與制作

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

走進平安

新聞中心

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

科技研發(fā)

市場營銷

品牌展示

企業(yè)文化

新品推介

旗下企業(yè)

公告板

快速通道

企業(yè)榮譽

健康專欄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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