Using Adobe BrowserLab with Dreamweaver CS5

• Dreamweaver CS5 & CS5.5

BrowserLab is an additional online service offered by Adobe and now integrated with Dreamweaver CS5, allowing users to preview any page in multiple browsers across multiple platforms. BrowserLab ensures cross-browser site compatibility and enables users to preview and compare page design screenshots individually or in grouped browser sets.

Opening BrowserLab

To open Adobe BrowserLab:

1. Go to the Window menu.
2. Select the Extensions option.
3. Click on Adobe BrowserLab.
4. Click Preview on the BrowserLab panel to open a browser to the BrowserLab website.

Alternatively, you can also:

1. Go to the Document toolbar.
2. Click the Globe icon.
3. Select Preview in Adobe BrowserLab. It will redirect to the BrowserLab website.

The first time BrowserLab is accessed, there will be a prompt to log in with your Adobe ID and password. Once logged in, Dreamweaver will upload the open page into BrowserLab's staging server and then take screenshots in the designated browsers.

Customize Browsers

The top left corner of the BrowserLab window will show the name of the browser you are currently viewing. You can preview other browsers by clicking on the down-pointed triangle beside the browser name.

To choose a different set of browsers:

1. Go to Browser Sets.
2. Select Add New Browser.
3. Name the new setlist.
4. Check the boxes on the browsers you'd like to use for testing.

There is no limit to the number or sort of browsers that can be added to a setlist.

Preview in New Browser Setlist

To preview a page using a new browser setlist in BrowserLab:

1. Click Test.
2. Click on the small Refresh button within BrowserLab.

Dreamweaver will resend the information site information to BrowserLab, and new screenshots will then be taken.

Delaying Snapshots

In the upper right-hand corner of the BrowserLab window, there is a delay option that allows users to prolong the timeframe before BrowserLab takes a snapshot of the page. It ensures that items such as AJAX widgets or complicated CSS have a chance to load.

Other Features

Other notable features of Adobe BrowserLab include:

• Ruler Guide - allows users to see how elements on their webpage align and size up in designated browsers. Users can activate it through the View > Show Rulers.
• 2Up - allows users to preview their site in browsers simultaneously. This view allows the use of other tools such as Ruler Guide and Onion Skin.
• Onion Skin - allows users to overlay the designated browser previews from 2Up atop one another to display the slight differences between the two previews. This feature enables the fine-tuning of object placement and text.

Dreamweaver is a popular program for creating websites and applications from Adobe. It supports HTML5, CSS3, PHP, FTP, jQuery, and more, and works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.