Step by Step

Download the Refresh template. Once you have it, you need to remove it from the .zip folder. Double click the zip folder to open it, click the Refresh1-0 folder to select it. Cut it and paste it directly on your F: drive. Next, rename the folder to (yourfirstnameandlastinitial)refresh.

Using Notepad

HTML is a language or code. Anyone can write it. All you need to write it is a text editor. A text editor is just a program you can use for writing. MS Word is a “text editor”. The main text editor you’ll use for rebuilding the Refresh template is Notepad. All Windows machines have Notepad installed. Notepad is very simple to use.

Develop a Color Scheme

Your first goal is to change the color scheme of your Refresh site. It starts out blue and green. You will reformat the page to be blue and something besides green. Start by getting the hexdec (hexadecimal) value for a shade of blue in the header. Get the hexdec value by downloading colorpix to your F: drive. Open up the header.jpg from the images folder. Open colorpix. Hover over the header and record the hexdec value in Notepad. Label it “refresh header blue” and then save this text file in your refresh website folder. Name it “colors”. You will continue to collect hexdec values for colors and record them in this file.

Now go to colorschemer to develop a new color scheme. Type the header blue value into colorschemer, hit “set hex” and then pick 3-4 colors you think would look good on your site. Record the hexdec values along with a name for the color in “colors.txt”.

Change the Page Title, Logo Text and Slogan

The title of a web page is displayed on the top blue bar of the browser window. You need to open index.html with Notepad and change the title. The title for the page is about 15 lines from the top within the <title> and </title> tags. Change it to “(your first name)’s site”.

The Refresh logo and slogan can be found in the header section of the index file. You can see and edit the logo and slogan by opening up the index.html file in Notepad, finding the “Re-Fresh” text and changing it. To open the index.html file, right click on it and select open with -> Notepad. About 25 lines down, you will see <!–header –>. This is where the html that builds the header starts btw - header is a generic term for the top of the page. A couple lines down, find:

<h1 id=”logo-text”>Re<span class=”gray”>Fresh</span></h1>
<h2 id=”slogan”>put your site slogan here</h2>

Changing “Re” changes the white part of the logo text. Changing “Fresh” changes the gray text. Type a made up slogan in place of “put your slogan here”. Save as index.html. Go back into the Refresh folder through “My Computer” and double click the index.html to open it in the browser. Check to see that your edits worked.

Create New Header Image

The easiest way to build a new, cool text graphic is to use the logo feature of GIMP. Access it through the Xtns menu. Once you pick a style, GIMP will build the layers of your new text image. IMPORTANT - Once the logo is built, you need to make the background layer invisible. That will make the background transparent so it will easily blend into the header.gif.

Another important tidbit is the height of the blue area in the header is 78 px. Be sure the text image you add is less than 78 px. Once you have your logo text made, use the “merge visible” feature to scrunch up the layers into one. Next, open header.jpg from the images folder found in the refresh folder. Select the layer containing your logo text then copy and paste the logo image onto the header.jpg. Save your final product back in the images folder as header1.jpg.

You could save your newly created header image as header.jpg. The only problem with this is you will loose the original header and you never know when you might need to get it back. It’s a good idea to use some naming conventions when saving new versions of graphics. For example, if I have a header I resized to 100px high, I’d save it as header100. If I changed the main color of the header to orange, I’d save it as headerorange. If I’m making many slight changes just to check out how they’ll look, I would use consecutive numbers or letters like header1, header2, etc.

Edit CSS to Display header1.jpg

Now you need to open the .css file (aka style sheet) in Notepad and edit it so header.jpg is replaced with header1.jpg. The .css file that formats the pages in this site is called refresh.css and it’s found in the images folder. Open the .css file in notepad. Hit ctrl+F to open the “find” dialogue box. Type in “header.jpg”. When you find it, change the text to “header1.jpg”. Save the .css document. Double click index.html to see if the changes took.

Next Steps

Time to take out the green and substitute it with other colors. When you look at the site, you’ll find green in 4 main places - the h1 (or level 1 heading) text, the hover hyperlink color, the navbar under the header, and the two small square graphics - one is next to the h1 text and the other is next to the hyperlinks.

Change Link Hover Color

