web publishing intermediate 1 -...

Web Publishing Intermediate 1

Dreamweaver Templates, More Styles, The Box Model

Jeff Pankin

Information Services and Technology

Table of Contents

Course Objectives ....................................................................................... 2

The CIG Web Site ........................................................................................ 3

About Templates ......................................................................................... 4

Exercise: Create a Template from an Existing File ........................................... 4

Exercise: Apply a Template (to the new index page) ........................................ 5

More About Templates ................................................................................ 6

Modify a Template ....................................................................................... 6

From the Modify > Templates menu you can… ................................................ 6

Create Styles for Each Section of the Web Page .......................................... 7

Define the .cell-header Style ......................................................................... 7

Define the .cell-nav Style ............................................................................. 7

Define the .cell-main Style ........................................................................... 7

Define the .cell-footer Style .......................................................................... 7

Create a Style for the Layout Table ............................................................. 8

Additional Properties for Background Images ............................................. 8

Add a background image .............................................................................. 8

Working with Background Images ................................................................. 8

Create Buttons for Navigation Links ............................................................ 9

Styles for Navigation Links ........................................................................... 9

Create a Division with the <div> Tag ............................................................. 9

Styling within a Div ..................................................................................... 9

The Link States of the Anchor tag <a> ........................................................ 10

A few more steps to create the button effect ................................................ 11

The Box Model ........................................................................................... 12

About the Box Model .................................................................................. 13

More About the Box model ......................................................................... 13

Some shortcuts for Box property values ....................................................... 13

Understanding Float .................................................................................. 14

Things to know about Float ......................................................................... 14

Resources ................................................................................................. 15

Copyright © 2011 by Massachusetts Institute of Technology. All Rights Reserved.

Course Objectives

1. Create and apply Dreamweaver templates.

2. Use Cascading Style sheets to add background images.

3. Create rollover buttons for navigation system.

4. Apply the Box model to the use of borders, padding and margin.

5. Position an image using the float property.

6. Examine stylesheets associated with MIT websites.

7. Review MIT and non-MIT resources for help and further learning.

The CIG Web Site

The MIT Center For Industrial Growth

Home

Directory

Events

Research

News

Contact Us

About the Center

MIT and industry have a long record of cooperation through

projects ranging from joint education and research (where

student participation is often a strong component) to

intensive continuing education programs.

The Center for Industrial Growth supports interdisciplinary

research and education aimed at understanding and

improving industrial innovation and efficiency and the

education of future industrialists.

The collaboration is extensive: industry executives serve on

the MIT Corporation and its committees; MIT faculty

members serve as consultants for industry; and MIT

educates and prepares its students for careers in industry.

The relationship between MIT and industry has had an

important effect on the direction of education at the

Institute.

About Templates

Templates create a consistent look across multiple pages in a site.

A template allows you to designate areas of the page which are locked and

areas of the page which are editable.

Template files (.dwt) are native to Dreamweaver.

Exercise: Create a Template from an Existing File

1. Open the index.html document.

2. Create a new html document.

3. In the index.html page highlight the content in the middle row, right column.

4. Cut this content and paste it into the new untitled document.

5. Return to the index.html document and clear any stray tags from the content cell (middle row, right column).

6. With your cursor in the content cell choose Template Objects from the Insert menu, then Editable Region. You will get the message

"Dreamweaver will automatically convert this document to a template" - click OK.

7. Name the region Add content here. Click OK.

Result:

8. From the File menu choose Save as Template. Enter the name

cig-template in the Save as: box and click Save. Say Yes to Update links.

Note: Dreamweaver adds the .dwt extension to the file name and saves it

in a folder labeled Templates.

9. Return to the untitled document with the About the Center content. Save

this document as index.html replacing the original index document.

Exercise: Apply a Template (to the new index page)

1. Open the document you wish to apply a template to. In our case index.html

is already open. 2. From the Modify menu choose Templates then Apply Template to Page.

3. The Site should say cig-site. Select cig-template in the Templates box. Be sure the box is checked to Update page when template changes.

4. Click Select. 5. The Inconsistent Region Names dialog box appears. We will tell

Dreamweaver where the content in the index document should go when we apply the template.

6. Click on Document body. 7. In the Move content to new region pop-up menu-up choose Add content

here. Click OK.

8. Save the index page document. We just applied the document to an existing page.

Now apply the template to each of the other pages – Directory, Events, News and Research.

More About Templates

Modify a Template

1. To make a change to a template first Save All then Close All.

2. Open the template file and make your edits.

3. Choose Save from the File menu. Click Update to pass the change in the

template to all files where this template has been applied.

4. Click Close in the Update Pages dialog box.

5. Preview your changes

From the Modify > Templates menu you can…

Remove [Detach] a template from a page

Apply a template to the current page Open the template file which has been applied to the current

page Update the template applied to this page

Update the template throughout the site

Create Styles for Each Section of the Web Page

Define the .cell-header Style

Create a class style named .cell-header with the following properties and

values

Category Property: Value

Background Background color: your choice

Apply .cell-header to the top row <td>.

Define the .cell-nav Style

Create a class style named .cell-nav with the following properties and values

Property Category Property: Value


Block Vertical alignment: top

Box Width: 150px

Apply .cell-nav to the middle row, left cell <td>

Define the .cell-main Style

Create a class style named .cell-main with the following properties and

values


Type choose font, text color, size and

spacing: your choice


Apply .cell-main to the middle row, right cell <td>

Define the .cell-footer Style

Create a class style named .cell-footer



Apply .cell-footer to the bottom row <td>

Create a Style for the Layout Table

Define a class style named .layout-table



Box Width: 760px

Left and Right margin: auto

Apply .layout-table style to the entire table <table> Note: Be sure to select the entire table by clicking your cursor somewhere

inside the table and selecting the table using the Tag Selector Bar.

While the table is still selected remove the table width from the properties panel – this is the width embedded as an attribute of the table and is no longer necessary.

Additional Properties for Background Images

Add a background image

To add a background image use the style property background-image.

Working with Background Images

Notice the image repeats by default

1. Change the Background property Repeat to the value: no-repeat

2. Try the given values in the drop-down menu for background position X and Y

3. Try entering your own values in pixels for background position X and Y

4. Try the background-attachment values to see the effect of fixed and

scroll. You must preview in browser to see these effects.

5. Try different background images and colors in the layout-table and the

body.

Create Buttons for Navigation Links

Styles for Navigation Links

we want fancy links that have a different graphical appearance

we don't want to apply this appearance to all text in the nav bar nor to all links in the nav bar

we will create a special section, or division (<div>) inside the navigation cell around the links and then we will apply a new style to that <div>

Create a Division with the <div> Tag

1. Highlight the remaining links in the navigation cell excluding the text

underneath them

2. From Insert menu choose Layout Objects then choose Div Tag

3. In the dialog box leave the option to Wrap around the selection

4. In the ID: box type nav to name this division

5. Click OK and note the box around the div tag and the div#nav on the tag selector bar

6. Examine the new div in the code view

Note: An ID name is unique and may be used only once per page. The ID allows a block of code to be styled individually.

Styling within a Div

We can now use the div with the id to directly style that area alone.

Define an ID style named #nav



No need to apply the style – it happens automatically. Make sure you have added a background color from the background category (not color which

refers to text color).

The Link States of the Anchor tag <a>

The anchor tag actually has four states- link, visited, hover and active. We can

use these states to create button rollover effects.

Code What it means

a:link refers to the link in its normal state when you first see it. It's underlined and bright blue.

a:visited refers to the link after you return to it once the destination has been visited. It's a different color.

a:hover This is the state when the mouse is over the link. This allows us to create a different look for the hover

state.

a:active This is the state when the user presses on the link and may also be

styled differently. We won't be using this state.

Dreamweaver refers to this type of style as a compound style.

Define a compound style named #nav a:link


Type Size: 16px Weight: bold Line height: 25px Color: your choice

Decoration: none


