Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

Dreamweaver Behavior - Javascript At Your Fingertips

Monday, May 05, 2008 | , with 0 comments »

DreamweaverDreamweaver is arguably the best WYSIWYG editor used by most professionals to create web pages. It is undoubtedly one of the most powerful website development software in the present day market. There are plenty of features and extensions that make Dreamweaver one of the most loved editors of all times.

In this post we'd be checking out one of the most interesting, user-friendly and useful feature - Dreamweaver Behavior. So what is this Dreamweaver Behavior? How can we use it? And what can this feature be used for? Well, get ready for some answers...

What Is Dreamweaver Behaviors?
Dreamweaver Behaviors is an integrated feature that allows the software to add scripting events to the elements in the web-pages without much fuss. With the help of this feature, Dreamweaver writes the Javascript and event attributes on it's own. It can be used for creating behaviors such as checking for a specific web browser, play a sound, write a pop-up message, call a custom javascript and much more. Dreamweaver automatically adds a piece of script within the HEAD tag of the page and also places the appropriate browser event attributes in the HTML tag. There are 27 built-in behaviors in Dreamweaver by default, though more can be added through Extensions.

How To Add A Dreamweaver Behavior?
It's quite easy to add Dreamweaver Behavior to web pages. Here's a step by step guide:
  1. Open a new HTML page in Dreamweaver
  2. Open the behaviors pane from either Windows>Behaviors or Shift+F4
  3. Highlight the elements that require some action to be set
  4. Click on the plus icon on the behavior pane on the right
  5. Select the appropriate behavior
  6. Save the page
Well it's that easy. Just make sure you double check the browser event attribute is the appropriate one.

What Are The Built-In Dreamweaver Behaviors?
Well lets see. Some of the most important and often used scripts come as bundle with the tool. A lot of functions and effects can be created with the help of these even without any real knowledge of Javascript. Here's a complete list of behaviors supplied by default along with Dreamweaver and what they are used for:
  • Call JavaScript - This behavior will assign a custom script to the event
  • Change Property - Changes an object's properties such as the background color or the size of an image, form element or layer
  • Check Browser - Allows redirection of any user to a specific Web page based on the browser version
  • Check Plugin - Verify that specific plugins are installed in the browser
  • Control Shockwave or Flash - Set Shockwave or Flash movies to play, stop, rewind, or go to frame
  • Drag Layer - Sets up layers to be draggable
  • Go to URL - Sets a URL for the browser to open, such as to load dynamic frames
  • Hide Pop-up Menu - Hides a pop-up menu created by Dreamweaver
  • Jump Menu - Creates a jump menu - a drop-down menu that jumps to various URLs
  • Jump Menu Go - Adds a go button to the jump menu
  • Open Browser Window - Open a new browser window
  • Play Sound - Play a sound file
  • Popup Message - Displays a JavaScript alert box
  • Preload Images - Preloads images for scripts such as the swap image behavior
  • Set Nav Bar Image - Changes the image in a navigation bar
  • Set Text of Frame - Puts text or HTML into a frame
  • Set Text of Layer - Puts text or HTML into a layer
  • Set Text of Status Bar - Puts text into the browser status bar
  • Set Text of Text Field - Puts text into a form text field
  • Show Pop-up Menu - Displays a Dreamweaver pop-up menu
  • Show-Hide Layers - Shows or hides a layer with the visibility property
  • Swap Image - Swap one image for another, such as a rollover image
  • Swap Image Restore - Restores the previous image swap
  • Go to Timeline Frame - Goes to a specific frame in a timeline
  • Play Timeline - Plays a timeline
  • Stop Timeline - Stops a timeline
  • Validate Form - Checks the data submitted in a form
So that would be all for the day. Hope you young and new designers and developers are going to find it interesting and use it th next time to create wonderful web pages without having the need to learn Javascript.

How To Add A Favicon

Thursday, March 13, 2008 | with 1 comments »

