Zero to Professional Web Site in Two DaysUsing Microsoft’s Visual Studio Design Templates

Using Microsoft’s Visual Studio Design Templates

Author: Peter Kellner
Date: August 27th, 2006


Our Story

It’s Monday, August 21st, we have our CodeCamp scheduled for October 7th and 8th in Los Altos California and we realize we need to have our web site to sign up and running yesterday! For those of you who don’t know what a codecamp is, basically, it’s a developer to developer weekend meeting where high quality presentations are given to an audience of enthusiastic developers. Typically, 30 or 40 speakers running simultanious presentations to 300 or so attendees. Codecamps are all Volunteer, all free, and always on a weekend. So, our web site needs to allow sign ups for speakers and their presentations, attendess to let us know they are coming, provide information about the Venue as well as ultimately provide scheduling information about classes. Most importantly, it needs to do it with style and pizazz.


Microsoft’s Professional CSS Design Templates to the Rescue

Personally, I’m good at building web site plumbing, doing things like building master pages, doing database access, making tables and labels, but to put it might it simply, I’m web design skill challenged. This is where Microsoft has done me a huge service by providing reference CSS Design templates I can use to create professional looking web sites. For our codecamp web site I took a look at the five templates available to me. The one that caught my eye for CodeCamp was the fun style web site on the left (also as shown on Microsoft’s web site).

It has a three dimensional, building block kind of look, a simple clean design and would allow me to have all the functionality I wanted in my web site. Taking a peak at the finished web site you can see the similarity.

Our Finished Product

Let’s take a look at the steps involved. As good engineers, we know what 60 of the "zero to 60" will look like (see picture on right), we know what "zero" looks like (Visual Studio 2005, File/New Empty Website), now we just need to figure out what the steps in the middle are.

By way of comparison between what Microsoft provides with their CSS Design Templates and our finished product, notice the menu on the left. Same format, just different content. Notice the title on the top, the header on the bottom as well as of course the great looking building block graphics giving the site the "fun" look and feel.

In the next section, will discuss the mapping between asp.net 2.0 and the CSS. Then, we will go into more details about how to make it happen. As a "tables" kind of HTML programmer it warms my heart (as well as all the viewers of my sites) to be able to deliver a css enabled web site.

Mapping CSS to ASP.NET 2.0

Lets first briefly talk some about what it takes to use a CSS file in a asp.net web site. First, you need to have CSS that supports the basic constructs you will be using. Assuming you are going to use a master page to implement your web site, you’ll need to have containers (also known as div tags) that wrap all the different parts of your web site. This includes things like headers, footers, menu’s, login controls, as well as of course the content. We will now go into a little detail on some of these areas to help you understand the steps.

Headers

If you look in the CSS file for the FUN site, you’ll see the following definition for "sitename" and "slogan" .

#sitename {

    position:absolute;

    top:20px;

    right:100px;

    text-align:right;

    color:#FFFFFF;

    font-size:1.8em;

    font-weight:bold;

    }

 

#sitename a {

    text-decoration:none;

    color:#FFFFFF;

    border-bottom:none;

    }

 

#slogan {

    font-size:.65em;

    margin:0px;

    text-align:right;

    }

In the reference site for Microsoft’s CSS Fun Site, you’ll see that they use the CSS for the title as follows:

<div id="sitename">

    <a href="#" title="site name – home page">site name</a>

    <div id="slogan">

        Web site or company slogan goes here</div>

</div>

In our ASP.NET 2.0 http://www.siliconvalley-codecamp.com, we use a similar construct for our title as follows:

<div id="sitename">

    <a href="#" title="Silicon Valley Code Camp">Silicon Valley Code Camp</a>

    <div id="slogan">

        "By and For the Developer Community"

    </div>

</div>

Footers are implemented in a similar way. Without showing all the details this time, the following snippet shows how we used the CSS to implement our own footer.

