1、第五章 規(guī)劃與設(shè)計(jì)網(wǎng)站知識(shí)要求： 了解網(wǎng)站的模式與定位、主題定位、欄目選擇及內(nèi)容提要制作。 理解網(wǎng)站專(zhuān)題策劃的原則。 掌握網(wǎng)站專(zhuān)題選題、材料組織、專(zhuān)題欄目的設(shè)置方法，網(wǎng)站專(zhuān)題的版式設(shè)計(jì)和風(fēng)格設(shè)計(jì)方法。 能根據(jù)企業(yè)實(shí)際情況及發(fā)展目標(biāo)規(guī)劃企業(yè)網(wǎng)站。 能對(duì)網(wǎng)站圖片進(jìn)行處理；能制作Flash動(dòng)畫(huà)；了解網(wǎng)站音頻與視頻的類(lèi)型；能制作出網(wǎng)頁(yè)文件。能根據(jù)商品特點(diǎn)設(shè)置商品標(biāo)題；能為商品設(shè)置正確的商品類(lèi)目；能正確編輯商品屬性；能較好地編輯商品描述信息；能設(shè)置商品圖片并上傳。能力要求：【引例】網(wǎng)站設(shè)計(jì)是技術(shù)、藝術(shù)、企業(yè)形象與企業(yè)營(yíng)銷(xiāo)策略的有機(jī)組合，以先進(jìn)的網(wǎng)頁(yè)制作技術(shù)與平面設(shè)計(jì)作為形象的展示手段，以合理的結(jié)構(gòu)層次和

2、準(zhǔn)確的鏈接關(guān)系表達(dá)企業(yè)營(yíng)銷(xiāo)策略。網(wǎng)站設(shè)計(jì)并非是簡(jiǎn)單的輸入文本的過(guò)程，而是一個(gè)從處理圖像，制作動(dòng)畫(huà)到編寫(xiě)網(wǎng)頁(yè)代碼和腳本的完整過(guò)程。在這一過(guò)程的各種階段中，需要使用不同類(lèi)型的軟件，這些軟件可以極大地提高網(wǎng)站設(shè)計(jì)的效率，每位同學(xué)都必須掌握設(shè)計(jì)網(wǎng)站常用軟件的使用?！緦W(xué)習(xí)目標(biāo)】任務(wù)編號(hào)任務(wù)名稱(chēng)職業(yè)能力目標(biāo)知識(shí)要求參考課時(shí)第一節(jié)規(guī)劃網(wǎng)站能根據(jù)企業(yè)實(shí)際情況及發(fā)展目標(biāo)規(guī)劃企業(yè)網(wǎng)站1網(wǎng)站的模式與定位2網(wǎng)站的主題定位3網(wǎng)站的欄目選擇4網(wǎng)站的內(nèi)容提要制作2課時(shí)第二節(jié)設(shè)計(jì)網(wǎng)站能進(jìn)行網(wǎng)頁(yè)的版式設(shè)計(jì)和導(dǎo)航設(shè)計(jì)；掌握HTML語(yǔ)言能用Dreamweaver制作網(wǎng)頁(yè)文件。1版式設(shè)計(jì)基本知識(shí)2導(dǎo)航設(shè)計(jì)基本知識(shí)3HTML語(yǔ)言基礎(chǔ)4

3、Dreamweaver使用基礎(chǔ)46課時(shí)第三節(jié)編輯網(wǎng)店商品信息能根據(jù)商品特點(diǎn)設(shè)置商品標(biāo)題；能為商品設(shè)置正確的商品類(lèi)目；能正確編輯商品屬性；能較好地編輯商品描述信息；能設(shè)置商品圖片并上傳1商品標(biāo)題的設(shè)置2商品類(lèi)目的設(shè)置3商品屬性編輯4商品描述編輯5商品圖片設(shè)置與上傳4課時(shí) 1 2 3 4（一）常見(jiàn)企業(yè)網(wǎng)站模式（1）信息發(fā)布型 萬(wàn)象企業(yè)公司的網(wǎng)站首頁(yè)（/） 一、網(wǎng)站的模式與定位第一節(jié) 規(guī)劃網(wǎng)站 1 2 3 42.電子商務(wù)型（銷(xiāo)售型）當(dāng)當(dāng)網(wǎng)的示例（/） 要進(jìn)行在線銷(xiāo)售就要使用電子商務(wù)網(wǎng)站，電子商務(wù)型的網(wǎng)站要建立在較高的企業(yè)信息化基礎(chǔ)上，規(guī)模龐大，運(yùn)行費(fèi)用也高。第一節(jié) 規(guī)劃網(wǎng)站圖4-2 “當(dāng)當(dāng)網(wǎng)”首頁(yè)截

4、圖 1 2 3 43.公司門(mén)戶(hù)型（綜合型）典型的門(mén)戶(hù)網(wǎng)站有新浪網(wǎng)、網(wǎng)易和搜狐網(wǎng)等 所謂門(mén)戶(hù)網(wǎng)站，是指通向某類(lèi)綜合性互聯(lián)網(wǎng)信息資源并提供有關(guān)信息服務(wù)的應(yīng)用系統(tǒng)。第一節(jié) 規(guī)劃網(wǎng)站圖4-3 “新浪網(wǎng)”首頁(yè)截圖 1 2 3 44.商務(wù)服務(wù)型：聯(lián)邦快遞公司網(wǎng)站首頁(yè)（） 商務(wù)服務(wù)型網(wǎng)站不同于企業(yè)展示型網(wǎng)站，以提供遠(yuǎn)程、及時(shí)、準(zhǔn)確的商務(wù)服務(wù)為主要目的，比如可實(shí)現(xiàn)渠道分銷(xiāo)管理、終端客戶(hù)銷(xiāo)售管理、合作伙伴管理、網(wǎng)上采購(gòu)管理、實(shí)時(shí)在線售后服務(wù)管理、物流管理等，第一節(jié) 規(guī)劃網(wǎng)站圖4-4 “聯(lián)邦快遞”首頁(yè)截圖 1 2 3 4（二）網(wǎng)站定位 所謂網(wǎng)站定位就是明確網(wǎng)站在互聯(lián)網(wǎng)上扮演什么角色，要向網(wǎng)站的瀏覽者傳達(dá)什么樣的核

5、心概念，透過(guò)網(wǎng)站發(fā)揮什么樣的作用；因此，網(wǎng)站定位相當(dāng)關(guān)鍵，換句話說(shuō)，網(wǎng)站定位是確定網(wǎng)站是做什么用的及網(wǎng)站建設(shè)的策略，而后面我們要將的網(wǎng)站欄目的選擇及網(wǎng)站內(nèi)容提要的制作都圍繞網(wǎng)站定位展開(kāi)。 很多時(shí)候網(wǎng)站運(yùn)營(yíng)不起來(lái)，不是關(guān)鍵詞選擇不正確，也不是自己的能力不足，而是網(wǎng)站建設(shè)推廣前，沒(méi)有給網(wǎng)站制定一個(gè)合適的定位。一個(gè)網(wǎng)站要想成功，必備要素之一就是有一個(gè)清晰的定位，那么網(wǎng)站定位要從哪幾個(gè)方面來(lái)分析呢?網(wǎng)站定位具體內(nèi)容有以下幾個(gè)方面：（1）根據(jù)產(chǎn)品的某些特質(zhì)（2）對(duì)網(wǎng)站的理解（3）根據(jù)用戶(hù)群體分布（4）可行性分析（5）贏利模式第一節(jié) 規(guī)劃網(wǎng)站 1 2 3 4二、網(wǎng)站的主題定位 一個(gè)好的網(wǎng)站、一個(gè)能夠真正受

6、用戶(hù)關(guān)注和歡迎的網(wǎng)站不僅僅只是有精美、華麗的頁(yè)面，更重要的是要有個(gè)準(zhǔn)確鮮明的主題，讓用戶(hù)能夠在你網(wǎng)站上以最快的速度得到或了解他想要的東西，這樣他會(huì)常來(lái)網(wǎng)站，為網(wǎng)站積累人氣。用戶(hù)就是流量，流量就是網(wǎng)站的血液，有了血液網(wǎng)站才會(huì)持久的生存下去。所以我們做網(wǎng)站一定要突出主題，不要過(guò)于追求好看華麗的頁(yè)面，我們要注重內(nèi)容?？梢钥茨切┮呀?jīng)成功的網(wǎng)站，他們的頁(yè)面都是相當(dāng)簡(jiǎn)單、大眾化的。給用戶(hù)的直觀感受很好，如果頁(yè)面過(guò)于耀眼反而會(huì)讓用戶(hù)流走。那么網(wǎng)站策劃初期，我們應(yīng)該如何精確定位網(wǎng)站主題呢? 網(wǎng)站主題定位決定網(wǎng)站的成敗。因此，一開(kāi)始就應(yīng)該確定好主題，而不是半途修改。再次，如果是企業(yè)網(wǎng)站如何定位主題呢？這個(gè)很簡(jiǎn)單

