First

Chapter 1. Setting Up Shop

Before you dive in and start to build your web site, we need to take a little time to get your computer set up and ready for the work
that lies ahead. That’s what this chapter is all about: ensuring that you have all the tools you need installed and are ready to go.
If you were to look at the hundreds of computing books for sale in your local bookstore, you could be forgiven for thinking that you’d
need to invest in a lot of different programs to build a web site. However, the reality is that most of the tools you need are probably
sitting there on your computer, tucked away somewhere you wouldn’t think to look for them. And if ever you don’t have the tool for
the job, there’s almost certain to be one or more free programs available that can handle the task.
We’ve made the assumption that you already have an Internet connection, most likely broadband (or similar). Don’t worry if you
have a slower connection: it won’t affect any of the tasks we’ll undertake in this book. It will, however, mean that some of the
suggested downloads or uploads may take longer to complete, but you probably knew that already.
Note: Planning, Schmanning
At this point, it might be tempting to look at your motives for building a web site. Do you have a project plan? What objectives do
you have for the site?
While you probably have some objectives, and some idea of how long you want to spend creating your site, we’re going to gloss
over the nitty-gritty of project planning to some extent. This is not to say that project planning isn’t an important aspect to
consider, but we’re going to assume that because you’ve picked up a book entitled Build Your Own Web Site The Right Way, you
probably want to just get right into the building part.
As this is your first web site and it will be a fairly simple one, we can overlook some of the more detailed aspects of site planning.
Later, once you’ve learned—and moved beyond—the basics of building a site, you may feel ready to tackle a larger, more
technically challenging site. When that time comes, proper planning will be a far more important aspect of the job. But now, let’s
gear up to build our first, simple site.
The Basic Tools You Need
As I mentioned earlier, many of the tools you’ll need to build your first web site are already on your computer. So, what tools do you
need?
The primary—and most basic—tool that you’ll need is a text editor; a program that allows you to edit plain text files. You’ll
use this to write your web pages.
Once you’ve written a web page, you can see how it looks in a web browser—that’s the application you use to view web
sites.
Finally, when you’re happy with your new web page, you can put it on the Internet using an FTP client—a utility that allows
you to transfer files across the Internet using the File Transfer Protocol. Using FTP may seem a little complicated at first, but
thankfully you won’t need to do it too often. We’ll discuss FTP clients in detail in Chapter 8, Launching Your Web Site.
You’ve already got most of these programs on your computer, so let’s go and find them.
Windows Basic Tools
In the following section—and indeed the rest of this book—where we refer to the Windows operating system, that’s really a
shorthand way of saying Windows Vista (in all its confusing varieties). Any instructions and screen shots will be with Vista in mind.
However, we are not going to shut out all you Windows XP users—and there are many people out there who use XP in preference to
Vista, much to Microsoft’s displeasure—so where instructions provided for Vista are not the same for XP, we’ll cover the differences
for you.
Your Text Editor: Notepad
The first tool we’ll consider is the text editor. Windows comes with a very simple text editor called Notepad. Many professional web
designers who use complicated software packages first started out many years ago using Notepad; indeed, many professionals who
have expensive pieces of software that should be time-savers still resort to using Notepad for many tasks. Why? Well, because it’s so
simple, little can go wrong. It also loads much more quickly than fully-featured web development programs. Bells and whistles are
definitely not featured.
You can find Notepad in the Start menu: go to Start > All Programs > Accessories.
Tip: Shortcut to Notepad
To save yourself navigating to this location each time you want to open Notepad, create a shortcut on your desktop. With the Start
menu open to display Notepad’s location, hold down the Ctrl key, click and hold down the mouse button, then drag the Notepad
icon to your desktop. When you release the mouse button, a shortcut to the application will appear on your desktop.
Notepad is the most basic of applications, as you can see below.
Your Web Browser: Internet Explorer
Once you’ve created a web page using Notepad, you’ll need a way to view the results of your handiwork. You’ll remember that in the
preface to this book, we mentioned Internet Explorer (IE). Well, that’s your viewer. Internet Explorer sits right there in the Start
menu, also in the Programs folder (accessed via All Programs from the Start menu), in the Quick Launch area (bottom left of
the Start menu, near the Windows logo), and a shortcut may also lurk on your desktop.
Mac OS X Basic Tools
Like Windows, the Mac operating system (specifically OS X; we won’t be looking at previous versions of the Mac OS) has a number
of tools that you can use straight out of the box. These tools are virtually equivalent to the Windows programs mentioned above.
Your Text Editor: TextEdit
While Windows has Notepad, the Mac has TextEdit, which can be found in the Applications folder.
Unlike Notepad, TextEdit works as a rich text editor by default, which means we can work with fonts, make text bold and italic, and
so on. However, we want to work with TextEdit as a plain text editor, so you’ll need to adjust some of TextEdit’s preferences. Start
TextEdit, then select TextEdit > Preferences from the menu to bring up the Preferences screen. Select Plain text within New
Document Attributes, then close the Preferences screen. The next time you create a new file in TextEdit, it will be a plain text
document.
Your Web Browser: Safari
The default browser for Mac users is Safari. You can usually find Safari in the dock (the dock is the bar of icons at the bottom of
your screen), but you can also access it through the Applications folder.
Tip: Stick It in the Dock
Just as you can drag shortcuts to programs onto the Windows desktop, you can add programs to the dock in Mac OS X. To add a
program to the dock, just drag its icon from the Applications folder onto the dock, and presto! The application is now easily
accessible whenever you need it.
If you are using a slightly older Mac, you may also have a copy of Internet Explorer installed. Our advice for Internet Explorer for
Mac? Send it to Trash. The Mac version of IE was abandoned by Microsoft many years ago, so it’s considerably outdated and is
rarely supported or used in the wider world; no new Macs come with this application preinstalled. It also bears no real resemblance
to its Windows counterpart, for those more comfortable using IE.
Beyond the Basic Tools
You can certainly make a good start using the tools mentioned above. However, once you’re dealing with a handful of web pages and
other resources, you may want to go beyond these basic tools. We’ll show you how to use some slightly more advanced applications
later in the book.
Countless other text editors and web browsers are available for download, and many of them are free. Obviously, we don’t have time
to describe each and every one of them, so I’ve settled on a few options that have worked for me in the past, and which you might like
to download and have at your disposal. And remember, they’re all free!
Windows Tools
NoteTab
NoteTab’s tabbed interface lets you have many different files open simultaneously without cluttering up your screen. Files that
you’ve opened are remembered even after you close the program and open it again later, which is very useful when you’re working on
a batch of files over many days. You can download the free NoteTab, or its Light version, from http://www.notetab.com/ [4].
Firefox
As mentioned in the Preface, Firefox is a very popular alternative to Internet Explorer and, as we proceed through this book, it will
be our browser of choice for a number of reasons. As with NoteTab, Firefox offers a tabbed interface that helps keep your computer
free from window clutter. You can download Firefox from http://www.mozilla.com/firefox/ [5]; the browser is depicted below.
Mac OS X Tools
It is true that there are fewer free programs available for the Mac operating system than there are for Windows. However, there are a
few programs that you might like to consider as you move beyond the basics.
TextWrangler
TextWrangler is a free, simple text editor made by BareBones Software. As with NoteTab for Windows, TextWrangler can tidy up
your workspace by allowing several text files to be open for editing at the same time (the documents are listed in a pull-out drawer to
one side of the interface, rather than in tabs). You can download TextWrangler, a free text editor from BareBones Software”, from
the BareBones Software web site [6].
Firefox
Firefox is popular not just among Windows users, but also with Mac users, many of whom prefer to use it instead of Safari (often
because of the extra features—known as add-ons—that can be bolted on to the browser). A web page viewed in Firefox should
display the same regardless of whether the browser is installed on a PC running Windows XP or Vista, on a Mac running OS X, or on
Linux, a free, open source operating system (generally favored by highly technical people who like to tinker with their computers a
lot). The predictability of Firefox is a welcome change from the bad old days of endless browser competition, and is one very good
reason why we will mainly use Firefox in the examples included in this book.
Not Just Text, Text, Text
You can build an entire web site using just the tools mentioned above, but it won’t be the sexiest site on the Web. The missing
element here is images: so far, the programs we’ve mentioned are used to manipulate plain text or view web pages. If your web site
is going to be visually appealing, you’ll need to be able to create and manipulate images, either from scratch using photos you’ve
taken, or using images that you have the legal right to use on your web site.
Unfortunately, when it comes to image editing software, that old saying, “You get what you pay for,” applies. A professional image
editing program, like Photoshop or Fireworks, costs hundreds of dollars. While these programs offer some excellent capabilities, we
can’t really recommend that you go out and pay for them unless you’re sure that they’re right for you. If you already have a copy of
one of these, or a similar image editing program, by all means use it and experiment with it. Programs like Paint Shop Pro or
Photoshop Elements (a cut-down version of Photoshop) are more reasonably priced. However, for the purposes of this book, we’ll
look only at tools that are free to download and offer enough functionality to give you an idea of what’s possible.
Keep an eye open for free image editors that are included on disks attached to the covers of Internet, computing, and design
magazines. Software vendors often give away older versions of their software in the hope that users might be tempted to upgrade to a
new version at a later date. Look out for Paint Shop Pro, or any image editor that supports layers—a way to construct an image by
stacking 2 or more layers, one on top of the other. While we’ll keep our image editing fairly simple throughout this book, it’s
certainly worth keeping an eye open for free (and full-featured) image editing software, as these offers will not always be available.
Taking the Big Boys for a Spin
The most commonly used image editing packages are available for trial download. They are large downloads (hundreds of
megabytes) and may need to be left to download overnight, even on a broadband connection.
These trial versions are typically available for 30 days’ use; after that time you can decide whether you want to pay for the full
software or stop using the program. However, those 30 days might just be enough time for you to use the software while you work
through this book.
Adobe Photoshop
A trial of the latest version of Photoshop is available for download [7]. If you’d rather try the lighter Photoshop Elements, trial
versions are available for Windows [8] and Mac [9].
Adobe Fireworks
You can download a trial version of Fireworks from the Adobe web site [10].
Paint Shop Pro
Paint Shop Pro is available for Windows only. To download a trial version, visit the Paint Shop Pro site, and click the Free Trial link
[11].
Windows Tools
A standard Windows install has not always been blessed with image editing software. Certainly this was the case with Windows XP
(although if you bought the computer as a bundle with PC, scanner, or digital camera all together, you might be lucky and find some
image editing software included in the deal; scout around in your Start > All Programs menu to see what you can uncover).
In Windows Vista, the Photo Gallery application has seen some big improvements over its previous XP incarnation and now includes
some basic, but still useful, image manipulation tools, including cropping, color, and contrast adjustment. The Photo Gallery
application can be found directly in the Start menu.
Picasa
If you’re using Vista, the tools offered in Photo Gallery may do everything that you need; if you’re using XP, you’ll almost certainly
need to use an extra application. With that in mind, you might like to try out an excellent image management tool that Google offers
for free download. The program is called Picasa, and it’s extremely well equipped to handle most of the tasks that you’re likely to
encounter as you manage imagery for your web site. Download a copy from the Picasa web site [12], and soon enough you’ll be using
this program to crop, rotate, add special effects to, and catalog the images stored on your computer. The figure below gives you an
idea of the program’s interface.
Mac OS X Tools
The Mac has a reputation for being favored by designers and creative types, and the platform makes many tools available to the
budding artist. However, they usually come at a price, and often that price is higher than those of the Windows equivalents. So, what
free software can we use on the Mac, assuming that we want something more permanent than a 30-day trial version of Photoshop or
Fireworks?
GraphicConverter
GraphicConverter has much greater capabilities than its name suggests. It’s been bundled with new Macs at times, and is also
available for download (you’ll be encouraged to pay a modest registration fee for the software, but you can try it out for free).
Although this is primarily a tool for converting graphic files, it can also be used for simple editing tasks. Using GraphicConverter,
which is illustrated below, you’ll be able to crop, resize, rotate, and add text to any image.
iPhoto
Also included with Mac OS X is a program that probably needs no introduction to the experienced Mac user: iPhoto. This excellent
program is not intended to be a fully featured image editor; it’s really designed for managing and viewing large numbers of photos
stored on a computer. It’s great for organizing photo albums, but iPhoto also has some very useful editing facilities that take it
beyond a mere cataloging tool.
iPhoto, shown below, can be found in the Applications folder or in the dock.
Creating a Spot for Your Web Site
So far, we’ve looked at some of the tools that you’ll need to create your web site. We’ve looked at programs that are readily available,
and where you can find them on your computer. And for cases in which the free tools that came with your computer are not up to
the job, we’ve suggested other programs that you can download and use. The next task we must tick off our to-do list before we go
any further is to create a space for your web site on the hard drive.
Windows
The easiest and most logical place to keep your web site files is in a dedicated folder within the Documents folder (or the My
Documents folder in Windows XP). The Documents folder can be found inside your user folder. “But what’s this user folder?” I
hear you cry. And a fair point too, because it won’t be labeled User but rather it will be labeled according to the user name that you
provided when you first set up Windows. In Windows Vista you’ll find the user folders of all local computer account holders under
C:\Users (in Windows XP it’s under C:\Documents and Settings) and will have a folder name matching your user name. More
conveniently though, you’ll find it on your computer’s desktop as shown below.
Don’t worry if your user folder is not on the desktop: it’s easy to get it to appear there (see the tip below for details on how to add
this for Vista and XP). Double-click to open your user folder, then double-click on Documents, then finally create a new folder
called Web by selecting File > New > Folder
Tip: Displaying the Users Folder in Vista and the My Documents Folder in Windows XP
Can’t find your user folder on your Vista desktop? Missing your My Documents folder in XP? In an effort to clean up your
desktop, you may have removed the icon by accident—it’s easily done. This is how you can return the folder to your desktop:
From the Start Menu, select Control Panel.
Select Appearance and Personalization (or Appearance and Themes in XP).
Vista users: choose Personalization and listed in the top left, under the title Tasks is the option to Change Desktop
Icons. A new dialogue box will appear: check the option entitled User’s Files in the section Desktop Icons, then press OK.
You may now also close the Appearance and Personalization window.
XP users: select Change the desktop background from the list of options, then click the Customize Desktop… button
at the bottom. Check the My Documents option in the dialogue box that appears, then click OK. Close the Appearance
and Themes window also by pressing OK.
Your user folder/My Documents folder should now be back on the desktop, as shown below.
Mac OS X
In Mac OS X, there’s already a handy place for you to store your web site files: the Sites folder shown below. Open your home
directory (from Finder, select Go > Home), and there it is.
It’s easy to add the Sites folder to your sidebar for quick access: just drag the folder to the sidebar in the same way you add items to
the dock.
Getting Help
Books may be a wonderful way to learn: you’re sitting there with a computer running, perhaps a cup of coffee keeping your mind
ticking over, and a bookmark signifying your progress to date. Great. But what if you don’t understand something in the book? What
do you do next? Shouting at the book won’t help, though there may be some therapeutic value to it!
Hopefully, you won’t find yourself with too many questions as you work through this book, but if you’re the curious type—or a quick
learner—you might want to go beyond what we’re going to teach you here.
Whether you’re getting stuck or want to learn more, your first stop should be the SitePoint Forums [13]. It will only take a few
moments to register, and once you’ve done so you can log in and ask questions in a range of different forums. Whether you have
questions about writing content for your web site, you need marketing tips, or you’re facing a few tricky graphic design issues, the
hundreds of experts who contribute to and moderate these pages every day will be happy to help out.
Register at SitePoint’s forums today; then, when we recommend further reading or research, you’ll be good to go. Oh, and did we
mention that all this friendly, helpful advice is free of charge? We thought that might encourage you!
Summary
Believe it or not, we’ve now got everything we need to build our own web site—and all without spending a cent! Not only do we have
the basic tools—our text editor (Notepad or TextEdit) and our web browser (Internet Explorer or Safari)—but we’ve also looked at
some alternatives to these.
We’ve reviewed some simple and freely available image editing programs that can help us spruce up our sites: Picasa for Windows,
and GraphicConverter and iPhoto for Mac. Finally, we mentioned some more capable—and more expensive—options, such as
Photoshop and Paint Shop Pro.
Now we’ve got the tools, let’s learn how to use them!