# StepWiser Guides

Dreamweaver CSS 2017: DW 102

By Peter Hulm

Quick start

What, no versions info? Well, you can download a 30-day trial of the latest version from the Adobe site. So I won't go into that.

I am also going to take it that you know your way around the Dreamweaver screen. If not, take Adobe's tour, care of lynda.com.

So I'll start with some tips you may know but maybe haven't tried yet.

Remove extra furniture

1. F4 is the toggle key that removes all the extra furniture around your Dreamweaver page.

Here's the layout I normally work with. It also shows what happens when you toggle F4.

Code inspector

2. The latest versions of Dreamweaver have a number of changes designed to make the program easier to work with.

F10 brings up the Code Inspector as before. But now it is a fully fledged code viewer with the capacity to format content, view pages in any browsers you have put into your list, highlight invalid code and indent code intelligently. See the dropdown lists indicated in this screenshot:

code navigator

Screenshot of page with Design View and Code Inspector

Toggle between Live and Design View with Ctrl-Shift F11. See the tools page for more details.

Output window

One of the most useful additions to the latest version of Dreamweaver is the Output Window. It is found as part of the Results option in the Window Menu, or with Shift F6. This opens up a panel at the bottom of your screen and warns of any problems.

The new Dreamweaver: a guide

The handiest of Dreamweaver's tutorial guides to its new capabilities is here: it dates back to 2016 so you may kick yourself for not using some of the facilities before.

Emmet for CSS

When writing CSS the Emmet shortcut system is extremely handy because it often guesses what you need to use.

Back to top # Previous Page