Currently Open Code

The (X)H.T.M.L. Structure Layer Markup Code

Each Topic is associated with its own id and class:

id: id="currently" named after the page topic - placed in the opening body element of a page
class: class="currently" named after the page topic - placed in its respective opening list item element in the Navigation div of that page
- This is illustrated in the following C.S.S. presentation layer code block section.

When a user opens a page the external .css instructs the browser via the id and class attributes in the markup to disable that page hyperlink and change the font color to yellow in the TOPICS section of the navigation list.

Notice that we are on the Currently Open topic which is colored yellow, with the hyperlink disabled, and a golden star placed after the hyperlink text.
This is employed to prevent a user from refreshing a page they are currently viewing.

This markup code for the body and list item elements structures the Currently Open topic hyperlink:

```
/* Currently Open markup code */
```
```
 
```
```
<body id="currently">
```
```
 
```
```
   <ul>
```
```
      <li class="currently">
```
```
         <a href="CurrentlyOpen.htm"
```

            title="This page is currently open.">Currently Open Code

```
         </a>
```
```
      </li>
```
```
   </ul>
```
```
 
```
```
/* end Currently Open markup code */
```

top

The C.S.S. Presentation Layer Code

Each project contains two types of Topics: Standard and Specific

Standard Topics: These Topics are generic to each project and are always listed:
1. Home
2. Getting Started
3. Acknowledgements
4. References
5. Design Notes
Specific Topics: These Topics are specific to this project and differ with each tutorial:
1. NAV Container
2. Skip to Content Section
3. Horizontal Rule
4. Link States Section
5. Topics Section
6. A Help Authoring User Guide Section
7. Section Heading Code
8. Currently Open Code

The external .master style sheet associates:

each page body element id with the nav id
each topic class attribute and value with the anchor link element in the TOPICS section

The Currently Open topic selectors are defined accordingly:: color: yellow; - sets the color of all text characters to yellow; cursor: default; - changes the mouse cursor from a link cursor to the default cursor; text-decoration: none; - removes any underlining of links, etc.; background: #000 url(images/star.gif) no-repeat center right; - calls and sets the Star image from the images folder, replaced through c.s.s.; font-weight: bold; - sets all text characters to bold

top

This .css presenation layer code transforms the markup code structure:

```
/* Currently Open presentation code: */
```

  /* Standard selectors for EACH project */

  /* Specific selectors for THIS project */

```
 
```

#acknowledgements #nav .acknowledgements a,

```
#designnotes #nav .designnotes a,
```
```
#gettingstarted #nav .gettingstarted a,
```
```
#homenav #nav .homenav a,
```
```
#references #nav .references a,
```
```
#currently #nav .currently a,
```
```
#guide #nav .guide a,
```
```
#hr #nav .hr a,
```
```
#linkstates #nav .linkstates a,
```
```
#navcontainer #nav .navcontainer a,
```
```
#section #nav .section a,
```
```
#skip2 #nav .skip2 a,
```
```
#topics #nav .topics a {
```
```
  color: yellow;
```
```
  cursor: default;
```
```
  text-decoration: none;
```

  background: transparent url(images/star.gif) no-repeat center right;

```
  font-weight: bold; }
```
```
 
```

/* end Currently Open presentation code */

top

Currently Open Code

skip to content

link state symbols