How to make a Portfolio Website: Convert the Interface: Step 4

Step 4


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 pieces 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.

Re-build with HTML

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