MVS Email

Transcript MVS Email

Using Cascading Stylesheets (CSS)
with FOCUS-Generated HTML
A presentation for NORCAL IBUG
June 2, 2000
Jon Gibbens – [email protected]
1
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
2
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.
3
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.
4
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!!

5
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  used to shield
stylesheet from browsers that can’t use it.
6
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
7
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%}
8
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
9
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
Important
ON TABLE SET LINES 9999
END
-SET &ENDSTRING=‘<P>Contains confidential information</P></BODY>’;
-WRITE WIGDIST1 &ENDSTRING
10
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
11
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
12
2 Techniques to ‘apply’ this stylesheet
 1. Embed in FOCUS code..ie:
-SET &SETUPSTRING=“<HEAD><TITLE>FOCUS Report</TITLE>
- <STYLE TYPE=“text/css”>
- 
- </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”>
13
What you get after you apply the stylesheet
(Before & After)
14
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)
15
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
16
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
17
Q&A
18

MVS Email

Transcript MVS Email

Directory