Home-theater-designers
A webtervezés hozzáférhetőbb, mint valaha, de még mindig sok munka - és sok szakértelem - szükséges ahhoz, hogy professzionális megjelenésű eredményeket érjen el.
Szerencsére nem kell minden alkalommal a nulláról kezdeni. Több ezer ingyenes CSS -sablon érhető el az interneten, amelyek mindegyike magában foglalja a modern tervezési trendeket és technológiákat. Használhatja őket eredeti formájában, vagy testreszabhatja őket, hogy sajátja legyen.
Ebben az útmutatóban közelebbről megvizsgáljuk a CSS -sablonokat, és hol találjuk meg őket.
Mi az a CSS sablon?
A CSS -sablon nem csak CSS -t tartalmaz: mindent megad, amire szüksége van egy teljesen működő webhely létrehozásához. Letöltéskor általában egy mappát kap, amely a következőket tartalmazza:
- HTML fájlok - HTML-fájlt kap a webhely minden oldalához. Mintaszöveget és képeket fog tartalmazni, amelyeket le kell cserélnie saját tartalmára. Önnek képesnek kell lennie a metaadatok módosítására is, például a webhely leírásához.
- CSS fájl - Általában egy fő CSS-fájlt kap, amely tartalmazza a webhely összes stílusát, valamint minden olyan extrát, mint például a visszaállítási stíluslap, vagy egyet a webes betűtípusok esetében.
- Javascript fájl - Ha a webhely Javascript függvényeket tartalmaz, akkor ideális esetben a saját fájljukban kell szerepelniük, nem pedig a HTML-dokumentumokban.
- Képek, betűtípusok és ikonok - A sablonban használt képeket is bele kell foglalni. Érdemes megtartani például az ikonokat és a háttereket, de le kell cserélni a többi helyőrző képet a sajátjával. Néhány egyéni betűtípus is szerepelhet.
Ellentétben a legtöbb más típusú sablonnal, amelyekkel találkozhat - legyen az Wordpress, Excel vagy InDesign sablonok - A CSS-sablonok bizonyos technikai ismereteket igényelnek.
Nincs barátságos kezelőfelület a szerkesztéshez, ezért legalább tudnia kell, hogyan kell eligazodni egy HTML dokumentumban, csak saját tartalom hozzáadásához. Saját testreszabásához a CSS megfelelő ismerete szükséges.
hogyan lehet átalakítani a png -t pdf -be
Mit kell keresni egy CSS sablonban?
Nagyon sok ingyenes CSS -sablon közül lehet választani. Tehát honnan tudod, hogy melyik a megfelelő neked? Íme néhány dolog, amire figyelni kell:
- Tervezés - Nyilvánvalóan olyan webhelyet szeretne, amely jól néz ki, és tükrözi a megjeleníteni kívánt képet. De fontolja meg azt is, hogy a sablon megfelel -e az Ön igényeinek mind most, mind a jövőben. Sokan egyoldalas weboldalakhoz valók; néhányat több oldalra terveztek. Ha az utóbbira van szüksége, fontolja meg, hogy esetleg jobban járna -e, ha olyan CMS -t használna, mint a Wordpress.
- Mobilra optimalizált - A mobilweb-használat ma már magasabb, mint az asztali, ezért elengedhetetlen, hogy webhelye megfelelően működjön okostelefonokon. Minden tisztességes CSS -sablonnak reszponzív kialakítást kell használnia, hogy a webhely tökéletesen működjön bármilyen méretű képernyőn. Ha a választott nem, váltson olyanra, amely igen.
- Jól megírt - Töltse le a sablont, és nézze meg a kódot, mielőtt elkötelezi magát a használata mellett. Tiszta, jól felépített és könnyen szerkeszthető legyen. Ezenkívül SEO-tudatosnak kell lennie, a cím- és címsorcímkék helyes használatával.
- Engedély - Feltétlenül ellenőrizze a licencet a kiválasztott CSS-sablonhoz. Sok elérhető Creative Commons licenc alatt , de ennek a licencnek a különböző változatai határozzák meg, hogy szerkesztheti -e a sablont, használhatja -e kereskedelmi forgalomban, és hogy az eredeti tervezőt kell -e elismerni.
- Kiegészítések - Néhány CSS sablonfejlesztő „freemium” alapon ajánlja fel munkáját. A sablont ingyen kapja, de lehetősége van további testreszabásokért fizetni, hogy egyedivé tegye webhelyét.
Mindezt megmagyarázva nézzük meg az ingyenes CSS -sablonok legjobb helyeit.
1. Template.co
Ez a lenyűgöző, több mint 800 CSS -sablonból álló gyűjtemény stílusokat tartalmaz a webhely minden osztályához. Mindegyiket kifejezetten az oldalra hozták létre, így nem láthatja, hogy máshol felbukkannak.
Minden sablon reszponzív, és HTML5 -tel készült. Kisméretűek és könnyűek, extra Javascript -funkciókkal, például videofényládával vagy görgetési effektusokkal, csak ott használják, ahol valódi értéket adnak az élményhez.
2. Styleshout.com
A Styleshout ingyenes és prémium sablonok széles skáláját kínálja, az előbbi a Creative Commons licenc alatt jelent meg.
Az ingyenes sablonok a kategóriák széles körét lefedik, a teljes webhelyektől a Hamarosan megjelenő oldalakon, sőt a gyakran figyelmen kívül hagyott 404 -es hibaoldalon. Ön személyre szabhatja őket, és a meglévő webhely stílusához igazíthatja őket, vagy fizethet azért, hogy a Styleshout megtegye helyetted.
3. HTML5Up.net
Ez a szuper stílusos sablongyűjtemény szintén rendkívül népszerű. A legtöbbet több százezer alkalommal töltötték le, és könnyen belátható, hogy miért.
A webhelyek minden szokásos kategóriáját kiszolgálják, például a blogot és a termékoldalt, és vannak különösen szép tervek a fotósok számára, hogy bemutassák munkájukat. Az alap grid stílusú sablonok rendkívül testreszabhatók, míg a villanásosabbak inkább eléggé használják a Javascript-et, így kevésbé illeszkednek a beállításokhoz.
Négy. Freebiesbug.com
Amiből a Freebiesbugnak hiányzik a mennyisége, annál jobban pótolja a minőséget. Egy olyan webhely, ahol a fiatal fejlesztők bemutatják tudásukat, sok csúcskategóriás, prémium dizájnt tartalmaz.
A webhely lenyűgöző ingyenes sablongyűjteménye tökéletes az ügynökségek, fotósok, alkalmazásfejlesztők és más kreatívok számára. Javascript- és CSS -effektusokkal és animációkkal megpakolva testreszabhatja a webhelyeket, bár gyakran olyan szépek, hogy esetleg nem szeretné.
Ezenkívül a Freebiesbug.com mindenféle ingyenes erőforrást tartalmaz a webes tervezők számára, beleértve a betűtípusokat, stock fényképeket, Illustrator vázlatokat és PSD fájlokat, és így tovább.
5. Free-CSS.com
A Free-CSS.com egy egyszerű weboldal, amely az írás idején mintegy 2503 ingyenes sablont kínál, valamint rengeteg prémium sablont, ha még mindig nem találja meg, amit keres.
Mivel sok közül lehet választani, kissé nehéz lehet a tökéletes dizájn mellett dönteni. A minőség általában jó, bár a webhely 10 éves fennállása azt jelenti, hogy továbbra is XHTML-ben írt sablonokat tárol. Ezeket szeretné elkerülni. A másik dolog az, hogy ellenőrizze a választott sablon licencét. Ezek mind ingyenesek, de néhány közkincs, néhány Creative Commons, néhány pedig szerzőspecifikus licencet használ.
6. OS-Templates.com
28 oldal ingyenes CSS-sablon, többnyire modern, rácson alapuló elrendezéseket használva egyetlen oldalon. Ha az egyszerűre vágyik, akkor itt a helye. A formatervezés tiszta, vonzó és könnyen testreszabható.
Az OS-Templates.com az „alapvető sablonok” nagy gyűjteményét is kínálja. Ezek adják meg a webhely alapszerkezetét különféle népszerű elrendezési sémákban (kétoszlopos, háromoszlopos stb.), Miközben teljesen stílustalanok. A Wordpress alapértelmezett témájának használatához hasonlóan az üres vászon lehetővé teszi, hogy webhelyét bármivé alakítsa.
7. boag.online [Már nem elérhető]
A Maglev egy egyoldalas webhelysablon, amely lehet előnézetben a boag.online webhelyen .
Ez egy gyors, tiszta sablon, ideális a termékoldalakhoz. A minimalista dizájnt csak néhány Jquery -effektus egészíti ki, amelyek segítenek a szakaszok közötti görgetésben. Az egyszerű elrendezés önmagában működik, de kiváló kiindulópontot is nyújt a testreszabásokhoz.
8. Pixel Buddha
A Pixel Buddha sablonjai nem csak webhelyekre korlátozódnak, hanem tartalmaznak néhányat e -mail hírlevelekhez is.
Akárhogy is, mindegyiket HTML5 és CSS3 segítségével tervezték, és érzékenyek, így bármilyen eszközön jól mutatnak. A kiemelt témák közé tartozik a Howdy HTML, egy gyönyörű portfólió/önéletrajz sablon és a SOHO HTML, egy fantasztikus megjelenésű e -kereskedelmi oldal, amely tartalmazza a forrás PSD fájlokat a HTML és a CSS tetején.
a vezeték nélküli kapcsolat folyamatosan lecsökkenti az ablakokat 10
9. Templatemo.com
Közel 500 ingyenes sablon érhető el a Templatemo webhelyen. A legjobbak egyike azok, amelyek kiszabadulnak a Bootstrap stílusú rácsrendszerből, hogy valami mást kipróbálhassanak.
A sablonok többsége egyszerű és zökkenőmentes, bár olyan funkciók, mint a fénydobozok és a tartalmi körhinta, ott vannak, ahol szükség van rájuk. Szeretjük azt a tényt is, hogy számos sablon alapértelmezés szerint akár hat oldallal is működik. Ez megkönnyíti, ha tartalma nem illeszkedik az egyre gyakoribb egyoldalas elrendezéshez.
10. Startbootstrap.com
A Bootstrap egy hihetetlenül népszerű front-end keretrendszer, amely lehetővé teszi, hogy pillanatok alatt kiváló minőségű webhelyeket hozzon létre. Azonban egy kis időbe telik, amíg megtanulja, és itt jön a Start Bootstrap.
Ez az ingyenes, nyílt forráskódú sablonok gyűjteménye a Bootstrap rácsrendszerének felhasználásával készült. Több mint 30 közül lehet választani. Néhány teljesen tervezett, és alkalmazásokhoz, blogokhoz és céloldalakhoz készült, míg mások üres elrendezések, amelyek stílust várnak.
tizenegy. Bootswatch.com
Végül valami praktikusabb. A Bootswatch 16 nyílt forráskódú témát kínál a Bootstrap segítségével épített stílusú webhelyekhez.
A webhely elrendezését saját maga készítheti el a Bootstrap használatával, vagy töltse le az üres sablonok egyikét a Bootstrap indításából. A Bootswatch megváltoztatja a gombok, menük és egyéb elemek betűtípusát, háttérszíneit és stílusát. Egyedülálló megjelenést kölcsönöz webhelyének, miközben hű marad a Bootstrap rendkívül tiszta szellemiségéhez.
A Bootstrap segítségével könnyű összeállítani egy alap weboldalt, a Bootswatch pedig azonnali csiszolást biztosít.
A CSS sablonok használata
Nagy vonalakban kétféleképpen használhatjuk a sablonokat. Ezeket vagy a jelenlegi formájában használja, vagy a saját tervezésének alapjául használja.
A sablonok használata azzal a veszéllyel jár, hogy valaki más webhelyével azonos webhelyet kap. Válasszon egy népszerű sablont, és szó szerint több tízezer azonos webhely lehet. Ez a fő érv a testreszabás mellett.
hogyan lehet visszaállítani az iphone -t az iTunes nélkül a gyári beállításokra
A CSS -sablonok nagyszerű parancsikonok azoknak a tapasztalt webtervezőknek, akik alapvető elrendezést tartanak szem előtt, és egyenesen bele akarnak vágni a stílusba.
Tökéletesek azok számára is, akik még nem ismerik a webdesignot. Ha ismeri a HTML és a CSS körbejárását, de még nem rendelkezik önbizalommal vagy tudással ahhoz, hogy egy webhelyet a semmiből hozzon létre, akkor a CSS -sablon egyszerre egyszerű módja a nagyszerű megjelenésű webhely megszerzésének, és egy fantasztikus tanulási eszköz is.
Folyamatban lévő munkaként kezelheti. Kezdje el a betűtípusok kikapcsolása és a színséma megváltoztatása , és idővel újratervezheti a meglévő elemeket, újakat adhat hozzá stb. Nincs jobb módja annak, hogy bármit megtanuljunk, mint gyakorlati, gyakorlati tapasztalatokon keresztül.
Használ CSS sablonokat weboldalak készítésekor? Melyek a kedvenc helyei, ahol megtalálja őket? Ossza meg velünk tapasztalatait és tippjeit megjegyzésekben.
Részvény Részvény Csipog Email A Windows PC tisztítása a parancssor használatávalHa a Windows PC -n kevés a tárhely, törölje ki a szemetet ezekkel a gyors parancssori segédprogramokkal.
Olvassa tovább Kapcsolódó témák- Programozás
- Web Design
- CSS
Andy egy korábbi nyomtatott újságíró és folyóirat -szerkesztő, aki 15 éve ír a technológiáról. Ez idő alatt számtalan publikációban közreműködött, és szövegírási munkákat készített nagy technológiai cégeknek. Szakértő megjegyzéseket is adott a médiának, és paneleket vezetett az ipari rendezvényeken.
Továbbiak Andy Betts -tőlIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide