Скачать презентацию Medi Art Kurs iz Web Dizajna
709d099fe07c6660ba21fe07ab60c99f.ppt
- Количество слайдов: 50
Скачать презентацию Medi Art Kurs iz Web Dizajna
Скачать презентацию Medi Art Kurs iz Web Dizajna
Medi. Art Kurs iz Web Dizajna
• Dragan Jovev dragan. jovev@gmail. com • Sava Švabić • abracadabra 86@gmail. com
Šta je Web Dizajn?
Sposobnost prikaza nekog sadržaja u web browseru putem Interneta Tako bar kaže wikipedia. . .
Sposobnost prikaza nekog sadržaja u web browseru putem Interneta
Sadržaj --> Internet --> browser
Šta sve može biti sadržaj. . . • • • Tekst Slika Animacija Audio i Video Ustvari bilo koja digitalna informacija. . .
Tekst
Slika
Audio i Video
Web browser? Program koji prikazuje taj digitalni sadržaj
Kako web browser preko Interneta prikazuje sadržaj? Postoje tehnologije tj. “jezici” koje browser “razume” i prevodi za nas u websajt, tj. web stranu
“Jezici” • • <html>, <xhtml> Java. Script, JQuery. . . Action. Script (Flash) PHP
“Jezici” • • <html>, <xhtml> Java. Script, JQuery. . . Action. Script (Flash) PHP
Najprostija web (HTML) strana
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Strana ispričana html jezikom <html> <head> <title>Naslov strane. . . </title> </head> <body> <p>Zdravoooo!</p> </body> </html>
Komplikovano, zar ne?
Malo komplikovanija strana • <html> <head> <title>Naslov strane 2</title> </head> <body> <h 1>Naslov!</h 1> <p><a href="http: //www. google. c om/">Link na Google. com</a></p> </body> </html>
Malo komplikovanija strana • <html> <head> <title>Naslov strane 2</title> </head> <body> <h 1>Naslov!</h 1> <p><a href="http: //www. google. c om/">Link na Google. com</a></p> </body> </html>
Malo komplikovanija strana • <html> <head> <title>Naslov strane 2</title> </head> <body> <h 1>Naslov!</h 1> <p><a href="http: //www. google. c om/">Link na Google. com</a></p> </body> </html>
Malo komplikovanija strana • <html> <head> <title>Naslov strane 2</title> </head> <body> <h 1>Naslov!</h 1> <p><a href="http: //www. google. c om/">Link na Google. com</a></p> </body> </html>
Malo komplikovanija strana • <html> <head> <title>Naslov strane 2</title> </head> <body> <h 1>Naslov!</h 1> <p><a href="http: //www. google. c om/">Link na Google. com</a></p> </body> </html>
Malo komplikovanija strana • <html> <head> <title>Naslov strane 2</title> </head> <body> <h 1>Naslov!</h 1> <p><a href="http: //www. google. c om/">Link na Google. com</a></p> </body> </html>
Kako izgleda “jezik” ovakve strane?
• </script> • <script type="text/javascript" charset="UTF-8"> • if (typeof tokens == 'undefined') tokens = new Object(); • if (!tokens. digg) tokens. digg = new Object(); • if (!tokens. report) tokens. report = new Object(); • • tokens. digg. perform = "41 adf 09 a 1083576 d 7 d 29 fdc 4 a 8 ed 26 e 1"; • • tokens. report. store = "a 3 ab 3 b 3 bfba 457 ada 599 c 1 c 771027981"; • $j(document). ready(function() {
Rezultat rada web dizajn tima je ovaj “jezik” tj. kod
Kako doći do tog rezultata? • • • Sednemo i kucamo taj “jezik” ili kod kao u Word-u po ceo dan. “Ukrademo” taj kod u celini ili nekom delu od nekog drugog Koristimo programe koji kucaju taj kod za nas dok se mi fokusiramo na sam dizajn
Kako doći do tog rezultata? • • • Sednemo i kucamo taj “jezik” ili kod kao u Word-u po ceo dan. “Ukrademo” taj kod u celini ili nekom delu od nekog drugog Koristimo programe koji kucaju taj kod za nas dok se mi fokusiramo na sam dizajn
Kako doći do tog rezultata? • • • Sednemo i kucamo taj “jezik” ili kod kao u Word-u po ceo dan. “Ukrademo” taj kod u celini ili nekom delu od nekog drugog Koristimo programe koji kucaju taj kod za nas dok se mi fokusiramo na sam dizajn
Kako doći do tog rezultata? • • • Sednemo i kucamo taj “jezik” ili kod kao u Word-u po ceo dan. “Ukrademo” taj kod u celini ili nekom delu od nekog drugog Koristimo programe koji kucaju taj kod za nas dok se mi fokusiramo na sam dizajn
Adobe Dreamweaver CS 3 / CS 4 WYSIWYG Editor
Code Split Design view
Da pogledamo predhodne primere
Hajde da napravimo nešto novo
1. Ubacimo naslov 2. Ubacimo heading 1 3. Ubacimo 2 paragrafa 4. Ubacimo 3 linka
1. Ubacimo naslov 2. Ubacimo heading 1 3. Ubacimo 2 paragrafa 4. Ubacimo 3 linka
1. Ubacimo naslov 2. Ubacimo heading 1 3. Ubacimo 2 paragrafa 4. Ubacimo 3 linka
1. Ubacimo naslov 2. Ubacimo heading 1 3. Ubacimo 2 paragrafa 4. Ubacimo 3 linka
1. Ubacimo naslov 2. Ubacimo heading 1 3. Ubacimo 2 paragrafa 4. Ubacimo 3 linka
Ostali elementi koje možemo da dodamo kroz Dreamweaver • • Slika Tabela
Hajde da probamo!
Dovoljno smo naučili za osnovnu prvu stranu! : -)
Скачать презентацию Medi Art Kurs iz Web Dizajna
709d099fe07c6660ba21fe07ab60c99f.ppt