Posts in Category ""

PhoneGap Build extension for Dreamweaver CS5.5

Adobe regrets to inform the Dreamweaver Community that the PhoneGap Build extension for Dreamweaver CS5.5 (released last week) is no longer available for download. For a number of reasons, we have had to pull the extension from public availability.

The functionality of the extension, which integrates PhoneGap Build with Dreamweaver, will be available in the upcoming version of Dreamweaver CS6.

Adobe would like to extend apologies for any inconvenience this might have caused.

Backing up and restoring Dreamweaver site definitions

We often hear from people: “I’m on a new computer. How do I get all of my Dreamweaver sites over to the new computer as well?”

Variations on this theme include: “My computer got wiped out; how can I get my sites back?” as well as “I had to reinstall Dreamweaver and lost all of my sites. How can a restore them?”

The answer to all of these questions is that you must import Dreamweaver site definitions (information that is kept in an .ste file) in order to restore a previous site. As Adobe Community Expert David Powers says, “Losing your site definitions in Dreamweaver can be a disaster, but it does happen sometimes. The best way to prepare for such an eventuality is to back up your site definitions on a regular basis.”

Create backups of your site definitions

You can back up all of your site definitions in a single operation:

  1. In Dreamweaver, choose Site > Manage Sites.
  2. In the Manage Sites dialog box, Shift-click to select all site names.
  3. Click Export.
  4. Dreamweaver asks if you want to include passwords and login details (this is the default option). Whichever option you choose will be applied to all sites, so if you want to export passwords/login details for some sites and not others, click Cancel and then export your sites in two sets by using Ctrl/Cmd-click to select them.
  5. Click OK.
    Dreamweaver asks where you’d like to save the exported site definitions. Navigate to a suitable location, leave the File name field unchanged, and click Save. Although only one site name is listed in the File name field, Dreamweaver exports all of the site definitions as .ste files in a single operation.

NOTE: This process backs up only the details of your sites, such as the location of the root folder, FTP details, and so on. It does not back up the actual files in your site, such as .html (or .php, .asp, .cfm) files, images, and style sheets. It’s a good idea to use your normal file backup routine on your actual files from time to time, as well as exporting the site definitions.

Restore site definitions

In the event of losing your site definitions in Dreamweaver or moving to a new computer, open the Manage Sites dialog box (Sites > Manage Sites), and use the Import button to navigate to your backup .ste files.

For more detailed step-by-step instructions you can consult the Import site settings documentation in Dreamweaver Help.

Thanks to David Powers, who posted the original version of this topic on the Adobe Dreamweaver forum.

Navigation bars — to Spry or not to Spry?

The Dreamweaver and Spry forums are flooded with requests for help on editing the notoriously difficult Spry Menu Bar widget. The widget is Dreamweaver’s built-in solution for dragging and dropping a navigation menu to your web page.

Sometimes, however, a Spry Menu Bar widget might not be entirely necessary for your navigation, especially if your navigation is going to be a single row of “buttons” (links) without any dropdown menus.

Dreamweaver moderator and Community Expert Nancy O. offers one template that gives you an idea of how easy it can be to create a navigation out of an unordered list and some CSS styling. Below is Nancy O.’s code for a page with such a navigation. Copy the code below and paste it into a blank document. All of the CSS is in the head of the page (no external style sheets) so you can see how everything works. The sample also provides a marvelous example of a basic 2-column CSS layout.

NOTE: Nancy’s original source doc is at:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 2-column, Fixed-width, Centered Template</title>
<link href="../alt-style/MyFooter.css" rel="stylesheet" type="text/css" />
<style type="text/css">
Layout by Alt-Web Design and Publishing   
July 2010
 zero out default browser values on everything
