Make Easy Money with Google [Electronic resources] : Using the AdSense Advertising Program نسخه متنی

Creating Web Pages with Nvu

"Is Nvu free the way Firefox is free?" Stef asked.

"Yes," I said, "it's what us techies call open source software, which means that it's developed and supported by a community of programmers, not just a single company. Here's what the Nvu Web site says about the software."

Nvu (pronounced N-view, for a "new view") makes managing a web site a snap. Now anyone can create web pages and manage a web site with no technical expertise or knowledge o76.

"Sounds perfect!" Claude said.

"It's actually quite good," I agreed, "and the price is certainly perfect for our needs. When you get home, I want you all to go to the Nvu Web site and download the latest version of Nvu. Now, let me start the editor and show you what I mean. And Claude, you're going to be my guinea pig. Did you bring me the information I requested?"

"Yeah," he said, "I signed up for hosting and I printed out the email they sent me."

"Great," I said, "because we're going to build some pages and place them on your [VoIP-at-Home.com] site. You're about to create a Web presence! So let's get cracking."

Getting Started with Nvu

Making Room If you need extra room when working with Nvu, close the site manageryou can reopen it when needed.

Launch Nvu for the first time and you'll see a window like the one shown in Figure 6.1. At the top are toolbars similar to a word processor's. On the left side is the Nvu Site Manager, and on the right is the page editor. The page editor is where you create and edit the page.

Figure 6.1. The Nvu application window.

Nvu automatically creates a blank Web page for you when it starts. Before going any further, select Page Title and Properties from the Format menu to display the Page Properties dialog (Figure 6.2). You can set basic information about the Web page from this dialog, including:

The title displayed in the browser's title bar when the page is viewed The page's author A short description of the page The language in which the page is written

Figure 6.2. The Page Properties dialog.

Every page needs a title. In this case, it's "Chapter 5 and use lowercase letters and no spaces. Since we're creating the home page for Claude's site, the File name should be the standard "70."

Figure 6.3. The Nvu Source view.

[View full size image]

A Web page is built out of page elements and styles. Page elements describe the structure of the page: This is a heading, this is a paragraph, this is a link to another page, and so on. Page elements are edited in the Normal view, which looks and behaves a lot like a word processor. Styles establish how the page elements are to be displayed: Bold the headings, use an eleven-point font for paragraphs, color links blue, and so on. In other words, page elements are like nouns (things) and styles are like verbs (actions). Styles are edited in a separate view, which we'll discuss later.

To create new page elements, type directly into the Normal view as you would with a word processor. For Claude's home page, I entered a heading, a subheading, an introductory paragraph, and a copyright line (Figure 6.4).

Figure 6.4. The initial text for Claude's home page.

[View full size image]

By default, each paragraph you enter is created as a page element called Body Text. You can change a paragraph from one type of element to another by first selecting it with the mouse and then choosing an option from the Paragraph submenu of the Format menu (Figure 6.5). For the heading, select the Heading 1 page element. The subheading should be changed to Heading 2. Change the two remaining paragraphs to the Paragraph type. The page now looks different: The headings are in larger, bolded fonts and the paragraphs are farther apart than they were before (Figure 6.6).

Figure 6.5. Changing the type of a paragraph.

[View full size image]

Figure 6.6. Claude's home page with the new page elements.

[View full size image]

Quicker Page Elements To make page element changes more quickly, use the leftmost drop-down list in the toolbar.

Text within a paragraph can also be formatted, just as with a word processor, by using the toolbar icons to bold and italicize text or even change its size. Don't forget to save the page after changing it.

Peeking Under the Hood

Since we were working on his site, Claude was extremely interested in what I was doing. He wanted more details, though. "Can I see the Source view again?" Claude asked.

