Saturday, December 25, 2010

Learn Dreamweaver CS3 - Document window

By default, Dreamweaver displays each web page in a tabbed interface. Tabs are created left to right in the same order as the pages are opened, but you can drag and drop them into any order. You can also tidy up the workspace by right-clicking any tab to reveal a context menu that, among other things, lets you close the individual tab, close all tabs, or close them all except the current one.

Document toolbar Running across the top of the Document window is the Document toolbar. The three buttons on the left are the most important, as they let you switch quickly between Code view, Design view, and a combination of both called Split view, as shown in Figures 1-4 and 1-5. The Live Data view button is displayed only in dynamic pages, such as a PHP page. It processes server-side code to show you a good approximation of what the page will look like when parsed by a web server. Before you can use Live Data view, you need to define a testing server.

The following list briefly describes the other options on the Document toolbar:
  • Title: This is where you enter the document title that is displayed in the browser title bar.
  • File management: This offers a quick way of uploading and downloading the current file to and from your remote server.
  • Preview in browser: This displays the current page in a browser or Device Central.
  • Refresh: This refreshes Design view. It’s used only when you’re working in the underlying code in Split view. Otherwise, Design view refreshes automatically.
  • View options: This turns rulers and guides on and off.
  • Visual aids: This controls the CSS visual aids described in “Using visual aids to understand your CSS structure”.
  • Validate: This option checks your document, selected files, or the entire site against World Wide Web Consortium (W3C) standards. Dreamweaver’s validator misses some errors, particularly when checking pages against a Strict Document Type Definition (DTD). Double-check against the official W3C Markup Validation Service at
  • Check page: This runs checks for browser compatibility and accessibility.
Code view This is where you work directly with all the XHTML, PHP, and other code that controls your web page. Even if you rarely touch the code yourself, it’s important to understand what’s happening in Code view. PHP code inserted in the wrong place will bring your page down like a house of cards.

Design view This renders your page as it should look in a standards-compliant browser. The CSS rendering in Dreamweaver CS3 is generally very accurate, but don’t fall into the trap of regarding Dreamweaver as a WYSIWYG (what you see is what you get) web page builder. It’s an excellent visual design tool, but you need a solid understanding of XHTML and CSS to use it to its best advantage.

Tag selector The status bar at the bottom of the Document window displays a hierarchical view of the document indicating where the insertion point is at any given moment. Clicking one of the tags in the Tag selector highlights the element in both Design view and Code view. This is extremely useful for editing an element or applying a dynamic behavior to it. Right-clicking a tag in the Tag selector brings up a context menu with a useful selection of editing options, including the ability to add an ID or a class to the element. The Tag selector fulfills a similar role to the GoLive Markup Tree bar.

Property inspector This context-sensitive panel gives direct access to all the main attributes
of the currently selected element. It’s equivalent to the Inspector palette in GoLive.

Panel groups The panel groups, which are displayed by default on the right of the screen, give you access to more detailed or specialized features. Clicking a panel group’s title bar toggles it open and closed. The most important one is the Files panel, which not only displays the file hierarchy of your site but also ensures that all internal links are updated and controls uploading and downloading to and from your remote server.

by David Power

Related Posts Plugin for WordPress, Blogger...

Popular Posts

Share |