Interactive Design I – Week 1

Unearthed Music Landing Page

Session 1: No class for Fall 2014/2015.

Session 2: Welcome to Interactive Design I. Today we will start with introductions, review the syllabus, and discuss the goals of the class. Our first project will be a simple one page layout called the Project Portal. The document layout will use “normal flow” to present a short biography and links to all of your upcoming projects.

Important: Normal flow is a term used to describe how an HTML document behaves when none of the elements within the document have been given values for the CSS position or float attributes. In this case all block-level elements stack vertically from top to bottom in contrast to inline-level elements that stack horizontally from left to right.

We will begin the first project using a text editor to create a basic single page website. Before getting started it’s important to understand a little about HTML and how websites operate. Therefore we will build our sites by using a text editor like TextEdit, TextMate, Sublime Text, or Smultron. This technique allows for the possibility of mistakes to be made and in-turn you will learn about troubleshooting techniques.

Assignment 1: “Project Portal” Static Web Page
Due: Session 1, Week 3 (10 points)

Description:
This assignment is an introduction to the most basic concepts of building a web page (i.e. normal flow, hyperlinks, file management, creating sub-directories, and basic CSS). It is also the mechanism through which I will grade all of your subsequent assignments. start by creating a home directory titled DES-325. Next, create four new directories within your DES-325 labelled for each upcoming project. You will then build one web page with the filename “index.html” with links to the new directories you created. Zip the entire directory structure and upload the file to the class portal at Learn@UWStout.

Requirements:
1. Build an environment for your Project Portal and upcoming assignments
2. The environment should contain all of the subdirectories necessary
3. Create a single project portal page in the DES-325 directory called “index.html”
4. The project portal will include a header, biography, images, and an unordered list
5. The list will have links to all upcoming projects

Points Breakdown:
2 points are awarded for coding headers, lists, links, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for preparing readable, accessible, and well design content for the page