My Blog for your Knowledge

We'll make sure your website works for you...

The Road to Web designing

Art Illustrations

Do you want to look great?

28 January 2011

10 Useful Dreamweaver Tips & Tricks For Beginners

A Dreamweaver user will definitely reckon what a powerhouse it is. Packed with tonnes of features, options and debatably one among the most well known IDE (Integrated Development Environment) in today’s market. It may not meet the criteria that some developers demanded however, Dreamweaver undeniably provides a decent range of development, collaborating and coding tools. These options and tools are hidden under layers of regrettable less intuitive menus, which is why we are providing tutorials in today’s post.

live code 10 Useful Dreamweaver Tips & Tricks For Beginners

We will show you some of the most powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly. Full list after jump.

1. Dynamic View with “Live View”

We already know that DW offers a static view of our open files, but what about "dynamic views" of an application such as WordPress?

First, we need to tell DW what settings to use to present our"dynamic views" correctly. To do this, select HTTP Request Settings from the View > Live View Options menu, then enter the GET or POST parameters you need to view your application correctly.

live view options 10 Useful Dreamweaver Tips & Tricks For Beginners

Then by switching to Live View in DW, it replaces the old Design View pane with a live, pixel-perfect WebKit rendering of your page; complete with live Javascript, DOM manipulations, database queries, server-side code, and rendered CSS, rather than the placeholder icons you see in Design View.

live view 10 Useful Dreamweaver Tips & Tricks For Beginners

2. "Code Navigator" is DW’s Firebug

Taking it a step further is all about the Code Navigator and when in the Live View window, ALT-clicking (Command-Option-clicking for Mac) anywhere in the window, instantly presents the code that rendered that item. Similar to what you might currently see in Firefox/Firebug.

live view3 10 Useful Dreamweaver Tips & Tricks For Beginners

3. Freezing JavaScript

Due to the dynamic nature of Ajax, many times we need to interact with a page where certain items are not rendered or available on first page load. These are items that are injected into the page some time after page load. Here’s an example:

You might want to change the styling of a tool tip that is implemented entirely in JavaScript. Before today, you’d have to methodically search your way through your scripts to find what was being created and where.

Instead, try this:

Render your page in Live View, then hit F6 to Freeze JavaScript at any time, allowing you to target and dissect the code relating to any dynamic item in the page.

freeze javascripts 10 Useful Dreamweaver Tips & Tricks For Beginners

4. Live View’s Next Best Friend – "Live Code"

When using Live View, you can also turn on Live Code. Live Code will update your code as you hover, click and interact with elements and items in the Live View window!

live code 10 Useful Dreamweaver Tips & Tricks For Beginners

5. Automatic JavaScript Completion

Dreamweaver comes with an intelligent and complete HTML and CSS code completion, but what about Javascripts? If you code jQuery or Prototype in Dreamweaver, then you should know there are API extensions that provide Javascript code completion. It reduces the typing needed and can come in pretty handy for fast coders.

Click here to read more, or download:

auto code completion 10 Useful Dreamweaver Tips & Tricks For Beginners

6. Beautify Codes On The Fly

Does your code page look like unorganized, messy lines of code? Use the Apply Source Formatting feature and reformat it exactly to your preferences. To quickly clean them up, click the Format Source Code icon at the bottom of the Coding toolbar (Edit > Toolbars > Coding) and select Code Format Settings to set your preferred formatting.

You can also access the formatting option from Commands > Apply Source Formatting or only apply it to a select block of code by selecting the Apply Source Formatting to Selection option.

source formatting 10 Useful Dreamweaver Tips & Tricks For Beginners

7. Get widgety

Just click the Extend Dreamweaver icon (it looks like a gear) in your Application Bar and select Browse for Web Widgets. This will take you to the Adobe Exchange where you can find additional widgets from vendors such as Yahoo!, JQuery, and many others.

web widgets 10 Useful Dreamweaver Tips & Tricks For Beginners

8. Subversion & Dreamweaver

