Presentation is loading. Please wait.

Presentation is loading. Please wait.

Lecture 5 Use Cases and Style Sheets Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.

Similar presentations


Presentation on theme: "Lecture 5 Use Cases and Style Sheets Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU."— Presentation transcript:

1 Lecture 5 Use Cases and Style Sheets Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU

2 Understanding Requirements Factors on challenged software projects Reference: Chapter 5, 6 of Applying UML and Patterns – by Craig Larman

3 Use Cases

4 Use-Case Model Writing use cases – stories of using a system – is an excellent technique to understand and describe requirements. A brief format of use case

5 Casual Format of Use Case

6 Fully Dressed Example: Process Sale

7

8

9

10

11

12

13 13 Style Sheets  It is possible to give a uniform look and feel to a web site that can easily be customized.  HTML permits the mixing of document structure and formatting (style).  Each element on a page has a style defined for it.  The style is defined by a set of attribute : value pairs.  Style attributes can control: Typeface and font properties Typeface and font properties Background properties Background properties Box-related properties Box-related properties List properties List properties

14 14 Style Sheet Advantages  greater control over typography and page layout: – specifying font families, styles, and sizes – margins, indentation, box layout – absolute and relative positioning. – no need to use the tag every time the font needs to be specified -- can be done once in the style sheet. – is not part of the XHTML specification

15 15 Ways to define styles Default style: provides values for all element properties, unless you change it. (Note: user can customize browser to change defaults!) Default style: provides values for all element properties, unless you change it. (Note: user can customize browser to change defaults!) Inline style: style is defined as an attribute of the element in- place. Inline style: style is defined as an attribute of the element in- place. – D efined within a tag such as using the style attribute Embedded style sheet: styles defined in the head portion of web page. Use this if you don’t have very many web pages, or for styles that are useful only for the given page. Embedded style sheet: styles defined in the head portion of web page. Use this if you don’t have very many web pages, or for styles that are useful only for the given page. – Defined in head of document using tag External style sheet: styles defined in a separate file. Use this to centralize style definitions and provide uniformity across all pages of a web site. External style sheet: styles defined in a separate file. Use this to centralize style definitions and provide uniformity across all pages of a web site. – C onnected to an HTML document using the tag or the import directive

16 16 Inline style syntax  Defined for individual elements, at the point of use (in the HTML).  Useful for “one-off” styles that are not likely to be used elsewhere. Syntax Syntax style="property: value;...property: value;“ style="property: value;...property: value;“ Examples: Examples: –... –... Disadvantages: Disadvantages: – doesn't separate document structure from formatting so use sparingly, if at all

17 17 Embedded Style Sheet Page with embedded style Page with embedded style selector { attribute : value ; selector { attribute : value ; attribute : value... } attribute : value... } selector { attribute : value ; selector { attribute : value ; attribute : value... } attribute : value... } Style definitions go into a element in document head. Style definitions go into a element in document head. Selector determines what elements the style rule applies to. Selector determines what elements the style rule applies to. Style definitions separated by ; are enclosed in { } Style definitions separated by ; are enclosed in { } The type attribute can only be "text/css". (It is leaving room for future alternative style languages.) The type attribute can only be "text/css". (It is leaving room for future alternative style languages.) Note: CSS is not HTML! Note: CSS is not HTML! Several tags can appear in the document head

18 18 Types of selectors  Modify style of an existing HTML element (tag) – Example: – h1 {font-family: sans-serif}  Here h1 is the selector so all element text will appear in a sans-serif style font. – Example – This is a heading – This is a heading

19 19 Types of selectors Style Classes  These allow you to control which elements of a given type should use a style rule.  This method has two parts: – In the style sheet, the selector defines the class name, which is preceded by a period. – In the HTML, the tag includes the class attribute and specifies the value of the class name Example: Define the nodec class for anchor tags: Define the nodec class for anchor tags: a.nodec { text-decoration : none } a.nodec { text-decoration : none } This suppresses the usual underlining. Use it in HTML like so: This suppresses the usual underlining. Use it in HTML like so: Link text Link text

20 20 Types of selectors  a class associated with an existing HTML element (tag) – Example: – p.indent {margin-left: 5em}  Now we can have normal paragraphs and paragraphs that are indented – Example: – This is an indented paragraph – This is an indented paragraph

21 21 Types of selectors  a class not associated with an existing HTML element (tag): can be used in any tag – Example: –.indent {margin-left: 2em}  Now we can use this class with any block-level HTML element – Example: – This is an indented heading – This is an indented heading