<div id="footer-container">

    <span id="footer-left"></span>

    <div id="footer-right">

        <p>

            Silicon Valley Code Camp<br />

            October 7th and 8th, 2006<br />

            FootHill College, Los Altos California</p>

    </div>

</div>

Lets take a look now at how to implement the menu (left side of the page) in the Master Page. This one is a little trickier because the css and Microsoft’s example don’t know anything about the sitemanager server control asp.net 2.0 gives us. First thing, lets view the actual css used for the menu as well as the example given to us using this css.

/******************

SIDE LAYOUT

******************/

 

#side-container-outer {

    width:20%;

    position:absolute;

    top:120px;

    left:0px;

    padding-bottom:100px;

    }

 

#block-side-top-right {

    width:92%;

    height:25px;

    float:right;

    }

 

#block-side-top-left {

    width:8%;

    height:25px;

    float:left;

    background: url(block-side-top-left.gif) no-repeat top right;

    }

 

#side-container-inner{

    background: #929E8E;

    margin:0px;

    padding:0px;

    }

 

#side {

    background: #FFFFFF;

    width:70%;

    margin-left:8%;

    padding:0 12% 10px 10%;

    }   

 

#block-side-bottom-left {

    width:8%;

    height:25px;

    float:left;

    background: url(block-side-bottom-left.gif) no-repeat bottom right;

    margin:0px;

    padding:0px;

    }

 

#block-side-bottom-right {

    width:92%;

    height:25px;

    float:right;

    margin:0px;

    padding:0px;

    }

Now, lets look at the actual implementation that gives Microsoft their default menu in their template example.

<div id="side-container-outer">

    <div id="block-side-top-right">

        <img src="App_Themes/default/block-side-top-right.gif"

           alt="" width="100%" height="25" /></div>

    <div id="block-side-top-left">

    </div>

    <div class="clear">

    </div>

    <div id="side-container-inner">

        <div id="side">

            <div class="clear">

            </div>

            <!– BEGIN NAV ITMES –>

            <div class="none">

                <a href="#maincontent">goto main content</a>

            </div>

            <ul>

                <li><a href="#" title="">

                    Home</a></li>

                <li><a href="#" title="">

                    News</a></li>

                <li><a href="#" title="">

                    Products</a></li>

                <li><a href="#" title="">

                    About</a></li>

                <li><a href="#" title="">

                    Contact</a></li>

      &n bsp;         <li><a href="#" title="">

                    Login</a></li>

                <li><a href="#" title="">

                    Join</a></li>

            </ul>

            <div class="separator-side-column">

            </div>

            <!– END NAV ITEMS –>

        </div>

        <div>

            <div id="block-side-bottom-right">

                <img src="App_Themes/default/block-side-bottom-right.gif"

                   alt="" width="100%" height="25" /></div>

            <div id="block-side-bottom-left">

            </div>

        </div>

    </div>

</div>

 

Because we are going to use the asp.net 2.0 server control SiteManager, our aspx file will look considerable different but will yield the same look and feel.

<div id="side-container-outer">

    <div id="block-side-top-right">

        <img src="App_Themes/default/block-side-top-right.gif"

        alt="" width="100%" height="25" /></div>

    <div id="block-side-top-left">

    </div>

    <div class="clear">

    </div>

    <div id="side-container-inner">

        <div id="side">

            <div class="clear">

            </div>

            <!– BEGIN NAV ITMES –>

            <asp:SiteMapDataSource ID="SiteMapDataSource1"

            runat="server" ShowStartingNode="false" />

            <asp:Repeater ID="foo" runat="server"

            DataSourceID="SiteMapDataSource1" >

                <HeaderTemplate>

                    <ul>

                </HeaderTemplate>

                <ItemTemplate>

                    <li><a href=’<%#Eval("url") %>‘>

                        <%# Eval("Title") %>

                    </a></li>

                </ItemTemplate>

                <FooterTemplate>

                    </ul>

                </FooterTemplate>

            </asp:Repeater>

            <div class="separator-side-column">

            </div>

            <!– END NAV ITEMS –>

        </div>

        <div>

            <div id="block-side-bottom-right">

                <img src="App_Themes/default/block-side-bottom-right.gif"

                alt="" width="100%" height="25" /></div>

            <div id="block-side-bottom-left">

            </div>

        </div>

    </div>

