《ASP NET 3.5從基礎到項目實戰》課件第5章 網站設計_第1頁
《ASP NET 3.5從基礎到項目實戰》課件第5章 網站設計_第2頁
《ASP NET 3.5從基礎到項目實戰》課件第5章 網站設計_第3頁
《ASP NET 3.5從基礎到項目實戰》課件第5章 網站設計_第4頁
《ASP NET 3.5從基礎到項目實戰》課件第5章 網站設計_第5頁
已閱讀5頁，還剩20頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第5章網站設計本章開始討論ASP.NET的頁面設計技術，現如今的網頁網站、WebBase應用程序越來越注重頁面的外觀和用戶的體驗。一致的外觀能給用戶良好的印象，并能充份展示企業的形象和文化內涵，如可口可樂官方網站是以紅飄帶為主題的，農業銀行官方網站是以綠色為主色調等。章節內容5.1在ASP.NET中應用CSS樣式5.2母版技術5.3主題5.4網站地圖和導航5.5Web部件5.1在ASP.NET中應用CSS樣式在任何Web應用程序的開發過程中，CSS都是非常重要的頁面布局方法，而且CSS也是最高效的頁面布局方法。CSS發展于1994年10月，為了補救HTML3.2語法中的不足，但是由于當時網絡的發展的不足和瀏覽器的支持率較低，直到1996年底，才正式發表了CSS1.0規格，也正是1996年之后，瀏覽器才開始正式支持CSS。5.1.1創建樣式在ASP.NET3.5中提供了創建CSS樣式的功能。打開VS2008，新建lession05網站項目，在解決方案資源管理器中，右擊“網站名稱”，在右鍵菜單中單擊“添加新項”命令，打開“添加新項”窗口。選擇“樣式表”選項，可以重命名文檔的名稱，然后單擊“添加”按鈕即可創建一個后綴名為.css的樣式表文件。5.1.1創建樣式對于樣式表的創建形式可以分為以下3種。（1）內聯樣式內聯樣式直接放到HTML標簽的內部，CSS能夠通過編寫樣式控制代碼來進行頁面布局，在編寫相應的HTML標簽時，可以通過Style屬性進行CSS樣式控制。<body><divstyle="font-size:14px;">這是一段文字</div></body>（2）內部樣式表內部樣式表是放置在Web標簽頁的<head>區中的樣式的集合。可以使用來自樣式表的樣式來格式化Web控件。使用內聯樣式，讓格式與內容清楚的分離，并且可以對同一頁面的格式進行多次重用。5.1.1創建樣式（3）外部樣式表外部樣式表與內部樣式相似，但是必須創建一個.css文件后綴的文件，樣式放在一個單獨的文件中，并在當前頁面中添加引用，這樣開發人員可以在應用程序的多個頁面上應用相同的樣式。5.1.2應用樣式CSS不僅能夠用來進行頁面布局，同樣也可以應用在控件中，使用CSS能夠讓控件更具美感。在空間上使用CSS的方法和在頁面上使用CSS的方法相同。通過編寫樣式能夠讓控件的呈現更加豐富，讓用戶體驗更加友好。當用戶訪問頁面時，能夠提高用戶對網站的滿意程度。控件的樣式控制，不僅能夠使用默認的屬性進行樣式控制，同樣可以使用style屬性進行樣式控制。5.2母版技術母版頁類似于Word中的模板，允許在多個頁面中共享相同的內容，如網站的LOGO，可能需要在多個頁面中重用，則可以將其放在母版頁中。在Dreamweaver中可以使用模板頁，ASP.NET的母版頁與此類似。使用母版頁可以簡化維護、擴展和修改網站的過程，并能提供一致、統一的外觀。5.2.1創建母版頁在“添加新項”窗口中，當選擇“母版頁”選項后，單擊“添加”按鈕即可向項目中添加一個母版頁。母版頁的后綴名為.master。母版頁同Web窗體在結構上基本相同，與Web窗體不同的是，母版頁的聲明方法不是使用Page的方法聲明，而是使用Master關鍵字進行聲明。 <%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="MyMaster.master.cs"Inherits="_12_2.MyMaster"%>5.2.2在web.config中配置母版頁