22 22 Types of selectors  A contextual selector applies to elements only if they are inside other elements. – Example: – p em {color: #FF0000}  Now em tags will display their text in red only if the em tag is inside a paragraph tag – Example: – text emphasis – text emphasis

23 23 Embedded style example h1 { font-family: Century Gothic; font-size: xx-large;} h2 { font-family: Century Gothic; font-size: x-large;} h3 { font-family: Century Gothic; font-size: large;} p.warning {color: #FF0000} p.warning code {color: #000000} style class contextual style class

24 24 Embedded style example h1,h2,h3 { font-family: Century Gothic; h1,h2,h3 { font-family: Century Gothic; h1 { font-size: xx-large; } h1 { font-size: xx-large; } h2 { font-size: x-large; } h2 { font-size: x-large; } h3 { font-size: large; } h3 { font-size: large; } same as previous example using grouping to factor out common properties

25 25 Embedded style example.box {border: 1pt; border-color: red;.box {border: 1pt; border-color: red; border-style: solid; width: 0%; border-style: solid; width: 0%; margin: 1em; padding: 0.5em} margin: 1em; padding: 0.5em} a box style class that can be used inside any element use it like this

26 26 Example Example page with embedded style body { font-family : arial narrow; color : blue; background-color : yellow } h1 { font-style : italic } p { font-size : 14pt } ol { font-size : 12pt; color : red; font-family : arial }... Here the selectors are simply tag names. The style rules will apply to elements defined by those tags.

27 27 External Style Sheets  A style sheet can be placed in a separate file (usually named with suffix.css ) and referenced by HTML files that need it.  Useful for centralizing control of style and ensuring uniform appearance across many pages of a web site.  The contents of the file are what would go between... of an embedded style sheet. Note: this file is not HTML!  The file is referenced using a tag in the HTML document's head portion.

28 28 External style sheet syntax selector{ property1: value1; property1: value1; property2: value2; property2: value2; propertyN: valueN; propertyN: valueN;} /*.. */ style comments can be included an external style sheet is a sequence of these rules External style sheets don't use the style tag

29 29 Example of style sheet /* This style sheet defines an “prgFormat" class for paragraphs that is much like block quote. */ p.prgFormat{ font-style : italic; margin-right : 2em; margin-left : 2em; } Here is what an external style sheet (named style.css ) could contain: Note that there is no HTML in this file! This example also illustrates a CSS comment between /* and */. Such comments can be placed in external or embedded style sheets.

30 30 Example of using style sheet  The tag is used in the document head to associate an external style sheet with the document.  The rel attribute specifies the relationship of the referenced file to this page.  The type attribute must be "text/css".  The href attribute is a URL pointing to the external style sheet. Style Example... affected text...

31 31 timetable.css td { text-align: left; vertical-align: top; font-family: Tahoma; font-size:11px; color: #E5E5E5; } a { text-decoration: underline; color: #9D5FBB; } A:Hover { color : #DBACF2; text-decoration : underline; } H3 { color: #7F409E; font-weight: bold; font-size : 20px; font-family: Tahoma; }

32 32 Inheritance  A descendant is an element that is enclosed (nested) in another, its ancestor.  If it is an immediate descendant, it is a child of the enclosing element, its parent.  Elements having the same parent are siblings.  All descendants of an element inherit its style properties, unless these are overridden by their own style rules.  If two styles could apply to the same element, the one defined by the more specific rule will be used. For instance, an explicit rule is always more specific than an inherited rule.

33 33 Compound Selectors Selectors can be defined so that a style rule applies to an element only when it is a descendant of a certain other type of element. Selectors can be defined so that a style rule applies to an element only when it is a descendant of a certain other type of element. Examples: Examples: ul ul { list-style-type : square } ul ul { list-style-type : square } This specifies that an unordered list inside another unordered list will be bulleted by squares. h1 em em { color : red } h1 em em { color : red } This specifies that emphasized text inside emphasized text in an header will appear in red.

34 34 Compound selectors are more specific than simple selectors. For instance, if a style sheet defines both p { color : red } div p { color : blue } then for a tag that is inside a element, the second rule would apply. Compound Selectors

35 35 The and Tags  These tags are provided to allow arbitrary chunks of HTML to be treated as elements. This is usually done in order to apply style attributes to them, as in the preceding example.  A... element defines an “inline” structure, i.e. it simply defines a stretch of text. Thus it can be used within a paragraph or table element without affecting the flow of the text.  A... element defines a “block” structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.

36 36 Span and Div example Style classes can also be “generic,” i.e. not tied to a specific element type. Style classes can also be “generic,” i.e. not tied to a specific element type. Example: Example: Define the zowie class:.zowie { text-decoration : blink }.zowie { text-decoration : blink } Use it on an emphasized element:

Important! Important! /*Use it with no other style attributes:*/ Buy Now! Buy Now!

37 37 Pseudo-classes  These are like style classes, but an element acquires a pseudo-class by user action or by a relationship other than descendancy.  In the style sheet, a pseudo-class name is preceded by a colon.  In the HTML, the pseudo-class name is NOT used with the affected tag, because it is implied.

38 38 Pseudo-classes Link-related pseudo-classes Link-related pseudo-classes a:link { color : red } a:link { color : red } Applies when the link has not yet been visited. a:visited { color : green } a:visited { color : green } Applies when the link has been visited. a:hover { color: yellow } a:hover { color: yellow } Applies when the mouse is over the link.

39 39 Cascading Rule  If two equally specific rules can apply to the same element, the one that comes last in the style sheet is used.  Thus, in the example below, a:hover must follow a:link and a:visited in order to have effect, since a link can be both visited (or not) and hovering.  The order of the first two doesn’t matter since they are mutually exclusive. a:link { color : red } a:visited { color : green } a:hover { color : yellow }

40 40 Pseudo-elements  :first-line is a pseudo-element that consists of the first line of text in a block-level element.  :first-letter is a pseudo-element that consists of the first letter of the text in an element.  Closely related to pseudo-classes, in that they are defined by relationships, not by explicit declarations.  A pseudo-element refers to a virtual element that is part of an actual element, rather than a special case of a whole element.

41 41 Pseudo-elements p { text-indent: 1em } p.initial { text-indent: 0 } p.initial:first-line { text-transform: uppercase } p.initial:first-letter { font-size: 24pt } This indents all normal paragraphs. A paragraph that is declared with class="initial" is not indented, and its first line appears in all capital letters, with an extra-large first letter.

42


Download ppt "Lecture 5 Use Cases and Style Sheets Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU."

Similar presentations


Ads by Google