Schedule
Assignments
Students
Tue forum
Wed forum
Syllabus
Policies
Useful stuff

 

Week One

Tuesday, Sep. 5; Wednesday, Sep. 6

In class

 

Homework

  • Buy textbooks from RU Bookstore or online vendor of your choice: Castro; Williams; and Price & Price
  • Read Castro, introduction and chaps. 1, 3, & 4; read Hot Text, chaps. 1 & 3
  • Finish making your Web Bio Page
  • 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):

    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


    • top

 

Week Two

Tuesday, Sep. 12; Wednesday, Sep. 13

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

In class

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

    • Class Forum

  • Register for the class forum:

    Tuesday section
    Wednesday section

  • To learn about using online forums, review the following:

    Forum tutorial
    Forum FAQs

  • 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
  • Take a look at your neighbor's bio page; offer him or her some feedback; then add to your bio page a link to your neighbor's bio page

    • 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
  • 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

  • Revise Bio Page in terms of the Design Baseline
  • What are some changes you need to make?

    • Linking

  • Linking and Folder exercise:

    1. Save the image on this page in the "img" folder in your "hw" folder on Eden
    2. 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 Further Reading Page

 

Homework

  • Read: Castro, chaps. 5, 6; Price & Price TBA
  • Read Williams (Non-Designer's Design Book), 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 Final Project proposal and post to Class Forum (specific questions for the proposal are listed on Forum in the "Project Proposal" thread)
  • Finish researching and building HTML version of Dada Further Reading Page
  • 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

Tuesday, Sep. 19; Wednesday, Sep. 20

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

In class

  • Due: FRP HTML version
  • Due: FRP text version (i.e., print out of text; fit all text on a single page)
  • Due: Proposal for Final Project (post in response to "Project Proposal" thread on the Class Forum)

    • CRAP / Design Review

  • Example: Wondermints fan site

    • CSS

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

    • Photoshop, Banners, Fun

  • Practice using Photoshop or Fireworks: 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 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 this Fireworks tutorial or any other tutorial of your own discovery
  • Below are some sample banners:

    • Banner: Goriya Games
    The others have vanished!!!

  • What are some 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 and inlcude its URL in your post to the "Banners" thread on the Class Forum

    • Links Page

  • Intro Links Page assignment
  • Links page example 1
  • Links page example 2
  • Links page example 3

 

Homework

  • Read CSS chapters in Castro; there will be a CSS quiz next week
  • Finish Further Reading Page and banner
  • Complete the Links Page prep assignment


    • top

 

Week Four

Tuesday, Sep. 26; Wednesday, Sep. 27

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

Correction: The Wednesday section meets in Murray 038, our usual classroom

In class

    Work due

  • Links Page prep (electronic copy)
  • Revised FRP with banner

    • 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

  • Intro Feature Page assignment
  • Sample online feature page: "Mapping How People Use a Website" (Mappa Mundi)
  • Another sample FP: Watershed 263: A Resource Uncovered

    • 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 10 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?

Homework

 

Week Five

Tuesday, Oct. 3; Wednesday, Oct. 4

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Satellite Computer Room, 151 College Ave

In class

    Tuesday section: Due to cosmic interruptions well beyond our control, we'll start today promptly at 1.25 pm.

  • Due: FRP - CSS version
  • Due: Links Page Text - bring printed copy to class. Try to fit on a single page
  • Due: Topic idea for feature page essay

    • Plagiarism and Copyright

  • Discuss the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines
  • Discuss overview of copyright
  • Discuss Copyright Website
  • Website actively using borrowed images: Gone and Forgotten (Comics)
  • Website with copyright information: Making Sense of Marcel Duchamp
  • Copyright Exercise: Find an image online that falls under copyright (most of them do); make a simple web page displaying the image; add a caption underneath the image; add the copyright character and info to the image

    • CSS Layout

  • Discussion: CSS layout review
  • CSS Layout quiz: change table into divs; set background image using CSS
  • Note: For this "terrible" quiz you'll need to know how to float elements in CSS as covered in the online and Castro CSS layout readings for this week

    • Work on Links Page

  • Begin to build Links Page in class using CSS version of your FRP as your prototype

Homework

  • Reading: Hot Text, chaps. 5-9 on web style (long middle section of book)
  • Finish building your Links Page and post a link to your finished page (draft 1) in the "Links Page" thread on the Class Forum
  • Draft Feature essay (1600-1800 words); include a separate Works Cited page
  • Include a word count for your feature essay as part of the heading (with your name, date, etc.)
  • Preface your feature essay with a 250-word general introduction to your website topic
  • Formatting: double-spaced, 12-pt serif font
  • You'll need to quote at least three times (each) from at least two books or articles on or related to your topic. These should be works by experts on either on your topic or an area within which your topic falls (see above discussion of Links Page for particular topic/general area relation)
  • Save electronic copy of feature as "feature.doc" in your online "hw" folder
  • Bring one printed copy (for me) to class (print before class!)


    • top

 

Week Six

Tuesday, Oct. 10; Wednesday, Oct. 11

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Satellite Computer Room, 151 College Ave

In class

  • Due: Feature essay, draft 1 (1600-1800 words)
  • Due: Links Page with styling in an external CSS file

    • CSS

  • CSS layout "quizercise": floating images, two column with header layout
  • Problematic Page of the Day: Peter Galison

    • Plagiarism and Copyright

  • Discuss the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines
  • Discuss overview of copyright
  • Discuss Copyright Website
  • Website actively using borrowed images: Gone and Forgotten (Comics)
  • Website with copyright information: Making Sense of Marcel Duchamp
  • Copyright Exercise: Find an image online that falls under copyright (most of them do); make a simple web page displaying the image; add a caption underneath the image; add the copyright character and info to the image

    • Links Page

  • Peer review the Links Page using the Checklist (.doc) and make quick revisions
  • Add site nav to your Links Page (linking to Feature Page, Home Page, and Bio Page 2 in your Midterm folder)

    • Feature Page

  • Peer-review and edit Feature essay using Hot Text as your style guide
  • Begin building your Feature page
  • For a reference, look at this typical feature page: "The Airline Bankruptcies of the 1980s"
  • It exhibits a two-column feature article layout with images and captions in left column, in-text links, and a works cited. It's main text is about 1350 words long, that is, about the length you should aim to have inyour final version
  • What, if any, are its problems?

Homework

  • Read/re-read chaps. 5-9 of Hot Text
  • Respond to the "Non-Copyrighted Images Assignment" of the Class Forum
  • Finish building Feature Page
  • Make a shared banner for your site: this banner should repeat or match the main design of the front/home page you'll make for your site


    • top

 

Week Seven

Tuesday, Oct. 17; Wednesday, Oct. 18

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section returns to the Murray 038 Computer Lab

In class

    Work Due

  • Feature Page with banner

    • Favicon

  • 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 Project

  • To get a sense of where we're heading, let's take a look at
    Matt Powell's excellent Black Superheroes website from the Spring

    • Links Page Review

    Feature Page Review

  • Peer review and revise Feature Page:
    • What is the feature text's main purpose? case? project? argument? revelation?
    • What elements are still missing from the page?
    • Which element can look better? work better? be eliminated?
    • Images: how do they work with the text? what is their function? are they too big? too small?
  • Continue to revise your Feature Page text. Feature text at midterm shd be about 1200 words plus a Works Cited section

    1. Remove any "excess" background information from your text and move to a Background Information page that will contain essential background information (and trivia) related to your subject. Think of this as a kind of mini-dictionary or encyclopedia to which your other pages (e.g., the Feature Page) can link
    2. If you haven't done so already: edit out from your text any instances of "there is" and "there are." Try to keep your sentences between 12 and 20 words. Shorten your paragraphs to about 3-5 sentences each (with some longer paragraphs here and there). Divide your text into well-labeled sections of a few paragraphs each. Try to keep section titles or labels coordinated (grammatically similar)
    3. Your feature text should be about trimmed by about 20-25% (i.e., about 1200 words) from its initial length; at the same time: don't sacrifice clarity (find a balance)

    • Home Page

  • 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.)
  • The HP Rule: Main page design and content must fit in a 800 x 600 px space
  • Examples:

    Martial Arts
    Brian Kane
    Dam, Stuhltrager Gallery
    The Scientific Marine Acquarium

  • 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
  • Here's a nice example (despite the black bg): The British Museum
  • Here's a nice banner at The Natural History Museum (UK)

    • Midterm Prototype

  • Begin to revise pages for Midterm Prototype
  • Midterm Protoptype: Home Page; revised Links Page, Feature Page, and Bio Page; Background Page (optional); Works Cited Page (optional); external stylesheet for all common CSS rules
  • References for Feature 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
  • The Midterm pages need to link to and share a single 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. 500-700 words, single-space, serif font
  • Due with midterm
  • 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 Friday, Oct. 27, 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