7、做什么的就主題就定位成什么。第一節(jié) 規(guī)劃網(wǎng)站1主題要小而精2域名的選擇 1 2 3 4三、網(wǎng)站的欄目選擇 伴隨互聯(lián)網(wǎng)的普及， 企業(yè)網(wǎng)站建設(shè)已經(jīng)成為企業(yè)信息化建設(shè)的重要組成部分，是企業(yè)宣傳營(yíng)銷(xiāo)的重要工具，網(wǎng)站欄目是一個(gè)網(wǎng)站的大綱索引，企業(yè)網(wǎng)站的欄目設(shè)計(jì)要明白顯示出企業(yè)想表達(dá)的主題。1企業(yè)網(wǎng)站欄目設(shè)計(jì)的要點(diǎn)第一節(jié) 規(guī)劃網(wǎng)站（1）要緊扣主題（2）設(shè)立最近更新或網(wǎng)站指南欄目（3）設(shè)立下載或常見(jiàn)問(wèn)題答復(fù)欄目（4）設(shè)立可以雙向交換的欄目（5）面向不同目標(biāo)細(xì)分頁(yè)面欄目設(shè)計(jì) 1 2 3 42確定網(wǎng)站欄目的技巧 站點(diǎn)的欄目規(guī)劃簡(jiǎn)單地說(shuō)就是確定站點(diǎn)的邏輯結(jié)構(gòu)，企業(yè)用戶(hù)應(yīng)該如何確定自己的欄目，主要有以下幾種辦法。（

8、1）借鑒同行網(wǎng)站 上網(wǎng)搜索10個(gè)以上與本企業(yè)相似的企業(yè)網(wǎng)站，每個(gè)網(wǎng)站都有的欄目一定要加上；70%以上網(wǎng)站都有的欄目可以考慮加上；50%網(wǎng)站有的欄目在詢(xún)問(wèn)客戶(hù)意見(jiàn)后，再?zèng)Q定是否采用此欄目。50%以下網(wǎng)站有的欄目要注意了，這類(lèi)欄目：一是用處不大的欄目，二是特色欄目，你要根據(jù)情況再三斟酌，而后決定。第一節(jié) 規(guī)劃網(wǎng)站 1 2 3 4（2）突出自己特色第一節(jié) 規(guī)劃網(wǎng)站圖4-5 “廣東省人民政府應(yīng)急管理辦公室”網(wǎng)站欄目截圖（3）注意SEO優(yōu)化圖4-6 百度搜索“企業(yè)”兩字的截圖 1 2 3 4（三）企業(yè)網(wǎng)站的基礎(chǔ)欄目 所有的企業(yè)網(wǎng)站有一個(gè)基本的框架。例如，關(guān)于我們、聯(lián)系我們、服務(wù)中心、成功案例，這幾個(gè)內(nèi)容

9、是基本不變的，最多是名稱(chēng)上的變化，如成功案例也可以寫(xiě)成是公司業(yè)績(jī)，也可以是企業(yè)案例，不過(guò)只是換個(gè)名字。一般企業(yè)網(wǎng)站可以包含以下幾個(gè)欄目。（1）企業(yè)概況（2）產(chǎn)品信息（3）榮譽(yù)證書(shū)和專(zhuān)家、用戶(hù)推薦（4）公司動(dòng)態(tài)和媒體報(bào)道（5）產(chǎn)品搜索：（6）產(chǎn)品價(jià)格表（7）聯(lián)系信息（8）輔助信息（9）服務(wù)信息第一節(jié) 規(guī)劃網(wǎng)站圖4-7 “中聯(lián)重科股份有限公司”網(wǎng)站欄目截圖四、網(wǎng)站的內(nèi)容提要 網(wǎng)站內(nèi)容是整個(gè)網(wǎng)站的基礎(chǔ)，一個(gè)具有良好內(nèi)容的網(wǎng)站不僅僅利于用戶(hù)體驗(yàn)，而且也對(duì)網(wǎng)站的優(yōu)化起到重要作用。因此在網(wǎng)站優(yōu)化過(guò)程中，網(wǎng)站內(nèi)容的質(zhì)量越高，網(wǎng)站就會(huì)越容易被收錄，從而有效地提高網(wǎng)站排名。隨著網(wǎng)站內(nèi)容質(zhì)量的重要性提高，內(nèi)容的發(fā)

