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.
Stylesheets (technically Cascading Stylesheets), or CSS allow web developers much more control over the look of their web pages than with HTML alone. They make it possible to define styles globally for a site, eliminating the need for repetitive font tags, color tags, alignment attributes and so on. This creates better organization by separating form from structure. Sytlesheets are a critical tool for any web developer and make creating sites infinitely faster and easier, once you’ve learned how to use them.There are four ways to include styles in your HTML documents.
1. Local or Inline is right inside a tag and overrides other definitions. Example: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>
This is an INLINE style
2. Global or Embedded. A better solution is to include the style definitions in a style tag otherwise known as by using the global (embedded) technique. Like this example:
<html>
<head>
<title>Style Demo Page 1</title>
<style type="text/css">
<!--
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
-->
</style>
</head>
<body>
<h1>TEST</h1>
<p>Hello World</p>
<table>
<tr><td>I'm in a TD tag with no font tag</td></tr>
</table>
<b>bold. <u>underline</u> within bold (no style)</b><br />
<i>italics</i>
</body>
</html>
3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here’s how you link a stylesheet:
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="/im2420/my_styles.css" type="text/css">
</head>
<body>
<h1>TEST</h1>
</body>
</html>
and here’s what the stylesheet document (my_styles.css) looks like:
/* CSS Document */
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
4. Imported stylesheet go within a style tag, thus allowing you to include other global styles which will override what’s imported. In the following example the h1 definition will override the h1 definition found in my_styles.css:
<style type="text/css">
<!--
@import url(my_styles.css);
h1 { color: #ff00ff; font-family: impact }
textarea { text-transform: uppercase }
-->
</style>
Click any of the following links to view the examples we looked at in class:
style_demo0.html
style_demo1.html
style_demo2.html
style_demo3.html
Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement in all subsequent projects).
Web Monkey Stylesheet Tutorial (Getting Started)
W3Schools CSS Reference
Brainjar CSS Positioning Tutorial
Selectutorial – CSS selectors
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
Download: GD2480 Problem Set 2
1. All GD2480 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on your Webspace or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.