glava
     

Cilji vaje:

  • vstaviti sliko v spletno stran,
  • spremeniti lastnosti slike v spletni strani,
  • poravnati sliko z besedilom na spletni strani,
  • uporabljati oblike zapisa za slike, ki jih lahko uporabljamo na spletni strani,
  • dodati sliko za ozadje.

Prikazovanje slik na spletni strani  

Na spletni strani se slike pojavljajo kot ločene datoteke. Slike niso del kode HTML, temveč so samostojne datoteke, ki jih spletni pregledovalnik med ogledovanjem spletne strani vstavlja v spletno stran. Ker je Nvu vizualni urejevalnik, ki zmore spletno stran med izdelovanjem prikazati skoraj v enaki obliki kot na spletu, lahko vse slike vidimo prikazane že v dokumentnem oknu programa.

Nov prazen dokument shranimo v isto področje, kamor smo si shranili prvi dve datoteki z imenom merjenje_casa.html. Dodelimo ji ime Merjenje časa. V mapi gradivo poiščimo datoteko merjenje_casa.doc in jo odprimo. Označimo si vse besedilo v datoteki in ga kopirajmo v odložišče. Sedaj se postavimo v naš nov dokument in z lepljenjem vstavimo besedilo.

s

V pripravljen dokument bomo vstavili sliko. To storimo tako, da vrivnik postavimo na mesto, kamor želimo vstaviti sliko. V našem primeru bo to pred tekst Čas, v katerem..

s

Sliko lahko vstavimo na dva načina in sicer z menijskim ukazom Vstavi>Slika. ali pa z gumbom Slika v orodni vrstici.

s

s

Preden pa vstavimo sliko si skopirajmo mapo slike v gradivih v mapo www. V oknu Lastnosti slike, ki se nam odpre, je potrebno v polje Mesto slike določiti mesto, kjer se nahaja slika. Mesto lahko vpišemo ali pa ga izberemo s klikom na gumb Izberi datoteko. Poiščemo in izberemo sliko nihalne ure v mapi vaja3 z imenom ura1.gif in vstavljanje slike potrdimo s klikom na gumb OK. V polje nadomestno besedilo vpišimo Nihalna ura. V brskalnikih je mogoče izključiti prikazovanje slik in v takem primeru se na mestu slike izpiše tekst, ki opisuje sliko. Slabovidne osebe, ki za branje vsebine spletnih strani uporabljajo programe za sintezo govora, slik ne morejo videti. Spletni brskalnik z vgrajeno sintezo govora, berejo nadomestno besedilo slik. Če tega ni, pa preberejo kar slika. S klikom na gumb V redu potrdimo vstavljanje slike.

s

s

Spreminjanje lastnosti slike v spletni strani

Slika se v dokument vstavi v svoji originalni velikosti. Ko sliko označimo, se okrog nje izriše okvir z ročicami. S pomikanjem ročic lahko sliki spreminjamo velikost. Če sliko zmanjšamo, s tem ne zmanjšamo velikosti datoteke slike. Za to moramo uporabiti ustrezen grafični program.

V našem primeru bi sliko radi vstavili med dva odstavka besedila. Trenutno je slika vstavljena kar v besedilo. Privzeto se poravna k tekstu z lastnostjo poravnave Na dno, kar pomeni, da je spodnji rob slike poravnan s spodnjim robom vrstice teksta v kateri je vstavljena slika. Sliko bomo postavili tako, da se z vrivnikom postavimo pred in za sliko in pritisnemo Enter.

Če želimo sliko poravnati na sredino, jo moramo izbrati, nato pa uporabimo enega od ukazov za poravnavanje besedila. Lahko izberemo v meniju Oblika ukaz Poravnaj in nato izberemo še ustrezno poravnavo, sredinsko, ali pa uporabimo gumbe za poravnavo v vrstici za oblikovanje.

s

Poleg te slike bomo v dokument vstavili še nekaj slik. Vse slike bomo vstavili med tekst in jih sredinsko poravnali. Našli jih bomo v mapi slike in sicer v podmapi vaja3. Sliko nihalne ure z utežmi z imenom ura2.gif bomo vstavili za odstavek Čas, v katerem se veliki minutni kazalec zavrti za 360°, imenujemo ena ura.. Sliki dodelimo tudi nadomestno besedilo Nihalna ura z utežmi.

s

s

Sliko štoparice z imenom ura3.gif bomo vstavili za odstavek V fiziki nas pogosto ne zanima, ob kateri uri se je pojav zgodil, ampak koliko časa je trajal. Trajanje pojava dobimo, da od končnega časa odštejemo začetni čas. Čas, v katerem se je pojav začel, poimenujemo začetni čas, čas v katerem se je pojav končal, pa končni čas.. Sliki dodajmo tudi nadomestno besedilo Štoparica.

