John Keston Classes

Week 3

Session 1: By the end of lab today your calendars are due. Today we will cover anchor links or “page jumps”, link targeting, and frames. Anchor links are used to jump to content within an HTML document. The most typical use is for navigating back to the top of a page where a lot of scrolling is required, or to sections within the content.

<a name="top">This is the top of the page</a>
.
.
.
<a href="#top">Go to the top of the page</a>

Link targeting is most commonly used to open the content of a link in a new browser window or tab. This can be achieved by using the “target” attribute and setting the value to blank (i.e. <a href="http://www.external-site.com" target="_blank">External Link</a>).

Targeting is also required to load content into specific frames. I do not recommend the use of frames, but it is still important to understand how they work. Jakob Neilsen, a prominent usability expert, cited “Using Frames” among the top ten mistakes in web design. However, there are rare instances of when frames (generally iframes are preferable) can help solve specific problems. This example shows how a basic frame set behaves.

Frame Attributes and Targeting:

<frameset rows="100,*,100" frameborder="yes,no">
<frame src="doc1.html" name="top" scrolling="yes,no,auto">
<frameset cols="*,*" frameborder="yes,no">
<frame src="doc2.html" name="middle_left" scrolling="yes,no,auto">
<frame src="doc3.html" name="middle_right" scrolling="yes,no,auto">
</frameset>
<frame src="doc4.html" name="bottom" scrolling="yes,no,auto">
</frameset>

Targeting Links:

<a href="link.html" target="name">    - Opens in a specific frame
<a href="link.html" target="_blank">  - Opens in a new window or tab
<a href="link.html" target="_self">   - Opens within its own frame
<a href="link.html" target="_top">    - Current browser window
<a href="link.html" target="_parent"> - Opens in its outer frameset

Session 2: Now we are going to take a closer look at CSS positioning. CSS can be used to format type, but also be used to position and style <div> layers or containers. Just like HTML tables, CSS positioning can be used to arrange content within the browser. CSS positioning also offers some advantages over the traditional table method; primarily that the content can be separated from the layout to provide better site maintenance and accessibility.

CSS vs Tables for Layout
CSS Zen Garden

For the next exercise the content has been provided in a word document. It includes some information about cycling collected from wikipedia. It’s your job to design a set of six pages using the text content provided. Create a consistent design scheme that incorporates images, navigation and type treatments using CSS styles and positioning. The use of tables for this exercise is not allowed. The requirements and a link to the content follows:

CSS Positioning Exercise
1. Organize the content provided into six pages
2. Create a consistent design scheme
3. Include navigation on each page to all the pages
4. Incorporate images into each page
5. Format type, images and the positioning of the content with CSS
6. Each piece of content (including images) should be contained in a <div> layer/container
7. Use of HTML tables is prohibited
8. Due before class on Session 2 of Week 5

Content for the CSS Positioning Exercise
Sample CSS Page Layouts – Step by step tutorial from Max Design
CSS Layout Techniques – Great tutorial on “no tables” layout
Student Example of CSS Positioning Exercise