</div>

The SiteMap Server control is basically a repeater type control which means that a template for each row being repeated must be referenced. All the rows in the menu (which are pulled from the SiteMapDataSource) are output through the SiteMap Server control. However, if you look carefully at the above two examples, you’ll see that the containers (div tags) all have the same class references.

Not Everything Works out of the Box

So far, everything has seemed very straight forward. Well, life is not always so simple. For example, on our Presenters web page, we want to use the three column content that the css fun template provides us but unfortunately, there example looks like what I have pictured below on the left, and we want to make it look like what is pictured on the right. To do this, we are going to have to do a little minor surgery on the css file. Not very hard though since Microsoft’s template is almost correct.

The first thing you notice is that the Microsoft example of using the template on the left has columns that are roughtly equal in size. For our web site, we want to have a narrow column for the picture, a wide column for the course description, and then a narrow column to show the presenters website. What we get from the css gives is a great starting place. Below are all the css tags needed from the css file to make the three equal width columns.

/******************

Three Column Section

******************/

 

#three-column-container {

    width:100%;

    margin:10px 0px;

    padding:10px 0px

    }

 

#three-column-left {

    float:left;

    width:30%;

    }

 

#three-column-right {

    float:right;

    width:30%;

    }

 

#three-column-middle {

    width:30%;

    margin:0px 31% 0px 35%;

    }

Using this in their sample code, Microsoft used the following HTML to generate the page above on the left.

<div id="three-column-container">

<div id="three-column-left">

    <h2>

        Column one of a three column content section</h2>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor

    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

    ut.</div>

<div id="three-column-right">

    <h2>

        Column three of a three column content section</h2>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

<div id="three-column-middle">

    <h2>

        Column two of a three column content section</h2>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

We want to modify this some, but we don’t just want to modify it, we want to create another set of tags so we can preserve the original for use later. Using cut and paste (with reservation of course), we create a new set of tags and simply add a w to the end of the tag names for wide (not very creative). We then modify the margins of this new tag to give us a wide section. A little trial and error is necessary to fine tune these numbers. Below is the new css we have created.

/******************

Three Column Section Wide Middle

******************/

 

#three-column-containerw {

    width:100%;

    margin:10px 0px;

    padding:10px 0px

    }

 

#three-column-leftw {

    float:left;

    width:15%;

    }

 

#three-column-rightw {

    float:right;

    width:15%;

    }

 

#three-column-middlew {

    width:55%;

    margin:0px 22% 0px 22%;

    margin:

    }

Using our newly defined css "three-column-containerw", we created the presenter interface using the Repeater server control included with asp.net. Notice the use of templates to each individual presenter’s information. Notice we are using div tags the way we normally use table row and column tags. Below is implementation.

<asp:Repeater ID="Repeater1" runat="server"

    DataSourceID="ObjectDataSourceAllPresenters">

    <HeaderTemplate>

        <div id="three-column-containerw">

    </HeaderTemplate>

    <ItemTemplate>

        <div id="three-column-leftw">

        <br />

            <asp:Image runat="server" ID="ImageUser"

            ImageUrl=’<%# "~/DisplayImage.ashx?PKID=" + Eval("PKID")  %> />

            <asp:Label ID="LabelName" runat="server" Font-Bold="true"

            Text=’<%# Eval("UserFirstName") + " " + Eval("UserLastName") %>‘>

            </asp:Label>

        </div>

        <div id="three-column-rightw">

            <asp:Label ID="Label2" runat="server"

            Font-Bold="true" Text=’<%# Eval("UserWebSite") %>‘>

            </asp:Label>

 

            <asp:HyperLink ID="HyperLinkSessions" 

              NavigateUrl=’<%# "~/Sessions.aspx?id=" + Eval("PKID") %>

              Text="Sessions"

              runat="server"></asp:HyperLink>

        </div>

        <div id="three-column-middlew">

            <asp:Label ID="Label1" runat="server" Text=’<%# Eval("UserBio") %>‘></asp:Label>

        </div>

  ;       <div class="clear"></div>

        <hr />

    </ItemTemplate>

    <FooterTemplate>

        </div>

    </FooterTemplate>

