Section 13.2. Creating a Web Page from Scratch | Word 2007[c] The Missing Manual

13.2. Creating a Web Page from Scratch

As shown above, you can save any Word document as a Web page, but everyone knows some serious differences exist between printed documents and Web pages. Most of the time, if you simply save a paper document as a Web page, the results are less than stellar . The best Web pages and Web sites are designed from the ground up to be viewed in a Web browser. For example, most Web pages are part of a Web site where the pages all have a similar look and feel. They're designed to help the visitors find the information they need quickly. People don't usually read Web pages from front to back like a novel . They jump from place to place, quickly snatching up the information they need.

You can use Word to create Web pages with a professional look and feel; it just takes some extra planning and a few easy-to-learn Web designer tricks (Figure 13-3). In the next few sections, you'll create a Web page starting from a blank document, lay it out with the help of Word's table feature, and create the links that connect it to other Web pages on the same Web site. Plus, you'll learn how to save your Web page file as a template to make it easier to create all those other pages.

Figure 13-3. It's certainly possible to create attractive Web pages, like this one, with the tools provided by Word 2007. That doesn't mean it's likely to be a professional Web designer's favorite tool for the job. Traditional Web design tools such as Adobe Dreamweaver and Microsoft's FrontPage are better choices if you plan to spend a lot of time creating Web pages.

UP TO SPEED
Serious Web Design Tools

If you're planning to work on a lot of Web pages, you should get a program that's specifically designed to create Web pages, move pages to a Web site, and organize all the files. Adobe's Dreamweaver is one of the most popular programs used by the pros, but it costs about $400.

Microsoft's FrontPage comes with some of the Office suites and, under $200, it costs less than Dreamweaver as a standalone product. Homesite is a popular program that you can download from Web sites, such as www.download.com. It's free to test drive and costs $100 if you want to continue using it. MoreMotion Web Express is another program that you can download. It's free to use.

13.2.1. Creating the Web Page Document

Imagine you're creating a new Web site all about the novel A Tale of Two Cities . You want to provide information on the book, the author, and the historical events detailed in the book. Most Web sites have several pages, each containing a different kind of informationto make it easier for visitors to find what they're looking for, and to keep each page from getting too long. There's always a home page that welcomes visitors and provides links to all those other pages. You start by creating a Word document for the home page.

Open a new Word document, and switch to Web Layout view: Go to View Document Views Web Layout or press Alt+W, L

As you design your page, you probably want to see it as it will look in a Web browser. For example, you no longer see the edges of a page because your document isn't headed for a sheet of paper. When you start with a new document, the margins are at the extreme edges of your screen.

Tip: Another quick way to switch views is the view buttons in Word's lower-right corner. Click the middle button (with the globe icon) to change to Web Layout view.
Use the keyboard shortcut Alt+F, A to open the Save As box. Name your document index.htm .

The file name index.htm is the conventional name for a Web site's home page, which is exactly what you're about to create.

Tip: You may want to create a new folder to hold all your Web pages and folders for a Web site. You can do that by clicking the button near the top-right corner of the box (the folder with a starburst on it). After you name the new folder, double-click it to save your new index.htm document in it.
At the bottom in the box labeled "Save as type," choose Web Page. Click Save when you're done .

As explained in Section 13.1, you can use three different HTML file formats to save your document. Web Page is the format to use when you're going to continue working on a page.

13.2.2. Create a Table for Your Page's Layout

Web designers use tables to organize text and pictures on the page. By placing text in a table cell , you can control the line length. You also use cells to hold pictures and to keep the pictures next to relevant text.

Go to Insert Table or Alt+N, T. Create a table with three rows and three columns .

See Section 10.1 if you need a refresher on creating tables in Word.
When you hold your mouse over your table, you see a button on the upper-left side. Click the button to select your entire table. Choose Table Tools Design Table Styles Borders No Border .

If the borderlines around each table cell appeared on your Web page, it would look very cluttered. But if you hide the borderlines in the table, visitors won't even know they're there.

On the other hand, while you're designing the Web page, it's nice to have some guidelines that show you the cells.
Go to Table Tools Design Table Styles Borders, choose View Gridlines .

Word places dotted lines on the screen when you're viewing the pages in Word. Visitors to your Web site don't see the gridlines when they're viewing your page in their Web browser.
Add some color to your table using Table Tools Design Table Styles .

