Home > Articles > Graphics & Web Design > Dreamweaver & Flash

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

This chapter is from the book

Using Code View

Dreamweaver utilizes three document code views: Code and Design, Code, and Split Code. The Code and Design view gives you a look at the code and the visual design, the Code view gives you a straight look at the HTML code of your Web page, and the Split Code view gives you a multi-pane look at the HTML code. When you work in any of the code views, you’re going back to the basics of Web design... the actual code that makes it all happen. Some designers never look at the code, and some designers claim that you can’t be good at creating Web pages without knowing the code. To be honest, I’m in the second camp. I believe that to really understand the design of a Web page, you need to know how the code makes a page function.

Access the Code View

  • green-circle-1.jpg Open the Web page you want to view code.
  • green-circle-2.jpg Access the Code view using one of the following methods:
    • Code and Design View. Click the View menu, and then click Code and Design, or click the Split View button on the document window.

    • Code View. Click the View menu, and then click Code, or click the Code View button on the document window.

    • Split Code View. Click the View menu, and then click Split Code.

    The document view changes to display the current page code.

  • green-circle-3.jpg To change the placement of content in a split screen, click the View menu, and then click Split Vertically (horizontal when unchecked), or Design View on Left or Design View on Top.

View Code in a Separate Window Using Code Inspector

  • green-circle-1.jpg Open the Web page you want to view code.
  • green-circle-2.jpg Click the Window menu, and then click Code Inspector.
  • green-circle-3.jpg Use the toolbar to select from the following options:
    • File Management. Get, put, check in or check out a file.

    • Preview/Debug In Browser. Preview or debug the file in a browser or Device Central.

    • Refresh Design View. Refreshes Design view to reflect code changes in Code view.

    • Reference. Opens the Reference panel.

    • Code Navigation. Allows you to move quickly in the code.

    • View Options. Allows you to change the way code appears in Code view.

  • green-circle-4.jpg When you’re done, click the Close button.
  • + Share This
  • 🔖 Save To Your Account