我們的主要學(xué)習(xí)任務(wù)是掌握站點(diǎn)地圖文件和站點(diǎn)導(dǎo)航控件的使用以及熟練掌握創(chuàng)建母版頁(yè)和生成內(nèi)容頁(yè)的方法，開(kāi)始學(xué)習(xí)吧
學(xué)習(xí)內(nèi)容：

第一步，網(wǎng)站的面包屑導(dǎo)航

1、創(chuàng)建ASP.NET應(yīng)用程序，運(yùn)行Visual Studio2008,在菜單欄中選擇“文件”→“新建”→“項(xiàng)目”命令,進(jìn)行操作。
2、在“解決方案資源管理器”面板中，右擊“解決方案‘0931’”，在彈出的快捷菜單中選擇“添加”→“新建網(wǎng)站”命令，新建E：\0931\Navigation站點(diǎn)。
3、創(chuàng)建站點(diǎn)地圖文件(web.sitemap)。 在“解決方案資源管理器”面板中，右擊站點(diǎn)名Navigation，在彈出的快捷菜單中選擇“添加新項(xiàng)”命令。在彈出的“添加新項(xiàng)”對(duì)話框中選擇“站點(diǎn)地圖”模板，單擊“添加”按鈕。Web. sitemap部分代碼如下：

<siteMapNode title="計(jì)算機(jī)軟件技術(shù)專業(yè)0931"description=""url="">
 <siteMapNode title="首頁(yè)"description=""url="Default.aspx">
 <siteMapNode title="用戶登錄"description=""url="~/Login/Login"> 

4、為0931網(wǎng)站首頁(yè)Default.aspx創(chuàng)建面包屑導(dǎo)航。在Visual Studio 2008的“解決方案資源管理器”面板中，右擊站點(diǎn)名Navigation，在彈出的快捷菜單中選擇“添加新項(xiàng)”命令。在彈出的“添加新項(xiàng)”對(duì)話框中選擇“Web窗體選項(xiàng)，名稱為Default.aspx，默認(rèn)將代碼放在單獨(dú)的文件中，單擊“添加”按鈕。
切換到“設(shè)計(jì)”視圖，從左側(cè)工具箱導(dǎo)航組中拖出SiteMapPath控件。
Default.aspx頁(yè)面部分代碼如下：

<div class="head_layer"> 
 </div>
<div class="sitemappath_layer"> 
 </div>
<div class="foot_layer"> 
 </div>

運(yùn)行Default.aspx即可看到運(yùn)行效果。

5、同步驟創(chuàng)建0931用戶登陸頁(yè)面/Login/Login.aspx,并為其添加面包屑導(dǎo)航。
6、為面包屑導(dǎo)航設(shè)置格式，切換到“設(shè)計(jì)”視圖，右擊SiteMapPath控件，在彈出的快捷菜單中選擇“自動(dòng)套用格式”命令，進(jìn)行編輯。

第二步，添加熱區(qū)

問(wèn)題一：如何計(jì)算熱區(qū)？

注意：image與imagemap的區(qū)別？
Image控件用來(lái)添加頁(yè)面banner圖片
ImageMap控件用來(lái)添加navigate導(dǎo)航條圖片，在導(dǎo)航條圖片中設(shè)置熱區(qū)(用來(lái)提供超鏈接)

第三步，創(chuàng)建母版頁(yè)

創(chuàng)建母版頁(yè)。在Visual Studio 2008的“解決方案資源管理器”面板中，右擊站點(diǎn)名Navigation，在彈出的快捷菜單中選擇“添加新項(xiàng)”命令。在彈出的“添加新項(xiàng)”對(duì)話框中選擇母版頁(yè)，擴(kuò)展名為master。這里則命名為“banji.master”,單擊“添加”按鈕。

第四步，創(chuàng)建內(nèi)容頁(yè)

第一種方法：

（1）創(chuàng)建普通的Web窗體頁(yè)面。右擊banji文件夾，在彈出的快捷菜單中選擇“添加新項(xiàng)”命令，創(chuàng)建頁(yè)面文件。
（2）將創(chuàng)建頁(yè)面改造成內(nèi)容頁(yè)
（3）運(yùn)行

第二種方法：

（1）在母版頁(yè)中直接添加內(nèi)容頁(yè)。
（2） 在“解決方案資源管理器”面板中，右擊站點(diǎn)名，在彈出的快捷菜單中選擇“添加新項(xiàng)”命令，在添加的“Web窗體”生成aspx頁(yè)面時(shí)選中“選擇母版頁(yè)”復(fù)選框，在后續(xù)彈出的選擇母版頁(yè)的對(duì)話框中選擇需要的母版頁(yè)。

運(yùn)行效果圖：

總結(jié)

通過(guò)本節(jié)的學(xué)習(xí)，開(kāi)始真正接觸動(dòng)態(tài)網(wǎng)站。在學(xué)習(xí)過(guò)程中，使用SiteMapPath設(shè)計(jì)面包屑導(dǎo)航，第一次學(xué)習(xí)調(diào)試的時(shí)候不能鏈接上，檢查原因代碼拼寫(xiě)錯(cuò)誤；又進(jìn)行熱區(qū)學(xué)習(xí)，關(guān)于這一點(diǎn)，在設(shè)置的時(shí)候應(yīng)該精確數(shù)值，如果可以的話可以使用Dreamweaver，接下來(lái)設(shè)置母版頁(yè)，整個(gè)學(xué)習(xí)過(guò)程知識(shí)量較大，需要通過(guò)短時(shí)間的學(xué)習(xí)掌握這些知識(shí)，是有一些難度的，所以平時(shí)我們要加強(qiáng)練習(xí)，熟能生巧嘛。

希望這節(jié)課網(wǎng)站模板和面包屑導(dǎo)航的實(shí)現(xiàn)操作，對(duì)大家今后的學(xué)習(xí)有所幫助。

最新評(píng)論