Fonts and Styles Early browsers recognized
a handful of fonts and sizes. The standard styles of bold, italic
and underline were also recognized. The webmaster would enter the
<font> tag with attributes to change the font face, size or
color every time there was a change of font in the document. With
good design practice, the smae fonts were used on comparable webpages
throughout a website. As the webmaster changed the design and the
fonts within a website, the webmaster would have to go through every
page and change every <font> tag. Needless to say that was overwhelming.
For example:
<font color="#0000FF" size="3"
face="Arial, Helvetica, sans-serif">Being Stylish</font>
would generate Being Stylish
Enter Stylesheets Stylesheets entered
the arena and made it possible to define a font, size, color and other
features somewhere central and by identifying all similar fonts within
all webpages, one could simply change the style of all similar fonts
within all webpages. The webmaster could establish a separate document
which contains all the relevant information about text and some formating,
and all have all .html document refer to that document for that information.
This also allowed the webmaster to change the coding for the font
in one location in one document and it would automatically change
the font and format in all .html documents, hundreds of documents
if that be the case. The information could be identified by a name
making it easer to reference. There is
a disadvantage: the webmaster must plan ahead the use of fonts and
formats, their similarities and their differences on the webpages.
Using DreamWeaver To work with a Cascading
StyleSheet (CSS) in DreamWeaver one chooses Text in the menu bar and
then CSS Styles in the drop-down menu. To establish a CSS, next choose
New CSS Style... A new screen will appear and you will give name to
a new style. You will use this name for a particular part of the webpage
and a easily identified name is best, such as body, or title, or links,
or heading. For now we will use Make Custom Style (class) as the type. There are
two choices at the bottom of the screen: Define in: (New Style Sheet
File) or This Document Only. "This Document Only" will place
the code in the <head> of the document that you are working
on and will apply only to that document. Changes to that coding will
affect only the style in that document. If you wish to be more universal
and affect several or many .html document, choose "(New Style
Sheet File)." You will give the file a name and save it in your
cse625 folder in the public_html server. In some manners, there are
similarities between images and cascading stylesheets: they must be
uploaded onto the server so that the .html document may access it. As you can
see your choices at this point are overwhelming. At first make decisions
only on the font face, size and weight. As you become more comfortable
with this process, try other features including those in the left
column; like background and border, etc. Most of that you don't need
for now. Once you have
defined this style in the CSS stylesheet, highlight the text to which
you want to apply this style, choose Text>CSS Styles and finally
the name of the style you wish. To change the
style under this name, choose Text>CSS Styles and Edit CSS Style...
and proceed as you did when you created this style. After saving the
changes, any font that is connected to that style by that name, will
change automatically when you reopen the webpage.
Assignment Four
Now that we've explored
the use of text, images, links, cascading style sheets, templates,
library items and image maps, your assignment is to practice using
them. For this assignment content is not that important. It is the
process that is important. First create a new
HTML page in DreamWeaver. Include a simple table (maybe 2 by 2), an
image, a text to serve as a header, a text to serve as a title, and
a brief sentence to serve as the body . Save this document as apriltest.html
or apriltest.htm in your folder for this class.
Next create a CSS
by selecting CSS Styles under the Text item in the DreamWeaver menu.
Create a New CSS, name the first one headertext and Define in aprilcsstest.
Define the font as large and bold and some special color. Save HTML
document for safety purposes. Create another CSS
style for the body by selecting CSS Styles under the Text item in
the DreamWeaver menu. Choose Edit CSS, select aprilcsstest.css and
click on Edit. On the next screen click on New
and define another font as small and easily readable. Again have HTML
document for safety purposes.
We're going to make
this document a template for use with several webpages.
We need to decide which portion of the webpage will change as the
template changes, therefore on all pages, which which areas of the
page will be unique to this page. Highlight an area that will be unique
to each individual page, select Insert in the top menu and select
Editable Region. Name the region and click OK. Now save this as a
template in the same folder. Create a new HTML
document, select your template in the right side of the page and apply
it. Make changes to the Editable Region and save as an HTML document
in your same folder. Double click on
your template in the Files window to edit the template. You can make
changes to any part of the template and that will be reflected on
all pages using the template. You can add more Editable Regions.
Choose some text
that you will repeat many time on your webpages. Select the library
icon in the Files window on the right and click on the little icon
to the right of the word Files to add a New Library
item. Name this Library item. This assignment
will be accessed on the code that indicates that you have used a style
sheet, a library item and a template.
This is due April 29-30.
Office hours: Tuesday - noon-4:00PM
Wednesday - 8:00AM-noon
Thursday - noon-4:00PM
Also by appointment and drop-ins
