Home Portfolio Recipe TopTens Bio
 Susan Mandella's Web Site...A Work In Progress



Portfolio--Web Page Assignments I've Done

Flash Video

The final Case assignment of the semester in our Web Development Tools class was to make a video using Adobe Flash. This was much more labor-intensive than I had anticipated, but the extra practice in using Flash was very helpful, since many of the techniques taught in the Flash textbook were only covered once.

Check back here soon for a link to my video, as soon as I get done designing and uploading the preloader...

Case XML-1: Hamlet

screen shot of assignment

With this case, I got further practice in creating an XML web page and attaching a CSS stylesheet to the page to make it more visually attractive (slightly). The more I see of XML, the better I like it, and hopefully that will continue as my future assignments delve deeper into the nuts and bolts of XML.

Tutorial & Review XML-1: Jazz Warehouse

screenshot of Jazz Warehouse monthly specials web page screenshot of Jazz Warehouse rare items web page

This tutorial and review provided an intro to XML, its origins and structure, and what constitutes a well-formed XML document. I learned about XML declarations and comments, character and entity references, and the difference between character data and parsed character data. XML makes a lot of sense to me, and so far, I really enjoy working with it!

Review 10: North Pole Novelties

screen shot of assignment

In this tutorial and review, I learned about JavaScript--its origins, what it's used for, and how it differs from Java, JScript and VBScript. I learned how to write a simple embedded JavaScript program and also how to link to an external JavaScript file. I learned to create and call functions, work with date and math objects, work with conditional statements, create and populate arrays, write text to the Web page, and work with program loops. Fortunately, JavaScript has quite a bit in common with Visual Basic, which I'm also learning this semester, so this tutorial and review were actually fairly easy for me.

Case 9: Gargoyle

screen shot of assignment

This case gave me more practice in testing a web page and fixing the code to validate it to XHTML Strict standards, as well as more practice in using external style sheets to control the presentation aspects of the page. Actually, if I had been doing it the way I wanted instead of the way the book said, I would have laid this page out differently.

Review 9: Wizard Works

screen shot of assignment

