Week 1 Week 2 Week 3 Week 4 Week 5
Week 6 Week 7 Week 8 Week 9 Week 10
Week 11 Week 12 Week 13 Week 14 Final hour
Schedule

Week One

Wednesday, Jan. 17
After a short organizational moment in Hickman Hall, we reconvene in Loree 023

In class

 

Homework

  • Update on Textbooks (Friday): The books have been "rush" re-ordered from the Co-op Bookstore and, I've been told, should be in by Tuesday.
  • Update on Textbooks (Thursday): It appears that neither Co-op bookstore nor RU bookstore have the books at present. The books were ordered from Co-op and should be there; possibly they are there but cannot be found (this happened last semester with one of the books). In any event, the Co-op bookstore is in the process of checking on the books and, hopefully, will clarify things soon.
  • Meanwhile, you might want to order Castro, Williams, and Price & Price online (they tend to cost less that way). I'll give everyone an extra week to get them and do the reading. However: you still will need to complete the rest of the homework. Use Google (etc.) to find the answers for the homework questions.
  • Note: the Castro book has changed its title between editions; the required 6th edition is called simply HTML, XHTML, and CSS
  • If you can get the books in time: read Castro, introduction and chaps. 1, 3, & 4; read Hot Text, chaps. 1 & 3; otherwise read them for Week 3 along with the new reading
  • Finish making your Web Bio Page; use W3 Schools and Castro (if you get it in time); students also find this HTML tutorial helpful
  • Remember, as mentioned in class, the GetIT HTML tutorial is a bit outdated; so, contrary to its example, do not use CAPS in tags and close all your tags
  • If you need to, download SSH for home use from RU Software (login with your NetID and search under keyword "SSH")
  • Answer the following questions on linking and URLs (use Castro to find the answers, if you have the book in time; otherwise use the internet – the answers are there):

    1. What's the difference between an absolute and relative URL?
    2. What would be the HTML code for an absolute URL (or link) to your 425 folder, so that it would open in a new browser window?
    3. If we were building a page inside your "425" folder and wanted a relative link from it to a page called "index.htm" in your "hw" folder, what would be the HTML code?
    4. What would be the code for an anchor named "part1"?
    5. What would be the code for a relative URL (or anchor link) to that anchor?
    6. In your own words, what is HTML and what is its relation to XML? (use Castro or the internet)
    7. Draw a diagram representing this relation

    • Print out your answers on a single page and bring them to class with the diagram

  • Think of a possible topic for your final project: You'll need to say what it is as part of next week's class discussion
  • If you are working on a suitable research project in another class, you may use its topic for your web-authoring project. Basically, you'd develop a website to complement your project in the other class. If you decide to do this, please discuss it with me

    • top

 

Week Two

Wednesday, Jan. 24
We meet in Loree 023

In class

    Work due

  • Due: Web Bio Page - post a link to your bio page in a reply to the "Bio Page" thread in the Class (see below)
  • Due: Answers to the Linking Questions (printed copy)

    • HTML Review

  • The box metaphor: Think of the web page structure as a series of smaller boxes inside larger boxes (body inside html, paragraph inside body, table cell inside table row inside table, etc.) and boxes in succession (e.g., one paragraph following another paragraph following a table, etc.)
    • html
    head
    body
    paragraph
    paragraph
    <html>

    <head ></head>

    <body>

    <p></p>
    <p></p>

    </body>

    </html>
  • Always close the boxes you open: If a page element has both opening and closing tags (e.g., <p>, </p>), don't leave out the closing tag!
  • Everything that appears in the browser window needs to be inside the body (i.e., between the opening and closing <body> tags)
  • The head section should not overlap the body section

    • Design Baseline

  • Open the Design Baseline handout (PDF)
  • With the Design Baseline in mind, take a look at these sites:

    Eric of the Web
    John von Neuman
    Ben Fry's Thesis

  • Take a look at your neighbor's bio page in terms of the Design Baseline; what are some changes that he or she would need to make to the page in order to conform to the Design Baseline?
  • Next: add to your own bio page a link to your neighbor's bio page
  • Revise your bio page in terms of your neighbor's comments and your own reading of the Design Baseline

    • Class Forum

  • Register for the Class Forum
  • Post a reply to the "Introductions" thread on the Forum, introducing yourself (e.g., major or likely major, career plans, interests, technical experience)
  • Post a link to your complete web bio page on the "Web Bio Page" thread

    • Linking

  • Linking and Folder exercise:
    1. Save the image on this page in the "img" folder in your "hw" folder on Eden
    2. Without copying the image into your "drafts" folder, add the image to the bottom of your bio page using a relative URL in your img tag
    3. Turn the image (now on your bio page) into a link to my website
    4. When you're done, let me know so that I can check your work

    • Further Reading Page

  • Intro to Further Reading Page (FRP) assignment
  • Research exercise
  • Begin to research and build your FRP

 

