Web Development Environments

1
Web Development Environments
Session 1 WDV102
2
WDV102 Overview
What we will cover this module

• Running a local server
• Hosting companies and environments
• Working with images
• Creating forms
• Mobile development
• Styling for print
• The state of browsers and browser hacks
• Final project

3
WDV102 Overview
Tonights agenda

• Introductions
• Review
• Your projects?
• Effective use of images
• Images with CSS

4
WDV102 Overview
Introductions

• Your name
• Goal for program
• Favorite web design resource

5
WDV102 Overview
About your professor

• Zac Gordon
• Webucator
• Business Owner

6
WDV102 Overview
Tonights agenda

• Introductions
• Review
• Your projects?
• Effective use of images
• Images with CSS

7
WDV101 Review
What do we know?

• File structure
• XHML / CSS Syntax
• Semantic markup
• CSS for layout
• Questions, concerns

8
WDV102 Overview
Tonights agenda

• Introductions
• Review
• Your projects?
• Effective use of images
• Images with CSS

9
Working with Images
Good examples of web images

• Go to a gallery site http//cssloaf.com
• Find 3 sites with good use of images
• Share why they are good examples

http//housingworks.com
10
Working with Images
What types of images

• How to get images info
• What type of images do they use?
• Why?

http//housingworks.com
11
Working with Images
Image formats

• gif
• jpg
• png

12
Working with Images
Where to find images?

• Legality?
• Sources?

13
WDV102 Overview
Tonights agenda

• Introductions
• Review
• Your projects?
• Effective use of images
• Images with CSS

14
CSS and images
What properties to set?

• The problem Want to set header image as
  background for header div.
• Justification for technique
• Solution for technique

15
CSS and images
What properties to set?

• width
• height
• image
• position
• repeat
• display
• padding
• margin

16
CSS and images
Setting image as background
header background-color ededed background-i
mage url(images/header.png) background-positio
n top center background-repeat none
http//www.w3schools.com/css/css_background.asp
17
CSS and images
Setting image as background
header width 800px height
100px padding 40px 0 10px background-color
ededed background-image url(images/header.png
) background-position top center
background-repeat none
http//www.w3schools.com/css/css_background.asp
18
CSS and images
Exercise CSS Background images

• Find an image
• Resize to 200 x 200 pixels
• Optimize in best format
• Place as background image for div using using
  CSS

19
CSS and images
Using CSS shorthand
header background ededed url(images/header.pn
g) none top center
http//www.w3schools.com/css/pr_background.asp
20
CSS and images
Exercise CSS Background images (shorthand)

• Redo using shorthand

21
CSS and images
Exercise CSS Background tiling

• Find a tiling image
• http//www.squidfingers.com/patterns/
• Make a 200 x 600 (or 600 x 200) div
• Tile the image

22
WDV102 Overview
Tonights agenda

• Introductions
• Review
• Your projects?
• Effective use of images
• Images with CSS

23
Wrap Up
Images make web sites pretty

• Effective use of images
• Background images with CSS
• Design skills might come in handy