1 / 85

Web design

Web design. Čas 2. Da se podsetimo. Šta je web dizajn? Šta sve može biti sadržaj? Šta je web browser? “Jezici”. Napravili smo. Kako?. Naslov ili <title></title>. Heading1 ili <h1></h1>. Link ili <a></a>. Paragraf ili <p></p>. I dobili smo.

monifa
Télécharger la présentation

Web design

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. Web design • Čas 2

  2. Da se podsetimo • Šta je web dizajn? • Šta sve može biti sadržaj? • Šta je web browser? • “Jezici”

  3. Napravili smo • Kako?

  4. Naslov ili <title></title> Heading1 ili <h1></h1> Link ili <a></a> Paragraf ili <p></p>

  5. I dobili smo... • <html><head><title>Naslovna strana</title></head><body><h1>Moj websajt!</h1><p>Ovo je moj web sajt.</p><p>Ovo su sajtovi koje ja najčešće posećujem:</p><p><a href="www.google.com">google.com</a></p><p><a href="www.facebook.com">facebook.com</a></p><p><a href="www.myspace.com">myspace.com</a></p></body></html>

  6. Uveli smo problem Layout-a • ili preloma, ko kako hoće ;-)

  7. Layout pomoću tabela

  8. pozadina ćelije Tabela u tabeli

  9. Pa smo dobili... • <html><head> <title>Untitled Document</title></head><body><table width="100%"> <tr> <th scope="row"> <table width="100%"> <tr> <th bgcolor="#FFFFFF" scope="row">Logo</th> <td bgcolor="#CCCCCC"><a href="www.google.com">dugme 1</a></td> <td bgcolor="#999999"><a href="www.google.com">dugme 2</a></td> <td bgcolor="#666666"><a href="www.google.com">dugme 3</a></td> <td bgcolor="#333333"><a href="www.google.com">dugme 4</a></td> </tr> </table> </th> </tr> <tr> <th scope="row">Sadrzaj strane</th> </tr> <tr> <th scope="row">Footer...</th> </tr></table></body></html>

  10. Pa smo dobili... • <html><head> <title>Untitled Document</title></head><body><table width="100%"> <tr> <th scope="row"> <table width="100%"> <tr> <th bgcolor="#FFFFFF" scope="row">Logo</th> <td bgcolor="#CCCCCC"><a href="www.google.com">dugme 1</a></td> <td bgcolor="#999999"><a href="www.google.com">dugme 2</a></td> <td bgcolor="#666666"><a href="www.google.com">dugme 3</a></td> <td bgcolor="#333333"><a href="www.google.com">dugme 4</a></td> </tr> </table> </th> </tr> <tr> <th scope="row">Sadrzaj strane</th> </tr> <tr> <th scope="row">Footer...</th> </tr></table></body></html>

  11. Pa smo dobili... • <html><head> <title>Untitled Document</title></head><body><table width="100%"><tr> <th scope="row"> <table width="100%"> <tr> <th bgcolor="#FFFFFF" scope="row">Logo</th> <td bgcolor="#CCCCCC"><a href="www.google.com">dugme 1</a></td> <td bgcolor="#999999"><a href="www.google.com">dugme 2</a></td> <td bgcolor="#666666"><a href="www.google.com">dugme 3</a></td> <td bgcolor="#333333"><a href="www.google.com">dugme 4</a></td> </tr> </table> </th></tr> <tr> <th scope="row">Sadrzaj strane</th> </tr> <tr> <th scope="row">Footer...</th> </tr></table></body></html>

  12. Pa smo dobili... • <html><head> <title>Untitled Document</title></head><body><table width="100%"><tr> <th scope="row"> <table width="100%"> <tr> <th bgcolor="#FFFFFF" scope="row">Logo</th> <td bgcolor="#CCCCCC"><a href="www.google.com">dugme 1</a></td> <td bgcolor="#999999"><a href="www.google.com">dugme 2</a></td> <td bgcolor="#666666"><a href="www.google.com">dugme 3</a></td> <td bgcolor="#333333"><a href="www.google.com">dugme 4</a></td> </tr> </table> </th></tr><tr> <th scope="row">Sadrzaj strane</th></tr><tr> <th scope="row">Footer...</th></tr></table></body></html>

  13. Pa smo dobili... • <html><head> <title>Untitled Document</title></head><body><table width="100%"><tr> <th scope="row"><table width="100%"> <tr> <th bgcolor="#FFFFFF" scope="row">Logo</th> <td bgcolor="#CCCCCC"><a href="www.google.com">dugme 1</a></td> <td bgcolor="#999999"><a href="www.google.com">dugme 2</a></td> <td bgcolor="#666666"><a href="www.google.com">dugme 3</a></td> <td bgcolor="#333333"><a href="www.google.com">dugme 4</a></td> </tr></table> </th></tr> <tr> <th scope="row">Sadrzaj strane</th> </tr> <tr> <th scope="row">Footer...</th> </tr></table></body></html>

  14. Pa smo dobili... • <html><head> <title>Untitled Document</title></head><body><table width="100%"> <tr> <th scope="row"> <table width="100%"> <tr><th bgcolor="#FFFFFF" scope="row">Logo</th> <td bgcolor="#CCCCCC"><a href="www.google.com">dugme 1</a></td> <td bgcolor="#999999"><a href="www.google.com">dugme 2</a></td> <td bgcolor="#666666"><a href="www.google.com">dugme 3</a></td> <td bgcolor="#333333"><a href="www.google.com">dugme 4</a></td> </tr> </table> </th> </tr> <tr> <th scope="row">Sadrzaj strane</th> </tr> <tr> <th scope="row">Footer...</th> </tr></table></body></html>

  15. Layout:Relativna i apsolutnageometrija / pozicioniranje?

  16. 100px 100%

  17. 100px 100%

  18. Danas ćemo još o layout-u

  19. Metode za realizaciju layout-a • Layout preko tabela (“stari” HTML način) • Layout pomoću CSS-a (XHTML)

  20. Prednosti i mane

  21. Prednosti i mane

  22. Recimo...

  23. Prednosti i mane

  24. Prednosti i mane

  25. U nekim slučajevima, layout preko tabela se brže realizuje

  26. Prednosti i mane

  27. Prednosti i mane

  28. SEO Search Engine Optimization

  29. XHTML pomoću CSS-a pomaže da sajt bude bolje rangiran

  30. Medjutim, CSS (XHTML) ima jednu primetnu “manu” • Web Browser-i

  31. % korisnika odredjenih browser-a (mart 2009)

  32. IE ne prati standarde i ima tzv. “broken box model” • O čemu ćemo malo kasnije...

  33. Dakle, šta je to CSS? • Cascading Style Sheets

  34. CSS je “jezik” kojim opisujemo isključivo izgled strane

  35. “Jezici” • <html>, <xhtml> • JavaScript, JQuery... • ActionScript (Flash) • PHP

  36. “Jezici” • <html>, <xhtml>, CSS • JavaScript, JQuery... • ActionScript (Flash) • PHP

  37. Da vidimo primer

  38. Strana bez CSS-a

  39. Ista strana sa CSS-om

  40. Da vidimo u čemu se razlikuju ove dve strane<vreme za DW>

  41. Otvorimo strane u DW-u • Izaberemo slit view • Uočimo razlike

  42. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;}

  43. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;}

  44. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;}

  45. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;}

  46. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;}

  47. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;} Selektori

  48. primer1.css • * { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333;} • h1 { font-size:24px; text-transform:uppercase;}body { background-color: #BBB; padding: 30px;}a { color:#060; text-decoration:none;} Stilovi box-ova

More Related