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

網(wǎng)站前臺(tái)設(shè)計(jì)綜合實(shí)訓(xùn)項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作教學(xué)內(nèi)容客戶需求分析網(wǎng)站風(fēng)格定位網(wǎng)站建設(shè)方案網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)任務(wù)一制作心緣禮品網(wǎng)站效果圖任務(wù)二制作心緣禮品網(wǎng)站的橫幅廣告動(dòng)畫任務(wù)三心緣禮品網(wǎng)站的搭建征求客戶意見，修改完善項(xiàng)目實(shí)訓(xùn)項(xiàng)目小結(jié)項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作一、客戶需求分析項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作確切地說，心緣禮品網(wǎng)站是一個(gè)商品網(wǎng)站，或者說是一個(gè)各種禮品的電子商鋪?？蛻舻慕ㄕ疽笾饕幸韵聨讉€(gè)方面：第1，全方位的商品分類展示。要把經(jīng)營的各種禮品按照若干分類方式進(jìn)行分類，以便從種類、功能、特色等不同角度向?yàn)g覽者充分展示自己的商品。第2，方便快捷的網(wǎng)上交易。網(wǎng)站要向購物者提供一個(gè)安全、簡便的支付方式，以實(shí)現(xiàn)安全快速高效的網(wǎng)上交易。第3，可靠的安全防范措施。按照客戶的要求，建立網(wǎng)站的安全防范屏障，避免網(wǎng)站交易信息的泄露丟失，甚至賬戶資金被竊取。第4，健全的后臺(tái)管理系統(tǒng)。網(wǎng)站要具有商品分類管理及搜索、交易記錄保存、會(huì)員注冊(cè)、商品增減登記等系統(tǒng)管理功能，為客戶實(shí)施有效管理提供可靠的管理工具。第5，客戶對(duì)網(wǎng)站界面色彩、網(wǎng)頁圖案，以及版式、特效等方面提出的特定要求。二、網(wǎng)站風(fēng)格定位項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作在商業(yè)類網(wǎng)站的設(shè)計(jì)中，既要考慮到商業(yè)性，又要考慮到藝術(shù)性，商業(yè)網(wǎng)站是商業(yè)性和藝術(shù)性的結(jié)合，同時(shí)也是一個(gè)企業(yè)文化的載體，通過視覺元素，承接企業(yè)的文化和企業(yè)的品牌，好的網(wǎng)站設(shè)計(jì)有助于企業(yè)樹立好的社會(huì)形象，也能比其他的傳播媒體更好、更直觀地展示企業(yè)的產(chǎn)品和服務(wù)。商業(yè)性，包括網(wǎng)站的功能設(shè)計(jì)、欄目設(shè)計(jì)、頁面設(shè)計(jì)等。藝術(shù)性，指瀏覽者是否獲得愉悅的視覺環(huán)境，在視覺上是否能給人留下深刻印象，從而留住觀眾視線等。二、網(wǎng)站風(fēng)格定位項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作1．色彩：網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，色彩千變?nèi)f化，不同的顏色會(huì)給瀏覽者不同的心理感受，每種色彩在飽和度、透明度上略微變化就會(huì)產(chǎn)生不同的感覺。色彩在人們的生活中是可以代表豐富的感情和含義的，為了你的頁面更美觀、更舒適，為了增強(qiáng)你的頁面的可閱讀性，必須合理、恰當(dāng)?shù)剡\(yùn)用與搭配頁面的色彩。色彩對(duì)人的視覺效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)的成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。

本項(xiàng)目中采用一種主題色——紅色，同時(shí)配以紅色到黃色的漸變，及黃色的邊框線條，使頁面不至于單調(diào)、乏味。根據(jù)本項(xiàng)目的主旨——宣傳禮品，采用紅色為主題色更能體現(xiàn)中國的國情，人們喜歡用紅色襯托喜慶、熱烈、溫暖、幸福、吉祥、真誠，顏色的合理搭配能吸引瀏覽者的視線，讓他們感覺網(wǎng)站清晰、明了，層次分明。二、網(wǎng)站風(fēng)格定位項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作2．排版目前設(shè)計(jì)師們普遍認(rèn)同簡單的頁面表現(xiàn)更好。閱讀這類頁面只需要從上看到下即可，在瀏覽過程中它也提供更加平和、穩(wěn)定的瀏覽體驗(yàn)。本項(xiàng)目采用的就是雙欄布局，即規(guī)范、理性的布局分割。通過合理框架布局的選用，保持了信息密度的平衡。二、網(wǎng)站風(fēng)格定位項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作3．特效在本網(wǎng)站中有兩種動(dòng)畫效果：一是采用AdobeImageRead軟件制作了網(wǎng)站的橫幅廣告；二是在公告欄下方，通過運(yùn)用CSS樣式中的方框定位及項(xiàng)目列表排序及代碼的靈活使用，達(dá)到在同一版面根據(jù)需要顯示不同內(nèi)容的效果。三、網(wǎng)站建設(shè)方案項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作1．頁面風(fēng)格創(chuàng)意設(shè)計(jì)網(wǎng)站頁面風(fēng)格顏色初步擬定采用紅色為主題色，在此基礎(chǔ)上進(jìn)行顏色的合理搭配，通過顏色的色相、明度等的靈活應(yīng)用突出本網(wǎng)站要傳達(dá)的喜慶、溫暖、幸福、吉祥等元素，使網(wǎng)站收到了良好的創(chuàng)意效果。三、網(wǎng)站建設(shè)方案項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作2．網(wǎng)站欄目劃分根據(jù)我們對(duì)用戶的了解，特建立以下欄目。

