CSS Transitions in Dreamweaver CS6

 

This article showcases various ways in which you can use CSS transitions in your Dreamweaver CS6 project.It also describes the options in the user interface that allow you to configure the options for these transitions.

What is CSS Transition?

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.Normally when the value of a CSS property changes, the rendered result is instantly updated. The affected elements immediately transition from the old property value to the new property value.

For a smooth transition between property changes, you can use the following CSS transition properties:

The ‘transition-property’ Property
The ‘transition-duration’ Property
The ‘transition-timing-function’ Property
The ‘transition-delay’ Property
The ‘transition’ Shorthand Property

We will discuss each of these in our examples later.

For more information please refer to CSS Transition page at http://www.w3.org/TR/css3-transitions/

Browser Support

* From http://caniuse.com/

 

As you can see CSS transitions have reasonable support in all Browsers except IE.

Using CSS transitions in Dreamweaver CS6?

Example 1 – Menus – Download Demo File

Open the downloaded file in Dreamweaver CS6. This is a simple menu using lists.

On mouse over of the menu, I would like to do the following:

·         Smoothly transition the background color of each menu option to a specified color
·         Smoothly increase the size of the option to 1.5 times its current size so that it appears bigger than the other options

Adding CSS transition in Dreamweaver

Step 1 – Open CSS Transitions panel using Window>CSS Transitions

Step 2 - Click on the + to Create Transition.

 

Step 3 – Select target rule. In this file, I am specifying a transition rule for the hyperlink property. So, I select <a> from the menu.

Step 4 – Because I want the same transition to be applied to all the hyperlinks,  I select Use The Same Transition For All Properties. I will further specify a 2 second duration for the transition. You can also specify a delay which specifies the time required to start the transition from the time of the mouse-over. In this case, I want the transition to to start immediately, so I will leave it blank. For timing, you can choose from the preset values or specify your own cubic-bezier function by providing the required values.

Example – The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).

Step 5 - Now we need the select the properties and change the CSS Values.In this example we will select background-color and transform.

Click + below the Property field, and select background-color from the menu.

Similarly, to specify the Scale options, click +, and select Transform. We will use CSS3 Transform to scale to 1.5.

Click on Create and we are done. Notice that Dreamweaver adds all the vendor specific code for transition as well as Transform.

 

Dreamweaver allows you to edit the transition anytime. Double-click a transition you want to edit. For example, to specify Rotate instead of Scale for the Transform property, double-click Transform in the Property field.

To Learn More on CSS3 Transitions please refer to the links below :

 

FTP enhancements in Dreamweaver CS6

This blog article discusses the improvements to FTP file transfer in Dreamweaver CS6.

Dreamweaver uses multi-channel transfer to simultaneously transfer selected files using multiple channels. Dreamweaver also allows you to simultaneously use the Get and Put operations to transfer files.

If there is sufficient bandwidth available, FTP multi-channel asynchronous transfer considerably speeds up the transfer process.

Multi-channel transfer

You can now select more than one file for FTP transfer.  By default, three files are lined up for Get and Put operations.  The files that are currently being transferred are indicated by a green download arrow icon. The files pending download are indicated by an orange download arrow icon.

Multi-channel transfer in Dreamweaver CS6

Multi-channel transfer in Dreamweaver CS6

When you move your mouse over the file being transferred, the percentage of content transferred is displayed. A red error icon indicates files that were not transferred.

Asynchronous transfer

You can now simultaneously perform the Get and Put operations on different sets of files. For the status of large files being transferred, check their status in the Details section of the Background File Activity dialog box.

FTP log details

FTP log details

Adobe recommends that you do not click the Cancel button in the Finishing Get/Put Operation dialog when the operation is in progress.  During the Finishing operation, information about files transferred is captured in the dwsync.xml file.  Unlike in previous versions of Dreamweaver where the XML file was updated after every file transfer, Dreamweaver now updates the file at the end of the transfer process.

When you perform the Get/Put operation later, Dreamweaver uses the information in the dwsync.xml file to transfer only those files that are new/changed. It ignores files with no updates. This considerably speeds up the transfer process.

