Document toolbar

The Document toolbar contains several buttons and drop-down menus.

The first three relate to the display of our document in Dreamweaver.

In Dreamweaver you have the ability to edit your document in the “Code” view (1), the “Design” view (3) and in both views in the “Split” (2).

Most of us will only use the “Design” view. This is the view where you can literally see how your page will look, for example when you insert an image or type text.

The second possibility is the “Code” view. This view shows you only the code, in this case the HTML code. In this view you can manually make changes, you must know what you do and how to do it. But a little knowledge of HTML can not hurt.

And the third possibility is the “Split” view. This gives us both the “Code” view and “Design” view in the document window. If we change something in the “Code” view, then it is automatically updated in the “Design” view. And if we change something in the “Design” view, it will be automatically adjusted in the “Code” view.

There is also a second way to open the two views.

Select the “Design” view from the document window, click the option “Window” in the menu bar and select “Code Inspector” in the drop-down menu. Or for those who want to go faster, click the F10 key on your keyboard.

This opens the Code view in its own window and gives you more room to work.

Click the F10 key again to close this window.

 

In the Title box (4) of the Document toolbar, you give a title for the page.

By default it is “Untitled Document”, but it’s wise to give a more appropriate title because this is shown in the title bar of the browser and two, when someone puts your site in his favorites, this title appears in his list of favorites.

We also have the “File Management” (5).
When we click it, it opens a pop-up menu where we have the option to upload files to a server or download files from the server.

Since I have no settings entered for the webserver, we can not yet use these options.

 

By clicking on the sixth button “Preview / Debug in Browser”, we can view the page in a browser window, without this we first need to upload to the server.

By clicking on the “Edit Browser List”, edit a primary and secondary browser.

 

The next button (7) is the button to “Refresh Design View”. Click on this when you make changes in Code view and this change has not yet been passed to the “Design” view.

We also have the “View Options” (8).

When you click this button, it opens a drop-down menu with different options depending on what view is currently set.
If you currently have the “Split” view, you will see the options for both views in this menu.

We also have the “Visual Aids” (9).

When you click on this button, it opens a menu with various visual aids to our design. More on this when we use it in this course.

We also have the “Validate Markup” (10). We use this button to control the syntax (read notation) of the source code.

And finally we have the “Check Browser Compatibility” (11).
With this, we verify if the code of your page is compatible in different browsers.
When we click this button, it opens a drop-down menu in which we have the “Settings” to include the browsers. Choosing this opens a dialog where you can set different browsers that you want to verify.

 

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats