INP 140: Day 5

1
INP 140 Day 5

• Colors Images

2
Review Root Folders

• The root folder IS your website

3
When we are using dreamweaver, it is creating
files and saving those into our root folder.
4
To save our website, we just have to go to File gt
Save All. This will save all of the pages we have
edited or created.
5
Then we copy the root folder onto our thumb
drive.
6
If you want, you can edit your site off of your
thumb drive.
7
Simply browse to and select your thumb drive when
you are selecting your root folder.
8
Site Definitions just let you MANAGE your sites...
9
If you are still having trouble practice practice
practice.
10
Colors Images

• We will work with colors on our web sites in two
  ways.
• Directly modifying and changing colors in
  dreamweaver (which modifies the HTML)
• Through images, which have the colors stored in
  the image files themselves.

11
Dreamweaver Color

• In dreamweaver we can directly
• Change the background color of the page, table
  cell, etc
• Change the color of a font/type
• This change alters the HTML or the CSS, which
  tells the browser to show the item with a
  different color.

12
Now what about color?

• Does anyone remember how colors are made in terms
  of color theory?
• Colors are mixed together
• The mixed colors create new colors
• Example Mix red and blue you get purple

13
Screen Color vs Print Color

• The way color is created when you print something
  out is different than when you view it on a
  screen.
• In print, light is reflected OFF of paper and
  into your eyes.
• On a screen, the light is omitted from the screen
  and into your eyes.

14
More on light

• Printed color is CMYK color
• CMYK stands for Cyan Magenta Yellow and Black
• Those colors are mixed together to get the
  different tones of color that you end up seeing
  in a printed image.
• Ever notice that when you print something out it
  has slightly different colors than when it is on
  screen?

15
Screen Color

• Screen color is not CMYK color, it is RGB
• RGB stands for Red, Green, Blue
• Red, Green, and Blue are mixed together to in
  different proportions to get the whole range of
  the color spectrum.

16
The web is RGB

• Color on the web is all based in RGB
• Every color is a defined mixture of red, green,
  and blue
• When we select a color in dreamweaver we are
  really just specifying different amounts of
  red/green/blue.

17
RGB Colors

• Like mixing colors, if we add the maximum amount
  of all colors (R/G/B) we get white (all cancel
  each other out)
• If we dont add any of the colors (R/G/B), we get
  black.

18
COLOR DEMO

• Demo of selecting color in dreamweaver

19
HEXADECIMAL

• Colors in HTML are created in Hexadecimal
  Format
• Hexa means 6, and deci means 10
• This means there are 16 values available
• The hexadecimal system counts by0 1 2 3 4 5 6 7
  8 9 A B C D E F
• 0 means nothing, and F is the maximum value

20
HEXADECIMAL COLORS

• When we set a color in dreamweaver it creates a
  hexadecimal color code which tells our web
  browser what color to display.
• Hexidecimal colors follow this format
• RRGGBB - example 550000
• means it is a hexadecimal number
• The first two values are the amount of red, the
  second two values are the amount of green, the
  last two values are the amount of blue.

21
Examples

• So a pure red color would be
• FF0000
• FF is the highest value, the first two values are
  the red value.
• 00FF00
• Pure green, FF is the highest value RRGGBB
• 0000FF
• Pure blue, FF in the blue positions RRGGBB

22
What colors would these be?Remember RRGGBB

• FF00FF
• Purple
• FFFFFF
• White
• 000000
• Black

23
Where do we control font color?

• Can anyone guess how you would edit font color?

24
Font color

• In our good old friend the properties panel.
• Select the text, click on the text color icon. A
  window pops up where you can select a color.

25
What about the background color?

• The other area we can adjust the color is the
  page itself.
• Click modify gt page properties
• There is a background color field, where you can
  select a new background color.

26
(No Transcript)
27
Demo

• DEMO of colors

28
What happens with new colors?

• When we select a new color, we can see what we
  have selected in the properties window.
• Notice dreamweaver creates the hexadecimal code
  for us?

29
Images Working with Images

• Working with color in HTML is usually limited to
  the color of text, or the background of elements
  (table rows/cells, pages, sections of the page).
• If you want to do more with color such as rich
  user interfaces or drawings/artwork you will have
  to use a graphical image.

30
When to use images?

• You could create a web page that was nothing but
  images
• However search engines would not be able to read
  it
• It would be slow to download
• Users with screen readers or text browsers would
  not be able to use the site.
• You wouldnt be able to select text, copy and
  paste, etc

31
Putting images on the web

• When we put an image on the web, we have to be
  aware of the PROPERTIES of the image.
• What is the format of the image?
• What are the dimensions of the image?
• What is the file size of the image?
• Should we change the format?

32
Size

• The visual dimensions of the image?
• We have to be aware of the screen resolution your
  users will be operating at.
• Different monitors and computers run at different
  resolutions.
• Resolution is the width and height that your
  monitor displays IE some monitors/computers
  will have a wider or taller view than others.

