1 / 25

Multimedia and the World Wide Web

Multimedia and the World Wide Web. HCI 201 Lecture Notes #7B. What will we learn today?. Style properties Property values Font properties Text properties Color properties Background properties List properties Image processing 101. Property values.

daria
Download Presentation

Multimedia and the World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Multimedia and the World Wide Web HCI 201 Lecture Notes #7B

  2. What will we learn today? • Style properties • Property values • Font properties • Text properties • Color properties • Background properties • List properties • Image processing 101 2

  3. Property values Selector {attribute1: value1; attribute2: value2; . . . } • Keyword property text-decoration: underline line-through, small, bolder, etc. • Use keyword value to express action or dimension. • Keyword values are not case-sensitive. • Percentage property 120%, 85%, etc. • Percentage values describes a proportion relative to some other aspect of the content. • This value will not be dynamically re-rendered by the browser. 3

  4. Property values • URL property url(http://www.depaul.edu/pathname) • “URL” is required. No space between URL and (. • No double quotation marks “” needed for the URL value. • Color property green RGB(0,255,0) #00FF00 • Specify a color as a color name or a hexadecimal RGB triplet. • No space between RGB and (. • RGB(0,128,255)=RGB(0%,50%,100%) 4

  5. Property values • Length property [+/-]number/decimal2-letter-unit 5cm, 0.25mm, 400px, 10pt, -100em, +30ex, etc. • Specify the size of a property. • A leading + or – means the values is to be added or subtracted from the immediate (current) value of that property. • cm: centimeters, mm: millimeters, in: inches, . • pt: points (1/72 of an inch), pc: picas (12 points). • px: size of one pixel on the screen display. • em: the width of the letter M in the current font. • ex: the height of the letter x in the current font. * No space between the value and the unit. 5

  6. Property values • Length property – absolute unit vs. relative unit Absolute units: cm, mm, pt, px, pc. Relative units: em, ex. • Absolute units are easy to use, but no guarantee of consistent displays on different browsers. • Relative units are scalable: relative to the size of a specific character in the default font used by the browser. *1em equals exactly to the browser’s default font size for body text. M x 1 ex unit 1 em unit 6

  7. Font properties • font-familyh1 {font-family:Arial, Helvetica, Sans-serif} - Allows you to choose a font face for your web page. - Specific font: Arial, Times New Roman, Garamond, etc. (actually installed in a user’s computer) - CSS supports 5 generic font: serif, sans-serif, monospace, cursive, and fantasy. (generic description, each has a range of specific font types) - If the specific font type is not installed on the user’s machine, browser will look for a more generic one as a substitute. (Arialhelveticasans-serif, in the above example) 7

  8. Font properties • Generic font 8

  9. Font properties • font-sizeLength values: 12pt, +200px, 0.75in, etc. Percentage values: 150%, 75%, etc. (relative to the size of the parent element) Keyword values: xx-small, x-small, small, medium, large, x-large, xx-large. <font size=1,...,7> larger, smaller (one size larger/smaller than the size of the parent element) 9

  10. Font properties • font-stylenormal, italic, oblique. • font-weight- A value ranging from 100 (lightest) to 900 (heaviest), in intervals of 100. - A keyword (normal or bold) describing the absolute weight of the font, or a keyword (lighter or bolder) describing the weight of the font relative to the parent element. - Note that bold is a weight/thickness, while italic is a style. • font-variant(not supported by Netscape)normal, small-caps(incorrectly rendered by IE). 10

  11. Font properties • fontp {font-family: Times, Garamond, Serif; font-weight: bold; font-size: 12pt; line-height: 14pt} p {font: bold 12pt/14pt Times, Garamond, Serif} - To merge a collection of font property declarations. - Only the font-size and font-family are required. - You do not have to enter all the properties, but the ones you specify should follow the order (font-style, font-weight, font-variant, font-size/line-height, font-family). 11

  12. Text properties • Spacing propertiesp {letter-spacing: 5px} p {word-spacing: 2px} p {line-height: 2.0} “I ’ m s p a c e d o u t 5 p i x e l s b e t w e e n l e t t e r s”. Maxwell Science products Line height Font size Line height Font size 12

  13. Text properties • Alignment propertiestext-align:alignment alignmentcan be left, center, right, or justify. vertical-align:valignment valignmentcan be baseline, bottom, middle, sub, super, text-bottom, text-top, or top. • Specify text properties in FrontPage- Right click on the selected text under Normal view. - Popup menu: “Font…” “Character spacing” 13

  14. Text properties • text-indent:indentation indentationcan be either a length value (em, px, pt, cm, etc.) or a percentage of the with of the paragraph. A negative indentation is called hanging indent: extends only the first line by the specified value. • text-decoration:decoration decorationcan be blink, overline, underline, or none. • text-transform:transform transformcan be capitalize, lowercase, uppercase, or none. Be careful: font-variant:small-caps 14

  15. Color properties • color body {color: teal} h1 {color: blue; font-style: italic} color: gray color: #808080 color: RGB(128,128,128) color: RGB(50%,50%,50%) white=RGB(255, 255, 255) black=RGB(0, 0, 0) The higher RGB value, the brighter color we get. 15

  16. Background properties • background-color ReverseText {color:white; background-color:black} - Specify the background color for almost any element. 16

  17. Background properties • Background image background-image:url(ImageName) - Specify a background image for almost any element. ScribbleText {background-image:url(Image.gif)} 17

  18. Background properties • Background image background-repeat:repeat-value repeat-valuecan be repeat, repeat-x, repeat-y, or no-repeat. 18

  19. Background properties • Background image background-position:h-value v-value Offsets the starting position of the background image down and to the right of that default point by certain distance (length, percentage, keyword) h-valuespecifies the horizontal distance. Keyword you can use: left, center, right V-valuespecifies the vertical distance. Keyword you can use: top, center, bottom - You can only position the image within the display area of that element. - The starting point is relative to the upper-left corner of that display area. 19

  20. Background properties • Two tricks body {background-image: url(WatermarkLogo.gif); background-position: center center; background-repeat: no-repeat} We have one wartermark logo image in the center of the page. body {background-image: url(RightRibbon.gif); background-position: top right; background-repeat: repeat-y} We have a vertical ribbon on the right-hand side of the page. What is the benefit of implementing them this way? 20

  21. Background properties • backgroundbg {background-color: yellow; background-image: url(Image.gif); background-repeat: no-repeat; background-position: top, left} bg {background: yellow url(Image.gif) no-repeat top, left} - To merge a collection of background property declarations. - You do not have to enter all the properties, but the ones you specify should follow the order (color, image, repeat, attachment, position). 21

  22. List properties • list-style-type:type typespecifies the appearance of the list label. It can be disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, or upper-alpha. • list-style-image: url(ImageName) ImageNameis the URL or filename of the image you want to use for the list bullets. 22

  23. List properties • list-style-position: position positioncan be either inside or outside. List-style-position=outside (default) CSS treats each list as if it were surrounded by an invisible box. You can remember the values as the position of the list bullets (inside of the list/box, or outside the list/box). List-style-position=inside 23

  24. List properties • List-stylelist1 { list-style-type: circle; list-style-image: url(bullet.gif); list-style-position: outside} list1 {list-style: circle url(bullet.gif) outside} - To merge a collection of list-style property declarations. - If the browser does not support the image bullet, it will replace the image with an open circle. 24

  25. Image processing 101 • Resize • Adjust image size (Image > Image Size …) • Crop image (Select, then Image > Crop) • File size (Save as, then Quality) • Brighten image • Clone stamp • Smudge 25

More Related