Download
1 / 30
300 likes | 420 Vues
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.
E N D
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
Index • Dreamweaver basics: the workspace • Dreamweaver: Site manager • Example of layout with CSS
Characteristics of Dreamweaver • Web development tool • WYSIWYG HTML editor • CSS, JavaScript • PHP, ASP… • Site management • Integrated FTP • Easy synchronization between local/remote
Insert bar The workspace Document bar CSS panel Code window Coding toolbar WYSIWYG window Tag selector Files panel Property inspector Results panel
Index • Dreamweaver basics: the workspace • Dreamweaver: Site manager • Example of layout with CSS
Site manager • Organize all the documents in the website • Upload automatically to the server using FTP connection • Update links between files • Transfer dependent files
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
Site manager III Menu site Manage sites
Site manager • Create new folders/files • Upload to remote site: Get/Put • Synchronize
Index • Dreamweaver basics: the workspace • Dreamweaver: Site manager • Example of layout with CSS
Example of layout with CSS container header content maincol subcol
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>
CSS layout: container #container { position: absolute; width: 750px; left:50%; margin-left:-375px; } Center hack
CSS layout: header header title nav
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; }
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; }
CSS layout: content content maincol subcol
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>
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; }
