Images. Tables. Frames. Forms. DMFD F2007 IT University of Copenhagen

Digital Media: Communication and DesignF2007 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 DesignF2007 Index Images and other media Tables Frames Forms

Digital Media: Communication and DesignF2007 Images Inline element Ex: 

Digital Media: Communication and DesignF2007 Images II Bottom of image aligned with text Alternative text is required Recommended to use width and height  Better in CSS  Not recommended to resize an image

Digital Media: Communication and DesignF2007 Images III Presentational attributes (deprecated)  align=“position” top, middle, bottom left, right  border=“number”

Digital Media: Communication and DesignF2007 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 DesignF2007 Embedded media Movies, Flash, Java applets… object: recommended for all media applet: Java applets, deprecated embed: non-standard

Digital Media: Communication and DesignF2007 Object … Place media objects in the web document  Videos (QuickTime, WMP, Flash)  Flash animations  Images Not fully supported by all browsers used to specify runtime settings

Digital Media: Communication and DesignF2007 Object II

Digital Media: Communication and DesignF2007 Embed … Created by Netscape for plug-in media Non-standard, but very popular … used to provide alternative content

Digital Media: Communication and DesignF2007 Embed II

Digital Media: Communication and DesignF2007 Index Images and other media Tables Frames Forms

Digital Media: Communication and DesignF2007 Tables Two types  Tabular data  Layout (now we should use stylesheets) Elements  Table: …  Row: …  Element in a row (cell): …

Digital Media: Communication and DesignF2007 Tables II Example Cell 1 Cell 2 Cell 3 Cell 4

Digital Media: Communication and DesignF2007 Tables III Table headers  … Summary or caption  …  Title of the table …

Digital Media: Communication and DesignF2007 Tables IV Students in the course Name Group Student 1 3 Student 2 5

Digital Media: Communication and DesignF2007 Tables V Column span   The cell occupies two cells in the same row Row span   The cell occupies two cells in the same column

Digital Media: Communication and DesignF2007 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 DesignF2007

Index Images and other media Tables Frames Forms

Digital Media: Communication and DesignF2007 Frames Divide the window into subwindows Each subwindow displays a different document Each subwindow is scrollable independently

Digital Media: Communication and DesignF2007 Frames II Main document contains frames Title MenuMain document

Digital Media: Communication and DesignF2007 Frames III Frameset  …  Substitutes Frame 

Digital Media: Communication and DesignF2007 Frames IV Advantages  Allow to have parts scrollable and other static  Display documents from another server Disadvantages  Each page is formed by many documents  Not accessible for search engines  Difficult to bookmark  Bad accessibility for screen readers

Digital Media: Communication and DesignF2007 Index Images and other media Tables Frames Forms

Digital Media: Communication and DesignF2007 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…) …

Digital Media: Communication and DesignF2007 Forms II First name: Last name:

Digital Media: Communication and DesignF2007 Forms III: form controls Single line Password Checkboxes Radio buttons Submit and reset buttons File upload

Digital Media: Communication and DesignF2007 Forms IV input type=“text” input type=“radio” input type=“checkbox” input type=“submit” input type=“reset”

Digital Media: Communication and DesignF2007 Today’s assignment Tables:  Present tabular data  Layout with tables Forms:  Example  Implement the survey you designed last Thursday

Digital Media: Communication and DesignF2007 Questions