10、布編輯也是越來(lái)越規(guī)范。通常我們可以看到一些大型門(mén)戶(hù)網(wǎng)站的內(nèi)容都會(huì)有內(nèi)容提要，而從內(nèi)容摘要中可以看到某些重要信息。而這一點(diǎn)的做法在普通企業(yè)網(wǎng)站內(nèi)容上很少出現(xiàn)，事實(shí)上網(wǎng)站內(nèi)容提要相當(dāng)重要，是不可忽視的。圖4-8所示為網(wǎng)易的內(nèi)容提要。 1 2 3 4 第一節(jié) 規(guī)劃網(wǎng)站 （一）基本流程五、技能訓(xùn)練 廣泛瀏覽同行業(yè)網(wǎng)站進(jìn)行網(wǎng)站的內(nèi)容策劃進(jìn)行網(wǎng)站的欄目策劃進(jìn)行網(wǎng)站內(nèi)容的信息編輯 1 2 3 4 第一節(jié) 規(guī)劃網(wǎng)站（二）實(shí)施步驟 1廣泛瀏覽同行業(yè)網(wǎng)站 瀏覽郁美凈集團(tuán)、奧洛菲官網(wǎng)等企業(yè)網(wǎng)站，結(jié)合相關(guān)知識(shí)內(nèi)容，對(duì)這兩家企業(yè)的網(wǎng)站進(jìn)行內(nèi)容分析，并將相關(guān)內(nèi)容填入表中。公司名稱(chēng)網(wǎng)站地址業(yè)務(wù)分析網(wǎng)站類(lèi)型網(wǎng)站主要欄目網(wǎng)站內(nèi)

11、容提要網(wǎng)站功能分析研究郁美凈集團(tuán)/OLAY玉蘭油/oleva/index.html同行業(yè)網(wǎng)站調(diào)查分析表 1 2 3 4 第一節(jié) 規(guī)劃網(wǎng)站 2“MiTing”，中文名“米婷”，是一家新進(jìn)入中國(guó)市場(chǎng)的化妝品公司，主要采用代理商和專(zhuān)柜等方式對(duì)產(chǎn)品進(jìn)行銷(xiāo)售?，F(xiàn)公司決定建設(shè)一個(gè)銷(xiāo)售型的網(wǎng)站來(lái)樹(shù)立企業(yè)形象，加強(qiáng)產(chǎn)品的宣傳。請(qǐng)幫其分析和規(guī)劃網(wǎng)站類(lèi)型、調(diào)查和確立網(wǎng)站欄目設(shè)置，并針對(duì)網(wǎng)站欄目中的內(nèi)容進(jìn)行信息采集和編輯。根據(jù)這一給定的背景資料，確定“MiTing”公司的網(wǎng)站類(lèi)型、主題定位和欄目，并將結(jié)果填入表中。項(xiàng)目具體內(nèi)容網(wǎng)站類(lèi)型網(wǎng)站目標(biāo)客戶(hù)主題定位網(wǎng)站主要欄目 1 2 3 4 第一節(jié) 規(guī)劃網(wǎng)站 3收集資料，確

12、定公司網(wǎng)站各欄目的主要內(nèi)容，完成下表 。 “MiTing”公司網(wǎng)站欄目?jī)?nèi)容策劃 欄目名稱(chēng)欄目?jī)?nèi)容 1 2 3 4 第一節(jié) 規(guī)劃網(wǎng)站 4根據(jù)任務(wù)一給定的背景資料， 確定的網(wǎng)站內(nèi)容和網(wǎng)站欄目?jī)?nèi)容，對(duì)網(wǎng)站內(nèi)容信息進(jìn)行編輯，完成下表 。 “MiTing”公司網(wǎng)站內(nèi)容信息編輯 項(xiàng)目編輯內(nèi)容網(wǎng)站關(guān)鍵詞（不少于3個(gè)關(guān)鍵詞）內(nèi)容提要（表述清楚；邏輯清晰；內(nèi)容全面） 1 2 3 4一、網(wǎng)頁(yè)的版式設(shè)計(jì)網(wǎng)頁(yè)版式的基本類(lèi)型主要有骨骼型、滿(mǎn)版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱(chēng)型、焦點(diǎn)型、三角型、自由型10種。 （1）骨骼型網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法，類(lèi)似于報(bào)刊的版式。 第二節(jié) 設(shè)計(jì)網(wǎng)站 1 2

13、3 4（2）滿(mǎn)版型頁(yè)面以圖像充滿(mǎn)整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。 1 2 3 4（3）分割型圖 把整個(gè)頁(yè)面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜。 1 2 3 4（4）中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺(jué)。垂直排列的頁(yè)面給人以舒暢的感覺(jué)。 1 2 3 4（5）曲線型圖片、文字在頁(yè)面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。如圖4-13所示。 1 2 3 4（6）傾斜型 頁(yè)面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注

14、目 。 1 2 3 4（7）對(duì)稱(chēng)型 對(duì)稱(chēng)的頁(yè)面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。 對(duì)稱(chēng)分為絕對(duì)對(duì)稱(chēng)和相對(duì)對(duì)稱(chēng)。一般采用相對(duì)對(duì)稱(chēng)的手法，以避免呆板。左右對(duì)稱(chēng)的頁(yè)面版式比較常見(jiàn)。 1 2 3 4（8）焦點(diǎn)型 焦點(diǎn)型的網(wǎng)頁(yè)版式通過(guò)對(duì)視線的誘導(dǎo)，使頁(yè)面具有強(qiáng)烈的視覺(jué)效果。 1 2 3 4 （9）三角型網(wǎng)頁(yè)各視覺(jué)元素呈三角形排列。正三角形（金字塔型）最具穩(wěn)定性，倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感。 1 2 3 4（10）自由型自由型的頁(yè)面具有活潑、輕快的風(fēng)格。 1 2 3 4二、網(wǎng)頁(yè)的導(dǎo)航設(shè)計(jì) 導(dǎo)航欄能讓我們?cè)跒g覽網(wǎng)頁(yè)時(shí)很容易的到達(dá)不同的頁(yè)面，是網(wǎng)頁(yè)元素非常重要的部分。 （1）

15、設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航的基本準(zhǔn)則組織良好的鏈接確保你的鏈接按照重要性有序排列。清晰且鮮明一旦你決定做鏈接，需要考慮把它們置于最優(yōu)位置。導(dǎo)航必須突出且鮮明，把你設(shè)計(jì)的鏈接置于頁(yè)面頂部或左側(cè)這些最搶眼的位置上。連貫性 導(dǎo)航必須清晰且連貫。易于理解 確保鏈接言簡(jiǎn)意賅。DHTML菜單對(duì)于每個(gè)一大堆的分類(lèi)欄和子欄，需要導(dǎo)航菜單來(lái)幫助你組織鏈接。 第二節(jié) 設(shè)計(jì)網(wǎng)站 1 2 3 4（2）幾種常用的導(dǎo)航頂部水平欄導(dǎo)航頂部水平欄導(dǎo)航是當(dāng)前兩種最流行的網(wǎng)站導(dǎo)航菜單設(shè)計(jì)模式之一。 1 2 3 4（2）幾種常用的導(dǎo)航豎直/側(cè)邊欄導(dǎo)航側(cè)邊欄導(dǎo)航的導(dǎo)航項(xiàng)被排列在一個(gè)單列，一項(xiàng)在一項(xiàng)的上面。 1 2 3 4（2）幾種常用的導(dǎo)航出式菜

16、單和下拉菜單導(dǎo)航出式菜單(與豎直/側(cè)邊欄導(dǎo)航一起使用)和下拉菜單(一般與頂部水平欄導(dǎo)航一起使用)是構(gòu)建健壯的導(dǎo)航系統(tǒng)的好方法。 1 2 3 4三、HTML語(yǔ)言 計(jì)算機(jī)領(lǐng)域大部分名詞都是源于英文，HTML也一樣，他是“Hypertext Markup Language”這幾個(gè)英文單詞的首字母縮寫(xiě)，中文意思是“超文本標(biāo)記語(yǔ)言”，它是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言，是網(wǎng)頁(yè)制作人員必須掌握的一門(mén)計(jì)算機(jī)語(yǔ)言。（1）HTML語(yǔ)言簡(jiǎn)介 超級(jí)文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，

17、可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等）。下面我們來(lái)看一小段HTML語(yǔ)言的代碼，來(lái)了解HTML語(yǔ)言的基本結(jié)構(gòu)：HTML語(yǔ)言的基本結(jié)構(gòu)HTML是使用特殊標(biāo)記來(lái)描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語(yǔ)言。將這一小段代碼粘貼至文本文件中，然后選擇“另存為”，將文件的后綴名改為.htm或者.html即可，然后在所在的目錄下就可看到一個(gè)IE的圖標(biāo)，名字就是你所存的文件名稱(chēng)。 第二節(jié) 設(shè)計(jì)網(wǎng)站 1 2 3 4 （2）HTML語(yǔ)言案例制作用HTML語(yǔ)言為網(wǎng)站設(shè)計(jì)一個(gè)簡(jiǎn)單的留言板，程序如下：案例4-1HTML語(yǔ)言設(shè)計(jì)留言板留言板 留 言 板 留言主題： * 1 2 3 4 詳細(xì)

