Using cascading stylesheets css with focus generated html l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on
  • Presentation posted in: General

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML. A presentation for NORCAL IBUG June 2, 2000 Jon Gibbens – [email protected] Outline. CSS intro What’s in a Stylesheet? How to use a Stylesheet? (Embedded Stylesheets, Linked Stylesheets, Elements of a Stylesheet)

Download Presentation

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Using cascading stylesheets css with focus generated html l.jpg

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML

A presentation for NORCAL IBUG

June 2, 2000

Jon Gibbens – [email protected]


Outline l.jpg

Outline

  • CSS intro

  • What’s in a Stylesheet?

  • How to use a Stylesheet? (Embedded Stylesheets, Linked Stylesheets, Elements of a Stylesheet)

  • FOCUS code to create HTML

  • Example - Take a mainframe report & make it less ‘mainframey’

  • Software & Links

  • Q & A


Css intro what are stylesheets what can they do l.jpg

CSS Intro - What are StyleSheets?What Can They Do?

  • Separate Style/Layout from Content (art people from writers)

  • Change the visual appearance of a web document

    • Fonts, Font Sizes, Headings, Footings, Tables

  • Allow for multiple ‘looks’ for the same HTML code (ie..a web browser stylesheet vs a printer stylesheet)

  • ‘Cascading’ refers to the ability to have multiple stylesheets applied to same HTML page

  • ‘Cascading’ also refers to how conflicts are resolved when stylesheets refer to the same property.


What goes inside a stylesheet l.jpg

What goes inside a Stylesheet??

  • Rules - Rules on how to display something

  • Example rule(s):

    H1 { text-align: center }

    P { color: red; font-family: sans-serif }

  • Consists of a selector and a declaration

    • Selector is the HTML tag that the stylesheet rule will be attached to (ie.. H1, P, TABLE,etc)

    • Declaration is what the style actually is, and what to do with it.


How to use a stylesheet l.jpg

How to use a Stylesheet?

  • Stylesheets can be:

    • Embedded in a page

    • Linked to in a page

    • Imported into a page

    • Added inline in the code

  • We will cover Embedding and Linking in this talk

    • Importing and Inline stylesheets are not implemented in all browsers, or support is buggy!!


Embedding a stylesheet l.jpg

Embedding a Stylesheet

  • Embedded in HTML code inside HEAD tag

  • Example of inline stylesheet

    <HEAD><TITLE>Sample Report</TITLE>

    <STYLE TYPE=“text/css”>

    <!--

    H1 {text-align: center, font-style: italic}

    -->

    </STYLE>

    </HEAD>

  • Comment Tag <!-- followed by --> used to shield stylesheet from browsers that can’t use it.


Linking to a stylesheet l.jpg

Linking to a Stylesheet

  • Ideal for using same stylesheet with multiple pages

  • Embedded in HTML code inside HEAD tag

  • Example of a linked stylesheet

    <HEAD>

    <TITLE>Sample Report</TITLE>

    <LINK REL=stylesheet HREF=“style.css” TYPE=“text/css”>

    </HEAD>

  • Create external file called style.css which contains stylesheet code


Sample elements of a stylesheet fonts colors spacing l.jpg

Sample elements of a stylesheet(Fonts, Colors, Spacing)

  • Fonts

    {font-family: monospace}

    {font: Ariel}

    {font: Courier, font-size: 15pt}

  • Colors

    { color: blue }

    { background : green }

  • Spacing

    {text-align: center}

    {text-indent: 10cm} or {text-indent:20%}


Using focus to create html l.jpg

Using FOCUS to create HTML

  • General guidelines

    • Pre-allocate file with MOD access (so can concatenate data to it)

    • At end of your TABLE FILE section, put the following lines

      ON TABLE HOLD AS <filename> FORMAT HTML

      (which creates fully-formed HTML document)

      or ON TABLE HOLD AS <filename> FORMAT HTMTABLE

      (which creates just a HTML table)

    • This will create a HTML report


