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

1、DW,項(xiàng)目四,電子商務(wù) 網(wǎng)頁(yè)制作,鏈接與導(dǎo)航,舉例說(shuō)明路徑的概念； 列舉超鏈接的分類(lèi)； 會(huì)設(shè)置超鏈接； 描述導(dǎo)航的相關(guān)知識(shí),項(xiàng)目目標(biāo),鏈接和路徑,正確描述從鏈接源所在文檔到鏈接目標(biāo)之間的文件路徑，對(duì)創(chuàng)建超鏈接至關(guān)重要。描述方式有三種：絕對(duì)路徑、文檔相對(duì)路徑和站點(diǎn)根目錄相對(duì)路徑。這三種路徑各有特點(diǎn)，靈活使用這些路徑能起到事半功倍的效果,路徑知識(shí)看上去略顯枯燥，但卻是建立超鏈接的基礎(chǔ)，許多超鏈接錯(cuò)誤都是因?yàn)槁窂絾?wèn)題導(dǎo)致的，所以請(qǐng)靜下心來(lái)認(rèn)真學(xué)習(xí)這部分內(nèi)容,小貼士,絕對(duì)路徑,絕對(duì)路徑提供了鏈接目標(biāo)文檔的完整的URL地址。如： http:/ 當(dāng)需要鏈接不同站點(diǎn)上的文檔時(shí)，必須使用絕對(duì)路徑。如在制作友情

2、鏈接時(shí)，需要鏈接到另一個(gè)網(wǎng)站的網(wǎng)頁(yè)，這時(shí)就要使用絕對(duì)路徑。 絕對(duì)路徑也用于規(guī)模較大的網(wǎng)站中，因?yàn)榇笮途W(wǎng)站并不是由一個(gè)域名構(gòu)成的單個(gè)網(wǎng)站，而是由多個(gè)網(wǎng)站構(gòu)成的網(wǎng)站群，如網(wǎng)易（），就有新聞（）、體育（）、娛樂(lè)（）等多個(gè)分站，各分站有獨(dú)立的編輯團(tuán)隊(duì)，網(wǎng)站之間的超鏈接當(dāng)然只能使用絕對(duì)路徑了。然而，對(duì)于僅有一個(gè)域名的小型網(wǎng)站而言，雖然也可以使用絕對(duì)路徑，但如果網(wǎng)站改變域名，所有使用絕對(duì)路徑的鏈接就立刻失效了，因此小型網(wǎng)站沒(méi)有必要使用絕對(duì)路徑,相對(duì)路徑,文檔相對(duì)路徑描述了鏈接源與鏈接目標(biāo)之間的相對(duì)位置，在網(wǎng)站內(nèi)部各頁(yè)面的鏈接中使用相對(duì)路徑最合適，因?yàn)橄鄬?duì)路徑不但描述簡(jiǎn)潔，而且與站點(diǎn)目錄所在的位置無(wú)關(guān)，當(dāng)站

3、點(diǎn)根目錄位置發(fā)生改變時(shí)，不會(huì)影響到站點(diǎn)內(nèi)鏈接的網(wǎng)頁(yè),當(dāng)鏈接源與鏈接目標(biāo)在同一文件夾中時(shí)，描述相對(duì)路徑只需要指明鏈接目標(biāo)的文件名即可，例如在index.html中創(chuàng)建指向login.html的鏈接，可使用相對(duì)路徑：“l(fā)ogin.html,相對(duì)路徑,當(dāng)鏈接目標(biāo)在鏈接源下一級(jí)目錄中時(shí)，可直接指明目錄名稱(chēng)和文檔名稱(chēng)，例如在index.html中創(chuàng)建指向cloth.html的鏈接，可使用相對(duì)路徑：“l(fā)ist/cloth.html,當(dāng)鏈接目標(biāo)在鏈接源上一級(jí)目錄中時(shí)，可用“.”符號(hào)來(lái)表示當(dāng)前文件的父目錄，使用多個(gè)“.”可以表示更高的父級(jí)目錄，例如在cloth.html中創(chuàng)建指向index.html的鏈接，可

4、使用相對(duì)路徑：“./index.html,站點(diǎn)根目錄相對(duì)路徑,基于站點(diǎn)根目錄的相對(duì)路徑從站點(diǎn)的根目錄開(kāi)始，通常使用“/”表示根目錄，所有基于站點(diǎn)根目錄相對(duì)路徑均以“/”開(kāi)始，如：/list/cloth.html。 由此可見(jiàn)，站點(diǎn)根目錄相對(duì)路徑同絕對(duì)路徑十分相似，只是它略去了絕對(duì)路徑中的協(xié)議部分。通常在站點(diǎn)規(guī)模稍大，需要多個(gè)設(shè)計(jì)者合作建設(shè)，并且使用模板和組件進(jìn)行設(shè)計(jì)時(shí)，站點(diǎn)根目錄相對(duì)路徑被廣泛使用,假設(shè)站點(diǎn)網(wǎng)址為http:/，在index.html文檔中，創(chuàng)建指向list文件夾中的cloth.html文檔的鏈接，使用三種路徑形式描述這個(gè)鏈接目標(biāo)如下： 絕對(duì)路徑：http:/ / list / c