And yes, Dreamweaver does support Subversion (SVN). For developers who uses SVN to maintain revision control of their project, this could be a good news. Dreamweaver developer Andrew Voltmer discuss how you can use Subversions with Dreamweaver.

subversion with dreamweaver 10 Useful Dreamweaver Tips & Tricks For Beginners

9. No More Redundant Styles

Many people use Dreamweaver as a way to update content visually, like a word processor. Before Dreamweaver CS4, this could result in redundant CSS rules like .class1, .class2, and so on. In Dreamweaver CS4, just switch your Property Inspector to HTML mode (click the HTML icon on the left of the Inspector) and you’ll say goodbye to all that redundant CSS, inserting only appropriate HTML markup.

10. Form Validation made easy

Want to validate your form fields, but worried that you’ll have to rebuild from scratch? No worries. Simply select an existing form element, such as a text field, and apply a Spry Validation widget from the Insert > Spry menu. Then control validation requirements such as minimum or maximum characters directly from the Property inspector.

spry validation 10 Useful Dreamweaver Tips & Tricks For Beginners

Bonus: 3 more

11. Access Related Files Easily

When you open an HTML or PHP file, you will now see a row of dependent file names, such as CSS, Javascript and even included files for PHP, at the top of the document window. You can easily switch to these files, make changes and save them, all without even opening them up. When you click any file in the Related Files bar you will see its source in Code view and the parent page in Design view. Or use Code Navigator to quickly access CSS source code that affects your current selection.

related files 10 Useful Dreamweaver Tips & Tricks For Beginners

12. Check browsers compatibility

Open the document you want to check for compatibility; from the same menu bar where Code / Split / Design views are accessed, look to the far right for ‘Check Page‘ button.

check page 10 Useful Dreamweaver Tips & Tricks For Beginners

Clicking it will expand a drop down menu, select ‘Check Browser Compatibility‘. The Browser Compatibility results window will show at the bottom of the window with any issues that you need to address.

Note: This will NOT check new versions of IE on Mac! To select which browsers to use for testing, select Check Page > Settings from the menu.

13. Preview PHP Pages

Dreamweaver allows you to run and preview PHP codes within the software. Here’s how to get it setup.

php 10 Useful Dreamweaver Tips & Tricks For Beginners

Getting started

  1. First, select Site -> New Site from the top navigation.
  2. You’ll see both the Basic and Advanced Site Definition option tabs. Let’s proceed by selecting the Advanced Site Definition tab.
  3. Enter a folder name for the site in the appropriate box (for this example we’ll use "myphp" as the folder name).
  4. Create another folder named "images" by entering its name in the ‘Default Images Folder’ field.
  5. Under the Local Info, input the following values in the fields:
    • Site Name: the name of the site. To be used in Dreamweaver only
    • Local root folder: This is the name of the site you will be working in. Be sure to name sites in a way to minimize conflicts, or confusing names.
    • Default Images folder: This is optional, but it’s advised to create it now as most sites will use images to some extent. This is where DW will ‘look’ to insert images in your documents during the coding phase.
    • Links Relative to: This defines how document linking in Dreamweaver will be handled. You can select either Document or Root. The differences between the two are:
      • Document Relative – Will insert a path relative to the file you are working and the item being linked to.
      • Root Relative – Uses / which causes the document/file to be linked in relation to the ROOT folder.
      • Another alternative is to add some configuration to the server configuration files. Being a more advanced task, we’ll just stick to using Document-relative for now.
    • HTTP address: enter the site root folder for your project
    • Case-sensitive links: Dreamweaver will check if any file in the project can have Case-sensitive issue when uploading to the server. Notifications will be shown when you use: Site -> Check Links Sitewide. You can leave it checked if you want. I personally don’t leave it checked as I always name files in lowercase. Uppercase letter is not recommended.
    • Cache: Check Enable cache.
  6. In the Remote Info page, either setup your FTP or other access to a remote server or leave the Access to None.
  7. In the Testing Server page select the option that relates to the file type/system you will be testing.
  8. Version Control will not be used for this example so you may leave it blank unless familiar with it.
  9. Cloaking allows you to place .psd, .fla, and other source files within your sites folder and DW will disregard them when uploading/updating your site.
  10. Design Notes are ideal for a web design team as it retains note on changes made to the files. It’s checked by default and fine for us to use this way.
  11. Leave File View Column, Contribute, and Templates as default.
  12. The Spry page simply points to the Spry assets folder which is automatically included with Dreamweaver. There’s no need to change this. Once every setting is finished, click OK.

Preview PHP in Dreamweaver

Now open a PHP file and make the needed changes to it. To view this file in Dreamweaver simply press F12 and the results will show in your default browser. You can change which browser is used in Edit -> Preferences -> Preview in Browser. This allows a faster edit-to-preview time, eliminates the need to type long URLs into your browser bar or to use another server software to render the PHP files, all of which save time!

That’s all. Happy Dreamweaver’ing :-)

25 January 2011

30 Adobe Flash Tutorials for Creating Menus and Navigations

Upon surfing the net, the navigation and the menu plays a vital role in assuring that
the viewer or surfer’s experience upon his visit to the site is unforgettable. More
likely, the cooler and easier the navigation is, the more viewers that will appreciate.
Admittedly, it is one of the important factors to be considered thoroughly.

With the various techniques offered in presenting the navigation feature for your
website we have collected 30 Adobe Flash Tutorials for Creating Menus and
Navigations
with tips on how to make navigating your website enjoyable and
hassle-free through flash. Learn the basics and get the most useful techniques
for creating this type of navigation through this tutorial. Check out these fun and
cool tutorials and make learning enjoyable!!!

Flash Menus and Navigations Tutorials


Colorful Menu with XML and Actionscript 3

colorful menu

Learn to create a nice colorful Flash XML menu with ActionScript 3 through
this tutorial

Advanced Color Menu in Flash with Sound

advanced color menu

This is a step by step action script lesson, where you will learn to create very
advanced and modern flash menu with sound

Advanced XML Menu with Actionscript 3

advanced xml menu

In this tutorial you will learn to create an advanced XML menu by setting up
everything ready in Flash, create the XML file and finally add some ActionScript
3 for the functionality.

Build a Versatile Actionscript 30 Menu with Masking

actionscript 30 menu

Here is an illustration of a quick and solid way of using basic ActionScript
skills, blended with a bit of your creativity, to construct intuitive & user friendly
navigation systems

Infinite Gallery Menu

infinite gallery menu

This new and interesting Flash and ActionScript 3 tutorial illustrates how to
create an infinite gallery that will also work perfectly for menus and so on.

Glow Flash Menu

glow flash menu

This tutorial is on creating advanced glow flash menu using the Action Script
code.

Vista Menu in Flash

vista menu

Above is a video tutorial on how to make Vista Menu similar to Setup Installation.

Advanced and Powerful Flash Menu with Sound

flash menu

In this tutorial, an illustration on how to make very advanced and very modern
flash menu with sound is provided.

Glass Aero Flash Menu with Fade Effect

flash menu

Learn how to make vista aero flash menu with awesome fade effect in Flash
CS3 through this tutorial.

Modern Horizontal Flash Menu

horizontal flash menu

The above tutorial will guide you to create a cool animated horizontal menu
using ActionScript 3 for the animation.

AS3 Drop Down Menus

drop down menus

Take a look at how to build a Flash Actionscript 3.0 Drop Down Menu through the techniques offered by this video tutorial.

Very Advanced Business Flash Menu

business flash menu

A detailed lesson made for Flash 8 is illustrated in the above tutorial with tips
on how to create a really cool, attractive and advanced business flash menu
which you can use for any web site.

Black and Orange Flash Menu

black orange flash menu

The above tutorial is on creating modern black and orange flash menu using
some special flash tips and tricks.

Cubic Menu

cubic menu

In this tutorial you will learn to create cubic flash menu using the Action Script.


Funky Flash Website Tutorial