When you select the table, you see the Table Tools contextual tab appear on the right side of the ribbon (Figure 13-4). Beneath are two tabs that you use to change the look of your table. When you click the Design tab, you see several colorful table styles in the middle of the ribbon.
On the left side, under Table Style Options, turn on Header Row and First Column, and leave the other boxes turned off .

Word highlights the top row, which you'll use for a heading, and highlights the left column where you'll place navigation buttons for your page.

Choose a table style that you think will work for your page .

Scroll through the table styles, or click the button at lower-right to open the menu so you can see several styles at once. As you hold your mouse cursor over a style, you see your table take on the colors of the style.

Figure 13-4. Use Word's table styles to automatically format your table with background colors. In this example, the top row and the left column are highlighted. The top row will hold the heading for the page, and the left column will hold navigation buttons that link to other pages.

Go to Page Layout Themes Themes to choose a color and font theme for your document. The keyboard shortcut Alt+P, TH opens the Themes drop-down menu .

You have lots of choices on the Themes palette. You can go with Microsoft's corporate blue. The Paper theme has a nice muted khaki look. Some of the others are bright and lively. Choose a color that matches the content of your Web page and that you think will please your visitors.

When you choose one of Word's themes for your document, you define a consistent set of colors and fonts that are used. These colors appear at the tops of all the palettes, and they're used in graphics and headings.

Tip: You can select any colors you want, but if you're design-challenged, you know you'll be safe using the theme colors.
Choose a background color for your Web page with Page Layout Page Background Page Color .

Time to put that theme to action by choosing one of the theme colors as a background color for your page. You'll be placing relatively small- sized text on this page, so choose a color that won't fight with the letters on the page. If you're using a light page color, plan on using black text. If you're using a dark page color, plan on using white text.
Select the table by clicking the button at the table's upper-left, and then press Alt+H, AC to center it on your page .

The content for Web pages is usually aligned on the left side or in the center of the page. By aligning your table in the center, you can minimize the appearance of empty space by having an equal amount of space on either side of your text.
Drag across the three cells in the top row. With all three cells selected, choose Table Tools Layout Merge Merge Cells to make one big cell that goes across the top row .

This merged cell will hold a heading that identifies all the pages in your Web site. Most Web sites use the same header on every page. That way you always know when you're on the CNN Web site. It reinforces the brand and visitors know who's responsible for the information they're viewing.
Type your heading A Tale of Two Cities , for example .

At first, the text will be too small for a proper heading, so use the Font Size command (Alt+H, FS) to bump it up to a generous 36 points. Center the heading with the command Alt+JL, TC. If necessary, you can change the color too. Choose Home Font Font Color. Pick a color that contrasts well with the background color of the cells.

13.2.3. Add a Navigation Bar

It's helpful to your visitors to provide navigation tools on every page of your site. Most Web sites place consistent navigation bars either on the left side or on the top of the page. In this design, you'll create a navigation bar on the left (Figure 13-5).

Drag to select the two bottom cells in the first column, and then press Alt+JL, M to merge the cells. While the cell is still selected, choose Home Paragraph Center .

Type some words that will lure visitors to explore the other pages: Home, The Story, Main Characters , French Revolution, Dickens Bio, FAQs, Contact Us . Use the Line Spacing button (Alt+H, K) to put some space between your navigation words. About 2.5 or 3.0 lines should look good.

Figure 13-5. With a heading and a navigation bar along the left side, your page begins to look like a respectable Web site.
Select the second item in your navigation bar ( The Story ), and then use Insert Links Hyperlink or Alt+N, I to open the Insert Hyperlink box (Figure 13-6) .

The story page doesn't exist yet, so you'll create it now.
On the left side of the box, choose Create New Document. In the "Name of new document" box, type story.htm . At the bottom of the box, select "Edit the new document later," and then click OK .

