1 / 30

27.03.2007 dmfd

27.03.2007 dmfd. 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 !!!!. Goals of the lecture. Learn the basics of Dreamweaver: the workspace and the Site manager Understand an example of CSS layout.

azura
Download Presentation

27.03.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. 27.03.2007 dmfd

  2. 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. Goals of the lecture • Learn the basics of Dreamweaver: the workspace and the Site manager • Understand an example of CSS layout

  4. Index • Dreamweaver basics: the workspace • Dreamweaver: Site manager • Example of layout with CSS

  5. Characteristics of Dreamweaver • Web development tool • WYSIWYG HTML editor • CSS, JavaScript • PHP, ASP… • Site management • Integrated FTP • Easy synchronization between local/remote

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

  7. Index • Dreamweaver basics: the workspace • Dreamweaver: Site manager • Example of layout with CSS

  8. 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. 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. Site manager III Menu site Manage sites

  11. Site manager IV

  12. Site manager V

  13. Site manager VI

  14. Site manager VII

  15. Site manager VIII

  16. Options menu in Files panel

  17. Site manager • Create new folders/files • Upload to remote site: Get/Put • Synchronize

  18. Index • Dreamweaver basics: the workspace • Dreamweaver: Site manager • Example of layout with CSS

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

  20. CSS layout: absolute

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

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

  23. CSS layout: header header title nav

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

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

  26. CSS layout: content content maincol subcol

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

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

  29. Example of layout: relative

  30. Questions?

More Related