Semester 2 is underway, and this first assignment of the semester introduced me to XHTLM as a reformulation of HTLM written in the XML language. I learned about Document Type Definitions (DTDs) and the three types of XHTML--transitional, frameset, and strict. I also learned about the XML namespace (the whole namespace concept was a little tough to wrap my head around, but I think I'm finally beginning to understand it) and XML declarations. I tested code using an XHTML validator and fixed the errors to make the pages comply with XHTML Transitional and then XHTML strict.

Case 8: Multimedia

clip art multimedia image

Well, here it is--the final task of the semester! This assignment called for me to incorporate some sort of audio or video file in my web page. I chose audio and had a great deal of fun creating my little sound clip, which you can hear by clicking on the "Listen to my sound clip" link below. The music playing in the background is a tiny portion of Guitar Etude No. 3 by Dan Fogelberg and Tim Weisberg,off their "Twin Sons of Different Mothers" album. Hard to believe the semester is over already, but I'm looking forward to continuing my foray into website design and development next semester.

Listen to my sound clip (MP3--116Kb)

Review 8: Mt. Rainier News

screenshot of Mt. Rainier web page screenshot of Mt. Rainier web page

This tutorial and review taught me about multimedia plugins and how to embed sound and video files on a web page. I also learned a little bit about Java applets and how to use a Java applet to create a scrolling marquee.

Case 7: 3-2-1 CSS Switcharoo

image of Thanksgiving style image of Christmas style

Holy CSS, Batman! This assignment was a real challenge. I had to design a three-page website from scratch using only HTML code, then write two different stylesheets for that website--one with a Thanksgiving theme and one with a Christmas theme. Given that I had just started learning CSS and really didn't feel at all comfortable with it, my stress level went way up.

Tutorial & Review 7: Online Scrapbooks

screen shot of Online Scrapbooks Getting Started page screen shot of Online Scrapbooks Gallery page

In this tutorial and review, I learned about cascading stylesheets. I discovered the difference between inline, embedded, and external stylesheets, and their order of precedence. I practiced applying styles to various id and class selectors, and used CSS to control all facets of the display of the web pages--colors, placement, sizing, etc. I also learned about the div element and how it's used.

Case 6: Forms-O-Fun

screen shot of assignment

Since the title of this assignment was "Forms-O-Fun," I decided to have some fun with the form I created while still incorporating all the form elements we learned about in the previous tutorial and review. Please don't hesitate to fill out and submit the form in the same spirit of fun!

Tutorial & Review 6: LanGear

screenshot of LanGear 
	registration form screenshot of LanGear 
	tech support form

As a result of this tutorial and review, I now know how to create web-based forms that incorporate various control elements such as input boxes, radio buttons, drop-down selection lists, option boxes, and buttons that users can click to reset the form or start processing it. I also learned how the form can be submitted via e-mail using the "mailto:" action.

Case 5: Floating Frames

screen shot of assignment

For this assignment, I had to add an inline frame to one of my website pages. The toughest part about this assignment wasn't figuring out how to put the inline frame on my page (by now I'm a lot more comfortable with HTML and it's easier to figure out how to do what I want to do), it was deciding what content to place inside my inline frame. In the end, I decided to make my iframe the target for more than one link.

Review 5: Yale Climbing School

Yale Climbing School home page

This tutorial and review taught me about frames--how to lay them out, how to control their appearance and functionality, and how to direct a link target to a specific frame or outside the frame layout. I learned how to create nested frames and inline frames, and how to add page content for browsers that don't support frames.

Case 4: Template Crazy

Code/Structure template image       Basic Layout Template image       Design Template image

This assignment taught me the power of templates for making web page design easier and faster. I had to design a code/structure template (the foundation of any web page), a basic layout template showing the table structure with no content, and a design template with colors, images, and sample content. Then I had to save the design template with different page names for each of the linked pages. Crazy is right!

Intermission: My Homepage Redesigned

screen shot of homepage redesign

With my web site redesign, I incorporated Internet conventions such as a page banner, navigation column on the left-hand side of the page, and a consistent appearance for all the pages of my web site. This was actually supposed to be a bonus assignment, but I didn't get it done in time to get the bonus points. I sort of worked on this in conjunction with Case 4, "Template Crazy."

Review 4: Park City Gazette

Park City Gazette Page 1 Park City Gazette Page 2

In this assignment, I learned about tables and how they can be used to control the appearance of a Web page. I practiced creating a text table and several graphical tables in various configurations, including nesting tables. I learned about border styles for actual tables, and tables that don't really look like tables. Tables, tables everywhere--and now it hurts to think!

Case 3: Pixal

Pixal DC500

The Pixal case gave me further practice in image mapping and the use of hotspots, as well as background colors and background images. I had to apply what I had learned about font styles and font formatting, margins, and imaging sizing and placement.

Review 3: Arcadium

Arcadium's Welcome Page Arcadium Park Map Page

Here I learned more about the use of color in web page elements, how to create and format background images, different styles for formatting text, setting margins around elements, what image maps are, and how to create hotspots within an image map--and those are just the highlights! I'm learning so much new stuff, sometimes I think my head's going to explode.

Case 2: My Homepage

Homepage Assignment With this assignment, I learned that it's fun but time-consuming (at least right now, since I haven't had much practice) to put together a Web page from scratch. I used the techniques I learned in Chapter 2 for linking to other pages, and some of the formatting techniques I learned in Chapter 1. I had to teach myself (finally!) how to use my scanner so I could scan photos of my sons into my computer and then put them on a web page, and I had to figure out how to import clip art so I couldmake my pages look more interesting. I'll be glad when I know more about how to get stuff to go where I want it on the page.

Review 2: Dubé 2

Dubé's Homepage       Dub&3233;'s Resource Page       Dub&3233;'s Glossary Page

This assignment taught me how to create links to jump around, both within a page and to other pages. I practiced creating element ids to mark specific locations within a web page, and using the href attribute to create links to those specific element ids. I learned how to open a link in a new window or in the current window.

Case 1: Frostbite Freeze

A Really COOL Assignment The Frostbite Freeze case taught me to apply a style to the body element to add a background image to the entire web page. This assignment provided further practice in using special characters, colors, formatting, and so on.

Review 1: Dubé 1

My First Encounter with HTML This assignment was my introduction to HTML. I learned about block-level elements and inline elements on a web page. I practiced basic formatting techniques, putting images on a page, creating lists, and making changes to an existing page. I'm going to really enjoy this class!

Auto: Manual: