Posts tagged "dreamweaver cs6"

Resolution for 12.0.3 users running into BrowserLab and Business Catalyst Issues

The Adobe Dreamweaver team made a patch available with version number 12.0.3 for Perpetual customers on 12/12/2012.

The patch had a side effect where Business Catalyst and BrowserLab panel will stop functioning for some users. If you are a 12.0.2 user, you will not run into such an issue. You can resolve this issue by downloading the zip from here and following the steps below:

Steps to be followed:

  1. Download and unzip the attached folder onto your system.
  2. Open the extracted folder.
  3. Right click on “BLBC_Extension_Update.bat” file that is present, to get context menu.
    1. If you are on Win Vista, Win7 or Win8 platform, choose “Run as administrator” option in the context menu. (**this step is very important as not running the batch script as an administrator, will not allow the script to copy files into system\program files\ folder)
    2. If you are on Win XP, just double click on the batch file to run.
    3. Follow the instructions shown in console and once copy of files is complete, launch Dreamweaver CS6 to check if BrowserLab extension is working or not.

The zip file contains required BL & BC files along with a batch script, that will copy files into corresponding extensions folder on the system. The zip file contains HTML, CSS & JS files and no executables.

Dw CS6: Attributes deprecated from “img” tag

Dreamweaver CS6 made a change in code generation of attributes for tags in favor of using CSS. Once such example is the “img” tag from which the following attributes were removed.

  • border
  • vspace
  • hspace
  • align

The below screenshot will give you an idea of the changes made from Dreamweaver CS5.5 to CS6.0

Img tag attributes deprecated

Img tag attributes deprecated

These attributes have been deprecated in HTML 4.0 as mentioned  by W3C here and have been marked as  Obsolete here 

A quick look at the img tag at W3Schools will give an idea of the deprecated attributes for img tag.

“CSXS Infrastructure CS6″ update for Dreamweaver CS6

If you have not already checked up your Adobe Updater blinking in System Tray(Win) or Dock (Mac) for any Dreamweaver updates, do so right away. If you work with Business Catalyst sites, do it instantly!

Adobe Dreamweaver CS6 installed on your machine will receive this new update and address the performance issues reported by users of BC. When you click on the “Get Started” button in Business Catalyst panel within Dreamweaver, you might be seeing a progress bar for a very long time.

While the progress bar shows up, it may not let you work with the complete application. This has been fixed with the progress bar going away much much faster than earlier.

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 :