110 Lab week 5

Labs Start On the Hour

Please arrive at 026 Kla early enough to be seated and do the following:

If you arrive late, your lab instructor will not be able to take time away from the other students to fill you in on what you missed.

Lab Exercises

  1. Required 110 Information Architecture. On both the Local Host and Remote Host, you must have a site folder named /110/ containing these subfolders: p1, p2, p3, p4, fp, images, css, contact, and examples. Ask your Lab Instructor for assistance if necessary.

    Use SSH to connect to shell.uoregon.edu.
    Open a SSH File Transfer Window.
    Download your /110/ folder from shell.uoregon.edu, unless you already have a copy on USB.

  2. CSS Basics. The basics of CSS were covered week 4 in class. Review ch-4-CSS PPTs if necessary.

  3. Understanding Positioned Elements in CSS.

    The position style property in CSS allows you to define exactly where elements will appear relative to where they would ordinarily be.

    Browser support for positioning varies widely so, if you have not started to use FireFox for your 110 projects, now is the time. The examples we will use are rendered correctly by webs standards-compliant browsers (and that means FireFox).

    With position:absolute, the element is completely removed from the flow of the document and positioned with respect to its containing block (e.g., the body element).

    Positioned elements use four properties to describe the offset of the elements sides relative to its containing block: top, bottom, right, left. For example, top describes how far the outer top edge of the positioned element should be placed from the top of its containing block.

    In your week 4 lab, you learned how to use HTML tables to create a three-panel page layout.

    You can use CSS to create the same layout. Your lab instructor will explain the basic concepts of positioning using this example: positioned-elem.html.

    You can then use the example to create a new /110/index-110.html page using CSS.

  4. W3C CSS validator.

    You lab instructor will demonstrate how to use the CSS validator:

    a) copy the style rules from the internal style sheet of positioned-elem.html,
    b) select the By Direct Input tab of the Validator
    c) paste the CSS code into the textbox.

    The color names used in the CSS (thistle and ivory) do not validate. W3C has listed 16 color names that will validate. When choosing your own colors, use color names that will validate or use hex triple color codes like #33CCFF; all hex triples pass the validator.

  5. Using CSS for Web Page Layout: Create a New /110/index-110.html Page.

    Start TextPad and solve exercises A and B during lab with your lab instructors help:

    1. Solve requirement #3 of P3-A.

    2. Solve requirement #4 of P3-A.

110 Computing Environment

Micro Labs on Campus: In addition to 026 Kla, You can work in 013 Kla, 101 Mck, the EMU labs, and other computer labs on campus.

Saving your Lab Work: The My Documents folder on the PCs in 026 Kla is cleared periodically. If you want to save a copy of your lab work, use SSH's File Transfer window to upload your files and/or folders to your shell.uoregon.edu account. Or bring a USB drive with you to your lab and keep your /110 folder stored on that drive.

110 IT Applications/DuckWare CD: All the software we use in the lab (SSH, TextPad, FireFox, Fugu, ..) is on the DuckWare CD, and can be installed on your personal computer (Windows and/or OS X). The DuckWare CD is available from MicroHelp, 151 McKenzie. With the Duckware CD, you can set up your own computer with all the ingredients in the 110 IT Cocktail. Make it a double ;-) See also: OS X applications and Parallels Desktop.

110 Learning Environment

At the start of the term, your lab instructor will regularly stop and ask the question, "Can all of you hear me, especially in the back of the room? Can you understand what I am saying?"

It's important that you are able to follow along as the instructor presents material. If you cannot hear or understand what is being said, please raise your hand and say (polite always works) that you are having difficulty following the presentation. The lab instructor will appreciate your assistance.

Also, please keep in mind that your responsibility is to pay attention and follow the instructor's directions. In particular, you should not be reading email, surfing the web, visiting with other students, etc., during the lab. Save those activities for after the lab.