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 Adobe Dreamweaver CS3 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.

V Adobe Dreamweaverju CS3 si izdelajmo nov prazen dokument. V meniju File izberemo New.. V oknu New Document izberemo Blank Page in tip strani HTML. Stran shranimo v isto področje, kamor smo si shranili prvi dve datoteki z imenom merjenje_casa.html.  V polju Title v orodni vrstici ji dodelimo 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 nov dokument in z lepljenjem vstavimo besedilo.

s

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

s

V vrstici za vstavljanje ali v meniju Insert uporabimo ukaz Image.

s

s

V oknu Select Image Source, ki se nam odpre, je potrebno v Išči v: določiti mesto, kjer se nahaja slika. Mi bomo slike našli v mapi slike in sicer v podmapi vaja3. Poiščemo in izberemo sliko nihalne ure z imenom ura1.gif in vstavljanje slike potrdimo s klikom na gumb OK.

s

Ko potrdimo vstavljanje slike, nas okno Image Tag Acceessibility Attributes pozove k vpisu opisa slike. Izpolnimo polje Alternate text: (opisno besedilo za sliko). V brskalnikih je mogoče izključiti prikazovanje slik in v takem primeru se na mestu slike izpiše tekst, ki opisuje sliko (Alternate text). Slabovidne osebe, ki za branje vsebine spletnih strani uporabljajo programe za sintezo govora, slik ne morejo videti. Spletni brskalnik z vgrajeno sintezo govora, bere nadomestno besedilo slik. Če tega ni, pa preberejo kar slika. Nadomestno besedilo slike je možno vpisati tudi v oknu z lastnostmi. Ko je slika izbrana, nadomestno besedilo vpišemo v pole Alt.

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. Ob izbrani sliki v oknu z lastnostmi vidimo lastnosti slike:

  • velikost v pikah v polju W (širina) in H (višina),
  • v polju Alt je nadomestno ime slike,
  • v polju Src je naveden vir, kjer se slika nahaja,
  • sliko lahko tudi poimenujemo,
  • ji določamo obrobe, poravnave.

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 Default, kar pomeni, da je spodnji rob slike poravnan s spodnjim robom vrstice teksta v kateri je vstavljena slika. Sliko bomo postavili v svoj odstavek tako, da se z vnosno črtico postavimo pred in za sliko in pritisnemo Enter, kot kaže slika 8.

Če želimo sliko poravnati na sredino, jo moramo izbrati, nato pa uporabimo enega od ukazov za poravnavanje besedila. Lahko izberemo v meniju Text Align (poravnava) in nato izberemo še ustrezno poravnavo, npr. levo, sredinsko ali desno, ali pa uporabimo gumbe za poravnavo v oknu z lastnostmi.

s

Poleg te slike bomo v dokument vstavili še nekaj slik. Vse slike bomo vstavili med odstavke 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., kot kaže slika 9. Sliki dodelimo tudi nadomestno besedilo Nihalna ura z utežmi.

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, če 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., kot kaže slika 10. Sliki dodajmo tudi nadomestno besedilo Štoparica.

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., kot kaže slika 11. Sliki dodajmo tudi nadomestno besedilo Budilka.

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

V dokumentu naredimo še nekaj oblikovnih sprememb:

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

Dokument shranimo in si ga oglejmo v brskalniku.

s

Poravnavanje slike z besedilom na spletni strani

Atribut poravnavanja (Align) nadzoruje poravnavanje predmetov v bližini slike s sliko. V meniju polja Align v oknu z lastnostmi določimo način poravnavanja elementov ob sliki s sliko.

s

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

  1. Default - privzeta vrednost, običajno je to osnovnica. Prva vrstica besedila je poravnana s spodnjim robom slike. Če bi bilo besedila pod sliko več, bi se prelilo pod sliko.
  2. Baseline - spodnji rob slike se poravna s spodnjim robom elementa.
  3. Top - sliko poravna z najvišjim elementom. Dodatne vrstice besedila se prelijejo pod sliko.
  4. Middle - element poravna na sredino slike. Dodatne vrstice besedila se prelijejo pod sliko.
  5. Bottom - element poravna na spodnjem robu slike, kot pri nastavitvi Baseline.
  6. TextTop - sliko poravna z najvišjim besedilom. Dodatne vrstice besedila se prelijejo pod sliko.
  7. Absolute Bottom - poravna spodnji rob najvišjega elementa s spodnjim robom slike.
  8. Absolute Middle - poravna srednji rob elementa s sredino slike.
  9. Left - sliko poravna levo glede na preostale elemente.
  10. Right - 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 sliki.

Če želimo sliko odmakniti od drugih elementov, to storimo tako, da vpišemo vrednost odmika v pikah v polji V space (vertikalni odmik) oz. H space (horizontalni odmik) v vrstici za oblikovanje. Tako nastavljeni odmik se v horizontalni smeri nastavi levo in desno od slike, v vertikalni smeri pa nad in pod sliko.

