Learn Dreamweaver CS3 - Displaying optional toolbars

Sometimes though it may seem, the Standard toolbar is not displayed by default. To display it, go to View ä Toolbars, and select Standard. Alternatively, right-click any toolbar, and select Standard from the context menu.

Dreamweaver automatically locates the Standard toolbar—which contains common file functions such as New Document, Open, Save, Print, Cut, Copy, and Paste—immediately below the Document toolbar. This isn’t really very helpful, because it means the toolbar disappears as soon as all documents are closed.

However, on Windows you can move the Standard toolbar by positioning your mouse pointer over the double row of dots at the left edge, holding down the main mouse button, and dragging and dropping the toolbar to a new location. If you have a wide monitor, you can place it alongside the Insert bar. Alternatively, dock it directly underneath the Insert bar. It then remains available at all times.

On a Mac, there appears to be no way of undocking the Standard toolbar from the

Document toolbar.

Learn Dreamweaver CS3 - Displaying optional toolbars

Learn Dreamweaver CS3 - Accessing hidden files and folders in Windows

Most Dreamweaver configuration files are hidden by default in Windows XP and Vista. To edit or copy them, you need to enable the option to view hidden files and folders. Once you turn on this option, hidden folders are displayed as dimmed icons to remind you to treat them with care.

In Windows XP, go to Start > My Computer > Tools > Folder Options > View. In Advanced settings, select Show hidden files and folders. In Vista, go to Start > Computer > Organize > Folder and Search Options > View. In Advanced settings, select Show hidden files and folders.

Learn Dreamweaver CS3 - Accessing hidden files and folders in Windows

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 http://validator.w3.org.

• 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

Learn Dreamweaver CS3 - Document window

Learn Dreamweaver CS3 - Setting new document preferences

Click the Preferences button at the bottom left of the New Document dialog box. Alternatively, choose Preferences from the Edit menu (Dreamweaver menu on a Mac), and select the New Document category. Either presents you with the New Document Preferences dialog box.

The dialog box lets you set the following global preferences:

• Default document lets you choose the type of document that will be created when you use the keyboard shortcut for a new document (Ctrl+N/Cmd+N). For this to work, you must deselect the option at the bottom labeled Show New Document dialog box on Control+N/Cmd+N. Otherwise, the dialog box will appear.

• Default extension affects only (X)HTML files. Change the value only if you want to use .htm to maintain unity with the naming convention of older sites.

• Default Document Type (DTD) sets the default DOCTYPE declaration for all new web pages. You cannot set one value for, say, .html and another for .php pages.

• Default encoding lets you choose the character set to be used in all web pages. The Dreamweaver CS3 default is Unicode (UTF-8). (In the Mac version, this is listed as Unicode 4.0 UTF-8.) This is different from previous versions. The checkbox below this option tells Dreamweaver to use the same character set to display existing pages that don’t specify a particular encoding. It doesn’t insert any extra coding in such pages.

• Unicode Normalization Form is required only when using UTF-8 for encoding. It should normally be set to C (Canonical Decomposition, followed by Canonical Composition), and the Include Unicode Signature (BOM) checkbox should be deselected. If you use any other encoding, set Unicode Normalization Form to None.

Choosing the default document type Many people misunderstand the purpose of the DTD (the DOCTYPE declaration before the opening <html> tag). It simply tells the browser how you have coded your page and is intended to speed up the correct rendering of your design. It’s not a badge of honor or magic spell that somehow renders your web pages future-proof. The default setting in Dreamweaver CS3 is XHTML 1.0 Transitional, and this is the appropriate choice for most people when creating a new web page as long as you understand the stricter rules imposed by XHTML.


by David Power

Learn Dreamweaver CS3 - Setting new document preferences

Learn Dreamweaver CS3 - Creating a new document

To create a new document, select File > New or press Ctrl+N/Cmd+N. This opens the New
Document dialog box, which has been considerably revamped.

The biggest change is that, in addition to a completely blank page, you can now select one of 32 CSS layouts. There are also options to change the page’s document type definition (DTD)—by default, Dreamweaver CS3 uses XHTML 1.0 Transitional—and to attach an external style sheet to the page at the time of creation.

By selecting the appropriate option from the menu on the left side of the New Document dialog box, you can also create new templates from scratch or a page from an existing template. The Page from Sample option offers a wide range of preset layouts, but I don’t recommend using them, as many of them use oldstyle presentational elements and deprecated attributes. The final option, labeled Other, contains a variety of pages for programming languages such as ActionScript, C#, and VBScript.


by David Power

Learn Dreamweaver CS3 - Creating a new document

Learn Dreamweaver CS3

Starting up:

When you launch Dreamweaver CS3, the first thing you see after the program has finished loading is the welcome screen. The three columns in the top section provide quick access to a recently opened document (this list is empty the first time you launch Dreamweaver), create a new document or Dreamweaver site (site definition is covered in Chapter 4), or select from a predefined layout. The Dreamweaver Exchange option at the foot of the right column takes you directly to the Adobe Dreamweaver Exchange (www.adobe.com/cfusion/exchange/index.cfm?view=sn120), where you can obtain extensions to add extra functionality to Dreamweaver (many are free; others are sold on a commercial basis). The bottom section of the welcome screen takes you to various parts of the Adobe website and displays what Adobe considers useful information, for example, available updates to the program.



The Dreamweaver welcome screen reappears whenever you close all documents in the workspace and connects to Adobe to see if there are any new announcements. In previous versions, leaving the welcome screen enabled was a resource hog, so many developers chose the Don’t show again option at the bottom left. This means what it says: once you select it, the welcome screen disappears forever. If you want it back, go to Edit > Preferences (Dreamweaver > Preferences on a Mac), choose the General category, and select Show welcome screen. 


Although the welcome screen no longer appears to be a resource hog, you may prefer to switch it off because you get a much better range of options from the New Document dialog box. You can also configure Dreamweaver to reopen on startup any documents that are still open when you close the program. Just select Reopen documents on startup in the General category of the Preferences panel.


by David Power

Learn Dreamweaver CS3