BAZA ZNANJA

Kurs: --- Adobe Dreamweaver CS5.5

Modul: Tekst i tipografija

Autor: Vuk Ninić

Naziv jedinice: Osnovni tekst tagovi

Osnovni tagovi stranice - block vs. inline

Već smo pomenuli osnove HTML tagova i strukture. Pre nego što krenemo sa kreiranjem sadržaja i formatiranjem, moramo napomenuti dva tipa gradivnih elemenata.

Postoje block i inline tagovi. Iako su svi tagovi deo šire strukture, block elementi se pojavljuju kao pravougaoni objekti koji zauzimaju maksimalnu širinu, a njihova širina i visina može se postavljati nezavisno od drugih susednih elemenata. Nasuprot njih, inline elementi se predstavljaju kao deo toka teksta, i ne mogu imati svoju visinu širinu, niti se prelamati kroz više linija teksta. Najlakše je zamisliti inline elemente kao jedan karakter, kao jedno slovo teksta.

Neki od najčešće korišćenih block elemenata su:

• Paragrafi: p
• Naslovi (Heading): h1, h2, h3, h4, h5, h6
• DIV tagovi: div
• Liste (uređene, neuređene): ol, ul

Neki od najčešće korišćenih inline elemenata su:

• Boldiranje teksta: strong
• Slika: image
• Deo teksta: span
• Link (Anchor): a

Da podsetimo, svi ovi elementi, iz obe grupe, jesu tagovi, samo se drugačije manifestuju. Kasnije ćemo se u lekcijama pozabaviti gradivnim elementima u okviru CSS Box modela.

Osnovni unos teksta

Ukoliko želimo da unosimo tekst direktno u DW, možemo to učiniti u design prikazu. Komande su slične drugim tekst editorima.

Na slici ispod vidimo otvorenu HTML stranu u split prikazu (code i design prikaz istovremeno). Unet je tekst koji se sastoji od tri paragrafa. Svaki paragraf je okružen p tagom koji smo ranije pominjali (<p>...</p>).

Iako tekst može stajati direktno u body, takvu praksu bi trebalo izbegavati. Pravilno je da postavimo p tag oko svakog paragrafa.

HTML strana sa unetim tekstom

Možemo raditi direktno u design prikazu i tada će svaki novi red (tast. enter) biti pretvoren u novi paragraf, tj. DW će sam kreirati tagove. Sa druge strane, možemo raditi u code prikazu i tu menjati tekst, ali onda moramo paziti na tagove, jer ukoliko slučajno obrišemo neki deo ili ceo tag, DW nas neće ispraviti i napravićemo grešku u kodu.

Ukoliko obratimo pažnju na properties panel, videćemo da nam prikazuje osobine i formatiranje paragrafa ili drugog elementa u kome se nalazi kursor. Za sada ćemo se pozabaviti samo HTML delom. Ukoliko je izabran CSS, klikom prebacite na HTML (slika ispod).

HTML / CSS formatiranje u Properties panelu

U properties panelu možemo pretvoriti paragraf u naslov (heading). Dovoljno je da postavimo kursor bilo gde unutar željenog paragrafa i da izaberemo neki od headinga iz padajućeg menija Format. Ne moramo selektovati ceo paragraf ručno (kao što bismo to radili u MS Wordu) već samo postaviti kursor unutar njega, jer se format padajući meni odnosi na ceo block elemenat. Slično pomenutom, možemo dodeliti ID ili klasu elementu, promeniti poravnanje i tako dalje.

Nasuprot tome, ukoliko želimo da paragraf, ili bilo koji drugi deo teksta postavimo u bold ili italic, moramo tačno selektovati željeni tekst i potom izabrati iz properties panela bold, odnosno italic. Ukoliko ne bismo selektovali, ništa se ne bi promenilo, jer DW ne bi znao na šta da primeni željeno formatiranje. Slično je i kada želimo da postavimo link na određeni tekst.

1. Formatiranje, odnosno izbor osnovnog formatiranja. Izbor je između:
   • None - ne postavlja nikakav tag.
   • Paragraf - osnovno formatiranje za standardni paragraf teksta <p>
   • Heading 1-6 - Izbor jednog od šest nivoa naslova. Heading 1 je naznačajniji, 6 je najmanje. <h1>, <h2>...<h6>
   • Preformatted - Slično paragraf formatiranju, ali postavlja <pre> tag koji se koristi za prikaz koda (obično monospace font).
2. Izbor identifikacione vrednosti (ID) koji želimo primeniti na izabrani element¹ . Trenutno je prazno jer nemamo učitanih CSS stilova, a samim tim ni dostupnih selektora
3. Izbor klase (Class) koju želimo primeniti na izabrani elemenat
4. Postavljanje bold formatiranja (<strong> ili <b>)
5. Postavljanje Italic formatiranja (<em> ili <i>)
6. Postavljanje neuređene (ul) liste
7. Postavljanje uređene (ol) liste
8. Dodavanje/uklanjanje blockquote elementa radi uvlačenja paragrafa <blockquote>
9. Hiperlink do stranice/fajla/elementa koji se postavlja na selektovan tekst. Možemo uneti link ručno u polje, prevući ikonicu linka (Point to File) do fajla u file panelu ili izabrati fajl klikom na folder ikonicu (Browse for File)
10. Title odnosno naslov linka (dostupno je samo kada je kreiran link)
11. Određuje kako će se otvoriti linkovani dokument (samo kada je kreiran link):
    • _blank  - učitava linkovani dokument u novom okviru/prozoru
    • _parent - učitava linkovani dokument u roditeljskom elementu strane u kojoj se nalazi link. Ukoliko se link ne nalazi u ugnježdenoj strani, učitava u punom prozoru.
    • _self - učitava linkovani dokument u istom prozoru gde se nalazi i link. Ukoliko izostavimo target, ova vrednost se uzima kao default.
    • _top - Učitava u punom prozoru, zanemarujući sve frejmove.
12. Putem ove opcije otvaramo dijalog za osnovna podešavanja strane. Vratićemo se na ovu opciju kad obradimo stilizaciju.
13. Izbor i podešavanja lista (dostupno samo kada je kreirana i selektovana lista).

Kopiranje teksta iz drugih programa (Paste special)

Ukoliko kopiramo iz notepada, ili sličnog programa koji ne poseduje nikakvo formatiranje, možemo koristiti standardno cut/copy/paste kopiranje teksta (Ctrl+x, Ctrl+c, Ctrl+v). U tom slučaju, pošto je tekst neformatiran, DW će ga prihvatiti kao plain (običan) tekst. Opcije za kopiranje možemo pozvati i putem padajućeg menija Edit ili desnim klikom miša na željenu lokaciju².

Sa druge strane, ukoliko pastujemo iz nekog programa koji i sam sadrži formatiranje i stilove (poput MS Worda i sličnih) ili sa web strane, jednostavno copy/paste bi unelo gomilu nepotrebnog koda. To formatiranje se onda sukobljava sa našim formatiranjem strane.

U tom slučaju, možemo koristiti paste special koji, za razliku od običnog paste, sadrži još jedan korak u kome određujemo kako i šta ćemo iskopirati, a šta odbaciti. Pomenutu funkciju pokrećemo slično kao paste, desnim klikom miša na poziciju gde želimo da iskopiramo i biranjem Paste Special.. ili pozivanjem istoimene opcije iz Edit padajućeg menija. Pojaviće nam se sledeći dijalog:

Paste Special dijalog

Postoje sledeće opcije:

• Text only - Samo tekst u bukvalnom smislu, svako formatiranje je izuzeto.
• Text with structure (paragraphs, lists, tables, etc) - Ova opcija će pored teksta ostaviti i naslove, pasuse, tabele, liste i drugo strukturno označavanje.
• Text with structure plus basic formatting (Bold, Italic) - Ova opcija će ostaviti Bold i Italic formatiranje pored elemenata iz prethodne stavke.
• Text with structure plus full formatting (Bold, Italic, Styles) - Ova opcija konvertuje fontove, boje i druge stilove u CSS fajl. Rezultat u Design prikazu je impresivan, ali CSS fajl je noćna mora. Preporučujem da ne koristite ovu opciju. Mnogo je bolje izabrati Text with structure plus basic formating, pa urediti svoj CSS,

kao i dve dodatne opcije:

• Retain line brakes - Ovaj checkbox nam omogućava da odredimo da li će se line breaks (br) sačuvati ili ne.
• Clean up Word paragraph spacing - Ova opcija izbacuje ekstra liniju između paragrafa u tekstu dodatom iz Microsoft Worda.

U ranije pomenutom Preferences panelu (Edit > Preferences...), u grupi Copy/Paste možemo postaviti default ponašanje opcije Paste. Ova podešavanja su potpuno ista kao u prethodno pomenutom Paste Special dijalogu, ali odnose se na običan Paste. Tako možemo podesiti da neka od varijanti iz Paste special zameni standardni Paste.

Osnovna podešavanja za copy/paste

Unos MS Word i Excel fajlova

Dreamweaver može uvesti (import) Word i Excel fajlove izborom opcije iz padajućeg menija File > Import > Word Document... odnosno Excel Document...

Pojavljuje nam se, zatim, standardni dijalog za izbor fajlova, sa tom napomenom da se u donjem delu mogu podesiti opcije uvoza, kao kod Paste special. Kursor mora biti postavljen u dizajn prikazu.

Uvoz fajlova

Ove opcije neće biti dostupne ukoliko MS Office nije instaliran na računaru.

Osim uvoza fajlova, DW može i otvoriti HTML fajlove koje smo sačuvali u bilo kom programu, pa i u MS Wordu. U tom slučaju, po otvaranju fajla, možemo koristiti opciju iz padajućeg menija Commands > Clean Up Word HTML...

Pojavljuje nam se dijalog u kome možemo izabrati šta sve želimo da uklonimo od Word formatiranja. Preporuka je da se sve opcije ostave štiklirane.

Čišćenje (clean up) Word formatiranja