Da preizkusimo povedano, si ustvarimo nov prazen HTML dokument. Shranimo ga v področje, kamor smo shranili ostale datoteke z imenom ure.html in ga poimenujmo v orodni vrstici  v rubriki Title 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 gradivo in podmapi 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. V oknu z lastnostmi ji dodelimo v izbiri Align poravnavo Left (levo) in nastavimo obrobo debeline na 1 piko tako, da v polje Border (obroba) vtipkamo vrednost 1 in jo potrdimo z Enter. Med sliko in besedilom dodajmo še horizontalni razmik velikosti 10 pik tako, da v polje H space v oknu z lastnostmi vpišemo vrednost 10.

s

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

s

Sliko vodnaUra1.gif prestavimo pred besedilo Namesto peščene ure si lahko izdelamo. in ji nastavimo lastnost poravnave Right. Sliko vodnaUra2.gif poravnajmo na sredino. Sliko svecnaUraUmerjanje.gif prestavimo pred tekst Izdelamo lahko tudi svečno uro. in ji nastavimo poravnavo Baseline.

s

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 TextTop

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

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 imajo veliko enobarvnih vzorcev in ostre prehode, npr. risbe, tekst.
  2. JPEG - je primeren za slike, ki nimajo vzorcev iste barve, imajo pa barvne prehode, npr. slike, fotografije.
  3. PNG - je format, ki je bil razvit za spletno uporabo.

Adobe Dreamweaver CS3 nam omogoča nekatere obdelave slik, za polno optimizacijo pa bomo potrebovali grafični program. Adobe Dreamweaver CS3 omogoča zagon Adobe Fireworks CS3, če imamo seveda nameščen ta program. Program si podobno kot Adobe Dreamweaver prenesete iz spleta in ga 30 dni preizkusno uporabljate. Orodja za obdelavo slik ob izbrani sliki najdemo v oknu z lastnostmi v področju Edit. Sliki lahko:

  • nastavljamo ostrino,
  • nastavljamo svetlost in contrast,
  • jo obrezujemo,
  • optimiramo njeno velikost in barve,
  • jo obdelamo v Adobe Fireworks CS3.

s

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

  • naslovu URE dodelimo slog Heading 1, modro barvo #0000FF in pisavo Arial, Helvetica, sans-serif,
  • podnaslovom Sončna ura, Peščena ura, . dodelimo slog Heading 3, oranžno barvo #FF9900 in pisavo Arial, Helvetica, sans-serif,
  • 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 zadnji dve vrsti besedila,
  • nastavimo barvo ozadja na #EFEFEF.

Na koncu dokument ure.html še shranimo 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 za ozadje izberemo tako sliko, ki dopolnjuje obliko spletne strani. Nekatere slike niso primerne za to. V ozadje lahko sliko postavimo tako, da se prikaže le enkrat, lahko pa jo razpostavimo čez celotno spletno stran.

V oknu z lastnostmi ali pa v meniju Modify izberemo lastnosti strani (Page Properties.), nato pa v polje Background image: vpišemo mesto, kjer se nahaja slika za ozadje ali pa mesto izberemo z gumbom Browse..
V izbiri Repeat: nastavimo, kako naj se slika na strani prikaže:

  • no-repeat - slika se bo v ozadju pokazala samo enkrat,
  • repeat - slika se bo v ozadju razpostavila čez celo spletno stran,
  • repeat-x - slika se bo v ozadju razpostavila v horizontalni smeri,
  • repeat-y- slika se bo v ozadju razpostavila v vertikalni smeri.

s

Izdelajmo si spletno stran, kateri bomo za ozadje postavili sliko. Odprimo si novo prazno HTML datoteko. Poimenujmo jo anekdota.html in jo shranimo na mesto, kamor smo shranili ostale datoteke. V orodni vrstici v polje Title: vpišimo ime strani 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 gradivo>slike>vaja3. Sliki budilka.gif dodajmo nadomestno ime Budilka, poravnajmo jo na sredino in ji nastavimo obrobo debeline 1 piko.

V primeru, da je slika večje velikosti in bo njen prenos po medmrežju trajal dlje časa, si lahko pomagamo tako, da prikažemo najprej pomanjšano sličico slike, ko pa se slika v celoti prenese, pa se prikaže v polni velikosti. V takem primeru moramo pripraviti tudi manjšo sličico, v Adobe Dreamweaver CS3 pa v oknu z lastnostmi v polju Low Src vpišemo njeno mesto, lahko pa s klikom na ikono mape ob tem polju tudi izberemo vir, kjer se slika nahaja.

Mi bomo dodali v oknu z lastnostmi v polje Low Src datoteko budilka_m.gif, ki se nahaja v mapi gradivo>slike>vaja3.

s

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

Dodajmo še sliko za ozadje. V oknu z lastnostmi si odprimo okno Page Properties. in z gumbom Browse. v izbiri Background image: pokažimo mesto, kjer se nahaja slika za ozadje gradivo>slike>vaja3. Izberimo sliko z imenom ozadje.gif. V izbiri Repeat: označimo v meniju še repeat, kar bo pomenilo, da naj se slika razpostavi po celotni spletni strani. S klikom na gumb Apply si lahko predogledamo izgled spletne strani, s klikom na OK pa potrdimo postavitev slike v ozadje spletne strani.

s

Dokument shranimo 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