1. 27.03.2007 dmfd

2. Digital Media: Communication and DesignF2007 Comments Evaluation in my.itu  26.03 to 13.04  ITU takes into consideration the issues you mention in your evaluation  Please fill it in !!!!

3. Digital Media: Communication and DesignF2007 Goals of the lecture Learn the basics of Dreamweaver: the workspace and the Site manager Understand an example of CSS layout

4. Digital Media: Communication and DesignF2007 Index Dreamweaver basics: the workspace Dreamweaver: Site manager Example of layout with CSS

5. Digital Media: Communication and DesignF2007 Characteristics of Dreamweaver Web development tool WYSIWYG HTML editor  CSS, JavaScript  PHP, ASP… Site management  Integrated FTP  Easy synchronization between local/remote

6. Digital Media: Communication and DesignF2007 The workspace Insert bar Document bar Code window WYSIWYG window Property inspector Results panel Tag selector CSS panel Files panel Coding toolbar

7. Digital Media: Communication and DesignF2007 Index Dreamweaver basics: the workspace Dreamweaver: Site manager Example of layout with CSS

8. Digital Media: Communication and DesignF2007 Site manager Organize all the documents in the website Upload automatically to the server using FTP connection Update links between files Transfer dependent files

9. Digital Media: Communication and DesignF2007 Site manager II Local folder / local site  Store files in our hard drive, i.e. My Docs Remote folder / remote site  Server connected to the Internet, i.e. public_html

10. Digital Media: Communication and DesignF2007 Site manager III Menu site Manage sites

11. Digital Media: Communication and DesignF2007 Site manager IV

12. Digital Media: Communication and DesignF2007 Site manager V

13. Digital Media: Communication and DesignF2007 Site manager VI

14. Digital Media: Communication and DesignF2007 Site manager VII

15. Digital Media: Communication and DesignF2007 Site manager VIII

16. Digital Media: Communication and DesignF2007 Options menu in Files panel

17. Digital Media: Communication and DesignF2007 Site manager Create new folders/files Upload to remote site: Get/Put Synchronize

18. Digital Media: Communication and DesignF2007 Index Dreamweaver basics: the workspace Dreamweaver: Site manager Example of layout with CSS

19. Digital Media: Communication and DesignF2007 Example of layout with CSS container header content maincol subcol

20. Digital Media: Communication and DesignF2007 CSS layout: absolute

21. Digital Media: Communication and DesignF2007 CSS layout: structuring divs............

22. Digital Media: Communication and DesignF2007 CSS layout: container #container { position: absolute; width: 750px; left:50%; margin-left:-375px; } Center hack

23. Digital Media: Communication and DesignF2007 CSS layout: header header title nav

24. Digital Media: Communication and DesignF2007 CSS layout: header II The rhythm of the war drums Home CV Links #header { position: absolute; top:0px; width:750px; }

25. Digital Media: Communication and DesignF2007 CSS layout: header III #title { position: absolute; top:0px; width:100%; margin: 0px; height: 100px; } #nav { position: absolute; top:100px; left:0px; width:100%; } #nav ul { list-style-type: none; padding: 0px; margin: 0px; border: solid #ccc; border-width:0 1px; } #nav li { display: inline; } Title (logo) Navigation bar using a list

26. Digital Media: Communication and DesignF2007 CSS layout: content content maincol subcol

27. Digital Media: Communication and DesignF2007 CSS layout: content II Counting bodies like sheep Don't fret precious, I'm here Step away from the window And go back to sleep... 1 2 3

28. Digital Media: Communication and DesignF2007 CSS layout: content III #content { position: absolute; top:120px; width:750px; } #maincol { position: absolute; left: 0px; width: 595px; background-color: #c8956f; padding: 0 0 0 5px; } #subcol { position: absolute; right: 0px; width:150px; background-color:#a77b5b; }

29. Digital Media: Communication and DesignF2007 Example of layout: relative

30. Digital Media: Communication and DesignF2007 Questions?