Design and Evaluation  of  Visual Information for the Web Spring 2012
Introduction <ul><li>Syllabus </li></ul><ul><li>Hybrid learning </li></ul><ul><ul><li>Roles </li></ul></ul><ul><ul><li>Tim...
Introduction <ul><li>Grades </li></ul><ul><ul><li>You earn it </li></ul></ul><ul><ul><li>Start from 0 </li></ul></ul><ul><...
Dreamweaver CS5 <ul><li>A Web site production and management program </li></ul><ul><li>Visual page building </li></ul><ul>...
Dreamweaver Interface <ul><li>Application bar </li></ul><ul><li>Document tabs </li></ul><ul><li>Document toolbar </li></ul...
Set up Preferences <ul><li>Edit > Preferences> Invisible elements > check Line breaks </li></ul><ul><li>Set up panel group...
Build Your Own Page <ul><li>Title </li></ul><ul><li>Text: </li></ul><ul><ul><li>Insert panel > text (to change styles) </l...
Build Your Own Page <ul><li>Format (HTML): </li></ul><ul><ul><li>properties panel (heading, bold, italics, alignment) </li...
Local Site Structure My document gslis720 gslis750 week1 week2 week3 week1.html week2.html Week3.html img1.jpg img1.jpg im...
Server <ul><li>What: </li></ul><ul><ul><li>combination of hardware and software designed to provide services to clients </...
Server Structure ftp http://www
3 Ways of uploading your files <ul><li>On server site, upload your file </li></ul><ul><ul><li>http://www.youtube.com/watch...
FTP <ul><li>What: </li></ul><ul><ul><li>file transfer protocol </li></ul></ul><ul><li>Why: </li></ul><ul><ul><li>to promot...
Upcoming SlideShare
Loading in …5
×

Week1 Dreamweaver and Server

1,827 views
1,772 views

Published on

Slideshow for gslis720week1 Dreamweaver and server

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,827
On SlideShare
0
From Embeds
0
Number of Embeds
1,116
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week1 Dreamweaver and Server

  1. 1. Design and Evaluation of Visual Information for the Web Spring 2012
  2. 2. Introduction <ul><li>Syllabus </li></ul><ul><li>Hybrid learning </li></ul><ul><ul><li>Roles </li></ul></ul><ul><ul><li>Time-management </li></ul></ul><ul><li>Expectations </li></ul><ul><ul><li>Motivation </li></ul></ul><ul><ul><li>Curiosity </li></ul></ul><ul><ul><li>5-6 hours/week </li></ul></ul>
  3. 3. Introduction <ul><li>Grades </li></ul><ul><ul><li>You earn it </li></ul></ul><ul><ul><li>Start from 0 </li></ul></ul><ul><ul><li>Based on the assignments you accomplished </li></ul></ul><ul><ul><li>Reflect on your work, not on you </li></ul></ul><ul><li>Attendance </li></ul>
  4. 4. Dreamweaver CS5 <ul><li>A Web site production and management program </li></ul><ul><li>Visual page building </li></ul><ul><li>Interactivity </li></ul><ul><li>Includes Spry, which is written in JavaScript </li></ul><ul><li>Integrated with CSS, PHP, and JavaScript </li></ul><ul><li>Design view, code view, and split view </li></ul><ul><li>Site management tools </li></ul>
  5. 5. Dreamweaver Interface <ul><li>Application bar </li></ul><ul><li>Document tabs </li></ul><ul><li>Document toolbar </li></ul><ul><li>Document window </li></ul><ul><li>Property inspector </li></ul><ul><li>Panel groups </li></ul>
  6. 6. Set up Preferences <ul><li>Edit > Preferences> Invisible elements > check Line breaks </li></ul><ul><li>Set up panel groups from Windows button </li></ul><ul><ul><li>History </li></ul></ul><ul><ul><li>CSS Styles/AP Elements </li></ul></ul><ul><ul><li>Workspace Layout </li></ul></ul><ul><li>View > rules/grid/guide > Snap to guides </li></ul><ul><li>To define page appearance: Property inspector > Page Properties </li></ul>
  7. 7. Build Your Own Page <ul><li>Title </li></ul><ul><li>Text: </li></ul><ul><ul><li>Insert panel > text (to change styles) </li></ul></ul><ul><ul><li>Line break (automatic return + 1 empty line) </li></ul></ul><ul><ul><ul><li>If no line break, Insert Panel > Text > BRj or Insert > HTML > Special characters > line break </li></ul></ul></ul><ul><ul><li>Multiple space: Edit > preference > general > allow multiple consecutive spaces </li></ul></ul>
  8. 8. Build Your Own Page <ul><li>Format (HTML): </li></ul><ul><ul><li>properties panel (heading, bold, italics, alignment) </li></ul></ul><ul><li>Copy/paste text </li></ul><ul><li>Check spelling: </li></ul><ul><ul><li>Command > check spelling </li></ul></ul><ul><li>Import Word and Excel Document </li></ul><ul><ul><li>File > import > Word document </li></ul></ul><ul><ul><li>(only for basic format) </li></ul></ul><ul><li>View: Local view or file > view >Firefox </li></ul>
  9. 9. Local Site Structure My document gslis720 gslis750 week1 week2 week3 week1.html week2.html Week3.html img1.jpg img1.jpg img1.png
  10. 10. Server <ul><li>What: </li></ul><ul><ul><li>combination of hardware and software designed to provide services to clients </li></ul></ul><ul><ul><li>Server operating system is required </li></ul></ul><ul><li>How to: </li></ul><ul><ul><li>Sign up a free server </li></ul></ul><ul><ul><li>Free Web Hosting </li></ul></ul><ul><ul><li>http://www.free-webhosts.com/webhosting-01.php </li></ul></ul><ul><li>Watch video: http://www.youtube.com/watch?v=kDly37wAxyE&feature=player_embedded </li></ul>
  11. 11. Server Structure ftp http://www
  12. 12. 3 Ways of uploading your files <ul><li>On server site, upload your file </li></ul><ul><ul><li>http://www.youtube.com/watch?v=g0CXeHtl7ow&feature=player_embedded </li></ul></ul><ul><li>ftp from local to server using FileZilla </li></ul><ul><ul><li>http://www.youtube.com/watch?v=eY0NZho3vFc&feature=player_embedded </li></ul></ul><ul><ul><li>http://www.youtube.com/watch?v=evj_Oy9ZjRo&feature=related </li></ul></ul><ul><li>Use Dreamweaver to sync </li></ul><ul><ul><li>http://www.youtube.com/watch?v=nNLYzm0PsTw&feature=player_embedded </li></ul></ul>
  13. 13. FTP <ul><li>What: </li></ul><ul><ul><li>file transfer protocol </li></ul></ul><ul><li>Why: </li></ul><ul><ul><li>to promote sharing of files (computer programs and/or data) </li></ul></ul><ul><ul><li>to encourage indirect or implicit (via programs) use of remote computers </li></ul></ul><ul><ul><li>to shield a user from variations in file storage systems among hosts, and </li></ul></ul><ul><ul><li>to transfer data reliably and efficiently. </li></ul></ul><ul><ul><li>(from RFC 959, 1985 at http://tools.ietf.org/html/rfc959) </li></ul></ul>

×