Your SlideShare is downloading. ×
Wdes105 day 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wdes105 day 2

111
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
111
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WDES105Day 2 -- CSS Layout Types about.me/babon
  • 2. CSS Layout TypesNearly every page design you see falls into oneof two types:● Fixed Width● Liquid about.me/babon
  • 3. Fixed Width LayoutsAdvantages:● Looks the same on all monitorsDisadvantages:● Looks the same on all monitors about.me/babon
  • 4. Fixed Width LayoutsFeatures:● Typically uses a "wrapper" with a width to contain content ○ 760 pixels (800 X 600 monitors) ○ 960 pixels (1024 X 768 monitors) about.me/babon
  • 5. Liquid LayoutsAdvantages:● Adjusts to fit all monitorsDisadvantages:● Adjusts to fit all monitors about.me/babon
  • 6. Liquid LayoutsFeatures:● Typically DOES NOT use a "wrapper" to contain content (no fixed width).● Typically uses percentage widths instead of pixel widths. about.me/babon
  • 7. Responsive DesignAdvantages:● Adjusts to fit all monitors and looks different on smaller monitorsDisadvantages:● requires more thought and additional coding. about.me/babon
  • 8. Responsive DesignFeatures:● Takes advantage of "media queries" in HTML5.Championed by Ethan Marcotte. about.me/babon
  • 9. Layout ExamplesFixed Width:● pretty much most of the WebLiquid:● Beantown Web● CSS3: The Missing ManualResponsive Design● The Boston Globe● CSS3: The Missing Manual about.me/babon
  • 10. Responsive DesignHow to determine if a site has been designedresponsively:● Use The Responsinator about.me/babon
  • 11. OtherCross Browser Testing:● Review of Cross-Browser Testing Tools about.me/babon
  • 12. WDES105 DeliverableBuild a website that highlights the Practicumprojects of four teams of graduating CDIA WebDesign and Web Development students.project.zipSame criteria as WDES104 project + addpositioned elements and z-index, if practical. about.me/babon