File: web_messy.html

package info (click to toggle)
funnelweb-doc 3.2d-4.2
links: PTS
area: main
in suites: forky, sid, trixie
size: 3,744 kB
sloc: perl: 241; makefile: 23
file content (301 lines) | stat: -rw-r--r-- 8,806 bytes
parent folder | download | duplicates (5)

<HTML>
<!--
***********************************************************************
FUNNELWEB MANUAL WEB PAGE
=========================
Copyright (c) Ross N. Williams 1992,1999. All rights reserved.

Permission is granted to redistribute and use this manual in
any medium, with or without modification, provided that all
notices (including, without limitation, the copyright
notice, this permission notice, any record of modification,
and all legal notices) are preserved on all copies, that all
modifications are clearly marked, and that modified versions
are not represented as the original version unless all the
modifications since the manual's original release by Ross N.
Williams (www.ross.net) consist of translations or other
transformations that alter only the manual's form, not its
content. THIS MANUAL IS PROVIDED "AS IS" AND WITHOUT ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, WITHOUT
LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTIBILITY AND
FITNESS FOR A PARTICULAR PURPOSE. TO THE EXTENT PERMITTED BY
LAW THERE IS ABSOLUTELY NO WARRANTY.

***********************************************************************
-->

<HEAD>
<TITLE>7.3 Replacing Messy HTML Constructs</TITLE>
<STYLE TYPE="text/css"> <!-- A {text-decoration: none} // --> </STYLE>
</HEAD>
<BODY BACKGROUND="binary/background.gif"
      BGCOLOR="#FFFFFF"
      TEXT="#000000"
      VLINK="#660000"
      LINK="#FF0000"
      ALINK="#CC0000">

<TABLE WIDTH="490">
<TR>
<TD WIDTH="130" VALIGN="top">
<IMG SRC="binary/d_clear.gif" ALT="" WIDTH="130" HEIGHT="1"><BR>

<FONT SIZE="2">
<BR>

<A HREF="http://www.ross.net/"
 TARGET="rosshome"
 onClick="window.open('','rosshome','location,status,menubar,scrollbars,resizable',false).focus(); return true;"
>
 <IMG SRC="binary/rossnet_logo.gif"
  WIDTH="64" HEIGHT="32"
  BORDER="0" ALT="RossNet"
  HSPACE="0" VSPACE="1"></A><BR>
<BR>

<A HREF="../index.shtml"
 TARGET="funnelweb"
 onClick="window.open('','funnelweb','location,status,menubar,scrollbars,resizable',false).focus(); return true;"
>
 <IMG SRC="binary/linklogo.gif"
  WIDTH="64" HEIGHT="32"
  BORDER="0" ALT="FunnelWeb"
  HSPACE="0" VSPACE="1"></A><BR>
<BR>
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0><TR><TD BGCOLOR="#000000">
<A HREF="../reference/index.html"
 TARGET="funnelwebreference"
 onClick="window.open('','funnelwebreference','location,status,menubar,scrollbars,resizable',false).focus(); return true;"
><FONT COLOR="#FFFFFF"><B>Reference</B></FONT></A><BR>
<BR>
<A HREF="../developer/index.html"
 TARGET="funnelwebdeveloper"
 onClick="window.open('','funnelwebdeveloper','location,status,menubar,scrollbars,resizable',false).focus(); return true;"
><FONT COLOR="#FFFFFF"><B>Developer</B></FONT></A><BR>
<BR>
<A HREF="index.html"><FONT COLOR="#FFFFFF"><B>Tutorial</B></FONT></A><BR>
<A HREF="intro.html"><FONT COLOR="#FFFFFF">1 Introduction</FONT></A><BR>
<A HREF="macro.html"><FONT COLOR="#FFFFFF">2 Macros</FONT></A><BR>
<A HREF="type.html"><FONT COLOR="#FFFFFF">3 Typesetting</FONT></A><BR>
<A HREF="example.html"><FONT COLOR="#FFFFFF">4 Example</FONT></A><BR>
<A HREF="hints.html"><FONT COLOR="#FFFFFF">5 Hints</FONT></A><BR>
<A HREF="examples.html"><FONT COLOR="#FFFFFF">6 Examples</FONT></A><BR>
<A HREF="web.html"><FONT COLOR="#FFFFFF">7 Webmaking</FONT></A><BR>

