ISD110:Semester 2: Week 1

1
ISD110Semester 2 Week 1
ISD110 SEMESTER 2 WEEK 1 Groupwork Past Examples
of Work DreamWeaver Interactivity with
layers Formatting content with tables
2
Ass 1 Issues

• Assignment 1 Issues
• Portfolio
• Too much code (separate, relevant chunks)
• Too little annotation
• No analysis / rationale
• Would not be a learning aid
• Code
• No index page
• Untitled documents
• Broken links (hyperlinks and media)
• Too little experimentation

3
Assignment 2

• Assignment 2
• Each group is required to produce a WWW
  e-commerce site based upon one of the following
  products
• Clothing
• Books
• The individual range for these themes is to be
  selected by the members of the group. The sites
  should facilitate access to a range of documents
  (both local and remote) relating to these themes.
  The sites do not necessarily have to be
  database-driven or use server-side scripting

4
Assignment 2

• Assignment 2
• In assessing the sites the tutor will consider
  the following criteria
• Inclusion of a wide range of facilities and
  features covered during the module
• General presentation of pages - consistency of
  style etc
• Ease of finding one's way around
• Inclusion of appropriate material and facilities
• Inclusion of appropriate novel components (e.g.
  animation interactive components)
• Relevance and currency of material
• Performance of the site
• Account will be taken of work done by the group
  in producing this material - e.g. greater credit
  will be given for animated gifs created by the
  group as opposed to gifs copied from some source

5
Assignment 2

• Groupwork
• Note The assessment requires you to work as part
  of a group of 3/4 students to produce a WWW site
  consisting of several pages. Students must work
  as part of a group - individual work will not be
  acceptable unless there are compelling mitigating
  circumstances. The group will be required to
  demonstrate their site during the practical
  session during week 12. This presentation will be
  based on the information submitted by the group
  in week 11 (supplied on disc)

6
Assignment 2

• Groupwork
• Groups will be responsible for booking a time
  slot for their presentation. All group members
  will need to be present at the presentation in
  order to gain any credit for their contribution
  (mitigating circumstances such as certificated
  sickness will, of course, apply). Note that the
  material for the presentation will have been
  submitted on disc during week 11 so that groups
  presenting their work later in week 12 do not
  gain an advantage over groups presenting during
  earlier time slots). Please make sure that you
  keep a copy of the material you present

7
Assignment 2

• NB All members of group do not necessarily
  receive same mark
• Groupwork Issues
• Dissimilar amount of effort by group members
• Role assignment (or lack of)
• Trying to contribute at last minute (integration
  issues)
• Lack of compromise (design and implementation)
• Lack of communication
• give a dog a bad name - cliques

8
Overview

• Layers
• Some Issues
• Interactivity
• Show / Hide layers
• Image Swap
• Tables
• HTML Tables
• DreamWeaver Tables
• Standard Mode
• Layout Mode

9
Layers Issues

• Layers
• Layers provide a great deal of flexibility in
  placing content
• Are not conducive to coherent layout / structure
• Pre - Explorer 4.0 and Netscape 4.0 cant
  display layers
• Version 4 browsers do not display layers
  consistently
• Use tables rather that layers
• Existing layers can be converted to tables
• Modify Convert Layers to Table

10
Interactivity Show / Hide Layers

• Layers part of DHTML
• Work in conjunction with JavaScript
• Can be visible or hidden
• Introduce interactivity to HTML documents
• Use Property Inspector and Behaviours
• Mouseover one object (layer) to make another
  (layer) appear
• 3 things required
• Object to be hidden and appear
• Interactive object to prompt appearance of first
  object
• Behaviour (JavaScript) to make it work
• Naming layers makes it easier

logo to appear
text to mouseover to make logo appear
11
Interactivity Show / Hide Layers

• Property Inspector
• Change visible property of layer containing
  object to appear
• Window Behaviours
• Select interactive element (text)
• Add behaviour (show events for IE 5.5 and above)
• Assign behaviour to interactive element (text)
• Show Hide layers
• Select appropriate event (onMouseOver)

12
Interactivity Image Swap

• Creates rollover effect
• Select image
• Window Behaviours Swap image

original image
new image
13
HTML Tables

• HTML Tables
• Formerly used to present tabular data now used
  for design / layout of content
• Web designers use 1 table for whole page
  Fireworks generates html tables
• HTML tables are created with the table tag
• Each table consists of a number of rows,
  specified by tr (table row) tags
• Each row consists of cells, specified by td
  (table data) or th (table header)
• Nowhere is the number of columns specified
  that's determined by the number of cells in the
  rows

14
Table Issues

• Table Issues
• W3C recommends using CSS for layout
• browsers do not always display tables
  consistently
• CSS positioned tables not displayed consistently
• table code can be difficult to keep track of
• DW Table Issues
• standard mode
• layout mode
• expanded mode
• incorrect design / use of tables

15
DreamWeaver Tables Standard Mode

• Rows
• Horizontal divider
• Columns
• Vertical divider
• Width
• Percentage (100)
• Pixel value

columns
rows
16
DreamWeaver Tables Standard Mode

• Width (Pixels)
• Absolute width
• More WYSIWYG
• Less browser dependent
• Width (Percentage)
• Stretches to specified age of browser size
• age ignored if content too large
• Property Inspector
• Select table
• Edit table properties

17
Layout Mode

• Layout Mode
• Allows you to draw table
• Allows you to draw table cells
• Can encourage sloppy design
• Design table by eye
• Use property inspector to format table
• Width is either fixed or autostretch

18
Week 1Tutorial

• Form Groups
• Email djohnston_at_glos.ac.uk the names / numbers of
  group members
• In Groups
• Think of ways in which you would address group
  issues (slide 7)
• Critically evaluate previous work
  (resources/showcase)
• Put findings into PPT and email
  djohnston_at_glos.ac.uk