1. Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 3B

2. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: Calendar

3. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: Lesson  Review of the lesson from our last class  the box model  the * in css  tags  ID’s  Header tags: h1, h2, h3, etc.  tags  unordered lists  Hacking into Dreamweaver’s 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. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: Lesson  The Box Model  http://www.w3.org/TR/REC- CSS2/box.html http://www.w3.org/TR/REC- CSS2/box.html  http://www.hicksdesign.co.uk/ 3dboxmodel/ http://www.hicksdesign.co.uk/ 3dboxmodel/

5. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: 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 Do’s Art 128 class web page for some examples.

6. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: 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. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: 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/default.asp  http://www.w3schools.com/css/css_examples.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. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: HEADS UP: Quiz next week!  To study, take the online CSS quiz at w3schools.com  http://www.w3schools.com/css/css_quiz.asp http://www.w3schools.com/css/css_quiz.asp

9. Art 128 :: Interface Programming 1 :: Week 3 :: B In-class Presentation :: Reminder  Install the Firefox Web Developer Tool bar (Firefox add-on)  https://addons.mozilla.org/firefox/60/ https://addons.mozilla.org/firefox/60/  http://chrispederick.com/work/webdeveloper/ http://chrispederick.com/work/webdeveloper/