Web Site Extreme Makeover, Part 3 of 7

In this third installment of the extreme website makeover journey, we will take up where we left off in getting further along with the basic look and feel before moving on to the nitty-gritty of writing the code-behind, adding any jQuery UI widgets, etc.

So first off, let's add the links to the list items in the "Services We Provide" and "Products We Use" sections of the main page. Looking at the existing site's source, we can see what those links need to be.

I search first for "Colorquartz" as that is the first item listed in "Products We Use" and find the corresponding anchor tag in the page source:

<a href="http://nptgonline.com/pool-finishes/colorscapes">

So, I add that to the HTML in my project at the appropriate location, so that the list item that was described this way:

<li>Colorquartz</li>

... is now:

<li><a href="http://nptgonline.com/pool-finishes/colorscapes" target="_blank">Colorquartz</a></li>

I do that now with the rest of the items in that section, so that they all link to the external pages that they should.

Knowing the Hartt's will want me to use their "Credit Cards Accepted" animated gif, I locate that file in the page source and download it. I then add it to my project by right-clicking the project, selecting Add > New Folder, naming it "Images" and then right-clicking the new Images folder, selecting Add > Existing Item, and navigating to the folder where I saved that image and selecting the file to add it there.

I open the Site.master file again, go to the bottom of the page, into the <footer> section, and simply drag the file from the Solution Explorer below the copyright paragraph. The following HTML is automatically added:

<img src="Images/Logo-BannerSmall_1_.gif" />

While I'm at it, I decide to change the copyright notice to my company's name (since I'm the one creating the site). The easiest way to do this is to copy over some HTML from another site of mine, and make changes as necessary. So I copy over this:

<p class="float-left">© @DateTime.Now.Year - Across Time & Space</p>
<img class="breathingRoom" src="~/axXAndSpaceLogo.jpg" alt="Across Time and Space logo" width="128" height="80" />
<a class="breathingRoom" href="http://www.bigsurgarrapata.com" target="_blank">
<img src="~/Images/Spring2013_06_07_2578_th.jpg" alt="Garrapata, Big Sur's Best-Kept Secret" height="80" width="120" /></a>
<img class="breathingRoom" src="~/Images/g_bizspark_thumb.jpg" alt="Microsoft BizSpark logo" width="105" height="46" />
<a class="breathingRoom" href="http://www.awardwinnersonly.com/humans.txt" target="_blank">
<img src="~/Images/humanstxt-isolated-orange.gif" alt="Humans dot text logo" width="105" height="46" /></a>

... and since two custom CSS classes are referenced there, I locate them in my other site and copy them into Site.css:

.float-left {
    float: left;
}

.breathingRoom {
    margin-left: 4px;
    margin-top: 4px;
}

I also add another CSS class, so that the credit card animated gif will be flush against the right side of the footer. After trying to do this by setting "float: right" in my CSS and that not working, I ask a question on StackOverflow (the greatest thing since Manna – at least when it comes to picking the brains of programmers of every discipline) that you can see here: How can I move an image to the right side of the footer? and, before long (as usual), I get the answer I need and add this CSS class to the Site.css file:

.east-magnet {
  position: absolute;
  right: 0;
}

I locate and copy over my ("Across Time & Space") logo image and add it to my Images folder. I also add an image to the same location that I will use as a vehicle to house my "humans.txt" file (see humans.txt for information on this), and then remove the bits I'm not going to use from the HTML above, so I end up with this:

<footer>
    <p class="float-left">Web site ©<%: DateTime.Now.Year %></p>
    <img class="breathingRoom" src="Images/axXAndSpaceLogo.jpg" alt="Across Time and Space logo" width="128" height="80" />
    <a class="breathingRoom" href="http://www.awardwinnersonly.com/humans.txt" target="_blank">
        <img src="Images/humanstxt-isolated-orange.gif" alt="Humans dot text logo" width="105" height="46" /></a>
    <img class="east-magnet" src="Images/Logo-BannerSmall_1_.gif" />
</footer>

Sharp eyes may have noticed that I had to replace the "@" from the copied-over HTML, because that applies to Web Pages projects, which use the Razor template syntax, and this is a Web Forms app, and so needs the "<%: %>" syntax instead.

As the last thing for this installment, I'll replace the middle section of the page with the existing impressive animated gif which shows a pool project as it progress from looking like a "war zone" as the work commences to its final garden-like appearance. This series of images are contained in the animated gif file named Start-to-Finish2.gif

I locate that in the existing site's source, save the file locally, and add that to the project, beneath the Images folder.

I then change the HTML in Default.aspx, the div in the center section, to:

Pool Project Time Lapse

<img src="Images/Start-to-Finish2.gif" />

... to show the animated gif / slide show. However, when I run it, I find that the image does not stay within the bounds, and "leaks" way over to the right and downwards. So, I must restrict it by creating a CSS class. Not wanting to provide an absolute width and height, I instead use percentages. I will experiment with using 25% for both the screen width and height. Here's the CSS class I create for that, and put in Site.css:

.modestImage {
	height: 25%;
	width: 25%;
}

... and change the img tag to:

<img class="modestImage" src="Images/Start-to-Finish2.gif" />

I run it and see that makes the images way too dinky, so I change the percentages to 50% and test again.

Still too puny; what the Sam Hillsbrothers Coffee is going on here? I would assume that the size it took up before being constrained was 100%, but I'll try that and see what happens.

Well, 100% looks about perfect, so I'll go with that for now. However, that may not really be the right thing to do; we'll find out later, when the site is tested at different sizes, etc.

For now, though, this is a good place to complete this third installment and show you what we've got so far:

Until next time: happy browsing, rock steady, and all that rot.