10 Dreamweaver Power Tips

10 Dreamweaver Power Tips




Here 10 tips for using Dreamweaver to its fullest. They coverorganizing the program’s panels, working efficiently with HTML,properly working with a site’s files, and more



Dreamweaver is a powerful, full-featured tool for building large andcomplex Web sites. Many of its tools help you build Web sites fasterand more efficiently. But are you using Dreamweaver to its fullest? Inthis article, I present 10 tips that I wish someone had given me when Istarted working with Dreamweaver. #1: Put the Insert Bar in Its Place
Like most computer programs, Dreamweaver has a lot of different windowsand panels. One of the most useful is the Insert panel, which lets youquickly add HTML tags to a page with a click of the mouse.Unfortunately, the Insert panel normally stuck at the right edge of thescreen, fighting for space with other useful panels like the Filespanel and the CSS styles panel.You can change this panel into a horizontal, tabbed bar that appearsjust below Dreamweaver's menus (on Macs) or to the right of the menus(on Windows). There are two ways to move the Insert panel: 1. Choose "Classic" from the Workspace layout menu in the application toolbar (circled in Figure 1.) 2. Grab the Insert panel's tab and drag it into the application toolbar.Either of these methods will create a horizontal Insert Panel as pictured in Figure 1.Figure 1: Choose from 8 pre-set workspaces, or, better yet,create your own arrangement of panels and save them as a customworkspace.


#2: Save Your Workspace
In the previous tip, I pointed out the Workspace layout menu.Dreamweaver comes with eight workspaces that are simply differentarrangements of panels: some hidden, some moved to other locations onthe screen. Selecting a workspace re-arranges Dreamweaver's panels onthe screen. Odds are that you'll want to customize the layout of your workspace as well--for example, if you don't use Adobe's Business Catalyst,you should hide that panel. Or if you have a really wide monitor, youmight want to move the very-useful Files panel to the right edge ofyour screen, convert the Insert panel into an Insert bar (see previoustip) and leave other panels on the right edge. To move a panel, grab its tab and drag it across the screen. If youdrop the tab somewhere in the middle of the screen, it turns into afloating panel that covers other panels as well as the document window.However, if you drag a panel's tab to the left, right, or bottom edgesof the screen until a solid blue line appears along that edge and thenlet go, you dock the panel to that edge. So to move the Files panel tothe left side of the screen, just drag its tab to the left until a blueline appears and let go. Once you've organized your panels, go to the Workspace layout menuand choose "New Workspace…" (See Figure 1 above.) You'll then beprompted to type a name for the workspace and save it. From this pointon, it's no sweat if you accidentally move panels around or someoneelse uses your computer and changes the layout. You can always returnto your workspace layout by selecting its name from the Workspacelayout menu.Quick Tip: You can focus just on your Web page andhide Dreamweaver's panels and Property inspector by pressing the F4key. Pressing F4 brings them back. This is a great trick when you'reworking on a small screen and you want to hide the panels while workingon a Web page.#3: Always Define a Site
Many people new to Web design think of a Web page like they think of aMicrosoft Word document: Open the page in Dreamweaver, make edits, saveit, and you're done. However, being a Web designer isn't about editinga single file, it's about building a site and managing a collection ofinter-related files that include Web pages, images, JavaScript files,and CSS files. People who don't understand this complexity skip the single most important step in using Dreamweaver: setting up a site. Dreamweaver's site setup process is straightforward but veryimportant: It tells Dreamweaver where your site's files are and letsyou tap into Dreamweaver's many site-management tools for transferringfiles to your Web server, checking for broken links, rapid sitebuilding and updating with templates and more. Most importantly, ithelps make sure Dreamweaver correctly links files and helps avoidbroken links between pages and other files in your site.The site setup process is greatly simplified in Dreamweaver CS5:1. Choose Site > New Site. The Site Setup window appears (see Figure 2).Figure 2: The Site Setup Window.



2. Type a name in the Site Name field. This can be anything you'dlike: "My Site," "Client A Site," and so on. This name is only used byDreamweaver.3. Click the folder icon (circled in Figure 2). A "Choose Root Folder" window appears. 4. Navigate to and select your site's main folder: that's the onethat holds your site's home page. This is known as the "local sitefolder." It's best if you keep only your site's files (Web pages,images, CSS files and so on) here. Photoshop files, Word documents fromyour client, and all other non-Web files should not be in this folder.5. Back in the Site Setup window, click the Save button. Dreamweavernow knows about all the files in your site. The site's name will appearin a drop-down menu in Dreamweaver's Files panel. You can set upmultiple sites and switch between them as you work by selecting thesite's name from this drop-down menu.#4: Use the Files Panel to Manage Files
When you set up a site in Dreamweaver, all of the site's files appearin the Files panel (see Figure 3). Double-clicking a Web page in theFiles panel opens it for editing. But you can do a lot more with theFiles panel.Figure 3: You can resize columns in the Files panel by dragging the line separating the columns (circled.)



