"Beyond HTML: Frames With Style"
by Michael Floyd
Web Techniques, April 1999

Web Techniques grants permission to use these listings (and code) for 
private or commercial use provided that credit to Web Techniques and 
the author is maintained within the comments of the source. For 
questions, contact editors@web-techniques.com. 



[LISTING ONE]


A:link { COLOR:  Navy; text-decoration: none }
A:visited { COLOR: blue }
A:active { COLOR: red }

#NavHead { display: block; 
           font-weight: bold; 
           text-align: center; 
           font-size: 24px;
           text-decoration: none;
           font-family: "Times New Roman", "serif", "Garamond"; 
           color: white;
           background-color: navy; 
           border-style: outset;
           margin-left: 2%; margin-right: 5% }

#NavText { font-weight: bold; 
           font-size: 14px;
           font-family: "Times New Roman", "Garamond", "serif" }



[LISTING TWO]


<HTML>
  
  <HEAD>
    <TITLE>Beyond HTML Navigation Bar</TITLE>
    <LINK REL="stylesheet" type="text/css" HREF="navbar.css">
  </HEAD>
  
  <BODY background="gifs/navBackground.jpg">
    
    <Span id="NavHead">InSite</Span>

    <P><A HREF="index2.html" TARGET="_top">
       <SPAN id="NavText">Presentation</A></SPAN>
    
    <P><A HREF="index3.html" TARGET="_top">
        <SPAN id="NavText">Markup</A></Span>
    
    <BR><BR><A HREF="markup/xml/index.shtml" TARGET="MainPane">
        <SPAN id="NavText">XML</A></Span>
    
    <BR><BR><A HREF="index4.html" TARGET="_top">
         <SPAN id="NavText">Scripting</Span></A>
    
    <BR><BR><A HREF="index5.html" TARGET="_top">
         <SPAN id="NavText">Tools Database</Span></A>
    
    <BR><BR><A HREF="index6.html" TARGET="_top">
         <SPAN id="NavText">Archives</Span></A>
    
    <P><A HREF="bio.shtml" TARGET="MainPane">
        <SPAN id="NavText">About Us</Span></A>

  </BODY>
</HTML>


[LISTING THREE]


BODY {     background: #FFFFFF;
           color: black}

H1 {       color: #FF0000;
           background-color: #FFFFFF;
           text-transform: Capitalize;
           text-align: Left; }

.Dek {     font-style: italic;
           font-size: 14px;
           color: black;
           margin-left: 64px;
           font-family: Arial, helvetica, sans-serif;}

.Byline {  color: blue;
           font-weight: bold;
           font-size: 14px;
           font-family: Arial, helvetica, sans-serif;}

.copy {    display: block;
           font-weight: normal;
           font-size: 12px; 
           font-family: "Times New Roman", "Garamond", "serif"; }

.TOC {     margin-left: 4em;
           color: black; 
           font-size: 12px; 
           font-family: Arial, helvetica, sans-serif; }

.DropCap { background: red;
           float: left;
           vertical-align: text-top;
           font-size: 24px;
           font-style: bold;
           border: inset; }
.subhead { color: black; 
           margin-top: 15px;
           margin-left: -10px;
           font-size: 22px; 
           font-weight: bold;
           font-style: italic;
           font-family: Arial, sans-serif; }

#BoxCopy { color: white;
           background-color: red;
           vertical-align: text-bottom;
           font-size: 24px;
           font-style: bold;
           font-family: "Times New Roman", "serif", "Garamond"; 
                        color: white;
           padding-left: 1px;
           padding-right: 3px;
           text-decoration: none;
           border: none; }

#BoxCopy1 { color: white;
            background-color: gray;
            vertical-align: text-top;
            font-size: 24px;
            font-style: bold;
            text-decoration: none;
            border: inset }

.BoxCopy2 { color: navy;
            background-color: white;
            float: right;
            vertical-align: text-top;
            font-size: 20px;
            font-style: bold;
            border: none; }



[LISTING FOUR]


