項(xiàng)目六-創(chuàng)建電子商務(wù)網(wǎng)站站點(diǎn)

1、項(xiàng)目六 創(chuàng)建電子商務(wù)網(wǎng)站站點(diǎn)主要內(nèi)容項(xiàng)目引導(dǎo)項(xiàng)目任務(wù)書項(xiàng)目任務(wù)實(shí)施1233項(xiàng)目任務(wù)分析4自學(xué)與拓展35項(xiàng)目引導(dǎo)網(wǎng)站站點(diǎn)怎樣設(shè)計(jì)和創(chuàng)建？站點(diǎn)的設(shè)計(jì)與創(chuàng)建是網(wǎng)站設(shè)計(jì)與制作的準(zhǔn)備工作，目的是對(duì)整個(gè)網(wǎng)站很好的管理，理清網(wǎng)站欄目的層次結(jié)構(gòu)，各個(gè)網(wǎng)頁、網(wǎng)頁元素之間的關(guān)系。本項(xiàng)目將通過對(duì)浙江內(nèi)利信息技術(shù)有限公司的企業(yè)形象展示網(wǎng)站站點(diǎn)的設(shè)計(jì)與創(chuàng)建來使學(xué)生掌握站點(diǎn)的設(shè)計(jì)與創(chuàng)建的要點(diǎn)。項(xiàng)目任務(wù)書能力目標(biāo)學(xué)習(xí)完本項(xiàng)目后，學(xué)生應(yīng)當(dāng)能夠依據(jù)網(wǎng)站的規(guī)劃進(jìn)行站點(diǎn)的總體設(shè)計(jì)、創(chuàng)建與管理，包括：1)規(guī)劃網(wǎng)站結(jié)構(gòu)及文件設(shè)置2)創(chuàng)建本地站點(diǎn)及管理文件夾3)在管理站點(diǎn)中新建空白網(wǎng)頁和文件夾知識(shí)目標(biāo) 1）網(wǎng)站結(jié)構(gòu)設(shè)計(jì)的注意要點(diǎn) 2）網(wǎng)

2、站文件目錄的分類 3)Dreamweaver中站點(diǎn)的創(chuàng)建步驟 4)Dreamweaver中站點(diǎn)的管理項(xiàng)目任務(wù)引導(dǎo)任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄本任務(wù)目標(biāo)是根據(jù)網(wǎng)站規(guī)劃給浙江內(nèi)利信息技術(shù)有限公司的企業(yè)形象展示網(wǎng)站做結(jié)構(gòu)設(shè)計(jì)與文件目錄設(shè)計(jì),效果如下圖所示。項(xiàng)目任務(wù)實(shí)施任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄 1.網(wǎng)站結(jié)構(gòu)規(guī)劃 網(wǎng)站的欄目設(shè)計(jì)都是基于企業(yè)建站的目的所考慮的。本項(xiàng)目中的網(wǎng)站類型是立足于企業(yè)形象展示，為用戶提供方便的溝通平臺(tái)等功能。為了使網(wǎng)站結(jié)構(gòu)層次清晰、導(dǎo)航明晰，往往需要設(shè)置整體網(wǎng)站的導(dǎo)航欄，網(wǎng)站欄目的設(shè)計(jì)也就是該導(dǎo)航欄的欄目設(shè)計(jì)。根據(jù)這個(gè)特點(diǎn)，從前面項(xiàng)目的規(guī)劃可以做出如下的欄目設(shè)計(jì)：1）關(guān)于內(nèi)利，