Note: The progress bar now indicates the number of files being transferred and not the size of the files as in previous versions of Dreamweaver. For information on the extent of the file transferred, move your mouse over the file being transferred. The information is displayed in the tooltip.

Background File Activity dialog displaying the transfer status

Background File Activity dialog displaying the transfer status

You can now perform the following operations when the asynchronous transfer is in progress:

  • Refresh the remote file list
  • Extend/collapse remote file directories
  • Open or download a file
  • Preview the file in a browser. When the transfer is in progress, Dreamweaver uses the local copy of the file for preview in a browser.

These operations have a higher priority than the transfer process. The higher priority allows you to quickly perform these operations when the transfer is in progress without having to wait for the transfer process to complete.

Separate icons for remote server and testing server

In the collapsed mode of the Files panel, it is difficult to identify whether Dreamweaver is connected to the remote or testing server. Separate icons for remote and testing servers now help identify the type of connection.  The icon for connection to the testing server is  and that for remote server is  .

Note: The above enhancements to FTP transfer work only for FTP and FTPS (Implicit and Explicit).

 

Files Panel and icons

There were few customer reports (http://forums.adobe.com/message/4392653) of icons going missing in files panel after the release of OSX Lion version 10.7.3. It was something which we investigated and worked with Apple to identify the issue and resolve it.

The update of 10.7.4 went live a few weeks ago and it was expected to fix the issue. The engineers have verified it internally and confirmed the fix. In the community also, there are no longer reports of the issue being raised anymore.

It is a good indication that Mac platform users, update to the latest available from Apple. So if you are running into such an issue, you should go ahead and launch Software Update installing the latest ones available in the list.

Adobe announces CS6/Creative Cloud

Today Adobe announced one of its most ambitious releases yet—Adobe® Creative Suite® 6 and the Adobe Creative Cloud™. For Dreamweaver users, this means yet another powerful version of Dreamweaver that will be available as a standalone product, as part of the familiar Web Creative Suite, or as part of the new Adobe subscription service offered by the Creative Cloud.

Adobe Dreamweaver® CS6 addresses the challenge of responsive Web designs with the ability to build fluid grid layouts replacing the tedious manual process of creating and configuring separate CSS-based interfaces for phone, tablet and desktop.

Through direct integration with Adobe’s recently announced PhoneGap Build service, Dreamweaver CS6 also helps round out Web professionals’ skill sets and enables them to produce native mobile applications for multiple platforms.

For a full list of new features in Dreamweaver CS6, along with links to instructional content and videos, see What’s New in Dreamweaver CS6.

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.

Trouble importing your Dreamweaver site?

Some users have reported trouble importing their Dreamweaver site settings. One important thing to remember is that differing file structures on Macintosh and Windows machines can often cause this problem.

When you export a Dreamweaver site to an .ste file, that .ste file stores not only the FTP settings for your site, but also local file settings. The native file structure on Windows is completely different from that on Mac OS. The Import and Export features in Dreamweaver enable you to move site definitions from one computer to another (for example from XP to Windows 7), but not from one operating system to another. 
 
The solution: Since .ste files are XML documents, you can open them and edit the attributes in the <localinfo> tag to match the new folder structure on your Mac or Windows machine.

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: http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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
http://www.alt-web.com   
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 {
background:#330000;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
 
#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;
text-transform:uppercase;
}
#Header address {
color: #FFF;
font: bold oblique 14px/1.2em Arial, Helvetica, sans-serif;
line-height: 1.5em;
padding: 12px;
}
 
/*
TOP MENU
*/
#navlist {
font-size: 12px;
font-weight: bold;
text-align: center;
background: #330000;
padding: 0.65em;
width: 100%;
}
 
#navlist li{
list-style: none;
margin: 0;
display:inline;
}
 
#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 {
float:right;
width:32.5%;
margin:0;
padding: 0 0 0 20px;
border-left: 2px dotted maroon;
background:#FFFFBD;
min-height: 32em;
}
/*
 Main
*/
#MainContent {
text-align:left;
color:#663333;
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:hover,
a:active,
a:focus{text-decoration: underline}
a img{border: none;}
 
