Learn web building
So if you haven’t already done so, you can download Visual Web Developer, Express Edition from Microsoft’s MSDN site here. You will need to have the .NET 2.0 runtime installed, but if you’ve been running C# Express Edition, VS.Net 2005 etc, then this will already be the case.
As with Web Matrix, Visual Web Developer comes with its own server, known as ASP.NET Development Server. Generally, it’s much more convenient to use this server rather than going down the full-blown IIS route. If you work with a file system website, Visual Web Developer (VWD) will use the ASP.NET Development Server by default. However, be aware that there are issues with Firefox – see the relevant info box later.
Defining options
OK, so we’ve got Visual Web Developer up and running. Let’s begin by creating a new site from scratch. This is done by going to the File menu and clicking on ‘New website’. You’ll be presented with a dialog box containing a series of options. Choose the ASP.NET website template and specify that you want to use the C# language. You should also set the location to ‘File System’ and use the ‘Browse’ button to choose where you want the various files to be physically located.
If you’re not exactly sure what File System means in this context, suffice to say that Visual Web Developer has options for storing websites as a series of files in an ordinary folder, or a folder within the virtual IIS hierarchy. Since we’re not going to use IIS here, it makes sense to stick with the File System option. Once you’ve created an initial, empty website, the Solution Explorer window will show the new files relating to the site. You get a default web page called ‘Default.aspx’, along with an associated code-behind file called ‘Default.aspx.cs’. However, we won’t use those files here. Instead, let’s create a new page called ‘FirstWebPage’.
To do this, right-click on the root node in the Solution Explorer window, choose ‘Add New Item’ from the pop-up menu and fill in the blanks in the resulting form. You’ll notice that Visual Web Developer allows you to specify a different script language for each page in your site, but we’ll stick with C# here. In contrast to the Default page mentioned earlier, we’ll leave the ‘Place code in separate file’ checkbox unchecked, which means that any C# code will be added directly into the .ASPX file. Specify a filename of FirstWebPage.aspx and hit the [Return] key.
Once you’ve done that, you can delete the Default page and associated C# file from the Solution Explorer. Right-click on ‘FirstWebPage.aspx’ and specify it as the start page for your site. Try typing some random text into your web page – this will be saved as static HTML – and then run the page; it should appear in the default web browser. As with Web Matrix, you can switch between a Design view (WYSIWYG) and a Source view which shows static HTML along with embedded ASP.NET controls (look for the ‘<asp:xxxx’ tags) and any C# code you write.
Putting it together
It’s straightforward to add other web pages to your site in the same way, simply by going through the aforementioned process. Once you’ve got more than one page, you’ll want to create links between them. You can do this by dropping a HyperLink control onto the page from the Toolbox window and then setting its Navigate URL property to the relative URL of the target page. It’s easiest by clicking the ellipsis button to the right of the property to bring up the Select URL dialog, rather than typing in URLs by hand.
While I was at it, I added a Wild West cowboy image to the first page of my website. If you’re unfamiliar with www.wikipedia.com, it’s a great place to find images relevant to your subject matter. Be sure to use an image that’s marked as being in the public domain. Once you’ve found a suitable image, you can either copy it locally into your website folder or, as I’ve done here, right-click on the image in your browser to copy the image location onto the clipboard and then paste this into the Image URL property of an Image control. Copying the image locally is the better option – even if it disappears from the referenced website, it won’t disappear from yours!
Taking it further
There’s barely room here to scrape the surface of what can be done with Visual Web Developer, but if this has whetted your appetite for more, then I strongly suggest you check out the Personal Website Starter Kit, which comes with VWD. Create a new website as normal, but choose the Starter Kit from the list of available templates. After a few moments of quiet contemplation, VWD will spit out a very professional looking website, complete with facilities for registering on the site, viewing photo galleries, and more.
There are a couple of things here that are especially interesting. To start with, you’ll notice that all the pages use the Code-Behind model, so you’ll need to check out the associated .CS files to see what’s happening from a code point of view. More interesting is the way in which the various photos (for the photo gallery) are stored and retrieved from a SQL database. To find out more about how this works, check out the ObjectTypes.cs and PhotoManager.cs files under the App_Code folder. Finally, you’ll also see that the website uses a Master page to provide consistent elements across the whole site. Check out the way in which site navigation is accomplished through a menu and SiteMapPath control linked to the web.sitemap file. We’ll have more on that next month…
When you’re building a complex website with many pages, it can be a struggle to get all the pages looking visually consistent. And if you decide you want to change the colour scheme part way through, much blood, sweat and tears can result. The best way of tackling this issue is to use a theme, although Visual Web Developer doesn’t make it obvious how these themes work.
To begin, go to the root node of your website in Solution Explorer and right-click. Choose ‘Add Folder’ from the context menu and in that submenu select the Theme Folder item. You’ll end up with a new folder ,which (in my case) I renamed to ‘wwTheme’. Right-click inside this folder, choose ‘Add New Item’ and select ‘Skin File’ from the available templates. Again, I renamed this file to ‘wwTheme.skin’.
Now open the new skin file and begin adding definitions for each type of ASP.NET control you want to apply theme settings to. A skin file is just a markup file containing definitions for each type of control we want to theme. An easy way to create a comprehensive skin file for yourself is to build a dummy web page, and then copy the resulting source from the ASPX file into the target skin file whenever you’re happy with the result. Be sure to remove any control IDs when you’re done, however. As a simple example, my skin file contains the following definitions:
<asp:Label runat=”Server” ForeColor=#330099 /> <asp:HyperLink runat=”Server” ForeColor=”SeaGreen” />
This code stipulates that any ASP.Net label or hyperlink controls should have the foreground colours specified. Finally, go to each of your .ASPX pages and change the Page directive to look like this:
<%@Page Language=”C#” Theme=”wwTheme” %>…now you have your skin on!