18、描述： * 聯(lián) 系 人： 聯(lián)系電話： * 1 2 3 4 QQ/MSN： 1 3 4四、用Dreamweaver CS6簡(jiǎn)介 Dreamweaver在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域具有強(qiáng)大的功能，且其Web站點(diǎn)架設(shè)可以方便地實(shí)現(xiàn)管理與維護(hù)，簡(jiǎn)單地發(fā)布站點(diǎn)至網(wǎng)絡(luò)網(wǎng)站空間，實(shí)施遠(yuǎn)端維護(hù)等操作，故它不能簡(jiǎn)單地定位為網(wǎng)頁(yè)設(shè)計(jì)軟件。在所見(jiàn)即所得的工作環(huán)境中，Dreamweaver可輕松地創(chuàng)建表格、層和框架，對(duì)網(wǎng)頁(yè)內(nèi)容和資料進(jìn)行完美編排；可以通過(guò)簡(jiǎn)單的圖像轉(zhuǎn)換、動(dòng)態(tài)行為、時(shí)間軸和層的結(jié)合來(lái)制作具有各種視覺(jué)特效的網(wǎng)頁(yè)。（1）Dreamweaver CS6工作界面介紹接下來(lái)讓我們先來(lái)了解下Dreamweaver CS6軟件的基

19、礎(chǔ)啟動(dòng)Dreamweaver CS6在桌面左下角單擊“開(kāi)始”按鈕，在彈出的“開(kāi)始”菜單中執(zhí)行“所有程序 Dreamweaver CS6”命令，或者雙擊桌面的Dreamweaver CS6快捷方式圖標(biāo)即可啟動(dòng)Dreamweaver CS6。 第二節(jié) 設(shè)計(jì)網(wǎng)站 1 3 4認(rèn)識(shí)Dreamweaver CS6的工作界面，如圖4-58所示。 由上圖可以看出，Dreamweaver CS6的工作界面主要由菜單欄、【插入】工具欄、【文檔】工具欄、編輯窗口、狀態(tài)欄、【屬性】面板和各種面板組構(gòu)成。 1 3 4（2）Dreamweaver CS6主要組成部分簡(jiǎn)介【插入】工具欄Dreamweaver CS6的【插入

20、】工具欄中包含了8個(gè)標(biāo)簽，如圖4-59所示。 【文檔】工具欄【文檔】工具欄中包含了代碼視圖、拆分視圖、設(shè)計(jì)視圖、實(shí)時(shí)視圖、實(shí)時(shí)代碼、文檔標(biāo)題、文件管理、瀏覽器預(yù)覽、可視化選項(xiàng)等按鈕，如圖4-60所示。 1 3 4狀態(tài)欄在Dreamweaver CS6狀態(tài)欄中可以顯示當(dāng)前光標(biāo)所在位置的HTML標(biāo)記，通過(guò)此標(biāo)記可以確定所編輯的網(wǎng)頁(yè)內(nèi)容。如圖4-61所示。 【屬性】面板【屬性】面板用于顯示或修改當(dāng)前所選對(duì)象的屬性。如圖4-62所示。 1 3 4面板組面板組是指組合在一起的面板集合，它為我們編輯網(wǎng)頁(yè)提供了既直觀又快速的操作方法，是設(shè)計(jì)制作網(wǎng)頁(yè)時(shí)不可缺少的工具。如圖4-63所示。 1 2 3 4（一）基

21、本流程五、技能訓(xùn)練 第二節(jié) 設(shè)計(jì)網(wǎng)站 1 3 41、Dreamweaver CS6案例制作下面我們?yōu)椤盡iTing”護(hù)膚品公司創(chuàng)建網(wǎng)站并進(jìn)行主頁(yè)面的設(shè)計(jì)。（1）創(chuàng)建站點(diǎn)Dreamweaver CS6提供了兩種創(chuàng)建站點(diǎn)的方法，一是在啟動(dòng)Dreamweaver時(shí)通過(guò)歡迎畫(huà)面創(chuàng)建；二是在Dreamweaver工作環(huán)境下，單擊菜單欄中的【站點(diǎn)】【新建站點(diǎn)】命令。 步驟1：?jiǎn)?dòng)Dreamweaver CS6，則彈出歡迎畫(huà)面，如圖 所示。（二）實(shí)施步驟 1 3 4步驟2：?jiǎn)螕簟綝reamweaver站點(diǎn)】選項(xiàng)，則彈出【的站點(diǎn)定義為】對(duì)話框，在該對(duì)話框中有兩個(gè)標(biāo)簽，其中【基本】標(biāo)簽就是站點(diǎn)定義向?qū)А５?個(gè)對(duì)