funky flash website

Learn to create a funky and flashy website using the techniques provided in
this tutorial.

How to Create a Flash Menu in 20 Minutes

flash menu 20 minutes

Here is a 20-minute technique that you can use in creating flash menu.

Modern Photography Menu with Filter Effects

modern photography

Create very modern and advanced photography flash menu with this tutorial.

Advanced Flash Menu with Effects and Sound

advanced flash menu

Another detailed flash lesson on creating advanced and trendy flash menu
with sound is illustrated in this tutorial.

Shaky Flash Menu with Actionscript 3

shaky flash menu

Learn to create a cool looking shaky menu with ActionScript 3 through this
tutorial.

Professional Menu with Effects in Flash CS3

professional menu

Here is another video tutorial on creating flash menu in flash CS3 is illustrated
in this tutorial

Trendy Photography Flash Menu with Sound and URL

trendy photography

Learn to create advanced and trendy photography flash menu with sound
and URL which can be used for any web site with this tutorial.

Vertical Menu with Actionscript 3 and XML

vertical menu

The tutorial illustrates how to create a vertical menu with the help of XML and
ActionScript 3.

Black Menu Flash Tutorial

blackMenu flash

In this Flash tutorial you will be shown how to create a black navigation menu.

Create a Mac Dock Style Menu with AS3

mac dock menu

The tutorial is on creating a menu like Apple’s Dock using AS3 classes

Rotating Menu Via Actionscript 3

rotating menu

The tutorial is on creating a rotating menu.

Blue Flash Menu with Sound

blue flash

Learn how to make a powerful flash menu with sound through this tutorial.

Advanced DD Menu Flash Tutorial

add menu

The above Flash tutorial is on creatng a drop down menu using Actionscript
where you’ll be expected to know some of the basics, such as creating an MC
(movieclip symbol), using labels on the timeline etc.

Full Flash Menu with Sound and URL

full flash menu

Learn to create full flash menu with sound and url with this tutorial.

How to Make Animated Menu in Flash CS3

animated menu

Here is another video tutorial on making a cool Animated Menu in Flash CS3
using some Action Script coding.

Wooden Flash Menu

wooden flash menu

This tutorial is on creating an advanced wooden flash menu.

22 January 2011

A Collection of PSD to Html Conversion Tutorials

More and more designers are into creating their own blogs and websites either to
showcase their works or to advertise. At this pace, it is quite important that as
designers who are interested in blogging, one should learn the basics in PSD to
HTML
, turning Photoshop designs into HTML format. If you are equipped with this
technique, you will be able to simply turn your designs into codes that are good
enough to turn into active blogs or sites.

This new post is a compilation of tutorials on converting PSD into HTML.
Learn the basics of this technique to apply them to your designs and be
one-step ahead from the rest… Enjoy!!!

PSD to Html Conversion Tutorials

Coding a Band Website Created in Photoshop

coding band websites

In this tutorial learn how to take PSD and turn it into clean and working
XHTML and/CSS code.

Converting a Design From PSD to HTML

converting a design

This tutorial will show you the step by step process in converting it to HTML.

The Design Lab PSD Conversion

design lab psd conversion

The tutorial will be able you to learn hot to code design lab layout.

Web Design Layout 9 Sitebuild

web design layout site

Through this tutorial you will know web design layout 9 sitebuild.

Encoding a Photoshop Mockup Into XHTML CSS

photoshop mockup html

Being curious in this tutotial images can be created in pure XHTML and CSS
and its uses.

From Photoshop to HTML

from photoshop to html

In this tutorial you may learn on how professionals converted their designs
from photoshop to CSS and HTML.

Coding a Clean Web 20 Style Web Design From Photoshop

clean web 20 style

Creation of the layout in Photoshop and converting the layout into a standards
-compliant (X)HTML web design can be learned in this tutorial.

Portfolio Layout 4 The Code

portfolio layout code

In this tutorial portfolio layout and the code can be taught.

PSD to CSSHTML in Easy Steps Part 1

