2. 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.NET
1. ASP.NET Themes
2. Styling complex server controls
3. 1. Gather Requirements.
2. Get some PSDs from a good designer (Photoshop)
3. HTML it!
4. Get a customer approval on the UI
5. Move it to ASP.NET
6. Enjoy .NET coding
7. Publish
But what if
this is a big
project ? Like
SA???
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. 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.
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. 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. 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)