A css-editor működése és használata
A css-editor.org egy ingyenesen használható wyswyg stíluslap szerkesztő alkalmazás, immáron kiegészítve css3 kód generáló füllel, melyben csúszkák segítségével állíthatod a színátmeneteket, árnyékolást és a szövegek elforgatását is!
Használatával a böngészőben azonnal látható, hogyan fog az oldalad kinézni, majd az elkészült stíluslapokat és generált képeket letöltheted egy fájlban és használhatod az oldaladon.
Használatához nem szükséges a regisztráció!
Nézd meg a videót arról hogyan használd a css szerkesztőt!
A lementett css fájlokat vagy letöltöd egyben a zip-ben, vagy a kép tallózóból is megnézheted ha rákattintasz.
Amíg a munkameneted él addig elérhető minden amit csináltál!
Ha új url-t olvasol be akkor is rátöltődik az eddigi módosításod, így minden oldalad megformázhatod!
Használatához nem szükséges a regisztráció!
-
Első lépésként kattints a CSS Editor menüpontra, majd a beviteli mezőbe írd be az oldalad url-jét és kattints az Edit CSS gombra!
A szerkesztő be fogja tölteni az oldaladat ha be tudja olvasni. Egy javascript rá fog ülni és megnézi milyen linkelt stíluslapokat tartalmaz. Ezeket megkapod kiválasztásra egy lenyitható dobozban(select)!
-
Második lépésként válaszd ki melyik CSS fájl kell neked, vagy ha csak egy van, azonnal módosíthatsz is!
Egy-egy elemre kattintva a zöld doboz felső sávjában megjelenik a class vagy id vagy az element neve, ekkor a sáv melletti szerkeszt gomra kattintva(
) megkeresi neked a program a css-edben van-e ilyen vagy ehhez hasonló!
-
Új class-t adhadsz hozzá a hozzáadás gombra kattintva(
), illetve megjelenítheted a definíciókat! A definíció listában a radió gomra kattintva betölti neked a program a kiválasztottat.
A css kézi szerkesztése gombra kattintva betöltheted a css forrást (
). Ha ezt lemented, az editor fel fogja dolgozni, ha a mégse gombra kattintasz, visszatölti a kézi módosítás előtti állapotot.
Minden módosítást visszavonhatsz a mindent visszavon gombbal, ekkor az eredeti lesz újra feldolgozva, így gondold meg hogy kell-e neked, mert elvész az összes módosításod!
Nézd meg a videót arról hogyan használd a css szerkesztőt!
A lementett css fájlokat vagy letöltöd egyben a zip-ben, vagy a kép tallózóból is megnézheted ha rákattintasz.
Amíg a munkameneted él addig elérhető minden amit csináltál!
Ha új url-t olvasol be akkor is rátöltődik az eddigi módosításod, így minden oldalad megformázhatod!
Amikor meg vagy elégedve a dizájnoddal, csak töltsd le a zip-et!
A stíluslapok letöltése után csomagold ki a zip-et és a css fájlokban az url-eket egy egyszerű keresés/csere módszerrel egy szövegszerkesztőben igazítsd a könyvtárszerkezetedhez.
A stíluslapok letöltése után csomagold ki a zip-et és a css fájlokban az url-eket egy egyszerű keresés/csere módszerrel egy szövegszerkesztőben igazítsd a könyvtárszerkezetedhez.
Rendszer feltételek:
FIGYELEM: jelenleg firefox 6-ban fejlesztem a css3 generátor miatt, így valószínűleg a többi böngészőben nem fog rendesen működni, de a generált css kód jó!
A szerkesztő csak IE8, Firefox ~3, és Google Chrome alatt működik rendesen, régebbi böngészők nem támogatják teljes mértékben a stíluslapok szerkesztését!
A javascriptnek engedélyezve kell lennie.
(Esetleg 7-es Explorer-ben a manuális szerkesztést tudod használni, de egy egy elemet kiválasztani már nem tudsz.)
Prototype-ot és Script.aculo.us-t használ, összeakadás más javascript könyvtárakkal előfordulhat, habár megpróbáltam ezt kiküszöbölni, de nem garantálom, hogy minden esetben rendben van.
A következő fejlesztés az lesz, hogy egy oldal html kódját megadhatod, és azon dolgozhatod majd fel a css-eket, de erre még egy kicsit várnod kell!
FIGYELEM: jelenleg firefox 6-ban fejlesztem a css3 generátor miatt, így valószínűleg a többi böngészőben nem fog rendesen működni, de a generált css kód jó!
A szerkesztő csak IE8, Firefox ~3, és Google Chrome alatt működik rendesen, régebbi böngészők nem támogatják teljes mértékben a stíluslapok szerkesztését!
A javascriptnek engedélyezve kell lennie.
(Esetleg 7-es Explorer-ben a manuális szerkesztést tudod használni, de egy egy elemet kiválasztani már nem tudsz.)
Prototype-ot és Script.aculo.us-t használ, összeakadás más javascript könyvtárakkal előfordulhat, habár megpróbáltam ezt kiküszöbölni, de nem garantálom, hogy minden esetben rendben van.
A következő fejlesztés az lesz, hogy egy oldal html kódját megadhatod, és azon dolgozhatod majd fel a css-eket, de erre még egy kicsit várnod kell!
