Back to Tutorials Gallery
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

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 image_pb to fill the background with black.

Step 6:
Use the pencil tool image_pencil 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 >

Design Portfolio Logo

Home - Websites - Logos - Banners - Tutorials
Files - Forums - Biography - Contact

thanks for visiting, please do not steal any of my images.