Insert text

Now you'll add some text to the page. You can type text directly in the Document window or you can copy and paste text from other sources (such as Microsoft Word or plain text files). Later, you'll use cascading style sheets (CSS) to format the text.

Insert Body Text

In the Files panel, locate the sample_text.txt file (in the cafe_townsend root folder) and double-click the file's icon to open it in Dreamweaver.

You'll notice that this window is in Code view (see Figure 19) and cannot be switched to Design view (the view you've been working in until now) because the file is not an HTML file.

Figure 19. Code view of sample_text.txt

1. In the sample_text.txt Document window, press Control+A (Windows) or Command+A (Macintosh) to select all of the text, and then select Edit > Copy to copy the text.
2. Close the sample_text.txt file by clicking the X in the top-right corner of the document.
3. In the index.html Document window, click once inside the third table cell of the three-columned table (the cell to the right of the column that contains the graphic and the Flash video).

4. Select Edit > Paste.

   The text from the text file appears in the selected table cell (see Figure 20).

   

   Figure 20. Text appearing in the selected table cell

   Depending on your monitor resolution, the three-columned table enlarges to accommodate the text. Don't worry about how this looks right now. In the next tutorial, you'll learn how to use CSS to format the text so that everything fits in the table appropriately.

5. Make sure the insertion point is still inside the table cell where you just pasted the text. If it isn't, click inside the table cell.
6. In the Property inspector (Window > Properties), select Top from the Vert pop-up menu (see Figure 21). This aligns the text you just pasted to the top of the table cell. If you cannot see the Vert pop-up menu, click the expander arrow in the lower-right corner of the Property inspector.

   

   Figure 21. Select Top from the Vert pop-up menu.

7. Save the page.

Insert Text for a Navigation Bar

Next, you'll insert text for a navigation bar. However, the text won't look like a navigation bar until you format it in the next tutorial.

1. Click once in the first column of the three-columned table (the column that is colored reddish-brown).

2. Type the word Cuisine (see Figure 22).

   

   Figure 22. Type the word Cuisine.

3. Press the spacebar and type Chef Ipsum.

4. Repeat the previous step until you've entered the following words with a space between each one: Articles, Special Events, Location, Menu, Contact Us.

   Do not press Enter (Windows) or Return (Macintosh) when you type. Use only the spacebar to separate words and let the words wrap naturally (see Figure 23). The fixed width of the table cell determines how many words fit on a line.

   

   Figure 23. Use only the Spacebar to separate words.

5. With the insertion point still in the first cell of the three-columned table, click the td tag in the tag selector (see Figure 24).

   

   Figure 24. Click the td tag in the tag selector.

6. In the Property inspector (Window > Properties), select Top from the Vert pop-up menu (see Figure 25). This aligns the text you just typed to the top of the table cell.

   

   Figure 25. Select Top from the Vert pop-up menu.

   Note: If you cannot see the Vert pop-up menu, click the expander arrow in the lower-right corner of the Property inspector.

7. Save your page.

Page 6 of 8

Previous Page

Next Page