3、主要引導(dǎo)訪問者了解公司的基本簡(jiǎn)介、組織結(jié)構(gòu)、企業(yè)文化、展示企業(yè)的背景，規(guī)模以及感興趣的訪問者如何聯(lián)系公司。這里分別設(shè)置了“公司簡(jiǎn)介”、“公司文化”和“聯(lián)系我們”三個(gè)子欄目?jī)?nèi)容來具體展示。2）內(nèi)利新聞，引導(dǎo)訪問者了解公司的最新動(dòng)態(tài)。這里通過“媒體報(bào)道”和“內(nèi)部新聞”一外一里兩個(gè)子欄目的內(nèi)容來展示。3）招賢納士，主要用來刊登招聘信息的欄目?jī)?nèi)容。4）加盟內(nèi)利，這個(gè)是主要欄目，作用是公司主營(yíng)業(yè)務(wù)的展示，內(nèi)利卡的推廣。通過子欄目“加盟條件”、“加盟回報(bào)”、“加盟流程”、“加盟資料下載”和“特約加盟商戶”來展示為何來加入內(nèi)利卡，如何加入以及加入的對(duì)象等內(nèi)容。5）內(nèi)利卡，主要引導(dǎo)訪問者了解內(nèi)利卡是起什么作用

4、的。通過子欄目“什么是內(nèi)利卡”、“內(nèi)利卡使用手冊(cè)”和“常見問題”來具體介紹內(nèi)利卡。6）內(nèi)利商城，引導(dǎo)訪問者去超鏈接訪問“內(nèi)利商城”網(wǎng)站。項(xiàng)目任務(wù)實(shí)施任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄2.網(wǎng)站結(jié)構(gòu)圖 將規(guī)劃的網(wǎng)站結(jié)構(gòu)用網(wǎng)站結(jié)構(gòu)圖來表示，一目了然，方便與客戶間溝通交流。網(wǎng)站結(jié)構(gòu)圖可以用前面項(xiàng)目掌握的Photoshop技能來制作。本任務(wù)中則使用Word繪制網(wǎng)站欄目結(jié)構(gòu)圖，使用Word繪制便于直接用于各種文檔以及復(fù)制粘貼到PPT上。（2）插入形狀。選中組織結(jié)構(gòu)圖，出現(xiàn)“組織結(jié)構(gòu)圖”工具欄、，利用工具欄上的“插入形狀”下拉列表，選擇可插入各文本框所屬的形狀（下屬、同事、助手）。（1）打開一個(gè)Word文檔，插入

5、“組織結(jié)構(gòu)圖”。單擊“插入”菜單，在“圖片”選項(xiàng)列表中選取“組織結(jié)構(gòu)圖”項(xiàng)目任務(wù)實(shí)施任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄按二級(jí)欄目要求，在原有3個(gè)形狀上，添加4個(gè)形狀。再分別對(duì)應(yīng)添加三級(jí)欄目。再通過“組織結(jié)構(gòu)圖”工具欄的“自動(dòng)版式”調(diào)整各文本框所屬的形狀的位置和大小項(xiàng)目任務(wù)實(shí)施任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄（3）添加欄目文字。單擊各文本框，添加相應(yīng)的欄目名稱。（4）自動(dòng)套用格式。選中組織結(jié)構(gòu)圖，再單擊工具欄上的“自動(dòng)套用格式”按鈕 ，彈出“組織結(jié)構(gòu)圖樣式庫”在左側(cè)“選擇圖示樣式”列表中選擇“三維顏色”，點(diǎn)擊“確定”按鈕套用圖示樣式，完成網(wǎng)站結(jié)構(gòu)圖的繪制，并保存文檔。項(xiàng)目任務(wù)實(shí)施任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目

6、錄 3.網(wǎng)站文件目錄結(jié)構(gòu)設(shè)計(jì) 網(wǎng)站往往包含很多文件，企業(yè)網(wǎng)站也是如此。初學(xué)者常將所有的文件混雜放置在根目錄下，則整個(gè)站點(diǎn)將顯得雜亂無章。建立網(wǎng)站的目錄結(jié)構(gòu)就是為了“分門別類”地存放這些文件，便于整個(gè)網(wǎng)站的維護(hù)和管理。 首先在E盤創(chuàng)建一個(gè)文件夾“neili”用于存放整個(gè)網(wǎng)站文件。然后在“neili”的根目錄下分別創(chuàng)建文件夾“images”存放圖像、“CSS”存放樣式文件、“flash”存放flash文件、“audio”存放音頻文件。再分別創(chuàng)建“about”、“news”、“job”、“chain”、“card”和“shop”分別對(duì)應(yīng)存放“關(guān)于內(nèi)利”、“內(nèi)利新聞”、“招賢納士”、“加盟內(nèi)利”、“內(nèi)

