Contact: Anne Shroeder
Email: anne@language-works.com
Tel: +1 (301) 755-8400

PO Box 162
Boyds, MD 20841

Exercise 2: Layout Exercises using very basic graphical comps:

• Comp 1
• Comp 2
• Comp 3

Main Menu

Hot keys or shortcuts are great timesavers. Most people know about the common ones:

ctrl+c=copy
ctrl+x=cut
ctrl+v=paste
ctrl+s=save
ctrl+z=undo
ctrl+y=redo
F5 = refresh browser window

Additionally, Dreamweaver offers a few hotkeys of its own:

F4=change editing window to full screen (or back to multi-paned screen)
F12=Preview page in a browser
ctrl+ =zoom in
ctrl- zoom out

You can view a large number of existing hotkeys and customize your own by going to Edit-> Keyboard Shortcuts.

Code control

You can customize your code generation and editing experience to a very granular degree by going to Edit->Preferences.

• Code format enables you to control the spacing, line spacing, and case of any generated CSS and HTML code. You can even configure the ways that standard HTML tags are written out.
• Code hints is a helping tool for rapid development – you can configure at what point (or if) hints are provided.
• Code rewriting helps you handle special characters and even incorrect code.
• CSS styles gives you the option to automatically create shorthand notation for definitions (e.g. margins, fonts, etc.)

There are many other options in the Preferences section whereby you can customize your own editing experience.

Main Menu

Here are some step by step instructions for creating a div-based layout in CSS:

1. Insert <div> tag (using menu or icon at top of screen)
2. Name the div something meaningful (in terms of its function) – no special characters or spaces
3. Click on “New css rule”
4. The name will be displayed as #containerName – you may opt to create this in a separate style sheet, or as part of an embedded style in this document only.
5. The dialogue box for styles appears.
6. Define the parameters for the container
   • width
   • height (a temporary measure in order to properly see the container – you will likely delete this later)
   • background color
   • margins
   • padding
   • floats
7. Click on OK to insert the container; this will insert both the HTML and the CSS with all the styles you defined.

Notes:

• Dreamweaver inserts sample text for you that gives you a placeholder for the container.
• Generally you won’t want to retain a height definition of a container unless you are sure it will not expand vertically with content (e.g. header, footer)

Tricks:

• If you want your entire page to align flush to the top and left, define your body tag as margin:0; padding:0;
• If you want your container to be centered in the page, give it a specific width and define it with margin: 0 auto;
• If you have a series of floated containers, but have a footer that extends across the page, make sure to include clear:both in the footer definition.

Main Menu

Key points to remember when using Dreamweaver:

• There are at least 2-3 different ways of doing the same thing, and no single way is “the right” way; find what is a comfortable method for you and use it.
• You have a great deal of control over your display and your code generation through the Preferences menu.
• Dreamweaver offers 360 degree development; any file you edit in a different editor (notepad, textpad, even remotely on the server) can always be brought back into Dreamweaver (any version) and edited successfully.  Any file you edit in Dreamweaver can also be edited in a different editor.
• There are many features in Dreamweaver that you need not worry about; users just starting out with the software may want to consciously “block” all but the most immediately needed tools.
• The “help” in Dreamweaver is not always especially helpful.  Google is a better friend.
• Do not always rely on the WYSIWYG editor in Dreamweaver; especially when doing CSS-based layout, Dreamweaver will “lie” to you about the display.  Always check your display in live browsers.  (NB Dreamweaver’s  live view is also not especially useful).
• Dreamweaver cannot be completely controlled; it sometimes inserts code that you do not want, and does not allow you to remove it except through the Code view window.  A solid knowledge of HTML is key to optimum use of Dreamweaver.

Main Menu

Dreamweaver CS4: The Missing Manual by David Sawyer McFarland
Extensive reference book

Adobe Dreamweaver CS3 Hands On Training by Garrick Chow (Lynda.com)
Step-by-step instructions

Adobe Dreamweaver CS4 Digital Classroom by Jeremy Osborn & Aquent Creative Team
Training book – extensive instructions and DVD rom included

Main Menu

#totalcontainer {
width:980px;
margin:0 auto;
}
#mainbody {
background-image:url(images/bg_maincontent_full.gif);
background-repeat:repeat-y;
float:left;
}
#banner { border-bottom: 1px solid #c0cbdb; }
#leftnav {
width: 229px;
float:left;
min-height:800px;
}
#wrapper {
background-image:url(images/sailboat.jpg);
background-position:bottom left;
background-repeat:no-repeat;
float:left;
}
#maincontent {
width:751px;
float:left;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 67.5%;
color: #000;
background-color: #4a7bca;
}
#maincontent p {
font-size:1.06em;
letter-spacing:.025em;
padding-bottom:5px;
line-height:15px;
}
#maincontent a {
color:#133d97;
text-decoration: underline;
}
#advert {
/* height:181px; */
margin-bottom:20px;
width:751px;
border-bottom: 1px solid #c0cbdb;
background-color:#dae2ef;
float:left;
}

#footer {
background-image:url(images/bottom_footer2.gif);
background-position:top;
background-repeat:no-repeat;
margin: 0 auto;
padding: 22px 0 10px 0;
clear:both;
}
#advert #right {
width: 500px; float:left;  }
#advert #right h2, #advert #right p {
clear:right;
font-family:”Myriad Pro”, Arial, sans-serif;
}
#advert #right .clubId { margin-top:23px; font-size:15px;font-weight:normal; }
#advert #right h2{font-size:2em; }
#advert #right .blurb { font-size:.65em;font-weight:normal; padding-top:42px;}
#advert #right a {  color:#dd8502; text-decoration:underline;}
#advert #right  p { font-size:1.2em;font-weight:bold; }
.date { color:#dd8502; font-size: 20px; font-weight: bold; line-height: 25px;}
.name { color:#690000; }
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.5em;
text-transform:uppercase;
color:#670000;
margin: 0 0 10px 0;
clear:left;
padding-left: 15px;
background-image:url(images/prefix_h3.gif);
background-position:top left;
background-repeat:no-repeat;
float:left;
width:400px;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#124580;
margin:0 0 10px 0;
clear:left;
}
h5 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#ed1c24;
margin:0 0 10px 0;
clear:left;
}
#contentAllpages {     padding: 20px 20px 12px 20px; }

#footer p {
text-align:center;
color:#fff;
font-size:1.1em;
font-weight:bold;
letter-spacing:.04em;
}
#footer .firstLine { padding-top:36px; }
#footer a {
text-decoration:underline;
color:#fff;
font-weight:normal;
}

Exercise 2: CSS Layout practice: Use the following graphical “comps” to practice your CSS layout skills.

• Layout 1
• Layout 2
• Layout 3
• Layout 4
• Layout 5
• Layout 6
• Layout 7

Main Menu

1. Syntax errors: check both your HTML and your CSS W3C validators. Syntax problems can lead to display problems, especially in IE.
2. When checking the results of your coding, perform it in the following order:
   1. Firefox
   2. Safari
   3. Chrome
   4. Netscape (optional)
   5. IE8, IE7, IE6
   6. Opera
   7. Other
3. Ensure that IDs are used only once on a page. Use IDs (not classes) for primary space containers.
4. Redefine tags within containers.
5. Only use classes as a last resort (e.g. the exception to the rule)
6. If you have made code changes but do not see them reflected in your browser:
   1. Clear your browser’s cache
   2. Make sure that you updated the correct file and uploaded it to the correct location!
7. When you have completed your first round of CSS development, go back through the code and see if you have any redundant or unnecessary definitions.

Return to Examples page