WebDev Refresh Template

Step by Step

Download the Refresh Template

Extract the website from the folder so you can edit it. Be sure the website is in a folder called “refresh” and that there are no extra folder layers.

Develop a Color Scheme

Your goal is to remove all the green from this site. Reformat the page to be blue and something other than green.

Start by getting the hexdec (hexadecimal) value for a shade of blue in the header. Download ColorPix to your F: drive. Open up the header.jpg from the images folder by double clicking on it. Open colorpix.exe by double clicking as well.

Hover over the header until you see a color you like in the colorpix window. Hit a key to lock the color and then record the hexdec value in the top comment section of your .css file.

 

Label it “refresh header blue” and then save this as a .txt file called “colors”.

Now go to colorschemer to develop a new color scheme. Type the header blue value into the text box on the left side of the page. 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 the .css document.

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. To change the title of the Refresh page, you need to open index.html with Notepad++. The title for the page, “refresh” is on line 15 within theandtags. Change it to “(your first name)’s site”.

 

You can edit the logo and slogan by looking on line 24 of index.html file in Notepad++, finding the “Re-Fresh” text and changing it. This is found under the green text ““. Find

<div id=”header”>

<h1 id=”logo-text”>refresh
<h2 id=”slogan”>put your site slogan here…

Change the black text “re” and “fresh” to a title of your choice. Changing “Re” changes the white part of the logo text. Changing “Fresh” changes the gray text. Next, change the slogan within the

tags. Type a made up slogan in place of “put your slogan here”.

 

Hit the “Save” icon on the Notepad++ toolbar to save your work. The “Save” icon in Notepad++ will be blue if the current document is not saved. You can also tell a document isn’t saved if the small disc icon on the document tab is red.

Go back into the Refresh folder through “My Computer” and double click index.html to open it in the browser. Check to see that your edits worked.

Create New Header Image

You need to consider that the blue area in the header is 78 px high. Be sure the size of the text you add is around between 60 and 70 pixels.

Next, navigate to the images folder through “My Computer”. Click on header.jpg to select it. Hit Ctrl+C to copy and Ctrl+V to paste. This will give you a back up copy of the header just in case.

Now open header.jpg in Photoshop. Once it’s open, create a new layer.

This is where you will create your new logo text. Go back to your new logo and select the layer containing your logo text. The layer should turn blue. Hit Crtl+C to copy. Go back to the header.jpg. Make sure the new layer is active (blue) and hit Crtl+V to paste your logo on top of the header.jpg.

Once you paste the merged logo, you will see dancing dashes around the image. This tells you it’s floating and can be moved. Use the move tool to re-position your logo and then hit the anchor button to anchor it.

Finally, save your newly created header image as header.jpg. Double check that it saves back to the images folder. If you save it as the correct file type (.jpg) and to the correct folder (images), then when you view you webpage (index.html) in the browser (by going to your web folder and double clicking on it), then you should see you new header pop up on top of your page

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 nav bar 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 text. 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 and open refresh.css 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, around line 230. The second thing listed under the main column section is #main h1. The color value is #88ac0b. This is a pea green color. This is the color of the h1’s on the Refresh index page. Change #88ac0b something other that 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 working.

Change Green Navbar Background and graphics

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.

Find menu.jpg in refresh.css. With the document open in Notepad, use the find command (Crtl+F) and search for “menu.jpg”. You’ll find the file listed under Erwin’s /* Menu */ section.

The code on line 231 of refresh.css gives the browser the following directions:

“When displaying the menu, find menu.jpg and repeat it downwards (along the y-axis) for the entire section. “

The code under #menu 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 section of the page (

starts a section) called “menu”. It does the trick. The background of the top menu is a nice shade of pea green. Pretty smart guy that Erwin.

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.

Resave your edited graphic as menu.jpg. Be sure you save it in the images folder.

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.

OpenSource Web Design