Introduction to Web Design — Week 1, Dip your toes in

In Spring of 2011, I taught an 8 week introductory course to web design at Brookline Adult and Community Education. This is the presentation deck from week 1 of the course.

1. introduction to WEB DESIGN brookline adult and community education SPRING 2012 taught by lou suSi
2. what we’ll cover HTML, CSS and some light JavaScript in Dreamweaver and Visual Design in Photoshop Designing for the Web as presented in a Browser
3. what we won’t cover in this class Flash or any ‘Multimedia’ Production Designing for All Devices
4. my goals
5. week 1 dip your toes in
6. life in a browser
7. anatomy of a browser
9. html { hypertext markup language } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>. lou suSi . DESIGN . artist, designer, musician + performer .</title> <meta name="description" content="artist, design, musician + performer living + working on the North Shore of Massachusetts"> <meta name="keywords" content="lou, susi, lou susi, loususi, bxos, ... <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:light,regular,bold' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> the visible part of the website all goes right here </body> </html> xhtml1-transitional.dtd"> ... of Massachusetts”> ... design, designer, fun"> ... type=”text/css”> ... type=”text/css”>
10. but that’s not what we’re covering here tonight
11. html { hypertext markup language } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>. lou suSi . DESIGN . artist, designer, musician + performer .</title> <meta name="description" content="artist, design, musician + performer living + working on the North Shore of Massachusetts"> <meta name="keywords" content="lou, susi, lou susi, loususi, bxos, ... <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:light,regular,bold' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> the visible part of the website all goes right here </body> </html> xhtml1-transitional.dtd"> ... of Massachusetts”> ... design, designer, fun"> ... type=”text/css”> ... type=”text/css”>
12. tags { and the anatomy of } there are really 2 kinds of tags in this world this kind <p>a brand new website</p> and that kind <img src="images/schwittr.jpg" width="183" height="191">
13. tags { and the anatomy of } most tags look like this, though <p>a brand new website</p> i always think of ripples when i think of tags
16. homework