Favicon's are a great way of 'mini-branding' your sites or blogs. A favicon, also known as shortcut icon, website icon, page icon or urlicon is a small, square icon, usually 16×16px in size, that is displayed alongside the URL in the web address bar of a web browser. Most of the recent browsers use tabbed browsing and this enables users to open multiple sites/blogs side by side. An attractive favicon would act as a mark of distinction for any site/blog from the others. The favicon is also displayed in the bookmarks / favorite section of many recent browsers.

Formats
.ico is the most widely used favicon format. However, .gif and .png are also used sometimes. Animated gif favicons can also be created but they are presently supported by Firefox.

Design Guidelines
A favicon has a 16×16px size so to design it it’s advisable to use a larger size such as 128×128px and then scale it to 16×16px. The most appropriate resolution and color depths would be - i. For .ico: 16×16 and 32×32 (64×64 and 128×128 sometimes used by Mac OS X) and bit-depths, ii. For .gif: 16×16 in 256 colors and iii. For .png: 16×16 in either 256 colors or 24-bit.

How To
The favicon should work fine only by placing it on the root of the folder as most of the browser looks for the favicon on the root of the site. However, in case it is not displayed or if the favicon is not located in the root, a single line of code needs to be added to the '' section. The code is as follows:


Here's a lovely gallery that displays many of the web's popular favicons. Check it out and add one to your own site. :)


Convert Any Image Into Cartoon With Photoshop

Thursday, March 06, 2008 | , with 5 comments »

Converting images into cartoons or giving a cartoon effect to any image was never more simple. With the Photoshop built in Filter tools it can be well done in a few easy steps. Here's how to do it.

I have always wanted to create cartoons of celebrities and it was really exciting to find out how easy it was with just some small built in tricks with Photoshop. In this tutorial I'll be converting an Angelina Jolie image into a cartoon that looks exactly like her.

Firstly, I chose the following image to be converted.

Angelina Jolie

Step 1: Open the image in Photoshop. I am using version CS3. Now go to menu bar. Select Image>>Mode>>RGB Color and click on it if it's not already ticked.

Step 2: Next create a duplicate layer from Layer>>Duplicate Layer and give it a new name. This new layer would be the one we'll be working with.

Step 3: Now to give the primary effects, we need to use the Poster Edges filter. This can be done from Filter>>Artistic>>Poster Edges.

Step 4: Go to Images>>Adjustments>>Brightness/Contrast from the menu bar and select the Brightness Value as 10 and Contrast Value as 30. At this stage the image would look like the one below.

Angelina Jolie

Step 5: Now to finally finish it off we would be applying the Artistic Cut-Out Filter effect. This can be done from Filter>>Artistic>>Cut Out menu.

And with that we are done. The new cartoon image of Angelina Jolie would look like the one below.

Angelina Jolie

Go ahead and make some cool cartoons from your favorite images.

Adobe Photoshop CS3, Illustrator CS3 & Dreamweaver CS3I have hardly come across people who have never used any Adobe product at some point of time or the other. Powerful, as they are often described, these tools offer plenty of stuffs which sometimes become pretty confusing to use. However, a quick tutorial on the keyboard shortcuts could remove much of the bottleneck increasing productivity. Well here we have some keyboard shortcuts (Windows & Mac) for some of the most popular and widely used Adobe products:
Adobe Photoshop - CS3, CS2, CS, 7
Adobe Illustrator - CS3, CS2
Adobe Dreamweaver - CS3

Adobe Photoshop CS3Adobe Photoshop CS3 keyboard shortcuts:


Adobe Photoshop CS2 Adobe Photoshop CS2 keyboard shortcuts:

Adobe Photoshop CS Adobe Photoshop CS keyboard shortcuts:

Adobe Photoshop 7 Adobe Photoshop 7 keyboard shortcuts:

Adobe Illustrator CS3 Adobe Illustrator CS3 keyboard shortcuts:

Adobe Illustrator CS2 keyboard shortcuts:
Adobe Dreamweaver CS3 keyboard shortcuts: