A Website Construction Guide for Visual Artists:

Portfolio template pages

Here, you can download pages that will allow you to get started on a basic portfolio site:

default.htm   (your main home page)
resume.htm
works.htm
stylesheet.css

You can also click these links to get an idea of how these pages will look. If you're using Internet Explorer, you may not be able to view the stylesheet.css document unless you download it and view it in a text-editor.

You should create a new folder on your desktop to store these documents. In addition, create a new folder called "media", since the <img> links are written with a pathway to your media folder.




Make sure you use a text-editor, and not a word-processor, to read these documents (note that freeware programs like TextWrangler and SciTE will color-code the script, making it easier to look at). The HTML documents will have lots of comments (stuff between the <!-- --> characters) which are simply directions to guide you through the process. You can erase the comments if you wish. In fact, if you would like a handy, skeletal HTML template -- without any structure/design work from myself -- here's a document to download: template.htm.

The Default page

This page is set up to identify itself with a title, to create space with a starter image, and to give you room to type additional introductory information or news. You can scrape out what you don't want.

It is named "default.htm" because this is a name that browsers know how to look for (in your server account folder) without being asked specifically. "Index.html" is another such filename.

If you want to cut to the chase and give viewers immediate access to your portfolio, you can forego downloading this page, and simply rename your "works.htm" page as "default.htm". Just be sure that the navigational links in "resume.htm" reflect this change.

The Resume page

The page I've provided allows you to have your resume/CV information embedded within your site, but it's not what everyone likes. You are welcome to let the navigational links for your resume simply to attach to a WordDoc, PDF or even an HTML file exported from your word-processor. In that case, you can forego downloading this page, and on the other two change the <a> link in your navigation (to "resume.doc", "resume.pdf" or whatever other name you happen to give it).

The Works page

(You might want to review the HTML Tables page before reading this section.)

Here, I've created a table where you can have a vertical column of thumbnails, with artwork information just to the right of the thumbnail. There are other options for using table structures on this page:



Just replace the <tr></tr> table-row I've created in the works.htm document with the table-row above, and you'll get a double-column layout (with text information underneath each thumbnail, rather than positioned to the right of it).

Want a 3-column layout (for bigger collections of thumbnails)? Here you go:




Linking images

The thumbnails are <img> tags nested within <a> link tags, so that clicking the thumbnail with take you to a blank page with the full-size image lodged in the top left corner. Not exactly elegant, but a commonplace way of doing things simply.

You could have each thumbnail take the visitor to a brand new page in which the full-sized image is isolated with its contextual information. In which case, you might not want to put the information alongside the thumbnail. So, let me give you an alternate "works.htm" page:

works.htm

Here's the new script for making the table-rows:




Notice that the nesting <a> links are set to take the viewer to an unnamed HTML document, rather than an image file. So let me give you a template HTML document for creating a page to showcase an artwork:

portfolio_page.htm

This document should be recopied for as many pages you want to link thumbnails to, and each time you should rename the HTML file to correspond to the name of the artwork it will showcase. This will really help keeping things organized.

Creating subfolders
It's a great way to organize different sections of your website, especially if it becomes expansive, but be wary of making the correct pathways in your <a> link and <a> image tags. Consider this layout:



If you make HTML pages to showcase full-size JPG's in your "works" folder, entitled "artworkpage1.htm", "artworkpage2.htm", etc., then you will need to indicate in your links that the browser must jump out of this folder to find images (stored in "media"), or to find the "stylesheet.css" and "works.htm" documents. For example:

<img src="../media/picture1.jpg">

<link rel="stylesheet" href="../stylesheet.css" type="text/css">

<a href="../works.htm">Back</a>