Dragging a file into a folder moves that file; to rename a file,click it once, pause, then click again and the name highlights, readyfor editing. So far, this may sound like something you would donormally with any file on your computer using the Finder or WindowsExplorer. However, Web pages are different than regular files. Usuallya Web page will have links to other Web pages, display images in thesite, and use CSS styles from an external style sheet file. Renaming aWeb page, CSS file, or image using the Mac Finder or Windows Explorerwill end up breaking links and you site won't work.However, Dreamweaver knows all about your site, its files, and howthey're related. That was the whole point of tip 3! When you move orrename a file using the Files panel, Dreamweaver notifies you and givesyou the option "Update Files". Always click the "Update" button so thatyour links don't break. #5: Make Room in the Files Panel
Sometimes the Files panel drives me nuts. If I have a large site withseveral levels of folders, the panel frequently cuts off the names offiles. For example, in Figure 3 above, notice that there's a folderwhose name (at least what you can see of it) starts with SpryA, andinside it are two files named only S… Not very helpful. The problem is that this panel also includes other information, suchas the file size and type, that takes up horizontal space in the panel.Fortunately, you can hide all columns except the file and folder names:1. Choose Site > Manage Sites. The Manage Sites window appears.2. Select your site from the left-hand list of sites and click theEdit button. (Note that you have to do this for each site becausethere's no global setting.) The Site Setup window appears (see Figure4).Figure 4: Use the File View Columns options in the Site Setup window to hide unwanted information from the Files panel.



3. Expand the list of "Advanced Settings" and select File View Columns from the left hand list of options. 4. From the list of columns select the Size column and click theedit icon (the little pencil). A small window appears (see Figure 5).Figure 5: You can hide columns from the Files panel and even change their alignment (left, center, right).



