Web Content Creation With FrontPage 2000

1
Web Content Creation With FrontPage 2000

• Module 2 Part 2
• By Marnie Hutcheson

2
An Introduction to Styles

• Style Sheets
• The Style element
• Inline Styles

3
CSS Background Cascading Style Sheets

• Cascading Style Sheets allow authors and readers
  to attach style (e.g. fonts, colors, and spacing)
  to HTML documents
• CSS allows style information from several sources
  to be blended together
• The Cascade defines an ordered sequence of
  style sheets where rules defined in later sheets
  have precedence over rules defined in earlier ones

4
How the Cascade Works

• Load first linked style sheet
• Process style definitions
• Overwrite existing styles that are redefined in
  current style definition
• Load next linked style sheet- repeat above

5
How the Cascade Works

• When you are finished with the linked style
  sheets, process the ltstylegt element in the ltheadgt
  if it exists
• Process style definitions
• Overwrite existing styles that are redefined in
  current style definition

6
How the Cascade Works

• Finally, process the inline style definitions,
  and supercede any previously defined styles - no
  matter where they were defined

7
CSS Background Cascading Style Sheets

• Private - Attached style sheets are not readily
  visible to the user (like the HTML code is)
• Dynamic - The style sheet in use can be changed
  dynamically using script
• Fast performance - The browser loads external CSS
  and script files into cache management so the
  information is in memory for the duration of the
  browser session

8
CSS Background Cascading Style Sheets

• Cascading Style Sheets allow authors and readers
  to attach style (e.g. fonts, colors, and spacing)
  to HTML documents
• CSS allows style information from several sources
  to be blended together
• The Cascade defines an ordered sequence of
  style sheets where rules defined in later sheets
  have precedence over rules defined in earlier ones

9
Grouping Elements
H1, H2, H3 font-family helvetica

• Selectors can be grouped
• Declarations can be grouped
• Easier syntax - same effect

H1 font-weight bold font-size
12pt line-height 14pt font-family
helvetica font-variant normal
font-style normal
H1 font bold 12pt/14pt helvetica
10
A Simple Cascading Style Sheet

• This is dhtml.css (with the basketball)

body backgroundurl("images/bball.gif")
no-repeat navy coloryellow font-size18pt h1
font-size34pt text-aligncenter h2
font-size24pt p font-size18pt ul
font-size32pt line-height120 ul li
font-size32pt ul ul li font-size28pt .code
font-familycourierfont-size18pt .accesskey
text-decorationunderline a colorwhite
11
Basic Concepts

• Set the text color of 'H1' elements to blue H1
  color blue
• This is a simple CSS rule, but it could be a
  style sheet on its own
• A rule consists of two main parts

12
Style Sheets

• Now, back to FrontPage

13
Create a Style Sheet
14
Apply the Style Sheet to a Page

• With a page open in the editor
• Select Format gt Style Sheet Links
• Select All pages or Selected pages
• Click on the Add button select one of the style
  sheets in the Labs web
• Look at the HTML of your web page you will see
  the link element inserted in the ltheadgt

15
Modify the Style Sheet
16
Demonstration, Adding a Style to the New Style
Sheet

• You can create your own styles in the style sheet
  using the FrontPage Style window
• The custom styles you create will be added to the
  drop down style window

17
Demonstration, Adding a Style to the Style Sheet
18
Demonstration, Adding a Style to the Style Sheet
19
Demonstration, Adding a Style to the Style Sheet
20
Demonstration, Adding a Style to the Style Sheet

• The style is added to the style sheet and
• It is added to the format dropdown menu

21
The Style Element

• The ltstylegt element is HTML 4.0 it lives in the
  ltheadgt of the html document
• You can insert any style rules you want inside
  the style element

