1 / 33

PART II 10.04.2007 dmfd

PART II 10.04.2007 dmfd. Comments. Remember: make a homepage using CSS Next Tuesday: guest lecture on Web 2.0. Goals of the lecture. See some other panels in DW Understand an example of CSS layout. Index. CSS panel Example of layout Results panel. Insert bar. The workspace.

felicity-hopkins
Download Presentation

PART II 10.04.2007 dmfd

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PART II 10.04.2007 dmfd

  2. Comments • Remember: make a homepage using CSS • Next Tuesday: guest lecture on Web 2.0

  3. Goals of the lecture • See some other panels in DW • Understand an example of CSS layout

  4. Index • CSS panel • Example of layout • Results panel

  5. Insert bar The workspace Document bar CSS panel Code window Coding toolbar WYSIWYG window Tag selector Files panel Property inspector Results panel

  6. CSS Panel

  7. Index • CSS panel • Example of layout • Results panel

  8. Example of layout with CSS container header content maincol subcol

  9. CSS layout: absolute

  10. CSS layout: structuring divs <body> <div id="container"> <div id="header"> <div id="title"> ... </div> <div id="nav"> ... </div> </div> <div id="content"> <div id="maincol"> ... </div> <div id="subcol"> ... </div> </div> </div> </body>

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

  12. CSS layout: header header title nav

  13. CSS layout: header II <div id="header"> <div id="title"> <h1>The rhythm of the war drums</h1> </div> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="cv/cv.html">CV</a></li> <li><a href="links/links.html">Links</a></li> </ul> </div> </div> #header { position: absolute; top:0px; width:750px; }

  14. 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; } Title (logo) Navigation bar using a list #nav li { display: inline; }

  15. CSS layout: content content maincol subcol

  16. CSS layout: content II <div id="content"> <div id="maincol"> <h3>Counting bodies like sheep</h3> <p><img src="images/logo.jpg" alt="logoAPC" class="logo" /> Don't fret precious, I'm here<br /> Step away from the window<br /> And go back to sleep<br /> ... </div> <div id="subcol"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div>

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

  18. Example of layout: relative

  19. CSS layout: structuring divs <body> <div id="container"> <div id="header"> <div id="title"> ... </div> <div id="nav"> ... </div> </div> <div id="content"> <div id="maincol"> ... </div> <div id="subcol"> ... </div> </div> </div> </body>

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

  21. CSS layout: header header title nav

  22. CSS layout: header II <div id="header"> <div id="title"> <h1>The rhythm of the war drums</h1> </div> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="cv/cv.html">CV</a></li> <li><a href="links/links.html">Links</a></li> </ul> </div> </div> #header { position: relative; width:100%; }

  23. 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; } Title (logo) Navigation bar using a list #nav li { display: inline; }

  24. CSS layout: content content maincol subcol

  25. CSS layout: content II <div id="content"> <div id="maincol"> <h3>Counting bodies like sheep</h3> <p><img src="images/logo.jpg" alt="logoAPC" class="logo" /> Don't fret precious, I'm here<br /> Step away from the window<br /> And go back to sleep<br /> ... </div> <div id="subcol"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div>

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

  27. Index • CSS panel • Example of layout • Results panel

  28. Property inspector • Changes depending on the selected object

  29. Validator • Results panel, Validation tab

  30. Browser check • Results panel, Target Browser Check tab

  31. Preview in browser

  32. Default DTD for new document

  33. Questions?

More Related