Treći čas – Formatiranje teksta

Dragan Filipović Korak po korak, Kurs Comments (0)

Elementi za rad sa tekstom su:

  • p – paragraf
  • h1, h2, h3 … h6 – naslovi
  • span – delovi paragrafa
  • strong, em – bold i italic tekst.
  • br – prekid paragrafa.
  • Tekst može da se nalazi ivan ovih elemenata, npr u DIV tagu

Formatiraćemo text u četvrtom redu – futeru.

Ukucajte neki tekst u futer, npr. Copyright blabla.com, Dizajnirao/la Pera Perić.

Tekst se nalazi u futeru, pa ćemo u CSS-u taj deo formatirati, odnosno dodavaćemo osobine #treci-red

color – boja teksta  - npr color:blue ili color:#cc9900 

font-family – font – odnosno familija fontova – definiše 3 fonta, ukoliko korisnik nema prvi font koristiće drugi, ukoliko nema drugi koristiće neku vrstu trećeg fonta. Treći font je Serif (font sa malim ivicama na krajevima slova) ili Sans-Serif (font bez ivica na kraju slova).

npr: font-family:Tahoma, Geneva, sans-serif;

font-weight – debljina fonta npr: font-weight:bold;

font-style – stil fonta; npr: font-style:italic;

font-size – veličina fonta npr. font-size:16px;

text-align – poravnjanje teksta (levo, desno, centar, justify) npr text-align:center;

text-transform – transformacija teksta (sva velika slova, mala ili svako prvo slovo veliko) npr text-transform:capitalize;

line-height -visina linije teksta npr: line-height:60px;

Tekst je centriran vertikalno u odnosu na svoju visinu linije, ukoliko želimo da tekst centriramo vertikalno u futeru stavićemo da je visina linije jednaka visini futera. Ukoliko imamo više redova teksta ovo ne može da funkcioniše jer će razmak između redova diti 60px.

Finalni format

#futer {
	background-image:url(../images/futbg.gif);
	background-repeat:repeat-x;
	height:60px;
	color:#FFF;
	font-family:Tahoma, Geneva, sans-serif;
	font-style:italic;
	font-size:16px;
	text-align:center;
	text-transform:capitalize;
	line-height:60px;
}

 

<div id="futer">Copyright blabla.com, Dizajnirao/la Pera Perić</div>

 Pogledajte vaš sajt.

Paragraf

 Za ostale vežbe koristićemo lorem ipsum tekst za vežbanje. Tekst ćemo staviti u treći red. Uvek kada radimo sa tekstom koristimo DIZAJN deo DW. 

<div id="treci-red">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</p>
  </div>

 Kada u Dizajn delu ukucamo neki tekst i stisnemo ENTER kod za paragraf p  se automatski stavlja oko teksta. U Ovom primeru imamo dva paragrafa. Ukoliko želimo da formatiramo sav tekst u trećem redu taj format bi dodali #treci-red.

Ukoliko želimo da samo jedan paragraf ima neki format onda taj paragraf mora da ima svoju klasu. U CSS-u napravimo novu klasu .bitan-tekst

.bitan-tekst {	
	color:#F00;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	font-size:14px;
	text-align: justify;
}

 U HTML-u paragrafu dodamo napravljenu klasu.

Klasu ili ID elementima dodajemo uvek u otvarajućem tagu. Stanemo mišem nakon imena taga (u ovom slučaju nakon p) i stisnemo SPACE. DW nam nudi listu u kojoj izaberemo class, dobićemo spisak svih klasa koje smo napravili u CSS-u i izaberemo željenu klasu.

p-klasa   

 

text-class

 

 

U kodu dobijamo

  <p class="bitan-tekst">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p>

 Ovako dodajemo klasu ili ID bilo kom elementu na sajtu.

SPAN

Ukoliko želimo da određeni deo paragrafa formatiramo drugačije koristimo SPAN elemente. Prvo napravimo format za taj deo teksta.

.istaknuto {
	color:#00CC66;
	background-color:#FFFF66;
}

 Zatim selektujemo tekst koji želimo da drugačije formatiramo i u Properties baru izaberemo klasu koju smo napravili.

span

 

U kpdu ćemo dobiti span element sa izabranom klasom

<span class="istaknuto">. Duis tincidunt </span>

 Naslovi

Naslovi se mogu praviti od bilo kog taga za tekst ali je preporučljivo koristiti h1, h2, h3 .. tagove. h1 za najbitniji naslov, h2 za ostale naslove, h3 za podnaslove isl.

Tekst koji treba da bude naslov mora biti u novom redu, pa ćemo prvo od prvih nekoliko reči drugog paragrafa napraviti novi red. tanemo mišem nakon nekoliko reči i stisnemo enter.

icitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p>
    <p>Pellentesque habitant morbi </p>
    <p>tristique senectus et netus et

 HEADINGS tagovi -h1, h2, h3 – stanemo mišem u red od koga želimo da napravimo naslov i u Properties baru u polju Format izaberemo Heading 3.

heding

 

U koduje tag p prešao u tag h3

<h3>Pellentesque habitant morbi </h3>

 Naslov ćemo formatirati u CSS-u.

ELEMENT Selektor

Pri postavljanju glavne pozadine sajta koristili smo CSS selektor ELEMENT. Odnosno ako u css-u kucamo ime elementa svi ti elementi će dobiti napravljeni format.

h3 {
 color:#FFFFFF;
 text-align:center;
 font-size:14px;
 text-transform:uppercase;
 font-family:"Courier New", Courier, monospace;
 font-weight:bold;
 line-height:37px;
 background-image: url(../images/naslov-green.png);
 background-repeat:repeat-x;
}

Kada napravimo format za naslov, uvek kada izaberemo neki red i pretvorimo ga u Heading 3, automatski će dobiti napravljeni format 

Pogledajte rezultat na vašem sajtu.

 

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.