Advanced Netscape DHTML

Document Sample
Advanced Netscape DHTML Powered By Docstoc
					                               Advanced Netscape DHTML

Netscape Navigator (part of the Netscape Communicator package) is the second most popular web
browser, far behind the leading Microsoft Internet Explorer. Netscape Navigator was, however, the
first widely-used browser, and it maintains a loyal following. Netscape is very similar to IE in
many ways, so a transition between the two should not prove to be difficult. AOL officially
announced that support for Netscape Navigator (final version would end on March 1,
2008, and recommended that its users download either the Flock or Firefox browsers, both of which
were based on the same technology. Netscape considers something to be Dynamic HTML if it
includes the following three major elements:

   o Styles sheets accessible through the browser object model
   o Content positioning in two and three dimensions
   o Downloadable fonts

Netscape Navigator supports the Cascading Style Sheet specification just like other browsers do,
but what makes its support dynamic is that style sheet elements are part of the Navigator browser
object model. This means that you can specify style information through JavaScript in addition to
the CSS way of doing it.

       <STYLE TYPE="text/css">
           color: red;
           font-family: Comic Sans MS;
           font-size: 18pt;
           line-height: 18pt;
           margin-left: 40px
       <STYLE TYPE="text/javascript">
           document.tags.P.color = "blue";
           document.tags.P.fontFamily = "Verdana";
           document.tags.P.fontSize = "12pt";
           document.tags.P.fontWeight = "bold";
           document.tags.P.lineHeight = "20pt";
           document.tags.P.marginLeft = "80px";
       <TITLE>Applying Styles: CSS vs JavaScript</TITLE>

Content positioning was introduced in Navigator 4.0 through use of the <LAYER> and <ILAYER> tags
for absolute and relative positioning, respectively. Unfortunately for Netscape, using HTML tags to
specify content presentation information flies in the face of the direction that the W3C wants to

                                                                             Advanced Netscape DHTML

move--namely, to reserve HTML for describing the meaning of the content and to specify
presentation through style sheets. The W3C rejected the Netscape proposal for the <LAYER> tag,
and Netscape was forced to scramble to make Navigator compliant with the CSS approach to
content positioning. Currently, Navigator supports both positioning techniques

1. JavaScript Accessible Style Sheet
Netscape Navigator does support the CSS specification, and using the CSS approach is a perfectly
good way to build style information into your documents. But, Navigator also includes style
properties in the browser object model, which means -- you can use JavaScript to access and set
style characteristics. Netscape call this approach JavaScript Accessible Style Sheets; it is the first
major feature of Netscape's version of Dynamic HTML. The advantage of JavaScript Accessible
Style Sheets is that by using the browser object model, you can dynamically change style
information by using scripts triggered by certain events that come about from user actions.

Example: Assigning style characteristics to <H1> tag element.

        <STYLE TYPE="text/javascript">
        with (tags.H1)
            backgroundColor = "black";
            color = "white";
            fontSize = "36pt";
            lineHeight = "40pt";
            align = "center";
            width = "100%";

The style characteristic in CSS and JavaScript accessible style sheets for the above example is

Style Characteristic              CSS Keyword                        JavaScript Property
background color                  background-color                   backgroundColor
color                             color                              color
font size                         font-size                          fontSize
line height                       line-height                        lineHeight
alignment                         float                              align
width                             width                              width

2. Content Positioning
Content positioning is a much different activity than assigning styles, and you can bring many more
JavaScript commands to bear on a content-positioning challenge.

a. The <LAYER> and <ILAYER> Elements
A newer use of style sheet attributes is to perform positioning of HTML elements through the CSS
positioning attributes. Both Microsoft and Netscape support these attributes in their Web browsers--
although, as a new standard, neither Web browser offers perfect support for them.

                                                                               Advanced Netscape DHTML

Although the <LAYER> and <ILAYER> tags will not become standard HTML, they are supported in
Netscape Navigator. Sometimes these tags work better in Navigator than the CSS positioning
attributes. If you are designing documents for an audience predominantly using Netscape's Web
browser, you might want to use the <LAYER> tag.

The <LAYER> and <ILAYER> tags is a container tag that can take the following attributes:

b. The <NOLAYER> Tag
Netscape knew it was creating proprietary tags when it introduced <LAYER> and <ILAYER>, so it
also included a <NOLAYER> element for specifying non-layered versions of layered content.

3. Downloadable Fonts
Setting up a document with downloadable fonts is a multistep process that begins with your
securing copies of the fonts which is needed in web design. After having the fonts, we need to
apply them to text in the web page. Ultimately, what we want to produce is what is called a font
definition file--a file downloaded with the page to provide font information to Navigator.

There are two ways exist to link a definition file to a document. The first is to use the <LINK> tag in
the document head. When linking to a font definition file with the <LINK> tag, you need to use the
following attributes:

   REL - REL isset equal to FONTDEF, signifying that the linked file is a font definition file.
   SRC - SRC points to the URL where the font definition file can be found.

Thus a <LINK> tag that links to a font definition file might look like this:


The other approach is to link the font definition file inside the HTML <STYLE> element. The CSS
specification supports a link such as the following:

<STYLE TYPE="text/css">
@fontdef url(

The <STYLE> implementation here is equivalent to the <STYLE> implementation shown previously.
Additionally, you need to add a MIME type to your server for the font definition file.


Shared By:
Description: Advanced Netscape DHTML