5、loth.html 相對(duì)路徑：list / cloth.html 站點(diǎn)根目錄相對(duì)路徑：/ list / cloth.html,站點(diǎn)根目錄相對(duì)路徑,假設(shè)站點(diǎn)網(wǎng)址為http:/，在index.html文檔中，創(chuàng)建指向list文件夾中的cloth.html文檔的鏈接，使用三種路徑形式描述這個(gè)鏈接目標(biāo)如下： 絕對(duì)路徑：http:/ / list / cloth.html 相對(duì)路徑：list / cloth.html 站點(diǎn)根目錄相對(duì)路徑：/ list / cloth.html,超級(jí)鏈接的分類(lèi),超鏈接按鏈接目標(biāo)的不同分為五種類(lèi)型,超級(jí)鏈接的分類(lèi),超鏈接按鏈接源的不同分為三種類(lèi)型,創(chuàng)建本地超鏈接的常用方法,

6、1使用屬性面板創(chuàng)建超鏈接 選擇要作為鏈接源的文本或圖片，在屬性面板中會(huì)有“鏈接”文本框、“指向文件”按鈕和“瀏覽文件”按鈕,將鏈接目標(biāo)的路徑直接輸入到鏈接文本框中可以創(chuàng)建超鏈接。 點(diǎn)擊“瀏覽文件”按鈕可以打開(kāi)“選擇文件”對(duì)話(huà)框，可以瀏覽并指定鏈接目標(biāo)文檔以創(chuàng)建超鏈接,創(chuàng)建本地超鏈接的常用方法,點(diǎn)擊“指向文件”按鈕并拖動(dòng)到“文件”面板中的某個(gè)文件也可以將該文件設(shè)置為鏈接目標(biāo),創(chuàng)建本地超鏈接的常用方法,2使用“超級(jí)鏈接”命令創(chuàng)建超鏈接 選擇要作為鏈接源的文本或圖片，然后打開(kāi)“插入”菜單，選擇“超級(jí)鏈接”命令，或者單擊插入欄中“常用”類(lèi)別中的“超級(jí)鏈接”按鈕，可以打開(kāi)“超級(jí)鏈接”對(duì)話(huà)框，在對(duì)話(huà)框里進(jìn)

7、行相應(yīng)設(shè)置以創(chuàng)建超鏈接,超級(jí)鏈接的目標(biāo)窗口,當(dāng)瀏覽者點(diǎn)擊網(wǎng)頁(yè)上的超級(jí)鏈接后會(huì)跳轉(zhuǎn)到鏈接目標(biāo)頁(yè)面。當(dāng)新頁(yè)面出現(xiàn)時(shí)，可能會(huì)出現(xiàn)三種情況： （1）原有的頁(yè)面被覆蓋； （2）原有的網(wǎng)頁(yè)不被覆蓋，彈出一個(gè)新的窗口； （3）原有的網(wǎng)頁(yè)內(nèi)部分內(nèi)容被替換。 這三種情況的出現(xiàn)是由于對(duì)超級(jí)鏈接的目標(biāo)窗口進(jìn)行了設(shè)置。在設(shè)置超級(jí)鏈接時(shí)會(huì)有一個(gè)“目標(biāo)”下拉菜單，其中可以設(shè)置4種目標(biāo),超級(jí)鏈接的目標(biāo)窗口,_blank”：將文件載入新的無(wú)標(biāo)題瀏覽器窗口中； “_parent”：將文件載入到上級(jí)框架集或包含該鏈接的框架窗口中； “_self”：將文件載入到相同框架式窗口中，此目標(biāo)是默認(rèn)的，通過(guò)不需要量指定； “_top”：將

