Author Archive: Preran Kumar

Media query and Dreamweaver CS5.5

There was a time in the history of computers when users did not have too many monitors to choose from.  That was very good for web designers because there were only so many resolutions to cater to. The rules ensured that that their sites catered to the least possible resolution and extra spaces were filled up with beautiful backgrounds as users switched to higher resolutions. As monitor sizes increased and users’ preferences for resolutions changed, the rules changed too. Nothing dramatic – loosening a nut here, tightening a bolt there, and it was all done.  And Dreamweaver pretty much had the design aspect covered on all fronts.

With the advent of Web 2.0, the websites got way more smarter than their static HTML ancestors. There was more coding than what a designer could probably handle. Most designers either took to coding, or started working with teams that helped bring intelligence to design.  It was but natural for Dreamweaver to provide increased support for developers in the code view. ColdFusion, ASP, JavaScript, database connectivity – Dreamweaver tried to accomodate developers of all hues.

From design to code and back to design – the advent of mobile devices changed the rules yet again.  While designers were well accustomed to designing for increasing resolutions, with mobile devices they had to contend with shrinking monitor sizes. The websites not only had to display well on desktops but equally well on mobile devices that had no standard monitor size.  It would have been neigh impossible, if not downright foolhardy,  for designers to create a website for each resolution.

It was pretty obvious that the way forward was going to be driven by style sheets.  You create a different style sheet for different monitor size resolutions to help customize display on various devices.  But how would a browser know the CSS to use for displaying the site? Enter Media Query, a piece of code on the site that specifies the CSS to be used for a range of resolutions.  Media Queries use the reported dimensions of the monitor size to specify the CSS for the device.

It is but obvious that a website will look very different on the devices that it is displayed on – tablets, desktops, and mobile phones for now.  With media queries, you can have a single functional website that works the same but looks very differently on the devices that it is used. In Dreamweaver, you can create a site using media query, and also preview the site as it appears in devices with various resolutions. Dreamweaver helps ensure that when your site goes live, it looks and behaves exactly the way it did when it was previewed.

For information on using media queries in Dreamweaver CS5.5, see http://help.adobe.com/en_US/dreamweaver/cs/using/WSeffff8bffc80208443aaa2ab12db791fb9b-8000.html

Adobe Help Application: Access Denied Error Message

When opening the Adobe Communtiy Help application in CS5.5, the following error message appears:

“ACCESS DENIED”

This error is a result of a malformed property in the help configuration file. The file was mistakenly published with a staging URL (help.stage.adobe.com) instead of the production URL (help.adobe.com).

For information on troubleshooting this problem, see the article: http://kb2.adobe.com/cps/902/cpsid_90284.html

Adobe Photoshop Elements 9.0.3 update

The update released today helps overcome the following issues:

  • Photoshop Elements Organizer does not work as intended on Wacom tablets
  • The brush tool in Photoshop Elements Editor does not work as intended on Wacom tablets
  • The open documents in tabbed view cannot be clicked using Wacom stylus

Click Help > Updates in Photoshop Elements. In Adobe Applications manager, look for Adobe Photoshop Elements 9.0.3 update under Photoshop Elements 9.0.

For more information, see http://kb2.adobe.com/cps/899/cpsid_89980.html

Applying border image to objects in Dreamweaver CS5.5

Using the border-image property in CSS, you can use a single image to generate a border for a box object.

Out of the five properties specified by the W3C for border-image, Dreamweaver supports the following three:

  • Image Source : Location of the image.
  • Image slice:  Treating the image as sliced into 9 sections.
  • Repeat-x and Repeat-y: 
    • Repeat – Repeats/tiles the image across the edge
    • Stretch – Stretches the image across the edge
    • Round – Tiles the image so that only a whole number of images fit. If a whole number cannot be accommodated, the image is stretched

The border-image property has the following format (webkit – supported by Dreamweaver Live View):

-webkit-border-image: url[border image-source] [border image –slice] [border image-repeat]

Example: -webkit-border-image: url(border-image.png) 50 50 50 50 repeat round;

Note that the pixels are specified without px being suffixed. For percentage, you must add the suffix “%” to the values.

The border-image property has the following format (Mozilla support):

-moz-border-image: url[border image-source] [border image –slice] [border image-repeat]

Example: -moz-border-image: url(border-image.png) 50 50 50 50 repeat round;

  1. In the CSS Styles panel, click Add Property.
  2. Select border-image from the menu.
  3. Click the “+” icon.
  4. Specify the source of the image.
  5. Specify the image slice values.
  6. Specify how the image has to be added to the edges using the Repeat-x and Repeat-y values.

Using border-radius CSS3 property in Dreamweaver CS5.5

You can apply rounded corners to box objects using the border-radius property. Specify the corner radius for all the corners of the box to create a rounded box.

The border-radius property has the following format:

border-radius: [corner radius – top left] [corner radius – top right] [corner radius – bottom right] [corner radius – bottom left];

Example: border-radius: 5px 6px 7px 8px;     