* {margin:0; padding:0; line-height:100%; font-size: 100%}
adds scrollbar to short pages in Mozilla
html {font-size:90%; height:102%; margin-bottom:1px; }
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
#Wrapper {
width: 970px; /*
width in px, % or ems
margin:12px auto 0 auto; /*
centers page
border: 10px solid #990000;
overflow:hidden; /*
float containment
header and footer get their background color from this rule
background-color: #CC6666;
#Header {
width: 100%;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
#Header h1 {
padding: 12px;
font-size: 2.25em;
text-shadow: #330000 0.1em 0.1em 0.2em;
color: #FFF;
#Header h2 {
padding: 0 12px;
letter-spacing: 3px;
#Header address {
color: #FFF;
font: bold oblique 14px/1.2em Arial, Helvetica, sans-serif;
line-height: 1.5em;
padding: 12px;
#navlist {
font-size: 12px;
font-weight: bold;
text-align: center;
background: #330000;
padding: 0.65em;
width: 100%;
#navlist li{
list-style: none;
margin: 0;
#navlist li a {
text-decoration: none;
background: #330000;
padding: 1em;
border-left: 1.2em solid #CC3333;
line-height: 2em;
#navlist li a:link { color: #CCC999; }
#navlist li a:visited { color: #CC6666; }
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus{
text-decoration: underline;
background-color: #990000;
#navlist li a.current {
color: #FFCC00;
border-left: 12px solid #FFCC00;
end top menu
Right side
#rightSidebar {
padding: 0 0 0 20px;
border-left: 2px dotted maroon;
min-height: 32em;
#MainContent {
background: #EAEAEA;
margin: 0;
padding: 0;
#MainContent ul, #MainContent li {
margin-left: 18px;
padding-bottom: 5px;
padding-left: 10px;
list-style: square outside;
#MainContent blockquote {
font:italic 1.2em Georgia, "Times New Roman", Times, serif;
color: #996666;
#Footer {
text-align: center;
padding: 10px 0;
color: #FFF;
height: 1%;
font-weight: bold;
font-size: 0.65em;
margin: 0;
test Links
a{font-weight: 700; text-decoration: none}
a:link {color:#FF0000;}
a:visited {color:#CC6666;}
a:focus{text-decoration: underline}
a img{border: none;}
Text styles
h1,h2,h3,h4,h5 {
padding: 10px 20px;
p {font-size: 1em; line-height: 1.5; padding:5px 20px;}
text align
.left {text-align: left}
.center {text-align: center}
.right {text-align: right}
floats and clearing
.floatRight {
padding: 0 0 0 20px;
.floatLeft {
float: left;
width: 65%;
padding: 0;
.clearfloat {
height: 1px;
visibility: hidden;
<!--[if IE]>
<style type="text/css">
/* CSS Conditional Comments */
body {font-size: 76%; zoom:100%}
<div id="Wrapper">
<div id="Header">
<h1>CSS Basic 2-column, centered layout </h1>
<!--end floatLeft --></div>
<h2>COMPANY NAME </h2>
<address>address, city, region <br />
Phone and Fax Numbers </address>
<!--end floatRight --> </div>
<!--IMPORTANT! clear floats after they are no longer needed with p, br or hr class -->
<hr />
<!--end header --></div>
<!--BEGIN menu-->
<div id="navcontainer">
<ul id="navlist">
<li><a href="#MainContent">Skip to Content&gt; </a></li>
<li><a href="#">Current Page </a></li>
<li><a href="#">Menu Item 2 </a></li>
<li><a href="#">Menu Item 3 </a></li>
<li><a href="#">Menu Item 4 </a></li>
<li><a href="#">Menu Item 5 </a></li>
<!--end navlist -->
<!--end navcontainer -->
<!--end top menu -->
<!--Begin MainContent -->
<div id="MainContent">
<!--BEGIN left column -->
<p>This layout  tested and works  well in  Firefox 3+,  Chrome 9+, Safari 3+, IE6, 7, 8 &amp; 9.</p>
<p> <a href=""><img
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
<h3>View Page Source in Browser to see the CSS and HTML code.</h3>
<h2>Heading 2</h2>
<p>Your content goes here. Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. </p>
<h3>Heading 3</h3>
<p>Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.</p>
<p>End #mainContent </p>
<!--end left column -->
<!--BEGIN right column -->
<div id="rightSidebar">
<p>&quot;Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. &quot;</p>
<p>&quot; Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. &quot;</p>
<p>Unordered List  links</p>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
<p>end #rightSidebar</p>
<!--end rightSidebar -->
<!--IMPORTANT! clear floats after right column with a p, br, or hr class -->
<hr />
<!--end MainContent --></div> 
<!--Begin footer -->
<div id="Footer">
<p>#Footer &copy; 2011, Your footer text goes here</p>
<!--end Footer --></div>
<!--end page Wrapper --></div>
<!--remove Myfooter from your web page -->
<div id="Myfooter">
<h3>Help Feed the Kitty</h3>
<p>Your support helps us continue these efforts.</p>
<form action="" method="post" />
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="1006004" />
<input type="image" src="" name="submit" alt="Donate Button" />
<img alt="Credit Cards Accepted" src="" width="1" height="1" />
</div> <!--end floatRight -->
<p>&copy; 1995-2011 | <a href="">Alt-Web Design &amp; Publishing</a> | California</p>
<p> Web : Graphics : Print : Media Specialists</p>
<p><a href="../index.shtml">Home</a> | <a href="../links.shtml">Links</a> | <a href="../tools.shtml">Tools</a> | <a href="../Free-CSS-Templates.shtml">Templates</a> | <a href="../contact.shtml">Contact</a> </p>
<br />
</div> <!--end footertext -->
</div><!--end Myfooter -->