8、文件載入到整個(gè)瀏覽器窗口中，將取消所有框架,創(chuàng)建電子郵件超級(jí)鏈接,在網(wǎng)頁(yè)中經(jīng)?？梢钥吹筋?lèi)似“聯(lián)系我們”這樣的超鏈接，單擊后會(huì)彈出本機(jī)所安裝的郵件發(fā)送程序，而且此時(shí)的收件人是已經(jīng)填寫(xiě)好的，這種鏈接就是電子郵件鏈接。 創(chuàng)建電子郵件超級(jí)鏈接的方法如下： （1）選擇需要?jiǎng)?chuàng)建鏈接的內(nèi)容，在“插入欄”中選擇“常用”類(lèi)別，單擊“電子郵件鏈接”按鈕，打開(kāi) “電子郵件鏈接”命令創(chuàng)建電子郵件鏈接,創(chuàng)建電子郵件超級(jí)鏈接,2）在“電子郵件鏈接”對(duì)話(huà)框中輸入需要鏈接的電子郵件地址，單擊確定,3）在屬性面板中可以看到鏈接地址中有“mailto：（+郵件地址）”，表示創(chuàng)建完成,創(chuàng)建錨記鏈接,錨記鏈接又稱(chēng)書(shū)簽鏈接，一般用在同

9、一個(gè)頁(yè)面中，用于在文檔中設(shè)置標(biāo)記，這種標(biāo)記通常放在指定的位置，創(chuàng)建錨記鏈接后，便可迅速鏈接到指定的位置。 比如，一個(gè)篇幅較長(zhǎng)的商品介紹網(wǎng)頁(yè)，需要不斷地滾動(dòng)才能看到下面的信息，當(dāng)瀏覽者閱讀完畢后，希望能快速地回到文章開(kāi)頭，這時(shí)可以先在文章開(kāi)頭放置一個(gè)錨記，在文章尾部添加一個(gè)鏈接指向錨記，瀏覽時(shí)點(diǎn)擊此鏈接就能迅速回到網(wǎng)頁(yè)開(kāi)頭。親，你一定注意到了，錨記是在制作超鏈接前就放置好了的,創(chuàng)建錨記鏈接,創(chuàng)建錨記鏈接的方法如下： （1）選擇需要被鏈接到錨記的位置，在“插入欄”中選擇“常用”類(lèi)別，單擊“命名錨記”按鈕，打開(kāi) “命名錨記”命令創(chuàng)建錨記鏈接,2）在“命名錨記”對(duì)話(huà)框中輸入創(chuàng)建的命名錨記的名稱(chēng)，單擊確

10、定,創(chuàng)建錨記鏈接,3）選中需要?jiǎng)?chuàng)建錨記鏈接的內(nèi)容，在屬性面板的“鏈接”文本框中輸入“#”，后接需要鏈接到的命名錨記的名字，創(chuàng)建完成,如需要鏈接到其他頁(yè)面中命名錨記，則需要“鏈接”文本框中先輸入其他頁(yè)面的地址，然后在地址后輸入“#”和命名錨記的名稱(chēng),清除超級(jí)鏈接,清除超級(jí)鏈接的方法非常簡(jiǎn)單，只需要先選定超級(jí)鏈接對(duì)象，然后在屬性面板中將“鏈接”文本框中的地址刪除即可,電子商務(wù)網(wǎng)站導(dǎo)航的組織與分類(lèi),影響電子商務(wù)網(wǎng)站成功與否的關(guān)鍵因素是網(wǎng)站的可用性，即高效提供給瀏覽者滿(mǎn)意的產(chǎn)品或服務(wù)，良好的導(dǎo)航設(shè)計(jì)是提高網(wǎng)站可用性的有力措施,如果瀏覽者知道各個(gè)信息都在網(wǎng)站的什么位置，他們就會(huì)感到更強(qiáng)的控制感、更舒服，

11、也就有可能瀏覽更多的頁(yè)面來(lái)尋找他們所需的信息內(nèi)容。用行話(huà)來(lái)說(shuō)這叫做使“用戶(hù)對(duì)于網(wǎng)頁(yè)的粘滯系數(shù)增大。,小貼士,電子商務(wù)網(wǎng)站的導(dǎo)航通常有以下幾種類(lèi)型： （1）網(wǎng)站欄目導(dǎo)航，如圖4-14所示。為瀏覽者提供該網(wǎng)站的主要欄目版塊導(dǎo)航,電子商務(wù)網(wǎng)站導(dǎo)航的組織與分類(lèi),2）站內(nèi)功能服務(wù)導(dǎo)航 此導(dǎo)航為瀏覽者提供電子商務(wù)網(wǎng)站的功能服務(wù)，如注冊(cè)、購(gòu)物、賬戶(hù)信息等。 此導(dǎo)航具有為瀏覽者提供幫助功能的導(dǎo)航,電子商務(wù)網(wǎng)站導(dǎo)航的組織與分類(lèi),3）產(chǎn)品分類(lèi)導(dǎo)航，如圖4-17所示。這是電子商務(wù)網(wǎng)站導(dǎo)航中展示產(chǎn)品和服務(wù)的部分，在網(wǎng)站導(dǎo)航中所占比例較大,電子商務(wù)網(wǎng)站導(dǎo)航的組織與分類(lèi),4）當(dāng)前位置導(dǎo)航，如圖4-18所示，標(biāo)示瀏覽者當(dāng)前

12、所在位置，以避免瀏覽者迷航。 （5）網(wǎng)站持有方信息導(dǎo)航，如圖4-19所示。有關(guān)網(wǎng)站持有方信息的鏈接集群,電子商務(wù)網(wǎng)站的導(dǎo)航設(shè)計(jì)原則,電子商務(wù)網(wǎng)站為用戶(hù)提供了十分詳盡、方便的信息導(dǎo)航，瀏覽者可以通過(guò)各種途徑方便地查找到要購(gòu)買(mǎi)的商品，這說(shuō)明網(wǎng)站的結(jié)構(gòu)和導(dǎo)航確定了信息查找方式，對(duì)于每條信息來(lái)說(shuō)，查找的路徑越多，它被閱讀的可能性就越大，這也是提高網(wǎng)站瀏覽量的一種好辦法。但對(duì)于用戶(hù)來(lái)說(shuō)，過(guò)多的入口容易抓不住重點(diǎn)而忽略真正重要的鏈接，甚至可能在網(wǎng)站內(nèi)部迷失方向。因此，鏈接數(shù)量過(guò)多會(huì)使用戶(hù)混亂，降低重要鏈接的被點(diǎn)擊率。所以要在鏈接數(shù)量的多少上取得平衡，同時(shí)要進(jìn)行合理組織和規(guī)劃，一般而言，主要功能和導(dǎo)航鏈接盡

13、量不要超過(guò)10個(gè)。找到一種解決方案。把握鏈接之中的重點(diǎn)和層次是設(shè)計(jì)的關(guān)鍵,電子商務(wù)網(wǎng)站的導(dǎo)航設(shè)計(jì)原則,商務(wù)網(wǎng)站鏈接與導(dǎo)航的設(shè)計(jì)要點(diǎn)： （1）對(duì)商務(wù)網(wǎng)站的導(dǎo)航進(jìn)行適當(dāng)?shù)慕M織與分類(lèi)。如圖4-20所示，通常以產(chǎn)品導(dǎo)航為主導(dǎo)航，另外還兼有如聯(lián)系方式和意見(jiàn)反饋等關(guān)于網(wǎng)站持有方的信息導(dǎo)航，以及購(gòu)物車(chē)和密碼登錄等有關(guān)購(gòu)物程序的功能導(dǎo)航。 （2）突出重點(diǎn)鏈接。 （3）讓瀏覽者可對(duì)鏈接的相互關(guān)系以及點(diǎn)擊后的效果產(chǎn)生正確的預(yù)期。 （4）降低頁(yè)面的長(zhǎng)度或者進(jìn)行有效的分類(lèi)和分頁(yè),將瀏覽者引向重要鏈接的方法,有經(jīng)驗(yàn)的瀏覽者已經(jīng)對(duì)鏈接有了先入為主的認(rèn)知定式。并且大多數(shù)瀏覽者有著基本相同的使用習(xí)慣。因此，在設(shè)計(jì)中可以根據(jù)瀏覽者的使用經(jīng)驗(yàn)，通過(guò)強(qiáng)化重要鏈接把瀏覽者引向重要的頁(yè)面，在這個(gè)層面上鏈接與導(dǎo)航設(shè)計(jì)的關(guān)鍵是 （1） 清晰明確，有很強(qiáng)的點(diǎn)擊感，讓瀏覽者產(chǎn)生點(diǎn)擊的欲望。 （2） 尊重瀏覽者現(xiàn)有的對(duì)鏈接的認(rèn)識(shí)習(xí)慣，如有下劃線(xiàn)的文字、動(dòng)畫(huà)圖標(biāo)、按鈕等。 （3） 必要時(shí)對(duì)鏈接進(jìn)行解釋?zhuān)缭凇坝脩?hù)注冊(cè)”按鈕旁邊添加“新用戶(hù)點(diǎn)擊此處注冊(cè)”的說(shuō)明文字,項(xiàng)目總結(jié),本項(xiàng)目介紹了路徑的基礎(chǔ)知識(shí)，這是制作超鏈接的基礎(chǔ)。路徑分為絕對(duì)路徑、文檔相對(duì)路徑、站點(diǎn)根目錄相對(duì)路徑。超鏈接是網(wǎng)頁(yè)的靈魂，它將WWW上的不同的站點(diǎn)聯(lián)系起來(lái)，瀏覽者可以使用鏈接從一個(gè)文檔跳到另一個(gè)文檔，按鏈接目標(biāo)分，超鏈接被