psd to css html

This tutorial, converting PSD to CSS/HTML can be learned in Easy Step Part 1.

Coding a Clean Illustrative Web Design From Scratch

clean illustrative web design

In this step-by-step tand comprehensive web development tutorial, professionals can convert photoshop mockup web layout design featuring an illustrative landscape header.

How to Convert a PSD to XHTML

how to convert psd

Converting PSD to XHTML in this tutorial is what you will learn.

Slice and Dice That PSD

slice dice that psd

Slicing up a PSD, dicing it for the web and serving on a warm hot plate can be learn in this video tutorial.

Build a Sleek Portfolio Site From Scratch

sleek portfolio site code

Taking PSD file and making it with some nice clean HTML and CSS you
learn in this tutorial.

How to Code a Dark and Sleek Web Design

how to code dark website

To create a beautiful dark and sleek web layout using standards-based HTML and CSS can be learned step-by-step in this tutorial.

Portfolio Layout 10 Kearn to Code

learn to code html

Here are the steps to be taken in slicing and coding the layout, but before
that it is most important to create first the layout and have it ready before
action. It is then learn in this tutorial.

Create a Killer Band Dite with Frupal Introduction

create band site

Learn how to create a killer band site with drupal introduction.

CSS Gradient Text Effect

css gradient code

You will also know CSS Gradient text effect in this tutorial.

How to Convert a Photoshop Mockup to XHTML CSS

mockup convert psd

We will start with exporting the graphics, after it produces the structure with the most antural HTML elements to style it up with CSS in building the homepage in XHTML/CSS.

Corporate PSD to HTML

corporate psd to html

The process of coding design in HTML and CSS will be learn in this tutorial.

12 Converting a Photoshop Mockup Part Two Episode One

mockup part two

In this tutorial, we will know 12 converting a photoshop mockup.

Minimal and Modern Layout PSD to XHTMLCSS Conversion

minimal and modern layout code

The process for converting a photoshop mockup to working HTML/CSS
template can be seen in this web design tutorial.

Advanced CSS Menue

advanced css menu code

One of the topic of this tutorial is on how to slice up the menu design step-
by-step and put them together with CSS.

PSD HTMLCSS

psd html

Learn PSD HTML/CSS in this tutorial.

1 Converting a Photoshop Mockup Part 1 of 3

photoshpo mockup

In this tutorial web you will learn to to convert photoshop mockup.

How to Convert a PSD to XHTML

convert psd video

To learn on how to convert a PSD to XHTML just see this tutorial.

From PSD to HTML Building a Set of Website Designs Step By Step

psd to html building

Learn the entire process of getting from photoshop to completed HTML.

How to Code a Grunge Web Design From Scratch

code grunge website

Create beautiful and eye-grabbing grunge theme layout with this tutorial.

Tutorial Coding a Layout

tutorial code layout

Learning on how to analyze either a new template, or even current layout finding the best way to code it in the web tutorial.

Coding Corporate WordPress Style Layout

wordpress style layout

Everything you will learn on how to code the corporate wordpress style
layout into XHTML and CSS in the tutorial web.

72 Building a Website 2 of 3 HTMLCSS Conversion

building a website coding

Construct a website by converting HTML/CSS.

How to Code Up a Web Design From PSD to HTML

web design from psd

You will learn on how to code up a web design from PSD to HTML.

Coding Design Lab TV Styled Layout

coding design lab tv

To code the design lab TV styled layout into XHTML and CSS can be formed
in this tutorial.

Design and Code a Slick Website From Scratch

slick website from scratch

Encode the designs into a standards-compliant, cross-browser XHTML,
CSS and Java Script/ Query layout, Fire up Coda, or your editor of choice.

How to Create a Horizontally Scrolling Site

scrolling site coding

Learn how to create a horizontally scrolling site.

CSS Layout

css layout coding

The process of creating a fully functioning CSS layout can be taken step-by-step.

My Project PSD to HTML

my project to html

Learn how to convert PSD to HTML.

Follow on Buzz