Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to HTML and CSS For ASP.NET Developers

3,491 views

Published on

Introduction to HTML and CSS For ASP.NET Developers

http://harouny.wordpress.com/

  • Be the first to comment

  • Be the first to like this

Introduction to HTML and CSS For ASP.NET Developers

  1. 1. Prepared by: Ahmed EL-HarounySenior Software Engineer
  2. 2. 1. My Personal experience (2 showcases)2. What to expect from a graphic/web designer3. What you should know about CSS4. Convert PSDs to HTML/CSS pages5. Moving to ASP.NET 1. ASP.NET Themes 2. Styling complex server controls
  3. 3. 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???
  4. 4.  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.
  5. 5.  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.
  6. 6. Demo
  7. 7.  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.
  8. 8.  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).
  9. 9.  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)

×