Multimedia and the World Wide Web HCI 201
Multimedia and the World Wide Web HCI 201 Lecture Notes #8 A # HCI 201 Notes #8 A
What will we learn today? n n n n Review of what we have learned about CSS The <div> tag The <span> tag Formatting block-level element boxes Resizing the boxes Moving the boxes Image processing 101 HCI 201 Notes #8 A 2
Review of last week <style> body {color: green; background: white url(Draft. jpg) no-repeat fixed center} h 1, h 2, h 3 {font-family: Arial, Helvetica, sansserif} address {font-size: 0. 6 em; font-style: normal; textalign: center; text-transform: uppercase} ul {list-style: circle url(Apple. jpg) outside} ul b {color: rgb(128, 0, 0)} li. special {color: rgb(50%, 75%); fontweight: bold} blockquote {background-color: rgb(200, 200); color: maroon; font-style: italic} a {color: green} a: hover {color: red; text-transform: uppercase; font -weight: bold} </style> HCI 201 Notes #8 A 3
Review of last week n n n The style of CSS (Inline, embedded, or external? ) Inheritance and overriding Selectors and declarations (grouping selectors and contextual selectors? ) Style class (generic, regular, or pseudo class? ) Properties - URL property - Color property - Background property HCI 201 Notes #8 A - Font property - Text property - List property 4
The <div> tag Internet Explorer Netscape HCI 201 Notes #8 A 5
The <div> tag <div class=class_name>content</div> n <div> tag does not format content. n <div> tag creates a block-level element. n Used with class or id property, <div> tag assigns a name to the document content it contains. n class_name is the name of the style class assigned to the content. n You can substitute the id property for the class. HCI 201 Notes #8 A 6
The <div> tag In style: div. Slogan {font-weight: bold} In HTML: <div class=Slogan>Maxwell Scientific’s new slogan is: ”We teach science”. </div> What do you mean by “block-level element”? Maxwell Scientific’s new slogan is: <div class=Slogan>”We teach science”. </div> HCI 201 Notes #8 A 7
Block-level and inline elements n Block-level elements paragraphs, block quotes, headers, lists, etc. n Inline elements individual letters, words, phrases, etc. n How to assign styles to an inline element? the <span> tag HCI 201 Notes #8 A 8
The <span> tag <span class=class_name>content</span> n Browsers treat the <span> tag as a physical or content-based tag. n <span> tag creates an inline element. n Used with class or id property, <span> tag assigns a name to the inline element it contains. n class_name is the name of the style class assigned to the content. n You can substitute the id property for the class. HCI 201 Notes #8 A 9
The <span> tag In style: span {color: purple} span. bigger {font-size: larger} In HTML: <span class=“bigger”>Maxwell Scientific’s new slogan is: ”We teach science”. </span> Question: Will we break the line if we change the code to Maxwell Scientific’s new slogan is: <span class=“bigger”>”We teach science”. </span> HCI 201 Notes #8 A 10
The “boxes” n Control the page layout with CSS - CSS treats block-level elements as if they were enclosed in a - n box (remember the inside and outside property of list items? ). Manipulating the size and location of block-level element --- the “boxes”. Applying borders and background colors to the boxes. … HTML tags that are treated as lock-level elements - <h> tags: <h 1> ~ <h 6> <p> <blockquote> and <address> List tags: <ul>, <ol>, and <dl> <div>, <body>, <hr>, and <img> HCI 201 Notes #8 A 11
What’s in the box? Margin Border Padding Parent Element Content of the block-level element goes here … n n n Margin: The area between the box and its parent element. Border: The border around the box Padding: The space between the box border and the content. HCI 201 Notes #8 A 12
The boxes in our page HCI 201 Notes #8 A 13
Control the margins n margin-top: The space between the top of the box and the top margin. n margin-right: The space between the right side of the box and the right margin. n margin-bottom: The space between the bottom of the box and the bottom margin. n margin-left: The space between the left side of the box and the left margin. n Margin size: units of length (pt, em, etc. ) or a percentage of the width of the parent box. HCI 201 Notes #8 A 14
Control the margins li {margin-left: 3 em; margin-right: 3 em; margintop: 2 em; margin-bottom: 2 em} body {margin-left: 5%; margin-right: 5%; margin-top: 5%; margin-bottom: 5%} the width of the display window Question: The body margin sizes are 5% of ___________. p {margin: 1 pt, 2 pt, 3 pt, 4 pt} top=1 pt, right=2 pt, bottom=3 pt, left=4 pt. p {margin: 1 pt, 2 pt, 3 pt} top=1 pt, right=2 pt, bottom=3 pt, left=right=2 pt. p {margin: 1 pt, 2 pt} top=1 pt, right=2 pt, bottom=top=1 pt, left=right=2 pt. p {margin: 1 pt} top=right=bottom=left=1 pt. HCI 201 Notes #8 A 15
Set the padding size padding-top. n padding-right. n padding-bottom. n padding-left. n padding. (In the order of top, right, bottom, and left. ) n n padding size: units of length (pt, em, etc. ) or a percentage of the width of the block-level element itself. HCI 201 Notes #8 A 16
Formatting the border n Border properties border width color style top bordertop-width border-right -width borderbottom-width borderleft-width bordertop-color borderright-color borderbottom-color borderleft-color bordertop-style borderright-style borderbottom-style borderleft-style right bottom left HCI 201 Notes #8 A 17
Formatting the border n Width: expressed with units of length or keywords: thin, medium, thick. n n Color: expressed in color names or RGB triplets. Style: 9 styles: none, solid, dotted, dashed, double, outset, inset, groove, ridge. Chris wants us to create a container box for the science article: div. Article {padding: 1 em; border-style: solid; border-width: 2 px; background-color: rgb(252, 221, 163)} HCI 201 Notes #8 A 18
Resizing the boxes n width - In absolute or relative units of length, or as a percentage of the width of the parent element. - Width is seldom modified, except for text boxes and inline images. (The results for other elements can be unpredictable with different browsers. ) n height - In absolute or relative units of length, but NOT in percentages. - Length is seldom modified, except for inline images. - When the amount of required text exceeds the specified height, browsers might introduce scrollbar, ignore the style, or worse, truncate the extra text. HCI 201 Notes #8 A 19
Moving the boxes n With CSS, we can tell the browser to place the boxes in specific positions on the page. (We can also make the page look like this: ) HCI 201 Notes #8 A 20
Moving the boxes n float - With a specified width, float property can align the box to either “left” or “right”. - The browser moves the next element up and wrapped around the floating element. float: right width: 200 px HCI 201 Notes #8 A float: left width: 200 px 21
Moving the boxes n clear - Prevent the next element from wrapping around the floating box. - clear=none, left, right, both - The next element is placed at the first point where the left/right margin is clear. float: right width: 200 px HCI 201 Notes #8 A float: right width: 200 px hr {clear: right} 22
Moving the boxes Chris wants us to resize and float the article box: div. Article {padding: 1 em; border-style: solid; border-width: 2 px; background-color: rgb(252, 221, 163); float: right; width: 300 px} HCI 201 Notes #8 A 23
Image processing 101 n Select - Shape (rectangular, elliptical, polygonal, line) All, deselect, inverse Feather Stroke n Copy, Paste, and Layers n Transform n HCI 201 Notes #8 A 24
Assignment 5 n Download the Chem. htm and MWSLogo. gif into one folder. n Create a My. CSS. txt in the same folder, use it as an external style sheet file. n In the My. CSS. txt, change the styles for the following elements: n n n n Body: color, font-family Background: place an image in the middle of the display area, no repeat Choose different font size and colors for <p>, <h 1>, <h 3> Specify the font style, color, and background color for <blockquote> Change the default hyperlink appearance: link, active, visited, and hover. Choose a bulletin image for the unordered list. Create a box that contains the “Featured Chemistry Products” (title and list), specify the border color, border width, and background color. HCI 201 Notes #8 A 25
- Slides: 25