Last Quarter of Semester:

April 11 - Due at End of class: 2 of your 5 web pages fully functioning
April 16 - Due at Beginning of class: 3 of your 5 web pages fully functioning
April 18 - Due at End of class: 4 of your 5 web pages fully functioning
April 23 - 25 - Fine tuning your sites
April 30 - Due at Beginning of class: Your entire site fully functioning & Demo for class.
Changes Small and Big:
  • Your home page must have the file name: "index.html"
  • Your site folder must be called "last_name_first_name_portfolio"
  • Your site folder should have only an images sub-folder, maybe a CSS folder and maybe a javascript and lightbox folders.
  • All .html files must be in your site folder, not in any sub-folder.
  • All of your pages must have an appropriate title (this is not the file name).
  • All of your files names must be in lower-case.
  • All of your CSS rules must be lower-case and may not contain numerals such as 1,2,3...
  • Every DIV in your .html files must be meaningfully commented at opening and closing.
  • Every page must have a clear indication of the page we are on: "current state"
  • Home pages must give us a clear and immediate sense of who and what you are.
  • CSS rules common for your entire site must appear in an external style sheet.
  • Remove everything from the folders you submit that does not appear on your web pages. (I don't want to sort through it).
  • If you have used images or code that you did not create yourself, create a comment in your homepage that details all of it, including things I've given you.
  • Your sites must be live as your new "mypage" site.
  • In addition to your site, submit a second folder called "last_name_first_name_designs." This folder must contain all of your final designs as Photoshop, Illustrator or InDesign files. This should NOT go on the mypage server and NOT go in your site folder.
  • Failing to follow these rules or others above or below will result in less than an "A" grade for the course.
  • If you have confusion about any of this, make sure to ask for clarification.
Things to be thinking about:
CONTENT!!!! - Get some good writing into your sites. Do this especially if you feel stuck on technical difficulties or design issues. Viewers of your site need to learn about you and your work. Describe it. Caption it. Provide context and reason for the work, why and how you did it.
REMEMBER: You need a minimum of 5 pages.
YOU ARE ARTIST/DESIGNERS: Your pages must show that through:
  • color choices and combinations
  • Layout: clear, pleasing, logical
  • font selection, sizes, styles
  • image quality, quantity, placement, size and spacing
  • Navigation: style, ease of use, size, placement
  • Texture: is everything flat? Or do you have textures, layers, depth and dimensionality - think shadows, borders, perspective
  • SHOW YOUR CREATIVITY AT EVERY STAGE!
YOUR LINKS PAGE: Before your site is completed, make sure to include at least 3 links to the sites of your classmates. Find three that you admire and put them on your links page. You do not have to categorize them as classmates, specifically. Who knows, in a year or two or ten you may be working with or for or above someone in this room
May 2 - Alternate methods of creating websites.
There will be no Final Exam for this course.

1. site definition (local and remote)

1. Start by requesting access to the SIU MyPage Server.
2. Create a New Folder on your Desktop and name it Joe Smith Site Folder
3. Follow the Site Definition instructions to set up your Local Site Folder and your Remote Site
4. Test your connection
5. Using the Files Panel in Dreamweaver, create a New File and name it index.html (you will use this in assignment 2)
Text: Chapter 1

2. simple site - hand coded page

Method:
Using the Code View ONLY in Dreamweaver, hand code a simple web page in XHTML that includes the following tags. Fill in each tag with biographical information.
Tags:
title - what shows up in the title bar of the browser
hI - heading 1
h2 - heading 2
h3 - heading 3
p - paragraph
br - line break
ul - unordered list
5 (li) - list items
a href = "" hyperlink to another page with full URL in parentheses
Process:
1. Site Definition
2. Files Panel > New File > name your file index.html
3. Include all tags inside of the body tag
4. Synchronize your finished page with the MyPage Server.
5. Place your Site Folder (named firstname_lastname_simplesite)in the Quigley Lab Server Folder: AD 332 Pease/Drop
Schedule:
Your File should be named: index.html and put up to the SIU MyPage Server.
Site Definition, Simple Site and Synchronization to Server are due Monday, January 24th, at the beginning of class.
Remember:
1. All tags to be visible in the browser window must be INSIDE the BODY tag
2. Name the first page in your site folder index.html. This is what the Server looks for as the first page.
3. Put all files to be included in your site, INSIDE the site folder
top of page

3. text formatting - cascading style sheets

Method:
1. Using the Files Panel, make a new page in Dreamweaver
2. Download and place the text from the following file into your new page
3. Create Structure for the text using the following tags

h1
h2
h3
p
a
ul
li

4. Style the presentation of the text using CSS Elment Rules for ALL of the tags listed above. (You may not need to style the UL) Proofread the document and check for errors
2. In addition, create a minimum of 3 CSS Class Rules and apply them to some of the tags listed above.
3. Place a link on your current index.html page named Text Formatting Exercise that links to the new page, and create a HOME link on your text formatting page to go back to your home page.
4. Synchronize your updated pages to the SIU MyPage Server.
5. Make a copy of your Site Folder and rename the copy lastname_firstname_textformatting
6. Put the folder you made in step 5 in the Quigley Lab Server Folder: AD 332/Drop

Schedule:
Text Formatting and CSS styling due Monday, February 6 during class.
Do Not:
Include Images, Flash, Sound Etc.
Add additional Text to the file
top of page

4. CSS page layout

Objectives:
This exercise is designed to help you work with and understand the CSS box model and positioning of elements for web layouts. Make sure to go to the TECHNICAL page in this site and do two things: click on CSS PAGE LAYOUT to view an image of what we are talking about, and get the HELPER FILE, which is the same document as I handed out in class.
Process:
1. Create a new HTML file named page_layout.html in your existing site folder.

2. Choose one of the page layout diagrams from the following page and begin inserting DIV tags and CSS style rules to recreate the diagram in HTML and CSS.

3. Start with a CSS style rule for the BODY TAG.

4. Insert a DIV tag in the BODY TAG to act as your container and style it using CSS.

5. Continue inserting DIV TAGS and creating CSS for them until your diagram has the same page layout as your chosen example.

6. Use the background color property to help differentiate each area.
Parameters:
1. Body Tag CSS rule should zero Margin and Padding and Center Align Text
2. Container DIV Tag should center content in a browser window (choose Auto for the value of Margin Left and Margin Right) and Align Text Left

 

3. Absolute positioning is only allowed in the footer and header.

4. No JPG's or PNG's, background images, or borders. HEX color only.

5. Height is often NOT declared when defining CSS rules. For this exercise, choose height and width dimensions to give your page the proportions you see in the diagram.

6. All CSS rules should be Internal and located in the Style tag or, if you feel comfortable in a linked style sheet.
Process for Submitting:
1. On your current index page, place a text link called css layout
2. synchronize your current site folder to the MyPage server with your new file called lastname_page_layout.html
3. make a copy of your current site folder
4. renamed the copied folder: lastname_firstname_layout
5. drop your copied site folder in AD 332 > Drop

Also for Wednesday. Create a cool background image that will wrap around a 960px container. Tools: sketch, collage, paint, photographs (printed!) - Do it on paper, then scan into computer. Paper version is fine for Wednesday. See first two links on links page to understand what I'm talking about. Do this on something at least as big as 11x17 inch paper.

 

CSS Page Layout and background image due Wednesday, February 15 at the beginning of class.
top of page

 

text formatting page

5. layout with text and image

Objectives:
Working with CSS Page Layouts
Working with Background Graphics
Working with Typography for Web to create a strong Visual Hierarchy
Managing Class, ID, and Compound CSS Rules
Assignment:
Using the provided file and graphic materials, style and structure a web page to resemble (as close as possible) the full page reference screenshot
Main Page Structure (HTML)
Body Tag
Container Div Tag
Header Div Tag
Content-Left Div Tag
Content-Left-Advertisement Div Tag
Content-Center Div Tag
Content-Right Div Tag
Secondary Page Structure (HTML)
Header Box Out Div Tag
Content-Center Left Article Div Tag
Content-Center Right Article Top Div Tag
Content-Center Right Article Bottom Div Tag
Content-Right Sponsor One Div Tag
Content-Right Sponsor Two Div Tag
Content-Right Sponsor Three Div Tag
Structure the text content in each Div Tag using common HTML Text Tags
h1
h2
h3
h4
p
Creat Compund CSS Selectors to style Text Tags within the different Div Tags in your page. ie.
#Content-Left h1
#Content-Left p
Parameters:
All provided text must be left as HTML and styled using CSS
Graphics can only be used where provided
No additional text or images
Process for Submitting:
1. On your current index (home) page, place a text link called layout with text and image
2. synchronize your current site folder to the MyPage server with your new file called text_image.html
3. make a copy of your current site folder
4. renam the copied folder: lastname_firstname_text_image
5. drop your copied site folder in AD 332 > Drop
Due: Monday, February 20 - at start of class.
top of page

6. Multiple background image

Objectives:
Photoshop review
Save for Web review
Working with Background Graphics
Working with transparency
Assignment:
Using the tutorial found at the following link: Using Multiple Background Images Follow the instructions to create a photoshop file and a web page with multiple background images. Have a look at what I created based on the tutorial.
Parameters:
Simply do what the tutorial tells you to do.
Make your photoshop file 1600 - 2000 pixels wide.
Make an html file called: background.html.
Process for Submitting:
create a folder and put the .psd file and background.html file in it and name it: lastname_firstname_multiple_backgrounds
drop the folder in AD 332 > Drop
Due: Wednesday, February 22 - during class.
And Read for Wednesday:
Designing a Knockout Portfolio Site (99%)

7. 3-Page Site Mock-up

Objectives:
Draft initial design of your site
Three distinct but related designs - meaning- home page looks different than contact page, looks different from porfolio pages.
Design with pencil, pen, and/or Photoshop, not with Dreamweaver

8. List-Based Navigation

Objectives:
Create a preliminary working navigation for your site.
Method:
To do this, create three simplified web pages (.html documents) based on your 3-page photoshop mock-up.
In the part of your design where your menu will appear, build a working, list-based navigation to navigate between your pages.
Using resources I provide, or other ones that you find, make sure your navigation indicates the hover state and the current page.
You may try to make this work well within your design, however the first step in functionality, meaning, make the navigation work.
Submit:
1. Create a New Folder (website) on your Desktop. Name the folder last_name_first_name_NAV.
2. Make sure all relevant files are in the folder and put the entire folder in the Drop Box for AD 332 Wendt.
3. Due: By End of class today.

9. 3-Page Site Mock-up 2 PRINTED

Objectives:
Improve initial design of your site.
Three distinct but related designs.
Design with Photoshop, not with Dreamweaver.
Submit:
Print all Pages for in-class review.
Drop new design file in drop box.
Share pages with small groups as directed by teacher. Each student reviews 3 designs and gives those reviews to the designer.
After reading and taking notes on all the feedback you received, post your design on the bulletin board.
We will then do a collective critique.
At the end of class, I will collect everything.
3. Due: March 26.
top of page