Design and Evaluation of

Visual Information for the Web

Fall 2012

1

Introduction

Syllabus

Hybrid learning– Roles– Time-management

Expectations– Motivation– Curiosity– 5-6 hours/week

2

Introduction

Grades– You earn it– Start from 0– Based on the assignments you

accomplished– Reflect on your work, not on you

Attendance

3

Dreamweaver CS5

• A Web site production and management program

• Visual page building• Interactivity• Includes Spry, which is written in

JavaScript• Integrated with CSS, PHP, and

JavaScript• Design view, code view, and split view• Site management tools

4

Dreamweaver Interface

• Application bar• Document tabs• Document toolbar• Document

window• Property

inspector• Panel groups

5

Setup Preferences

• Edit > Preferences> Invisible elements > check Line breaks

• Set up panel groups from Windows button– History– CSS Styles/AP Elements– Workspace Layout

• View > rules/grid/guide > Snap to guides

• To define page appearance: Property inspector > Page Properties

6

Build Your Own Page

TitleText:– Insert panel > text (to change styles)

– Line break (automatic return + 1 empty line)

• If continuous without this empty line, Insert Panel > Text > BRj or Shift + Enter

– Multiple space: Edit > preference > general > allow multiple consecutive spaces

7

Build Your Own Page

• Format (HTML):– properties panel (heading, bold, italics,

alignment)• Copy/paste text• Check spelling: – Command > check spelling

• Import Word and Excel Document– File > import > Word document (only

for basic format)• View: Local view or file > view >Firefox

8

Local Site Structure

My document

My document

gslis720gslis720

gslis750gslis750

week1week1

week2week2

week3week3

week1.html

week2.html

Week3.html

img1.jpg

img1.jpg

img1.png

9

Server

What:• combination of hardware and

software designed to provide services to clients

• Server operating system is requiredHow to:

• Sign up a free server• Free Web Hosting

http://www.free-webhosts.com/webhosting-01.php

Watch video: http://www.youtube.com/watch?v=kDly37wAxyE&feature=player_embedded 10

Server Structure

ftp http://www

11

3 Ways of uploading your files

1. On server site, upload your filehttp://www.youtube.com/watch?v=g0CXeHtl7ow&feature=player_embedded

2. ftp from local to server using FileZillahttp://www.youtube.com/watch?v=eY0NZho3vFc&feature=player_embeddedhttp://www.youtube.com/watch?v=evj_Oy9ZjRo&feature=related

3. Use Dreamweaver to synchttp://www.youtube.com/watch?v=nNLYzm0PsTw&feature=player_embedded

12

FTP

What:• file transfer protocol

Why:• to promote sharing of files

(computer programs and/or data)• to encourage indirect or implicit

(via programs) use of remote computers

• to shield a user from variations in file storage systems among hosts, and

• to transfer data reliably and efficiently.

(from RFC 959, 1985 at http://tools.ietf.org/html/rfc959) 13