33
Screen Resolution

• The width and height of available space on your
  monitor (screen resolution) is measured in
  pixels.
• A pixel is a single dot on the screen
• Your resolution is the amount of pixels wide by
  the amount of pixels high the monitor is
  displaying.
• http//en.wikipedia.org/wiki/Display_resolution

34
(No Transcript)
35
Resolution

• It is not a DIRECT relationship with the physical
  size of your monitor (ie a 17 monitor vs a 25
  monitor)
• You can opt to run a lower resolution even if
  your computer/monitor supports it, some people do
  so because it makes things look bigger and easier
  to read.

36
Resolution and what that means

• Browers automatically create scroll bars anytime
  the page is wider than the viewing screen.
• Scrolling up and down (vertically) is universally
  accepted, doesnt bother most users.

37

• Scrolling left and right (horizontally) tends to
  upset users.
• SOOOOOOOOOO you dont want to put an image in
  that is wider than your viewers resolution /
  screen size.

38
Common Resolutions

• It used to be that 800 x 600 was the most common
  resolution
• 800 pixels wide, by 600 pixels tall
• Now 1024 x 768 is the most common resolution
• 1024 pixels wide, by 768 pixels tall

39
So what is the maximum width we want our images?

• If we are targeting 800x600
• 740 pixels wide
• If we are targeting 1024 x 768
• 960 pixels wide
• Why?
• Scroll bars take up space in the browser, not all
  people browse with the browser at maximum size.

40
(No Transcript)
41
Planning

• First we must pick a target resolution
• Are the people using our site likely to be using
  800x600?
• Might want to have things bigger, easier to read?
• Or would they be using 1024x768?
• More tech savvy, younger, etc

42
What does all of this mean for us?

• Most pictures taken from digital cameras are way
  too large for the web.
• In general print images are much larger than web
  images.
• A screen has 72 dots per inch (DPI)
• Printed elements have 150 - 300 dots per inch
  (DPI)

43
DPI SIZE

• All you have to know is that printed images are
  much more detailed, when you try and put a print
  image into a website it ends up HUGE.
• You will notice the width of the picture is much
  MUCH bigger than 960 pixels wide

44
Size Awareness

• So we have to be aware of the size of any image
  that we intend to put online.
• Otherwise it could break the site that we are
  working on.

45
Image Formats

• What are some image formats you have worked with?

46
Common Image Formats

• TIFF
• BMP
• EPS
• JPG
• GIF
• AI
• PSD
• PNG

47
Web Files

• When work with images online we will be using
• JPG (or JPEG)
• GIF
• Or PNG

48
JPEG Pros / Cons

• .JPG support 16.7 million colors
• They get compressed, compression makes the images
  look dirty. They have artifacts.
• Digital cameras usually use .JPG
• Not good for simple line drawings, or text as it
  loses clarity

49
JPG Compression
50
use a JPG for

• Photos with a lot of colors and detail
• Images that are rich in color

51
.GIF Pros

• .GIFs are limited to 256 colors max
• They tend to be smaller in file size
• They dont have an compression artifacts

52
.GIF cons

• However the limited number of colors it creates a
  dithered effect (pixelated).
• It has moderate transparency support.
• Pixels can be transparent, or not -- no in
  between
• Creates rough edges in many transparent
  situations.

53
GIF Dithering
54
Use a .GIF for

• Images with a narrow range of colors
• Any photo where you wont notice the dithering
• Some situations where you need transparency

55
PNGs

• PNGs support 16.7 million colors
• Compress well with out artifacts
• Fully support of transparency (colors can be
  somewhat transparent)
• Internet Explorer 6 doesnt fully support PNGs

56
Use PNGs for

• Images with transparencies if users have IE7,
  firefox, or safari
• Any photo that looks compressed in JPG and
  dithered in a GIF

57
Example 1
58
Example 2
59
Example 3
60
Image Properties Panel
61
Editing Images in Dreamweaver

• If you want to do complex image editing, you
  probably wont use dreamweaver.
• Photoshop or Fireworks is better suited.
• Those programs are complicated enough where you
  can take a whole class on just those.
• Dreamweaver does have some basic image editing
  tools.

62
What can we do with dreamweaver tools?

• Optimize an image
• Crop
• Resize (shrink)
• Adjust the brightness / contrast
• Adjust the sharpness of the image

63
Editing Tools
64
Specific Tools
65
How do we edit images in dreamweaver?

• Any guess on the process of editing images in
  dreamweaver?

66
Familiar Process

• Select an image
• On the properties bar we have the editing tools
  below.

67
Editing Images

• Keep in mind that as you edit an image, it will
  save that image in its new state (resized,
  sharpened, brighter, etc)
• If you think you might want to undo it at some
  time you will want to back up the file.

68
Demos

• Demo of saving images

69
Demos

• Demo of editing images

70
Lab 4

• Add images to your site