s

s

Sliko budilke ura4.gif bomo vstavili za odstavek Štoparica je instrument za merjenje časovnih sprememb. Ob začetku pojava pritisnemo na gumb na štoparici in kazalec se začne vrteti. Ko je pojav končan, zopet pritisnemo na gumb, in kazalec se ustavi. Odčitamo, koliko časa je pojav trajal.. Sliki dodajmo tudi nadomestno besedilo Budilka.

s

s

Na koncu dokumenta pa bomo vstavili še sliko ročne zapestne ure ura5.gif, ki ji dodamo nadomestno besedilo Ročna zapestna ura.

s

s

V dokumentu naredimo še nekaj oblikovnih sprememb:

  • naslovu MERJENJE ČASA priredimo slog Naslov 1, obarvajmo ga modro z barvo #0000FF in mu dodelimo tip pisave Helvetica, Arial,
  • odstavke poravnajmo obojestransko,
  • določimo svetlo sivo barvo ozadja #EFEFEF.

Dokument shranimo z ukazom Shrani in spremeni kodiranje v Unicode (UTF-8) si ga oglejmo v brskalniku.

s

Poravnavanje slike z besedilom na spletni strani

Atribut poravnavanja nadzoruje poravnavanje predmetov v bližini slike s sliko. V meniju polja Poravnaj besedilo k sliki v oknu Lastnosti slike v izbiri Izgled določimo način poravnavanja elementov ob sliki s sliko. Prav tako ob sliki lahko dodamo prazen prostor, ki sliko ločuje od ostalih predmetov.

s

Vrednosti poravnavanja predmetov v bližini slike s sliko lahko izbiramo med:

  1. Na dno - spodnji rob slike se poravna s spodnjim robom elementa. To je privzeta vrednost. Prva vrstica besedila je poravnana s spodnjim robom slike. Če bi bilo besedila pod sliko več, bi se prelilo pod sliko.
  2. Na vrh - sliko poravna z najvišjim elementom. Dodatne vrstice besedila pa se prelijejo pod sliko.
  3. Na sredino - element poravna na sredino slike. Dodatne vrstice besedila pa se prelijejo pod sliko.
  4. Oblij ob desni - Sliko poravna levo glede na preostale elemente.
  5. Oblij ob levi - Sliko poravna desno glede na preostale elemente.

Ne pozabimo, da se možnosti poravnavanja vedno nanašajo na sliko, čeprav v resnici vplivajo na elemente ob slik.

Če želimo sliko odmakniti od drugih elementov, to storimo tako, da vpišemo vrednost odmika v pikah v polja Razmik. Tako nastavljeni odmik se v horizontalni smeri nastavi levo in desno od slike, v vertikalni smeri pa nad in pod sliko. V polju Poln okvir nastavimo obrobo slike.

Da preizkusimo povedano si ustvarimo nov prazen dokument. Shranimo ga v področje, kamor smo shranili ostale datoteke z imenom ure.html in ga poimenujmo z imenom Ure. V mapi gradivo odprimo datoteko ure.doc in si prekopirajmo ves tekst v naš dokument.

s

V dokument bomo vstavili še slike, ki se nahajajo v mapi slike. Izberemo mapo vaja3 in vstavimo slike tako, da bomo tekst v dokumentu Slika: . zamenjali z enako poimenovano sliko. Slikam dodajmo še nadomestno besedilo po imenu datoteke.

s

Slike bomo še poravnali k tekstu. Sliko soncnaUra.gif prestavimo pred odstavek Izdelamo si lahko . tako, da jo primemo z miško in jo odvlečemo na želeno mesto. Z desnim klikom na sliko odprimo priročni meni in izberimo ukaz Slika Lastnosti. V oknu Lastnosti slike ji v izbiri Izgled dodelimo poravnavo Oblij ob desni in nastavimo v polju Poln okvir obrobo debeline 1 piko. Med sliko in besedilom dodajmo še horizontalni razmik velikosti 10 pik tako, da v polje Levo in desno vpišemo vrednost 10.

s

Nadalje prestavimo sliko peščena ura pred tekst Za izdelavo peščene ure potrebujemo. in ji nastavimo privzeto poravnavo Na dno.

s

Sliko vodnaUra1.gif prestavimo pred besedilo Namesto peščene ure si lahko izdelamo. in ji nastavimo lastnost poravnave Oblij ob levi.

s

Sliko vodnaUra2.gif poravnajmo na sredino.

s

