Build an Easy Web Site
(As seen in the January-February '07 SCBWI Bulletin)
by Elizabeth O. Dulemba
UPDATE (02-22-10): Blogger now allows PAGES which basically walks you through the concept described below. Visit "What Are Pages" for more information.
I recently helped fellow illustrator Liz Conrad set up an online portfolio using a serious short-cut. I walked her through creating a blog, then setting her domain to forward to it. Because blogs are free, this ended up being the easiest and cheapest way I know for anyone, artists in particular, to establish an online presence. This is how we did it.
If you feel like Liz did, like a “technological pinhead,” have no fear - blogs have a friendly interface and breaking down the steps makes the process less intimidating. There are several online blogging companies such as LiveJournal.com, TypePad.com, and WordPress.com; however, I sent Liz to my favorite, Blogger.com. After Liz followed the easy directions, we modified her blog and turned it into a website with an online portfolio.
Update: Since originally writing this article, blogger has set up new features which make this process even easier!
Before posting images to a blog, you need to downsize them for the web. If images are too large, they will load too slowly or won’t fit on a computer screen you’ll lose visitors. Images need to be RGB, 72dpi, jpg files, less than 100k and no larger than the average computer screen (600 x 800 pixels). Images for my blog are usually no wider than 450 pixels.
Liz had her work scanned, downsized, and burned to a CD at a local Kinkos, but if you have a scanner, you may be able to do this yourself. Look around in your programs for “jpg optimization” or “save for web” features. Pixel-based programs such as Photoshop Elements work well for this.
Update: flickr, photobucket.com, and other such online photo management sites are making this process even easier.
Choose eight to ten of your favorite pieces using the above parameters and save them to a folder on your desktop.
Get used to your blog’s interface. Post a message to your new blog, then experiment with uploading an image. Click the image icon at the top of the posting window and follow Blogger’s instructions. Ignore the resizing feature (you’ve already done this) and the “right” and “left” buttons which make text wrap. Do hit your return button before adding text. This will help clarify an image vs. text.
In a blog post, images look like this:
<a href=”file-location”><img src=”file-name” border=”0”></a>
Note: html Tags are like silverware around a dinner plate. For every command there must be something on the left opening it, and something on the right closing it. The <a href> command is the fork on the left and is closed by the spoon </a> command on the right. The plate is the image or content between the two.
Once you feel comfortable with posting, it’s time to create a post named “PORTFOLIO” and upload your images.
 By default, Blogger adds images to the top of the text message every time, which can get confusing if you post more than one. To work around this, upload an image, hit return, type the image’s corresponding text, then copy and paste this entire block to an external text document and delete it from the post window (don’t worry, Blogger still has the image information in cyberspoace). Do the next image the same way, and arrange these blocks in your text document. When you have them all done, copy all the text from your text document and paste it back into the post window. Click “publish.”
Note: If Beta Blogger gives you any problems uploading images, upload them to a free online image sharing site like photobucket.com. It will give you the image’s html “Tag” you need to include in your blog entry. Easy!
Now you’re going to create a permanent link to this post. Open your blog and click your “PORTFOLIO” post title. This will open your post in it’s own window, or it’s static link. Copy the URL.
Hit “Customize” on the blogger bar at the top of your screen. This will take you to “Page Elements” under “Template.” (This is where the new Blogger is much easier to use and edit.) Click “Add a Page Element” in the sidebar and choose “Link List” from the options. This will open the “Configure Link List” window. Make a permanent link to the post you just created by pasting the URL (the static link) in the “New Site URL” field. Type “PORTFOLIO” in the “New Site Name” field and save your changes.
Voila! You’ve just created a link to your online portfolio. Go have a look - groovy, eh?
If you want to add anything in the future, like a BOOKS or BIOGRAPHY section, follow these same instructions.
Now to buy your domain. I like to use directNIC.com. They have great support and are super cheap at $15/year for a domain. Under “find your domain names today” type yourname.com (trust me and don’t get fancy here), then click “search.” If a green cross appears under .com, it’s available. Click and buy. Once you’ve registered (it may take a few days to become active), go into “domain manager.” Click on the house icon to the right of your new domain. Click where it says “change hosting type” to set up your forwarding. It will give you a bulleted list of options. Choose “redirect with no frame.” In the next window type your blog URL (Liz’s URL was http://lizconrad.blogspot.com) then click “redirect.”
Update! Blogger is now making it even easier to purchase your domain name and forward to your blogger blog - they walk you through it right on the blogger site!
Go check out your new website!
With your own URL you can also set up free email forwarding. Follow the directions to create your email address, you@yourname.com, and it’s yours forever, even if you move.
This may sound overwhelming on first read, but sit down at your computer and give it a try. Taking one step at a time, you’ll be surprised how easy it can be to build your own website.
Check out Liz’s website at www.lizconrad.com.
Elizabeth O. Dulemba is a children’s book illustrator with a serious bent towards geekdom. Visit her web site at www.dulemba.com and her blog at http://dulemba.com/blogger.html.
Sidebar:
For more information on choosing domains, webhosting, and more, check out the SCBWI Publication, “An Introduction to Webhosting and Design,” in the “For Our Members” section of the website at www.scbwi.org.
Examples:
Here are a few websites by people who have made this method work for them:
Joanne Friar
Linda Zajac
Cathy June
Ann Pancake
Gail Maki Wilson (a one pager)
Janet McDonnell
Update!
Blogger now supports setting up a site like this - here's a quick post on their own blog about it:
Create Pages in Blogger
Click here to read about a blogger describing how to run your navigation along the top of your blog!
ADORABLE Templates You Can Use:
My Style Backgrounds
The Cutest Blog on the Block
Shabby Blogs
Designer Blogs (custom designs - not free)
Send me your link if you've created a website using this methos and I'll add it to the list! |
|