<BR>
<A HREF="search.html"><FONT COLOR="#FFFFFF"><B>SEARCH</B></FONT></A><BR>
</FONT>
</TD></TR></TABLE>


</TD>
<TD WIDTH="360" VALIGN="top">
<FONT SIZE="3">


<A HREF="../reference/index.html"><IMG SRC="binary/title.gif"
 WIDTH="302" HEIGHT="24"
 BORDER="0" ALT="FunnelWeb Tutorial Manual"
 HSPACE="0" VSPACE="0"></A>
<P><FONT SIZE="5">7.3 Replacing Messy HTML Constructs</FONT><BR>


<P>One of the greatest benefits of using FunnelWeb is its ability
to replace messy slabs of HTML with a simple macro call. This page
provides lots of examples of this.

<P><BR><FONT SIZE="4"><STRONG>Hyperlinks</STRONG></FONT><BR>

<P>Hyperlinks are messy and you can eliminate their messiness
from your FunnelWeb web source by defining a macro for each link
you want to use. For example:

<P>
<PRE>
@$@&lt;Dilbert@&gt;@Z@M@{@-
&lt;A HREF="http://www.dilbert.com/"&gt;Dilbert&lt;/A&gt;@}
@$@&lt;Yahoo@&gt;@Z@M@{@-
&lt;A HREF="http://www.yahoo.com/"&gt;Yahoo&lt;/A&gt;@}
</PRE>

<P>While the definitions themselves are certainly messy,
having made them, we are now free to refer to Dilbert and
Yahoo within our webs in a very clean manner indeed. For
example, the links page of the previous example now becomes
just:

