Internetinių puslapių programavimas


Informatikos kursinis darbas.

Vilniaus gedimino technikos universitetas. Layout užduotis. CSS animacijos užduotis. DOM užduotis. Canvas užduotis. Naudota lietratūra. Kursinio projekto darbo , kompleksinio projekto sąžiningumo deklaracija.


Išpradžių buvo sunku suvokti pačią lentelę,nes pas mane užduotyje X reikšmė buvo duota 70% tai iškraipė mano lentelę jog nebeliko mėlynos bloko spalvos. Darant šią užduotį savo blokam priskyriau „id“ atitinkamai nuo bloku spalvos kokia turėtų būti, tačiau pradėjau daryti klaidas: visą stilizavau taip:

naudojau margin savybę jei priskirdamas reikšmes pikseliais. Toliau stilizuojant blokus bandžiau jų aukščius ir pločius stilizuoti atitinkamais procentais, man stilizavo tik plotį procentais aukštis nebuvo stilizuotas, todėl pakeičiau į pikselius, atidarius html failą visame naršyklės lange blokai atrodė išsidėstė gerai tačiau sumažinus langą plotis procentaliai sumažėjo ir „tilpo“ į sumažintą langą kuomet aukštis išliko toks koks koks buvo ir nebuvo reaguota į tai jog langas buvo sumažintas, kitaip sakant piksliai liko toki koki buvo. Tai pastebėjęs pakeičiau stilizaciją į: body {

Ištryniau visas margin savybes blokus suskirsčiau į float savybes atitinkamai pagal užduotį, aukščius taip pat pakeitęs į procentus (pločiai jau buvo suskirstyti procentais). Tuomet kodas supaprastėjo, beliko tik priskirti opacity savybę atitinkamams blokams, kas nebuvo sunku.

sukurti blokus nebuvo sunku, įgijęs žinių po pirmos IPP užduoties šia atlikau gan greit. Susikūriau tris

blokus jiems priskryriau tris atskirus id:

Blokus pavadinau taip kaip pavaizduota paveikslėlyje. Šiuos blokus stilizavau: priskyriau aukščius, pločius, pakeičiau background‘o spalvą, kad lengviau būtų pastebėti blokus, bei su float ir margin nustačiau kurioje vietoje jie turėtų būti:

Pirmoje animacijos užduotyje man reikėjo padaryti taip, jog tekstas atslinktų iš kairės ir sumažėtų iki reikiamo dydžio (animacija vykdoma po 2 sec). Aš panaudojau hover selektorių, jis atlieka animaciją tik tada kai ant bloko yra užvedama pelės žymekliu:

-webkit-animation: mymove 1s; -webkit-animation-fill-mode: forwards; margin: 0px;

Ši animacija bus vykdoma po 2s: (animation-delay: 2s;) animacija pavadinimu mymove užtruks 1 sekundę ir bus vykdoma iš šono(į priekį): -webkit-animation-fill-mode: forwards;

Internetinių puslapių programavimas. (2016 m. Kovo 13 d.). http://www.mokslobaze.lt/internetiniu-puslapiu-programavimas.html Peržiūrėta 2016 m. Gruodžio 08 d. 16:32