項目六-創(chuàng)建電子商務網站站點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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