Introduction to Web Design

Art 101 · Fall 2020

Syllabus

Text · Grading Policy

Assignments – 1 · 2 · 3 · 4 · 5 · 6 · 7

August 24 - 28

The first week is an introduction to the course and the online tools. Using your access account, sign up for Web space and be sure you know how to post to your PASS space. (All your course work files should be in the www folder in your PASS Space.) If you don't have a personal home page up, make a simple one which can be revised later and have it available from your PSU address - mine is http://www.personal.psu.edu/jxm22, yours will be the same using your userid where I have mine, jxm22. If you already have site at that address, link your course page to that page. This is your first assignment.

There are many Web editors, both free and commercial. You can also do all your Web markup in a text editor, like NotePad (PC) or TextEdit (Mac) or free editors like Komodo (Windows, Mac, Linux), TextWrangler (Mac), NoteTab (PC), HTML-Kit (PC), jEdit and Sublime Text (Linux, Mac, Windows). All are free downloads. And there are many others, especially for Windows, just search for them. An excellent WYSIWYG editor, Dreamweaver, is available in most of the campus labs.

Read this tutorial to understand the basics of a web page.

Please don’t use a word processing program like MS Word or WordPerfect, saving your files as HTML, nor the web editor Front Page. They introduce a lot of unnecessary markup which makes the files hard to edit in a text editor.

Here is link to hotspots in State College and also information about internet connections at Penn State.

Reading assignment:

Simple & Useful: A Guide to Web Design,Introduction , pp. 1-2, Basics, pp. 3-5, HTML 5 Elements and Structure, pp. 7-13, Cascading Style Sheets, 15-18

August 31 - September 4

Assignment 1, the basic site is due September 4.

The second assignment is to present a dynamic extended text document, in this case a blog. Be sure to give careful attention to your choice of font, font size, line length and line height. This example I have prepared can be a starting off place for you - just save the source and edit it fit your needs. You can open the source in an editor and make regular additions to it. An additional entry every week until the end of the semester is required, a total of 12 entries.

If your native language is not English, or you are very fluent in another one, the text can be in that language. You will need to include a brief summary in English. If you work in another language than English, be sure your language setting is to UTF-8: <meta charset="utf-8">

Labor Day, September 7

September 8 - 11

While you are working on your blog. Look at examples on line - there are thousands available, just pick a topic that interests you and do a search to find one written about that subject. Look, for instance, at Scripting News, one of the oldest blogs. It is about, among other things, the effect of the internet on society.

Reading assignment:

Simple & Useful: A Guide to Web Design, Text & Typography , pp. 29-34, Presentations & Projection, pp. 35-40, Information Graphics, pp. 43-47

Assignment 2, the blog is due September 11.

It should be linked as Assignment 2 to your 1st Assignment.

September 21 - 25

The third assignment is creating a site that deals with a dense collection of information - here is one model based on a table and a second based on a list. Both are just the beginnings of information packed pages that can provide models for markup - look at Google News, Arts & Letters Daily or this discography for very rich, complete examples. For this assignment pick a topic that is of interest to you (it can be anything from the economy to comic books to sky diving to Mayan hieroglyphics) and build a site with links to information about it.

September 25 - October 2

To help in your research for your collection, in addition to Google, use Wikipedia, Britannica and Answers.com to find the material you want to link to your site.

Assignment 3, a dense collection of information, is due October 2

October 5 -9

Assignment 4 is creating three visual sites. Here are is an example using a background image, three more that relate to current events: 1 · 2 · 3 – and five others: 1 · 2 · 3 · 4 · 5 – which only use text and color.

Reading assignment:

Simple & Useful: A Guide to Web Design, Information Graphics, pp. 43-45, Small Graphics, pp. 47-51, Tables and Lists, pp. 55-88

October 12 - 16

Assignment 4, the visual sites are due October 16.

October 19 - 23

Assignment 5 is a return to extended text - in this case a research essay. It should be written by you, at least 750 words and can be about a topic of your choice. Format it in a way similar to a Wikipedia entry with list of contents and references (note the use of a table for Discography). Try to make is as easy to read as possible - compare these two examples: 1 & 2 - the first is how it was originally presented and the second refomatted to make it easier to read. Consider how much careful formatting can help the reader when you format your long essay. Don't include images for this assignment, they will be added in Assignment 6.

Assignment 5, the extended essay, is due October 23.

October 26 - 30

Assignment 6 is to add at least five images to your research essay, Assignment 5. They can be photographs, as in this site, and also maps and graphics of other kinds.

Assignment 6, the extended essay with images, is due October 30.

November 2 - 6

Assignment 7 – Take your blog and figure out how to embed different fonts in it for different headings and sections. This is to an example using seven different fonts and another with more than 30 - here is a tutorial on how to do embed a font in your web site with Google Fonts. You should embed at least three different fonts.

November 9 - 13

Complete the work on Assignment 7 this week and revisions or corrections you need to make to earlier assignments.

November 16 - 20


November 16 - 20

Assignment 7, Your blog with the embedded fonts is due November 20.

Thanksgiving November 22-28

 

November 30 - December 4

Make sure your blog entries have been made. A total of 12 is required to complete the assignment.

December 7 - 11

Completion of outstanding projects and revisions of them.

There is no Final Exam.

Grading policy

Your grade for the course will be based primarily on the quality of your individual work on your personal sites. You will have a one week grace period after the work is due to turn it in with no reduction in grade, every week after that will mean a reduction of one grade.

Each individual assignment receive a grade within a week after it is posted, if it is submitted by the end of the grace period.