Multimedia and the World Wide Web HCI 201 Lecture Notes #8A

Multimedia and the World Wide Web

HCI 201 Lecture Notes #8A

HCI 201 Notes #8A 2

What will we learn today?

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 #8A 3

Review of last week<style> body {color:green; background: white url(Draft.jpg)

no-repeat fixed center center} h1, h2, h3 {font-family: Arial, Helvetica, sans-

serif} address {font-size:0.6em; font-style:normal; text-

align:center; text-transform:uppercase} ul {list-style: circle url(Apple.jpg) outside} ul b {color: rgb(128, 0, 0)} li.special {color:rgb(50%,0%,75%); font-weight:bold} blockquote {background-color:rgb(200,200,200);

color: maroon; font-style: italic} a {color:green} a:hover {color:red; text-transform: uppercase; font-

weight:bold}</style>

HCI 201 Notes #8A 4

Review of last week

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 - Font property

- Color property - Text property

- Background property - List property

HCI 201 Notes #8A 5

The <div> tag

Internet Explorer

Netscape

HCI 201 Notes #8A 6

The <div> tag

<div class=class_name>content</div> <div> tag does not format content. <div> tag creates a block-level element. Used with class or id property, <div> tag assigns

a name to the document content it contains. class_name is the name of the style class assigned

to the content. You can substitute the id property for the class.

HCI 201 Notes #8A 7

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 #8A 8

Block-level and inline elements

Block-level elementsparagraphs, block quotes, headers, lists, etc.

Inline elementsindividual letters, words, phrases, etc.

How to assign styles to an inline element?the <span> tag

HCI 201 Notes #8A 9

The <span> tag

<span class=class_name>content</span> Browsers treat the <span> tag as a physical or content-

based tag. <span> tag creates an inline element. Used with class or id property, <span> tag assigns a

name to the inline element it contains. class_name is the name of the style class assigned to the

content. You can substitute the id property for the class.

HCI 201 Notes #8A 10

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>


The “boxes”

Control the page layout with CSS- CSS treats block-level elements as if they were enclosed in a

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: <h1> ~ <h6>- <p>- <blockquote> and <address>- List tags: <ul>, <ol>, and <dl>- <div>, <body>, <hr>, and <img>


What’s in the box?

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.

Parent Element

Content of the block-level element goes here …

Margin Border Padding


The boxes in our page


Control the margins

margin-top: The space between the top of the box and the top margin.

margin-right: The space between the right side of the box and the right margin.

margin-bottom: The space between the bottom of the box and the bottom margin.

margin-left: The space between the left side of the box and the left margin.

Margin size: units of length (pt, em, etc.) or a percentage of the width of the parent box.


Control the margins

li {margin-left:3em; margin-right:3em; margin-top:2em; margin-bottom:2em}

body {margin-left:5%; margin-right:5%; margin-top:5%; margin-bottom:5%}

Question: The body margin sizes are 5% of _____________________.

p {margin:1pt,2pt,3pt,4pt} top=1pt, right=2pt, bottom=3pt, left=4pt.

p {margin:1pt,2pt,3pt} top=1pt, right=2pt, bottom=3pt, left=right=2pt.

p {margin:1pt,2pt} top=1pt, right=2pt, bottom=top=1pt, left=right=2pt.

p {margin:1pt} top=right=bottom=left=1pt.

the width of the display window


Set the padding size

padding-top. padding-right. padding-bottom. padding-left. padding. (In the order of top, right, bottom, and left.)

padding size: units of length (pt, em, etc.) or a percentage of the width of the block-level element itself.


Formatting the border

Border properties

border width color style

top border-

top-width

border-

top-color

border-

top-styleright border-

right-widthborder-

right-color

border-

right-stylebottom border-

bottom-widthborder-

bottom-color

border-

bottom-styleleft border-

left-width

border-

left-color

border-

left-style


Formatting the border

Width: expressed with units of length or keywords: thin, medium, thick.

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:1em; border-style:solid; border-width:2px; background-color: rgb(252,221,163)}


Resizing the boxes

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.)

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.


Moving the boxes

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:)


Moving the boxes

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: rightwidth: 200px

float: leftwidth: 200px


Moving the boxes

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.



hr {clear: right}


Moving the boxes

Chris wants us to resize and float the article box:div.Article {padding:1em; border-style:solid; border-width:2px; background-color: rgb(252,221,163); float: right; width:300px}


Image processing 101

Select- Shape (rectangular, elliptical, polygonal, line)- All, deselect, inverse- Feather

Stroke Copy, Paste, and Layers Transform


Assignment 5 Download the Chem.htm and MWSLogo.gif into one folder. Create a MyCSS.txt in the same folder, use it as an external style

sheet file. In the MyCSS.txt, change the styles for the following elements:

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>, <h1>, <h3> 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.

Documents

Multimedia and the World Wide Web HCI 201 Lecture Notes #8A