| Setting up the document hierarchy by defining the order of page content is an important step in the process of developing your site. In this exercise, and throughout this lesson, you'll be defining the architecture of the material through a number of HTML formatting options, also known as structural markup. The correct way to use this kind of markup is to organize and structure contentnot for the visual styling of material. HTML formatting is extremely limited in terms of designyou don't have a great deal of control over size, spacing, and alignment because the options are intended for describing document hierarchy, not to create the graphic appearance. You'll work on visual treatments and adjustments to the look of the content in later lessons. It is necessary to develop the structure, as you will begin doing in this exercise, before getting into the aesthetic details. Note For specific control over the appearance, you need to use Cascading Style Sheets (CSS) to define the look and placement of elements on your page. CSS will be covered in Lesson 4. 1. | In the index.html Document window, place the cursor in the text Yoga Sangha located at the top of the page. This text is the primary title for this page. | | | 2. | From the Format pop-up menu in the Property inspector, choose Heading 1. You defined the text format as a Level 1 heading. The text has been formatted as a block-level element. All options chosen from the Format menu apply to an entire blocka heading or any other type of block-level formatting cannot be applied to a single word or to a portion of a block. As a result, you don't have to select the text to apply a headingall text contained in the text block automatically uses the formatting you select from the Format menu.
Other block-level elements include paragraphs, lists, horizontal rules, and the alignment options available in the Property inspector. You'll learn how to work with these formatting tools throughout this lesson. Headings are displayed in larger or bolder fonts than normal body text. HTML has six levels of headings, numbered 1 through 6. Heading 1 has the largest font size; Heading 6 has the smallest. Tagging a text block as a heading automatically generates a space around the heading, which varies according to the heading you select. You can't control this spacing unless you use CSS to control formatting.
Headings can be useful for splitting up your content into sections and calling attention to certain portions of the page. Users generally scan Web pages quickly and don't read everything. Taking the ways in which users interact with the Web into account while designing your site helps you develop pages that are much easier for visitors to use. Formatting your text with headings and the other techniques used throughout the rest of this lesson enable you to differentiate between your content and create a clear hierarchy. Note In many documents, the first heading on the page is identical in content to the title. In multiple-part documents, the text of the first heading should be related information, such as a chapter title. The title you set for the entire page should identify the document in a wider context (including both the book title and the chapter title, for example). | | | 3. | Use the Format menu in the Property inspector to set the rest of the document headings. The following lines should use Heading 5: Discover how playful and open-hearted yoga can be. Intro to Anusara Workshop With Sierra Anusara Yoga Immersion With Katchie Ananda and Jayne Hillman The following lines should use Heading 3: Welcome to Yoga Sangha Announcements (News, Upcoming Events, etc.) Feature: The Eight Limbs of Yoga Schedule Contact Us Your document will now be formatted with all the appropriate headers, and should look like the following example.
| | | 4. | Place the cursor at the end of the first line of the document and press Return (Macintosh) or Enter (Windows). You have just created another line below the Yoga Sangha titlethis line is part of a new text block. By default, the new text block is formatted as a paragraph. Each new paragraph is its own text block. | 5. | Type Anusara Yoga in the Heart of San Francisco's Mission District. The paragraph format is generally used for regular body text and it is set apart from other text blocks by a certain amount of spacing: A blank line separates the new text block from the previous one. You can't control this spacing unless you use CSS to control the formatting. Note You can select Paragraph from the Format menu in the Property inspector, or use the keyboard shortcut Cmd+Shift+P (Macintosh) or Ctrl+Shift+P (Windows) to set the formatting of a text block to a paragraph. | 6. | Save the file. |
Whenever you modify your document, notice the asterisk (*) that Dreamweaver inserts near the filename at the top of the Document window. This asterisk indicates that the file has been modified but not yet saved. The asterisk disappears after you save the document. Be sure to save your documents often to prevent the loss of work. |