22
Demonstration, Adding a Style to a Document
ltlink rel"stylesheet" type"text/css"
href"test.css"gt ltstylegt lt!-- .fancy
font-size 8pt color 008000 font-style
italic background-color FFFF50
position absolute left 0 top 0 width 100
height 10 z-index 2
--gtlt/stylegt
23
Style Element Compound Selectors
lthtmlgtltheadgt ltstyle type"text/css"gt
H1.greentext color 00FF00
lt/stylegt lttitlegtStyle Element Compound
Selectorslt/titlegt lt/headgtltbodygt lth1
class"greentext"gtThis H1 text is GREENlt/h1gt ltdiv
gtltpgtltbiggtltbiggtAll H1 elements of CLASSgreentext
will be green.nbsp The style definition
(selector) is quoth1.greentextquot, greentext
only applies to H1 elements.nbsp But not all H1
elements will be green - as you will see in the
next example.lt/biggtlt/biggtlt/pgtlt/divgtlt/bodygtlt/htmlgt
24
Style Element Compound Selectors
25
Style Element Compound Selectors Continued
lthtmlgtltheadgt ltstyle type"text/css"gt
h1.greentext color 00FF00
lt/stylegt lttitlegtStyle Element Compound Selectors
cont.lt/titlegt lt/headgtltbodygt lth1
class"greentext"gtThis H1 text is
GREENlt/h1gt lth1gtThis is a regular H1lt/h1gt ltp
class"greentext"gtltemgtltbiggtltbiggtThis P element
has classquotgreentextquot. Will this
paragraph turn green? lt/biggtlt/biggtlt/emgtlt/pgt lt/body
gtlt/htmlgt
26
Style Element Compound Selectors Continued
27
Class Applied To All Text
lthtmlgtltheadgt ltstyle type"text/css"gt .greentext
color Green font-weightBold
font-familyBook Antiquafont-styleitalic
lt/stylegt lttitlegtClass Applied to all
Textlt/titlegt lt/headgtltbodygt ltdiv
class"greentext"gt lth1gtThis text is
greenlt/h1gt ltpgtltbgtThis heading and the entire
paragraph are green because they are contained in
a DIV element with CLASS147greentext148.
lt/bgtlt/pgtlt/divgtlt/bodygtlt/htmlgt
28
Class Applied To All Text
29
How the Cascade Works Examples
lthtmlgtltheadgt ltstyle type"text/css"gt .greentext
color Green font-weightBold
font-familyBook Antiquafont-styleitalic
.redtext colorred lt/stylegtlttitlegtHow the
Cascade Workslt/titlegtlt/headgt ltbodygtltdiv
class"greentext"gt lth1gtThis text is greenlt/h1gt ltp
class"redtext"gtltbgtThe DIV with
classquotgreentextquot contains both the H1
and this P element. The P element has
classquotredtextquot so, the class
definition at the lowest level (P) will supersede
the next higher definition, in this case, at the
DIV level.nbsp That is the meaning of the
quotcascadequot.lt/bgtlt/pgtlt/divgt lt/bodygtlt/htmlgt
30
How the Cascade Works
31
Cascade Inside a DIV
lthtmlgtltheadgt ltstyle type"text/css"gt .greentext
color Green font-weightBold font-familyBook
Antiquafont-styleitalic p color purple
font-weightBold font-size20 font-familyBook
Antiquafont-styleitalic lt/stylegtlttitlegtCasca
de Inside a DIVlt/titlegtlt/headgt ltbodygtltdiv
class"greentext"gt lth1gtThis text is
greenlt/h1gt ltpgtltbgtThis heading and the entire
paragraph are contained in a DIV element with
CLASS147greentext148. This Paragraph text
is purple because there is a STYLE element in the
HEAD of this document with quotPquot defined.
The class defined in the DIV only applies to the
H1 - that had no specific style definition.
lt/bgtlt/pgt lt/divgtlt/bodygtlt/htmlgt
32
Cascade Inside a DIV
33
Inline Styles

• In line styles are style definitions that are
  place inside the html elements as attributes
• We will look at Inline styles in detail in the
  next module when we do tables
• For now, consider how they can be missused
• Next slide

34
Word Conversion Issues

• Microsoft Word 2000 doesnt do a nice conversion
  to HTML for example

35
Word Conversion Issues

• If you save it as HTML from word it looks like
  this in the browser, but

36
Word Conversion Issues

• All the formatting is done with inline style
  definitions

37
Avoiding Word Conversion Issues

• Use as little formatting as possible in the Word
  document
• Use FrontPage to perform the conversion to html,
  not Word

38
Converting RTF to HTML using FrontPage

• 1. Copy or import the word document into the
  webFrom FrontPage
• 2. Click Tools gtRecalculate Hyperlinks if
  necessary to get the document to show up in the
  Web

39
Converting RTF to HTML using FrontPage

• 3. Right click on the Word file in the web
• 4. Select Open With FrontPage

40
Making Your Style

• Decide what your presentation standards are
• Style Sheets and Themes can both be custom made
  or tailored to fit your needs but it is an
  advanced topic. You will need a Style designer
  if you want to really do a good job with the look
  and feel of a complex site

41
Making Your Style

• You can use either style sheets or themes, or
  both of them together. See
• http//www.americandrivingsociety.org for a good
  example of how to do this and hide your jscript
  from casual thieves
• FrontPage Themes are browser independent, CSS1
  Style Sheets dont work well on Netscape but they
  are more powerful overall
• Use inline styles only on one-of-a-kind things.

42
Lab 2

• Add a style sheet to a page in your web site
  hint, use dhtml.css
• Add a style element to a page and change
  something with it
• Dont worry about inline styles, we will do that
  when we do tables in the next module!

43
Review Questions