電子商務網頁制作-項目五

1、項目五創(chuàng)建與管理網站站點項目綜述 本項目以內利商城為主線,介紹了該網站在制作前期如何進行站點的規(guī)劃、創(chuàng)建與管理。 項目目標能力目標：學習完本項目后,學生應當能夠依據(jù)網站的規(guī)劃進行站點的總體設計、創(chuàng)建與管理,包括:(1)規(guī)劃網站欄目及文件目錄設置。(2)創(chuàng)建本地站點及管理站點文件。知識目標：(1)網站欄目設計規(guī)范。(2)網站文件目錄的分類。(3)Dreamweaver中站點的創(chuàng)建步驟。(4)Dreamweaver中站點的管理方法。Part 01任務一網站文件目錄的創(chuàng)建任務引導 創(chuàng)建網站和制作網頁不同，網站具有整體性，有統(tǒng)一鮮明的主題。根據(jù)相應的主題和需求，決定了整個站點的構成。網站設計是否成功與

2、建站前的規(guī)劃有著極為重要的關系。通過網站規(guī)劃確定了網站的主題、功能和整體結構后，這才便于后續(xù)網站頁面模板的設計與制作。 任務實施1.電商形象展示網站結構的規(guī)劃2. 電商形象展示網站結構的制作知識分析1.網站規(guī)劃的市場調研 網站的規(guī)劃是指在網站建設前確定好網站的主題和功能目標后，對網站目標定位，進行的內容規(guī)劃和功能規(guī)劃。其中直接的表現(xiàn)就是網站結構的規(guī)劃，特別對于網站前端部分而言，更為關注的是網站的欄目設計。 對于確定網站的主題和功能目標而言。就是明確該電商企業(yè)網站建立的目標是企業(yè)形象展示，還是用于與用戶之間進行交互、社群營銷改進服務；還是單純要實現(xiàn)網絡營銷與在線交易為主的。其次，是分析考慮企業(yè)自

3、身的經營狀況，包括企業(yè)的主營產品的情況，消費市場的認知程度以及所處行業(yè)狀況。最后再進行可行性分析評估。知識分析2.網站欄目的要點 回到網站欄目規(guī)劃，可以說它對于企業(yè)網站建設是否成功有著非常直接的關系，而現(xiàn)實中相對于網站頁面及功能規(guī)劃，網站欄目規(guī)劃的重要性常被忽略。網站欄目的設置主要可以考慮以下幾個方面： 突出主題，點題明義。 考慮到用戶體驗，清晰導航。 方便溝通，人性化設計。 在具體的網站欄目規(guī)劃上，扁平化原則是經常被提到的。知識分析3.網站結構圖 網站結構圖還可以包含網站的鏈接結構。網站的鏈接結構是指頁面之間相互鏈接的結構。不同網頁之間通常具有一定的邏輯關系，比如先后關系、包含關系、并列關系

4、等，多個網頁按照它們之間的邏輯關系組織在一起就形成了各種鏈接結構。我們分析網站的鏈接結構的目的在于：用最少的鏈接，使得瀏覽最有效率。通常網站所用的鏈接結構有三種，最常用的是層次型結構，其次是線型結構和網絡型結構。知識分析4.網站文件目錄結構設計 網站的目錄是指建立站點時創(chuàng)建的目錄。網站目錄結構直接體現(xiàn)于URL。清晰簡短的目錄結構和規(guī)范的命名不僅有利于用戶體驗和網址傳播,更是搜索引擎友好的體現(xiàn)。其設計要點如下: 對于小型網站而言,一般只有一層子目錄； 對于中大型網站,往往需要二到三層子目錄。拓展練習 1.網站目錄結構優(yōu)化要點 （1）目錄結構扁平化趨勢 （2）制作網站地圖 2.網站地圖制作 （1）