7、利卡”和“內(nèi)利商城”這些二級(jí)欄目的文件。如果圖像很多，可以在各個(gè)二級(jí)欄目文件夾中分別創(chuàng)建“images”文件夾來存放這些欄目頁面對(duì)應(yīng)的圖像。整體文件目錄結(jié)構(gòu)如圖項(xiàng)目任務(wù)實(shí)施任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄 任務(wù)分析 1.企業(yè)網(wǎng)站欄目規(guī)劃重要性網(wǎng)站欄目規(guī)劃對(duì)于企業(yè)網(wǎng)站建設(shè)的是否成功有著非常直接的關(guān)系，而現(xiàn)實(shí)中相對(duì)于網(wǎng)站頁面及功能規(guī)劃，網(wǎng)站欄目規(guī)劃的重要性常被忽略。網(wǎng)站欄目的設(shè)置主要可以考慮以下方面：（1）突出主題，點(diǎn)題明義（2）考慮到用戶體驗(yàn)，清晰導(dǎo)航（3）方便溝通，人性化設(shè)計(jì)2.三次點(diǎn)擊規(guī)則所謂的“三次點(diǎn)擊”原則，這是從用戶體驗(yàn)角度歸納得出的，即一般用戶在尋找目標(biāo)內(nèi)容的時(shí)候一般不愿連續(xù)點(diǎn)擊三次。正

8、是基于這樣，一般用于作為一個(gè)網(wǎng)站欄目鏈接的指導(dǎo)原則，盡可能使網(wǎng)站“鏈接結(jié)構(gòu)”扁平化。也就是從首頁開始，借助導(dǎo)航欄或者分類列表等，使網(wǎng)站內(nèi)的任意內(nèi)容可以經(jīng)3次點(diǎn)擊即可到達(dá)。如“首頁”到“欄目”到“分類信息”到具體“內(nèi)容頁”。這樣的欄目設(shè)置，也是便于搜索引擎能夠很好的抓取。也就是說一個(gè)電子商務(wù)網(wǎng)站從首頁到最終的內(nèi)容頁不要超過級(jí)目錄。自學(xué)與拓展任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄1.網(wǎng)站地圖 網(wǎng)站地圖（Sitemap），本身就是一個(gè)頁面，上面放置了整個(gè)網(wǎng)站上所有頁面的鏈接。大多數(shù)人在網(wǎng)站上找不到自己所需要的信息時(shí)，可能將網(wǎng)站地圖作為一種補(bǔ)救措施。網(wǎng)站地圖對(duì)于搜索引擎蜘蛛非常有用。中國(guó)移動(dòng)通信的網(wǎng)站地圖,如圖

9、所示。自學(xué)與拓展任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄2.信息閉環(huán)設(shè)計(jì)信息閉環(huán)設(shè)計(jì)，就是通過訪問者進(jìn)入的最終內(nèi)容頁，進(jìn)行關(guān)聯(lián)推薦或者匹配，引導(dǎo)用戶繼續(xù)瀏覽而不用進(jìn)行返回性質(zhì)的操作。常見的情況就是在瀏覽門戶新聞的時(shí)候再該新聞下方往往都會(huì)看到相關(guān)新聞列表。以當(dāng)當(dāng)網(wǎng)中的具體一本書的頁面為例來看信息閉環(huán)設(shè)計(jì)，如圖所示。自學(xué)與拓展任務(wù)一創(chuàng)建網(wǎng)站結(jié)構(gòu)及文件目錄習(xí)題1.分析京東商城一類的電子商務(wù)網(wǎng)站的欄目結(jié)構(gòu)設(shè)計(jì)的特點(diǎn)。 2.了解SEO對(duì)電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計(jì)上的一些基本要求。項(xiàng)目任務(wù)引導(dǎo)任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)本任務(wù)目標(biāo)通過Dreamweaver來創(chuàng)建內(nèi)利企業(yè)形象網(wǎng)站的站點(diǎn)并進(jìn)行站點(diǎn)管理。項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管