<HTML>
  
  <HEAD>
    <META NAME="keywords" 
    CONTENT="XML,CSS,XSL,HTML,DSSSL,JavaScript,DHTML,SGML,CDF,browser,">
    <META NAME="description" 
    CONTENT="Welcome to BeyondHTML.com, the Web site based on  
             Web Techniques Magazine's popular column of the same name. In 
             this issue: learn how to use XML to create compelling sites; 
             Why Scott McNealy should worry about the DOJ;  XML resources; 
             product reviews and more.">
    <LINK REL="stylesheet" type="text/css" HREF="beyondhtml.css">
    <TITLE>BeyondHTML Table of Contents</TITLE>
  </HEAD>
  
  <BODY>
    
    <P><IMG SRC="gifs/logo.gif" ALT="Jump to BeyondHTML Home Page" 
        WIDTH="426" HEIGHT="112"></P>
    <MAP NAME="logomap">
    
    <AREA SHAPE="RECT" COORDS="0,1,425,112" HREF="http://www.beyondhtml.com" 
          TARGET="_top" ALT="Jump back to the Home page">
    <AREA SHAPE="default" HREF="http://www.beyondhtml.com" TARGET="_top">
    </MAP>

    <TABLE BGCOLOR="#FFFFFF" WIDTH="99%">
      <TR>
        <TD WIDTH="150" HEIGHT="106" ALIGN="LEFT" VALIGN="TOP">
        <FONT SIZE="-1"><I></I></FONT>
        <BR>
        <BR><FONT SIZE="-1"><I>Welcome to the December issue of </I>
            BeyondHTML<I>.</I></FONT>
        <BR><FONT SIZE="-1"><I></I></FONT>
        <BR><FONT SIZE="-1"><I><B>This Week: </B></I></FONT>
            <FONT SIZE="-1"><I></I></FONT>
        <BR><FONT SIZE="-1"><I>Find it Fast in the 
          <A HREF="xmlTools.html" TARGET="MainPane">XML
          Tools Database</A></I></FONT>, 
          <I><FONT SIZE="-1"> a comprehensive and searchable 
          database of XML-related tools.</FONT></I>
        <BR><FONT SIZE="-1"><I></I></FONT>
        <BR><FONT SIZE="-1"><I></I></FONT>
        <BR><FONT SIZE="-1"><I><B>Also:</B></I></FONT> <FONT SIZE="-1">
        <I>Charles F. Goldfarb continues with his views 
        on the future of XML
        <BR>
        <BR></I></FONT>
        <BR><FONT SIZE="-1"><I>Check back weekly for hands-on coverage 
        of Web Markup Languages, XML, scripting, HTML 4, CSS, DHTML, 
        and much more!</I></FONT></TD>
        <TD WIDTH="27" HEIGHT="106" ALIGN="LEFT"></TD>

        <TD WIDTH="433" HEIGHT="106" ALIGN="LEFT" VALIGN="TOP"><B>
          <H1>Contents</H1>
          <HR>

          <A HREF="oct98/news1098.shtml" >
             <Span ID="BoxCopy"> News&amp;Views</Span></A>
  
          <Div Class="copy">Netscape announces its new 
           Gecko browsing engine; Allaire introduces an XML vocabulary  
           for distributed data exchange; and Innovision releases 
           a beta version of its XML Protocol Server.</DIV>
          <BR><BR>
          
          <A HREF="columns/dec98/beyond1298.shtml">        
           <Div Class="BoxCopy2">XML Opportunities Knocking</DIV></A>

        <Div Class="copy">Charles Goldfarb, the father SGML, can also be 
         considered the grandfather of XML. This month, Michael continues 
         his discussion with the man who coined the term 
         &quot;markup language&quot; in Part 2 
         of this two-part series.</Div>

        <BR>
        <BR><B>From the Archives:</B>
        <BR><BR>
        <A HREF="articles/editorials/editorial398.shtml">
           <SPAN ID="BoxCopy1">Achieving Greatness</SPAN></A>
        <BR><BR>
        <Div Class="copy">It's been nearly a year since Richard Hamming 
        passed away. As Michael notes, Hamming's greatness will always be 
        felt in the computing community.</DIV>
        <BR>
        <BR><B>Upcoming articles in my Beyond HTML column in
        <A HREF="http://www.webtechniques.com" TARGET="_top">
        Web Techniques</A> magazine:</B>
        <BR>
        <BR>
        <BR>
        <TABLE WIDTH="50%">
          <TR>
            <TD WIDTH="106"><FONT SIZE="-1"><B></B></FONT><FONT SIZE="-1">
            <B>1999</B></FONT></TD>
            <TD WIDTH="289"><FONT SIZE="-1"></FONT></TD>
          </TR>
          <TR>
            <TD WIDTH="106"><FONT SIZE="-1"><B>January</B></FONT></TD>
            <TD WIDTH="289"><FONT SIZE="-1">Examining Aestiva's HTML/OS
            </FONT></TD>
          </TR>
          <TR>
            <TD WIDTH="106"><FONT SIZE="-1"><B>February</B></FONT></TD>
            <TD WIDTH="289"><FONT SIZE="-1">How Browsers <I>Really</I>
            Support Style Sheets </FONT></TD>
          </TR>
          <TR>
            <TD WIDTH="106"><FONT SIZE="-1"><B>March</B></FONT></TD>
            <TD WIDTH="289"><FONT SIZE="-1">Cascading Style Sheets and XML
            </FONT></TD>
          </TR>
        </TABLE>
        <BR>Interested in a topic? Drop us a line at
        <A HREF="mailto:editors@beyondhtml.com">editors@beyondHTML.com</A>
        <BR>
        <BR></TD>
      </TR>
    </TABLE>
    
    <P></P>

<!--#include virtual="footer.txt"-->
    
    
  </BODY>
</HTML>



[[EXAMPLE 1]]


<!DOCTYPE HTML PUBLIC "-//EN" "HTML4">

<HTML>
  <HEAD>
    <TITLE>BeyondHTML Home Page</TITLE>
  </HEAD>
  
  <FRAMESET FRAMEBORDER="0" BORDER="0" COLS="20%,80%">
     <FRAME SRC="Navbar.html" NAME="NavPane" MARGINWIDTH="3" 
       MARGINHEIGHT="3" SCROLLING="NO" NORESIZE="NORESIZE">
     <FRAME SRC="toc.shtml" NAME="MainPane" SCROLLING="AUTO">
  </FRAMESET>

  <NOFRAMES>
     <BODY>
     </BODY>
  </NOFRAMES>
</HTML>