450 likes | 735 Views
CSS and Multimedia Components. INSY 21 1 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>
E N D
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”>
This is a demo 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.
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}
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
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
Text on a Web page is easier to read than a caption on a video
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
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
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
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.