introduction to html and css for asp.net developers

9
Prepared by: Ahmed EL-Harouny Senior Software Engineer

Upload: ahmed-elharouny

Post on 09-Jul-2015

3.117 views

Category:

Entertainment & Humor


0 download

DESCRIPTION

Introduction to HTML and CSS For ASP.NET Developers http://harouny.wordpress.com/

TRANSCRIPT

Prepared by: Ahmed EL-Harouny

Senior Software Engineer

1. My Personal experience (2 showcases)

2. What to expect from a graphic/web designer

3. What you should know about CSS

4. Convert PSDs to HTML/CSS pages

5. Moving to ASP.NET1. ASP.NET Themes

2. Styling complex server controls

1. Gather Requirements.2. Get some PSDs from a good designer (Photoshop)3. HTML it! 4. Get a customer approval on the UI5. Move it to ASP.NET6. Enjoy .NET coding7. Publish

But what if this is a big project ? Like SA???

Pure graphic designers knows nothing about HTML so their output will be in most cases some PSDs for application views.

HTML generators in graphics software like Photoshop always produces stinky markup.

Web designers are people who knows HTML, CSS, JavaScript, graphic design software and a little of server side coding knowledge.

In most cases I found that HTML markup that is written by none developers is hard to maintain.

When you don’t have a web designer, you should try act his role.

Where to put your style (External, Internal, Inline).

Type selectors (IDs VS classes VS Tags).

Name your selectors based on what they do not what they looks.

Group Identical Styles together.

Block VS Inline.

Background Images and colors.

Margin VS Padding.

Absolute positioning.

Hover effects.

Demo

Move your markup from HTML pages to ASP.NET master page.

Move your CSS files to Themes. Why you need a <form> tag in ASP.NET webforms? Server Controls VS HTML Controls. Define Content Placeholders. When you code a feature:

◦ Start by pasting your old styled markup.◦ Try to stick to HTML controls as much you can.◦ If you must use Server controls use CSSClass property to

apply styles for them and use any View Source mechanism to investigate rendered markup.http://getfirebug.com/

Webforms VS MVC.

Themes are made up of a set of elements: skins (.skin), cascading style sheets (.CSS), images, and other resources.

.skin VS .CSS.

Themes do not cascade the way style sheets do. Any property values defined in a theme overrides the property values declaratively set on a control.

CSS files in theme folders are rendered to the page ordered by folders/files names.◦ What if you have your own structure? (you will have to

use naming conventions for files ex: starting file name with numbers).

Investigate the rendered Markup (Firebug, IE Developer Tools)

Get rid of any predefined styling.

You can add more than one class to the same element. (ex: <div class=“GridItem Highlighted”></div> )

Use WebControl.CssClass property to add classes.

What happened to my IDs!!?

Introducing Control.ClientIDMode

What if you want to style an existing control in only one view? (add HTML wrapper and add your custom

style to any inner control)