Presentation is loading. Please wait.

Presentation is loading. Please wait.

LIS650 lecture 3 Thomas Krichel 2003-11-22. today fear not: the worst is over! how to give style sheet data style locator information Nielsen on style.

Similar presentations

Presentation on theme: "LIS650 lecture 3 Thomas Krichel 2003-11-22. today fear not: the worst is over! how to give style sheet data style locator information Nielsen on style."— Presentation transcript:

1 LIS650 lecture 3 Thomas Krichel 2003-11-22

2 today fear not: the worst is over! how to give style sheet data style locator information Nielsen on style sheets and contents design style properties (first part).

3 Style sheets Style sheets are the officially sanctioned way to add style to your document We will cover Cascading Style Sheets CSS version 2. This is the default style sheet language. You could also use another one.

4 setting the style sheet language You can set the default style sheet through http, example for setting the style sheet explicitly to CSS: This tells the server that it should send the http header "Content-Style-Type" with the value 'text/css'. Since CSS is the default, you dont need to do that if you choose CSS

5 Rules to find the style sheet language If any tag specify the "Content-Style- Type", the last one determines the default style sheet language. Otherwise, if any HTTP headers specify the "Content-Style-Type", the last one in the character stream determines the default style sheet language. Otherwise, the style sheet language is 'text/css'

6 Why are they cascading You can have many style sheets in different places. Each style sheet is read in sequence. You can follow this up quite easily. A style sheets is written as a set of rules. Each style sheet rule is read in sequence. If a rule recently read is in contradiction with an earlier rule, it overrides the earlier rule.

7 inline style You can add a style attribute to any tag that admits the core attributes as in where style is a style specification. Example: I am so blue Such a declaration only takes effect for the tag concerned. I do not recommend this.

8 Document level style You can add a style tag as part of the header takes the core attributes. It takes a "type" attribute, "text/css" is the default It takes the "media" attribute for the intended media, with values –screen (default) – ttv –projection – handheld –print – braille –embossed– aural –all

9 linking to an external style sheet This is the best way! Use the same style sheet file for all the pages in your site, by adding to every pages something like <link rel="stylesheet" type="text/css" href="URI"> where URI is a URI where the style sheet is to be downloaded from. On wotan, this can just be the file name. The tag must appear in the, it can not appear in the, sorry!

10 In our situation… <link rel="stylesheet" type="text/css" href="main.css"> Then create a file main.css with a simple test rule such as: h1 {color: blue} main.css is just an example filename, any file name will do. Upload and try it out!

11 advice for cheaters Within a style sheet, for example the contents of a tag, you can import another file using the @import command @import url(; or @import ""; these two ways appear to be equivalent

12 media dependent styles Remember the media CSS knows about ? Using @import, you can import different types for different media @import "URI" medialist where medialist is a list of one or more media, separated by comma Example @import challenged.css" braille, handheld

13 What is a style sheet about It is about two or three things –Where to find what to style? –How style it? Which property to set? Which value to give to the property? In the second part I will use the following syntax –Write property names as {property-name: } –Write property values as value

14 basic style syntax selector {property1: value1; property2: value2 … } selector is a selector (see following slides) property is the name of a property value is the value of a property note colon and semicolon use! all names and values are case-insensitive Examples –h1 { color: grey; text-align: center} –h2,h3 {color: blue}

15 comments in the style sheet You can add comments is the style sheet by enclosing the comment between /* and */. This comment syntax comes from the C programming language. This technique is especially useful if you want to remove code from your style sheet temporarily.

16 basic selector the basic selector is a comma-separated list of elementary selectors. Often, the elementary selectors are HTML tags, e.g. h1, h2 {text-align: center} will center all and tag contents but the selectors can be more precise

17 class selectors This is the standard way to style up a class.class { property1: value1, property2: value2 …} will give all the properties and values to any tag in the class class. Recall HTML, when you have set the you can apply the class will apply all the attributes of the class class to the tag tag. Note that you can place any tag into several classes, use blanks to separate the class names

18 fun with selectors * selects any tag. E selects any tag called E E F selects any F tag that is in the contents of an E tag, as a child, grand-child etc E > F selects any F tag that is a child of an E tag. This is more restrictive. E:first-child selects E when E is the first child of its enclosing tag E:link selects an E tag if it is in the contents of an tag

19 more selectors E:visited select tag E if E if it is in the contents of a link and the link has been visited. E:active, E:hover, E:focus selects tag E during certain user actions with the mouse. E:lang(c) selects tag E if it is in the human language c E + F selects any F tag immediately preceded by an E tag start.

20 more selectors E[a] selects any E tag with an attribute "a", whatever the value E[a="v"] select any E tag whose "a" attribute value is exactly equal to "v". E[a~="v"] selects any tag E whose "a" attribute value is a list of space-separated values, one of which is exactly equal to "v". Useful for classes, because you can put a tag into several classes, separated by blanks…

21 more selectors E[lang|="en"] selects any E tag whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". E.m convenient shorthand for E[class~="m"] E#myid convenient shorthand for E[id="myid"] E:first-letter selects the first letter in the content of tag E E:first-word selects the first word in the contents of tag E

22 :before and :after :before or :after can be used to add contents before or after a tag. We will deal with this next week, but mention it here for completeness.

23 examples H1, H2, H3 { font-family: sans-serif } H1 { color: red } EM { color: red } H1 EM { color: blue } DIV * P DIV P *[href] BODY > P { line-height: 1.3 } DIV OL>LI P

24 more example H1 + P {text-indent: 0} H1 + H2 {margin-top: -5mm} H1.opener + H2 {margin-top: -5mm} H1[title] {color: blue} SPAN[class=example] {color: blue } SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue} A[rel~="copyright"] {color: red} A[href=""] {background-color: grey} *[LANG=fr] {display: none}

