A links page helps your users by directing them to resources beyond your site, as with our Design & Code Resources. For example, if you're building a Final Project on John Coltrane's early career, then your users would probably be interested more generally in Coltrane or jazz, and they'd appreciate your recommendations - plus, they might discover your links page after doing a Google search and then go on to discover the rest of your site.

Your job is to

Predict your users' needs and arrange suitable categories of links — as in Michael Goeller's chess links.
Find sites for each category of users' needs and write detailed blurbs about the sites' most significant features. For example, if you had 3 sites listed under a category such as "Equipment Retailers," you'd want to explain why to visit Site A (low prices, but only two brands) as opposed to Site B (good equipment reviews and lots of brands, but high prices) and Site C (good for beginners and has a weekly product-review page).
Provide at least 15 links/blurbs total.
Give a brief intro explaining how the page is organized, or anything else you might helpfully explain, for example, to users who don't know much and need beginner tips — it's often god to have a whole section of your page devoted to beginners' needs.
Provide a subnav with anchor links accessing your different categories.
Use white space and other design fundamentals (such as contrast between headings, body text, and links) to make your page optimally legible and skimmable.

A further goal of this assignment is to help refine your Final Project idea: As you do the research your Links page for the Prep stage, see what aspects of your topic aren't well covered — areas that your Final Project might take up. Following the Prep stage, we'll build the Links page in class using HTML 4 Layout, the primary aim of which is to simplify your layout code by using a Cascading Style Sheet (CSS) to format your page, that is, to add colors, fonts, etc.

Prep

Please type your responses to each part below on a text file (e.g., Notepad or MS Word), save it as "prep" to your "hw" folder, and bring a printout to class - don't worry about writing polished prose, just get the info down. (Using this prep, we'll build your Links page in class Week 2.)

Describe the site you're thinking of building for the Final Project and compose 3 personas of your site's users (see Summers p41-43 more for help with personas).
List 5-7 specific questions or tasks these users might have in mind when visiting your site or other sites related to your topic (e.g., "User 1 wants to build a low-cost aquarium stand"; "User 3 wants to understand the different eating habits of South American and African tropical fish").
Use Google, Librarians' Index, Infomine and other search resources to find at least 15 sites that could be useful for your 5-7 questions/tasks.
Under your questions/tasks, list each relevant site and URL, along with pertinent details (e.g., "Excellent on African and Brazilian fish, but...").
Think about what areas of your topic don't seem well covered, and revise your Final Project concept if it has evolved.

User Reviews

To get more of a user-perspective before building your page, we'll form groups of 3 to review your Prep (and this will also help new students catch on to what we're doing). Each reviewer should do the following:

Read the Prep and add at least 2 questions/tasks — if you know nothing about the topic, that's fine: what are the first things you'd want to know?
Read the links/blurbs and add notes about what more the descriptions could tell you.
Make up a 3-4 categories for how you'd break up the 15 sites into groups (e.g., "Beginner Info, Intermediate, Expert tips" or "History and Background, Tutorials, Equipment Retailers").

After the reviewers finish adding their notes, groups should discuss their Final Project ideas and homepage mockups, and finalize the 3 categories you'll use on your Links page.

HTML4 Layout

The goal here is to practice HTML4 layout, CSS, and file management — and to finish a draft of your Links page by the end of class! We'll go through 5 phases:

Folders and Files
Initial Coding — Document Title and Style Sheet Link
Coding the Body
Subheadings, Links, and Blurbs
Style Sheet

Note that if you're completely comfortable coding HTML, feel free to skip ahead after a few steps and do your own thing, but make sure you include a subnav, intro, headings, and back-to-top links along with your links and blurbs. Also feel free to review the GetIT Dreamweaver tutorial.

In the coding parts, remember not to do any text-formating (bolding, coloring, sizing, etc.) — we'll do that with the style sheet.

Phase 1: Folder and Files

We'll do 4 quick set-up operations: fix our Windows view settings, create a "mid" folder on our desktop, create a style sheet document, and create a "links.htm" file in Dreamweaver.

Fix your Windows view settings so that common file extensions such as ".htm" are visible:

>>> Double-click My Computer

>>> Click Tools and then Folder Options

>>> Click View

>>> Uncheck "Hide extensions for known file types"
Make a "mid" folder on your desktop:

>>> Right-click at a blank spot on your desktop

>>> Mouse-over "New"

>>> Left-click "Folder" and type "mid"
Open your "mid" folder and inside it create a new file named "style1.css":

>>> Right-click on a blank spot in the "mid" folder

>>> Mouse-over "New"

