Transcript style sheet

CSS and Multimedia
Components
INSY211
Feng Liu Ph.D.
Outline

Cascading Style sheet



Layer


Inline style / Internal style / external style sheet
Use scheme is a fast way for the quick result
Position blocks
 Z-index: the order of showing layer in Z direction.
 <div> </div>
Multimedia Components


3D/2D interactive media components
Embed Video
Cascading Style sheet

A style sheet is a set of instructions that tells a
browser how to present HTML elements.


such as what font to use, what size the paragraph text
should be, what color the header text should be, whether
or not there should be a background color applied to
specific elements, and so on.
The three different kinds of style sheet are applied to a
Web page in cascading order.
 The external linked style sheet is applied first.
 The internal embedded style sheet is applied next, taking
precedence over the linked style sheet.
 The inline style is applied last and takes precedence over
the embedded and linked style sheets.
Cascading Style sheet




Syntax:
selector {property: value; }
External CSS:
<link rel="stylesheet"
type="text/css" href="styles.css">
Internal CSS
<style>
<!-- h1 {color: red;} -->
</style>
Inline CSS : <h2 style="color: red;">
CSS syntax

selector {property: value}



body {color: black}
p { text-align: center; color: black; fontfamily: arial }
p.margin {margin: 20% 20% 20% 20% }
External style sheet

In html file head:



<link rel=“stylesheet” type=“text/css”
href=“main.css” />
Simply use notepad create a css save type
as *.*, enter the “.css” in.
Advantage: when you change one rule, all
pages changed automatically
Internal style sheet

In the head (doesn't matter put where)
<style type = “text/css”>
<!- Img { color: red;…;}
-->
</style>

Inline style:


<img src = “….jpg” style = “color: red; border: solid;” />
Whenever multiple style rule apply to one object, the latest
one works
Fonts

Font-family








Put multiple choices:
P {font-family: “verdana”, “helvetica”, sans-serif}
First choice, second choice, and generic fonts
Font-weight: normal; bold;
Font-style: italic; oblique; normal;
Font-size: 14px;20px;1em;1.5em;75%;
Line-height:120%; 1.5 (means 1.5*font-size)
All-in-one: p {font: normal 12px/120% “verdana”,
“helvetica”, sans-serif}
Colors




Color: #ff00cc
Color:rgb(100%,0%30%)
Background: #9fc
Background: url(image.jpg) repeat/repeatx/repeat-y/no-repeat; fixed
Layout with styles


Purpose of using CSS is separate styling
rules from content of the pages. To give
more flexibility to work well in different
browsers, platforms, medias and prints.
More specifically, it is the structure need to
be styled.
Layers: division

Divide content to logic sections using: <div>

<div class = “nevigation”>
<a href = “home.html”>home</a>
<a href = “content.html”>content</a>
<a href = “contactus.html”>contact us</a>
<div class = “dg”>

<div class = “main”>
The Box Model: Layer
This is a demo

Position boxes:




Static: keep default flow
Specify a coordinates: absolute/relative position/ or
browser fix
Special order by Z-index;
Once we know where is should be position, we can
control its padding, border, margin, size, alignment,
color…etc.
Position absolute/fixed
elements








#bg {position: absolute; top:250px;left:2%;}
#content {position: absolute; top:0px;left:30%;}
#navigation {position: absolute; top:10px;left:2%;}
#navigation a {display:block}
#bg {position: fixed; top:250px;left:2%;}
#content {position: absolute; top:0px;left:30%;}
#navigation {position: fixed; top:10px;left:2%;}
#navigation a {display:block}
Position: top, right, bottom, and left
Position offset elements





#bg {position: absolute; top:250px;left:2%;}
#content {position: absolute; top:0px;left:30%;}
#navigation {position: absolute; top:10px;left:2%;}
#navigation a {display:block}
h2,h3{position: relative; left: -25px}
Position in 3D by using index
and floating elements

Z-index:




Floating object:



#bg {position: absolute; top:250px;left:2%; z-index:1}
#content {position: absolute; top:0px;left:30%; z-index:2}
#navigation {position: absolute; top:10px;left:2%; z-index:3}
#calendar {…. float:right;}
Remove object right to the elements: {clear:right}
Vertical Alignments:

{vertical-align: baseline;middle ;sub;super;
top; texttop;bottom; textbottom}
… Coming next
Multimedia components …
Multimedia components


Basic multimedia types and available file formats
Enhance web by adding animation, sounds,
video…



Advantages and disadvantages of using multimedia
Technology considerations when using
multimedia
Examples of how to embed media component into
your webpage
Multimedia

The term multimedia refers to a combination
of two or more media





Audio
Video
Animation
3D VR/AR
Other media:
Human sensors





Sight
Sound
Touch
Smell
Feel
 eyes
 ears
 finger
 nose
 Heart
 monitor , HMD …
 Sound card, Speaker
 Haptic device, Joystick
 smoke simulation ??
 ??? …  Bio-Electric
Audio




Can enhance a Web page with speech,
music, or other sounds
Helpful to those with vision limitations
Non-streaming: entire file downloaded and
stored on disk before playback can begin
Streaming: data is buffered; playback begins
as soon as there is enough to play without
too many pauses for buffering to catch up
Tips for using audio

Be sure that any dialog in audio is also
available as text





Some people prefer text
Needed by the deaf  accessibility
keep volume low initially
keep it brief
Give users the control
Audio formats for Web
Extension
Format Name
Originator
Streaming?
Additional
software?
.wav
Waveform
Microsoft
No
No
.au
Sun Audio
Sun Microsystems
No
No
.aiff
Audio
Interchange
Apple
No
No
.mid
Musical
Instrument
Digital
Interface
International MIDI
Association
No
No
.mp3
MPEG Audio
(Layer 3)
Fraunhofer IIS-A and
the ISO
Yes
No
.ra
Real Audio
Real Networks
Yes
Yes. Available:
www.real.co
m
Video

A powerful medium, conveying:




Disadvantage:


Motion
Changing facial expressions
Associated audio
Very slow for users with dialup connections
Best for users with broadband connections


Which is approaching half of U.S. households that have
Internet connection
Includes most company intranets
Tips for recording video

Use a tripod



Use a neutral background


You get a much better image
The reduction of motion improves compression
Better visually, and also improves compression
Get in close to your subject
Medium shot
Close up shot
Extreme close-up – the best
Text on a Web page is easier to
read than a caption on a video
Video formats for the Web
Name
File
extension
Originator
Audio-Video Interlaced
.avi
Microsoft
QuickTime
.mov .qt
MPEG Video (MPEG-4)
Additional
codec?
Streaming?
Additional player?
Yes
No
No
Apple
Yes
Configurable
No
.mpg
Motion Picture
Expert
Group
No
No
No
Flash video
.flv
Adobe
yes
yes
Google Video
.gvp
Google
no
yes
Yes/no
Real Video
.ram .rm
RealNetworks
No
Yes – requires
server
software
Yes
Yes
Demo:

http://insylinux.mercer.edu/~liu_f/multimedia/
movie/
Graphic components

2D graphics


Vector graphics v.s. raster graphic
Animation


Tools: flash, gif creator
3D graphics




Film –video: adobe primer; final-cut
Animation: 3D max, Maya, Animation Master
Game – interactive : Blender, 3rd party engine
Virtual reality – interactive (VRML, X3D)
Vector-based vs. pixel-based
formats






Pixel-based format gives the information for every pixel; like a
bitmap
Vector-based format lists the shapes, with mathematical
descriptions of lines and curves
Vector-based format can be very much more compact, saving
storage and speeding downloads
Vector-based format can also improve appearance
Vector-based format permits much better results when images
sizes are changed
But: vector-based format doesn’t display automatically in a
browser; user must have or download a player
Vector-based vs. pixel-based
formats (II)


Software packages
 Vector
 Flash
 SVG
 PDF
Application


Raster
 Photoshop Jpg
 Gif
Logo

Photo  raster
Comparing pixel-based (top)
and vector-based formats
Animation





Definition: synthetic apparent motion created
through artificial means
Can sometimes be stored more compactly than
video, speeding downloads
Offers a richer set of interactions than video
An attention-getter
Good for demonstrating transitions and for
explaining complex systems
Demo of Flash
Performance

How long the loading time should be?



Reduce loading time



Not 10 Mins But 10 seconds
10 years ago: a over night-internet connection
vs. Today static “online” light
Compressing your images, sounds, and videos.
Display image with different technique (Multi-map)
Use Vector instead of Raster graphics

But most vector graphic not standard yet!
3D Animation and interaction




Provides more information and flexibility than
the 2D animation we have seen
Many formats; the open standard is Virtual
Reality Markup Language (VRML)
H-Anim is the standard for human animation
using avatars
X3D is next generation of VRML specified in
XML
Tour of the Munich Airport
Center, in interactive 3D, 1
Tour of the Munich Airport
Center, in interactive 3D, 2
Tour of the Munich Airport
Center, in interactive 3D, 3
How to embed graphic
components to the web

Standard


<img> - supported by all browsers
No- Standard





A plug-in might be needed
<object>: flash file
<embed> : demo of HIV model in VRML
<applet>: not all web browser support
….
Demo

System requirements:




VRML plug-in : http://www.bitmanagement.de/
Flash plug-in … : http://www.flash.com
Multi-user shared virtual environments
VRML embed example (VRML plug in and
shader supported graphics card needed)
http://insylinux.mercer.edu/~liu_f/multimedia/
vrml/
Home work

Project2 and project3

Using table or layers for layout; stylesheets for fonts and position
as well as color chart to give at least two different color schemes
match. Typography knowledge need to be applied to the design.

add at least two interactive components on your website to
enhance the content present.