公司首頁

特別推薦

公司產(chǎn)品

重點(diǎn)推薦

產(chǎn)品展示

每日特價(jià)

會(huì)員天地

品牌專賣

定購指南

分類目錄

給我留言

限時(shí)搶好禮

精品廣場(chǎng)

廠家推薦

最新禮品 三、網(wǎng)站建設(shè)方案項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作3．網(wǎng)站欄目內(nèi)容簡介4．網(wǎng)站建設(shè)拓?fù)鋱D四、網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)五、任務(wù)一制作心緣禮品網(wǎng)站效果圖“心緣禮品”網(wǎng)站，包含了工藝禮品、商務(wù)禮品、電子產(chǎn)品、辦公用品、家庭用品、品牌專區(qū)、箱包和手表等諸多欄目，實(shí)現(xiàn)了禮品樣式、知識(shí)、購買等信息的展示和宣傳。五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，首頁效果圖圖像文件規(guī)格設(shè)置為，寬度940像素，高度1330像素，分辨率72像素/英寸。1．網(wǎng)站Logo和導(dǎo)航欄的制作五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作2．最新禮品欄目的制作五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作3．Flash動(dòng)畫的制作網(wǎng)站首頁的Banner部分為Flash動(dòng)畫，按照Flash動(dòng)畫尺寸及網(wǎng)頁布局要求預(yù)留出：930×100像素區(qū)域，并用文字標(biāo)注上即可。

五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作4．品片專賣欄目的制作

五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作5．分類目錄欄目的制作

五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作6．限時(shí)搶好禮欄目的制作

五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作7．廠家推薦欄目的制作

五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作8．網(wǎng)站下方鏈接導(dǎo)航條及版權(quán)信息的制作

五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁“公司產(chǎn)品”效果圖的制作五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁“公司產(chǎn)品”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁“公司產(chǎn)品”效果圖圖像文件規(guī)格設(shè)置為，寬度941像素，高度891像素，分辨率72像素/英寸。說明：子頁“公司產(chǎn)品”的部分操作與首頁是相同的，這里與首頁操作相同的部分不再贅述，下面我們一起來學(xué)習(xí)子頁與首頁不同部分的制作方法。五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁“公司產(chǎn)品”效果圖的制作1．產(chǎn)品展臺(tái)欄目的制作五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁“禮品文化”效果圖的制作五、任務(wù)一制作心緣禮品網(wǎng)站效果圖項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁“禮品文化”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁“禮品文化”效果圖圖像文件規(guī)格設(shè)置為，寬度940像素，高度891像素，分辨率72像素/英寸。說明：子頁“禮品文化”的框架與子頁“公司產(chǎn)品”基本相同，這里不再贅述。六、任務(wù)二橫幅廣告的制作項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作網(wǎng)站中的動(dòng)畫部分既可以用Flash軟件也可以用ImageRead軟件來制作，ImageReady在形式上是簡化了的Photoshop，使用較方便。如果動(dòng)畫的幀數(shù)較少，變化過程較簡單，即可用ImageReady軟件來完成。本網(wǎng)站的banner就是用ImageReady來制作完成的。六、任務(wù)二橫幅廣告的制作項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作

1.準(zhǔn)備素材圖片

六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作2.動(dòng)畫制作效果

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

進(jìn)行網(wǎng)站搭建時(shí)，首先要利用Photoshop切片工具，將效果圖進(jìn)行切片輸出。切出的圖片作為網(wǎng)站的圖片素材。七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁的制作1.創(chuàng)建站點(diǎn)并設(shè)置頁面屬性2.設(shè)置CSS樣式3.制作網(wǎng)站的站標(biāo)、導(dǎo)航欄和公告欄4.制作最新禮品和精品廣場(chǎng)欄目5.制作特別推薦和重點(diǎn)推薦欄目6.制作每日特價(jià)欄目7.制作橫幅廣告和誠信禮品欄目8.制作品片專賣欄目9.添加分類目錄欄目七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁的制作10.制作限時(shí)搶好禮和廠家宣傳欄目11.制作下方導(dǎo)航欄和訂單查詢欄目12.制作版權(quán)信息欄目七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作步驟二

網(wǎng)站子頁的制作本網(wǎng)站的子頁在形式上也是套用了主頁的結(jié)構(gòu)，使之在風(fēng)格上與主頁完全一致、渾然一體，這也是讀者在設(shè)計(jì)制作網(wǎng)站中應(yīng)該掌握的一點(diǎn)。子頁主要的特點(diǎn)如下：（1）充分利用表格來進(jìn)行網(wǎng)頁元素的布局；（2）利用圖形圖像處理軟件制作小圖片；（3）充分利用CSS樣式表的作用；（4）利用iframe實(shí)現(xiàn)同一區(qū)域顯示不同的內(nèi)容。步驟三鏈接主頁與子頁對(duì)主頁與各子頁之間進(jìn)行鏈接，并使鏈接暢通。八、征求客戶意見，修改完善項(xiàng)目二商業(yè)類網(wǎng)站的設(shè)計(jì)與制作對(duì)制作完成的心緣禮品網(wǎng)站進(jìn)行調(diào)試發(fā)布，在廣泛征集客戶意見的基礎(chǔ)上，盡可能地按照客戶的要求進(jìn)行補(bǔ)充、修改，使得網(wǎng)站進(jìn)一步完善，直到客戶滿意。九、項(xiàng)目實(shí)訓(xùn)在前面學(xué)習(xí)的項(xiàng)目基礎(chǔ)上，請(qǐng)大家依據(jù)