Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
This chapter is from the book

Creating Content

When you open Dreamweaver, the Document window creates a new, blank page. You can start from this tabula rasa to create your own Web page.

To place text:

  1. Just start typing!

  2. Press Enter (Return) to make a paragraph break, or press Shift+Enter (Shift+Return) to make a line break (Figure 3.15).

    Figure 3.15Figure 3.15 Type or paste whatever text you like in the Document window. After the first line, I pressed Enter (Return) to create a paragraph break; the breaks between the next five lines are line breaks (Shift+Enter).


    You can also copy text from another program and paste it into the Document window.

To create a heading:

  1. Select the text you want to make into a heading by clicking within that paragraph (Figure 3.16).

    Figure 3.16Figure 3.16 Click within the line you want to make into a heading.


  2. From the Property inspector's Format drop-down menu, select a heading from 1 (largest) to 7 (smallest) (Figure 3.17). The heading will become bold and its size will change (Figure 3.18).

    Figure 3.17Figure 3.17 Select a heading size from the Property inspector.


    Figure 3.18Figure 3.18 Now my text has become a heading, and I've selected some lines to make bold.


To make text bold or italic:

  1. Select the text you want to modify.

  2. Click on the Bold or Italic button on the Property inspector.

The text will change appearance (Figure 3.19).

Figure 3.19Figure 3.19 I've made the selected text bold.


Tips

  • Dreamweaver offers common commands, such as copy, cut, paste, and undo, in the Edit menu (Figure 3.20) and on the Standard toolbar (seen in Figure 3.4).

    Figure 3.20Figure 3.20 You can use Dreamweaver as a text editor, too. The Edit menu offers common commands.


  • For more about formatting text in Dreamweaver, see Chapter 8, Fonts and Characters, and Chapter 9, Paragraphs and Block Formatting.

  • By default, Dreamweaver MX uses the <strong> tag for bold text and the <em> tag for italic text. See Using Text Styles, in Chapter 8 for more on the difference between these tags. You can also change your preference in the General panel of the Preferences dialog box.

Laying out a page with tables

On my example page, I'm going to insert a table. Tables are covered in more detail in Chapter 12. Once you insert a table, you can insert, paste, or drag content into its cells.

To insert a table:

  1. From the Document window menu bar, select Insert > Table. The Insert Table dialog box will appear (Figure 3.21).

    Figure 3.21Figure 3.21 These are the settings I've selected for the Insert Table dialog box to create the table shown in Figure 3.22.


  2. Type the number of columns and rows you want to appear in your table. For our example, I'm going to use three columns and two rows.

  3. Specify the width of your table by typing a number in the Width text box, and selecting either pixels or percent from the drop-down menu. To use the table as a page layout, I'm going to specify the width as 100 percent (of the browser window).

  4. Click OK. The Insert Table dialog box will close, and the table will appear on your page (Figure 3.22).

    Figure 3.22Figure 3.22 A basic table. To use it as a page layout, set its width to 100 percent.


To change the layout:

  1. Mouse over a border between two cells or around the outside of the table, and the pointer will turn into a double-headed arrow you can use to drag the borders.

  2. To change the height of the table (Figure 3.23), drag the bottom border. To change the height of the two horizontal rows, drag the border (Figure 3.24).

    Figure 3.23Figure 3.23 You can set a table height by dragging the bottom border down. The table will also expand if you place content into it.


    Figure 3.24Figure 3.24 You can drag the border between rows to create a smaller top row. See Figure 3.26 to see what I've done with this.


  3. To change the width of the columns, drag their borders (Figure 3.25). You can readjust them at any time.

    Figure 3.25Figure 3.25 You can drag the border between columns before or after you put content in them.


TIP

You can draw complex table layouts using Layout view (Chapter 12) or by drawing layers and converting to tables (Chapter 14).

Adding images and media

Images and media files are not embedded in a page; rather, the Web page contains inline links and spacing information so the browser knows where to go get the files and how to display them. In Dreamweaver, you simply place the file where you want it to go on the page, and it writes the linking code.

To place an image:

  1. Click to place the insertion point where you want the image to appear. I'm going to click within a table cell (Figure 3.26).

    Figure 3.26Figure 3.26 Here's my page in progress. I've combined the cells in the top row (see Chapter 12), and I'm going to place an image in the left-hand cell.


  2. From the Document window menu bar, select Insert > Image. The Select Image Source dialog box will appear (Figure 3.27).

    Figure 3.27Figure 3.27 Insert an image into your page by selecting its image file in the Select Image Source dialog box. This is the Windows version; the Mac view is shown in Figure 3.41.


    Browse through the files and folders on your computer and select the image file. The image pathname will appear in the URL text box.

  3. Click OK (Choose). The Select Image Source dialog box will close, and the image will appear on the page (Figure 3.28).

    Figure 3.28Figure 3.28 After I inserted the image, the table resized to accommodate it. I can resize either the image, the table, or both.


To find out more about images and image properties, see Chapter 5, Working with Images. Inserting media objects is very similar, and I cover that subject in Chapter 7.

To make a link:

  1. Highlight the object (text or image) that you want to make into a link (Figure 3.29).

    Figure 3.29Figure 3.29 Highlight the text you want to make into a link.


  2. In the Link text box on the Property inspector, click Browse , and select a file from your local site.

    or

    Type or paste the URL of an Internet link and press Enter (Return).

    Either way, the object will become linked. (Figure 3.30).

    Figure 3.30Figure 3.30 Type the link in the Property inspector's Link text box, or click on Browse to choose a file. Either way, the text will become linked and the link will be displayed in the Property inspector. The tag for a link is <a>.


For more about links, see Chapter 6, Working with Links.

Data Sources?

So my file is a piece of data, and my hard drive or my Web server is a data source, right?

Nope. A data source, as an option on the Select File dialog box, is a database application server such as a Microsoft Active Server or a ColdFusion server. For regular old Web sites with regular old Web servers, select a file from your local site and then upload all required files to your Web server.

If you're a database guru or you have one in your backyard, you must set up your app server to work with Dreamweaver, and then you can select Data Sources and call a file to be sent down from your app server. See the Introduction for more about dynamic sites.

Text from Other Sources

When you paste text from another program, such as an email or word-processing program, it may lose all its formatting, including paragraph breaks. (If you paste text copied from a Web browser or HTML mail program, it should retain its paragraph formatting.)

One way to prevent loss of formatting is to use a word-processing program to save the text as HTML, and then open the file in Dreamweaver. Many word processors, including AppleWorks, Microsoft Word, Nisus Writer, and Corel WordPerfect, include HTML conversion extensions (try File > Save as HTML, or consult the program's help files).

Although these programs write atrocious HTML in some cases, they're just fine for coding paragraph and line breaks.

Another good shortcut is Microsoft Excel's Save as HTML feature, which saves spreadsheets as not-too-terrible HTML tables.

No matter what other program you use to create an HTML file, you can easily clean up the big boo-boos by selecting Commands > Clean Up HTML (or Clean Up Word HTML for MS Word files) and selecting which common mistakes you want to correct. Chapter 4 describes Roundtrip HTML in more detail.

  • + Share This
  • 🔖 Save To Your Account