"Sure," I said, "in fact, why don't you take control. This is your site we're building, after all." I moved my chair over so Claude could sit in front of the computer. Once he was settled, he switched Nvu back to the Source view to see the ra93 that the editor had generated (
The W3Schools site
[View full size image]

"It makes it easy to select the text that the tag applies to!" Stef said.

"Can I change the page from this view, too?" Claude wondered. I nodded yes. "OK, I want to add a copyright symbol to the last line." He started looking through the menus. "Let me see, Word lets you insert symbols from a menu. I wonder if this program does.…Ah! There it is, under Insert!" He selected Characters and Symbols from the menu, and a dialog popped up. He found the copyright symbol in the drop-down list, clicked the Insert button, and dismissed the dialog.

"This is pretty easy," he said as he clicked the Preview tab next to the Source tab. "Funny, this view looks just like the Normal viewI thought it'd be different."

"That's because you're not doing anything complicated in the Normal view," I explained. "If you do, the Preview will show you what it should look like in a browser."

"Should?" Anita asked. "Can it be different?"

"Well," I replied, "browsers have different behaviors, yes, so if you're doing complicated layouts, you should definitely see how the page looks in different browsers. There's a Browse icon on the toolbar that displays the page in the Web browser you normally use. But for simple layouts, the built-in Preview should be fine."

Claude switched back to the Normal view. "Can we jazz this page up? It's not very exciting! And there are no links anywhere."

"We'll get to that, but not just yet," I said. "First, let's publish the page to your Web site."

Publishing the Page

"All right, Claude, you stay at the keyboard," I continued, "and let's see if you can figure out what to do."

Claude scanned the Nvu menus and toolbar. "Well," he said, "there's a big button here labeled 'Publish,' so I'm going to click it." He did, and the Publish Page dialog appeared (Figure 6.9). "Huh. OK, what now?" asked Claude.

Figure 6.9. The Publish Page dialog.

Figure 6.10).

Figure 6.10. Publishing the page to the hosting service.

"It's done," Claude said, "so can I try my Web page now?" I nodded, and Claude opened a browser window and typed the address of his site, [www.voip-at-home.com]. "There it is!" he yelled as the home page appeared (Figure 6.11).

Figure 6.11. The Web page is now live on the site.

[View full size image]

"Yay Dad!" Stef said, and Anita was smiling, too.

"Great job, Claude," I said. "Now let's add another page to your site and link it to your home page. Anita, will you please take the helm?" I motioned her over and Claude switched seats with her. "I know this is your father's site, but I want each of you to try editing a Web page. All right, we need to create an about page and link it to the home page and vice versa. Why don't you go ahead and show me how to do it?"

Adding and Linking Pages

Adding a page with Nvu is as easy as clicking the New icon on the toolbar, setting its title, and saving it to disk. Anita was able to figure this out in short order. She titled the new page "About [VoIP-at-Home.com]" and saved it to disk as "abou90." She added a heading and a couple of paragraphs. The home page was still accessible from within Nvu, so she quickly copied the copyright line from the home page to finish the simple about page (Figure 6.12).

Figure 6.12. The newly created about page.

claude@voip-at-home.com, to create a second link on the about page (Figure 6.14). Clicking this link would send an email to Claude.

Figure 6.13. The Link Properties dialog.

Figure 6.14. The about page with its new links.

Testing and More Testing

"Look," Anita said, "here's the updated home page." She activated the browser window and reloaded the page, which now sported two links. "And here's the new about page," she continued, clicking the "About this site" link. Unfortunately, the page didn't show up because the browser couldn't find it.

"You forgot to publish the about page," I explained to her. "What you've got now on the home page is called a broken link, because the page it links to is missing. Don't worry, it's a common mistakeeven professionals do it. That's why you should always check your changes before you publish a page. Check it visually in the Preview view, then use the Browse button to load it into a browser and check the links."

"Like I always proofread my reports before submitting them," Stef said, as Anita clicked the Browse button to check the about page.

"What does this mean?" she asked, pointing to a new dialog on the screen (Figure 6.15).

Make Easy Money with Google [Electronic resources] : Using the AdSense Advertising Program نسخه متنی

Creating Web Pages with Nvu

Getting Started with Nvu

Figure 6.1. The Nvu application window.

Figure 6.2. The Page Properties dialog.

Figure 6.3. The Nvu Source view.

Figure 6.4. The initial text for Claude's home page.

Figure 6.5. Changing the type of a paragraph.

Figure 6.6. Claude's home page with the new page elements.

Peeking Under the Hood

Publishing the Page

Figure 6.9. The Publish Page dialog.

Figure 6.10. Publishing the page to the hosting service.

Figure 6.11. The Web page is now live on the site.

Adding and Linking Pages

Figure 6.12. The newly created about page.

Figure 6.13. The Link Properties dialog.

Figure 6.14. The about page with its new links.

Testing and More Testing

Figure 6.15. Asking for permission to launch a browser window.