1. PART II 10.04.2007 dmfd

2. Digital Media: Communication and DesignF2007 Comments Remember: make a homepage using CSS Next Tuesday: guest lecture on Web 2.0

3. Digital Media: Communication and DesignF2007 Goals of the lecture See some other panels in DW Understand an example of CSS layout

4. Digital Media: Communication and DesignF2007 Index CSS panel Example of layout Results panel

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

6. Digital Media: Communication and DesignF2007 CSS Panel

7. Digital Media: Communication and DesignF2007 Index CSS panel Example of layout Results panel

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

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

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

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

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

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

14. 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%; height: 20px; } #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

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

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

17. 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; }

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

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

20. Digital Media: Communication and DesignF2007 CSS layout: container #container { position: relative; top: 0px; width: 80%; margin: 0 auto; }

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

22. Digital Media: Communication and DesignF2007 CSS layout: header II The rhythm of the war drums Home CV Links #header { position: relative; width:100%; }

23. Digital Media: Communication and DesignF2007 CSS layout: header III #title { float: left; width: 100%; padding: 0; margin: 0px; } #nav { position: relative; 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

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

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

26. Digital Media: Communication and DesignF2007 CSS layout: content III #content { position: relative; width: 100%; } #maincol { float: left; width: 80%; background-color: #c8956f; padding: 0 0 0 5px; } #subcol { float: right; width: 18%; background-color:#a77b5b; }

27. Digital Media: Communication and DesignF2007 Index CSS panel Example of layout Results panel

28. Digital Media: Communication and DesignF2007 Property inspector Changes depending on the selected object

29. Digital Media: Communication and DesignF2007 Validator Results panel, Validation tab

30. Digital Media: Communication and DesignF2007 Browser check Results panel, Target Browser Check tab

31. Digital Media: Communication and DesignF2007 Preview in browser

32. Digital Media: Communication and DesignF2007 Default DTD for new document

33. Digital Media: Communication and DesignF2007 Questions?