>>> Left-click "New File" and type in "style1.css"
Open Dreamweaver and create a new file called "links.htm" saved to your "mid" folder":

>>> In Dreamweaver, left-click File >> New

>>> After the window opens, the "General" tab (not "Templates") should be selected

>>> Under "Category" select "Basic Page"

>>> Under "Basic Page" select "HTML"

>>> Click the "Create" button

>>> After the new page opens, save it as "links.htm" to your "mid" folder

>>> Keep the document open and proceed to Phase 2

Phase 2: Initial Coding — Document Title and Style Sheet Link

Follow these steps with your still-opened "links.htm" (we'll work with "style.css" later):

Click on Dreamweaver's Code view and see that Dreamweaver has made this code for you — ask questions if you there's anything you don't understand (and review the homework!):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Change the Document Title to your own title, something like "Surfboard Design Links" (this is the title that shows up in the blue bar at the top of a browser):

<title>Yadda Yadda Links</title>
Add the style sheet link — you'll have to write the code beneath the <title> tags but above the close </head> tag as shown below:

<title>Yadda Yadda Links</title>
<link href="style1.css" rel="stylesheet" type="text/css">
</head>

<body>

Phase 3: Coding the Body

Now we'll start the main content — everything must go between the <body> </body> tags.

Inside the <body> tags, add <div>, <h1>, and <p> tags as shown, and fill in your own title - note that we've added an "id" selector to the <div> tag for later coordination with our style sheet:

<body>

<div id="main">

<h1>Yadda Yadda Links</h1>

<p></p>

</div>

</body>
In the <p> tag you just made, add your subnav categories, along with a typical spacing device such as a pipe or double-colon — and note that your category names should be short, for example:

<p>Coltrane Bio :: Coltrane Bandmates :: Musicology :: Jazz in General</p>
Switch from Dreamweaver's Code view to the Design view, and use the Properties window to create "embedded" or "anchor" links (like the subnav at the top of this assignment):

>>> Use your mouse to select the name of your first subnav category (e.g., Coltrane Bio)

>>> Type #1 into the "Link" box in Dreamweaver's Properties window

>>> Click on Dreamweaver's Code view, and you should see something like this:

<p><a href="#1">Coltrane Bio</a> :: Coltrane Bandmates
Create anchor links for the rest of your subnav: name them #2, #3, etc.
At the end of your subnav, click and hit the keyboard's Enter key to create a paragraph break.
Type a brief intro explaining how you've organized the info on this page (your subnav should make it pretty obvious, but some users will appreciate extra help).
In the Code view, double-check that all the content you've made is inside the <div> tags, so that the very end of your page looks like this (and always does in the future):

</div>

</body>
</html>
Save (Ctrl + S).
Use SSH to save your page from the "mid" folder on your desktop to your "mid" folder on Eden — and check permissions.
You should now be able to see your embryonic page online: swap in your username after you open this link http://eden.rutgers.edu/~USERNAME/425/, and then browse to your "mid" folder— if you can't see your page, you probably need to check permissions somewhere.

Phase 4: Subheadings, Links, and Blurbs

Remember to save your page often and upload it to Eden — otherwise you'll lose your work if your computer crashes. Also remember not to do any text-formating (bolding, coloring, sizing, etc.) until we get to the style sheet.

Use Dreamweaver's Design view.
From the end of your intro paragraph, hit Enter twice to create white space before your first section of links (in future revisions you might add some graphic or inset, but for now we just want plentiful space).
Create a Named Anchor:

>>> Select Named Anchor from the "Insert" menu at the top of Dreamweaver (or Ctrl +Alt + A)

>>> Type in 1 (that's it — now it matches the first anchor link in your subnav)

>>> You should see a small anchor icon; if you double-click it, the Properties window will show its name
Create the subheading for your first group of links:
>>> Hit Enter

>>> Select Heading 3 from the "Format" menu (on the left) of the Properties window

>>> Type in the name of your first category of links (e.g., "Coltrane Bio"). It should appear bolded because it's a Heading 3.
Create first link and blurb

>>> Hit Enter

>>> Type the name of your first link (e.g., Smithsonian Coltrane Exhibit)

>>> Use the mouse to select the link name your just typed, and then make it a link by copying the link's URL (from your Prep notes) into the "Link" area of the the Properties window

>>> Hit Shift + Enter to make a line break

>>> Type (or copy from your Prep notes) the blurb detailing this link

>>> Edit a little! (E.g., delete any extraneous language such as "This site..." or "There are...")

>>> Save (Ctrl + S)
Repeat Step 5 for all your links/blurbs in this category.
Add a "back to top" link:

>>> Hit Enter twice

>>> Type "back to top" or "top" (or something similar)

>>> Select what you typed, and make it an anchor link with a URL of just the # sign (then you won't need a named anchor; the link will automatically return users to the top of the page)

>>> Save (Ctrl + S)
Use SSH to save to Eden.
Repeat Steps 2-6 for your other subnav categories (with anchors named 1, 2, etc.)

Phase 5: Style Sheet

We'll do just a few things: set margins and style our <div>, contrast our headings and body text, format our paragraphs, and style our links. To examine further style sheet options, see CSS2 Reference .

Open your style1.css in Dreamweaver — it should be completely blank.
Set the BODY margin to 0 (otherwise, the browser automatically adds a margin)

>>> type exactly the following:
body { margin: 0px; background-color: #ffffff; }

Note the basic syntax: the "selector" (in this case, the name of an HTML tag), the curly brackets, the colon between the property name and value, the semi-colon after the property (it's not necessary to include the semi-colon after the last property, but it doesn't hurt, and then it's there already if you add another property).

Also note that we've saved space rather than following the traditional coding practice of writing the style rule on multiple lines (either way works fine)
Center the DIV, define a border, and set the width — note that this time we're using a name we've made up for the "selector":
>>> type exactly the following:

#main {
margin: 10px, auto;
padding: 10px;
width: 600px;
border: 1px solid #99ccff;
}

>>> Save (Ctrl + S)

Note that #main corresponds with id="#main" in your HTML.

Now double-click on links.htm in the mid folder on your desktop, and see what you've wrought — then play with values on the style sheet, as noted below:
- The DIV's margin defines where it lies in relation to the BODY (that is, the edge of the browser window, since we set the BODY margin to 0) and is set at 10 for the top and bottom, and default (center) for left and right
- Padding = the space between the outer edge of the DIV (which is always a rectangle) and anything inside. You can have separate padding-left, padding-top, etc.
- Width is one of the definable dimensions — text columns are seldom wider than 600px, and are often much narrower.
- Border is self-explanatory and has various possibilities for width, style, and color. You can also just have none, or define each border separately: border-top, border-right, etc. Pick your own color from RBG Color Chart or Other RBG Chart — and remember that we don't want the border to be louder than what really matters, your writing, so don't go crazy with the border style. Be subtle.
>>> Save and use SSH to upload to Eden.
Select contrasting styles for headings and body text: First, browse the Common Fonts, and pick contrasting ones. Don't use an odd font like Comic Sans for body text, but for headings probably anything would be OK. Also remember that you don't want light text colors against a light background.

>>> Type exactly the following, but swap in your own font-family and color:

h1, h3 {
font-family: Comic Sans MS, cursive;
color: #ff9900;
}

p {
font-family: Georgia, serif;
font-size: small;
line-height: 150%;
color: #000000;
}

Note that we've defined h1 and h3 together, and left their default sizes and other font and text properties, any of which you can define. Also, we've set a line-height in our P style rule to make the text easier to read.

>>> Save and upload to Eden.
Last, we should define our link text to be the same as our P text, but with a different color. Note that with links we have to use special syntax to define the different link states:

>>> Type the following, using the same font-family and font-size as in your P style rule:

a {
font-family: Georgia, serif;
font-size: small;
text-decoration: none;
color: #ff9900;
}

a:hover {
color: #000000;
}

>>> Choose colors that will complement others you've chosen for the page, perhaps the same color as your border or headings. Note that the "hover" defines the appearance when the link is moused-over. Also note that you can change the text-decoration.

>>> Save and upload to Eden.

Final Requirements

Completed Links Page drafts are due at start of Wk3 class and should

Be saved as "links.htm" to the "mid" folder inside your "425" folder, along with your stylesheet (and your completed Prep is in your "hw" folder);
Employ HTML4 layout and a functioning stylesheet;
Include a brief introduction, at least 3 anchor-linked subcatgories, and at least 15 links and blurbs;
Include no extraneous language such as "This site..." or "This is..." or other unnecessary phrases;
Include detailed descriptions of each listed site - e.g., the best part of the site, what's not so great, why it's better for a specific purpose than another similar site, etc;
Use contrasting fonts for headings and body text;
Have no permissions problems.

Going forward, think of a "special feature" you could add to this page to make it more attractive and less utilitarian for the Midterm: Add an inset like "Top 10 Facts About ..." or "Important Tips for Beginners" or "Favorite Albums by ..." or a map or diagram — anything that could appropriately jazz up the page and make your users feel extra welcomed and informed.

Site Feedback: William Magrino
wmagrino@rci.rutgers.edu