Part 3: Page Structure

Activity: Table of Contents (TOC) Create a table of contents that links to each of your previously built pages. Follow the directions on slides

Heading and Horizontal Rule Create a basic page, that says “Table of Contents” at the top. Add a horizontal rule:

options You can change width and thickness, color etc… n22.html

Creating a List Create your table of contents using a list. There are two types of lists: –Ordered: –Unordered: To specify a list item, use the tag

Your TOC Table of Contents Love Letter Lyrics A Few of My Favorite Things

Activity: Table of Contents 2 Create another table of contents and this time include an abstract of each page. (An “abstact” is a short description.) This time we will use the table tag,

Creating a Table es.asp

Your TOC 2 Create a 3X3 table with headings “Page Title,” “Abstract,” “Link” Format the table in a way that looks nice to you. Add your content (titles, abstracts, links)

Creating a Form ms.asphttp:// ms.asp Experiment with the “Try-it-Yourself Examples.”

Assignment 6: Survey Part I  Choose a topic for a quiz or survey. It could be something like you see on Facebook or in magazines, or something more serious.  Make use of the following features on your page: o Text field o Radio buttons o Check boxes o Submit buttons o Drop down menu Part II  Use a table for one or both of the following…  Include a link to another page that has a key (the way magazines do) to score the quiz. (i.e. Each “no” is worth 0 points, each “yes” is worth 1 points)  This page should give some interpretation of the results (i.e. If you scored 15 or higher, you are the “romantic” type)

Site Structure and Navigation It is important to think out the overall structure and navigation of your site These will depend on what type of content you are displaying Questions: –Does your website go from the general to the specific? –Should users follow a specific path through the content?

Structure Choices General to specific - “Hierarchical” –example: Specific path: “Linear” –Example: efault.asphttp:// efault.asp Structures explained: – te/website_navigation.html

Navigation Bar Can (and in my opinion should) be used to communicate the overall structure of your site They consist of links to important pages. They help the user get around your site Typically horizontal across the top or vertical along the left side

Creating a Navigation Bar To create a navigation bar, simply put the same links in the same place on all of your pages. home love letter lyrics HOMEPAGE home love letter lyrics LOVE LETTER home love letter lyrics LYRICS

Activity: Create a Navigation Bar Create a homepage – all it needs is the word “Homepage” for now Create links across the top that link to your files for your Homepage, Love Letter, Lyrics, Favorite Things, and Survey files –If you have lost (or never had) one of these pages, create a “bare bones” page that says “Love Letter,” or whatever title, at the top… Copy and paste the links to the top of your Love Letter, Lyrics, Favorite Things, and Survey files You have now created a navigation bar! (I will check this as part of your class participation grade.)