/*
Text styles
*/
h1,h2,h3,h4,h5 {
font-size:1.2em;
line-height:1.8em;
padding: 10px 20px;
}
p {font-size: 1em; line-height: 1.5; padding:5px 20px;}
 
 
/*
RE-USABLE CLASSES
*/
 
/*
text align
*/
.left {text-align: left}
.center {text-align: center}
.right {text-align: right}
 
/*
floats and clearing
*/
.floatRight {
float:right;
width:32.5%;
height:auto;
margin:0;
padding: 0 0 0 20px;
}
 
.floatLeft {
float: left;
width: 65%;
height:auto;
margin:0;
padding: 0;
}
 
.clearfloat {
clear:both;
height: 1px;
visibility: hidden;
}
</style>
 
<!--[if IE]>
<style type="text/css">
/* CSS Conditional Comments */
body {font-size: 76%; zoom:100%}
</style>
<![endif]-->
 
</head>
<body>
<div id="Wrapper">
 
<div id="Header">
<div>
<h1>CSS Basic 2-column, centered layout </h1>
<!--end floatLeft --></div>
 
<div>
<p>#header</p>
<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>
</ul>
<!--end navlist -->
<!--end navcontainer -->
</div>
<!--end top menu -->
 
 
<!--Begin MainContent -->
<div id="MainContent">
 
<!--BEGIN left column -->
<div>
<p>#mainContent</p>
<p>This layout  tested and works  well in  Firefox 3+,  Chrome 9+, Safari 3+, IE6, 7, 8 &amp; 9.</p>
<p> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
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 -->
</div>
 
<!--BEGIN right column -->
<div id="rightSidebar">
<p>#rightSidebar</p>
 
<h3>Blockquote</h3>
<blockquote>
<p>&quot;Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. &quot;</p>
</blockquote>
 
<h3>Blockquote</h3>
<blockquote>
<p>&quot; Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. &quot;</p>
</blockquote>
<p>Unordered List  links</p>
<ul>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
</ul>
<p>end #rightSidebar</p>
<!--end rightSidebar -->
</div>
 
 
<!--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">
<div>  
<h3>Help Feed the Kitty</h3>
<p>Your support helps us continue these efforts.</p>
 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="1006004" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="Donate Button" />
<img alt="Credit Cards Accepted" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<p>&nbsp;</p>
</div> <!--end floatRight -->
 
<div>
<p>&copy; 1995-2011 | <a href="http://alt-web.com/">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 -->
 
</body>
</html>

Getting rid of blue borders around image links

Here’s a really annoying problem that we often hear people asking about: how do I get rid of a blue border that surrounds an image when I make the image a link?

Annoying blue border around a linked image

Annoying blue border around a linked image

Some people will tell you to simply set a zero border in the Dreamweaver Property inspector, but according to David Powers, you should really use CSS instead.

Here’s how to do it:

  1. Create a new CSS rule for linked images, either in the head of the document or in an external style sheet. (We recommend the latter.)
    The new rule looks like this:
    a img { border: none; }
    Note: If you don’t know anything about creating CSS rules, you’ll need to read up on some basic CSS info first.
  2. If you’ve created the rule in a <style> block in the head of your document, you don’t need to do anything else. If you’ve created the rule in an external style sheet, make sure the sheet is linked to the page that’s displaying the annoying border.

Creating a CSS style to remove borders automatically removes the blue border from ALL images that you’ve turned into links. If you use an external style sheet, and link it to all the pages in your site, the same rule affects every image link in your site. This is a much more efficient method of eliminating those pesky borders than adding zero to the border property for every image in your website!

Thanks to David Powers, who originally posted this helpful tip in the Adobe Dreamweaver Forum.

 

Adobe recommends: CSS Inspect

Over the past week, we publicized some high-value content from adobe.com and  other community sites. Hopefully you enjoyed these posts and found the resources useful. This will be the last post in the “Adobe Recommends” series (for now!)

Continuing our trip along the CSS highway, we have this recommended video by Dreamweaver Product Manager, Scott Fegette:

Dreamweaver CS5 — CSS Inspect

This video shows you how you can use CSS Inspect in Dreamweaver’s Live view to inspect and edit your CSS structure.