Putting it all together
If you have stuck with me so far, Iâ€™ve talked a lot about how to use iWebâ€™s powerful built-in tools, how to make your own navigation bar, and how to set up Master Pages. What have I left out? Oh yeah, some other tools you may find useful and actually using the program.
What ELSE do I need?
In all honesty, you donâ€™t really need any other tools beyond what iWeb and the other programs that make up the iLife suite provide. Apple has been kind enough to include very powerful text and graphic manipulation software to get you started. However, no man is an island and no web site worth itâ€™s weight in pixels is typically made alone. As I said, iWeb includes some very good tools, but they are far from complete. For some other really cool and creative text and graphic manipulation, you may need to go outside the Apple enclosed world.
Some of the other text tools you can use you might already have and not realize it. Do you have Microsoft Word for the Mac? Within Word thereâ€™s a text manipulation program called WordArt. Itâ€™s nothing fancy, but it might suit your needs without having to spend another dime. More good gear for making text dance is BeLight softwareâ€™s ArtText. Itâ€™s a bit of a one-trick pony as compared to say PhotoShop Elements, but the learning curve isnâ€™t nearly as deep.
For manipulating graphics and pictures there are few tools more complete than Adobeâ€™s suite of ground-breaking software known currently as CS3. However, most people who will probably use iWeb donâ€™t have six to twelve hundred dollars just sitting around for the full suite, nor the time and patience to learn the complete interface. So get Photoshop Elements instead for eighty to one hundred bucks (or whatever your currency of choice is). Most of what youâ€™ll actually use is right there. If you want to go cheaper than that, there is Lemkesoftâ€™s most excellent GraphicConverter (lemkesoft.com), DrawIt (getdrawit.com), Painter from Corel (corel.com), and many more.
Interested in web animation to use in iWeb? Photoshop Elements has this somewhat covered with animated gifs (you can see an example with the macparrot.com logo) and LaughingBird software (laughingbirdsoftware.com) has what looks like low-learning entry software for web graphics and animation that isnâ€™t going to cost an arm and a leg. LaughingBird has been kind enough to send me their suite of graphics tools and I will be testing what does and doesnâ€™t work within the confines of iWeb as I go along.
iWebâ€™s Welcome Page
Your Welcome Page is the first thing someone will see when they visit your site initially unless they have a direct link to some other posted content. Weâ€™ll get to that later, in a fashion, but letâ€™s assume that they have heard of your site and this is what theyâ€™ll see. You want it to be a representative of what theyâ€™re most likely to find on your other pages, so if itâ€™s boring or looks like everyone elseâ€™s site, they might not linger for long. So make it symbolize the way you think or write. Appleâ€™s iWeb allows the use of templates which is the easiest way to start, but remember you want it to reflect you and not someone elseâ€™s idea of a web page.
If you want yours to look different, your best bet as said before is to choose either the â€œWhiteâ€ or â€œBlackâ€ blank template and work from there. What? You mean you donâ€™t HAVE to use iWebâ€™s â€œWelcomeâ€ template for your first page? Of course not. Use whatever page or template you want. Choice is good. Just remember that the more complicated the iWeb template, the more work youâ€™ll have to do on every master page you create to tweak and make it your own.
Hold on a second? MORE master pages? What in the seven hellish trials of the Woz am I talking about? Remember the last section I wrote about creating Master Pages? I talked about creating the basic structure of your pages so that you donâ€™t have to reinvent it every time. Well, I wonâ€™t go into great detail here, but some templates and pages are easier to manipulate than others and may require some gentle modification (see 20th century dictators for examples of gentleness) to actually still work within the parameters of your master page. Donâ€™t fret about it now. Iâ€™ll speak of this (with more bad jokes) in other sections after we get beyond your welcome page.
Choose your template and page and get it on the screen. You can at this point effortlessly change the background color or the browser color of the page in the Inspector/Page/Layout box. Depending on the template you chose there may be lots of default text boxes with Lorem Ipso facto text written inside. You can either edit the text to say what you want (most times), get rid of the text box altogether by highlighting it and hitting delete, or you can make the box as small as possible and then change its opacity in the Inspector box to zero. It will still be physically present, you just wonâ€™t see it anymore. Some of the boxes that wonâ€™t go away are very important in the â€œBlogâ€ and â€œPodcastâ€ iWeb pages and weâ€™ll go more into those later. Donâ€™t worry about it too much on your Welcome page.
Add text, photos, graphics or whatever other elements you wish to make it look the way you want it to. As an example, look at this page to see the MacParrot.com master page graphics seperated and this page to see them all together. One of the best parts of iWeb is that all the graphics created in other programs were pretty much a drag and drop affair from a Finder window. iWeb accepts most common graphic file types including jpeg, gif, and png. There are others as well, but those three are the biggies. Of course you can import all the graphic files you might use into iPhoto and just drag and drop them directly within iWebâ€™s Media window as well. Reshape and resize them using the Inspector/Graphic and Inspector/Metric windows.
Now think about how you want your text to look. Do you want to go with a single or double column. For the MacParrot sites, I went with three columns and because I chose a wide layout (915 pixels wide to be exact), I had plenty of room not only for the three columns, but also my homemade Navigation menu, some graphic site links, Google ads (oh yes, we will talk about Google ads…just not today) and search bar, and also a favorite links section. You can make your website about as wide as you want to, but keep in mind that many people will be looking at your site with browsers somewhere in the 800 to 1024 pixel width range. Going beyond that will force people to scroll left or right and that can make people dislike going to your site.
Besides your layout, something else to consider is how you want people to find your most recent content. The Navigation menu you created should mostly be used for going to the main sections of your site, not for letting people know about new blogs, photographs, or podcasts. Consider using the remaining space to talk about and link to new things youâ€™ve added to your site.
How to do this is very easy. Assuming you have room for a column or two, you have a few options. For the three columns at MacParrot.com , I have each listed according to the kind of content I would typically add. The first column has Mac news stories I found interesting and would add my own comments to. The second column I use for reviews (mostly just a repeat of stuff I post at MyMac.com. Remember that MacParrot and its derivatives are meant for testing different webpage creation programs) and tech articles Iâ€™ve written, and the third column is for my blogs and whatever podcasts I might create. Each column consists of one large text box that you can make either by selecting it in the â€œInsertâ€ menu of by hitting the â€œText boxâ€ icon at the bottom of your main iWeb screen. I use one long column for each section and update by copying and pasting to the top similar text and then changing the date and title. My old stuff goes down in the column and my new stuff is at top.
All of your text is fully editable within iWeb. Make it bigger or smaller using the keyboard shortcuts (that weird cloverleaf key, also called the â€œCommandâ€ key and the â€œ+â€ or â€œ-â€œ keys just to the right of the top number keys), hitting the â€œFontsâ€ key at the bottom to open the separate fonts window, or by using the menu commands. The Fonts window is also the easiest way to change the font within the textbox or just the highlighted text you have chosen. You can change the color of the text and spacing and a few other neat tricks in the Inspector/Text/Text window. Make bulleted lists, go hog wild! Explore your options and have fun.
One thing Iâ€™ve havenâ€™t really talked about yet is just what youâ€™re going to use your website to convey to the world at large. There is an excellent reason why I havenâ€™t. I have no frigging clue what you want to say. It doesnâ€™t matter that much really for the sake of this article. What you want to say and how you want to say it is entirely up to you. You may have a fascination with the mating habits of an aborigine plaid spider from lower Albania (if this is something you find interesting, I really donâ€™t want to meet you) or how many thumbtacks it takes to recreate the Eiffel Tower in full size. It doesnâ€™t really matter. Your passions and what you find interesting are reasons enough to make a website. The first step is to make it look interesting enough to stick around.
Youâ€™ve now created your Master page and used it to make up your Welcome page. Maybe one page is all you need. Most people canâ€™t resist the lure of adding more pages especially when itâ€™s so easy to do so. Join me next time when weâ€™ll start making additional pages like blogs and photo pages.