10、理網(wǎng)站的站點(diǎn)1.創(chuàng)建本地站點(diǎn)文件夾在本地磁盤中創(chuàng)建一個(gè)用來存放站點(diǎn)文件的文件夾，然后在該文件夾中再創(chuàng)建一個(gè)圖像文件夾用來存放網(wǎng)站中的圖像。本任務(wù)中運(yùn)用上任務(wù)創(chuàng)建的網(wǎng)站文件夾“neili”。項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)2.運(yùn)行Dreamweaver通過點(diǎn)擊Dreamweaver軟件的圖標(biāo)運(yùn)行，在起始頁對(duì)話框選擇“新建”下的“HTML”選項(xiàng) ，系統(tǒng)打開一個(gè)未命名的空白文檔窗口，整個(gè)工作界面如圖6-11所示。Dreamweaver軟件的運(yùn)用和Photoshop類似，也是通過各類浮動(dòng)工作面板或者菜單選項(xiàng)來完成的。項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)3.創(chuàng)建網(wǎng)站站點(diǎn) 在“文件”面板中單擊“管

11、理站點(diǎn)”，在彈出的“管理站點(diǎn)”對(duì)話框中選擇“新建”按鈕項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn) 在彈出的“站點(diǎn)定義為”選項(xiàng)卡中切換至“高級(jí)”卡。在選項(xiàng)卡中，主要設(shè)置“站點(diǎn)名稱”，在文本框中輸入要?jiǎng)?chuàng)建的網(wǎng)站名稱?！氨镜馗募A”，輸入創(chuàng)建本地站點(diǎn)文件夾的路徑?！澳J(rèn)圖像文件夾”，在文本框中輸入創(chuàng)建本地站點(diǎn)文件夾中默認(rèn)存放圖像的文件夾路徑，可以使網(wǎng)頁中引用的站點(diǎn)外圖像自動(dòng)保存至“默認(rèn)圖像文件夾”。其余設(shè)置可按默認(rèn)設(shè)置，最后點(diǎn)擊“確定”按鈕完成設(shè)置。設(shè)置完成后，可在“管理站點(diǎn)”對(duì)話框中看到所設(shè)站點(diǎn)的名稱，最后再點(diǎn)擊“完成”按鈕。項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)完成點(diǎn)擊后，可通過該面板右鍵單擊創(chuàng)建

12、“新建文件”網(wǎng)頁和“新建文件夾”。項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)4.保存網(wǎng)頁文件 點(diǎn)擊“文件”菜單中的“保存”，在彈出的對(duì)話框中選擇存放位置。完成網(wǎng)站站點(diǎn)創(chuàng)建后，網(wǎng)頁文件會(huì)被默認(rèn)保存在站點(diǎn)創(chuàng)建的本地根文件夾中，在文件名后的文本框中輸入“index.html”，然后點(diǎn)擊“保存”按鈕項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)5.站點(diǎn)的管理對(duì)已建好的站點(diǎn)進(jìn)行管理,可以通過點(diǎn)擊“站點(diǎn)”菜單的“管理站點(diǎn)”彈出對(duì)話框，如圖6-17所示。通過點(diǎn)擊“編輯”按鈕，可以對(duì)該站點(diǎn)的設(shè)置重新進(jìn)行修改。若當(dāng)前有多個(gè)站點(diǎn)，可以通過鼠標(biāo)在左側(cè)站點(diǎn)名稱的列表中進(jìn)行選擇切換至對(duì)應(yīng)站點(diǎn)的狀態(tài)。項(xiàng)目任務(wù)實(shí)施任務(wù)二創(chuàng)建與管理網(wǎng)站

