Previewing Pages in a Browser in CS5

This tutorial will illustrate previewing pages in a browser in Dreamweaver CS5

As you work on a page, you'll get to a point where you want to see what it will look like in a browser. You don't have to use a separate browser for this, as Dreamweaver provides a couple of facilities for just this purpose.

Let's open Page-1.html in Design View. To the right of the set of three view buttons is another labelled Live View. Click that and you will see your page in Live view.

This is a non-editable view, i.e. you can't change the content of the page in Design view at the same time. However, you can still make changes in Code view, and (as we'll see later) you can follow links to other pages, and even edit those pages. Live view is also really useful for viewing Live Code, but more of that later as well.

What will also often be of interest is to see how your pages look in specific browsers such as Firefox, Internet Explorer and Safari. To do this you use the Preview in Browser feature.

To use this feature, click on the File menu and select Preview in Browser.

You will then see a fly-out menu that includes a list of installed browsers.

Choose from the list and you will see a preview of your page in that browser. Here I've chosen Internet Explorer (IExplore).

I can see exactly what my web page is going to look like in IE. If you're looking for broad usage of your web pages, you may well want to test them in a number of browsers, and in several versions of some of those browsers. Not all users have the latest version of a browser!

To support testing with more browsers, you can download and install them on your PC.

However, from within Dreamweaver you can now access a new facility called Adobe BrowserLab. This gives you access to testing using different browsers and operating systems. You access it using the option on the fly-out menu from Preview in Browser on the File menu, although you must be connected to the Internet as it is an online service.

You need your Adobe ID to log in, but then you have access to a range of browsers. At the time of writing the list is as shown here.

I can choose the browser and version I want to test in, and I don't need all those browsers and versions installed in my PC.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Dreamweaver CS5 Tutorial

Share this Webpage

This site proudly build with Site Build It!