</asp:Repeater>

Summary

We’ve demonstrated some of the techniques her necessary to take a professional built CSS and implement an asp.net 2.0 web site. Seeing the power CSS brings to the table makes it possible for a web designer and web engineer to work independently and product outstanding results. We’ve seen that here by taking the Microsoft Professionally developed templates, combined with an asp.net 2.0 engineer (me) for two days and the results are very impressive. Mileage will vary of course depending on the project, but this really shows what can be done in a very short amount of time.

About the author

Peter Kellner founded 73rd Street Associates in 1990, where he successfully delivered systems for university clinic scheduling, insurance company management, and turnkey physician office management to more than 500 customers nationwide. Ten years later, in 2000, 73rd Street Associates was purchased by a large insurance company, and Peter started a new career as an independent software consultant. Among the technologies he currently is involved with are ASP.NET, Oracle, Java, VOiP, and soon, SQL Server. When not working, Peter spends most his free time biking. He has ridden his bike across the globe. Most recently he and his wife, Tammy, rode across the U.S., from California to Georgia, in just 27 days. His blog site is http://peterkellner.net. You will find this article and the code posted in the download section.

About Peter Kellner

Follow me:


Comments

  1. nice, and nice to understand very simply to everyone…..

  2. CSS at first looks is good four google seo!

  3. Marvelous presentation that you have created.
    Hope i could attend the meeting i am a noob and want to become a developer.
    cheap boot camp in chicago

  4. Latina Ferrand says:

    A lot of what you point out happens to be supprisingly appropriate and that makes me wonder the reason why I hadn’t looked at this in this light before. This piece truly did switch the light on for me personally as far as this subject matter goes. Nevertheless at this time there is actually one particular point I am not too comfy with and whilst I try to reconcile that with the actual central theme of your position, allow me see just what the rest of your subscribers have to point out.Very well done.

  5. I don’t use ASP, but I found this page searching for help with CSS, and I like the way you’ve broken down the ‘code’. Nice use of formatting for readability.

    I just noticed that this year’s code camp is happening right now. It sounds like something that would be very beneficial to attend… mabybe next year if I can fit it in my budget!

  6. nursing journals online says:

    I recently just modified my CSS based on this youth group activities for church mechanical engineering internships paintballing places info. Thanks

  7. These CSS examples are some of the best I have seen. I took a course recently on CSS but they didn’t go into as much depth as you do. portable fire pits

  8. Katie Elrod says:

    I believed this was well thought out. Thanks. Not lots of people take the time to

  9. Have someone tried this Microsoft’s Visual Studio Design Templates? What do you guys think about it, is it any good to use? It would be easier to have something like this when you are creating websites but sometimes writing the CSS code yourself is much simpler as you usually remember what you wrote before and where to find it.

  10. srikanth says:

    please submit look images

  11. Very useful information and not a bad result.

  12. Peter, although I don’t work with .NET, I’ve still found your tutorial quite useful, as it clearly breaks down and explains the CSS. I’ve been working on improving my CSS skills primarily to help tweak my wordpress themes. CSS isn’t difficult to comprehend, but it is a bit intimidating for a person not versed in code or markup language. Getting the proper syntax and implementing efficiency has been my greatest challenges, but things are getting easier…

  13. Why aren’t you using a CSS reset?

  14. NICE examples and websites

  15. Nice css examples, will surely help me out.

  16. The codes are so long! but it is useful to us reader! Thanks!

  17. Very interesting, saved my lots of time.

  18. Great example and demonstrations

  19. Very interesting subject

  20. I ought to say that it is my very first time viewing your blog. I can definitely write that it contains numerous useful things. Good website. I just finished mine and i was looking for some ideas and you gave me a few. I bookmarked your post will read this latter.

  21. Wow, it always makes me think, why do such good writers always have such an ugly blog theme. It’s always like that :D and dude, why aren’t you making money with your blog?
    I’m a blogger myself and I only wish I was able to produce such quality content as you do. Seriously, start putting a little advertisements on your blog, your readers will love it! Mine did…

    If you’re not very coding and web development savvy, just go get http://www.socratesforwordpress.com – I use them and they’re awesome. Even if you have any trouble with your theme, just post it to the forums andyou’ll be given feedback in less than one hour. They teach you to make money with your blog too.
    Dude I’m tellin ya’, just go check it out, try the trial or something, you’ll thank me :D

    K bye, I wish you luck with your blog :)

  22. Extremely well-written. I like the conversational style used in writing this post a lot; usually it is not my favorite but this one never loses connection with the reader.

  23. Vincent Murphy says:

    Nice article. Is CSS/HTML the best way to build very striking web sites? I am using VS2010 now and would like to know should I go the CSS template route as I dont have a graphic designer and my graphic skills are not good. Any feedback appreciated.

  24. Wow, this is really cool. Great example and demonstrations.

  25. Works like Charm!!!

    Very interesting, saved my lots of time.

    Thank You!!!

  26. Herstotshuh says:

    http://healthportalonline.in/cardura/sildenafil-and-cardura
    drugs information packages buy drug satellite tv health insurance breast cancer treatment with capecitabine
    home exericses for erectile dysfunction http://healthportalonline.in/casodex/casodex-bicalutamide-colorado
    symptoms of ectasy drug abuse elementary drug prevention education curbing sugar and carbohydrate cravings
    hands and health http://healthportalonline.in/ceftin/ceftin-allergic-reaction
    price of drugs in japan american council for drug education cefpodoxime online pharmacy technician course cialis dreampharmaceuticals online order

  27. pokal vijay says:

    Dear Sir,

    I like your response and also interested for creating our own web templates……..ok…

  28. Sorry, http://CssTemplatesForFree.com not csstemplateforfree.com

  29. I added this article link to my website.

  30. Cool article. I’ll create some sample websites for my users from csstemplateforfree.com website.

  31. Very helpful, thanks Peter. One correction: the URL for the Microsoft template samples has changed — it is now http://msdn2.microsoft.com/en-us/asp.net/aa336613.aspx

  32. Dave Martin says:

    Nice Article – Thanks for raising designing asp.net sites.
    The topic of developer / designer integration does not get enough attention. Lets face it every professional web team has artists of some kind making the end product look great. I run a team of 30 developers and 3 designers for the 2nd largest newspaper company in the UK – http://www.jpress.co.uk. We try to only ever use CSS and Divs – No Tables (a rule recently broken using Web Parts). The developers try not to render out much if any HTML formatting allowing the designer to do their job in tools designed specifically for the tasks such as Macromedia Dreamweaver – has anyone ever met a true web designer who uses VS?
    There are other problems faced on large complex sites such as JavaScript – often a developer will implement formating in Javascript simple because it is quick and easy for them – it is not so quick and easy for a designer to change this formatting unless we drive our artist types to write code which is a whole other discussion on a bad idea. This is even more of a challange on sites we have done such as http://www.propertytoday.co.uk or http://www.motorstoday.co.uk which use AJAX.
    You have inspired me to stop moaning that the topic is not covered properly and write my own article about it.
    Hope the comment was useful- Dave Martin.

Follow

Get every new post delivered to your Inbox

Join other followers: