1

Čas 2. Microsoft Expression Web – HTML

Posted by nemanja on July 2, 2011 in HTML

Na prošlom času smo videli kako možemo na lak i brz način napraviti kompletan web sajt bez upozavanja sa detaljnim načinom funkcionisanja samog sajta. Sada ćete naučiti kako sadržaj sajta možete menjati i preko koda.

HTML

U Expression Webu možete menjati sadržaj i preko HTML koda. Na donjem delu strane pored kartice Design postoje još dve kartice: Split i Code. Kliknite na Code kako biste videli sadržaj vašeg sajta iz HTML koda. Primetite da se ovaj kod sastoji od tagova (html, body, head, title…). Svaki tag ima sledeću formu <ime_taga atribut=”vrednost”>tekst</ime_taga>. Atribut se ne mora uvek navesti. Svaki html dokument mora imati početni <html>  i zavrsni </html> tag.

U okvitu njega se nalaze <head> i <body> tag.

Primer jednog html dokumenta:

<html>
 <head>
    <title>Ovo je naslov</title>
 </head>

 <body>
    Ovde dolazi sadrzaj.

 </body>

</html>

Sledeći tagovi mogu biti sadržani u <head> tagu: <title>, <base>, <link>, <meta>, <script>, i <style>.

Izdvojićemo sada najvažnije HTML oznake <body> taga:

Oznaka anchor(<a>)

Oznaka <a> kreira hiperlink koja podržava sedeće atribute:

         *  href      određuje URL adresu čiji će sadržaj biti učitan u web čitač, ova URL adresa može biti

             apsolutna ili relativna.

         *  target      određuje ime prozora u koji se učitava stranica.

Oznaka bold (<b>)

Oznaka <b> prikazuje tekst kao naglašen tekst.

<b>ovaj tekst je boldovan</b>

Oznaka break (<br>)

Oznaka <br> dodajte prelom linije (prelazak u novi red).

Oznaka font (<font>)

Oznaka <font> se koristi da odredi izgled teksta koji se nalazi između ovih oznaka. Ova oznaka podržava sledeće atribute:

          *  color      heksadecimalne vrednosti boja (kao što su: #FFFFFF ili #000000). Sledeća linija, na

              primer kreira tekst čija su slova crvene boje:

              <font color=”#FF0000″>ovaj tekst je crvene boje</font>

          *  face      ovaj atribut određuje ime fonta koji se koristi.

          *  size      ovaj atribut određuje veličinu fonta, u pikselima.

Oznaka italic (<i>)

Oznaka <i> prikazuje iskošena slova.

Ovo je <i>važno</i>.

Prethodni primer bi prikazao tekst na sledeći način.

Ovo je važno.

Oznaka List Item (<li>)

Oznaka <li> postavlja znak za nabrajanje ispred teksta.

Lista kućnih aparata:

<li>televizor</li>

<li>frižider</li>

<li>klima uređaj</li>

Prethodni kod bi prikazao ovaj tekst na sledeći način

Lista kućnih aparata:

    • televizor

    • frižider

    • klima uređaj

Oznaka paragraph (<p>)

Oznaka <p> kreira novi pasus u tekstu.

Oznaka underline (<u>)

Oznaka <u> vrši podvačenje teksta označenog ovim znakom.

Ovaj tekst je <u>podvučen</u>.

Prethodni primer bi prikazao tekst na sledeći način.

Ovo tekst je podvučen.

Oznaka image (<img>)

         *  src      Ovaj atribut određuje URL adresu slike.

         *  width      Ovaj atribut označava širinu prikazane slike u pikselima.

         *  height      Ovaj atribut označava visinu prikazane slike u pikselima.

Sada znamo osnove jezika HTMLa. Svaki element koji dodamo u design modu Expression Weba dodaje se i u html kodu i obrnuto. Na sledecem času upoznaćemo se sa jos nekim elementima html-a.

Tags: , , , ,

 
0

Čas 1. Microsoft Expression Web – šabloni, slike, tekst

Posted by nemanja on June 21, 2011 in Šabloni


Dobrodošli u Malu školu web dizajna! Nadamo se da ćete na naš entuzijazam ali i znanje nailaziti na svakom času.

Microsoft Expression Web je idealan alat kako za početnike u oblasti web dizajna, tako i za one koji se njime bave više godina. Ovaj alat omogućava kreiranje web sajtova na veoma lak način, neizostavljajući pritom funkcionalnost. Kao naslednik Fron Page-a, Expression Web vam sada omogućava dodavanje dinamičnih sadrzaja, CSS-a, kao i mogućnost kreiranja sajtova putem šablona.

Nadamo se da će vam ovaj kratak kurs biti od koristi u radu i da će vam pojednostaviti prelazak sa Fron Page-a na ovaj alat. Ako se, pak, prvi put susrećete sa Expression Webom, nadamo se da će vas ova škola uvesti u osnovu ovog moćnog alata. Uživajte!

Kreiranje novog web sajta

Ono što ćemo prvo uraditi sada je kreirati novi web sajt. Izaberite u gornjem meniju File> New...

General      Ukoliko projekat počinjete od početaka, ili pak želite da vas kroz izradu sajta vodi wizard, upotrebite ovu opciju i izaberete One Page Web Site (sajt koji sadrži samo jednu stranu), Empty Web Site (kompletan prazan web sajt) ili Import Web Site Wizard (implementiranje sajta preko čarobnjaka)

Templates     predstavlja već gotove sajtove koji se mogu prilagodjavati potrebama korisnika. Za primere ovog časa izaberite ovu opciju. U sredini prozora pojavljuje se spisak od 19 šablona. Klikom na šablon, na desnoj strani možete videti kako šablon izgleda. Odaberite Small Business 1 i kliknite OK.

Sada vidite spisak modula vašeg sajta. Svaki modul ima zaseban folder. Primetite da se na dnu nalazi fajl default.htm. To je početna strana vašeg sajta i mora imati ime default (u nakim slučajevima može se zvati i index). Kliknite dva puta na nju da biste videli njen sadržaj.

Primetite da ne možete menjati sadržaj cele strana. Kada pređete mišem preko određenih delova miš se pretvara u znak koji simbolizuje da je editovanje zabranjeno. Napomena: Trenutno je zabranjena izmena samo onih delova sajta koje sadrže sve strane. Kasnije ćemo videti kako se taj sadržaj može menjati.

Svaki tekst možemo menjati samim klikom na tekst. Ukoliko je tekst duži od strane, strana će se sama prilagoditi tekstu, odnosno povećavaće se ili će se smanjivati.

Sada želimo da promenimo sliku sa desne strane. Kliknite 2 puta na sliku i otvoriće vam se prozor Picture Properties. U kartici General izaberite Browse i izaverite sliku sa vašeg računara. Upišite alternativni tekst za slučaj da se slika ne prikaze (ukoliko se dogodi da greskom ne prebacite sliku ili iz nekog razloga browser ne može da je učita dobro je dodati alternativni tekst jer će se on onda naću umesto slike). Sada izaberite FileSave da biste zapamtili ovu stranu.

Sada želimo da promenimo i ostali sadržaj. Odnosno onaj koji nismo mogli do sada da menjamo. U listi Foldera sa leve strane nalazi se fajl master.dwt. Kliknite dva puta na ovaj fajl. Sada imate mogućnost menjanja sadržaja koji se nalazi u svakoj strani vašeg sajta. Na isti način kao u predhodnom slučaju možete menjati tekst i slike. Kada ste zavrsili sa izmenama sačuvajte ovu stranu.

Sada ćemo videti kako naša strana izgleda u browseru. Izaberite File> Preview in Browser i odaberite željeni browser.

To je to. Sada možete videti kako vas sajt izgleda u akciji, šetati se kroz vas sajt preko navigacionog menija. Vidite da nije teško raditi u Expression Webu. Na sledećem času videćemo kako se zapravo povezuju strane jednog web sajta, implementiraju YouTube video klipovi i upoznati se sa osnovama jezika HTML.

Tags: , , , , ,

Copyright © 2011-2014 Mala škola web dizajna All rights reserved.