22、話框如圖4-65所示，這里有兩個(gè)選項(xiàng)，第1個(gè)選項(xiàng)要求輸入站點(diǎn)名稱(chēng)，以便在Dreamweaver中標(biāo)識(shí)該站點(diǎn)，這里輸入“miting”；第2個(gè)選項(xiàng)要求輸入本地站點(diǎn)文件夾。 1 3 4步驟3：?jiǎn)螕舯４婧?，站點(diǎn)創(chuàng)建成功，建立了本地站點(diǎn)以后，新建的站點(diǎn)將顯示在【文件】面板中。單擊菜單欄中的【窗口】【文件】命令，或者按下F8鍵，可以打開(kāi)【文件】面板。該面板中顯示了本地站點(diǎn)的名稱(chēng)以及本地站點(diǎn)的文件夾等選項(xiàng)，如圖4-70所示。 1 3 4步驟4：?jiǎn)螕簟疚募棵姘逯械摹癿iting”下的管理站點(diǎn)，可以進(jìn)入站點(diǎn)管理對(duì)話框，如圖4-67所示。步驟5：進(jìn)入管理站點(diǎn)對(duì)話框后可對(duì)站點(diǎn)進(jìn)行高級(jí)設(shè)置，如圖4-68所示。 1

23、 3 4（2）添加網(wǎng)頁(yè)文件與站點(diǎn)文件夾在站點(diǎn)中添加網(wǎng)頁(yè)文件與文件夾的方法基本一致，操作步驟如下：步驟1：在【文件】面板中單擊鼠標(biāo)右鍵，則彈出一個(gè)快捷菜單。步驟2：選擇快捷菜單中的【新建文件】命令，則新建了一個(gè)網(wǎng)頁(yè)文件，如圖4-69所示。步驟3：在光標(biāo)位置處輸入網(wǎng)頁(yè)的名稱(chēng)，重命名為index.html，然后按下Enter鍵確認(rèn)，則完成了網(wǎng)頁(yè)文件的添加。步驟4：同樣的方法，如果在彈出的快捷菜單中選擇【新建文件夾】命令，則可以在站點(diǎn)中添加images、flash文件夾。 1 3 4（3）編輯index.html的內(nèi)容步驟1：設(shè)計(jì)網(wǎng)頁(yè)布局，在dreamweaver CS6中可以使用表格、框架、模版、c

24、ss和DIV技術(shù)實(shí)現(xiàn)各種元素在網(wǎng)頁(yè)頁(yè)面上的排版、定位，如圖4-70所示就是利用DIV技術(shù)和表格共同實(shí)現(xiàn)的一個(gè)頁(yè)面設(shè)計(jì)。 1 3 4步驟2：將準(zhǔn)備好的素材插入到相應(yīng)區(qū)域，進(jìn)行產(chǎn)品說(shuō)明及版權(quán)所有的文字編輯，并保存到站點(diǎn)文件夾下，如圖4-71、圖4-72所示。 1 3 4在瀏覽器預(yù)覽效果如圖4-73所示。 第三節(jié) 編輯網(wǎng)店商品信息一、商品標(biāo)題的設(shè)置1關(guān)鍵字類(lèi)型淘寶網(wǎng)上將商品名稱(chēng)的字?jǐn)?shù)限制在30個(gè)漢字（60個(gè)字符）以?xún)?nèi)，關(guān)鍵字越多被搜索到的可能性越大，商品的瀏覽量也會(huì)增加，從而商品的成交率也會(huì)提高。（1）屬性關(guān)鍵字：指介紹商品的類(lèi)別、規(guī)格、功用等介紹商品基本情況的字或者詞。（2）促銷(xiāo)關(guān)鍵字：是指關(guān)于清