Homework

  • Finish midterm prototype
  • Use 2Price's Hot Text, Williams' CRAP principles, and the Yale Web Style Guide to direct your revisions and write your design script
  • Use MLA style to document all your sources in a Works Cited section (for each page requiring one) or on a separate (cumulative) Works Cited Page


    • top

 

Week Eight

Tuesday, Oct. 24; Wednesday, Oct. 25

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Murray 038 Computer Lab

In Class

    Work due

  • Midterm Prototype (home page, feature page, links page, bio page, optional pages, and external CSS file)
  • Post a link to your completed midterm in the "midterm" thread on the Class Forum
  • Review the guidelines for the Design Script (due Friday, 2pm)

    • 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)

    • Image Swaps / Rollovers

  • Search Web to learn best way to make an image swap (rollover, text swap, etc.) using Javascript
  • 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

    • Dynamic Timeline Assignment

  • Timeline requirements: Interactive, illustrated, 12 or more events, with at least a 150 word introduction and adequately descriptive captions for each event, including links in each caption to relevant other sites or other pages on your site.

    • Your timeline page should continue the visual scheme established for the other pages.

    Your timeline can be monolinear; multi-linear/comparative; or branching (like a family tree).

    It can be vertical or horizontal (or spiraling), on a single page or distributed across multiple pages.

    It will also need to be interactive, using an image map with links down the page to further information and/or mouseover image-swaps (see Castro 328 and search online for rollovers or image swaps); or Flash, additional Javascript, etc. Use your imagination and what you have time to learn to guide the interactive dimension of your timeline.

  • Style note: Do NOT drop articles (the, a, an, etc.) from your event captions.

    • Sample 425 Timelines

    1. Geisha Timeline
    2. Surfing Timeline
    3. Home Entertainment Timeline
    4. Greco-Roman Timeline
    5. Stepmothers Timeline
    6. Airline Mergers Timeline

    Sample Non-425 Timelines

    Note: Some are more interactive than others

    1. This Far by Faith timeline
    2. Civil Rights timeline (nice and compact)
    3. African American world timeline
    4. Technology timeline (uses Flash)
    5. Special Forces timeline
    6. Computer history timeline (uses PHP)
    7. Timeline of sociology (needs images)
    8. Boring (Holocaust) Timeline
    9. Holocaust timeline (uses multiple pages)
    10. Rutgers timeline (uses frames)
    11. Shakespeare timeline (uses frames)