可以在web.config配置文件中定義母版頁，這樣母版將被應用到網站中所有的文件或者是某個指定文件夾的文件。假如內容頁中沒有包含任何Content控件，則母版頁將自動被忽略，配置代碼如下。 <configuration><system.web><pagesmasterPageFile="~/MasterPage/MasterPage.master"/></system.web></configuration>5.2.3創建內容頁使用母版頁的頁面被稱作內容窗體（也稱內容頁）。內容窗體不是專門負責設計的頁面，它們只需要關注一般頁面的布局、事件以及窗體結構即可，所以內容窗體無需過多的考慮頁面布局。當用戶請求內容窗體時，內容窗體將與母版頁合并，并將母版頁的布局和內容窗體的布局組合在一起呈現到瀏覽器。創建內容窗體的方法基本同Web窗體一樣，在VS2005中創建Web窗體時，必須勾選“選擇母版頁”復選框，而在VS2008中，有單獨的內容頁可以選擇，單擊“添加”按鈕，系統會提示選擇相應的母版頁，選擇相應的母版頁后，單擊“確定”按鈕即可創建內容窗體。5.2.4嵌套母版頁母版頁與母版頁之間能夠嵌套運行，讓一個母版頁作為另一個母版頁的子母版，能夠方便地對頁面進行模塊化。當編寫Web應用時，可以使用母版頁進行較大型的框架布局，對一個頁面進行整體的樣式控制。同樣可以使用母版頁進行嵌套，對細節的地方進行細分。嵌套母版頁之后，使用子母版頁的頁面將不能直接進行頁面編輯，在VS2008中，使用子母版頁的頁面將顯示為空白，但并不表示頁面顯示將為空白。5.3主題讀者一定非常熟悉Windows主題，當選擇不同的主題設置時，Windows用戶界面將會有不同的變化。ASP.NET提供了同樣主題的技術，這讓用戶可以對Web站點進行統一的控制，很多Blog站點都提供了主題選擇功能，如控件的顯示、頁面的布局等。很多初學者容易混淆主題與CSS的區別，CSS用于控制HTML格式的呈現，而主題則可以控制ASP.NET服務器控件的很多屬性，一些屬性可能會生產生不一樣的HTML輸出。5.3.1創建主題主題是屬性設置的集合，通過使用主題的設置能夠定義頁面和控件的樣式，然后在某個Web應用程序中應用到所有的頁面以及頁面上的控件，以簡化樣式控制。主題包括一系列元素，這些元素分別是皮膚、級聯樣式表（CSS）、圖像和其他資源。主題文件的后綴名稱為.skin，創建主題后，主題文件通常保存在Web應用程序的特殊目錄下。5.3.1創建主題創建外觀文件。5.3.2處理主題沖突當應用一個主題到頁面上時，ASP.NET會檢查Web頁面上的控件以及定義的皮膚文件以查看是否為控件定義了屬性，如果在皮膚文件中存在匹配的皮膚定義，將覆蓋控件本身的屬性定義而使用皮膚定義。也就是說，如果頁面上應用了皮膚，那么在皮膚中定義的屬性將具有優先權。5.3.2處理主題沖突在某些情況下可能需要改變這個行為，如可能讓某個TextBox控件的屬性設置能夠覆蓋皮膚文件中的設置，此時可以使用StyleSheetTheme屬性來代替Theme屬性，可以在VS2008的屬性窗口中為StyleSheetTheme屬性指定一個皮膚，聲明代碼如下。<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"StyleSheetTheme="ThemeDemo"%>任何由多個頁面組成的網站都需要某種導航用戶接口。首先，必須定義站點的邏輯結構；然后，添加用戶接口元素來允許用戶在站點結構的各個部分之間來回移動。在ASP.NET2.0以前，要求開發者自己來解決這兩個問題，到了2.0版本以后，ASP.NET提供了一個簡單的方法來定義站點的結構，并且包括大量的Web控件專門設計來顯示站點導航用戶接口。5.4.1創建網站地圖5.4.2導航控件在網站制作中，常常需要制作導航來讓用戶能夠更加方便快捷地查閱到相關的信息和資訊，或能跳轉到相關的板塊。在Web應用中，導航是非常重要的。ASP.NET提供了一種站點導航的簡單方法，即使用站點圖形導航控件SiteMapPath、TreeView和Menu，這3個控件都可以在頁面中輕松建立導航，它們的基本特征如下。SiteMapPath：檢索用戶當前頁面并顯示層次結構的控件。這使用戶可以導航回到層次結構中的其他頁。SiteMap控件專門與SiteMapProvider一起使用。TreeView：提供縱向用戶界面以展開和折疊網頁上的選定節點，以及為選定項提供復選框功能。TreeView控件還支持數據綁定。Menu：提供在用戶將鼠標指針懸停在某一項時，彈出附加子菜單的水平或垂直用戶界面。5.4.2導航控件TreeView和Menu控件有以下區別。Menu展開時，是彈出形式的展開，而TreeView控件則是就地展開。Menu控件并不是按需下載，而TreeView控件則是按需下載的。Menu控件不包含復選框，而TreeView控件包含復選框。Menu控件允許編輯模板，而TreeView控件不允許模板編輯。Menu在布局上是水平和垂直的，而TreeView只是垂直布局。Menu可以選擇樣式，而TreeView不行。5.5Web部件在ASP.NET中提供了Web部件，所謂的Web部件是指用戶可以靈活、自由地改變界面，包括指定功能模塊的顯示與隱藏、擺放位置等。而這些更改可以適用于網站上的所有用戶和個體用戶。5.5.1Web部件概述為了提高用戶體驗度，使用戶可以隨意地更改自己的風格和瀏覽方式，ASP.NET3.5提供了Web部件。Web部件可以分為3個組成部分，即個性化設置、Web部件結構組件和Web部件控件。5.5.1Web部件概述在ASP.NET3.5控件中提供的WebParts控件可以分為以下5種類型。實現Web部件管理：包括WebPartManager和ProxyWebPartManager。WebPartManager是整個Web部件的控制中心，如果母版頁中使用了WebPartManager，與之關聯的內容頁必須使用ProxyWebPartManager。作為容器的WebPartZone控件：在這個容器中可以添加Web服務器控件，用戶控件或者繼承自WebPart類的控件。實現目錄管理的控件：包括CatalogZone、DeclarativeCatalogZone、PageCatalogZone、ImportCatalogZone。實現WebPart編輯的控件：包括AppearanceEditorZone、BehaviorEditorZone、EditorZone、LayoutEditorZone、PropertyGridEditorZone。實現Web部件之間通信的ConnectionsZone控件。5.5.2Web部件的應用在ASP.NET中創建Web部件的具體步驟如下。（1）創建Web窗體頁面，使用表格將頁面劃分不同的區域。（2）在頁面中添加一個WebPartManager控件。WebPartManager控件是Web部件中控件的依賴控件。（3）在頁面劃分的不同區域中添加WebPartZone控件。可以在WebPartZone控件中添加其他控件，WebPartZone控件用來控制控件組的顯示和隱藏。（4）向WebPartZone控件中添加ASP.NET控件或自定義控件。5.5.2Web部件的應用控件描述WebPartManager管理頁面上的所有Web部件控件。每個Web部件頁都需要一個（且只需要一個）WebPartManager控件CatalogZone

包含CatalogPart控件。使用此區域創建Web部件控件目錄，用戶可以從該目錄中選擇要添加到頁上的控件EditorZone包含EditorPart控件。使用此區域使用戶可以對頁面上的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論