Making A Portfolio Website

From concept to completion in eight steps

Step Four: Convert the interface

Okay if you made it through that last step with no sweat, then this is where it will really get fun. You will need to create slices from your original graphic file and export them as .jpg or .gif or whatever. Then you will use a program like Dreamweaver, or any text editor for that matter, and begin re-assembling the peices you sliced out of your interface design file, using HTML to call the images on to the page.

Good File Management

Every website has an index.html page (or default.html, or index.* php asp aspx or whatever). This is the default page that displays when you request just the domain name. So this index file will be the first thing that shows up when your potential employer arrives at your portfolio website. No some folks will just throw all of their pages into the root of their website along side the index page. I however, prefer to make a folder for all of my page one for all of my images and one for my media like flash or quicklime. this way any time you are ready to work on your site you will know where what your looking for is because you have it split into 3 folders. Your site structure should look something like the image to the right.

Slice and Dice

While building your HTML structure keep the original file with the slices you used to export to your images folder.

make a portfolio

slice up your design into the individual peices that you will then export and call using img src tags to make the images display where you want them to with your content.

You may also be interested in implementing some drop down menus: Try my Search Engine Spider Nest Navigation drop down menu Tutorial - CSS Drop Down Menu Journal: