web publishing intermediate 1 -...
Post on 31-Jul-2020
17 Views
Preview:
TRANSCRIPT
Web Publishing Intermediate 1
Dreamweaver Templates, More Styles, The Box Model
Jeff Pankin
Information Services and Technology
Page 1
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.
Page 2
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.
Page 3
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.
Page 4
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.
Page 5
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.
Page 6
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
Page 7
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
Background Background color: your choice
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
Property Category Property: Value
Type choose font, text color, size and
spacing: your choice
Block Vertical alignment: top
Apply .cell-main to the middle row, right cell <td>
Define the .cell-footer Style
Create a class style named .cell-footer
Property Category Property: Value
Block Vertical alignment: top
Apply .cell-footer to the bottom row <td>
Page 8
Create a Style for the Layout Table
Define a class style named .layout-table
Property Category Property: Value
Background Background color: your choice
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.
Page 9
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
Property Category Property: Value
Background Background color: your choice
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).
Page 10
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
Property Category Property: Value
Type Size: 16px Weight: bold Line height: 25px Color: your choice
Decoration: none
Background Background color: your choice
Block Whitespace: nowrap Display: block
Box Padding: 3px Width: 125px
Border Style: solid Width: 1px
Color: your choice – try a darker color
Page 11
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
Page 12
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.
Page 13
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/
Page 14
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.
Page 15
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/
top related