Web Site Extreme Makeover, Part 4 of 7

Introduction 

We've made it to the fourth installment of “Web Site Extreme Makeover”, and we are starting to get warmed up now – the web site, at least the home page, probably looks pretty much like what the end result will be. But we will continue to add some “gingerbread” to the home page to try to make it more visually striking, or at least appealing.

Continuing On

First, I replace the text below the company name with “Serving the Highway 99 corridor between Modesto and Merced in California's San Joaquin Valley since 1971”

Next, I want to set off the footer from the rest of the page – it all blends together right now. So I'll give that a different background color.

To do that, I add a rule for background color to my footer CSS tag so that it is now:

footer {
  position: relative;
  background-color: lightskyblue;
}

Since this is an HTML5 tag name (as opposed to a self-named CSS class), I don't need to add a "class="footer"" to the footer - any footer in the site will inherit these rules automatically. And, since an HTML5 footer does exist in Site.Master, any page that references Site.Master will inherit that same footer. IOW, this directive:

MasterPageFile="~/Site.Master" 

...in this line at the top of Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HarttPools._Default" %>

...sees to it that Default.aspx uses Site.Master as its "Master Page", so that Default.aspx looks to Site.Master to provide a “starting point”, kind of like a business letterhead or a document template's formatting. The same inheritance is true for the other pages in the site (at least for now), such as "About", "Contact", etc.

This is how it now looks, with the change of verbiage below the company name and a background color added to the footer:

I think I'll move the credit card animated gif into the main section at the top; where it is now, it looks as if it may be my business that accepts those particular credit cards, not Hartt's Pool Plastering (the footer section is sort of “my” section, where I'm advertising my business with my logo on the far left with the Web site copyright notice, and also the Humans.txt link opens a simple text page, which has my contact info for anybody who wants a new or revamped web site built for them).

So, I move the animated gif into the business name section, from the footer in Site.Master to the first div in Default.aspx.

I now add an “Images” menu item, as there are many of those to be displayed in addition to the 8-image animated gif displaying in the middle of the home page. To do this, I add another list item to the section in Site.Master where the menu items appear, specifically:

<li><a runat="server" href="~/Images">Images</a></li>

...and add a page named Images by right-clicking the project, selecting Add > Web Form, and naming it “Images”

When I run the site now, though, I see that the credit card gif is way too far to the right. I remove the “class="east-magnet"” to see where the gif will end up then...Okay, that's better – it's below the text, instead of being way out in “right field” (from the batter's/onlooker's perspective). I will also give that section a background color to set it off from the middle section, too, similar to the footer. Since I can't apply the rule to a div (I don't want to change the background color of all the divs), I create a new CSS class with just the background color:

.backgroundcolorLightSkyBlue {
  background-color: lightskyblue;
}

...and assign that class to the div, adding it to the pre-existing “jumbotron” class (placed there by the project's usage of the Bootstrap framework):

<div class="jumbotron backgroundcolorLightSkyBlue" >

That works fine, so I then add “class=“backgroundcolorLightSkyBlue”” to the footer, and delete the background-color directive from the footer CSS declaration so that it is now simply this:

footer {
  position: relative;
  background-color: lightskyblue;
}

Finally (maybe?), I make one more change. I add a CSS class that will set a font's color to azure (which basically seems to be a fancy name for “White”):

.fontcolorAzure {
    color: azure;
}

...and add that class to the verbiage below the company name:

<p class="lead fontcolorAzure">Serving the Highway 99 corridor 
   between Modesto and Merced in California's San Joaquin Valley since 1971</p>

(“lead” was already there, added by Microsoft/Bootstrap)

That's enough for the home page, at least for now; here's what it looks like after this installment's improvements (this screen shot catches the credit card animated gif in mid-morph):

Signing Out for Now

That's all for this time, folks! Happy trails, until we meet again in the next segment of this thrilling series of “As the Web is Woven” (or whatever it's called).