This tutorial shows you how to add content to web pages in Macromedia Dreamweaver 8. You can add many different kinds of content to web pages, including graphics, Macromedia Flash files, Macromedia Flash Video files, and text, to name a few. After you’ve added content to your pages, you can preview your work in a browser so that you can see what it will look like on the web.

Insert Images

After you create your page layout, you are ready to add assets to the page. You’ll start by adding images. You can use several methods to add images to a web page in Dreamweaver. In this section, you’ll add four different images to the index page for Cafe Townsend, using various methods.

Replace the image placeholder

1. In Dreamweaver, open the index.html file that you created
2. Double-click the image placeholder, banner_graphic, at the top of the page.

   

3. In the Select Image Source dialog box, navigate to the images folder inside the cafe_townsend folder that you defined as your site root folder.
4. Select a suitable JPEG file like the one shown below and click OK.

   

   Dreamweaver replaces the image placeholder with the banner graphic for Cafe Townsend.

   
   

5. Click once outside the table to deselect the image.
6. Save the page (File > Save).

Insert an image by using the Insert menu

1. Click once inside the third row of the first table (two rows below the banner graphic you just inserted, just above the colored table cells).

   

2. Select Insert > Image.
3. In the Select Image Source dialog box, navigate to the images folder inside the cafe_townsend folder, select the body_main_header.gif file, and click OK.

   NOTE

   If the Image Tag Accessibility Attributes dialog box appears, click OK.

   A long colored graphic appears in the table row. This might look more like background color for the table cell than a graphic, but if you look closely, you’ll see that the graphic has rounded corners. The rounded corner effect gives the lower portion of your page an interesting appearance after you’ve finished adding all of the assets.

   

Insert an image by dragging

1. Click once inside the last row of the last table on the page (just below the colored table cells).
2. In the Files panel (Window > Files), locate the body_main_footer.gif file (it’s inside the images folder), and drag it to the insertion point in the last table.

   NOTE

   If the Image Tag Accessibility Attributes dialog box appears, click OK.

   

3. Click once outside the table and save the page (File > Save).

Insert an image from the Assets panel

1. Click once inside the center column of the three-columned table (the first table cell that is colored light tan).
2. In the Property inspector (Window > Properties), select Center from the Horz pop-up menu, and select Top from the Vert pop-up menu. This aligns the contents of the table cell in the middle of the cell, and pushes the cell’s contents to the top of the cell.

   

   NOTE

   If you cannot see the Vert or Horz pop-up menus, click the expander arrow in the lower-right corner of the Property inspector.

3. Press Enter (Windows) or Return (Macintosh) once to create more space.

   

1. Click the Assets tab in the Files panel, or select Window > Assets.

   Your site assets appear.

   

2. If Images view isn’t selected, click Images to view your image assets.
3. In the Assets panel, select the street_sign.jpg file.

   ABOUT...

   The Assets panel You can use the Assets panel to view and manage assets in your current site. The Assets panel displays assets for the site associated with the active document in the Document window. You must define a local site before you can view assets in the Assets panel. The Assets panel provides two views: The Site list shows all of the assets in your site, including colors and URLs that are used in any document in your site. The Favorites list shows only the assets you’ve explicitly chosen. To add an asset to the Favorites list, select the asset in the Site list, and then select Add to Favorites from the Options menu in the upper-right corner of the Files panel. When you click an asset in the Assets panel, the preview area displays the asset you selected. To change the size of the preview area, drag the line that separates the preview area from the asset column headings. .

4. Do one of the following:
   • Drag the street_sign.jpg file to the insertion point in the center table cell.
   • Click Insert at the bottom of the Assets panel.

     NOTE

     If the Image Tag Accessibility Attributes dialog box appears, click OK.

   The street_sign.jpg graphic appears on the page.

   

5. Click once outside the table to deselect the image.
6. Save the page.

Insert and play a flash file

Next, you’ll insert a Flash file that plays a photographic slide show of Cafe Townsend’s featured food items. The Flash file you’ll insert is a flexible messaging area--or FMA--file. An FMA is a common type of Flash application that displays an informational message to the audience. The message can change based on the needs of the business. For example, if Cafe Townsend is holding a special event, the FMA could easily change (without affecting the rest of the web page) to display information about the event, instead of featured food items.