Homework

  • Find a good illustrated timeline in a magazine or book (e.g., a textbook) and bring it class


    • top

 

Week Nine

Tuesday, Oct. 31; Wednesday, Nov. 1

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Murray 038 Computer Lab

In class

Homework

  • Finish building timeline page
  • Rough draft for second feature page


    • top

 

Week Ten

Tuesday, Nov. 7; Wednesday, Nov. 8

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Murray 038 Computer Lab

In class

    Homework

  • Due: dynamic timeline page (if its does work dynamically, we'll fix that in class); topic idea for second feature article

    • Post-midterm Touch-up List

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

    • Timeline Page, etc.

  • Finish timeline page, discuss and begin working on second feature
  • Post a link to your Timeline page (even if there's nothing there yet) in the "Timeline" thread of the Class Forum
  • 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


    • top

 

Week Eleven

Tuesday, Nov. 14; Wednesday, Nov. 15

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Murray 038 Computer Lab

In class

    Homework

  • Due: Feature Page 2 RD:

    1200-1600 words,
    three or more (informative) images,
    three or more offline sources
    (online journal articles acceptable)

    • Sample Web Pages

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

    • Grading CSS

  • Take a look at this sample of midterm CSS
  • How can we make this CSS easier more effective, economical, and easier to follow?

    • Using Images Informatively with Text

  • Using Images
  • Some ways of describing an image:
    1. Position: on page as a whole, in relation to other elements
    2. Dimensions: height, width
    3. Scale: size in relation to page, other page elements
    4. Iconography: subject matter, what objects are pictured
    5. Text in the image
    6. Text outside the image, relation to
    7. Color
    8. Form / Perspective: close-up or distance, whole figures or cropped figures, etc.
    9. Funciton: informative or decorative; stand-alone or interacting with other images or text, etc.

    • Special In-Class Exercise!!!

  • It's special and it's in class . . .


    • Figure N Non-informative image


    top

 

Thanksgiving Week: No Meetings Scheduled

 

Week Thirteen

Tuesday, Nov. 28; Wednesday, Nov. 29

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Murray 038 Computer Lab

    Visual Page

  • As discussed in our last meeting, the visual page focuses on the visual rather than the textual
  • The page must relate to your site topic
  • It should contain at least 14 non-copyright images, preferably of your own creation (or commission)
  • The images should be divided into at least two categories
  • Each image needs a descriptive caption of more than a few words
  • The page itself must have an introductory text explaining its purpose and organization
  • As noted, as well, the visual page can be combined with the second feature page as long as the resulting hybrid satisfies the requirements for both assignments
  • The page can be a gallery, a visual tutorial, a visual narrative, a pictorial encylopedia entry, etc.
  • Example (1): A Chess Tourist in New York City - combined feature/gallery
  • Example (2): Manhole Covers - good captions (click on "view gallery" under the image)
  • Example (3): Cyanobacterial Image Gallery - low-tech (old school) gallery
  • Example (4): Roman Architecture
  • Example (5): Gold Key Star Trek Panels
  • Note: These examples are for class discussion; they are not necessarily models for your image gallery
  • Here is a useful article/tutorial on making a simple Javascript image gallery from A List apart; as you can see, if builds on some of the code we used for the Timeline Page
  • When making your image gallery, avoid "mysterious" non-captioned series of images, like this one:

    Thanksgiving


    top

 

Week Fourteen

Tuesday, Dec. 5; Wednesday, Dec. 6

The Tuesday section meets in the Satellite Computer Room, 151 College Ave

The Wednesday section meets in the Murray 038 Computer Lab

    Tuesday Section Only

    Today's class (Dec. 5) will start one hour later, at 2.10 pm. You are welcome to arrive at the usual time and work on your projects. If you have any questions or concerns, please email me.

    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

    •  



    top

 

Week Fifteen

Tuesday, Dec. 12; Wednesday, Dec. 13

The Tuesday section meets in the Murray 038 Computer Lab (not Satellite)

The Wednesday section meets in the Murray 038 Computer Lab

    Notes

  • Wednesday section: Today's class begins at 11.10 am

    • 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 the end of Friday, Dec. 15
  • 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. Feature Page 1
    4. Feature Page 2
    5. Dynamic Timeline Page: 12-20 events
    6. Visual Page: 14 or more images, 2 or more categories
    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 by 12.30 pm, Friday, Dec. 15, in my mailbox in the Murray Hall mailroom
  • 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, Dec. 18, in my mailbox in the Murray Hall mailroom
  • 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 Monday, Dec. 18, 3-4 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

    •  



    top