Sponsored By Aspose - File Format APIs for .NET

Aspose are the market leader of .NET APIs for file business formats – natively work with DOCX, XLSX, PPT, PDF, MSG, MPP, images formats and many more!

ASP.NET 2.0 and Web Standards – Using Master Pages

First off let me start by stating the obvious, “I’m no expert at XHTML, CSS or even ASP.NET 2.0″. Now having said that, please forgive any glaring inaccuracies or omissions in this post. I’m still learning, even at my age!


As I stated in my previous post, I’ve spent the last few months trying to learn web standards “best practices” from various books and web sites dedicated to XHTML and CSS. What I’ve learned is that you can (and probably should) use ASP.NET 2.0 Master Pages to create XHTML compliant web sites using CSS layout techniques instead of tables! Once you get the hang of it, it’s really very straight-forward and easy to accomplish in Visual Studio 2005. More importantly, you can use (some of) the new server controls and data source controls including the Menu Server Control (more about this in a later post).


My first step was to create a standards compliant HTML web page and Cascading Style Sheet (CSS) in Visual Studio to act as a “prototype” for my Master Page. For me this meant a simple two-column, fluid layout using the “Faux Sliding Columns” technique outlined in Dan Cederholm’s two great books, Bulletproof Web Design and Web Standards Solutions. I also exploited several CSS “Hacks” designed to make sure IE displays the page correctly and tested my page in both Internet Explorer and Firefox.


My next step was to create a Master Page in Visual Studio and transfer the HTML from my prototype web page to the appropriate section of the Master Page as shown below. This took some “fiddling” since I wasn’t always sure what HTML the Master Page and Content Placeholders were emitting.


The next step is to apply the Cascading Style Sheet(s) used in the prototype to the Master Page and then tweak as required. The final step is to create a Content Page from the Master Page, add some content and test, test, test! The finished product is shown below.



No tables were used in the web page and all images are loaded directly from the style sheet. The top menu was created using a SiteMapPath server control and a templated Menu server control. The web page conditionally parses against the XHTML 1.0 Transitional standard as well as accessibility standards such as WCAG and Section 508. The Cascading Style Sheet also parses against the CSS Level 1 and Level 2 standards.


As always, your comments and suggestions are very welcome!

This entry was posted in ASP.NET. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

7 Responses to ASP.NET 2.0 and Web Standards – Using Master Pages

  1. Chris says:

    Hi Jeff
    Would it be possible for you to send us the project above in an attachment?
    Rgds
    Chris

  2. Catto says:

    Hey Now Jeff,
    THis post helped me thx.
    Catto

  3. Jeff Lynch says:

    Chris,

    Thanks for the tech lead. It’s gonna take a few days to review the CSS but it really looks great.


    Jeff

  4. I found what appears to be an excellent example of table-less forms (at least at first glance). Check this out:

    http://jeffhowden.com/code/css/forms/

  5. That’s a loaded question since “OK” is somewhat relative. A diehard standards guru would probably tell you to only use tables for tabular data, no exceptions. You can design forms without tables but it seems like maybe that’s a little overkill or maybe it’s not….I guess it depends on how fancy the table is. I would definitely make sure to use the proper form controls either way (ie. fieldset, legend, etc). I’m sure you’ve seen it, but this page is a decent guide….

    http://msdn.microsoft.com/asp.net/reference/design/default.aspx?pull=/library/en-us/dnaspp/html/aspnetusstan.asp

    Overall, MS is putting people on the right path, you just have to massage what they give you a little to get all the way there.

  6. Jeff Lynch says:

    Chris,

    Thanks for the comments. I use TopStyle all the time as my default CSS editor. My next step in developing this site is to use some of the new server controls and see if the pages stay XHTML compliant.

    I’ve got a question for you. When is it OK to use tables besides tabular data? What about entering data?

    Stay tuned!


    Jeff

  7. Looks good. It also looks like you took the same approach I normally take; design it in a static html page and then transfer the layout back to VS. You probably already know about this but if not something you may want to check out is a CSS product called TopStyle. In addition to being my CSS editor of choice I also use it for prototyping XHTML pages. I’m know there are some similar products out there now, but there wasn’t much when I started jumping on the standards thing myself.

Leave a Reply