25、倉(cāng)、折扣、甩賣(mài)、贈(zèng)禮等信息的字或者詞 （3）品牌關(guān)鍵字：包括商品本身的品牌和我們店鋪的品牌兩種 （4）評(píng)價(jià)關(guān)鍵字：主要作用是人產(chǎn)生一種心理暗示，一般都是正面的、褒義的形容詞。 第三節(jié) 編輯網(wǎng)店商品信息2關(guān)鍵字的組合根據(jù)上面關(guān)鍵字的分類(lèi)，在商品發(fā)布的時(shí)候，商品名稱(chēng)可以由兩種以上的關(guān)鍵字來(lái)進(jìn)行組合，例如：促銷(xiāo)關(guān)鍵字 屬性關(guān)鍵字。品牌關(guān)鍵字 屬性關(guān)鍵字。評(píng)價(jià)關(guān)鍵字 屬性關(guān)鍵字。從上面這三種組合方式我們又可以得到更多種組合方式，例如：促銷(xiāo)關(guān)鍵字品牌關(guān)鍵字屬性關(guān)鍵字。品牌關(guān)鍵字評(píng)價(jià)關(guān)鍵字屬性關(guān)鍵字。評(píng)價(jià)關(guān)鍵字促銷(xiāo)關(guān)鍵字屬性關(guān)鍵字。如圖4-75所示 。 第三節(jié) 編輯網(wǎng)店商品信息 第三節(jié) 編輯網(wǎng)店商品信息二

26、、商品類(lèi)目的設(shè)置為了方便顧客在站內(nèi)對(duì)商品進(jìn)行分類(lèi)查找，商家將商品分為不同的屬性類(lèi)目，發(fā)布的所有商品都會(huì)選擇一個(gè)相應(yīng)的類(lèi)目屬性。類(lèi)目設(shè)置可以遵循以下三個(gè)原則：1根據(jù)自己的行業(yè)經(jīng)驗(yàn)進(jìn)行分類(lèi)。2參考同等行的分類(lèi)。3同樣的商品可以按照不同的規(guī)則設(shè)置不同的分類(lèi)。 第三節(jié) 編輯網(wǎng)店商品信息三、商品屬性編輯商品屬性編輯應(yīng)突出商品使用價(jià)值的基本屬性。商品的基本屬性相對(duì)較固定，可以參照常用電子商務(wù)平臺(tái)上相同商品屬性描述進(jìn)行設(shè)置。如圖4-77所示。 第三節(jié) 編輯網(wǎng)店商品信息四、商品描述編輯精美的商品圖片吸引消費(fèi)者點(diǎn)擊瀏覽商品，能否使消費(fèi)者滿(mǎn)意商品描述至關(guān)重要，所以要在商品描述里補(bǔ)充名稱(chēng)及圖片沒(méi)能完整表達(dá)出來(lái)的內(nèi)容

27、，讓消費(fèi)者在購(gòu)買(mǎi)之前對(duì)商品有更全面和客觀的了解。商品描述里可以添加以下幾部?jī)?nèi)容：1型號(hào)規(guī)格如圖4-78所示的商品品牌、型號(hào)、功率、功能等信息一目了然，這些都是顧客最想了解的信息，應(yīng)該放在商品描述的最前面。 2交易說(shuō)明一般可以用“買(mǎi)家必讀”、“購(gòu)物須知”等方式來(lái)體現(xiàn),如圖4-80所示。3配送說(shuō)明配送說(shuō)明是指關(guān)于郵寄的費(fèi)用和物流配送周期的說(shuō)明，預(yù)先告知顧客既是商家的職責(zé)，也是優(yōu)質(zhì)服務(wù)的一種體現(xiàn)。如圖4-81 4服務(wù)保障服務(wù)保障包括質(zhì)量承諾、售后維修、會(huì)員優(yōu)惠等信息，這些信息既是給顧客安全感也是用返利的方式來(lái)增加店鋪的黏性，如圖4-82所示。 5相關(guān)信息相關(guān)信息里面的內(nèi)容可以非常豐富，一切有利于銷(xiāo)售的、有利于體現(xiàn)商家專(zhuān)業(yè)性的內(nèi)容都可以放在這部分內(nèi)容里。如促銷(xiāo)活動(dòng)介紹、品牌文化、專(zhuān)業(yè)的商品包裝等。美的面包機(jī)商品描述中的包含了面包機(jī)的教學(xué)視頻，這樣方便顧客學(xué)習(xí).如圖4-83。 第三節(jié) 編輯網(wǎng)店商品信息五、商品圖片設(shè)置與上傳一張合格的商品圖片基本上需要滿(mǎn)足以下幾個(gè)要求：第一，畫(huà)面、用光和構(gòu)圖要有視覺(jué)上的美感。第二，