25 more examples *[LANG|="en"] {color : red }.dialog.romeo {voice-family: "Lawrence Olivier", charles, male} A:link {color: red} /* unvisited links */ A:visited {color: blue} /* visited links */ A:hover {color: yellow} /* user hovers */ A:active {color: lime} /* active links */ A.external:visited {color: blue}

26 more examples HTML:lang(fr) { quotes: '« ' ' »' } HTML:lang(de) { quotes: '' '} *:lang(fr) > Q { quotes: '« ' ' »' } *:lang(de) > Q { quotes: '' '} (quotation style depending on the surrounding language, not the language of the quote!)

27 more examples A[rel~="copyright"] A[href=""] DIV > P:first-child A:focus:hover P > * > A div[class~="ny"][id="albany"]

28 Example: drop caps with uppercase CSS P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font- weight: bold; float: left } SPAN { text-transform: uppercase } HTML The first few words of an article in The Economist.

29 Nielsen on style sheets "one of the greatest hopes for recapturing the Web's ideal of separation of presentation and contents". Use a single style sheet for your site. Always use external style sheets. –organizational benefits maximized –faster loading create a manual for the style of the organization if you must allow for local styles, have these embedded in the HTML code. Make sure your site still looks reasonable in your browser when you turn CSS off and reload the page

30 Don't go crazy with CSS More than two font families (plus perhaps one for computer code) and your page starts looking like a ransom note. Gimmicky looking sites will hurt the credibility of you site. No absolute sizes If you have multiple style sheets, use the same HTML class tags in both.

31 Nielsen on Frames He writes: "Frames: Just Say No" He then has a few pages where he thinks about why in exceptional circumstances frames may be ok. We have not discussed frame in this course at all and just mention them here.

32 Nielsen on printing Many people prefer to read documents in print. For a long, important destination page, provide a print version. Have the header say accommodate us-letter and a4 formats –sheet as high as us-letter –sheet as wide as a4 This ends the Nielsen chapter on page design

33 Content design: writing write 50% of the words you would write in normal print, because research shows that reading on screen is 25% slower than print reading. write of scannability by using –short paragraphs –subheadings –bulleted lists Use hypertext to keep page size down. (hire a copy editor)

34 more on scannability structure pages with 2 or 3 levels of headings you may want to highlight keywords in some way, but not in any way that they could be confused with hyperlinks. Put the keywords in a … use meaningful, rather than cute headings. use one idea per paragraph almost no humor no metaphors no puns

35 page chunking Just simply splitting a long article by into different parts for linear reading is not good. Devise a strategy of front pages with the important information and back pages linked from the front pages with the detail. Base the distinction of important and not important stuff on audience analysis.

36 users rarely scroll early studies showed 10% of users would scroll. on navigational pages, users will tend to click something they see in the top portion. scrolling navigational pages are bad because users can not see all the options at the same time. the length of "destination" pages for users interested in details is less of a problem.

37 page needs to be cleverly chosen to summarize the page in a contents of a web search engine, esp. between 40 to 60 chars long different pages in a site should each have their own title. No –welcome –"a" "the" etc..

38 headline design Explain clearly what the page is about Use plain language Skip leading articles ("A", "the"..) in email subjects and page titles Make the first word the most important one Do not start all pages with the same word.

39 legibility Use high color contrast. Use plain or very subtle background images. Make the text stand still –no zooming –no blinking –no moving Left-align almost always No all uppercase, it reads 10% slower.

40 rules for online documentation (if you must have some) It is essential to make it searchable Have an abundance of examples Instructions should be task-oriented Nevertheless, you may have to provide a conceptual introduction to the system Hyperlink to a glossary

41 multimedia Since such files are long, they should have an indication of their size Write a summary of what happens in the multimedia document For a video, provide a couple of still images. This will give people –quick visual scan of the contents of the image –an impression of the quality of the image and

42 pictures Have a picture on a bio page No gratuitous images More pictures on background pages, that are reached by users with in-depth interest. Never have a picture look like an advertising banner. Maybe not have as many pictures of yourself on your site as Jakob Nielsen has.

