with autumn theme

1. Design and Evaluation
of
Visual Information for the Web
Fall 2012
1

2. Introduction
Syllabus
Hybrid learning
– Roles
– Time-management
Expectations
– Motivation
– Curiosity
– 5-6 hours/week
2

3. Introduction
Grades
– You earn it
– Start from 0
– Based on the assignments you accomplished
– Reflect on your work, not on you
Attendance
3

4. 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

5. Dreamweaver Interface
• Application bar
• Document tabs
• Document toolbar
• Document window
• Property inspector
• Panel groups
5

6. 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

7. Build Your Own Page
Title
Text:
– 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

8. 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

9. Local Site Structure
week1.html
My
document
week1
img1.jpg
week2.html
gslis720 week2
img1.jpg
Week3.html
week3
gslis750 img1.png
9

10. Server
What:
• combination of hardware and software designed
to provide services to clients
• Server operating system is required
How 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

11. Server Structure
http://www
ftp
11

12. 3 Ways of uploading your files
1. On server site, upload your file
http://www.youtube.com/watch?v=g0CXeHtl7ow&feature=pl
ayer_embedded
2. ftp from local to server using FileZilla
http://www.youtube.com/watch?v=eY0NZho3vFc&feature=pl
ayer_embedded
http://www.youtube.com/watch?v=evj_Oy9ZjRo&feature=rela
ted
3. Use Dreamweaver to sync
http://www.youtube.com/watch?v=nNLYzm0PsTw&feature=
player_embedded
12

13. 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