Digital Media: Communication and Design F2007
Goals of the lecture
Display images and other media Present tabular data Use frames for the layout of the web page Implement forms to collect information
Digital Media: Communication and Design F2007
Images
<img /> Inline element <img src=“URL” alt=“text” /> <img src=“URL” alt=“text” width=“number”
height=“number” /> Ex:
<img src=“http://www1.itu.dk/graphics/ITU-library/Internet/Design/Logo/inter_big_logo_eng.gif” width=“400” height=“44” alt=“ITU” />
Digital Media: Communication and Design F2007
Images II
Bottom of image aligned with text Alternative text is required Recommended to use width and height
Better in CSSNot recommended to resize an image
Digital Media: Communication and Design F2007
Images III
Presentational attributes (deprecated)align=“position”
top, middle, bottom left, right
border=“number”
Digital Media: Communication and Design F2007
Images IV
Image maps Multiple links in the
same image Client-side: info in the
document Server-side: info in the
server (discouraged)
Digital Media: Communication and Design F2007
Embedded media
Movies, Flash, Java applets… object: recommended for all media applet: Java applets, deprecated embed: non-standard
Digital Media: Communication and Design F2007
Object
<object><param />…</object> Place media objects in the web document
Videos (QuickTime, WMP, Flash)Flash animations Images
Not fully supported by all browsers <param> used to specify runtime settings
Digital Media: Communication and Design F2007
Object II
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/UTSdUOC8Kac" width="425" height="350" id="VideoPlayback">
<param name="movie" value="http://www.youtube.com/v/UTSdUOC8Kac" />
<param name="allowScriptAcess" value="sameDomain" /><param name="quality" value="best" /><param name="bgcolor" value="#FFFFFF" /><param name="scale" value="noScale" /><param name="salign" value="TL" /> <param name="FlashVars" value="playerMode=embedded" />
</object>
Digital Media: Communication and Design F2007
Embed
<embed>…</embed> Created by Netscape for plug-in media Non-standard, but very popular <noembed>…</noembed> used to
provide alternative content
Digital Media: Communication and Design F2007
Embed II
<object width="425" height="350"><param name="movie"
value="http://www.youtube.com/v/JR_naKxLEPc"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/JR_naKxLEPc"
type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
Digital Media: Communication and Design F2007
Tables
Two typesTabular dataLayout (now we should use stylesheets)
ElementsTable: <table>…</table>Row: <tr>…</tr>Element in a row (cell): <td>…</td>
Digital Media: Communication and Design F2007
Tables II
Example<table>
<tr><td>Cell 1</td><td>Cell 2</td>
</tr><tr>
<td>Cell 3</td><td>Cell 4</td>
</tr></table>
Digital Media: Communication and Design F2007
Tables III
Table headers<th>…</th>
Summary or caption <table summary=“…”>…</table> <table><caption>Title of the
table</caption>…</table>
Digital Media: Communication and Design F2007
Tables IV
<table summary=“Students enrolled in the course, group they belong to, and e-mail”><caption>Students in the course</caption><tr>
<th>Name</th><th>Group</th><th>e-mail</th></tr><tr>
<td>Student 1</td><td>3</td><td>[email protected]</td></tr><tr>
<td>Student 2</td><td>5</td><td>[email protected]</td></tr></table>
Digital Media: Communication and Design F2007
Tables V
Column span<td colspan=“2”>The cell occupies two cells in the same row
Row span<td rowspan=“2”>The cell occupies two cells in the same
column
Digital Media: Communication and Design F2007
Layout tables
Use only the basic elements: table, tr, td Avoid nesting tables Keep the structure and markup simple Avoid empty rows/cells
Digital Media: Communication and Design F2007
Frames
Divide the window into subwindows Each subwindow displays a different
document Each subwindow is scrollable
independently
Digital Media: Communication and Design F2007
Frames II
Main document contains frames
Title
Menu Main document
Digital Media: Communication and Design F2007
Frames III
Frameset<frameset>…</frameset>Substitutes <body>
Frame<frame src=“URL” />
<frameset cols=“*,*”>
<frame src=“menu.html” name=“menu” />
<frame src=“content.html” name=“main” />
</frameset>
Digital Media: Communication and Design F2007
Frames IV
AdvantagesAllow to have parts scrollable and other staticDisplay documents from another server
DisadvantagesEach page is formed by many documentsNot accessible for search enginesDifficult to bookmarkBad accessibility for screen readers
Digital Media: Communication and Design F2007
Forms
Used to transmit information to the server Uses:
Search box, sign up, surveys… Information is processed by an application
in the server (cgi, php, asp…) <form action=“URL”>…</form>
Digital Media: Communication and Design F2007
Forms II<form action=“/cgi-bin/action.cgi” method=“post”><p>First name: <input type=“text” name=“firstname” /><br />Last name: <input type=“text” name=“lastname” /><br /></p><input type=“submit” value=“Search” />
Digital Media: Communication and Design F2007
Forms III: form controls
Single line Password Checkboxes Radio buttons Submit and reset buttons File upload
Digital Media: Communication and Design F2007
Forms IV
input type=“text”
input type=“radio”
input type=“checkbox”
input type=“submit”input type=“reset”
Digital Media: Communication and Design F2007
Today’s assignment
Tables:Present tabular dataLayout with tables
Forms:Example Implement the survey you designed last
Thursday