To insert the Flash FMA file, you need to insert HTML code that embeds the file in the Dreamweaver page. The easiest way to do this is to insert the SWF file (the exported Flash Movie file) into the page. When you insert a SWF file in Dreamweaver, Dreamweaver writes all of the necessary Flash HTML code for you.

1. With the index.html page open in the Dreamweaver Document window, click once inside the second row of the first table.

   This is the table row immediately below the banner graphic you inserted in the previous section.

2. In the Property inspector (Window > Properties), select Center from the Horz pop-up menu, and select Middle from the Vert pop-up menu.

   This places the contents of the table cell in the middle of the cell.

   

   NOTE

   If you cannot see the Vert or Horz pop-up menus, click the expander arrow in the lower-right corner of the Property inspector.

3. Select Insert > Media > Flash.

   In the Select File dialog box, browse to the flash_fma.swf file (it’s in the cafe_townsend root folder of your site), select the file, and click OK.

   If the Object Tag Accessibility Attributes dialog box appears, click OK.

   

   A Flash content placeholder, rather than a scene from the FMA itself, appears in the Document window. This is because the HTML code is "pointing" to the SWF file flash_fma.swf. When a user loads the index.html page, the browser plays the SWF file.

   ABOUT...

   About Flash files When you build assets in Macromedia Flash, you work in FLA files, the default file type for the Flash application. FLA files are designated by a .fla extension. For example, if you are working on an animated logo for a website, the filename of the Flash file might be animated_logo.fla. When you’ve finished working on a FLA file in Flash, you must export the file to a format that can be played on the web in Flash Player. When you export FLA files in Flash, they are converted to SWF files and designated by a .swf extension. SWF files (not FLA files) play Flash content in a web browser and are the file type you must insert into a web page that you are building with Dreamweaver.

1. The Flash content placeholder should remain selected after you insert the SWF file, as long as you don’t click anywhere else on the page.

   If it’s not selected, select the Flash content placeholder by clicking it.

2. In the Property inspector (Window > Properties), click Play.

   

   NOTE

   If you cannot see the Flash Play button, click the expander arrow in the lower-right corner of the Property inspector.

   Dreamweaver plays the Flash file in the Document window, showing you what site visitors will see when they view the page in a browser.

   
   

3. In the Property inspector, click Stop to stop playing the Flash file.
4. Save the page.

Insert Flash Video

Next you’ll insert a Flash Video file, using the asset provided.

1. With the index.html page open in the Dreamweaver Document window, click once above the graphic that you placed in the center column of the three-columned table.

   In the previous section, you created some space before you inserted the graphic--this is where you should click.

   

2. Select Insert > Media > Flash Video.
3. In the Insert Flash Video dialog box, select Progressive Download Video from the Video type pop-up menu.

   ABOUT...

   About Flash Video The Insert Flash Video command in Dreamweaver lets you insert Flash Video content in your web pages without using the Flash authoring tool. The command inserts a Flash component, which displays the Flash Video content you select, as well as a set of playback controls, when viewed in a browser. The Insert Flash Video command gives you the following options for delivering video content to your site visitors: Progressive Download Video downloads the Flash Video (FLV) file to the site visitor’s hard disk and then plays it. Unlike traditional "download and play" methods of video delivery, however, progressive download allows the video file to start playing before the download is complete. Streaming Video streams the Flash Video content and plays it on a web page immediately. To enable streaming video on your web pages, however, you must have access to Macromedia Flash Communication Server, the only server that can stream Flash Video content.

4. In the URL text box, specify a relative path to the cafe_townsend_home.flv file by clicking Browse, navigating to the cafe_townsend_home.flv file (located in cafe_townsend root folder of your site), and selecting the FLV file.

   

5. Select Halo Skin 2 from the Skin pop-up menu.

   A preview of the selected skin appears below the Skin pop-up menu. The Skin option specifies the look and feel for the Flash Video component that will contain the Flash Video content.

6. In the Width and Height text boxes, do the following:
   • In the Width text box, type 180.
   • In the Height text box, type 135 and press Enter (Windows) or Return (Macintosh).

     

     TIP

     You can click Detect Size to determine the exact width and height of the FLV file. Sometimes, however, Dreamweaver cannot determine the dimensions of the FLV file. In such cases, you must manually enter the width and height values.

   The value in the Width and Height text boxes specifies the width and height in pixels of the FLV file. You can adjust these values arbitrarily to change the size of the Flash Video on your web page. When you increase the dimensions of a video, the picture quality of the video usually decreases.

   NOTE

   "Total with skin" is the width and height of the FLV file plus the width and height of the selected skin.

