< StepWiser Guides: Dreamweaver 102: Responsive design

# StepWiser

Quick Guide to Dreamweaver CC 2017+

By Peter Hulm

Responsive design

This is how you go about ensuring you have a good-looking website on a cellphone, tablet or desktop.

Dreamweaver CC 2017 allows you to see how your page might appear with one mouse-click:

screen sizes
Click image for larger view

In designing your page, start with the smallest screen size, because this will probably need most care to look attractive and inviting.

Dreamweaver has its own 25-minute tutorial on the Internet. So you can use that to get up to speed. It's from an enthusiast for Dreamweaver. So don't expect a critical view.

For example, it would better for the automated coding to put a semi-colon after your CSS specifications by default, since that is what you usually need to do (not always, by the way, as he asserts), instead of forcing you to do it manually.

Nor is it all as automatic as he suggests: if you don't have the stylesheet in the same directory as the html page, for instance — and DW's recommended style is to put stylesheets in a separate assets/css directory. This seems like an idea that was considered and then dropped somewhere along the line. In creating your site map you can specify a default directory of images, for example, but not what would be more useful: for stylesheets.

While we are looking at it, you should be familiar with the snafus of Dreamweaver coding, too. That is, when you use the helpful prompts in specifying classes, it won't put the closing tag after your selection.

You also need to review the naming conventions you use. Calling a stylesheet styles.css, as DW's tutorials suggest, is not a good idea. I tend to use the website name, perhaps with an additional identifier, e.g. dw2017.css, since I'm using the 2017 facilities. In the stylesheet, if I use the class style-logo I would add a comment explaining what it aims to do, without you having to read the code.

Menus

Your menu system is likely to be a major design worry, since it is likely to vary in form depending on the size of the screen.

 

 

 

Back to top up to top Previous Page