"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&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 "markup language" 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>