5、網站頁面繁多 （2）網站缺乏足夠外鏈 （3）網站結構太深 （4）網站動態(tài)頁面較多 （5）網站更新頻繁習題1.通過對中國移動浙江站（）進行分析其欄目，畫出組織結構圖。并查看其網站地圖頁面（/sitemap）進行分析。2.類似于京東這類綜合電商商城其組織結構是如何考慮的，是否會考慮網站地圖。Part 02任務二創(chuàng)建與管理網站的站點任務引導 無論是創(chuàng)建網站還是制作網頁，都應該先在本地計算機上通過Dreamweaver軟件來創(chuàng)建站點。使用站點管理可以對網頁文檔、樣式表文件、頁面素材進行更好規(guī)劃化的管理，能夠極大的提高網頁制作的效率，特別是在后期維護時。 任務實施1.創(chuàng)建本地站點文件夾2.設計網站文件目

6、錄結構3. 打開Dreamweaver CC2018軟件4.創(chuàng)建內利商城站點5.站點的管理6.保存網頁文件知識分析 1.Dreamweaver的認知 Dreamweaver 是一個可視化的網站開發(fā)工具，可以輔助人們快捷、方便地進行網頁編輯。使用Dreamweaver來創(chuàng)建一個網站的流程包括：規(guī)劃和設置站點，即確定將在哪里發(fā)布文件，網站訪問者的情況以及站點目標。在組織好信息并確定結構后，就可以開始創(chuàng)建站點。組織和管理站點文件，創(chuàng)建站點后，在“文件”面板中，可以進行添加、刪除和重命名文件及文件夾，以便根據(jù)需要更改組織結構。 設計網頁布局，選擇使用的布局方法。可綜合使用CSS定位樣式或預先設計的CS

7、S布局來創(chuàng)建布局。也可利用表格工具，通過繪制并重新安排頁面結構來快速設計頁面。知識分析 2. Dreamweaver工作區(qū)域 Dreamweaver與Photoshop一樣，是浮動面板風格，可以拖動或調整它們的位置和組合，創(chuàng)建和編輯中的網頁顯示在“文檔”窗口。Windows風格的菜單欄可以執(zhí)行和浮動面板一樣的操作。3. 文件面板 除了菜單命令，浮動面板是Dreamweaver的另一個主要的操作方法。有著不同的面板操作來實現(xiàn)與菜單命令的對應。而這些面板組可以通過選擇“窗口”菜單中的面板名稱，顯示或隱藏面板組或面板。將這些面板疊加后便形成了面板組。知識分析4. 插入面板 “插入”面板，可以將各種類

8、型的網頁元素（例如圖像、表格、Flash等）插入文檔中。同樣面板組中的操作也能通過菜單操作實現(xiàn)，正如前面所表述的“插入”面板的操作也能通過“插入”菜單來實現(xiàn)。5. 文檔工具欄和文檔窗口 “文檔”工具欄，默認打開，在“窗口”菜單的“工具欄”命令中，主要是提供“文檔”窗口視圖的三種基本模式，即“設計”視圖、“拆分”視圖和“代碼”視圖，其中“設計”視圖可以下拉選擇“實時視圖”。知識分析6. 屬性面板 屬性面板，用于查看和更改所選取的對象的各種屬性的面板。對象不同，屬性面板也會不同。也就是當選擇的頁面元素不同時，屬性面板的顯示，可設置的內容也會隨之變化。7. Dreamweaver幫助系統(tǒng) Dream

9、weaver提供了操作方便、完善的幫助系統(tǒng)?？梢酝ㄟ^“幫助”菜單打開，可以在各面板中單擊“?”圖標打開有關該面板的幫助?？梢酝ㄟ^目錄系統(tǒng)進行查詢，也可以通過索引和關鍵字搜索來尋找所需的幫助內容。拓展練習1.新的Dreamweaver版本支持多顯示器 該功能可以為 Windows 提供多顯示器支持。讓用戶可以同時使用多個顯示器。這樣可以使用戶在一個顯示器中查看實時預覽，同時在另一個顯示器中編輯代碼。也可以讓文檔窗口不再以選項卡的形式呈現(xiàn)并將其拖至另一個顯示器。同時可以根據(jù)不同的的顯示器的大小和分辨率自動調整。2.新的Dreamweaver版本支持Git支持 Git 是一個開源的分布式版本控制系統(tǒng)，用于敏捷高效地處理