CE-9506_Session02

302 views

Published on

These are the slides for Session 02 of my Web Design Function & Analysis class currently being taught at UArts Philadelphia.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
302
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • CE-9506_Session02

    1. 1. Session 02: Web As A Medium CE-9506: Web Design - Structure, Function & Analysis
    2. 2. Structure of a Site • Websites are multi-layered programs running on the OS called the Web which is running on the Internet • usually consist of 3 layers
    3. 3. What makes up a web site? • Information / Content • information graphics (icons, pagination, etc.) • media (pictures, video, animation,etc.) • front end code (HTML / CSS) • back end code (PHP, Ruby, .NET)
    4. 4. What kinds of web sites are there? • Mini-Site (1-3 pages) • Marketing Sites • Weblogs (Blogs) • e-commerce • Web Applications • enterprise e-magazine and news sites
    5. 5. Web Page Breakdown • Header • Navigation • Content (multi-column) • main content • secondary content (sidebars) • Footer
    6. 6. Grid Systems • Aid in symmetric layout • allow a designer to visualize column divisions • give greater control over content structure • Are completely customizable • should be used in every web interface
    7. 7. Grid System • should not exceed 980px wide • made up of columns and gutters • columns can have variable widths • gutters should be at least 10-20px wide • what about horizontal?
    8. 8. Design / Code Relationship • Being familiar with code is a MUST! • You do not need to be a code guru in order to be a good web designer • HTML / CSS is an easy language to learn.
    9. 9. Design / Code Relationship • Hyper-text Markup Language (HTML) • Cascading Style Sheet (CSS)
    10. 10. Design / Code Relationship • CSS / HTML Control the Grid • CSS tells the HTML where to be and how to look • Some graphic elements can be rendered by the code • As much txt as possible should be rendered by the code.
    11. 11. That’s It! For my next trick...

    ×