MAT165 Exercises:
Exercise One: About Me
HTML & CSS
This exercise will review hardcoding HTML and using CSS (internal/document and inline styles) to format a basic html page.
Topic: This page is about you, why you are taking the class, what you hope to learn, things you know, things you enjoy, pets you have, and anything else you care to share. One page. As long as you want it to be. Your page should include:
- A page title with your name & Exercise 1
- A header with your name
- A narrative about you that uses <p> and/or <div> tags
- Subheads to divide the page up - <h2> &/or <h3> tags
- A list of links to your favorite websites <ul> or <ol> <li> & <a>
- A hot link of your email
- Document and Inline CSS styles
- Use commments in the code explaining what you are doing
- With styles define:
- a background color
- font-families, sizes, colors
- define link colors (a:link, a:visited, a:hover, a:active) - Name your folder " exercise1 "
- Name your file " index.html "
- Name the html <title> " Your Last Name - E1 "
- Load to your folder (there should be a folder with your last name on it) in our folder on the MAT server
Evaluation: This Exercise is worth 30 points:
- Coding & Functionality (10)
- Meeting project requirements (10)
- Your effort & creativity (10)
Late work may be lowered one letter grade for each class meeting it is late
Exercise Two: Poetry
DreamWeaver
Topic: Choose a poem, and use the tools available in DreamWeaver to bring it to life. Use formatting that reflects the theme of the poem. Add imagery (must be prepared for web use), add style, fonts, colors to the text, external links, internal jump links, colors and design to create your page. Link to it, a page with a brief bio (one paragraph) of the author and a page with a brief interpretation of the poem and why you chose it. You may also break the poem into multiple pages or use multiple short poems on by the same author on separate pages. Minumum of 4 pages.
Objectives:
- Link to multiple files (relative and absolute links)
- Learn file content management and structure
- Site organization in DreamWeaver
- Learn how to create a website template
- Image preparation for the web (save for Web & Devices)
Requirements:
- The main page with the poem will be creatively designed to bring the poem to life with images and effective fonts and color use
- Must contain links to all additional pages (relative links) and an absolute link to the source of your information
- The remaining pages must have:
- a consistent header
- navigation bar - linking to all pages including main poem page
- content area (with headings, subheads, paragraphs, and images)
- footer (with a copyright and whatever else you wish to include) - Name your folder "exercise2 "
- Name your poem page " index.html "
- Name the html <title> on each page " Your Last Name - E2 "
Evaluation: This Exercise is worth 50 points:
- Coding & Functionality (20)
- Meeting project requirements (10)
- Design & creativity (10)
- Your effort (10)
Late work may be lowered one letter grade for each class meeting it is late.
Exercise Three: Interactive Interface
Photoshop
Use photoshop to create an interactive interface. Combine several photos, use basic photoshop techniques to design a page. Use the slice tool and layers to create an interactive interface that links to all your other semesters work. Name the homepage you create "index.htm" and upload it to your studentwork/yourlastname folder on the server
Topic: Anything you would like. This is a page that will link to all your individual exercises and projects you create in this class.
Objectives:
- link to multiple files within your folder on the server
- creating layer photoshop files
- creating slices using the slice tool
- saving the file for Web & Devices as HTML & Image files
- Saving rollover images
- Using javascript Swop and Replace in DreamWeaver menu
Requirements
- Create a textural background image
- Add 2 to 3 visual images
- Add text links for each exercise and project
- Use the FX to create a special rollover effect for each text link (can be as simple as a change of text color with the color overlay)
- Create one additional rollover effect to be used as remote rollover for your Project2
Evaluation: This Exercise is worth 60 points
- Coding & Functionality (20)
- Meeting project requirements (10)
- Design & creativity (20)
- Your effort (10)
Late work may be lowered one letter grade for each class meeting it is late.