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

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