Adobe CS5 Dreamweaver HTML Basics - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Creating a web page in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver is a straightforward task. Understanding the basic HTML it creates requires a little explanation. The web page can be as complex or simple as you want and both types are equally effective if created properly.

Dreamweaver works in the background to ensure that your new page works in most all recent versions of common web browsers, such as Firefox, Internet Explorer, and Safari. Lots of code is created to help the web browser recognize that this is HTML and which version of HTML it uses.

By default, Dreamweaver uses the XHTML 1.0 Transitional standard every time you create a new HTML page. XHTML combines the strictness of XML (Extensible Markup Language) with HTML tags to create a language that works dependably and consistently across web browsers and new devices (such as cell phones and PDAs) alike.

  1. To create a blank page, choose File→New→Blank Page→HTML→<none> and then click Create.

    A blank, untitled HTML page appears. It has no formatting until you add tables or layers.

  2. Type some text (say, your name) on the page and click the Code button on the Document toolbar.

    When you type on the page in the document, text appears on the web page. But there’s much more to it than that.

  3. Select Split view by clicking the Split button on the Document toolbar.

    This action displays both Design and Code views simultaneously, so that you can see how your changes affect HTML behind the scenes.

    Working in Split view helps you see how your page elements are created and formatted with HTML tags.
    Working in Split view helps you see how your page elements are created and formatted with HTML tags.
  4. Select the text.

  5. Select the Text option from the Common drop-down list on the Insert panel.

    Suppose you then choose B (for bold) to bold the selected text. In the code view of your page, you would see that the <strong> tag was added before the text and the </strong> tag was added after the text.

You can change the orientation and arrangement of the views in Split View. To switch the Design view from the right to the left, choose View→Design View on Left. To arrange the views vertically, choose View→Split Vertically. Note: You can reverse these options just as easily from the same options on the View menu.