Module 11

Applying Master Pages and CSS

Module Overview
Applying Master Pages Applying CSS, Skins, and Themes

Lesson 1: Applying Master Pages

Challenges in Providing a Consistent UI What is a Master Page?

Creating a Master Page

Using a Master Page in Web Forms and MVC Pages What are Nested Master Pages?

The Master Page Event Model and Relationships

Challenges in Providing a Consistent UI

Creating proper design documentation Taking the time to properly organize your design, from the

beginning

Not taking shortcuts when deadlines are tight

Consistent User Interfaces Provide

Quick familiarity for users across your application Support can be provided more easily Documentation to support your design

What is a Master Page?

Master Page
ContentPlaceHolder ContentPlaceHolder

Demonstration: Creating a Master Page

Create Master Page Add ContentPlaceHolder

Demonstration: Using a Master Page in Web Forms and MVC View Pages
Web Forms Create New Page Add Content

MVC Create New View Add Content

What are Nested Master Pages?

Master Page
ContentPlaceHolder Nested Master Page
ContentPlaceHolder ContentPlaceHolder

ContentPlaceHolder

The Master Page Event Model and Relationships

Master Page Controls Init Content Page Controls Init Master Page Init Content Page Init Controls Load Master Page Load Content Page Controls Load Content Page Pre-Render Master Page Pre-Render Master Page Controls Pre-Render Content Page Controls Pre-Render Content Page Load

Lesson 2: Applying CSS, Skins, and Themes

What are Cascading Style Sheets? Creating a CSS File

CSS Features of Visual Studio

Overview of Themes and Control Skins

What are Cascading Style Sheets?

What we are applying the style to (type, class, id)

{ Styles are surrounded by brackets } Each style ends in a semi-colon;

div { color:black; }
Value of attribute Attribute that we want to style

Demonstration: Creating a CSS File

Create CSS File Add Custom Styles Apply Styles

CSS Features of Visual Studio

CSS Properties Window Manage Styles Window

Apply Styles Window

CSS Outline Window

Overview of Themes and Control Skins

Themes are a collection of CSS, Control Skins, and other

resource files (for example, images)

Themes organize your design A web application can use multiple Themes Control Skins apply styles to controls without having to

write CSS Skin ID

Control Skins can be applied Theme-wide, or by using a

Lab: Applying Master Pages and CSS

Exercise 1: Modify a Master Page Exercise 2: Create Nested Master Page

Exercise 3: Integrate a Master Page

Exercise 4: Implement Control Skins Exercise 5: Apply Styles and Themes

Logon information

Virtual machine User name Password

10264A-GEN-DEV Student Pa$$w0rd

Estimated time: 60 minutes

Lab Scenario

Module Review and Takeaways

Review Questions Common Issues and Troubleshooting Tips

Real-world Issues and Scenarios

Best Practices