43 animation Animal instinct draws human attention to moving things A spinning logo is a killer for reading, if you have it, have it spin only a few times No scrolling marquees, no moving text

44 animation may be good for Showing continuity in transition Indication dimensionality in transaction Illustrating change over time Multiplexing the display Enriching graphical representation Visualizing three dimensional structures Attracting attention but we will not discuss this as it is out of scope for the course

45 streaming video limited by available bandwidth could be used for –promoting television shows, films etc –give user impression of a speaker's personality (if any) –demonstrate things that move good for demo of physical products less good for demos of software watch out for narration quality

46 Downloadable video probably better than streaming breaks the interactive mode of use on the web should be limited in length, say < 1 minute big topics should be broken down on a web page into smaller ones, each having its own video.

47 audio probably a better way to convey a speaker's personality can teach the pronunciation of words can enhance the user experience, a classic study had users claiming that the graphics were better on a video game that had better sound but the same graphics than another.

48 3D graphics has a range of problems –man is not made for 3D watching –screen is not made for rendering 3D –interaction tools such as mouse have not been made for 3D –poor screen resolution –requires plug-ins therefore it should not be used unless absolutely necessary.

49 important properties We will now look at the properties as defined by CSS. These are the things that you can set using CSS. We group properties into six groups –fonts –colors, and background –text –boxes and layout(next class) –lists(next class) –tag classification(next class)

50 font properties I {font-family:} accepts a comma-separated list of font names there are five generic names, one should be quoted last as a fall-back –serif– sans-serif– cursive –fantasy– monospace example *:lang(ja-jp) {font-family: "Heisei Mincho W9", serif}

51 font propertiesII {font-size: } accepts sizes as npt, n%, +npt, where n is a number, or some sizes like –xx-small– x-small– small– medium –large– x-large – xx-large – larger – smaller incremental font sizes may not be handled properly by the browser. {font-style: } can be either italic, oblique or normal

52 font properties III {font-variant: } can be either normal or small caps {font-weight: } can be –a number between 100 for the thinnest and 900 for the boldest. 400 is the normal. –normal – bold – bolder – lighter {font-stretch: } can be any of –ultra-condensed – extra-condensed – condensed –semi-condensed – normal – semi-expanded –expanded – extra-expanded – ultra-expanded

53 other font properties There is a whole bunch of other properties –{unicode-range: }– {stemv: } – {stroke: } – {units-per-em: }– {stemh: } – {bbox: } –{definitions-src:} – {ascent: } – {dscent: } – {baseline: }– {widths: } – {mathline: } –{centerline: }– {topine: } – {panose1: } There also is a {font: } property that allows you to put several of the previous properties together. But all that is not worth learning. Keep fonts simple.

54 colors they follow the RGB color model. expressed as three hex numbers 00 to FF. The following standard color names are defined –Black = #000000Green = #008000 –Silver = #C0C0C0 Lime = #00FF00 –Gray = #808080 Olive = #808000 –White = #FFFFFF Yellow = #FFFF00 –Maroon = #800000 Navy = #000080 –Red= #FF0000Blue = #0000FF –Purple= #800080Teal = #008080 –Fuchsia= #FF00FF Aqua = #00FFFF other names may be supported by browsers.

55 color & background properties {color: } sets the foreground color of a tag. {background-color: } gives the color of the background {background-image: url(URL) } places a picture found at a URL URL. {background-repeat: } can take the value repeat (default), repeat-x, repeat-y, and no-repeat. {background-attachment: } can take the value of fixed or scroll (default) to say if the image scrolls with the viewport (obscure)

56 {Background-position: } property places the background image can take values –'0% 0%' to '100% 100%' –'length length' to put length of offset from top left –mixing both is allowed –top, center,bottom and left, right, center can be used too

57 text properties I {letter-spacing: } set the spacing between letters, takes a length value or the word 'normal' {word-spacing: } same as for letter-spacing {line-height: } sets the distance between several lines of a tag's contents, –in pt or pixel numbers –% age (referring to a percentage of current font size) – with a number (referring to a multiplicity of the size of the text) – 'normal'

58 text properties II {text-align: } can take the values left right center and justify. {text-decoration: } can take the values underline, overline, line-through and blink. {text-indent: }, {margin-left: } take length units but are best expressed in the relative "em" unit. {text-shadow: color horizontal-offset vertical- offset blur-radius }. Example span.glow { background: white; color: white; text- shadow: black 0px 0px 5px; }

59 text properties III {float: } can be set to left, right and none. {width: } and {height: } can also be set. {vertical-align: } can take the values baseline, middle, sub, super, text-top, text-bottom, top, bottom, as well as percentages. {text-transform: } can take the value uppercase, lowercase, capitalize and none.

60 Thank you for your attention!

Download ppt "LIS650 lecture 3 Thomas Krichel 2003-11-22. today fear not: the worst is over! how to give style sheet data style locator information Nielsen on style."

Similar presentations

Ads by Google