Back to Tutorials Gallery
Tutorial - MAKE MY WEBSITE!
Steps: 50

< Previous Page - Next Page >

If you want something just like mine, follow this tutorial and you'll have all that your eyes desire. I'm writing this as I go along REMAKING my entire website to make it as accurate as possible. I'm writing this as though I'm teaching someone who has never done any web design before. So if it feels like I'm holding your hand, it's because I am.

Also I'm going to split it into multiple pages. I have a few reasons for this:
1. To make the pages a little shorter to scroll through.
2. Each page will contain 1 or 2 ads from Google Adsense.
Something like that. It's the least you can do for me. Putting up with the ads.

I'm going to split this into parts kindof like body parts, they are as follows:
- Long Y-axis background
- Navigation bar
- Header Image
- Content

Requirements:
Knowledge of both Adobe Photoshop 7+ and Dreamweaver 8+.

Site Details:
Width: 600
Height: Variable. Must be length of atleast a 1024px this will be explained later.

Step 1: Setting up folders
Create a new folder where you want to store all the website information. for me it's
Brandon > Websites > Portfolio3
*I'll refer to this as "home folder" throughout the tutorial.

Inside this folder create 2 more folders called: images, and navigation

Step 2: Creating an .html file
Open up a new document in dreamweaver and use the following settings:

Click "OK" and save this file in the home folder as index.html.
To Save: File > Save As

Step 3:
Open up a new document in Adobe Photoshop, AP7, with the dimensions of 600x2

Step 4:
Set the Foreground to black.

Step: 5
Use the Paint Bucket tool to fill the background with black.

Step 6:
Use the pencil tool and put a 1px dot of white on the top left and top right corners.
To save images for the internet go to File > Save for Web
and have your settings as follows:

(save this into the images folder as bg.jpg)

< Previous Page - Next Page >