電子商務網(wǎng)頁制作-項目ppt課件

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

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

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

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

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

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

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

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

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

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

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

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

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