Create Animated Web Content using HTML5, CSS3, and JS

Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using HTML5, CSS3, and JavaScript web standards.

Download the Preview version from Adobe Labs:


CSS3 Transitions

As part of our wind-down from CS5.5, the Dreamweaver Team has started thinking about how we can deliver a world class experience for building CSS3 Transitions for the web.  In the coming weeks, the Dreamweaver Team will be conducting surveys and asking for your input on how we can do just that, so we’re bringing it to our fans directly through our social media outlets.  This week we want to see examples of CSS3 Transitions (or animations).

So send us links to your sites showing off your CSS 3 Transitions skills!

Packaging widgets with the Adobe Widget Browser

This tutorial by Scott Richards on the Adobe Developer Connection shows how to package an existing HTML and JavaScript widget using the Adobe Widget Browser so that it can be shared with other users of the Widget Browser. Read the full article here:

Optimal CSS Tiled Background Image Size

I have recently analyzed several web pages for Dreamweaver customers that complained about slow page loading times. A trend that I have noticed is images used for tiling backgrounds with a width or height of 1 pixel. I have even seen some 1×1 images used for tiling. Yikes!

“Tiling” refers to using a CSS background image that repeats in the X and/or Y directions to fill a page or element.

While it’s generally best to make images as small as possible, one exception to that rule is for tiling images. The smallest download that browsers can do is 1K bytes, so the best size for tiling image files that can be made to be under 1K in size is “as close to 1K without going over”. This can significantly reduce the amount of tiling that Dreamweaver and browsers need to do, which improves page loading performance.

For example, consider a 1×1 image versus an equivalent 10×10 image. The size of both images is under 1K, so the download time is the same, but the smaller image is tiled up to 100 times more than the larger image, which requires more time to render.

This argument also applies to non-tiled images, but those can easily be combined in a single file using the CSS Sprite technique.

CS5 Updates to Style Rendering Toolbar

In Dreamweaver CS5, the Design View Style Rendering Toolbar was given a couple new features.

Note that the Style Rendering Toolbar is not displayed by default, so you may need to turn it on using the View > Toolbars menu.

Text Size

These are buttons to quickly adjust the font size on the page. This is a temporary adjustment to emulate font zooming as done in browsers so you can quickly see how this may affect the layout of your page.

Increase, reset, and decrease text size buttons

  • Increase Text Size (by 15%)
  • Reset Text Size to original size
  • Decrease Text Size (by 15%)

Pseudo-class Rendering

These radio buttons are used to temporarily change the filtering of CSS pseudo-class styles in your page. By default, browsers display the :link styles and hide all of the other pseudo-class styles until a certain action takes place. This is a temporary change in the way styles are cascaded so you can quickly see how the other pseudo class styles are rendered in your page.

Pseudo class buttons

  • :l – :link
  • :v – :visited
  • :h – :hover
  • :a – :active
  • :f – :focus

Notice that it’s not possible to hover over more than 1 link at a time, so this feature can cause your page to render in a state that can never be seen in a browser. This is just for doing a quick, temporary check of how styles are rendered, not to represent valid link states in your page.

All of the Style Rendering Toolbar functionality is also available through the View > Style Rendering menu.

Adobe Web Fonts

Adobe introduced Adobe Web Fonts, a specialized subset of fonts from the Adobe Type Library. They look great on screens and are easy to add to your website. Now, with the help of our partners from Typekit, you can deliver type to your website that is searchable, editable and viewable with the high performance and selection that you demand for your viewers.

For more info, visit:

Dark Background Color in Dreamweaver Code View

In Dreamweaver, you can manually change the Code Coloring colors that are displayed in Code View in the Code Coloring Category of the Preferences dialog.

This is easy when you just want to tweak a few colors, but changing your entire coloring scheme to a dark background requires changing many different settings, which can be a lot of work.

Fortunately, I found the Dark Code Colorization for Dreamweaver extension written by Tom Sramek which does the work for you. Thank you for sharing, Tom.