Bài giảng Lập trình Asp.Net - Phần 7: Master page, Theme & Skin - Nguyễn Hà Giang

Nguyễn Hà GiangMaster page, Theme & SkinNguyen Ha Giang1Nội dungMaster pageCách tạo trang masterTạo các trang nội dungDemoTheme & skinÝ nghĩa của ThemePhân biệt theme và CSSFile Skin Demo2Nguyen Ha GiangMaster page Master page định nghĩa một khuôn mẫu chung cho phép áp dụng cho nhiều trang web trong toàn bộ web siteContent page là web form có sử dụng master page3Nguyen Ha GiangMaster PageContent PageCách thức master page làm việcMaster page định nghĩa cấu trúc cơ bản của trangBao gồm các thành phần chung như header, footer, menuMaster page có thể chứa các content region nơi mà nội dung mới có thể được thêm vào.Một content page sẽ có tất cả các thành phần cố định từ một master page, và có thể bổ sung tùy ý vào các content region4Nguyen Ha GiangMinh họa Master page5Nguyen Ha GiangmastercontentmastermastercontentCú pháp của Master pageTạo trang master pagePhần mở rộng là .masterDirective: Xây dựng các phần nội dung chung cho toàn siteHeader, footer, menu, layoutTạo các vùng placeholder control cho dành nội dung (content region), mà các trang sẽ tùy biến bổ sung vào!6Nguyen Ha GiangCú pháp của Content pageĐối với những trang .aspxTham chiếu đến master page trong directiveXây dựng nội dung cho các phần placeholder control đã tạo trong master page. Thiết kế phần Content control, mỗi trang sẽ có nội dung riêngCó thể có nhiều vùng content control, tùy theo cách thiết kế master pageÁnh xạ các content control này vào placeholder trong master page.7Nguyen Ha GiangKết hợp MP & CPTrang master định nghĩa nội dung chung và placeholderContent page tham chiếu đến master và đưa nội dung vào các placeholder8Nguyen Ha GiangSite.masterdefault.aspxách tạo Master page9Nguyen Ha GiangCách tạo Master page (2)Mặc định site.master có dạng sau10Nguyen Ha GiangĐể dành nội dung Cho content pageCách tạo Master page (3)Ta thiết kế lại site.masterThêm table vào, chia làm các phần header, left, main content và footer11Nguyen Ha GiangheaderContent placeholderfooterleftCách tạo Master page (4)Phần source của site.master12Nguyen Ha GiangPhần placeholder dành cho content page Lưu ý: phần header , footer và left sẽ được thiết kế tùy theo ứng dụng web cụ thểCách tạo Content pageTạo form mới có template là “web content form” (trong phiên bản VS 2008), trong VS 2005 thì chọn “select master page”.13Nguyen Ha GiangChọn Web content formTên file aspxCách tạo Content page (2)Tiếp theo chọn master page cho content web form14Nguyen Ha GiangTên file master pageCách tạo Content page (3)Phần source của content page: DemoWebForm1.aspx15Nguyen Ha GiangÁnh xạ đến placeholder control “MainContent” trong site1.masterCách tạo Content page (4)Trong màn hình design của content page16Nguyen Ha GiangPhần thiết kế dành cho content page: DemoWebForm1.aspx ở đây!Phần này là của site1.master, không edit ở đây được!Cách tạo Content page (5)Ví dụ bổ sung nội dung cho Content page17Nguyen Ha GiangCách tạo Content page (6)Các trang Content page chỉ chứa phần chỉ dẫn, và các tag content control (phụ thuộc vào số placeholder control của master page)Bên trong các vùng content control ta thiết kế web form bình thường.18Nguyen Ha GiangKhai báo sử dụng master pageKhai báo trong từng file aspxSử dụng thuộc tính MasterPageFile trong phần DirectiveKhai báo sử dụng master page trong toàn site19Nguyen Ha Giang Web.configƯu điểm khi dùng Master pageTạo ra khuôn mẫu chung cho toàn bộ phần layout của siteĐịnh nghĩa một lần và sử dụng lại, chung cho toàn siteInclude phần nội dung chung của các pageTương tự như User ControlLoại bỏ những phần trùng lắp, khi xây dựng layout chung như các phiên bản trước của ASP.NET 2.020Nguyen Ha GiangTheme & Skin21Nguyen Ha GiangThemeTheme cho phép áp dụng một định dạng thống nhất cho nhiều control, và trên nhiều pageTheme cho phép áp dụng định dạng cho các control một cách tự động, không cần phải thiết lập cho từng thuộc tínhTheme là khái niệm tương tự như style của HTMLCả hai cách tiếp cận cho phép sử dụng lại định dạng trong nhiều nơiStyle áp dụng cho client, trong khi theme được xử lý trên serverStyle sử dụng các thuộc tính định dạng CSS, trong khi theme có thể sử dụng bất cứ thuộc tính nào của ASP.NET controlCó thể sử dụng CSS và theme trong cùng ứng dụng! Chúng bổ sung cho nhau 22Nguyen Ha GiangTheme FolderĐể sử dụng theme trong web app, cần thiết phải tạo thư mục định nghĩa theme đó.Thư mục này chứa bên trong thư mục khác có tên “App_Theme”, thư mục này đặt trên cùng của thư mục web appVD: web app có tên MyWebApp một theme có tên CloudTheme sẽ được đặt bên trong thư mục MyWebApp\App_Theme\CloudThemeMột ứng dụng có thể định nghĩa nhiều theme, chứa trong nhiều folder. Chỉ một theme được áp dụng cho một page tại một thời điểm23Nguyen Ha GiangSkin fileCác định dạng cho theme chứa trong một file gọi là skin, tối thiểu một theme phải có 1 file skinFile Skin là dạng file text có phần mở rộng là .skinSkin chứa danh sách các control tag. Các control tag này không cần phải chứa đầy đủ các thành phần của control, nó chứa các thuộc tính cần định dạngVD: áp dụng nền màu cam, với màu text là trắng cho control textbox thì mô tả như sau24Nguyen Ha GiangSkin fileCó thể tạo nhiều skin file hoặc cho tất cả control tag vào cùng một file skin đều như nhau.25Nguyen Ha GiangMinh họa skin file đơn giảnSkin thiết lập màu nền và màu text cho một số control cơ bảnĐể áp dụng theme trong page ta cần thiết lập thuộc tính theme trong page directive đến thư mục theme tương ứng26Nguyen Ha GiangMinh họa tạo themeTạo ứng dụng ASP.NETTạo web form có layout như sauTrên form có 2 text box và Button là dạng ASP.NET control27Nguyen Ha GiangbrowserMinh họa tạo themeTạo skin cho Web appTạo thư mục themeĐặt tên theme là DemoTheme28Nguyen Ha GiangMinh họa tạo themeTạo skin file cho DemoThemeKích chuột phải lên thư mục DemoTheme trong App_Theme chọn Add  New Items, chọn skin file trong phần template29Nguyen Ha GiangMinh họa tạo themeĐịnh nghĩa style cho TextBox và Button trong file Skin1.skin của DemoThemeKhai báo sử dụng theme trong page30Nguyen Ha GiangMinh họa tạo themeỨng dụng khi chạy, hiển thị trong trình duyệt với skin đã chọn.Có thể tạo nhiều theme khác để tùy chọn sử dụng.31Nguyen Ha Giang