1. 1 Designing & Developing Web- Based Solutions in ASP.NET Week 2 Themes & Master Pages

2. Today’s Agenda Homework Review Lecture:  CSS - Themes  Master Pages Lab  Master Page layout  Utilize Themes Designing & Developing Web-Based Solutions in ASP.NET2

3. Cascading Style Sheets -.CSS Automatic vs. Applied  Auto h2 { font-size: large;} //.css large //.aspx  Applied.heading2 { font-size: small;}// begins with a dot ‘.’ small // HTML File // ASPX File Designing & Developing Web-Based Solutions in ASP.NET3

4. Using a Style Sheet Use.css in a page  Place before the tag at top of page <link href=“~/styles.css” rel="Stylesheet" type="text/css"/> Designing & Developing Web-Based Solutions in ASP.NET4

5. Themes – Folders & Contents All themes must live here:  ~\Themes\  … Skins and CSS live in their theme folder  ~\Themes\ \styles.css  ~\Themes\ \Default.skin  ~\Themes\ \Large.skin  ~\Themes\ \Small.skin Designing & Developing Web-Based Solutions in ASP.NET5

6. Themes - Skins Automatic vs. Applied  Auto //.skin file Applied to all “asp:Label” controls  Applied.skin file .aspx  // skip runat=“server” Designing & Developing Web-Based Solutions in ASP.NET6

7. Using a Theme.webconfig   In Code Protected void Page_PreInit(…) {Page.Theme = “Theme Name 1”; }.aspx  Designing & Developing Web-Based Solutions in ASP.NET7

8. Themes vs. CSS = Complement ThemesCSS CompatibilityASP.NET OnlyStandard Effected ElementsControls OnlyHTML only When AppliedAt ServerAt Browser Where ReferencedASPX, IIS, *.webconfigRendered Page OverridingDefault = no override. StyleSheetTheme = css way. Element overrides, can’t change override Designing & Developing Web-Based Solutions in ASP.NET8

9. Themes – Override Behavior Default (controls can’t override the theme) The.css way (controls override theme) Can use both… Use separate.skin files Disable Theming on a per control basis  // Default=true NOTE: All or nothing here… Designing & Developing Web-Based Solutions in ASP.NET9

10. Master Pages Purpose:  Uniform Page Layout over entire website Previous Techniques  Pagelets: User controls defining layout Can’t ensure controls placed in same local on every page  HTML Frames: Browser contains multi-pages Pages can’t cross talk easily Designing & Developing Web-Based Solutions in ASP.NET10

11. Master Page – The File *.master Master Directive (in *.master file) Special contents  “default placeholder text” Designing & Developing Web-Based Solutions in ASP.NET11

12. Master Page – In a web Page.webconfig  .master”/> Page.master” %> Designing & Developing Web-Based Solutions in ASP.NET12

13. Master Page – Div vs. Table Table  Tabular Data, not meant for layout  Slow loading & complex nesting (Rat’s Nest)  Quick & simple for simple cases Div  Intended for layout  Faster load & Less nesting required.  Great at dynamically moving around (No Cell merge)  Little more complex for simple case, much easier for complex cases. Designing & Developing Web-Based Solutions in ASP.NET13

14. Lab Create a new Site Add a Master page  Layout (Table vs. Div)  ContentPlaceHolder  Apply (web.config vs. PAGE) Add Content Page Add Themes (Black & White)  Add Skins (Formal.skin & Playful.skin ?)  Add CSS (move MasterPage layout to CSS) Designing & Developing Web-Based Solutions in ASP.NET14

15. Homework Readings  Chapter 17 – Website Navigation Video:  Resources http://www.asp.net/learn/videos/video-40.aspx Project  Master Page good for multipage sites  At least 1 Theme nice as a.css repository Designing & Developing Web-Based Solutions in ASP.NET15