The document outlines the structure and functionality of websites, detailing their multi-layered design which includes content, media, and both front-end and back-end coding. It describes various types of websites such as mini-sites, marketing sites, and e-commerce platforms, while emphasizing the importance of grid systems for layout and design control. Additionally, it highlights the relationship between design and code, particularly surrounding HTML and CSS, and encourages web designers to become familiar with coding without needing to be experts.

1. Session 02: Web As A Medium
CE-9506: Web Design - Structure, Function & Analysis

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

4. 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)

5. 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

6. Web Page Breakdown
• Header
• Navigation
• Content (multi-column)
• main content
• secondary content (sidebars)
• Footer

12. 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

13. 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?

19. 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.

20. Design / Code Relationship
• Hyper-text Markup Language (HTML)
• Cascading Style Sheet (CSS)

23. 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.

24. That’s It!
For my next trick...