《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作》課件項(xiàng)目六

項(xiàng)目六制作多網(wǎng)頁(yè)站點(diǎn)能力目標(biāo)：(1)能夠設(shè)計(jì)多網(wǎng)頁(yè)網(wǎng)站。(2)能夠制作多網(wǎng)頁(yè)站點(diǎn)。知識(shí)目標(biāo)：(1)掌握網(wǎng)站建設(shè)流程。(2)掌握網(wǎng)頁(yè)制作的基本原則。(3)掌握電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)的方法。(4)掌握多網(wǎng)頁(yè)站點(diǎn)的建設(shè)的基本方法。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)站的總體設(shè)計(jì)與策劃1．確定網(wǎng)站需求及功能（1）網(wǎng)站的需求：是指企業(yè)通過(guò)網(wǎng)站希望實(shí)現(xiàn)的目標(biāo)。一個(gè)企業(yè)網(wǎng)站的成功與否不僅關(guān)系到企業(yè)的業(yè)務(wù)，同時(shí)也會(huì)影響企業(yè)信息化及互聯(lián)網(wǎng)利用率，所以在建設(shè)網(wǎng)站之前，首先要明確企業(yè)用戶的需求、建設(shè)網(wǎng)站的需求，從而確定建站規(guī)模、投資費(fèi)用等方面。只有準(zhǔn)確的需求說(shuō)明，才能確保在建站過(guò)程是朝正確的方向發(fā)展的。（2）網(wǎng)站定位：主要解決“網(wǎng)站將面向誰(shuí)”的問(wèn)題。不同人群的觀念、信息需求層次及關(guān)注焦點(diǎn)存在差異，精準(zhǔn)的網(wǎng)站定位有利于網(wǎng)站的推廣。（3）網(wǎng)站的功能：大體分為產(chǎn)品宣傳型、網(wǎng)上營(yíng)銷型、信息門戶型、服務(wù)咨詢型、電子商務(wù)型這樣幾大類。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)站的總體設(shè)計(jì)與策劃2．確定網(wǎng)站主題和風(fēng)格（1）網(wǎng)站風(fēng)格：網(wǎng)站頁(yè)面設(shè)計(jì)上的視覺(jué)元素組合在一起的整體形象，展現(xiàn)給人的直觀感受。這個(gè)整體形象包括網(wǎng)站的配色、字體、頁(yè)面布局、頁(yè)面內(nèi)容、交互性、海報(bào)、宣傳語(yǔ)等因素。（2）網(wǎng)站風(fēng)格一致性：網(wǎng)站的風(fēng)格要統(tǒng)一。因?yàn)橐粋€(gè)網(wǎng)站是由很多個(gè)網(wǎng)頁(yè)組成的，如果每個(gè)網(wǎng)頁(yè)的風(fēng)格都不一樣的話，那么一定會(huì)使整個(gè)網(wǎng)站顯得凌亂、不協(xié)調(diào)，甚至很容易使瀏覽者感到迷惑，不知自己是否還在同一個(gè)網(wǎng)站內(nèi)瀏覽，所以一定要使網(wǎng)站的風(fēng)格保持一致。一般來(lái)說(shuō)，要使網(wǎng)站的風(fēng)格保持一致，可以從以下幾個(gè)方面著手：版面設(shè)計(jì)要一致。如網(wǎng)頁(yè)的主色調(diào)要一致，字體的風(fēng)格要一致。網(wǎng)頁(yè)中的有代表性的東西要一致，如網(wǎng)站的名稱、LOGO、有代表性的圖形和動(dòng)畫(huà)等。導(dǎo)航條要一致?？梢杂肅SS、js技術(shù)實(shí)現(xiàn)導(dǎo)航條的外觀及行為方式保持一致。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)站結(jié)構(gòu)與內(nèi)容設(shè)計(jì)1.規(guī)劃站點(diǎn)結(jié)構(gòu)（1）規(guī)劃站點(diǎn)結(jié)構(gòu)的方法：應(yīng)該將所有信息按類別分開(kāi)，分別納入不同層次的頁(yè)面中。應(yīng)先把主要的內(nèi)容放到首頁(yè)上，其他內(nèi)容分主次地依次安排在下級(jí)網(wǎng)頁(yè)頁(yè)面中。（2）網(wǎng)站的結(jié)構(gòu)圖：網(wǎng)站的結(jié)構(gòu)圖有順序結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)、集成結(jié)構(gòu)、Web結(jié)構(gòu)等。多數(shù)比較復(fù)雜的電子商務(wù)網(wǎng)站會(huì)綜合應(yīng)用幾種；綜合應(yīng)用幾種不同的結(jié)構(gòu)圖。定義好網(wǎng)站結(jié)構(gòu)圖的目的是便于有效地組織站點(diǎn)的頁(yè)面鏈接。（3）網(wǎng)站欄目設(shè)計(jì)原則：一是網(wǎng)站內(nèi)容重點(diǎn)突出，二是方便訪問(wèn)者瀏覽，三是便于管理者進(jìn)行維護(hù)。此外，網(wǎng)站欄目劃分要服從并體現(xiàn)網(wǎng)站主題。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)站結(jié)構(gòu)與內(nèi)容設(shè)計(jì)2.編寫(xiě)網(wǎng)站設(shè)計(jì)計(jì)劃書(shū)網(wǎng)站策劃書(shū)包括以下幾個(gè)內(nèi)容。確定網(wǎng)站主題與名稱。確定網(wǎng)站性質(zhì)的內(nèi)容主題及定位瀏覽人群。策劃?rùn)谀抗δ芘c層次結(jié)構(gòu)。清晰、豐富的內(nèi)容組織。網(wǎng)站的發(fā)布形式。頁(yè)面設(shè)計(jì)要求。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)站結(jié)構(gòu)與內(nèi)容設(shè)計(jì)2.編寫(xiě)網(wǎng)站設(shè)計(jì)計(jì)劃書(shū)網(wǎng)站策劃書(shū)包括以下幾個(gè)內(nèi)容。確定網(wǎng)站主題與名稱。確定網(wǎng)站性質(zhì)的內(nèi)容主題及定位瀏覽人群。策劃?rùn)谀抗δ芘c層次結(jié)構(gòu)。清晰、豐富的內(nèi)容組織。網(wǎng)站的發(fā)布形式。頁(yè)面設(shè)計(jì)要求。網(wǎng)站的發(fā)布形式：一種是企業(yè)級(jí)商業(yè)網(wǎng)站的發(fā)布；另一種是中小企業(yè)級(jí)或小型組織社團(tuán)的網(wǎng)站發(fā)布（服務(wù)器托管、申請(qǐng)?zhí)摂M主機(jī)、DDN專線接入）此外還有免費(fèi)主頁(yè)空間的方式。頁(yè)面設(shè)計(jì)要求：一是統(tǒng)一的頁(yè)面設(shè)計(jì)風(fēng)格，色彩純凈、版面統(tǒng)一；二是頁(yè)面的大小適中；三是合理使用空白頁(yè)；四是導(dǎo)航條的使用。。任務(wù)一添加網(wǎng)頁(yè)基本元素制作網(wǎng)站的步驟在制作網(wǎng)站頁(yè)面時(shí)，需要全面的考慮，大體可以分為三個(gè)步驟：1.確定網(wǎng)頁(yè)版面布局在制作網(wǎng)頁(yè)時(shí)，要先把大的結(jié)構(gòu)設(shè)計(jì)好，再逐步完善小的結(jié)構(gòu)設(shè)計(jì)；要先設(shè)計(jì)簡(jiǎn)單的內(nèi)容，再設(shè)計(jì)復(fù)雜的，即先大后小、先簡(jiǎn)單后復(fù)雜。這樣設(shè)計(jì)方便在出現(xiàn)問(wèn)題時(shí)進(jìn)行修改。要根據(jù)網(wǎng)站設(shè)計(jì)目標(biāo)和主要瀏覽對(duì)象設(shè)計(jì)好網(wǎng)頁(yè)的版式及網(wǎng)頁(yè)的內(nèi)容。2.制作網(wǎng)頁(yè)網(wǎng)頁(yè)包括靜態(tài)網(wǎng)頁(yè)制作和動(dòng)態(tài)網(wǎng)頁(yè)制作。制作網(wǎng)頁(yè)時(shí)要按照版面布局靈活運(yùn)用模板和庫(kù)，提高制作效率。3.豐富網(wǎng)頁(yè)內(nèi)容為了使網(wǎng)頁(yè)更加美化，視覺(jué)效果更加突出，可以通過(guò)Flash動(dòng)畫(huà)、視頻等技術(shù)手段來(lái)豐富網(wǎng)頁(yè)內(nèi)容。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)頁(yè)制作的注意事項(xiàng)網(wǎng)頁(yè)的長(zhǎng)度不要過(guò)長(zhǎng)；使用的圖像宜小而精；定義圖片的尺寸；正確選擇圖片格式；降低顏色數(shù)目；使用圖片簡(jiǎn)圖；慎用動(dòng)畫(huà)；慎用Java程序；使用緩存瀏覽器兼容性測(cè)試瀏覽器對(duì)HTML和CSS等語(yǔ)法的支持度是不同的。，其版本越高，所支持的語(yǔ)法就越多。在Dreamweaver中提供了可以檢查網(wǎng)頁(yè)中是否含有某版本，瀏覽器不能識(shí)別的語(yǔ)法功能，設(shè)計(jì)者可以借助其進(jìn)行檢查。平臺(tái)兼容性測(cè)試設(shè)計(jì)者要為用戶著想，必須最少在一臺(tái)PC和一臺(tái)Mac機(jī)上測(cè)試自己的網(wǎng)站網(wǎng)頁(yè)，看看兼容性如何。超鏈接完好性測(cè)試設(shè)計(jì)者必須檢測(cè)超鏈接的完好性，保證鏈接的有效性，如果在測(cè)試過(guò)程中發(fā)現(xiàn)錯(cuò)誤，要及時(shí)修改，在準(zhǔn)確無(wú)誤后方可正式上傳到Internet上。任務(wù)一添加網(wǎng)頁(yè)基本元素網(wǎng)頁(yè)制作的注意事項(xiàng)網(wǎng)頁(yè)的長(zhǎng)度不要過(guò)長(zhǎng)；使用的圖像宜小而精；定義圖片的尺寸；正確選擇圖片格式；降低顏色數(shù)目；使用圖片簡(jiǎn)圖；慎用動(dòng)畫(huà)；慎用Java程序；使用緩存瀏覽器兼容性測(cè)試瀏覽器對(duì)HTML和CSS等語(yǔ)法的支持度是不同的。，其版本越高，所支持的語(yǔ)法就越多。在Dreamweaver中提供了可以檢查網(wǎng)頁(yè)中是否含有某版本，瀏覽器不能識(shí)別的語(yǔ)法功能，設(shè)計(jì)者可以借助其進(jìn)行檢查。平臺(tái)兼容性測(cè)試設(shè)計(jì)者要為用戶著想，必須最少在一臺(tái)PC和一臺(tái)Mac機(jī)上測(cè)試自己的網(wǎng)站網(wǎng)頁(yè)，看看兼容性如何。超鏈接完好性測(cè)試設(shè)計(jì)者必須檢測(cè)超鏈接的完好性，保證鏈接的有效性，如果在測(cè)試過(guò)程中發(fā)現(xiàn)錯(cuò)誤，要及時(shí)修改，在準(zhǔn)確無(wú)誤后方可正式上傳到Internet上。任務(wù)二企業(yè)商務(wù)網(wǎng)頁(yè)的設(shè)計(jì)網(wǎng)站logo及banner網(wǎng)站導(dǎo)航條（首頁(yè)、公司動(dòng)態(tài)、產(chǎn)品系列、公司案例、關(guān)于我們）公司圖片公司介紹經(jīng)典案例展示版尾任務(wù)二企業(yè)商務(wù)網(wǎng)頁(yè)的設(shè)計(jì)網(wǎng)頁(yè)制作的原則和技巧頁(yè)面布局的簡(jiǎn)潔原則：簡(jiǎn)潔是版面最重要的原則。因?yàn)樵O(shè)計(jì)網(wǎng)頁(yè)的主要目的是為了傳達(dá)信息，網(wǎng)頁(yè)上的信息是最精華的、最重要的，除此以外的東西均應(yīng)處于次要地位。不要使版面顯得過(guò)于花哨，雖然訪問(wèn)者會(huì)被精美的動(dòng)畫(huà)和花哨的圖片所吸引，但訪問(wèn)者真正關(guān)心的是網(wǎng)頁(yè)的內(nèi)容，如果網(wǎng)頁(yè)的內(nèi)容是有價(jià)值的，那么他們才會(huì)經(jīng)常光顧。網(wǎng)頁(yè)布局的技巧：確定網(wǎng)頁(yè)設(shè)計(jì)的尺寸；巧用黃金分割比；適當(dāng)處理留白。任務(wù)二企業(yè)商務(wù)網(wǎng)頁(yè)的設(shè)計(jì)網(wǎng)頁(yè)色彩搭配原理：色彩的鮮明性：網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。色彩的獨(dú)特性：要有與眾不同的色彩，使瀏覽者對(duì)網(wǎng)頁(yè)的印象強(qiáng)烈。色彩的合適性：色彩和設(shè)計(jì)者表達(dá)的內(nèi)容與氣氛相適合，如用粉色體現(xiàn)女性站點(diǎn)的柔美。色彩的聯(lián)想性：不同的色彩會(huì)產(chǎn)生不同的聯(lián)想，選擇色彩要和自己網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。常用的配色方案：暖色調(diào)：即紅色、橙色、黃色、褐色等色彩的搭配。這種色彩的運(yùn)用，可使