Building Web Sites All-in-One For Dummies® (25 page)

For information about or trial versions of Adobe software, visit the Adobe Web site at
www.adobe.com
.

Toon Boom Studio and Toon Boom Studio Express

Toon Boom Studio is the professional version, and Toon Boom Studio Express 4 is the “lite” version of the software. You can use both to create animations for use in Flash. If you plan on doing a lot of animations — especially if you expect to have a lot of character animation in your work — you might want to check out one of these packages. They specialize in animation and have tools that are intended for that purpose. Trial versions are available on the Web site, so you can try it out before you buy it.

For information about Toon Boom Studio or Toon Boom Studio Express software, visit
www.toonboom.com
.

Electric Rain Swift 3D

Swift 3D specializes in creating 3D art and animations for Flash. Electric Rain offers two different versions of Swift 3D: a full-blown program and a plug-in for Flash. Which one works best depends on the type of projects you intend to create.

You can find additional information about Electric Rain products at
www.erain.com
.

Apple Final Cut Pro and Final Cut Express HD

For Macintosh computers only. Final Cut Pro (shown in Figure 1-6), sold alone or as part of the Final Cut Pro Studio, is a professional, nonlinear, video editing software package. Final Cut Pro has more features than Final Cut Express HD, but depending on your needs, you might find that Final Cut Express HD is enough. Most Web video projects don't require the more robust features that are available in the Pro version. Before you decide which works best for you, you'll have to determine what your plans are.

If you do decide to start with Final Cut Express HD and then later move up to Final Cut Pro, you'll find that it's an easy transition because the interfaces of the two are so similar. You'll just have to learn the additional features. Whichever one you choose, you'll also have to figure out if you want to put motion graphics
(animations)
in your videos. If you do, you need to make sure you have additional software to create the animations — such as Adobe After Effects, Apple Motion, or LiveType.

For more information about the Final Cut products and other software by Apple that can help you with your video projects, go to
www.apple.com
.

Adobe Premiere Pro

Available for Windows only. Adobe software's professional, nonlinear, video editing software provides the tools that you need to edit and prepare video. Like the Final Cut products, you need additional software if you want to do fancy, motion graphics in your videos. Premiere is available bundled with other software. Visit
www.adobe.com/products
for more information about Premiere Pro.

Many other video editing software options are available, but many of them are more robust than you need to create Web video
— with price tags to match. If you find that Final Cut Pro, Final Cut Express HD, or Premiere Pro doesn't have the features you need, you might want to look at Avid (
www.avid.com
) software.

Web-design software

Your Web-design studio needs some type of Web-design software. You can create pages in a plain-text editor or you can buy a
WYSIWYG
(what you see is what you get) Web page editor. WYSIWYG page editors include both the coding environment and a designer mode that shows you what your page will look like. Your other option is to use software that isn't quite full WYSIWYG but is more robust than a text editor (such as BBEdit). Here are some tips on what type of Web-design software might work for you:

•
WYSIWYG software

•
Adobe Dreamweaver:
Dreamweaver, considered to be the industry standard for Web design, works with Contribute and other Adobe products — Flash, Fireworks, and Photoshop (via the Edit With command). It comes alone or as part of a package. The Dreamweaver CS4 user interface is shown in Figure 1-7. We cover Dreamweaver in Chapters 5 and 6 of this minibook. Read more about Contribute in Book VIII, Chapter 2.

•
Adobe GoLive:
This Web editing software has many of the same features as Dreamweaver, and many professionals use it. Adobe GoLive is available alone or as part of the Creative Suite Premium bundle.

You can find more information about Dreamweaver and GoLive at
www.adobe.com
.

•
Microsoft FrontPage:
Microsoft's professional Web-design and maintenance software features a full set of tools for creating and maintaining sites for individual users and for larger Web teams.

