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