(You're not going to work on the story page yet.) When you close the Create New Document box, Word creates a new, empty HTML file named story.htm and, back in your document, creates a link from the words "The Story" to the new file. Notice that the words The Story are underlined and in a different color to show that they're not just textthey're a link to another location.

Tip: If you don't like your link's new look, you can change it using the standard formatting tools found at Home Font.

Repeat the previous step to create links for the rest of the items in your navigation bar .

The Home item will link to the page you have open. So, in the Edit Hyperlink box, choose the first option in the panel on the leftExisting File or Web Pageinstead of Create New Document. Then, in the Address box at the bottom, type index.htm .

Figure 13-6. The Insert Hyperlink box gives you several ways to link to documents on the Web or on your computer. You can even create links that connect to a different a part of the same Web page.

13.2.4. Create a Copyright Line

Web designers often put some standard information at the bottom of every Web page such as a date and copyright notice, contact information, and sometimes the name of the company that designed the Web site.

The area below the heading and to the right of the navigation bar is divided into four cells. You'll adjust the two bottom cells to hold a copyright line for your Web page. After all, you want to protect all your hard work from intellectual property theft.

Above the two cells at your table's lower-right, drag the horizontal gridline toward the bottom of the table. Select the two cells, and then press Alt+JL, M to merge them .

You should have just enough room for one or two lines of text.
Type your copyright notice Copyright 2007, Charles Dickens . Press Enter to add a new line, and then type Web Design: Pickwick Productions .

AutoText (Section 2.6) can help you create a copyright symbol by typing (c) . When you hit the space bar, the three characters turn into the copyright symbol. (If you don't like the change, press Ctrl+Z to undo it.)

You want people to be able to find this information when they need it, but you don't want it to detract from the message of your Web pages.
Select the text, and then reduce the font size to 8 or 9 points (Alt+H, FS) .

It looks best if you center the notice, so while it's still selected, use the shortcut Alt+H, AC to center the text in the cell.

13.2.5. Save Your Page as a Template

The work done so far makes a great template for your other Web pages. You've got a page that's empty except for a heading, a navigation bar, and a copyright noticethese are all things you want on each page of your site (Figure 13-7). Now's a good time to save your page as a template for your other pages.

Choose Office Save, or click the Save icon in the Quick Access toolbar

Web designers follow the "save early, save often" philosophy. That way, you don't lose all the hard work you've done so far if there's a mishap or power failure. Next, you'll save your document as a template so you can use this table design as a basic layout for other pages.
Choose Save As (Alt+F, A). Save your page under a new name, like dickens template.htm .

You don't want to mess up your template, so close it with Alt+F, C before you press another key.

To use the template in the future, open the template dickens template.htm , and then immediately choose Office Save As to save the file under a new name. After you Save As, Word opens your new document, and the template file remains closed and unchanged where you can use it again.

Figure 13-7. Good Web sites have a consistent design from page to page, and you have an incredibly easy way to do it. Simply create a template that includes items common to all the pages like a heading, navigation bar, and basic contact or copyright details.

13.2.6. Add Text and Images to Your Web Page

To get back to work on your Web page, reopen your home page by choosing Office button Recent Documents index.htm . From here on, your work is exactly like creating any other Word document. Type directly into the cells to add words. You can use any of the formatting commands that are available to text and tables. If you need to adjust the size of the cells, just drag the gridlines. (Chapter 8 has the full story on working with tables.)

Pictures and graphics are an important part of any Web site. If you have the choice between delivering your message with a picture or with words, choose the picture. You can insert a photo from your computer by clicking Insert Illustrations Picture. Or you can look for clip art on your computer and on the Web (Section 11.2.2).

Note: It's always important to respect copyrights. You can't copy photos, artwork, or text from other Web pages and publish them on yours unless you have permission from the copyright holder.

The last step for this page is to save and close it. Choose Office Close and answer yes when Word asks if you want to save the file. At this point you have a finished page that looks something like Figure 13-8.

Figure 13-8. Here's the end result of all the page design steps in the previous sections. Word's Clip Art panel is open on the right with a couple Dickens images.

UP TO SPEED
Posting Your Pages on the Web

Once you've created Web pages, the next step is to move those pages from your computer to a site on the Internet where the whole world can admire your work. Getting Web sites online is beyond the scope of Word (and of this book). Here are some good books to get you started: Creating Web Sites: The Missing Manual, Dreamweaver 8: The Missing Manual, and FrontPage 3: The Missing Manual .

It's not too hard to find free Web space where you can create a small Web site. Check with the company that gives you access to the Internet. Often, in addition to giving you an email address, they provide space for a Web site.