introduction to WEB DESIGN

brookline adult andcommunity education

SPRING 2012 taught by lou suSi

week 2ankledeep

more about text( stupid font tricks )

web image basicincluding

image optimizationhow about that <img> tag?img positioning using cssbackground img options

tricks with img tiling

but first, the homework

homework

let’s talk about text, baby

firstly, there are always about 3 ways to do everything

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

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

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

it will always be our strategy to build and iterate eachpage in a way that brings CSS style- and layout-related

code out into an external file for more site-wide use

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

but we’re not going to worry too, too much in this classabout there being ‘one way’ to do all of this

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

let’s not get too nervous or hung up on the detailsi definitely want you to just explore HTML and CSS

be fearless

nobody’s gonna get hurtif the code’s a little ‘off’

and feel free to ask me questions at any point

making mistakes and thentroubleshooting is probably

the best way to learn how to code

and now, back to text

fonts

fonts

in the CSS

p { font-family: Georgia, Times, serif; }

in the HTML<p>Lorem ipsum dolor sit amet, ...</p>

in the pageLorem ipsum dolor sit amet, ...

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>

once again, the CSS can be included in the header or

in an external stylesheetbut 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

a look at images for the web

images for the web

resolution

72dpi

displayable image formatsgif

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

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

background image tricks

web page layout basics

web page layout basicsfixed width

the width of the page container is a set pixel valuethe main contents of the page can be left, centered or right aligned within the browser

liquid layoutthe 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 layouta combination of fixed and flexible layout that keeps certain blocks of

information fixed width inside more flexible columns or containers in the pagealso called elastic layout, depending on what social circles you’re swimming in ;]

responsive layoutthe layout of the page changes depending upon the size of the browser the page is rendered

web page layout basicsexample of a fixed width layout

web page layout basicsexample of a fluid width layout

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/

homeworkfind 5 ‘different’ websites that appeal to you and do a little analysisget 2 screenshots from each site, include the home page and an inside page

put the screenshots into Word, Pages, Powerpoint or Keynoteand 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 typographyand what you think the core purpose of the website might be

as well as your best guesstimate of who you think the target audience isas usual, have fun with it and be creative

let’s try one right now together while we’re here in class ;]