In This Chapter
Checking out Web site success stories
Creating Web sites with templates
Exploring Web design options
Choosing the best Web design program
Creating a Web site can open doors for you that you never knew existed. Every day, thousands more people connect to the Web for the first time, and those who are already online get more adept at using online tools and services. The effect of all these people reaching out to each other to play, laugh, argue, buy, sell, trade, collaborate, invent, experiment, research, learn, and just chat about the mundane details of what constitutes a perfect cup of coffee — are transforming the world.
Thanks to the ever-simpler, easier, and less expensive Web technologies that you discover in this book, you can create a Web site today that just a few years ago would have required a crack team of programmers, the computing power of a room full of servers, and a budget of hundreds of thousands of dollars.
Today's Internet is a friendlier place where programs like Dreamweaver and WordPress make it so easy that even celebrities and politicians can run their own sites. And if they can do it, believe me, you can, too! For just a few dollars per month, you can host your site on a professional Web server. At that price, almost any old businesses can afford to try new tricks, and new businesses can launch with little investment.
Whether you're new to Web design or want to take your Web skills to the next level to create a world-class Web site or blog, it's often best to start by taking a step back to better understand your options before you dive in to the details of building and publishing a Web site. That's what this chapter is for: to start you out with an overview of the different kinds of Web sites and blogs, to help you appreciate how templates work for different kinds of sites, and to introduce you to the tools and technologies you can use to create your own Web site.
I'm not offering any "get-rich-quick" schemes in this book, but if you're ready to share your talents with the world, the Web is a better place than ever. And because I know you probably don't want to spend all your time creating your Web site, I've gathered everything you need in this book to make it easy for you.
Before I get into the technical details in this chapter, here are a few Internet success stories to inspire you and give you an idea of what you can do on the Internet today:
Three friends in Chicago started
www.threadless.comas an entry into a contest, hoping to win $1,000. The business took off when designers flocked to the site to submit their artwork to be printed on t-shirts, and millions of people started placing orders. In a case study, the Harvard Business School cited Threadless as an example of a "perfect business," one that has made its founders millionaires, thanks to the Web.Two creative Chefs blended Korean barbecue with Mexican tacos and created Kogi, which they sold out of a lunch truck in Los Angles. When they started posting the schedule and location of the truck on Twitter.com (the popular microblogging Web site), crowds started lining up in advance for their fabulous food. Word spread and Kogi became a breakout hit. Today, in addition to the Web site shown in Figure 1.1, they have more than 42,000 rabid followers, and three state-of-the-art trucks roaming Los Angeles and catering Hollywood parties. You can learn all about their great food and thriving business at
www.kogibbq.com.A truly fanatical hockey aficionado who writes under the pseudonym "Eklund" built
HockeyBuzz.comfrom a tiny fansite dedicated to the game he loved into the core of a media empire that employs more than 50 bloggers and launched a show on XM Radio.One of the most popular personalities on YouTube, Fred is a 14-year-old kid in Nebraska who parlayed a cheap video camera and YouTube into a multimillion dollar career. If you're old enough to drive, you've probably never even heard of him, but his videos are watched by millions of giggling kids every week at
www.youtube.com/user/Fred.Gossip writer Perez Hilton built a career through his blog where he's known for his snarky comments. His celebrity-filled site at
www.perezhilton.comis now read by more people than the tabloid magazines in the supermarket check-out aisles, and he charges thousands of dollars to make personal appearances at events.A woman who just loved to shop and find bargains built
Outblush.cominto a must-read beauty, fashion, and makeup advisor for millions — and a successful business for herself. Her site, featured in Figure 1.2, is now as influential as many glossy fashion magazines, and her product reviews can make or break a new line of products.
Figure 1.2. The creator of www.outblush.com made a name for herself with a well-researched collection of product reviews.
What all these Web success stories have in common is that their creators were able to use technologies that are cheaper and easier to use than ever before to do what they do best in front of a bigger audience. And that's one of the most powerful ways to use the Internet.
My goal in this book is to help you create not just a Web site but an online presence that truly serves your goals, whether you want to launch a new business on the Internet, promote an organization you've loved for years, or stay in touch with distant family members and classmates.
Here are a few of the kinds of Web sites you can create with the templates and instructions included with this book:
Portfolio: Photographers, graphic designers, and artists are quickly realizing that one of the best ways to show off their work and win new (and better-paying) clients is to have a snazzy online portfolio. In Figure 1.3, photographer Jasper Johal showcases his photos in an online gallery that makes it easy to view a collection of images on his home page and in a series of galleries on his site. A consulting firm could also use this type of site template to showcase a series of case studies, or by a carpenter or landscape architect to share photos of completed projects. You'll find templates for this design on the companion Web site, and instructions for customizing it to create your own site, in Chapter 7.
Online profile: It used to be that "who you know" was the key to getting ahead. Now it's "who knows you." A Web site is a great way to introduce yourself, your business, or your club to the world, and it's also an important way to make it easy for other people to introduce you when they make a referral.
Consultants, authors, attorneys, dentists, and other professionals are well served by an online profile site that includes biographical information, a list of services or specialties, references, awards, testimonials, and links to completed projects and descriptions of your work. The template shown in Figure 1.4 is included with this book, and you find instructions in Chapter 7 that will help you to create a variety of profile designs.
Club or organization: Better than a bumper sticker, a Web site is an excellent way to showcase your favorite clubs, charities, after-school activities, hobbies, and more. The Web enables you to easily notify everyone of meeting dates and times, or post pictures and descriptions of recent awards and triumphs. A well-designed Web site can save organizers from having to make dozens of phone calls just to see whether everyone is good to take the soccer team out for ice cream after practice next week, or to coordinate fundraisers for worthy causes. You can use any of the templates featured in Chapter 7—9 to create a Web site for a club or organization.
Small business: Whether you want to share your professional services, like the massage therapist featured in Figure 1.5, or you have a growing business taking care of pampered pooches, like Pamela's Pet Services in Chapter 2, creating a Web site can make all the difference in your success, online and off. You can edit any of the templates in Chapter 7—9 to create a business Web site, but the designs in Chapter 8 are especially well suited to business needs.
Family and wedding: Before couples say "I do," more and more of them are building wedding Web sites that feature invitations, directions, guest registries, and more. And, as a family grows, building a Web site is a helpful way to help the doting grandparents impress their friends without having to carry a wallet bulging with baby pictures. You can use the template featured in Chapter 9 to create any kind of site you want, but it's especially well suited to creating a site for the entire family, much like the one I created for my brother and his family, shown in Figure 1.6.
The first step to building a site is choosing what kind of site you want to build. So, before you get too far into creating your own site, it can help to start with a general introduction to how different features are built on the Web.
To start, know that Web sites fall into two very broad categories: static Web sites, which are generally built with a program like Adobe Dreamweaver, and dynamic Web sites, which use advanced programming to create advanced, interactive features, like those used in a WordPress blog. Keep in mind that you can add multimedia, video, audio, animation, and so on to either type of site.
Static Web sites are made up of a collection of individual pages with the .html or .htm extension. You might think that all Web sites are made up of individual pages (and in a way they are), but with static sites those pages are saved as separate files. With a dynamic site, as you discover a little later in this section, the pages you view in a Web browser are created dynamically as they are delivered to the browser, so they're not saved as individual pages but as pieces of pages that can be mixed and matched. That gives dynamic sites many advantages, but it also makes them a lot more complicated to create.
The upshot is this: Because dynamic Web sites are more complicated to create, if you're just creating a simple profile or small business site, dynamic sites are often not worth the extra effort. The big exception comes in with blogs, because thanks to specialized blogging tools like WordPress, creating a dynamic site with the common features of a blog is relatively easy (as you learn in Chapter 11).
As a result, many people create both a static Web site for their profile or small business and a blog where they can easily add posts and other updates.
Static pages are easier to design, and they work well for small- and medium-sized Web sites, such as a professional profile or an online gallery. Because static Web pages are written in plain text, you can create them in a program as simple as Notepad or SimpleText although tools like Adobe Dreamweaver and Microsoft Expression Web make it a lot easier and save you having to remember all the cryptic XHTML tags.
A static Web site offers a few advantages, especially if you're just starting out, including the following:
Easy to learn to develop: Anyone who can resize a photo has a head start on the skills needed to create and arrange graphic elements on a static page.
Gives you complete control over design of each page: You can tweak the size, colors, fonts, and arrangement of the elements on each page individually, and you can edit templates for these kinds of sites more easily than the templates for dynamic sites.
Easy to build, test, and publish to a Web server: You can create and test static Web pages on any personal computer and then host them on any commercial Web server and you only need FTP access (which is built into programs like Dreamweaver) to publish pages to the Internet.
The technical aspects of dynamic sites get complicated quickly, but the gist of it is that instead of creating a collection of individual pages, you store all your content in a way that makes it easy to display text, images, and other data in a variety of combinations. That's what makes it possible for shopping sites like Amazon.com to keep track of your last order and recommend books when you return.
A site can even gather information from different sources to create complex pages dynamically. For example, you can combine information about customers' shopping habits with a list of your overstocked items on sale and create a page tailored to each visitor.
Dynamic sites are generally created on a Web server by combining CSS (Cascading Style Sheets, introduced in Chapter 4) and XHTML (which is more or less HTML that complies with today's standards, also explained in Chapter 4) with more advanced technologies, such as PHP, ASP.NET, or ColdFusion. That brings up another of the big challenges of working on dynamic sites: You have to build and test dynamic pages on a computer that runs a Web server, which is a lot more complicated than simply installing a Web browser on your personal PC to test your pages, as you learn in Chapter 10. Launching a dynamic site on a commercial Web server is also far more complicated than publishing a static page site to a Web server.
That said, the advantages of dynamic Web sites are significant, and most big sites on the Web are created this way, but most of the big sites on the Web also have a team of experienced programmers behind them. Unless you have advanced programming skills or a big budget, the challenges of creating a dynamic Web site mean that most small- and medium-sized Web sites are still better served with static Web sites.
The big exception is blogging. Although blogging tools, such as WordPress and Blogger, create dynamic Web sites with all these advanced capabilities, they do it in a way that makes it relatively easy to launch and update. As you discover in the section on WordPress templates that follows, it's easy to create a blog but not so easy to edit the templates for a blog — another reason to consider creating a static site with a program like Dreamweaver. And remember: You can always create one of each, to get the best of both worlds.
The gardening Web site www.GardenstoTables.com (featured in Figure 1.7), was created with a program called Joomla!. Similar to WordPress, Joomla! offers many types of templates and add-ons to make it easier to create a dynamic Web site. These tools are ideal if you plan to create a large, complex site, especially one that you expect to grow to have hundreds or thousands of pages over time.
The advantages of a dynamic site include
Easily updated: When you want to put new content into a dynamic Web site, you can simply add a new product or image to the database, and it automatically appears in all the corresponding pages in the site.
Consistent look: When you create a dynamic site, you have to use templates, which help create a consistent look across a Web site. No matter how you build a site, being consistent is good practice when it comes to navigation buttons, banners, and other essential elements you want your visitors to find no matter which page they visit.
Easier to redesign: All great Web sites grow and change over time, and as they get bigger, they become even more complex to redesign. With a dynamic site, you can simply update the templates, and the content will automatically be included in the new version of the site.
I use the catch-all title "multimedia" to describe anything that moves on a Web page, but that's a lot of different things these days, and most people have trouble identifying the different ways you can make characters sing and dance on the Web. Multimedia should be considered distinct from static and dynamic sites because video, audio, and images can be added to both static and dynamic Web pages.
Today there are many ways to add multimedia to a Web page, and the same series of animated images could be created using video as an animation in Adobe Flash or as a simple animated GIF. One of the newest ways to add interactivity to a site is to use a technology called AJAX, which combines JavaScript and XML and is growing in popularity.
Fortunately, you don't have to worry too much about all the technical details to add multimedia to your Web pages. As you learn in Chapter 13, you can easily add many different kinds of audio and video formats using Adobe Dreamweaver, and you can even upload videos to a site like YouTube or Vimeo, and then insert them into any Web page with copy-and-paste ease.
The term template is used in many different ways for many different kinds of design work (on and off the Web), but essentially, a template is a shortcut in the design process. Think of a template as a set of design specifications that you can use to control the look and feel of your Web page. Templates can be used to set the background colors, how many columns (if any) your Web pages have, what font sizes and colors are used, how links are handled, and so on. Just about any aspect of the design or functionality can be set or adjusted by working with templates.
But not all templates are created equally. Although they all share those basic characteristics, many different kinds of templates are in use on the Web today. For example, most of the templates featured in this book were designed to create static Web sites with Dreamweaver, but they are quite different from the kinds of templates you would use if you were creating a blog with WordPress. You learn how to create a WordPress blog in Chapter 11, but before you start using any of these templates, I think it's helpful to better understand how they are different.
The templates featured in this book are
Dreamweaver templates (extension
.dwt)Dreamweaver templates offer many advantages without requiring advanced programming skills. When you create Dreamweaver templates with the
.dwtextension, you can use XHTML and CSS to create relatively simple static Web sites that include high-end features found on dynamic sites, such as the ability to create new pages quickly and to update every page in your site with the click of a button.Although you can use Dreamweaver to create templates that use advanced programming like PHP or Java, the
.dwtDreamweaver template is a much simpler option that is ideal for small- to medium-sized Web sites, which is why I used this template style for the profile, portfolio, small business, and family sites featured in Chapter 7—9.You can even create your own Dreamweaver templates by following the instructions in Chapter 6, and you can download Dreamweaver templates from many different Web sites (some for free, others for a fee). If you have this book, you have everything you need to download the collection of templates specially designed for the tutorials in Chapters 7, 8, and 9. Just visit
www.DigitalFamily.com/diyand follow the simple instructions to download the Dreamweaver Templates and image files included with them.WordPress templates (extension:
.php)Templates such as the ones you get with a blogging program like WordPress use the extension
.phpbecause they are written in the PHP (Hypertext Preprocessor) programming language. WordPress templates offer many of the same benefits as Dreamweaver templates, except that templates for blogs like WordPress draw their content from a database. As a result, they include XHTML and CSS like the Dreamweaver templates, plus much more complicated programming in the PHP programming language.When you design a blog or any other kind of dynamic site (explained in greater detail in the previous section), it's important to understand that the technology behind the scenes gets complicated very quickly. This may seem counterintuitive because creating a blog on a site like
WordPress.comis so easy, and updating a blog with new posts after it's been built is super easy.But here's the rub: It is easy to create a basic blog with a WordPress template, but it's not easy to edit a WordPress template. Thus, if you want to be able to change the design of your blog pages, alter the fonts, colors, and other design features, things get complicated really quickly.
Which templates are best for you depends on your goals and your technical skills, but it comes down to this. If you're creating a relatively small Web site (less than 50 pages), you'll probably have an easier time with Dreamweaver templates and the instructions in Chapter 7–9 for creating profile, portfolio, and small business sites.
If, however, you want to create an online journal or magazine that you will update often and expect to grow to hundreds or even thousands of pages, then creating a blog with WordPress is well worth the extra effort.
And here's where it gets really fun. Many people create both a Web site, say for their business portfolio, and a blog where they can add posts and other updates over time. Linking a blog and a Web site together is easy, and with this book, you have everything you need to create both.
I've chosen the most popular and powerful tools for you in this book. After years of testing Web design programs and building many different kinds of sites, I have found these to be the best options for the kinds of sites featured in this book. But that doesn't mean you can't substitute another program you prefer (or already have lying around your hard drive). For example, if you already have the full professional version of Adobe Photoshop, you can definitely use it with the lessons in the book. But because that program alone costs around $600, I choose to feature Photoshop's little sister, Photoshop Elements, which has all the basic features you need, but with a simpler user interface (and a price tag of less than $100).
When it comes to creating Web sites with XHTML and CSS, my first choice is Adobe Dreamweaver. If you're a Microsoft fan, I have to say I've also had good success with Microsoft Expression Web, and you can use that program to create all the sites featured in this book as well.
Both Dreamweaver and Expression Web sport graphic user interfaces that allow you to accomplish tasks through clicking and dragging instead of writing complicated CSS and XHTML tags. To help you appreciate the differences between these programs, you'll find a few more details in the last section of this chapter.
Although I believe that Photoshop Elements and Dreamweaver are the best programs for do-it-yourselfers just getting started on the Web, I include this general description of a few popular Web design and graphics programs on the market today to help you better appreciate your options. (You find descriptions of the most popular blogging programs, such as WordPress and TypePad, in Chapter 11.)
In the early days of the Web, people were using lots of different visual HTML editors. Today only a few major ones are in common use on the Web: Adobe Dreamweaver and Microsoft Expression Web. Both programs are available for download as trial versions.
Adobe Dreamweaver: By far the most popular choice among professional Web designers, this award-winning program offers high-end development tools, excellent design features, and valuable support for all the latest Internet technologies. Dreamweaver features a wide collection of customizable palettes, floating dialog boxes, and toolbars, which makes it look more like an image editor than a word processor. If you're serious about Web design, this is the tool to use, which is why I chose Dreamweaver to feature in this book.
Tip
If you don't have a copy of Dreamweaver, you can download a fully functional 30-day trial version for free by visiting
www.adobe.com/dreamweaver.You find an introduction to Dreamweaver in Chapter 6 and step-by-step instructions for customizing the various templates featured in this book in Chapters 7, 8, and 9. When you're ready for more advanced design with Dreamweaver, you find a collection of online tutorials at
www.DigitalFamily.com/dreamweaver(shown in Figure 1.8), including excerpts of my book Dreamweaver CS4 For Dummies (Wiley).Adobe Contribute: Contribute is designed to make it easy for anyone to "contribute" to a Web site. This reasonably priced program is easy and intuitive to use, but it's not a stand-alone program. Contribute isn't designed to create Web sites but to help you easily update an existing site. You need a program like Dreamweaver to create a Web site using the templates in this book, but if you want to enable others who know little or nothing about the Web to update the site, Contribute is a great option. You can download a free trial version at
www.adobe.com/contribute.Microsoft Expression Web: Just because I loved Dreamweaver first doesn't mean I don't respect Expression Web. Microsoft has a lot to be proud of with this relatively new professional design program. Expression Web offers strong CSS support and follows standards better than FrontPage ever did. You can create XHTML and CSS with Expression Web, and you'll find special features for creating dynamic sites with ASP.NET. If you generally prefer Microsoft products and/or work with a developer who uses Visual Studio, you should appreciate the compatibility between Microsoft Visual Studio and Expression Web. You can download a free trial version at
www.microsoft.com/expression.
You can find many choices in the world of image editing programs, from high-end programs, such as Adobe Photoshop, to "prosumer" (professional consumer) products, like Photoshop Elements, to simple programs that you can download for free over the Internet, such as Irfanview. Here's a quick comparison of image editing programs:
Adobe Photoshop: By far the most popular image editing program in the history of computer design, Photoshop lets you create, edit, and manipulate images in myriad ways. It's a professional tool with a professional price tag (around $600), so unless you have a big budget or you're a serious photographer or designer, Photoshop is probably more than you need (or want to pay for). You can download a 30-day free trial version at
www.adobe.com/photoshop.Adobe Photoshop Elements: Photoshop Elements features many of the same powerful tools as Photoshop, but it's easier to use and costs less than $100. Elements provides more than enough power for almost anything you need to do on a Web site, including optimizing images in the JPEG, GIF, or PNG format so that they download faster over the Internet. You find an introduction to Elements and instructions for creating and optimizing graphics for the Web in Chapter 5.
Tip
The difference between Photoshop and Photoshop Elements boils down to this: The expensive version is used by magazine editors and high-fashion photographers, for example, to perform painstaking, exacting work on their photos, to make flawless images that can be turned into four-color separations to run on million-dollar printing presses. (Given enough time, you can use Photoshop to make a mule look like a supermodel.) For the rest of us, who just want to edit photos or perhaps create the impression that Uncle Ernie's basset hound is driving the lawnmower, Photoshop Elements is all you need. You can download a 30-day free trial version at
www.adobe.com/elements.Adobe Fireworks: Fireworks was designed specifically for creating and optimizing images on the Web. Fireworks is a favorite among many professional Web designers because you can create a complete page layout in Fireworks, and then use the program's slicing tool to optimize and export images for the Web while Fireworks automatically creates the necessary XHTML code for you. It's not a perfect science, but it's pretty impressive. And because Fireworks is integrated with Dreamweaver, you can move back and forth between the two programs, which makes it easier to make changes to designs that use lots of images. You can download a 30-day free trial version at
www.adobe.com/fireworks.Free image editing programs: Search the Web for free photo editor, and you find many listed but only a few that are even worth downloading. If you're willing to settle for a more limited program to save money, consider the online editor at
www.irfanview.comor download the popular GIMP (GNU Image Manipulation Program). You can find this open-source editor (available for Windows, Unix, and Linux) atwww.gimp.org.