Working with web pages

An alternative to using the Dreamweaver Start Page to create new pages is to use File > New or Ctrl+N as you would in FrontPage. This launches the New Document dialog box (see Figure 15), which includes more choices than a FrontPage user is used to seeing in the New Page dialog box. Dreamweaver 8 includes a collection of "Starter Pages" complete with CSS layout and external stylesheet as well as CSS-based page designs.

Figure 15. New Document Wizard

If you use one of the starter pages, you will be prompted to save the necessary files in your site (see Figure 16).

Figure 16. Starter pages including images and stylesheet

Once you have created and saved a page, all of the colors and images will be available in the Assets Tab of the Files panel (see Figure 17). If you have ever wished for a way to know all the colors, images, hyperlinks and other objects in your website, this panel that keeps track of them for you.

Figure 17. Asset tab in the Files panel

Creating styles

You can use the Dreamweaver Property inspector to create simple styles for presentation, much as you would create font tags in FrontPage. Styles created with the Property inspector will begin with "style" and be sequentially numbered. Styles are better than font tags, since you need to define the style only once and you can then reuse it to help your web page load faster. Applying an existing style is as simple as selecting it from the Style pop-up menu in the Property inspector (see Figure 18). These styles are written in the head section of the page.

Figure 18. Existing classes listed in the Style pop-up menu with the style displayed

Advanced styles such as link states can be created using the New Style Wizard launched from the CSS panel. The CSS panel (see Figure 19) enables you to see all the styles available for your use, whether in a style block on your page or in an external stylesheet linked to the web page.

Figure 19. Creating and editing styles using the CSS panel (the Link icon to the left of New CSS Rule attaches an external stylesheet)

This launches the New CSS Rule wizard (see Figure 20) to choose the type of CSS selector you wish to create.

Figure 20. Rollover effects without JavaScript using pseudoclasses

When you use the New CSS Rule wizard, you have the option to select "Define in" and choose an existing stylesheet to create styles for use on multiple pages. CSS properties not available in the Properties inspector can be defined in the CSS Rule Definition dialog box (see Figure 21). The CSS properties are grouped according to categories.

Figure 21. Creating CSS rules

While you can edit your styles using the pencil button in the bottom right of the CSS Styles panel to open the CSS Rule Definition dialog box, it is faster to select the style in the CSS Styles panel and modify an existing property or add a new property directly in the inspector by using the pop-up menus (see Figure 22).

Figure 22. Adding or modifying CSS properties using pop-up menus instead of the CSS Rule Definition dialog box

To help you with your site, Dreamweaver includes a Reference panel (see Figure 23) with O'Reilly CSS, HTML, and supported scripting language reference guides. Select Window > Reference to open these guides.

Figure 23. Coding help available directly within Dreamweaver

Using images

You can insert an image into your web page in multiple ways. They are:

1. In the Files panel (see Figure 24), you can drag and drop the image from the Files tab on to your page; from the Assets tab, you can also drag and drop, or right-click and select "Insert." The Assets tab also shows thumbnail previews to help you select the right image.

   

   Figure 24. Viewing thumbnails of images to select the one to add to your page

2. With your cursor on your page where you want the image to appear, select the Common category on the Insert bar and use the Image pop-up menu (see Figure 25) to launch the browse box and select your image.

   

   Figure 25. Using the Insert bar's Common category (shown as tabs)

3. Finally, you can use the Insert menu or keyboard shortcut of Ctrl+Alt+I.

Whichever method you choose to add images to your web page, you will be prompted to add alternate text for accessibility (see Figure 26). Make sure that you include short descriptive text to convey the same information as is contained in your image to the visitor who may not be able to see it.

Figure 26. Using an alt attribute for meaningful content

Simple image changes

While it is always best to use a graphics editor such as Fireworks to edit your web images, as in FrontPage you can make minor edits in Dreamweaver. You can crop, adjust brightness or sharpen using the buttons under the alt attribute textbox in the Properties inspector (see Figure 27).

Figure 27. Including the height and width of images to speed page loads

To optimize or edit your image, use Fireworks or another graphics editor.

Hyperlinks

To create a hyperlink, select the text, image, or other object you wish to use as a link. In the Property inspector (see Figure 28) you can select the circle with the cross hairs and drag with a line (hold the left mouse button) to the file to which you want to link. When the file is outlined let go of the left button.

Figure 28. Dragging to select the link target

If you prefer to browse to the link target, use the folder button to the right of the crosshairs; or, from the Insert bar > Common category, use the link button (see Figure 29).

Figure 29. Hyperlinks just one of the many tasks available from the Insert bar (shown as tabs)

Using the Insert bar or Insert > Hyperlink command (see Figure 30) to create your hyperlink gives you the most options to enhance your links, including the ability to add a title in WYSIWYG mode.

Figure 30. Titles providing valuable information to the visitor

Use the method that suits your workflow and needs best.

Tables

Dreamweaver has a comprehensive set of table tools, similar to the FrontPage Table Properties, launched by using the Table icon on the Insert bar > Common Category and selecting the table button (see Figure 31), or by selecting Insert > Table.

Figure 31. Insert bar's Common category (shown as a menu) to select Table

Dreamweaver enables you to add a caption and summary to your data table at the time it is created, as well as set a column, row, or both as header cells in one place (see Figure 32).

Figure 32. Tools for data tables

Table background images and other display properties are set in the Property inspector (see Figure 33).

Figure 33. Assigning an ID, applying a class, or setting other display properties in the Properties inspector when a table is selected

In Dreamweaver you can change the height or width of a cell by dragging the side or bottom borders or by changing the size in the Property inspector (see Figure 34).

Figure 34. More options available in the Property inspector for table cells

You can also change table cells to table headers using the checkbox in the Properties inspector.

Page properties

You may have noticed the button for Page Properties in the Property inspector for table cells. The same button appears if you select the body element or if you right-click in Design view. The dialog box (see Figure 35) that opens when you select Page Properties enables you to set page-level defaults for your basic presentation.

Figure 35. Page properties created here use CSS for presentation

Unlike the page properties created in FrontPage when you use the FrontPage Page Properties wizard, Dreamweaver uses CSS for presentation. This makes it easy to move your presentation information to an external stylesheet for use on other pages in your site. Since Dreamweaver writes the CSS styles for you, it is no more difficult to use CSS for presentation than it is to use font elements created in FrontPage 2003.

Page 4 of 6

Previous Page

Next Page