Homework

  • Read: Castro, chaps. 5, 6
  • Read Williams (Non-Designer's Design Book), pp. 10-86: these chapters introduce us to the mighty (simple) CRAP principles — Contrast, Repetition, Alignment, and Proximity — by which we make our pages look good
  • Write a short proposal for your Final Project and post it to Class Forum (specific questions for the proposal are listed on the Forum in the "Project Proposal" thread)
  • Finish researching and building the HTML version of your Dada FRP
  • Print out the text for your FRP on a single page (make it small, if necessary) and bring to class to turn in as homework

    • top

 

Week Three

Wednesday, Jan. 31
We meet in Loree 023

In class

    Work due

  • Initial proposal for Final Project
  • HTML version of FRP (post link to "Further Reading Page" thread on the Class Forum)
  • Printed copy of FRP text (shrunken to fit on one page)

    • Class Forum Reminder

  • If you haven't yet, register for the Forum
  • As stated in class, and as should really be obvious, this forum is STRICTLY for class-related communication. You ABSOLUTELY should not use it for other purposes, such as advertising ANYTHING.

    If you have posted this kind of material already, please respect others in the class and modify your post promptly.

    Also, as stated, do not post email addresses, or phone numbers, or SS numbers, or any other personal/contact information.

    • Bio Page Review: Clean Code and Displays

  • Let's look at the code for these five bio pages and see what makes each file easy or more diffcult to read:
  • Example 1
  • Example 2
  • Example 3
  • Example 4
  • Example 5
  • Next, let's take a look at these images — not at the visual level but at the data level:
  • Big Pictures

    • CRAP / Design Review

  • Example: Wondermints fan site
  • Example: Grand Central Station

    • Cascading Style Sheets

  • CSS Intro Lecture
  • CSS Basics
  • Animated CSS Demos
  • Another CSS Style Demo
  • CSS Exercise 1

    • Photoshop, Banners, Fun

  • Practice using Photoshop: make a banner for your "Dada" page
  • Your banner should use colors; an image or design of your own creation or one extensively modified in Adobe Photoshop (or another graphics program, e.g. Fireworks); and text made in Photoshop (or another graphics program)
  • Do not use HTML text in your banner!
  • As needed, refer to the GetIT Photoshop tutorial or any other tutorial of your own discovery
  • Sample banner: Goriya Games
  • Look at some (random) banners online. What are the conventions or typical features of the webpage banner?
  • When you've finished making your banner, incorporate it into your Further Reading Page and post a link to the revised page in the "Banners" thread on the Class Forum
  • Find a banner you like; link to its page and tell us why you like it in a reply to the "Banners" thread on the Class Forum

    • Links Page

  • Introduction to the Links Page assignment
  • Links page: Poker
  • Links page: Crew
  • Links page: World of Warcraft

 

Homework

  • Read CSS chapters in Castro; there will be a CSS *quiz* next week
  • Read Part I of Price & Price's Hot Text
  • Finish Further Reading Page and *banner*
  • Complete the Links Page prep assignment
  • Note: I've posted some comments on your project ideas in a reply to the "Project Proposal" thread on the Forum

    • top

 

Week Four

Wednesday, Feb. 7
We meet in Loree 023

In class

    Work due

  • If you haven't yet, tale a look at the comments on your project ideas that I posted to the "Project Proposal" thread on the Forum
  • FRP (HTML version) *with Banner*
  • Links prep assignment

    • More CSS

  • A possible CSS Quiz in the form of a short open-book exercise; next week is the real (tricky) quiz!
  • CSS Exercise 2
  • CSS Exercise 3

    • CSS and FRP

  • Add CSS to your Further Reading Page
  • An FRP example from the Spring: Octopus 1
  • If you have not done so already, use CSS to center the "wrapper" div containig your content
  • Next: use CSS to control the margins, padding, and font color(s), and background color(s) on your FRP
  • Customize the links on your FRP so that subnav links look different from other links on the page
  • Make sure your page has the following FRP design features (using CSS):

    1. Wrapper is no more than 770px wide
    2. Main content consists of darker text on lighter background (curious about this requirement? See these comments on readability from Max Design)
    3. Main textual content is left aligned and no more than 560px wide
    4. Main content has 15px or more padding left and right
    5. Main content has 20 px or more of padding top and bottom
    6. Main content has a background color
    7. The space outside the wrapper div (i.e., the body) has a different background color (or image)
    8. All intro and bibliographical data appears in a sans-serif font
    9. All headings (h1, h2, h3, etc.) in a contrasting serif font
    10. The page has a banner of your own design

      11. Note: Refer to Common Fonts page for some font options

  • Finally (but essentially): Does your FRP show good use of contrast, proximity, alignment, and repetition?

    • Links Page Prep

  • Peer-review Links Page prep

    • To get more of a user-perspective before building your page, form groups of 3 to review your Prep. Each reviewer should do the following:

    1. Read the Prep and add at least two questions/tasks — if you know nothing about the topic, that's fine: what are the first things you'd want to know?
    2. Read the links/blurbs and add notes about what more the descriptions could tell you
    3. Make up a 3-4 categories for how you'd break up the 15 sites into groups (e.g., "Beginner Info, Intermediate, Expert tips" or "History and Background, Tutorials, Equipment Retailers")

    Feature Page Assignment: Book Review

  • Intro Book Review assignment
  • Sample feature article: "Volumetric Mixers: Taking the Concrete Industry From Niche Market to Mainstream" (source: Grading and Excavation Contractor magazine)
  • Another sample feature article: "Mapping How People Use a Website" (source: Mappa Mundi magazine)

 

Homework

    Web Authoring

  • Finish CSS version of FRP
  • Revise Links Prep into the content for your Links Page. This should be saved as a text document (e.g., a Word file) in your "hw" folder. Prepare a printed copy before class to hand in
  • Select a non-fiction book related to your topic that you'd like to review for your Book Review page; post your choice (author, title, if possible a link to a page with information on the book; e.g., on Amazon) to the "Book Review Choice" thread on the Class Forum (more information on the assignment can be found there)

    • CSS Layout Reading

  • Read Castro, chap. 11 (layout with styles); chap. 12 optional but recommended
  • Read CSS Layout Tutorial
  • Read Glish's overview of CSS layout techniques

    • Plagiarism, copyright, & intellectual property reading

  • For a good sense of the tough reality of copyright conditions for images on the internet, read this informative exchange on Brian Carver's Ludwig Wittgenstein site
  • Review the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines
  • U. S. Copyright Office
  • Read this overview of copyright
  • Read this brief overview on Image use and copyright

    • top

 

Week Five

Wednesday, Feb. 14
Virtual class. Complete work online as described below. There is no meeting in person this week, but there is still work due today and work to be completed for next week. Read on!

Virtual Class

    Work due

  • FRP, CSS version — post link to your finished page in the "FRP + CSS" thread on the Class Forum
  • Your CSS instructions should be in an external CSS file (as we used for biopage2.htm). There should be a link to this file ("frp.css") in the head section of your FRP
  • There should be no major styling using HTML (no bgcolor or align inside your tags)
  • If you're having trouble with the CSS, then have another go at CSS Exercise 1
  • Book Review Choice — respond to the "Book Review" thread on the Class Forum for comments and approval of your book choice; I'll respond on the Forum by Friday morning
  • If I have not yet approved your project idea (on the forum or in class), then you need to email me with your new/revised idea or post your new idea to the "Project Proposal" thread ASAP; I'll reply as soon as I see it

    • Links Page

  • Using the text you've prepared as content and the CSS-version of your FRP as a model for the code and design, build the first draft of your Links Page
  • Refer to the Links Page Checklist (.doc) as you build your page
  • For next week: Finish the page and post a link to it in the "Links Page" thread on the Class Forum
  • Again, if you're having trouble with the CSS, do the best you can; make the Links Page using HTML and the revised content from your Links Prep

    • CSS Layout

  • The CSS Layout Quiz & Exercise (or "Quizercise") has been moved until next week. To pass you’ll need to complete the exercise(s) within the allotted time. To do this, review the CSS chaps. in Castro, esp. chap. 11 on layout
  • In particular, you'll need to float elements in CSS as covered in the online readings and the Castro CSS layout readings for this week; you'll need to be able to convert tables into divs and set an image for the background
  • If this is all baffling to you, study the Castro as best you can; the "quizercise" is really a chance for you to learn and practice thinking with CSS and not an actual test

 

Homework

    Reading

  • Review Castro on CSS, inc. chap 12
  • Browse Hot Text, chaps. 5-9 (on writing for the internet)

    • Drafting

  • Finish a first draft of your Links Page
  • Using the Hot Text advice on web-writing style, write a 250-word text introducing visitors to your website; turn in a printed copy: this text, once revised, will become part of your Home Page or Introduction page

    • Optional

  • Following Castro's model on page [TBA] in chap. 12, try to add a CSS pop-up feature to your CSS-revised bio page; include the CSS in the head section of your bio page, as we did in CSS exercises 2 & 3; this is a tricky challenge for anyone new to CSS, but it's worth giving it a try
  • If you get the pop-ups to work, post a link to your new bio page in the "Pure CSS Pop-Up" thread on, yes, the Class Forum
  • For more on pure CSS pop-upa, see Eric Meyer's Pure CSS Pop-up demo
  • The pop-ups are an interesting feature of web design that you might want to play with in the early pages if you're finding the CSS more or less managable; we'll be working more with them post-Spring Break
  • Note: The book-review essay will be due week 7, Feb, 28. It needs to be around 1400 words, or approx. 5-6 pages

    • top

 

Week Six

Wednesday, Feb. 21
We meet in Loree 023

In Class

 

Homework

    Reading

  • Color Tutorial

    • Draft Book Review

  • Book review, 1200-1500 words (bring a printed copy to class for instructor and save an electronic copy on Eden)
  • Other requirements:
    1. Use at least two main offline supporting sources (book or article)
    2. Be sure to quote from the book under review and your supporting sources; use MLA style in-text citation
    3. Find three relevant and informative images/illustrations (in addition to an image of the book and/or its author)
    4. Cite your sources (including image sources) using MLA style in a Works Cited section at the end of your review (or on a separate Works Cited page)
  • For some writing advice: How to Write a Book Review
  • Here's a sample book reivew
  • Here's another one (Colin McGinn)
  • Note: neither example is well-formatted for the web
  • Here's a third example (McGinn again), with more web-formatting

    • Draft Home Page Design

  • On graph paper or in a graphics program, draft an initial design for a home page for your site
  • Build the design around a single focal image
  • Maximize your use of blank space (i.e., avoid page clutter)
  • Where will the site nav go?

    • top

 

Week Seven

Wednesday, Feb. 28
We meet in Loree 023

In Class

    Work Due

  • Book Review (article); one printed copy, one electronic copy
  • Preliminary design for Home Page, on paper or electronic

    • Notes on Using Images

    Each image should have a caption identifying/describing the image and identifying the source of the image (if you are not its creator).

    Identify the image source by its author's name (author of the book, article, or website from where you acquired the image). For online sources of your image, let the identifying name double as a link to the source.

    In terms of CSS, you might want to create standard "left" and "right" classes of div for the two most common image positions. Include both the image and the caption inside these divs. Set the float directions for each div and use margins or padding to put space between the image and surrounding text.

    For an example of good image formatting with CSS see this example.

    Small images: Unless it is essential to your page design, you should not center small images on your page.

    Large images: If you need your user to view a very large image, put the image on a second page and create a link to it on your feature page.

    Keep data size of the images on your feature page relatively small; preferably under 100 KB. If necessary, resave them at a smaller data size.

    Finally, here is a demonstration of revising page design in order to use an image informatively with text

    Fonts

  • A few of you have asked me about which fonts, or font combinations, to employ for your pages and to specify in your CSS. Generally, you want to use a sans-serif for your main body text (I prefer Verdana). Most browsers support only a few fonts. For others, you'll usually need to use a graphic. For more, refer to the these two pages.
  • Common fonts to all versions of Windows & Mac equivalents
  • Font Tester – allows you see which fonts work in the browser you're using and to see how CSS affects the font in that browser

    • CSS Layout

  • CSS Layout demo (picks up where last week's exercises left off)
  • To start the demo, open this file, save it to your desktop, and open it in Notepad
  • For more: see the Maxdesign Float Tutorial

    • Critique of Links Pages

  • Let's go to the "Links Page" thread on the Class Forum
  • If you haven't posted a link there to your links page, your work is LATE; post a link immediately!!!

    • Revise Book Review

  • Peer-review and revise book review article
  • Make your text scannable (e.g., add descriptive sub-headings); see Hot Text, pp. 113-31
  • Be sure to "Build Chunky Paragraphs!"; see Hot Text, pp. 183-203
  • Try to eliminate all instances of "there is" and "there are" from your text (except, of course, quoted text)
  • Try to reduce total word count by 15-25%

    • Build Book Review Page

  • Build Book Review page and banner
  • Sample online review: Programming book
  • Sample online article: "The Airline Bankruptcies of the 1980s"
  • Requirements:
    1. Banner
    2. Subnav and site nav
    3. Three relevant, informative rather than simply decorative images
    4. Follows CRAP principles (see Williams)
    5. MLA-style in-text citation
    6. MLA-style works cited (on same page or on a linked Works Cited page)
    7. Three in-text links (for further reading)
    8. Two pull quotes
    9. Chunked text and lots of white space to assist readability
  • Save your draft as "review.htm" to your "mid" folder — and save its external style sheet there too, plus store all images in the "img" folder inside your "mid" folder

    • Homepage

  • Show home page sketches/designs to the instructor and to your neighbors for feedback
  • Your Home Page should establish the general "look" of your site; it should be constructed around a focal image or design and needs to give your user an overview of the site architecture (main pages, content, nav options, etc.)
  • Home Page Rule (as discussed last week): Main page design and content must fit in a 800 x 600 px space
  • Build Home Page with a main focal image (pattern, etc.) and working links to Feature, Links, and Bio pages, links to any other pages currently in progress (e.g., your background/surplus text page), and dummy (placeholder) links to about three other "future" pages
  • Save Home Page as "home.htm" in a new "mid" folder in your "425" folder and add an "img" folder there for all your images — remember to set permissions for all files and folders
  • Focal-image sites like Infomine, Rutgers AAUP, or Flickr feature a central graphic to grab users' attention and relay that attention onto written content. That's the key: deploy graphics strategically to help advertize your writing
  • Many students have tried this approach successfully, as in Bassosophy
  • Related reading: see Hot Text, pp. 156-61

    • Midterm Prototype

  • Your Midterm Prototype needs to include: Home Page; revised Links Page, Article (book review) Page, and Bio Page; Background Page (optional); Works Cited Page (optional); external stylesheet for all common CSS rules
  • References for Article Page research and images can be on that page or on the optional Works Cited Page
  • The Midterm needs to have a unified look or "visual theme," with a banner design based on/replicating some key features of the Home Page focal image
  • Your links page should have links and blurbs for at least 20 websites
  • Your revized bio page should fit your site both visually and in terms of its content; it should give a sense of why you've chosen to make your particular site
  • You may use single banner for all your pages or, more impressively, vary your banner thematically from page to page, as on this successful website
  • The Midterm pages need to link to and share a single external CSS file
  • Remember to keep your CSS clean and readable; organize selectors in an indented column; thus:
    • width: 400px;
    margin: 20px 40px;
    border: solid red 8px;
    padding: 4px 8px;

    Midterm Design Script

  • 1-2 pp., approx. 600-700 words, single-space, serif font
  • Discuss at least five aspects of your website in terms of different recommendations from Hot Text and Williams
  • Refer parenthetically to specific pages in both books
  • Quote selectively at least four times from each book
  • Basically, show how and why you apply certain ideas from Hot Text and Williams to the midterm revision of your site
  • Here are two sample design scripts; while they're from a non-web class, they should give a sense of the genre and for the kind of self-analysis that I'm looking for:
    1. Trifold Borchure design script
    2. Halloween Party Manual design script
  • The Design Script is due by 2 pm Monday, March 19, in two formats: (1) a printed copy with your name and a word count in my mailbox in the Murray Hall mailroom; and (2) an electronic copy saved in your "mid" folder
  • Midterm prototypes will not be graded without the Design Script

 

Homework

  • Complete Book Review (page) and banner
  • Build Home Page
  • Revise Bio Page and save in "mid" folder on Eden

    • top

 

Mock seagulls exploding at Rare Gallery

Week Eight

Wednesday, Mar. 7
We meet in Loree 023

In Class

    Work Due

  • Complete first draft of Book Review (page) and banner
  • Draft of Home Page
  • Revised Bio Page
  • By the start of today's class: post a link to your "mid" folder in a reply to the Midterm Preview thread

    • Critique & Review

  • In preparation for the midterm prototype, we'll take a look at your banners, Book Review pages, Home pages (so far), and revised Bio pages

    • Midterm Prototype

  • Work on completing the prototype
  • Recommendation: Use px rather than ems for width, padding, font-size (etc.) values in your CSS
  • The complete prototype is due Friday, Mar. 9
  • The Design Script (about 600-700 words) is due by 2 pm Monday, March 19, in two formats: (1) a printed copy with your name and a word count in my mailbox in the Murray Hall mailroom; and (2) an electronic copy saved in your "mid" folder
  • Midterm prototype grade will not be finalized the Design Script
  • For revision: Use Price & Price's Hot Text, Williams' CRAP principles, and the Yale Web Style Guide to direct your revisions and write your design script
  • Grading criteria

    • Managing Your "Mid" Folder

  • Make sure that all files for your midterm are in your "mid" folder and that your "mid" folder is directly inside your "425" folder and not inside your "drafts" folder or another folder
  • All the images for your midterm should be inside a single "img" folder inside your "mid" folder
  • All your common CSS should be inside a single CSS file, named "mid.css" (or something like that)

    • Favicon

  • If you want to take a break, use Google to find out how to make a favicon (e.g., ) for your website. Then make one. This will give you a chance to practice more with Photoshop and pixel measurements

    • Sample Final Projects

  • To get a sense of where we're heading, let's take a look at Matt Powell's excellent Black Superheroes website from last Spring
  • Here's another final project on New Brunswick and the Revolutionary War

    • More Photoshop, Image Swaps / Rollovers

  • Here are a few Photoshop tutorials that can prove useful as you work on your pages
  • Search the internet for other tutorials
  • Home Page with rollovers: Bassosophy
  • Another Home Page using rollovers: Matt's Surf History Site
  • Instructional (student) page with image map and rollovers: Rowers Line-Up
  • Another example of image map and swap combo, a timeline of "Locs Discrimination"
  • Two "homemade" demos:
    Text Swap Demo
    Image Swap Demo

 

Homework

  • Complete Midterm Prototype by the end of Friday, March 9
  • Submit Midterm DS by Wednesday, March 21
  • Collect images for an image gallery page that we'll work on after the break
  • Finally, what are two pages you think would be essential for your site – pages (or featues) your site would be incomplete without?

    • top

 

Spring Break

Spring Break image would go here if such a thing were to exist.

Week Nine

Wednesday, Mar. 21
We meet in Loree 023

In Class

 

Homework

  • Read Castro, chaps. 19-21 (on scripts in general, Javascript in particular, and special characters)
  • Build timeline, first draft
  • Determine at least two possible topics/ideas for your second major text page. As noted, it could be an in-depth essay, an interview with an expert or insider, or an extended tutorial).

    • top

 

Week Ten

Wednesday, Mar. 28
We meet in Loree 023

In Class

    Work Due

  • Draft of Timeline page for in-class review
  • Post a link to your Timeline page (even if there's nothing there yet) in the "Timeline" thread of the Class Forum
  • Two topic ideas for second "essay" page

    • Post-midterm Touch-up List

  • Make sure that . . .
    1. Base font for your site is sans-serif (e.g., Verdana)
    2. Font-size is not too big or too small (around 11-12px or .9-1em for Verdana)
    3. Text in vertical menus, lists, and general page content is not centered
    4. Images, whenever possible, are your own and not "borrowed"
    5. Images retain their original proportions, thus are not squashed or stretched or otherwise distorted
    6. Images do not display at a size greater than the original, thus are not blurry
    7. Images are not too small; images need to be big enough to show what they need to show
    8. Images are next to, immediately below, or otherwise near to the text that refers to them
    9. All non-purely decorative images have captions and, when not your own, source information
    10. Images acquired online identify and link to their source sites in the caption or in a source not clearly visible on the page
    11. The linked source site is not Google Images but the original source site
    12. The topic and purpose of your site is clear from the Homepage and Intro page
    13. Essential homepage content – focal image or pattern, main links, text – fits within an 800px wide and 600px tall box
    14. An explicit link to your homepage does not appear on your homepage
    15. Lists exhibit parallel structure (as does this one)
    16. All pages link to a single external CSS file
    17. Main text appears on brightest area of page
    18. The CRAP principles are being followed
    19. Your book review is at least 1200 words
    20. Your favicon works on all your pages in Firefox (don't worry about IE)

    • Conditional Comments Demo

  • Start a new HTML file in Notepad . . .
  • <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

    • Timeline Page

  • Revise Timeline page
  • Sample Image Map (not a timeline)
  • Here's the image for the previous example
  • Sample Image Map (timeline)
  • You might try making an image map in Adobe GoLive
  • Now that we've passed the midterm point, you may abandon the monochromatic minimalism of Notepad for a more versatile editor program
  • Recommened free editor: PSPad

    • Second Featue (Text) Page

  • Discuss topic ideas with the instructor
  • Begin to plan and research your essay

 

Homework

  • Finish revising Timeline page
  • Work on text for second essay page (due Apr. 11)
  • Start to plan your visual / gallery page
  • Think about possibilities for your (at least) two supplementary pages

    • top

 

 

Week Eleven

Wednesday, Apr. 4
We meet in Loree 023

In Class

    Work Due

  • Revised Timeline Page
  • Ideas for supplementary pages

    • Sample Web Pages

  • Front page: International Conference on Narrative
  • Online feature article: The Perfect Perscription (nymag.com)

    • Using Images Informatively and Responsibly with Text

  • Again: Wherever possible you should use your own images or images clearly in the public domain
  • Some ways of thinking about web images:
    1. Quality: Clarity, crispness, sharpness, level of detail, etc.
    2. Position on page as a whole, in relation to other elements
    3. Dimensions: Height, width
    4. Scale: Size in relation to page, other page elements
    5. Iconography: Subject matter, what objects are pictured
    6. Text in the image
    7. Text outside the image, relation to
    8. Colors
    9. Form / Perspective: Close-up or distance, whole figures or cropped figures, etc.
    10. Function: Informative or decorative; stand-alone or interacting with other images or text, etc.
    11. Fit: Does the image fit the tone and theme of the site, the page; does it satisfy its intended function; does it make sense? Also: does the image suit the taste, expectations, and culture of its likely audience?
    12. Timeliness/historicity: Related to fit; does the image look up to date or out of date; does the date of the image fit the theme of the site?
  • Examples from the American Rodeo site
  • Another Photoshop tutorial site: Tutorial Jungle

    • Banners

  • Review of site banners

    • New York After Dark

  • Compare the above mock banner (click to enlarge) with this one

 

Homework

  • Draft second essay

    • top

 

Week Twelve

Wednesday, Apr. 11
We meet in Loree 023

In Class

 

Homework

  • Prepare for CSS Quiz
  • Work on second Text Page and Visual Page
  • Plan two supplemental pages

    • top

 

Week Thirteen

Wednesday, Apr. 18
We meet in Loree 023

In Class

    Some Samples

  • Good images sizes in a narrow ("blog") column design: MoCo Loco
  • Ditto: London Ampersand Hunt
  • Nice home page and example of headings that are images: Really Wild Flowers
  • The second example is from the helpful web-design site, Web Design from Scratch

    • HTML-to-CSS Quiz

  • You'll need to convert an all HTML page into a page using CSS for styling
  • This will be pretty basic stuff: You should know how to style fonts and colors, control position and dimension (inc. centering), and set backgrounds
  • The quiz should take no more than 30 minutes
  • The quiz itself :
    1. Work in Firefox
    2. Save the quiz webpage to your desktop (Ctrl + S)
    3. Rename the page "quiz1.htm"
    4. Change title in head to Quiz 1
    5. Convert all the page styling from HTML to CSS
    6. Place the CSS in the head of your file rather than in an external file
    7. Replace positive and negative font sizes (e.g., +1, -2) with pixel or em font sizes (e.g., 10px, 1.5em); experiment to get the best possible match
    8. Hint: Replace the main table with a div
    9. Hint: Use the line-height property in CSS to improve the vertical match between your page and the all-HTML original page
    10. Test your page in Firefox as you work
    11. Get page to match the original in Firefox; then, get it to match in IE
    12. When you've finished, show your page to the instructor; once he has checked your results, return to working on your project

    • Class Work

  • Work on project

 

Homework

  • Complete drafts of second Text Page, Timeline Page, and Visual Page
  • Work on two supplemental pages: e.g., feedback page, FAQ page

    • top

 

Week Fourteen

Wednesday, Apr. 25
We meet in Loree 023

In Class

    Finishing Touches

  • Using multiple background images: Maratz.com (personal website)
  • Notice that Maratz creates a complex and stylish design by using multiple background images in combination: (1) one for the body background that repeats x and y; (2) one for the upper banner region that does not repeat; (3) one for the lower banner/site nav that also does not repeat; (4) a thin wide image for the main content area that repeats only vertically; and (5) one for the footer of the content aread
  • And from the same site: London Ampersand Hunt

    • Pictures

    final image 1
    final image 2

    Never go to finishing this section; I'm leaving it up as decoration

    Site Harmonization

  • All pages and images display (i.e., no permission problems)
  • Site nav (i.e., page to page linking) works for all pages and is consistent
  • Subnav on all pages works and that longer pages have "back to top" links
  • Home page (index, splash, front, intro, etc.) links to other main pages
  • Banner appears on all pages
  • All pages link to a single CSS file for your site
  • All pages are visually consistent

    • Final Website

  • Due online by Thursday, May 3
  • When you are finished, post a link to your site Home Page in the "Final Website" thread on the Class Forum
  • Your final site will need to have the following pages:
    1. Homepage
    2. Introduction (Preface): this may be part of Home Page or a separate page
    3. Book Review
    4. Second Text page
    5. Timeline page
    6. Visual page
    7. Links page: 25-30 links, with blurbs
    8. Two supplementary pages
    9. Bio page
    10. Works Cited/Credits Page
  • Your final site should meet, minimally, the critera of the Design Baseline
  • Site contents should pass the Google test (i.e., similar content isn't readily available), avoid generality, and present well-researched, detailed information tailored for your intended users

    • Final Design Script

  • Due online in your "final" folder by midday Friday, May 4
  • Include your name and the total word count at the top of the first page
  • Final DS should list and discuss some of your specific design decisions for the final site, concentrating (but not limited to) revisions made since the midterm
  • 500-plus words, single-spaced, divided into sections with descriptive headings. It should refer to and quote from Williams and Price & Price meaningfully and usefully (4 or more quotes from each source)
  • Quotes should be brief but not too brief. Avoid very short or single word quotes. Also, determine when a quote or reference to a source is genuinely needed and when it is just there to meet the quota

    • Final Website CD

  • Due by 12 pm Monday, May 7, in my mailbox in the Murray Hall mailroom or under my office door (Loree 010)
  • The disc should contain all the files (html, css, images) for your final website

    • Final Office Hour

    There'll be a final office hour on Tuesday, May 8, 5-6 pm, in Loree 010 (DC).

    At that time you'll be able to learn your final grade and get feedback from me on your final project. (Please note: The location, but not the date, might change; any changes will appear on this website before May 8.)

    Next Semester's New Features (tell your friends!)

  • Photo-essay assignment
  • Photoshop something or other assignment
  • Flash banner ad assignment: Irritating? Sure, but they're fun to make. Each student will make one for their site to be posted on a classmate's site (or something like that).
  • Ems, & ems, & ems
  • Web 2.0 — the game!

 

Homework

  • Finish website: due online in your "final" folder by Thursday May 3
  • Finish final DS: due online in your "final" folder by Friday May 4
  • Make CD of final website: due in my mailbox in Murray Hall or under my Loree 010 office door by Monday afternoon, May 7

    • top

 

Installation, Spencer Brownstone Gallery, NY, May 3

 

Final Office Hour

Tuesday, May 8
Stop by Loree 010 between 6 and 7 pm for final grades and feedback on your final project.

 

top

 

~Jonathan Bass
Web Authoring - Spring 2007