中職2022-2023學(xué)年SP.NET動態(tài)網(wǎng)頁設(shè)計(jì)第八章. ASP課件

1、(中職）2022-2023學(xué)年SP.NET動態(tài)網(wǎng)頁設(shè)計(jì)第八章.ppt ASP課件第八章網(wǎng)頁模板與站點(diǎn)地圖學(xué)習(xí)目標(biāo)： 1認(rèn)識網(wǎng)頁模板的功能2能創(chuàng)建Master Page與Content Page3能將網(wǎng)站的所有網(wǎng)頁套用一致性的網(wǎng)頁模板4能創(chuàng)建SiteMap文件5認(rèn)識SiteMapPath、Menu與TreeView等導(dǎo)航控件6能為網(wǎng)站創(chuàng)建站點(diǎn)地圖8-1 制作網(wǎng)頁模板8-1-1 網(wǎng)頁模板的簡介8-1-2 創(chuàng)建Master Page與Content Page從菜單欄選擇“文件”|“新建文件”選項(xiàng)。從菜單欄選擇“文件”|“新建文件”選項(xiàng)。8-1-3 設(shè)計(jì)Content Page的內(nèi)容完成后,界面顯示如

2、下8-1-4 指定Content Page套用的網(wǎng)頁模板完成后,界面顯示如下將整個(gè)網(wǎng)站套用網(wǎng)頁模板 以下就是在源文件視圖中將整個(gè)網(wǎng)站套用網(wǎng)頁模板的操作示范 完成后,界面顯示如下（ ）在網(wǎng)站中加入母版頁后，會自動產(chǎn)生什么控件？ContentContentPlaceHolderMasterMasterPlaceHolder2（ ）關(guān)于Content Page與Content控件，下列敘述哪個(gè)是錯(cuò)誤的？可以在Content控件中放置其他控件可以自定義Content控件的內(nèi)容，或采用母版頁定義的內(nèi)容Content Page是由標(biāo)簽與Content控件組成的一個(gè)網(wǎng)站只能有一個(gè)Content Page3（

3、 ）在ASP.NET網(wǎng)頁設(shè)置哪個(gè)屬性，可以套用網(wǎng)頁樣板？的master屬性的masterPageFile屬性的master屬性的masterPageFile屬性新建一個(gè)01_EX01的ASP. NET網(wǎng)站程序，然后編寫程序，規(guī)則如下： 新建一個(gè)Master.master的母版頁，利用表格設(shè)計(jì)如右圖所示的版面布局，左欄的圖片為image文件夾的image.gif。 中間的ContentPlaceHolder控件放置多行文本框，顯示首頁內(nèi)容。 下面的頁尾區(qū)域顯示網(wǎng)頁版權(quán)說明。 為Master.master新增一個(gè)Blog. aspx的內(nèi)容頁面，并自定義如右圖所示的內(nèi)容。 設(shè)置網(wǎng)站默認(rèn)的Defaul

4、t.aspx網(wǎng)頁為起始頁，并手動套用Mast- er.master，采用默認(rèn)的母版頁內(nèi)容。 8-2 站點(diǎn)地圖功能8-2-1 站點(diǎn)地圖的簡介1SiteMapPath控件：顯示站點(diǎn)地圖路徑，可以向上一層的網(wǎng)頁鏈接，但是不能鏈接下一層的網(wǎng)頁。2 Menu控件：顯示導(dǎo)航網(wǎng)站中每個(gè)網(wǎng)頁的菜單，當(dāng)鼠標(biāo)指針停留在菜單上時(shí)，會展開該節(jié)點(diǎn)（必須綁定SiteMapDataSource控件）。 3TreeView控件：顯示導(dǎo)航網(wǎng)站中每個(gè)網(wǎng)頁的樹狀結(jié)構(gòu)，可以展開或折疊節(jié)點(diǎn)（必須綁定SiteMapDataSource控件）。8-2-2 創(chuàng)建站點(diǎn)地圖文件上述語法說明如下 （1）與之間包含站點(diǎn)地圖信息。（2）表示沒有子節(jié)點(diǎn)

5、的單一節(jié)點(diǎn)。（3）與表示包含子節(jié)點(diǎn)的父節(jié)點(diǎn)，可以繼續(xù)向下編輯多個(gè)層次的節(jié)點(diǎn)。（4）一個(gè)站點(diǎn)地圖只能有一個(gè)根節(jié)點(diǎn)siteMapNode。從菜單欄中選擇“文件”|“新建文件”選項(xiàng)。8-2-3 利用SiteMapPath控件創(chuàng)建站點(diǎn)地圖到SiteMapPath控件的智能標(biāo)簽中選擇“自動格式化”選項(xiàng) 完成后,界面顯示如下8-2-4 利用Menu控件創(chuàng)建站點(diǎn)地圖彈出自動套用格式窗口后，在“選擇方案”列表框中選擇想要套用在站點(diǎn)地圖的樣式，然后單擊”確定”按鈕。8-2-5 利用TreeView控件創(chuàng)建站點(diǎn)地圖從“工具箱”窗口的地圖索引標(biāo)簽內(nèi)選擇TreeView控件，然后將控件拖到網(wǎng)頁中。在智能標(biāo)簽選擇“自動

6、套用格式”選項(xiàng)。 1（ ）下列哪一個(gè)Web Server控件不能制作出站點(diǎn)地圖的效果？MenuTreeViewImageMapSiteMapPath2（ ）在Web.sitemap文件利用哪個(gè)標(biāo)簽可以編輯站點(diǎn)地圖的節(jié)點(diǎn)？3（ ）Menu控件分為哪兩種查看模式？設(shè)計(jì)與執(zhí)行展開與收起浮動與隱藏靜態(tài)與動態(tài)4（ ）在TreeView控件的節(jié)點(diǎn)，可利用哪個(gè)屬性設(shè)置是否展開節(jié)點(diǎn)？ExpandedShowCheckBoxSelectAcionNavigateUrl1打開練習(xí)文件CH0802_EX01（Ma- ster.master），按題意操作： 新增一個(gè)Web.sitemap文件，并編輯站點(diǎn)地圖的節(jié)點(diǎn)及其

7、超鏈接。 在網(wǎng)頁模板的上方創(chuàng)建SiteMapPath控件，并設(shè)置自動化格式為“一般”，分隔符為“ - ” 2打開練習(xí)文件CH0802_EX02（Ma- ster.mas- ter），按題意操作： 在Web.sitemap文件中加入“個(gè)人檔案”的子節(jié)點(diǎn)為“學(xué)歷/經(jīng)歷”與“家庭”，“網(wǎng)志”的子節(jié)點(diǎn)為“工作”、“英文”與“趣事”。 在網(wǎng)頁模板的左方創(chuàng)建Menu控件，并設(shè)置數(shù)據(jù)源為Web.sitemap文件。 （1）利用模板的觀念來設(shè)計(jì)網(wǎng)頁，可以讓同一個(gè)網(wǎng)站的網(wǎng)頁呈現(xiàn)相同的樣式與風(fēng)格，以便用戶瀏覽時(shí)有一致性的感覺。（2）母版頁（Master Page）是擴(kuò)展名為.master的文件，它是由母版頁本身與

8、一個(gè)或多個(gè)內(nèi)容頁面組成的。（3）內(nèi)容頁面（Content Page）是由標(biāo)簽組成的，除了標(biāo)簽以外，其他網(wǎng)頁內(nèi)容都要在標(biāo)簽中編寫。（4）編輯網(wǎng)頁時(shí)，只要設(shè)置標(biāo)簽的MasterPageFile屬性，然后刪除標(biāo)簽以外的程序代碼，就會將網(wǎng)頁套用指定的網(wǎng)頁模板。（5）ASP.NET 2.0新增的站點(diǎn)地圖功能可以將網(wǎng)站的所有網(wǎng)頁鏈接記錄保存起來，然后借助導(dǎo)航控件，在每個(gè)網(wǎng)頁顯示這些鏈接。當(dāng)瀏覽網(wǎng)頁時(shí)，只要直接選擇回到第幾層就可以了。6）利用SiteMapPath、Menu、TreeView導(dǎo)航控件可以設(shè)計(jì)站點(diǎn)地圖，但Menu與TreeView控件必須綁定SiteMapDataSource控件。（7）Sit

9、eMapDataSource是數(shù)據(jù)類型的控件，會通過站點(diǎn)地圖提供者到Web.sitemap文件讀取站點(diǎn)地圖信息，存儲站點(diǎn)地圖數(shù)據(jù)的數(shù)據(jù)源。（8）在站點(diǎn)地圖文件可以利用創(chuàng)建單一節(jié)點(diǎn)，或者利用與創(chuàng)建包含子節(jié)點(diǎn)的父節(jié)點(diǎn)。（9）SiteMapPath控件的PathDirection屬性可以設(shè)置站點(diǎn)地圖的路徑方向，PathSeparator屬性則可以設(shè)置每個(gè)節(jié)點(diǎn)之間的分隔符。（10）Menu控件分為以下兩種查看模式。靜態(tài)：一直都顯示的項(xiàng)目。動態(tài)：只有當(dāng)鼠標(biāo)指針停留在父節(jié)點(diǎn)時(shí)，才會顯示子菜單的項(xiàng)目。（11）在Menu控件的智能標(biāo)簽選擇編輯菜單項(xiàng)目，可以自定義菜單的項(xiàng)目與子項(xiàng)目；而在TreeView控件的智

10、能標(biāo)簽選擇編輯節(jié)點(diǎn)，則可以自定義樹狀結(jié)構(gòu)的節(jié)點(diǎn)與子節(jié)點(diǎn)。1（ ）下列哪個(gè)為ASP.NET母版頁面的擴(kuò)展名？.css.sitemap.master.skin2（ ）下列哪個(gè)文件可以設(shè)置將網(wǎng)站的所有網(wǎng)頁套用同一個(gè)網(wǎng)頁模板？Master.masterWeb.sitemapDefault.aspxweb.config3（ ）自定義樹狀結(jié)構(gòu)的節(jié)點(diǎn)時(shí)，哪一個(gè)屬性可設(shè)置是否展開樹狀節(jié)點(diǎn)？SelectAcionExpandedNavigateUrlText4（ ）關(guān)于站點(diǎn)地圖的功能，下列敘述哪個(gè)是錯(cuò)誤的？SiteMapPath必須綁定SiteMapDataSource控制才能顯示站點(diǎn)地圖SiteMapPath

11、控件制作的站點(diǎn)地圖只能顯示前面的節(jié)點(diǎn)，而無法顯示子節(jié)點(diǎn)使用導(dǎo)航控件創(chuàng)建站點(diǎn)地圖之前，要先創(chuàng)建Web.sitemap文件在Web.sitemap文件中要利用標(biāo)簽創(chuàng)建節(jié)點(diǎn)5（ ）若設(shè)置Menu控件的MaximumDynamicDisplayLevels屬性值為1，StaticDis- playLevel屬性值為3，則會如何顯示菜單？前1層動態(tài)，后3層靜態(tài)顯示前1層靜態(tài)，后3層動態(tài)顯示前3層動態(tài)，后1層靜態(tài)顯示前3層靜態(tài)，后1層動態(tài)顯示1 打開練習(xí)文件CH08Q01（Default.aspx），按題意操作： 新增一個(gè)Q01.master的母版頁，利用表格設(shè)計(jì)如右圖所示的頁面布局，上方的圖片為imag

12、e文件夾的logo.gif，而下方的圖片為build.gif 。 將Default.aspx套用Q01.master，并默認(rèn)為ContentPlaceHolder1的內(nèi)容 2 打開練習(xí)文件CH08Q02（Q02.master），按題意操作： 為Q02.master新增下面的內(nèi)容頁面。Article.aspx：精華文章。Discuss.aspx：討論區(qū)。Download.aspx：下載區(qū)。News.aspx：焦點(diǎn)新聞。Share.aspx：好康分享。 在Q02.master左方窗格設(shè)置每一個(gè)項(xiàng)目的超級鏈接，其中Default.aspx為“ASP.NET知識網(wǎng)”。 3打開練習(xí)文件CH08Q03（Q03.master），按題意操作： 在web.config