Week 3: Converting Tables to Divs

For this homework, reconstruct this website: http://casabasa.com/web/mm2213_wk1.html
Remove all table tags: table, tr, td, th. Guidelines on chapter 3 of the textbook called "Explandable Rows". Provide finished page link. Embed css style sheet.


Here are the finished pages: (Click to enlarge each page)
Page 1 - Page 2 - Page 3








Page 1: Home; Introduction of the class
Page 2: Class schedule
Page 3: Student information

I separated the site into 3 pages. I took off the last two pages, resources and tutorials. Instead, I put those links into the student information page. This way is easier to read all together. I helped grouping the information all in one section, so no more separate ones, and easier to find information. The reason why I changed the layout is because I wanted to make the content box more smaller in the center. Easier to read and the page not spread out.

What I changed for the site:

• All dividers, no tables except the grades.
  
• Colors, font, and styles changed.
• Navigation on top of page now.
• Headers have background colors, depending on the h1,h2,h3.
• Content box in center with scrolling.
• Margins and paddings applied.

CSS style sheet:

FINISHED PAGE: http://slei89.aisites.com/introweb/week3/index.html
View source for HTML coding & CSS.

Week 2: Pantone Colors & Chapter 1

Pantone Colors
List 3 pantone colors and their RGB equivalent. I will be using these colors in the layout:

• #FFFFFF (white):
  - R: 255
  - G: 255
  - B: 255

• Pantone Black 7 C (dark gray):
  - #333333
  - R: 55
  - G: 53
  - B: 52

• Pantone 7545 C (blue):
  - #51626f
  - R: 81
  - G: 98
  - B: 111

• Pantone 2985 C (light blue):
  - #55c5e9
  - R: 85
  - G: 197
  - B: 233

Chapter 1: Flexible Text Using Ems
Link: http://slei89.aisites.com/introweb/week1/ch1.html

Sizing text using em units. The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.
IE/Win will not allow readers to resize text that has been sized in pixels. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Here are the Ems -> Pixels:

• 1em = 10px
• 1.2em = 12px
• .9em = 9px
• 1.8em = 18px
• 2em = 24px
  
  

Book: Bulletproof Web Design
http://clagnut.com/blog/348

Week 2: Box Model Tutorial

You need to know these keywords:

• Content edge or inner edge -- The content box edge surrounded by width and height.
• Padding edge -- The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge.
• Border edge -- The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
• Margin edge or outer edge -- The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.

• The box should be measured by width and height.
• Can use different kind of units or sizes: pixel (most common), em, %, auto
  
• Each edge may be broken down into a top, right, bottom, and left edge.

The middle box 300 x 200 is the content, edge surrounded by content is content edge. Padding is in turquoise color, around the content, or padding edge. Border is in blue, surrounds box's border. The margin is in the outside, wrapping everything of the box margin, or margin edge.
(Click on image to enlarge)
Here is an example of the code:

.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}

Let's try the calculations:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

There are properties and styles you can apply to the edges. For examples:

• border-width: thin, medium, thick

• border: border-top, border-bottom, border-left, border-right

• border-color: color value; hex code or color name
  - hex code: #FFFFFF, #000000
  - color name: white, black

• border-style:
  - solid
  - dotted
  - dashed
  - double

• margin: margin-top, margin-bottoms, margin-left, margin-right

• padding: padding-top, padding-bottom, padding-left, padding-right
  

This is my example I did:

Sources:
http://reference.sitepoint.com/css/boxmodel#
http://www.w3.org/TR/CSS2/box.html

Week 1: Sketches

Here is two example sketches I drew and scanned for the homework page:

Edit: Second sketch with notes attached. Changes may apply throughout process. I am choosing the first sketch on the left side.

(Click on image to enlarge)
More interactivity.
Link tabs with rollover. Pop out? Bounce tabs? Change color? Slide out? Use flash or javascript? Layout with a drop shadow. Gradient. Transparency.








First sketch:
(Click on image to enlarge)
(1) 3 Link tabs on the left side: home, homework, class. Layout set in center. Top with name banner. Header with title. Content box after. Bottom with footer.

(2) 3 Link tabs on the top of layout. Below links is the name banner. Content box after with two columns: homework and class. Bottom is the footer.

Timeline/Schedule for Homework

SCHEDULE SUBJECT TO CHANGE & STILL ADDING IN PROGESS FOR EACH WEEK. Here is the timeline/schedule for the homework assignments:

Week 1: Tuesday, July 13, 2010

• Sketch two examples in paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog.
  
• Write down the interactivity on paper and make notes to self. Write down the processes of the website/layout. Rescan and repost it on blog.
  

Week 2: Tuesday, July 20, 2010

• Rescan and post the a second layout with the notes. Choosing layout sketch 1 example.
  
• Changes to layout: rollover links, interactivity
  
• Type up a tutorial for the Box Model.
• Post chapter 1
  
• Put down 3 pantones (must be colors for website)
• I will be using these colors for layout. Colors may change throughout process of making layout.
  Colors: white, dark gray, blue, light blue (see other blog)
  

Week 3: Tuesday, July 27, 2010

• Reconstruct tables to divs (this web page), explain what is changed and why.
• Subcide tutorial
  

Week 4: Tuesday, August 3, 2010

• Start the layout for homework page. Designing, sizes, links/content. What kind of links/flash?
  
• Box model: try to create own and post up.
• On your homework page, create two pages from a Dreamweaver template. Insert an asset onto both. Email when uploaded.
• Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.
• Write in your blogs your best advice for getting creative.

Week 5: Tuesday, August 10, 2010

• Read Ch5, 6. Use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test.

Week 6: Tuesday, August 17, 2010

• Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source.
  

Week 7: Tuesday, August 24, 2010

• Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective.
  

Week 8: Tuesday, August 31, 2010

• Create wireframe of final project and post to blog.

Week 9: Tuesday, September 7, 2010

• Work on final project. Blog how you are creating your project to stand out from all the other submissions.

Week 10: Tuesday, September 14, 2010

• Work on project. Create a blog posting that is a sample of a possible process page for your final project.
  

Week 11: Tuesday, September 21, 2010
Last day of class.

First post!

Hello! Good morning~

My blog link: http://leisusan.blogspot.com/

Warning: Do not read. My blog will be extremely BORING . . . hahahahaha.

This is my new blog I created today. My name is Susan. So far, I've taken 2 already, so 3 more to go since I have 5 classes total. My hour schedule is pretty long... I don't have enough sleep! 8 hours each day. :( I'm so tired and sleepy! NEED COFFEE! I need more sleep. Well, I get off on Wednesday afternoon, so I'm going to take a nap afterward! However, I do have homework this weekend to look forward to...fun!

Oh, how I wished that my summer break was longer. It was so short! I think it was less than a month or almost about.

Edit: I GOT MY COFFEE! I hope I'm awake for class now!

That's it. I'll blog more if I have something to talk about. Bye!