Block Whitespace: nowrap Display: block

Box Padding: 3px Width: 125px

Border Style: solid Width: 1px

Color: your choice – try a darker color

A few more steps to create the button effect

1. In the cig-styles.css file add the following: #nav a:link, #nav a:visited

Note: This ensures that the visited link looks the same as the normal link.

2. Define a style: #nav a:hover with a different Background color and/or Type color

3. Test the button effect in your browser

The Box Model To ensure consistency across browsers, the w3c developed standards for the way browsers should interpret margins, borders and padding of an element. These

standards are referred to as the Box Model. http://www.w3.org/TR/CSS2/box.html

The basic idea is that every element has a margin, border and padding on the top and bottom as well as the left and right. Each of these may be styled differently using the appropriate property name.

content The content area holds the content of the element.

padding Padding creates visual space around the content.

border Border surrounds the content and padding and

gives a visual boundary.

margin Margin surrounds the border, padding and

content and allows for space between the element and other elements.

About the Box Model

1. All elements have the option to display borders, padding and margins - they are set to 0 by default.

2. Margins are transparent, picking up the color of their enclosing element.

3. Top and bottom margins are merged using the higher margin value or to

the size of one value if they are the same size.

4. There is a shorthand for designating different sides.

More About the Box model

1. A background color or image will show under content and padding but not

the margin.

2. Padding and margins may be set in pixels, percent or ems.

3. Border size may be set in pixels or by the keywords thin, medium or

thick.

4. Border styles include solid, dotted, dashed, double and others.

Some shortcuts for Box property values

to specify

sides for margin or

padding

padding: 10px; [top right bottom left all 10px]

padding: 10px 5px [top and bottom 10px, left and right 5 px]

padding: 10px 20px 5px [top 10px, left and right 20px, bottom 5px]

zero a value of zero does not require a measurement type

border border: solid 2px green [solid, green border 2px thick on all sides]

border: solid [solid black 3px border on all sides] Note: values may be in any order.

For more info on css-shorthand see: http://www.dustindiaz.com/css-shorthand/

Understanding Float

Things to know about Float

1. Elements on a web page are placed in the document flow from top to

bottom.

2. Block elements have a line break between them and span the width of the

screen.

3. An element with the float property is removed from the normal flow and

placed on the left or right.

4. Floated elements sit over other block elements and won't disrupt their

flow (although may re-route it).

5. Content which follows a floated element in the code moves up but

respects the floated element's boundaries and flows around it.

6. The clear property ensures that a floated element will be placed under (or

clear of) other block elements.

7. A floated element must have a width unless it's an image.

Resources

Books

Dreamweaver 8 (or CS4 or CS5) The Missing Manual - David Sawyer

McFarland, 2006, O'Reilly Media, Inc.

Spring into HTML and CSS -Molly E. Holzschlag, 2005, Addison Wesley

Head First HTML with CSS & XHTML - Eric Freeman and Elisabeth Freeman, 2005, O'Reilly Media, Inc.

CSS The Definitive Guide - Eric A. Meyer, 2006, O'Reilly Press

Eric Meyer on CSS: Mastering the Language of Web Design - Eric A. Meyer, 2002, New Riders

Web Sites at MIT

MIT Web Publishing Reference Pages -

http://web.mit.edu/ist/web/reference/index.html

MIT Web Publishing -

http://web.mit.edu/ist/topics/webpublishing/index.html

MIT DCAD - Departmental Consulting and Application Development

http://web.mit.edu/ist/dcad/

Element K at MIT - http://ist.mit.edu/services/training/wbt

Web Publishing Intermediate Class Resources –

web.mit.edu/pankin/www/resources

Web Sites outside of MIT

A List Apart - http://www.alistapart.com/

HTML Dog - http://www.htmldog.com/

W3C Schools - http://www.w3schools.com/default.asp

Web Monkey – http://www.webmonkey.com

Lynda.com - http://www.lynda.com/

YouTube - http://www.youtube.com/

web publishing intermediate 1 -...

Documents