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

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

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

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

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

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

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

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

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

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

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

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

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

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

Homework Readings  Chapter 17 – Website Navigation Video:  Resources Project  Master Page good for multipage sites  At least 1 Theme nice as a.css repository Designing & Developing Web-Based Solutions in ASP.NET15