In the panels to the right of the document window, click the Insert tab. Then, in the drop-down menu at the top (Figure ), choose Common. Click the triangle next to Image and then choose Image from the submenu.
Dreamweaver opens the Select Image Source window, showing the contents of your Images folder.
Double-click the arenaqq.us graphics file.
The Cafe Soylent Green logo appears in the upper-left corner of your web page. After you insert an image, it remains selected, as shown in Figure Its properties appear in the Properties panel below the document window. If you click elsewhere on the page, that deselects the image and you no longer see its properties.
Figure Dreamweaver splits the Insert commands into several categories. Use the drop-down menu at the top of the panel to select one, like the Common category shown here. Some commands, like Image, have a submenu; click the triangle button to open it. These clever menus remember the last selection you made, so if you make the same choice several times in a row, all you have to do is click the main button, without having to go into the submenu.
In the Properties panel’s Alt text box (circled in Figure ), type Cafe Soylent Green.
“Alt” stands for Alternative, but the text you type here is really all about accessibility. It makes your pages more accessible to people who visit websites using alternative devices—for example, people with viewing disabilities who require screen readers to read the contents of a web page out loud. That’s where the alt property comes in. This text description is useful not only for screen-reading software, but for people who deliberately turn off pictures in their web browser so pages load faster. (Search engines also look at alt properties when they index a page, so an accurate description can help your site’s search-engine rankings.)
Figure When you select an image in the document window, the Properties panel reveals the image’s dimensions. A thumbnail of the image appears in the top left of the panel, as does the word “Image” (to identify the type of element you selected), along with the image’s file size (in this case, 16 KB). You’ll learn about other image properties in Chapter 5.
Deselect the image by clicking anywhere else in the document window or by pressing the right arrow key.
Keep your keyboard’s arrow keys in mind—they’re a great way to deselect a page element and move your cursor into place to add text or more images.
Press Enter (Return) to create a new paragraph. Type Welcome to Cafe Soylent Green.
Make sure you’re in Design view here—pressing Enter (Return) in Code view simply inserts a carriage return and no paragraph tags. Notice that the text is a dark color and uses the Segoe (or, if you don’t have Segoe installed, a substitute sans-serif) font; you set these options earlier, in the Page Properties dialog box. The Properties panel now displays text-formatting options.
The key called Enter on Windows keyboards is named Return on most Macintosh keyboards (and Enter on others). So on Macs, you press either Return or Enter.
In the Properties panel, click the HTML button and then, from the Format menu, choose Heading 1 (see Figure ).
The text you just typed becomes big and bold—the default style for Heading 1. Right now, the text doesn’t stand out enough, so you’ll change its color.
Select the text you just typed.
Do so by either dragging carefully across the entire line or by triple-clicking anywhere inside the line. (Unlike the Format menu, which affects an entire paragraph at a time, many options in the Properties panel—like the one you’ll use next—apply only to text you select.)
Figure The Properties panel includes two views: HTML and CSS. The HTML view, shown here, lets you control the HTML tags Dreamweaver uses to create standard text elements like bulleted lists, paragraphs, and links. The CSS view provides a simple way to create fancy CSS styles that format your text to look great.
In the Properties panel, click the CSS button so you can style the text. Look for New Rule under the Targeted rule drop-down menu, and then choose <New Inline Style> from the submenu. In the Color box to the right, replace the current value with #CC (or select a color using the color box). Click in the document window to deselect the text so you can see its new color.
Congratulations! You created a new CSS style in the middle of your content using what’s known as an inline style. With your cursor somewhere inside this headline, the Properties panel’s Targeted Rule box shows it as <inline style>.
In the panels group on the right, click the tab for CSS Designer. Under that is a section called Selectors. Section headers like Selectors and Properties work like an accordion—when you click a headline, the section expands to display the contents inside. If necessary, click the Selectors bar to view the contents, where you’ll see a few selectors, including “<inline style>: h1.”
This is another way of explaining that the cursor is inside an h1 heading, but the heading isn’t displaying the usual style because you added an inline style for it.
To see the style Dreamweaver applies to a selector, look in the Properties section of CSS Designer (just below the Selectors section). Use the scroll bar to see all the properties.
The items Dreamweaver displays in the Properties section change depending on what you highlight in the Selectors section. For example, if you click “<inline style>:h1” in Selectors, you see all the properties you can use to format your <h1> headings. Grayed-out properties are undefined—you haven’t assigned any values to them. At the top of the list you’ll see text attributes including the color property, along with a swatch and the hex code that defines the hue. If you click Computed in the Selectors section, Dreamweaver displays the properties in use for the currently selected element. In this example, if you position your cursor in the heading and highlight Computed in the Selectors section, the Properties section displays the color and font family you chose earlier.
It’s easy to get confused between the Properties panel below the document window and the Properties section of CSS Designer, which lives in the panel group. The Properties section of CSS Designer displays the properties of CSS styles. Chapter 3 and Chapter 9 give you more details.
With your cursor still in the document window, right-click (Control-click) any text. Choose CSS Styles→Convert Inline CSS to Rule.
The Convert Inline CSS dialog box opens.
Set the “Convert to” menu to “All h1 tags,” turn on the radio button labeled “The head of this document,” and then click OK.
You’ve successfully redefined the <h1> style in your document. Now all <h1> tags will sport the new color. Dreamweaver writes the CSS definition in the “head” section of your document. Want to take a peek? Change your document view to Split or Code view, and then look for <h1> in the code window.
You’re not done yet. Next, you’ll make more changes to <h1> using CSS Designer.
In CSS Designer’s Sources section, click <style>.
The <style> entry represents the internal style sheet in the <head> part of your web page. When you choose <style>, CSS Designer’s Selectors section displays the selectors defined in the internal style sheet.
In CSS Designer’s Selectors section, you’ll see “h1” listed, but it no longer displays <inline style> because you’re no longer using an inline style. Dreamweaver formats the text using the new <h1> style. What’s more, when you create new <h1> paragraphs, they’ll look the same as this one.
In the Selectors section of CSS Designer, click h1. In the Properties section, scroll down until you see the Text group and the font-family property within it. Click the grayed-out words “default font” and then choose “Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif” from the drop-down menu.
Once again, you’re changing the definition of the <h1> heading (also called the <h1> tag). No extra steps are necessary when you change the definition in the CSS Designer panel. You can confirm the change by inspecting the code in the document window as you did in the previous step.
Time to add more text.
Back in Design view, click to the right of the heading, and then press Enter (Return) to create a new paragraph.
Although you may type a headline now and again, you’ll probably get most of your text from word processing documents or emails from your clients, boss, or coworkers. To get that text into Dreamweaver, you simply copy it from the other document and paste it into your web page.
Click the tab for the Files panel. In the Files panel, double-click the file arenaqq.us to open it.
This file is just plain text—no formatting, just words. To get it into your document, you’ll copy and paste it.
Click anywhere inside the text, and then choose Edit→Select All, followed by Edit→Copy. Click the arenaqq.us tab to return to your web page and, finally, choose Edit→Paste.
You should see a few shields sprinkled among the text (circled in Figure ). If you don’t, make sure you completed step 3 in Phase 1. These shields represent line breaks—spots where text drops to the next line without creating a new paragraph. You’ll often see these shields in pasted text. If you find them, you need to remove them and then create separate paragraphs.
Click one of the shields and then press Enter (Return). Repeat this on all the other gold shields in the document window.
This deletes the line break in the document (it actually deletes the HTML tag <br>) and creates two paragraphs out of one.
At this point, the pasted text is just a series of paragraphs. To give it some structure, you’ll add headings and a bulleted list.
Click in the paragraph that has the text “About the Cafe.” In the Properties panel, click the HTML button, and then choose Heading 2 from the Format menu.
That changes the paragraph to a headline, making it bigger and bolder.
Using the same technique as in step 19, assign the Heading 2 tag to the labels “Location,” “Hours,” and “Specialties.”
You now have one Heading 1 and four Heading 2 headlines. The Heading 2 headlines could use a little style.
Triple-click the headline “About the Cafe” to select it. In the Properties panel, click the CSS button. Make sure Targeted Rule is set to <New Inline Style>. Then, in the Size box, delete “none” and type 20.
Once again, you’ve created an inline style. This time it’s within this <h2> heading (“About the Cafe”). Notice that it is the only <h2> heading affected by the size change to 20 pixels (px). Next you’ll update all the <h2> headings to match.
With your cursor in the “About the Cafe” heading, right-click (Control-click) and then choose CSS Styles→Convert Inline CSS to Rule from the drop-down menu.
The Convert Inline CSS dialog box appears.
Using the “Convert to” menu, choose “All h2 tags.” In the “Create rule in” group, turn on the radio button labeled “The head of this document,” and then click OK.
Notice that all the <h2> headings now look the same. The text gets a little smaller—the style you just created applies to all <h2> tags, and they now share the same font size, 20 pixels.
Next you’ll change the text’s color.
In CSS Designer’s Sources section, choose <style>. Then, in the Selectors section, choose “h2.” Below that, in the Properties section, scroll down until you see the Text group and the color property. Replace the color currently there with #.
You changed the color to a lighter and brighter shade of green.
Under font-style, choose Italic.
This italicizes the text and updates the <h2> style you created earlier—that’s why the other Heading 2 headlines are now italicized, too.
Select the four paragraphs under the headline Specialties; drag from the start of the first paragraph to the end of the fourth paragraph.
You can also drag up, starting from the end of the last paragraph.
In the Properties panel, click the HTML button, and then click the Unordered (bulleted) List button (see Figure ).
The paragraphs turn into a bulleted list of items, called an “unordered list” in HTML-speak. Finally, you’ll highlight the cafe’s location and hours.
Select the two paragraphs below the Location headline (beginning with “ SW 5th” and ending with the phone number).
You’ll make the address bold.
Make sure you have the HTML button pressed in the Properties panel, and then click the B button.
Dreamweaver boldfaces the text, but you won’t see any change in CSS Designer. Even though you find the Bold options in two places—the HTML Properties panel and the CSS Font Weight setting (Font→Font Weight→Bold)—they do different things. When you select bold in HTML mode, Dreamweaver inserts the HTML <strong> tag—used to “strongly” emphasize text. But when you choose Font→Font Weight→Bold in CSS mode, Dreamweaver adds CSS code to the page to make the text look bold. It’s a subtle but important difference—in HTML mode, you change the formatting of just the selected text, but in CSS mode, you’d create a style, and that style could change the formatting of all the text that shares the same tag (the paragraph tag [<p>] in this example). (You’ll read more about this in Creating Styles.) In this case, you want to use the HTML <strong> tag to emphasize the selected text.
Repeat the previous step for the two paragraphs below the Hours headline, and then save the page.
You’ll add a few more design touches to the page, but first you should see how the page looks in a real web browser.