7. Leave the default selections for the remaining options:

   Constrain maintains the same aspect ratio between the width and height of the Flash Video component. This option is selected by default.

   Auto play specifies whether to play the video when the web page is opened. This option is deselected by default.

   Auto rewind specifies whether the playback control returns to starting position after the video finishes playing. This option is deselected by default.

8. Click OK to close the dialog box and add the Flash Video content to your web page.

   The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash Video content on a web page. (You may need to click the Refresh button in the Files panel to see the new files.) These files are stored in the same directory as the HTML file to which you’re adding Flash Video content (in this case, the cafe_townsend root folder). When you upload the HTML page containing the Flash Video content, Dreamweaver uploads these files as dependent files (as long as you click Yes in the Put Dependent Files dialog box).

9. Save the page.

Insert body text

1. 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, and cannot be switched to Design view (the view you’ve been working in until now) because the file is not an HTML file.

   

2. 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.
3. Close the sample_text.txt file by clicking the X in the top-right corner of the document.
4. 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).
5. Select Edit > Paste.

   The text from the text file appears in the selected table cell.

   

   Depending on your monitor resolution, the three-columned table widens 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.

6. 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.
7. In the Property inspector (Window > Properties), select Top from the Vert pop-up menu. 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.

   

8. 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.

   

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. The fixed width of the table cell determines how many words fit on a line.

   

5. With the insertion point still in the first cell of the three-columned table, click the <td> tag in the tag selector.

   

6. In the Property inspector (Window > Properties), select Top from the Vert pop-up menu.

   This aligns the text you just typed to the top of the table cell.

   

   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.

Create links

A link is a reference, inserted in a web page, that points to another document. You can turn almost any kind of asset into a link, but the most common kind of link is a text link.

You can create links at any stage of the site-creation process. In this section, you’ll create links for the navigation bar, even though you haven’t formatted the text into the form of a navigation bar yet.

The cafe_townsend site root folder contains a finished HTML page that you can link to (a menu page for Cafe Townsend). You’ll use this page for all of the links in the navigation, even though you would have distinct pages for each of these links if you were building a real site.

1. With the index.html page open in the Document window, select the word Cuisine that you typed in the first cell of the three-columned table. Be careful to select the word Cuisine only, and not the space after it.

   

2. In the Property inspector (Window > Properties), click the folder icon next to the Link text box.

   

3. In the Select File dialog box, browse to the menu.html file (which is in the same folder as the index.html file), and click OK (Windows) or Choose (Macintosh).
4. Click once on the page to deselect the word Cuisine. The Cuisine text is underlined and blue, indicating that it’s now a link.
5. Repeat the previous steps to link each word or set of words that you typed for the navigation. You want to create six more links: one for Chef Ipsum, Articles, Special Events, Location, Menu, and Contact Us.

   Link each word or set of words to the menu.html page, and be careful to avoid the space before and after the words or set of words when you create your links. This is only a set of dummy links; in a real-world site, you would link each word in the navigation to its own distinct page.

   NOTE

   Links don’t work when you click them in the Document window in Dreamweaver; links work only in a browser. To make sure your links work correctly, preview your page in a browser.

6. Save your page.

Preview your page in a browser

The Design view gives you a rough idea of what your page will look like on the web, but you must preview the page in a browser to see the definitive end result. Though browsers in general produce the same results, each browser version can display HTML pages somewhat differently. Dreamweaver attempts to produce HTML that will look as similar as possible from one browser to another; but sometimes differences can’t be avoided. Thus, previewing your work in a browser is the only way for you to see what your site visitors will see after you publish your pages.

1. Make sure the index.html file is open in the Document window.
2. Press the F12 key (Windows) or Option+F12 (Macintosh).

   Your primary browser starts if it’s not running already and displays the index page.

   

   NOTE

   Dreamweaver automatically detects your primary browser and uses that for previewing. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and select File > Preview in Browser > Edit Browser List. When the Preview in Browser Preferences dialog box appears, add the correct browser to the list. For more information, click the Help button in the Preferences dialog box.

3. (Optional) Switch back to Dreamweaver to make any necessary changes.

   Then save your work and press the F12 key again to make sure your changes took effect.