All three WYSIWYG software packages have features that help keep teams on track. Dreamweaver is the most widely used and integrates with Contribute (which is Adobe's software for nontechnical Web editors). GoLive's interface looks familiar to those Web team members who already use other Adobe products. Also be on the lookout for older products being used in some settings. For instance, you may encounter some sites being maintained with Microsoft FrontPage, a product that is no longer being made but is still being used by some design/development teams.

•
Microsoft Visual Web Developer 2008 Express Edition
(
www.microsoft.com/express/vwd/
)
:
This is a free product that offers powerful Web page authoring capabilities. The tools are not as robust as Dreamweaver but are more than adequate for building and maintaining sites. In addition to HTML, you can also create CSS and JavaScript files using Visual Web Developer Express among other common Web site files (for instance, ASP and PHP files). If you are on a limited budget and don't mind getting into a little code, this product might just do the trick.

•
Bare Bones Software BBEdit:
BBEdit is a widely used HTML and text editor (which means that it's good for all sorts of tasks — CSS and JavaScript included). It's available for Macintosh computers only. BBEdit is good for individuals who are more comfortable with a code-only environment. Some of its features and functions are similar to those of the more robust WYSIWYG editors, but as the name implies, it really is a pretty bare-bones package. Some developers prefer the stripped-back interface and the reduced toolset for its less-cluttered environment.

Ideally, you'll learn HTML and CSS well enough to be able to create pages in any environment.

•
HomeSite:
This is Adobe software's HTML/text editor for PC computers only. Like BBEdit, the tool is geared toward people who are more comfortable with code than with a visual approach to Web site design. HomeSite is a very good package for creating Web page code — HTML, CSS, JavaScript, and others.

The choice of what software you use is really up to you. If you're going to make a career out of creating Web pages, learn HTML and CSS along the way. That will ensure that you're able to handle real-world Web page creation and maintenance. Remember, the more the software does for you, the more you have to trust a machine to figure things out for you. Software is good, but it's still no match for human judgment.

Browser software

You need to have copies of the most popular browsers available on your machine. Ideally, you should have copies available on both platforms. At least make sure that you have access to a way to view your pages on both a Mac and a PC. Some of the most popular Web browsers that you need to have are Firefox, Safari, Internet Explorer, Netscape (depending on your audience), and Opera. You might also need to look at your site in AOL. Researching your sites stats and intended audience data will help you determine which browsers to test in.

Look at your pages in all the most popular browsers because they don't interpret code in exactly the same way. Additionally, pages can look different in PC and Mac versions of a browser. Each browser and platform has quirks that you have to work with. The process of building pages does require a cycle of build, test, adjust, test, and so on until you get acceptable results in the targeted browsers.

The list of browsers and versions that are in common use changes often. Some browsers are no longer in common use or are no longer being supported — such as Internet Explorer for the Mac. You probably don't need to worry about checking your pages in old or outdated browsers. The exception to this is cases where the client or audience will be using older technologies. Make sure you talk with your client about the technological needs of the site before you start building. If you don't, it isn't possible for you to know what to build.

Chapter 2: Making a Web Page with HTML

In This Chapter

Getting started on coding your Web page

Adding body content

Creating bullet lists, numbered lists, and tables

Introducing style

Developing good coding practices

This chapter helps you understand the basics of HyperText Markup Language (HTML).
HTML
is the underlying code that makes all Web pages work in a browser. In this chapter, we deconstruct an HTML document and show some basics of how to create a Web page.

This chapter focuses on the most basic Web page layout, although many technologies can be added to a site — and the code — to create much more complicated pages. HTML can't use information from a database or to create any multimedia effects on its own. For that, you need other scripting and programming languages (covered in Book VI) and plug-ins, such as Flash or QuickTime (covered in Book V).

Getting Acquainted with the Basic Parts of an HTML Document

The essential parts of an HTML document are pretty simple. Each HTML page consists of a head and a body that are contained in
tags.
In fact, all elements on an HTML page must be contained in tags. The absolute minimum tags needed are the HTML

and

tags, as shown here:

Your header information goes here.

The content of your page goes here.

Note that most tags travel in pairs. Each element has an
opening tag
(

,

,

) and a
closing tag
(

,

,

). The opening and closing tags let the browser know where each part of your document begins and ends, respectively. All tags in HTML should be closed; in the current version of HTML 4.01, or XHTML, they
must
be closed. Some tags are
container tags:
That is, one opening tag is followed by some content, which is then followed by the closing tag, as in the preceding example. Other tags, such as a break tag (


), are
empty tags.
Notice how the single tag also has a
/
to close itself.

If you'd like to have a look at the HTML of any page, view the source code in your browser. It's a good way to see how others are creating their pages. Be aware though, that browsers are very forgiving of bad coding practices. Many older sites and sites created by less-skilled developers might not have standard code. Make sure you verify that a technique is a good one before you put it to use on your own site. To view the source code of a page in Internet Explorer, for example, you can either right-click in your browser window and select View Source, or choose View⇒Source on your browser's menu bar. (You can also view source code with other browsers. The location of the View Source option might be different, but will be found under a similar view-type menu.) Figure 2-1 shows an example of the HTML code and the page it produces.

Starting Your HTML Document Right

Throughout this chapter, we work through an HTML document from top to bottom and explain the parts. This will help you develop good, solid code when you start to work on your site. By
good, solid code,
we mean code that is consistent with Web standards, free of typos and other errors, and also well commented. This section explains the document type definition (DTD) and the head and body tags. Each site you create will always have at least these three elements.

As you start to build your HTML document, you might notice when you preview it that it's pretty ugly. The default look of headings and paragraphs can be very unattractive. Don't try to make it look good at this point. The CSS (Cascading Style Sheets) file you create will take care of all the visual aspects of your page.
Cascading Style Sheets
are a type of coding that controls layout. CSS are the instructions for the browser about how to display different elements of your HTML document. CSS can control how much space is between the elements on the page, what colors things are, and how large the text appears. Some very old methods of making HTML look good (such as using the

tags) shouldn't be used anymore because they create code that's difficult to edit and maintain. The old methods are also not as compliant with modern browsers and devices. A well-coded HTML document is a pretty bland and ugly thing — but that's okay.

The document type definition

The first thing your page needs is the opening DTD and HTML tags. These tags tell the browser what type of HTML document you're sending it. There have been several versions of HTML, and telling the browser which version you're using helps the browser display your page correctly. This example is from a page that is using XHTML 1.0 Transitional, a modified version of HTML 4.01:

This code also tells the browser that this page is in English (note the
EN
) and offers additional information about how to display your page.

The head tag and what goes in it

The head of the HTML document is where
metadata
(information about the document) is contained. Tags associated with metadata are
meta tags.
The purpose of meta tags and the information they contain is to

•
Inform the browser about what type of document it is receiving

•
Provide information, such as descriptions and keywords, used by search engines

•
Provide a title for the page

This page title is displayed in the title area of the browser and also in most search engine results lists.

•
Link associated files, such as CSS and JavaScript files

•
Provide information about when the page was published and by whom

Note that all the samples of code in the preceding list are closed either with a closing tag or with a slash (
/
) at the end of the code. A good way to tell whether a tag is a container tag is to determine whether it “contains” anything. The

tags encapsulate all the header information, so they are container tags. The meta tags merely convey a piece of information — and so are not containers.

Several more meta tags are available, and header information can also contain other types of information, such as CSS styles and JavaScript. To see examples of these in CSS, check out Book III, Chapter 3; Book VI, Chapter 1 covers JavaScript.

So, to have a look at how the code examined so far works together to create the beginning of your HTML document, examine this code: