電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目五VIP

1、項(xiàng)目五創(chuàng)建與管理網(wǎng)站站點(diǎn)項(xiàng)目綜述 本項(xiàng)目以內(nèi)利商城為主線,介紹了該網(wǎng)站在制作前期如何進(jìn)行站點(diǎn)的規(guī)劃、創(chuàng)建與管理。 項(xiàng)目目標(biāo)能力目標(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)站欄目及文件目錄設(shè)置。(2)創(chuàng)建本地站點(diǎn)及管理站點(diǎn)文件。知識(shí)目標(biāo)：(1)網(wǎng)站欄目設(shè)計(jì)規(guī)范。(2)網(wǎng)站文件目錄的分類。(3)Dreamweaver中站點(diǎn)的創(chuàng)建步驟。(4)Dreamweaver中站點(diǎn)的管理方法。Part 01任務(wù)一網(wǎng)站文件目錄的創(chuàng)建任務(wù)引導(dǎo) 創(chuàng)建網(wǎng)站和制作網(wǎng)頁(yè)不同，網(wǎng)站具有整體性，有統(tǒng)一鮮明的主題。根據(jù)相應(yīng)的主題和需求，決定了整個(gè)站點(diǎn)的構(gòu)成。網(wǎng)站設(shè)計(jì)是否成功與

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

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

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

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

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

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

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

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