5. Uncheck the "show" box, then click Save.6. Repeat steps 4 and 5 for each column you wish to hide. I recommend hiding all columns except for the Name column. 7. Click the Save button one last time to exit the Site Setupwindow, then click the Done button to exit the Manage Sites window.Only the name of the files should now appear in the Files panel.Dreamweaver still may not display the entire name, so the last step isto drag the column divider line (circled in Tip #4's Figure 3) to theright so that the Name column takes up all of the horizontal space. #6: Show Line Breaks
When you copy text from an e-mail, text document, or Word file andpaste it into a Web page in Dreamweaver, you'll often end up with linebreak characters at the end of lines and paragraphs. The line breakcharacter in HTML is <br>. It marks the end of a line, so thetext that follows it drops down to the next line. Because the<br> tag is invisible, it's hard to find and remove these peskycritters.While Dreamweaver doesn't normally highlight these invisible linebreaks, there is a preference option you can set to make the appdisplay a small yellow icon indicating a line break (see Figure 6). Figure 6: You can make Dreamweaver display line breaks (which are normally invisible) as small gold shields.



To turn this feature on:1. Choose Dreamweaver > Preferences (Mac) or Edit > Preferences (Windows) to open the Preferences window.2. Select Invisible Elements from the left-hand list of categories.3. Check the "Line breaks" box (circled in Figure 7).Figure 7: Dreamweaver can display small gold shield icons for HTML that's normally invisible on a Web page.



4. Click the OK button to exit the Preferences window.Now that the line breaks are visible, you can easily remove them. Todelete a line break, select the gold shield in your document and pressthe delete key. This joins the two lines--the one before the line breakand the line after it--into a single line. You can also remove the linebreak and create a new paragraph by selecting the line break icon andhitting the return key. This creates a new paragraph following the linethat contained the line break.#7: Remove the Browser Navigation Bar
Dreamweaver CS5 added a browser navigation toolbar to the Documentwindow (see Figure 8). This feature is intended to be used withDreamweaver's Live View option, which you reach by clicking the LiveView button in the document toolbar. Live View lets you view the pagethrough Webkit (the engine behind the Safari and Chrome Web browsers)so you can see what the page would look like in a Web browser.Figure 8: The Browser Navigation toolbar is good for some typesof sites, like dynamic, server-side generated pages like a WordPresssite, but it just takes up space when you're working on a static Website.



While in Live View you can Command-click (Ctrl-click for Windows) ona link and navigate to that page. The Browser navigation toolbar showsthe location of the new page and has back and forward buttons tonavigate through the pages you've looked at in Live View. Thenavigation toolbar takes up valuable vertical screen real estate but isuseful only in limited situations.To hide this toolbar, choose View > Toolbars and deselect the"Browser navigation" option. Or right-click (ctrl-click for Macs) onthe toolbar and uncheck the "Browser Navigation" option as shown inFigure 8.#8: Use the Tag selector
Precision is important. When you apply a CSS class style to aselection, add a Dreamweaver behavior to an element, or just delete atag, you want to be sure you've correctly selected the tag. Forexample, if you want to apply a class style to a paragraph, you mightclick and drag to select that paragraph's text; but if you don't selectall of the text you'll add a For precise selections, nothing beats Dreamweaver's Tag Selector.Located in the bottom-left of the document window (see Figure 9), theTag Selector displays the HTML tag and all of the tags that wrap aroundthat tag. Figure 9: Dreamweaver's Tag Selector is the best way to precisely select HTML tags.



For example, if way back in Tip #6's Figure 6, I clicked inside aparagraph (<p>). That paragraph is inside a <div> tag withthe ID of #main (the tag selector displays that like this:<div#main>). That <div> tag, in turn, is inside to otherdivs, and all of those tags are inside the <body> tag.Clicking a tag in the Tag selector, selects that tag on the page; inaddition, Dreamweaver highlights that tag in the Tag selector,indicating that the tag is selected. #9: Increase the Font-size in Code View
Dreamweaver assumes that people who work directly on HTML, CSS orJavaScript code have really good vision. At least that's what it feelslike when you click the Code button to jump to a screen full of tiny,9pt text. In my Dreamweaver classes I often see students with theirfaces pressed right up to the screen as they look at a page's raw HTMLcode. Save your eyesight! Here's how to change the default size of this text:1. Choose Dreamweaver > Preferences (Mac) or Edit > Preferences (Windows) to open the Preferences window.2. Click the Fonts category.3. Select a new size from the Size menu (it's to the right of the Code View setting). I like 14pt type.4. Click OK to close the Preference window.#10: Turn off CSS Background Shorthand
Cascading Style Sheets (CSS) are a powerful tool for a Web designer.CSS changes drab HTML into an elaborate and beautiful design. But itcan also be complicated to learn and use. One weird quirk is theshorthand version of the Background property. CSS background properties let you add background colors and imagesto an element and control how a background image tiles. Each of thoseproperties has its own name. If you wanted to put a color and image andprevent the image from tiling, you might have CSS code like this:background-color: #F44333;
background-image: url(logo.png);
background-repeat: no-repeat; That's a lot of code, so Dreamweaver usually uses the backgroundshorthand property, which lets you roll all three of these propertiesinto one:background: #F44333 url(logo.png) no-repeat;This is a lot less code, and it may seem useful, but it can havesome weird side effects. If you leave out a property in the shorthandversion, a Web browser treats the unspecified properties as "none."That makes background: url(logo.png) the same as this code:background-color: none;
background-image:url(logo.png);Suppose there's already a style applied to an element and that stylehas a background color? If you create a new style for that element andonly specify a background image, then the Web browser removes the colorfrom the other style. I encounter this problem a lot when working withnavigation bars. I'll create a generic style for all of the buttons ina bar, like this:#navigation a {
color: #FFFFFF;
background-color: #48DD3F;
}Usually there's a lot more CSS properties for the links, but I'll keep this example simple.Let's say that I want to add different icons in the background ofeach button. For example, I might give each button its own ID so I canstyle it individually. Now I want each button to keep the basicproperties of the #navigation a style (including the background colorwhich is the same for all of the buttons) but add a different image toeach button. Suppose one button had the ID of home applied to it. If Iuse Dreamweaver to create that style, with its default CSS shorthandsettings, I'd end up with a style like this:#navigation #home {
background: url(home.png);
}The problem here is that the use of the background shorthandproperty erases the background-color from the "#navigation a" style. Toget around this problem, I simply turn off the shorthand property forbackgrounds:1. Choose Dreamweaver > Preferences (Mac) or Edit > Preferences (Windows) to open the Preferences window.2. Click the CSS Styles category.3. Uncheck the Background box. 4. Click OK.Now Dreamweaver will use the individual background properties whenever you create a new style. Figure 10: Dreamweaver's CSS Shorthand properties.



Dave McFarland is the author of Dreamweaver CS5: The Missing Manual, CSS: The Missing Manual (2nd Edition), and JavaScript: The Missing Manual. You can learn more about his books and work at www.sawmac.com.