Focus code to create html l.jpg

FOCUS code to create HTML

-SET &SETUPSTRING=“<HEAD><TITLE>FOCUS Report</TITLE></HEAD><BODY>

- <H1>Sample FOCUS Report</H1>”;

-WRITE WIGDIST1 &SETUPSTRING

TABLE FILE WIDGETS

SUM DIST_COUNT AS 'DIST,COUNT’ N_DIST_CNT NOPRINT

PCT.N_DIST_CNT AS 'DIST,COUNT,%' DIST_AMOUNT AS 'DIST,AMOUNT'

N_DIST_AMT NOPRINT PCT.N_DIST_AMT AS 'DIST,AMOUNT,%'

COLUMN-TOTAL

BY DISTI6YYM AS 'DIST,YYM’

BY STATE

BY PRODWEIGHT NOPRINT

BY PRODTYPE AS 'PRODUCT,ROLLUP'

ON PRODTYPE RECOMPUTE AS '*TOTAL'

ON TABLE HOLD AS WIGDIST1 FORMAT HTMTABLE

ON TABLE SET LINES 9999

END

-SET &ENDSTRING=‘<P>Contains confidential information</P></BODY>’;

-WRITE WIGDIST1 &ENDSTRING

Important


Example take a mainframe report and make it less mainframey l.jpg

Example: Take a mainframe report and make it less ‘mainframey’

  • Change Header font ,font size & color

  • Change table font and border settings

  • Change footer font & alignment


Css stylesheet to accomplish this save as style1 css l.jpg

CSS Stylesheet to accomplish this(save as style1.css)

H1 {

font-family : Haettenschweiler;

color : Maroon;

font-size: xx-large;

}

TABLE, TR, TD {

border-color : Olive;

font-family : Arial;

}

P {

background-color : Yellow;

text-align : center;

}

Change font,color & size

Change color & font

Change color and alignment


2 techniques to apply this stylesheet l.jpg

2 Techniques to ‘apply’ this stylesheet

  • 1. Embed in FOCUS code..ie:

    -SET &SETUPSTRING=“<HEAD><TITLE>FOCUS Report</TITLE>

    - <STYLE TYPE=“text/css”>

    - <!-- H1 {font-family : Haettenschweiler; etc etc etc

    - -->

    - </STYLE></HEAD><BODY><H1>Sample FOCUS Report</H1>”;

  • 2. Upload to web server and then link to it..ie.. -- -SET &SETUPSTRING=“<HEAD><TITLE>FOCUS Report</TITLE> <LINK REL=stylesheet HREF=“style1.css” TYPE=“text/css”></HEAD> <STYLE TYPE=“text/css”>


What you get after you apply the stylesheet before after l.jpg

What you get after you apply the stylesheet(Before & After)


Browser compatibility issues l.jpg

Browser Compatibility Issues

  • In short - newest browsers (IE 5+, Netscape 4+ and latest version of Opera) have the best support

    • Caveat: They don’t all support ALL the features

  • Best bet is to implement in an intranet environment where browser versions are locked down, then write your stylesheet code accordingly.

    • Use the Master List (URL at end)

  • Can do some trickery with Javascript to display the appropriate stylesheet for a specific browser (but that’s another presentation)


Stylesheet editing software l.jpg

StyleSheet Editing Software

  • TopStyle - www.bradsoft.com/topstyle - Lite & Eval versions available. Commercial version: $50

  • DreamWeaver - www.macromedia.com - 30 day eval version available, Cost: $250

  • Windows Notepad/Wordpad or Unix vi/pico editor - Free


Web links resources l.jpg

Web Links/Resources

  • W3C.org - http://www.w3.org/Style/

  • Webreview.com

  • The Master List - http://webreview.com/wr/pub/guides/style/mastergrid.html - Grid which lists all of the CSS properties by browsers that support them


Slide18 l.jpg

Q & A


  • Login