Let’s start with the hyperlink hover color. Erwin, the author of Refresh 1.0, was kind enough to write nice, clean, understandable code. He included lots of comments to help us edit his work as well. The next edits we make will be in the .css file. Go into the images folder and right-click refresh.css to open it in Notepad. Near the top of the document you will see /* links */. The /* */ is how you comment out notes in style sheets. Erwin is simply telling us where the link formatting directions are.

The first link spec listed is a, a:visited. This indicates that the following formatting will apply to hyperlinks (a) and visited hyperlinks (a:visited) found on the main page. The hexdec listed is #4F82CB. This is the light blue hyperlink text color. The next link specification is a:hover. The hexdec listed is #4EBF37. This is the code that makes the link text turn green when you hover over a link. Change this hexdec to a color other than green. Save the style sheet as “refresh.css”

Change h1 Green

The next batch of green text we see on the index page are the h1’s or level 1 headings. It’s a little tricky to find the code for these in the .css file. That’s because there are a handful of h1 color specs in the .css document. The key is knowing where to find the h1 displayed at the top of the index page. The h1 we’re looking at is in the #main section of the .css document.

Look for the /* Main Column */ section. It’s about 2/3’s down the .css document. The second thing listed under the main column section is #main h1. The color value is #88ac0b. This is kind of a pea green color. This is the color of the h1’s on the Refresh index page. Go ahead and change the hexdec listed next to the h1’s to something besides green.

If you haven’t checked your work yet, now would be a good time to save the style sheet and open index.html in the browser to be sure your changes are happening the way you want them to.

Next job is to deal with the graphics’ greens. You will have to create 3 graphics to replace green graphics the site already uses. Let’s start with the navbar under the header. Erwin used an interesting method to make it green. What he did was create a green line that is 820 pixels (px) wide and 1 px thick. He saved it as menu.jpg. Your next job is to redo the color of the menu graphic.

Change Green Navbar Background

Find menu.jpg in refresh.css. With the document open in Notepad, use the find command under the edit menu and search for “menu.jpg”. You’ll find the file listed under Erwin’s /* Menu */ section. Here’s how he got a skinny line to take up the entire height of the top navbar. Look at the line that says

background: url(menu.jpg) repeat-y center top;

This line is under #menu and it tells the browser to find (URL means Universal Resource Locator) the file menu.jpg and repeat it on the y axis - remember in math the y axis is the vertical or top to bottom axis - in the menu section starting in the center and at the top of that section. It does the trick, the background of the top menu is a nice shade of pea green. Pretty smart guy that Erwin.

Open menu.jpg in the GIMP. Paint over the green with a color from your color scheme. Be careful you don’t paint over the gray or white areas on the ends of the line. Save your edited picture with a commonsense name that’s descriptive and recognizable like menu1 or menured. Be sure you save it in the images folder. Now go back to refresh.css and use the find command to locate “menu.jpg” in the code. Change menu.jpg to whatever you named your new menu graphic. Save the style sheet and double click index.html to view your changes in the browser.

Replace Small Green Boxes

We’re in the home stretch. The last piece to removing all the green from Refresh 1.0 is to redo the green boxy graphics found next to the h1 text and the hyperlinks. These images are called go.gif (this image is displayed next to the hyperlinks) and square-green.png (found next to the level 1 headings) Use your creativity to craft replacements. The only requirement is the graphics need to be 15px by 15px. If you had a music site, you could draw a small music note. You could have a simple arrow, a piece of fruit or just a dot. Remember to include a color from your color scheme.

Use GIMP to draw your new graphics. You can name your new link graphic go.gif and simply save it over the old go.gif. Just remember that you will loose the original. However, save the h1 graphic with a new, descriptive name. Can you guess what else you’ll need to change to make your new h1 graphic active? If you guessed edit the #main h1 section of refresh.css, you guessed correctly! That’s the section of the css document that controls what image is displayed next to the h1. Replace the URL spec “square-green.png” with the file name for the graphic you created to replace square-green.png.

Yeah! If you’ve made it this far, you know about 2,000 times as much as your parents about what it takes to be a primo web designer! Remember how I said all the best looking websites start with an artistic vision? Well it’s time to exercise your creativity muscles and become a real webdev pro.

Getting the Goods

Once you’ve finished the paper stealing practice, you almost have enough web building knowledge to be dangerous. It’s time to commit. Find a web template to use for your magnum opus. Be sure you like it because you will be spending a lot of time with it. Look here for some great templates.

• Template Box
• Open Source Web Design
• Free Layouts