Kapiolani Community College

1

• Kapiolani Community College
• Art 128 Interface Programming 1
• In-class Presentation
• Week 3B

2
Calendar
3
Lesson

• Review of the lesson from our last class
• the box model
• the in css
• tags
• IDs
• Header tags h1, h2, h3, etc.
• tags
• unordered lists
  • Hacking into Dreamweavers new document settings
  • NOTE you will only be able to do this at home!
  • How to set up Testing documents.
  • Sneak peek at CSS positioning
  
  4
  Lesson
  • The Box Model
  • http//www.w3.org/TR/REC-CSS2/box.html
  • http//www.hicksdesign.co.uk/3dboxmodel/
  
  5
  In-class Exercise
  • Set up a few div testing documents and
    experiment with positioning. You do not need to
    post these on your site.
  • See John Dos Art 128 class web page for some
    examples.
  
  6
  WARNING!!!
  • I have posted OLD tutorials on the class web
    page. THESE VIDEO TUTORIALS WERE NOT CREATED FOR
    THIS CLASS!!
  • Be warned that due to my current computer
    situation, I am temporarily unable to create/post
    new video tutorials. Unfortunately we have to use
    some of the tutorials from last year.
  • Why should you care?
  • You should care because the video tutorials may
    be showing an older assignment or an older
    technique, and therefore may not be demonstrating
    the best practices. Knowing this, you should keep
    it in the back of your mind that I have posted
    these tutorials TO SUPPLEMENT the in-class
    lessons. So if you see my doing something odd, or
    different in the video tutorials than what I did
    in class, then know this WHAT I DO AND SAY IN
    CLASS TAKES PRECEDENCE OVER WHAT IS DONE AND SAID
    ON THE VIDEO TUTORIALS!
  • I will be sure to resolve my current video
    tutorial creation issue soon, so this will no
    longer be a problem. Thank you for understanding.
    
  
  7
  Assignment

• Re-do the CSS tutorial on w3schools.com and
  re-examine all of the examples.
• http//www.w3schools.com/css/default.asp
• http//www.w3schools.com/css/css_examples.asp
• Study them
• Try them out for yourself in testing documents.
• If you are caught up on your assignments and
  looking to have fun by learning more HTML and CSS
  on your own, you can work on the following
• Redesign your UH home page and your Art 128 home
  page.
• Try experimenting with background images.
• Experiment with div tags and positioning
• you can do this by making small test documents
  and messing around
• next week we will learn about several positioning
  techniques, including absolute vs. relative
  positioning floats, so you can do research on
  positioning if you would like. or you can go to
  the beach.

8
HEADS UP Quiz next week!

• To study, take the online CSS quiz at
  w3schools.com
• http//www.w3schools.com/css/css_quiz.asp

9
Reminder

• Install the Firefox Web Developer Tool bar
  (Firefox add-on)
• https//addons.mozilla.org/firefox/60/
• http//chrispederick.com/work/webdeveloper/

10
(No Transcript)