css Zen Garden je spletna stran (http://www.csszengarden.com/), na kateri lahko preizkusiš svoje znanje o oblikovanju spletnih strani. Pokazal vam bom, kako sem se naredil svoj stil za css Zen Garden.
Na spletna strani css Zen Garden (link zgoraj) kliknemo z desno tipko miške in nato izberemo "Pokaži izvorno kodo strani". (Slika 1) (to je pri Firefox-u, pri explorerju je pa "Ogled izvorne kode")
 |
| Slika 1 |
Odpre se nam okno z izvorno kodo strani (to je html vsebina). Besedilo prekopiramo in ga prilepimo v beležnico. Shranimo. (Slika 2)
 |
| Slika 2 |
Nato gremo na povezavo http://www.csszengarden.com/zengarden-sample.css in prekopiramo besedilo, ki nam je dano in ga prilepimo v novo beležnico. Shranimo. V mapi, v katero smo shranili naš css, kliknemo "Organiziraj" in nato "Možnosti mape in iskanja". (Slika 3)
 |
| Slika 3 |
V oknu, ki se nam odpre, gremo pod zavihek "Pogled", kjer odkljukamo kvadratek pri "Skrij pripone za znane vrste datotek". (Slika 4)
 |
| Slika 4 |
Tekstovno datoteko, ki vsebuje css, preimenujemo končnico iz .txt v .css. Npr.: iz primer3.txt, ga spremenimo v primer3.css. Nato obkljukamo kvadratek, ki smo ga prej odkljukali (Slika 4).
Z beležnico odpremo html datoteko. Na začetku beležnice spremenimo kodiranje (iz iso-8859-1 v utf-8) in malo nižje, pri @import, pa napišemo ime naše .css datoteke (Npr.: "primer3.css"). To pomeni, da kljub temu, da sta datoteka html in css ločeni, bo spreminjanje css datoteke vplivala na datoteko html. (Slika 5)
 |
| Slika 5 |
Preden začnemo urejeti našo css datoteko, pa si preberemo, kako se uporablja css, na spletni strani: http://www.w3schools.com/css/default.asp.
Ko končamo z urejanjem spletne strani css Zen Garden, jo pošljemo urednikom Zen Garden-a. Na spletni strani http://www.csszengarden.com/, desno spodaj kliknemo na povezavo "Submit a Design". (Slika 6)
Prikaže se nam obrazec, ki ga moramo izpolniti. Če pa česa ne vemo, potem kliknemo na vprašajček poleg praznega polja. Pri "Submission Preview" nam pove, da moramo na nek strežnik naložiti svojo .css datoteko. Jaz sem naložil na http://www.drivehq.com/. (Primer moje .css datoteke na internetu: https://www.drivehq.com/file/df.aspx/shareID7884427/fileID619152599/primer3.css ). Pri "Zip Archive URL" pa "zazipamo" našo .css datoteko in vse slike, ki smo jih uporabili, pri oblikovanju. (Primer: https://www.drivehq.com/file/df.aspx/shareID7884476/fileID619156780/csszengarden.zip). Pri "Your submission's title" pa preprosto vpišete naslov vaše strani. Primer: cssZenGarden. (Slika 7)
Pošljemo in večkrat preverimo, ali je naš "design" objavljen. Moj "design": http://www.csszengarden.com/?cssfile=https://www.drivehq.com/file/df.aspx/shareID7884427/fileID619152599/primer3.css
Viri:
- http://www.csszengarden.com/
Ko končamo z urejanjem spletne strani css Zen Garden, jo pošljemo urednikom Zen Garden-a. Na spletni strani http://www.csszengarden.com/, desno spodaj kliknemo na povezavo "Submit a Design". (Slika 6)
 |
| Slika 6 |
 |
| Slika 7 |
Viri:
- http://www.csszengarden.com/
Ni komentarjev:
Objavite komentar