 |
||
|---|---|---|
Cilji vaje:
Prikazovanje slik na spletni straniNa 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 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..
V vrstici za vstavljanje ali v meniju Insert uporabimo ukaz Image.
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.
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.
Spreminjanje lastnosti slike v spletni straniSlika 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:
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.
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.
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.
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.
Na koncu dokumenta pa bomo vstavili še sliko ročne zapestne ure ura5.gif, ki ji dodamo nadomestno besedilo Ročna zapestna ura.
V dokumentu naredimo še nekaj oblikovnih sprememb:
Dokument shranimo in si ga oglejmo v brskalniku.
Poravnavanje slike z besedilom na spletni straniAtribut 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.
Pri nastavitvah poravnavanja predmetov v bližini slike s sliko lahko izbiramo med:
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.
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.
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.
Nadalje prestavimo sliko peščena ura pred tekst Za izdelavo peščene ure potrebujemo. in ji nastavimo privzeto poravnavo Default.
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.
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.
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.
Uporaba oblike zapisov za slike, ki jih lahko uporabljamo na spletni straniSlike, 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:
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:
V naši datoteki oblikujmo še tekst in nastavimo barvo ozadja:
Na koncu dokument ure.html še shranimo in si ga ogledamo v brskalniku.
Dodajanje slike za ozadje na spletni straniV 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..
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.
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.
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.
Dokument shranimo in si ga oglejmo v brskalniku.
Navodila
|
||
| na vrh | ||