<P>
<PRE>
@O@&lt;links.html@&gt;@{
@&lt;Begin page@&gt;@(Dave's Links@)

&lt;P&gt;Check out @&lt;Dilbert@&gt; and @&lt;Yahoo@&gt;!

@&lt;End page@&gt;
@}
</PRE>

<P><BR><FONT SIZE="4"><STRONG>Images</STRONG></FONT><BR>

<P>Suppose we want to include a small image of a checkmark
at various points without a web page. Here's the HTML that
has to be included at each point:

<P>
<PRE>
&lt;IMG SRC="bin/tick_red_12.gif"
WIDTH="12" HEIGHT="12"
HSPACE=4 VSPACE=0
ALT="*" BORDER="0"&gt;
</PRE>

<P>Yuk! To eliminate this mess in our FunnelWeb/HTML, we
can define a macro for a tick mark as follows:

<P>
<PRE>
@$@&lt;Tick@&gt;@M@{
&lt;IMG SRC="bin/tick_red_12.gif"
WIDTH="12" HEIGHT="12"
HSPACE=4 VSPACE=0
ALT="*" BORDER="0"&gt;@}
</PRE>

<P>Now, using tick marks without your text is easy.
Here's an example:

<P>
<PRE>
@&lt;Tick@&gt;Low cost.&lt;BR&gt;
@&lt;Tick@&gt;Easy installation.&lt;BR&gt;
@&lt;Tick@&gt;Available now!&lt;BR&gt;
</PRE>

<P><BR><FONT SIZE="4"><STRONG>Large Form Fields</STRONG></FONT><BR>

<P>Another example is where you have form fields
with lots of options. Here's an example of a commonly
occurring form field that goes on for a couple of
hundred lines!

<P>
<PRE>
&lt;SELECT NAME="Country"&gt;
&lt;OPTION&gt;United States
&lt;OPTION&gt;Afghanistan
&lt;OPTION&gt;Albania
...
&lt;OPTION&gt;Zambia
&lt;OPTION&gt;Zimbabwe
&lt;/SELECT&gt;
</PRE>

<P>Using FunnelWeb, you can move all this to a single macro
definition as follows:

<P>
<PRE>
@$@&lt;Country form field@&gt;@M@(
&lt;SELECT NAME="Country"&gt;
&lt;OPTION&gt;United States
&lt;OPTION&gt;Afghanistan
&lt;OPTION&gt;Albania
...
&lt;OPTION&gt;Zambia
&lt;OPTION&gt;Zimbabwe
&lt;/SELECT&gt;
</PRE>

<P>Now, whenever you want a country field in a form, you can
just write:

<P>
<PRE>
@&lt;Country form field@&gt;
</PRE>

<P><BR><FONT SIZE="4"><STRONG>Navigation Buttons</STRONG></FONT><BR>

<P>Sometimes the navigation constructs that appear
within pages can become rather messy. Here's an example
where we have three buttons at the bottom of each page.

<P>
<PRE>
&lt;TABLE WIDTH="100%"&gt;
&lt;TR&gt;
&lt;TD ALIGN="left"   VALIGN="bottom"&gt;&lt;
 A HREF="links.html"&gt;&lt;IMG SRC="bin/left.gif"&gt;&lt;/A&gt;&lt;/TD&gt;
&lt;TD ALIGN="center" VALIGN="bottom"&gt;&lt;
 A HREF="home.html"&gt;&lt;IMG SRC="bin/up.gif"&gt;&lt;/A&gt;&lt;/TD&gt;
&lt;TD ALIGN="right"  VALIGN="bottom"&gt;&lt;
 A HREF="hobbies.html"&gt;&lt;
 IMG SRC="bin/right.gif"&gt;&lt;/A&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
</PRE>

<P>We can move all this to a single macro definition
that has three parameters, one for each target page.

<P>
<PRE>
@$@&lt;Nav@&gt;@(@3@)@Z@M@{
@&lt;P@&gt;
&lt;TABLE WIDTH="100%"&gt;
&lt;TR&gt;
&lt;TD ALIGN="left"   VALIGN="bottom"&gt;&lt;
 A HREF="@1"&gt;&lt;IMG SRC="bin/left.gif"&gt;&lt;/A&gt;&lt;/TD&gt;
&lt;TD ALIGN="center" VALIGN="bottom"&gt;&lt;
 A HREF="@2"&gt;&lt;IMG SRC="bin/up.gif"&gt;&lt;/A&gt;&lt;/TD&gt;
&lt;TD ALIGN="right"  VALIGN="bottom"&gt;&lt;
 A HREF="@3"&gt;&lt;IMG SRC="bin/right.gif"&gt;&lt;/A&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
@}
</PRE>

<P>Now, to add navigation buttons to a page,
we can just write (near the end of the page).

<P>
<PRE>
@&lt;Nav@&gt;@(links.html@,home.html@,hobbies.html@)
</PRE>

<P>If you wanted to, you could build the navigation
buttons into the <SAMP>@&lt;End page@&gt;</SAMP> macro
and set it up with three parameters instead.


<P>
<TABLE WIDTH="100%">
<TR>
<TD ALIGN="left"   VALIGN="bottom"><A HREF="web_start.html"><IMG SRC="binary/fw_left.gif" HEIGHT="32" WIDTH="32" BORDER="0" ALT="Prev"></A></TD>
<TD ALIGN="center" VALIGN="bottom"><A HREF="web.html"><IMG SRC="binary/fw_up.gif" HEIGHT="32" WIDTH="32" BORDER="0" ALT="Up"></A></TD>
<TD ALIGN="right"  VALIGN="bottom"><A HREF="web_errors.html"><IMG SRC="binary/fw_right.gif" HEIGHT="32" WIDTH="32" BORDER="0" ALT="Next"></A></TD>
</TR>
</TABLE>



<HR>
<FONT SIZE="2">
<A HREF="mailto:webmaster@ross.net">Webmaster</A>&nbsp;&nbsp;&nbsp;
<A HREF="copyright.html">Copyright &copy; Ross N. Williams 1992,1999. All rights reserved.</A><BR>
</FONT>

</FONT>
</TD>
</TR>
</TABLE>


</BODY>

<!-- *********************************************************************** -->
<!--      End Of A FunnelWeb Manual Web Page (www.ross.net/funnelweb/)       -->
<!-- *********************************************************************** -->

</HTML>