Kako koristiti ploču s tekstom na ploči svojstava CSS Dreamweavera

Ploča Dreamweaver Text sadrži zbirku opcija koje kontroliraju prikaz teksta na vašim stranicama. Možete pristupiti opcijama ploče teksta pomicanjem prema dolje po ploči svojstava dok ne dođete ispod opcija izgleda ili klikom na ikonu T na vrhu ploče.

Ploča teksta uključuje sljedeće opcije oblikovanja:

• Boja: Postavite boju teksta. Možete kliknuti dobro boju i odabrati boju, koristiti kapaljku za uzorkovanje bilo koje boje na zaslonu ili unijeti heksadecimalni kod boje u polje za boju. Ako unesete heksadecimalni kod boje, uključite početni znak funte (#).

• Font-Family: Definirajte obitelj fontova ili niz obitelji. Fontove možete dodati s lokalnog tvrdog diska ili iz Adobe TypeKit-a tako da odaberete Upravljanje fontovima na dnu padajućeg popisa i pokrenete dijaloški okvir Upravljanje fontovima.

  

• Stil fonta: Unesite Normalan, Kurziv ili Kosi. Međutim, kurziv i kosi rijetko se razlikuju u web-pregledniku, stoga se držite kurziva osim ako nemate poseban razlog za to.

• Varijanta fonta: promijenite tekst u mala slova. Pažljivo testirajte svoje dizajne jer ovaj atribut ne podržavaju svi preglednici.

• Težina fonta: Neka tekst bude podebljan odabirom Bold ili Bolder s padajućeg popisa. Također možete unijeti broj između 100 i 900 kako biste preciznije kontrolirali kako će se tekst podebljati. Da biste uklonili podebljano oblikovanje, odaberite Normalno ili Svjetlije.

• Font-Size: Definirajte veličinu teksta. Možete odabrati određenu brojčanu veličinu ili relativnu veličinu. Opcije veličine su piksel (px), točka (pt), pica (pc), postotak (%), em, rem, ex i ch. Pikseli, ems i postoci najčešće su korištene opcije za veličine teksta.

• Visina retka: Odredite visinu retka na kojem se nalazi tekst. Slično kao i veličina teksta, visinu retka možete odrediti na različite načine, uključujući piksele, ems i postotke. Dobra je praksa na webu dodati visinu reda jer povećanje prostora oko teksta olakšava čitanje na zaslonu računala.

• Poravnaj teksta: Poravnaj lijevo, desno, centrira ili poravnaj tekst klikom na odgovarajuću ikonu. Prva ikona, za Nasljeđivanje, je zadana. Na primjer, možete centrirati tekst u podnožju svoje web stranice uključivanjem Text-Align postavljenog na Center u definiciju stila koji primjenjujete na

  oznaku na dnu stranice.

• Text-Decoration: Odredite hoće li se tekst podcrtati, precrtati, prikazati precrtanim ili prikazanim s efektom treptanja. Također možete odabrati Ništa, što se često koristi za uklanjanje podcrtavanja iz povezanog teksta.

• Uvlaka teksta: Odredite koliko će tekst biti uvučen s lijeve strane stranice unosom broja u jednu od opcija veličine, kao što su pikseli, ems ili postoci.

Zašto toliko fontova?

Možda ste čuli da sada možete koristiti bilo koji font koji želite na svojim web stranicama, zahvaljujući najnovijoj verziji Cascading Style Sheets, CSS3. Ova izjava je točna, ali s nekim ograničenjima: Morate imati zakonsko pravo za objavljivanje fonta, a font mora biti smješten na web poslužitelju.

Kako biste osigurali da se vaš tekst pojavljuje onako kako namjeravate, Dreamweaver uključuje zbirke najčešćih fontova na Windows i Macintosh računalima. Ovi fontovi su grupirani u obitelji, kao što su

• Gotham, Helvetica Nue, Helvetica, Arial, sans serif

• Cambria, Hoeflerov tekst, Liberation Serif, Times, Times New Roman, Times i serif

Možete kreirati vlastite zbirke fontova pomoću dijaloškog okvira Upravljanje fontovima, kojem se pristupa odabirom opcije Upravljanje fontovima na dnu padajućeg popisa Font-Family na ploči Text na ploči CSS Designer.

Odjeljak Text-Shadow na ploči Text

Odjeljak Text-Shadow na ploči Text nudi alate za dodavanje sjena teksta, jedno od najnovijih CSS svojstava uključenih u CSS3 definiciju. Najpopularnije opcije su sljedeće:

• H-sjena: Dodajte sjenu svom tekstu na vodoravnoj osi. Prvo odaberite opciju veličine, a zatim unesite broj u polje. Na primjer, unesite 2px da biste dodali horizontalnu sjenu širine 2 piksela.

• V-sjena: Dodajte sjenu svom tekstu na okomitoj osi. Prvo odaberite opciju veličine, a zatim unesite broj u polje.

• Zamućenje: Kontrolirajte količinu zamućenja u sjeni. Što je broj veći, to je sjena više rasprostranjena ili zamagljena.

• Boja: Unesite heksadecimalni kod boje da biste odredili boju sjene ili upotrijebite kapaljku za uzorkovanje bilo koje boje na zaslonu.

  

Značajke na dnu ploče s tekstom, koje nisu tako uobičajene kao druge opcije ploče s tekstom, su sljedeće:

• Transformacija teksta: Promijenite velika i mala slova teksta. Opcije su Velika slova, Velika i Mala slova. Kliknite odgovarajuću ikonu da biste postavili ovo svojstvo.

• Razmak između slova : Definira količinu razmaka između slova. Opcije veličine su piksel (px), točka (pt), pica (pc), postotak (%), em, rem, ex i ch.

• Razmak između riječi : Definira količinu razmaka između riječi. Opcije veličine su piksel (px), točka (pt), pica (pc), postotak (%), em, rem, ex i ch. (Pogledajte prethodnu bočnu traku “Usporedba opcija veličine CSS-a.”)

• Razmak: Recite pregledniku kako rukovati prijelomima redaka i razmacima u bloku teksta. Vaše opcije su Naslijediti, Normalno, Nowrap, Pre, Pre-line ili Pre-wrap. Nowrap je posebno koristan jer sprječava odvajanje elemenata ako se moraju omotati kako bi stali unutar prozora preglednika ili drugog spremnika.

• Vertical-Align: Poravnajte umetnute elemente, kao što su tekst i slike, u odnosu na elemente koji ih okružuju. Možete postaviti brojčanu vrijednost ili odabrati Osnovna linija, Sub, Super, Top, Text-Top, Middle, Bottom i Text-Bottom.