Welcome to Betsy Bear Creations.com!




Six Easy Steps to Creating an

Online Artist Portfolio

by Betsy Bear



This short tutorial will help you create and post an inexpensive artist portfolio style web site in just six easy steps. You don't need any special skills or technical talent and won't need to know html (html stands for hyper text mark-up language) code, but basic familiarity with computers, the internet, and word-processors will be very helpful. I have created and maintained several web sites over the past 15 years, including more recently my own (betsybearcreations.com) and the Fairbanks Watercolor Society (http://www.geocities.com/fairbanks_watercolor). I've learned most of what I know by attending a few workshops and doing a lot of trial and error. Nobody can build your site better than you, the artist-- the one who has the most to gain. Start small, grow bigger, and learn as you go.

This tutorial covers how to prepare your images, name your files, create your web pages with a user-friendly, wysiwyg (what you see is what you get) html editor, insert your links and images, and post your site on the world wide web. I have included some links to specific sites providing software or services I have used, but you would be wise to do your own research and see just how much is available for little or no cost.

If you decide this tutorial involves too much work for you, and you would like a free, art-related web page without images, check out Watercolor Online's free personal web sites. Watercolor Online also offers a paid version that allows images. This option can be used in place of or in addition to a more extensive site created with this tutorial. Of course if you are not a watercolorist, you will want to search out a more general site that offers the same service or check for e-zines that deal with your speciality.

Besides your computer and internet connection, you will need a good wysiwyg html (web) editor. HTML coded documents allow web browsers to display files for internet users to view. Dreamweaver by Macromedia is a great full-featured web editor, but the cost is prohibitive if you are just starting out with a small site. A better option is to use one of the many free or almost free web editors available on the internet until you need more features on an editor. I would recommend NVU's web editor, which is available at no cost and works on most Mac and PC operating systems. I tested the NVU Mac version to help create a small site for a friend and found it very user friendly and trouble-free. There are other free editors available, so do a search and test a few out if you have problems with NVU.


Step 1 - Creating Your First Page (name it index.html)

To start your site, you will first need to download the NVU web editor program if you haven't already.  Go to http://download.cnet.com/Nvu/3000-10247_4-10412423.html, for pc users, and http://www.macupdate.com/app/mac/15699/nvu for mac users, and download the version that matches your operating system. It took less than 5 minutes for mine to download.

Once downloaded be sure to open the "Read Me" file before running the program.  My Read Me file said to copy the NVU program icon to my applications folder before it would run properly.  

Here is the main editing window in the NVU editor that will be your starting point.

Now you can start creating your first page.  The editor works very similar to a word processor, and is quite intuitive if you have some basic understanding of word processors. Start typing in the large window to the right.  The narrow window on the left is for entering the information about your web host site.   Use the tool bar to format your text alignment, size, etc. and type. For more information about creating html files with NVU go to http://nvudev.com/guide/1.0PR/ugs03.htm

Before you start with the typing, however, you will need to save your document following a few guidelines to ensure your documents are compatible with html conventions and for your ease in locating files. Name your first page "index.html" (without the quotes). This is the file name that is the default for your URL, and will display automatically when a visitor enters your site. More on naming files is covered in the next section.

Step 2 - Saving and Filenames

Text (html) documents: You will need to save your web page using a short descriptive phrase.  Do not capitalize any words in your file name, do not use any spaces, and do not use any characters other than letters, numbers, periods (dot) and underscores.  You must end your filenames with .htm or html, although most editors will add that automatically to your saved name.  

You will need to follow these filename rules for saving your images as well.  Your jpegs will need to be posted at the same time as your html pages in order to work properly.  Every link that has a filename must be accompanied by that file on your host site.   Do not use any folders to organize your web pages or images until you learn more about how to link to files in folders.  For the most part, just use a convenient system of naming files, such as starting all file names relating to the same subject with the same word and just changing the endings.    Here are a few examples of filenames grouped for ease in finding them:  cards_dogs.jpg, cards_cats.jpg, etc.

Your main page, or home page, should always be saved as "index.html" or "index.htm." Note: .html and .htm are interchangeable, but stick to one or the other for consistency. Save all your html and image files into a single folder on your computer hard drive, but don't make any sub-folders within this folder. For more information on file naming conventions and tips go to http://htmlfixit.com/tutes/tutorial_HTML_File_Names.php

Here's how some web files (on a Mac) look:


Step 3 - Preparing and Inserting Images

Before adding an image you will first need to prepare it display well on the web.  Images need to be saved in jpeg (or giff) format.  Size and resolution are important, since excessively large files will take an unbearably long time to download on dialup or slower internet connections. There are many factors that determine the download times besides the connection speed--the computer's processor, system memory, the traffic on the web, and so on.  The best bet is to keep image file sizes small and download times minimal so you don't leave viewers frustrated and ready to visit a new site.  Some important points to remember when preparing your images:

After your image is prepared, save it to the same folder that contains your html files. To insert the image into the html document, click on the image icon in the toolbar.  In the drop down window choose the jpg file that you saved into the folder.  You can just ignore the alternate text and other fields of the window for now.  After the image is inserted on the page align it using the same button as used to align the text.  You can change the size by dragging the corners. For more information on preparing images for web sites go to http://graphicssoft.about.com/od/digitalphotography/l/blprepforweb.htm


Step 4 - Creating External or Internal Links

Below is an image I added and made into an link to a different site.  This is called an external link. To make an external link, highlight the image by clicking on it and then click the link button on the tool bar.  In the drop down window choose the"link" tab and type the URL of the desired link. Always check your links in your preview browser (go to "file" then "browse page"). Check the link again once the files are posted online.  Broken links are a major annoyance and happen for many reasons, most preventable by checking typing and formatting carefully.                                   

This image is an example of an external link, since clicking on it takes you to completely different web site, in this case the Fairbanks Watercolor Society's home page.


An internal link connects an image or text to a file within the same site, such as another page or an image you have posted on your own site. You follow the same procedure as for an external link, but will type in the filename instead of a complete URL. (URLs always start with http://www......., while internal filenames will just be the specific name you've assigned that file, i.e. cards_dogs.jpg, etc.)   

You use the same process to link text to an internal page. Highlight the text you want linked then click on the link button in the toolbar and type the URL or file name for the destination in the link box. The text will automatically be highlighted in blue and underlined to indicate it is a link. This text has been linked to the Betsy Bear Creations home page, part of the same site as this tutorial, so I just typed in the filename "index.html" instead of the entire URL.

Step 5 - A Word about Navigation and Site Flow

It is important to build a site that has fast load times and easy navigation.  Navigation bars or links are usually positioned at both the top and the bottom of each page, allowing the viewer to connect back to the previous page visited, skip back to the site's home page, or go to other important pages on the site.  Be sure to include these links on each page, make them logical and check that they work correctly.

Try to avoid leading viewers into dead-end pages that offer no way to connect back to the site's other pages. While a back button is usually available on the viewer's browser, having a few logical options for exiting the page without backtracking will help the viewer and leave them with a good impression of your site. A navigation bar at the top and bottom, or along the left side of each page is standard, but place them wherever seems most useful.

At the top and bottom of this page are examples of navigation bars that appear on most of my sites web pages. The copywrite disclaimer and contact information are also good to place at the bottom of all pages. For more tips on navigation go to http://www.efuse.com/Design/navigation.html

Step 6 - Posting, Updating and Maintenance

Now that you have created a few pages and images, you will need to send your files to a web hosting service to post it on the web. A web host provides you with space on a server computer designed to give others 24-hour access to your pages. There are many hosting services available online that charge a wide range of fees for their services. My experience is that the more frills offered (templates, editing tools, ready-made forms, etc.), the more you pay, and the more time you will spend learning to use the proprietary system. You don't usually need these features until you have a full-blown site with all the bells and whistles. Keep your site simple and save time, money, and frustration as you learn the basics. Later you can upgrade to the services you know you want and will use.

Pick a hosting service that offers a basic package with about 50 MB of disk space, five thousand visitors per month, and low activation fees, such as
Mecca Hosting. This will get you a long way, and should cost less than $10. per month. The domain name registration fees (another requirement of having your own site) should only run about $10. per year. You will need to do a quick search when you sign up to register a unique name for your site that will be your "call sign," so to speak. Choose wisely, as you will be giving this name out to contacts and hoping they'll remember it. Use NVU's tutorial link to get some good basic information on domain names, web host services, and how to publish your pages after they are created.

If you'd rather not fool with getting your own domain name and paying for hosting, there are sites that provide this service for free. Geocities at Yahoo provides a free hosting service that is fairly user friendly and requires little technical know-how. Geocities also has options to upgrade to a more sophisticated hosting service for reasonable rates. You will not need to get your own domain name if you use their free service. You can always work up later to a more elaborate site and hosting service. For more information on finding a suitable web hosting service go to http://www.hostcompare.net/articles/importance_of_web_host.htm

A good web site should always include your contact information and communicate through its design and upkeep that it is a site you care about.  "Dead" sites are easily spotted by their broken links and outdated information.  

Have fun building your site.  There are many tutorials and resources online that are great help.  Do a search for "free web editors,"  "web tools," "web resources," and see how much is out there to help you.  If you think you will need technical help posting your site, be sure to subscribe to a hosting service that provides phone or email support.  

Good Luck!




All images and text on this site are copyright protected

and may not be reproduced without written permission from the artist.

This web site created and © 2005-07 by Betsy Bear. All rights reserved



Betsy Bear Creations, North Pole, Alaska

(907) 488-2129

(907) 388-4901

Email: b.bear@acsalaska.net Web site: betsybearcreations.com