Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Web Design — Week 2, Ankledeep

3d5dda7ecc1c799fece531917480d677?s=47 lou suSi
December 31, 2012

Introduction to Web Design — Week 2, Ankledeep

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 2 of the course.

3d5dda7ecc1c799fece531917480d677?s=128

lou suSi

December 31, 2012
Tweet

Transcript

  1. introduction to WEB DESIGN brookline adult and community education SPRING

    2012 taught by lou suSi
  2. week 2 ankledeep more about text ( stupid font tricks

    ) web image basic including image optimization how about that <img> tag? img positioning using css background img options tricks with img tiling
  3. None
  4. but first, the homework

  5. homework

  6. let’s talk about text, baby

  7. firstly, there are always about 3 ways to do everything

  8. text-related tags { and the anatomy of } here are

    some helpful examples of text-related tags <p>a brand new website</p> <p align=”center”>a paragraph with centered content</p> <p style=”text-align: center”>the same exact concept, using in-line CSS</p> <p class=”para-c”>the same exact concept, using an external CSS style</p> <br> or <br /> <p>here’s some <span style=”color: #cc3300;”><em>red error text</em></span></p> paragraph tag break { or a ‘soft return’ } span tag
  9. of course, some ways of doing things are better than

    others
  10. of course, some ways of doing things are better than

    others it will always be our strategy to build and iterate each page in a way that brings CSS style- and layout-related code out into an external file for more site-wide use
  11. of course, some ways of doing things are better than

    others but we’re not going to worry too, too much in this class about there being ‘one way’ to do all of this
  12. of course, some ways of doing things are better than

    others let’s not get too nervous or hung up on the details i definitely want you to just explore HTML and CSS
  13. be fearless

  14. nobody’s gonna get hurt if the code’s a little ‘off’

  15. and feel free to ask me questions at any point

  16. making mistakes and then troubleshooting is probably the best way

    to learn how to code
  17. and now, back to text

  18. fonts

  19. fonts in the CSS p { font-family: Georgia, Times, serif;

    } in the HTML <p>Lorem ipsum dolor sit amet, ...</p> in the page Lorem ipsum dolor sit amet, ...
  20. other font-related properties in the CSS .stylename { font-family: Verdana,

    Arial, sans-serif; font-size: 11px; font-style: normal; font-weigth: bold; line-height: 22px; color: #000; } in the HTML <p class=”stylename”>Lorem ipsum dolor sit amet, ...</p>
  21. once again, the CSS can be included in the header

    or in an external stylesheet but pushing the CSS out into an external stylesheet will make creating and maintaining CSS styles throughout a website easier to maintain at a global level throughout the site
  22. None
  23. None
  24. None
  25. None
  26. None
  27. a look at images for the web

  28. images for the web resolution 72dpi displayable image formats gif

    jpg png graphics interchange format joint photographics expert group portable network graphic good for flat, solid colors ( logos and vector art ) good for photographic imagery, raster imagery good for either of the above, larger file size supports transparency, sort of no transparency supports transparency
  29. image-related tags { and the anatomy of } here are

    some helpful examples of image tag details <img src=”ladygaga.jpg” width=”700px” height=”500px”> <img src=”images/ladygaga.jpg” style=”width: 700px; height: 500px;” border=”0”> <img src=”images/popstars/ladygaga.jpg” style=”border: none;” /> <img src=”http://famemonster.com/img/posters/badRomance77.jpg” style=”float: right; margin-left: 15px; margin-bottom: 22px;” alt=”Lady Gaga - Bad Romance Poster”> img { border: none; }
  30. background image tricks

  31. web page layout basics

  32. web page layout basics fixed width the width of the

    page container is a set pixel value the main contents of the page can be left, centered or right aligned within the browser liquid layout the width of the page container is flexible and will expand and contract with the size of the browser also called flexible layout, depending on what social circles you’re swimming in ;] mixed fixed and liquid layout a combination of fixed and flexible layout that keeps certain blocks of information fixed width inside more flexible columns or containers in the page also called elastic layout, depending on what social circles you’re swimming in ;] responsive layout the layout of the page changes depending upon the size of the browser the page is rendered
  33. web page layout basics example of a fixed width layout

  34. web page layout basics example of a fluid width layout

  35. web page layout basics more food for thought on fixed

    vs fluid layout http://coding.smashingmagazine.com/2009/06/02/ fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
  36. homework find 5 ‘different’ websites that appeal to you and

    do a little analysis get 2 screenshots from each site, include the home page and an inside page put the screenshots into Word, Pages, Powerpoint or Keynote and write up a short analysis of each site, just a paragraph or 2 per website include notes about the layout type, use of color and typography and what you think the core purpose of the website might be as well as your best guesstimate of who you think the target audience is as usual, have fun with it and be creative let’s try one right now together while we’re here in class ;]
  37. None