Dreamweaver Live View supports the W3C implementation of this property.

  1. In the Border category of the CSS Styles panel, click Add Property.
  2. Select border-radius from the menu.
  3. Click the “+” icon.
  4. Enter values for the corner radius for the four corners of the box. Select Same For All if you want to apply the same value to all the corners of the box.

Using box-shadow CSS property in Dreamweaver CS5.5

The box-shadow property in CSS allows you to apply single and multiple drop shadows to box objects.

Specify the following parameters for the box shadow property:

Color : Color of the shadow
Offset : Position of the shadow with respect to the text object.
Blur radius (optional): Creates an authentic feel for the shadow.
Spread radius (optional): Allows the shadow to scale to the size of the box object. A positive value causes the shadow shape to expand in all directions, while a negative value contracts the shadow shape. 

For more information, see the W3C website.

The box-shadow property has the following format (webkit – supported in Live View):

-webkit-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -webkit-box-shadow: 2px 1px 5px 7px #0C0; 

The box-shadow property has the following format (Mozilla support):

-moz-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -moz-box-shadow: 2px 1px 5px 7px #0C0;

In addition, CSS3 supports the inset property. The ‘inset’ value, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it). 

The box-shadow property has the following format (webkit – supported in Live View):

-webkit-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -webkit-box-shadow: 2px 1px 5px 7px #0C0;

The box-shadow property has the following format (Mozilla support):

-moz-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -moz-box-shadow: 2px 1px 5px 7px #0C0;

In addition, CSS3 supports the inset property. The ‘inset’ value, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

To apply the box-shadow property to an object, do the following:

  1. In the Border category of the CSS Styles panel, click Add Property.
  2. Select box-shadow from the menu.
  3. Click the “+” icon.
    Enter values for X-Offset, Y-Offset, Blur Radius, Spread Radius, and Color. For color, you can use the color palette to choose a color.

Using Text-shadow in Dreamweaver CS5.5

The text-shadow property allows you to apply single and multiple drop shadows to text objects. For more information, see the W3C website.

Specify the following parameters for the text-shadow property:

Color: Color of the shadow.

Offset: Position of the shadow with respect to the object. The X-offset specifies the horizontal distance. Negative values place the shadow to the left of the text. The Y-offset specifies the vertical distance. Negative values place the shadow to the bottom of the text.

Blur-radius (Optional): Creates an authentic feel for the shadow.

The text-shadow property has the following format:

text-shadow: [x-offset] [y-offset] [blur radius] [color];

Example: text-shadow: 2px 2px 4px #066;

You can apply the text-shadow property more than once to the same object.  In this case, the CSS panel displays only the first instance of the property although both instances are applied.

Example: text-shadow: 2px 2px 4px #000, -2px -4px 4px #099;

To apply Text-shadow using the CSS Styles panel, do the following:

  1. In the Show Only Set Properties View of the CSS Styles panel, click Add Property.
  2. Select text-shadow from the menu.
  3. Click the “+” icon.
  4. Enter values for X-Offset, Y-Offset, Blur Radius, and Color. For color, you can use the color palette to choose a color.

Enhanced support for CSS3 in Dreamweaver CS 5.5

Dreamweaver CS 5.5 provides a more intuitive interface to enter information for the following commonly used CSS3 properties.

A new “+” button has been introduced for the above properties.  When you click the button, a dialog appears using which you can enter values for various parameters of the property.

Dreamweaver also supports browser (webkit, mozilla) specific implementation of box-shadow, border-radius, and border-image properties.

Note: Changes made to CSS properties are not displayed in the design view. Switch to Live view to preview changes after you edit properties in the code view or in the CSS panel.

Add images as attachments to Mail | Mac OS (Photoshop Elements)

By default, images are added inline in Mail, the mail client in Mac OS.

Add a single image as an attachment

  • Control-click the image and select the option to view the image as an icon. 

Always add images as attachments

  1. Open Terminal in Mac OS (Applications > Utilities > Terminal)
  2. Run the following command
    defaults write com.apple.mail DisableInlineAttachmentViewing -bool yes
  3.  To restore the default behavior, run the command
    defaults write com.apple.mail DisableInlineAttachmentViewing -bool false

Quick Tweets, Big Prize!

An opportunity for you to win the full license copy of Adobe Technical Communication Suite 2.5!

 Here’s how: 

  1. Log on to your Twitter account (if you don’t have one, create one in a jiffy, and it’s free).
  2. Send prize-worthy tweets with hashtags #tcscontest #stcindia 
  • Best practices for FrameMaker 9, RoboHelp 8, and TCS 2.x
  • Top reasons to buy or upgrade to FrameMaker 9, RoboHelp 8, and TCS 2.x

The contest closes at 4 PM on Friday, November 12. Keep tweeting till then. 

What/who is prize-worthy: 

  • The best tweet – Decided by judges at Adobe
  • Most popular tweet – The most retweeted best practice or buy/upgrade reason
  • Most prolific tweeter – The person with the maximum number of valid tweets 

The results will be announced at the STC-India conference in New Delhi on 13 Nov, and the prizes will be awarded to the winner(s) by Naresh Gupta, MD, Adobe India.

For any clarifications, write to Preran@gmail.com