13、的站點(diǎn)通過“導(dǎo)出”按鈕，可以將選中的站點(diǎn)相關(guān)設(shè)置信息以擴(kuò)展名為.ste的文件形式保存。當(dāng)需要時(shí)，可以再通過“導(dǎo)入”按鈕將該文件導(dǎo)入，導(dǎo)入后就不用再重新設(shè)置站點(diǎn)信息。 1.Dreamweaver 工作流程 Dreamweaver 是一個(gè)可視化的網(wǎng)站開發(fā)工具，可以輔助人們快捷方便的進(jìn)行網(wǎng)頁編輯。使用Dreamweaver來創(chuàng)建一個(gè)網(wǎng)站的流程包括： 規(guī)劃和設(shè)置站點(diǎn)，即確定將在哪里發(fā)布文件，網(wǎng)站訪問者的情況以及站點(diǎn)目標(biāo)。在組織好信息并確定結(jié)構(gòu)后，就可以開始創(chuàng)建站點(diǎn)。 組織和管理站點(diǎn)文件，創(chuàng)建站點(diǎn)后，在“文件”面板中，可以進(jìn)行添加、刪除和重命名文件及文件夾，以便根據(jù)需要更改組織結(jié)構(gòu)。 設(shè)計(jì)網(wǎng)頁布局，選擇

14、使用的布局方法?？删C合使用 Dreamweaver AP 元素、CSS 定位樣式或預(yù)先設(shè)計(jì)的 CSS 布局來創(chuàng)建布局。也可利用表格工具，通過繪制并重新安排頁面結(jié)構(gòu)來快速地設(shè)計(jì)頁面。如果希望同時(shí)在瀏覽器中顯示多個(gè)元素，也可以使用框架來設(shè)計(jì)您的文檔的布局。最后，可以基于 Dreamweaver 模板創(chuàng)建新的頁面，然后在模板更改時(shí)自動(dòng)更新這些頁面的布局。項(xiàng)目任務(wù)分析任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn)項(xiàng)目任務(wù)分析任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn) 向頁面添加內(nèi)容，完成布局后，則進(jìn)行網(wǎng)頁元素的添加，如文本、圖像、鼠標(biāo)經(jīng)過圖像、超鏈接等。最后，Dreamweaver 還提供測(cè)試頁面是否確保能夠兼容不同的 Web 瀏覽器。

15、 通過手動(dòng)編碼創(chuàng)建頁面，是創(chuàng)建頁面的另一種方法。同時(shí)對(duì)于一些具體網(wǎng)頁內(nèi)容，可能也需要通過手動(dòng)編碼進(jìn)行微調(diào)。Dreamweaver 提供了易于使用的可視化編輯工具，但同時(shí)也提供了高級(jí)的編碼環(huán)境來創(chuàng)建和編輯頁面。 測(cè)試和發(fā)布，測(cè)試頁面是在整個(gè)開發(fā)周期中進(jìn)行的一個(gè)持續(xù)的過程。在這一工作流程的最后，在服務(wù)器上發(fā)布該站點(diǎn)。許多開發(fā)人員還會(huì)安排定期的維護(hù)，以確保站點(diǎn)保持最新并且工作正常。1.“文件”面板“文件”面板也是Dreamweaver最常用也是最主要的面板之一。它集成了站點(diǎn)管理的各種工具。在“文件”面板中點(diǎn)選最右側(cè)的展開/折疊站點(diǎn)圖標(biāo) ，展開完整“文件”面板自學(xué)與拓展任務(wù)二創(chuàng)建與管理網(wǎng)站的站點(diǎn) 2.Dream