Slide 1

Slide 1 text

introduction to WEB DESIGN brookline adult and community education SPRING 2012 taught by lou suSi

Slide 2

Slide 2 text

week 2 ankledeep more about text ( stupid font tricks ) web image basic including image optimization how about that tag? img positioning using css background img options tricks with img tiling

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

but first, the homework

Slide 5

Slide 5 text

homework

Slide 6

Slide 6 text

let’s talk about text, baby

Slide 7

Slide 7 text

firstly, there are always about 3 ways to do everything

Slide 8

Slide 8 text

text-related tags { and the anatomy of } here are some helpful examples of text-related tags

a brand new website

a paragraph with centered content

the same exact concept, using in-line CSS

the same exact concept, using an external CSS style


or

here’s some red error text

paragraph tag break { or a ‘soft return’ } span tag

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

be fearless

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

and feel free to ask me questions at any point

Slide 16

Slide 16 text

making mistakes and then troubleshooting is probably the best way to learn how to code

Slide 17

Slide 17 text

and now, back to text

Slide 18

Slide 18 text

fonts

Slide 19

Slide 19 text

fonts in the CSS p { font-family: Georgia, Times, serif; } in the HTML

Lorem ipsum dolor sit amet, ...

in the page Lorem ipsum dolor sit amet, ...

Slide 20

Slide 20 text

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

Lorem ipsum dolor sit amet, ...

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

a look at images for the web

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

image-related tags { and the anatomy of } here are some helpful examples of image tag details ”Lady img { border: none; }

Slide 30

Slide 30 text

background image tricks

Slide 31

Slide 31 text

web page layout basics

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

web page layout basics example of a fixed width layout

Slide 34

Slide 34 text

web page layout basics example of a fluid width layout

Slide 35

Slide 35 text

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/

Slide 36

Slide 36 text

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 ;]

Slide 37

Slide 37 text

No content