Sliko svecnaUraUmerjanje.gif prestavimo pred tekst Izdelamo lahko tudi svečno uro. in ji nastavimo poravnavo Na dno.

s

Sliko svecnaUra.gif prestavimo na konec besedila .z njo merimo čas. Če število bucik pomnožimo z 10 min dobimo, koliko časa bo sveča gorela.. Nastavimo ji poravnavo Na vrh

Sliko nihalnaUra1.gif prestavimo na konec besedila .pada in poganja nihalo. Po nekaj dneh je treba utež spet dvigniti. in ji nastavimo poravnavo Na vrh.

s

s

V HTML kodi ne moremo elegantno pisati matematičnih enačb. Zato si največkrat pomagamo tako, da enačbo napišemo v programu, kjer je to mogoče, si posnamemo sliko te enačbe in jo vstavimo v spletno stran.

Mi si bomo sliko naše enačbe enacba.gif poravnali na sredino. Enako bomo sredinsko poravnali tudi zadnjo sliko nihalnaUra2.gif.

s

Uporaba oblike zapisov za slike, ki jih lahko uporabljamo na spletni strani

Slike, ki jih uporabljamo v spletnih straneh morajo biti v ustreznem formatu, da je njihova velikost čim manjša ob še ustrezni kvaliteti. S tem dosežemo, da se slike po medmrežju prenašajo hitro. Ustrezni formati slik za spletno uporabo so:

  1. GIF - je primeren za slike, ki ima veliko enobarvnih vzorcev in ostre prehode, npr. risbe, tekst.
  2. JPEG - je primeren za slike, ki nimajo vzorcev iste barve, ki imajo barvne prehode, npr. slike, fotografije.
  3. PNG - je format, ki je bil razvit za spletno uporabo.

V naši datoteki oblikujmo še tekst in ji nastavimo barvo ozadja:

  • naslovu URE dodelimo slog Naslov 1, modro barvo #0000FF in pisavo Helvetica, Arial,
  • podnaslovom Sončna ura, Peščena ura, . dodelimo slog Naslov 3, oranžno barvo #FF9900 in pisavo Helvetica, Arial,
  • odstranimo odvečne prazne vrste tako, da se postavimo v vrsto in jih pobrišemo s tipkama Backspace ali Delete,
  • odstavke, ki vsebujejo več vrst besedila, obojestransko poravnamo,
  • umaknimo zadnje tri vrste besedila,
  • označimo celoten dokument in nastavimo barvo ozadja na #EFEFEF.

Na koncu dokument ure.html še shranimo, mu spremenimo kodiranje znakov v Unicode (UTF-8) in si ga ogledamo v brskalniku.

s s

Dodajanje slike za ozadje na spletni strani

V ozadje spletni strani lahko namesto barve postavimo tudi sliko. Pomembno je, da izberemo tako sliko za ozadje, ki dopolnjuje obliko spletne strani. Nekatere slike niso primerne za postavitev v ozadje.

Sliko v ozadje spletne strani postavimo tako, da v meniju Oblika izberemo Barve strani in ozadje., nato pa v polje Slika za ozadje: vpišemo mesto, kjer se nahaja slika za ozadje ali pa mesto izberemo z gumbom Izberi datoteko..

s

s

Izdelajmo si spletno stran, kateri bomo postavili sliko za ozadje. Odprimo si novo prazno datoteko. Datoteko poimenujmo anekdota.html in jo shranimo na mesto, kamor smo shranili ostale datoteke. Stran poimenujmo Anekdota. V mapi gradivo poiščimo in odprimo datoteko z imenom anekdota.doc, označimo si vse besedilo in si ga kopirajmo v naš dokument anekdodat.html.

s

Na mestu napisa Slika: Budilka vstavimo sliko z imenom budilka.gif, ki se nahaja v mapi vaja3 med slikami. Sliki budilka.gif dodajmo nadomestno ime Budilka, poravnajmo jo na sredino in ji nastavimo obrobo debeline 1 piko.

s

Oblikujmo še naslov Anekdota tako, da mu spremenimo slog v Naslov 1 in tip pisave v Helvetica, Arial, priredimo pa mu tudi modro barvo #0000FF. Odstavek besedila Janezkov oče je . pa obojestransko poravnajmo.

Dodajmo še sliko za ozadje. V meniju Oblika izberimo ukaz Barve strani in ozadje. in z gumbom Izberi datoteko. v izbiri Slika za ozadje: pokažimo mesto, kjer se nahaja slika za ozadje slike>vaja3 in izberimo sliko z imenom ozadje.gif.

s

Dokument shranimo, mu dodelimo kodiranje znakov Unicode (UTF-8) in si ga oglejmo v brskalniku.

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh