CSS and Multimedia Components INSY211 Feng Liu Ph.D.
Jan 01, 2016
CSS and Multimedia Components
INSY211
Feng Liu Ph.D.
Outline Cascading Style sheet
Inline style / Internal style / external style sheet Use scheme is a fast way for the quick result
Layer 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; font-
family: 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/repeat-x/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
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.
This is a demo
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: #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}
Floating object: #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 eyes monitor , HMD … Sound ears Sound card,
Speaker Touch finger Haptic device,
Joystick Smell nose smoke simulation ?? Feel Heart ??? … 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.com
Video A powerful medium, conveying:
Motion Changing facial expressions Associated audio
Disadvantage: 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 You get a much better image The reduction of motion improves compression
Use a neutral background 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 Additional codec?
Streaming? Additional player?
Audio-Video Interlaced .avi Microsoft Yes No No
QuickTime .mov .qt Apple Yes Configurable No
MPEG Video (MPEG-4) .mpg Motion Picture Expert Group
No No No
Flash video .flv Adobe yes yes Yes
Google Video .gvp Google no yes Yes/no
Real Video .ram .rm RealNetworks No Yes – requires server
software
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
Logo
Raster Photoshop Jpg Gif
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? Not 10 Mins But 10 seconds 10 years ago: a over night-internet connection vs. Today static “online” light
Reduce loading time 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.