- Introduction
- Understanding HTML
- Using the Reference Panel
- Using Code View
- Using Code Live View
- Setting Code View Options
- Entering HTML Code
- Using Code Hints
- Working with HTML Head Tags
- Inserting HTML Comments
- Using the Coding Toolbar
- Using Quick Tag Editor
- Using the Tag Inspector
- Using the Tag Chooser
- Opening Related Files
- Navigating to Related Code
- Setting Site Specific Code Hints
- Setting Code Hint Preferences
- Setting Code Format Preferences
- Setting Code Rewriting Preferences
- Setting Code Color Preferences
This chapter is from the book
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
Open the Web page you want to view code.
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.
-
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
- Open the Web page you want to view code.
- Click the Window menu, and then click Code Inspector.
- 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.
-
When you’re done, click the Close button.
)
)