Home-theater-designers
Verkkosuunnittelu on helpompaa kuin koskaan, mutta se vaatii silti paljon työtä - ja paljon taitoa - tuottaakseen ammattimaisia tuloksia.
Onneksi sinun ei tarvitse aloittaa alusta aina. Netistä on saatavana tuhansia ilmaisia CSS -malleja, jotka kaikki sisältävät nykyaikaisia suunnittelutrendejä ja tekniikoita. Voit käyttää niitä alkuperäisessä muodossaan tai muokata niitä omiksi.
Tässä oppaassa tarkastelemme lähemmin CSS -malleja ja niiden löytämistä.
Mikä on CSS -malli?
CSS -malli ei sisällä vain CSS: ää: se antaa sinulle kaiken mitä tarvitset täysin toimivan verkkosivuston luomiseen. Kun lataat sellaisen, saat yleensä kansion, joka sisältää seuraavat:
- HTML -tiedostot - Saat HTML-tiedoston verkkosivuston jokaiselle sivulle. Se sisältää mallitekstiä ja kuvia, jotka sinun on korvattava omalla sisällölläsi. Sinun on myös voitava muokata sisällönkuvaustietoja, kuten sivuston kuvausta.
- CSS -tiedosto - Saat yleensä yhden CSS-päätiedoston, joka sisältää kaikki sivuston tyylit, sekä kaikki lisäominaisuudet, kuten nollaus-tyylitaulukon, tai yhden verkkokirjasimia varten.
- Javascript -tiedosto - Jos sivusto sisältää Javascript-toimintoja, ne tulisi mieluiten sisällyttää omaan erilliseen tiedostoonsa HTML-asiakirjojen sijasta.
- Kuvat, fontit ja kuvakkeet - Kaikki mallissa käytetyt kuvat on myös sisällytettävä. Voit halutessasi säilyttää esimerkiksi kuvakkeet ja taustat, mutta sinun on korvattava muut paikkamerkkikuvat omilla. Jotkut mukautetut fontit voivat myös olla mukana.
Toisin kuin useimmat muut mallityypit - Wordpress, Excel tai InDesign -malleja - CSS-mallit edellyttävät tiettyä teknistä tietämystä.
Niiden muokkaamiseen ei ole ystävällistä käyttöliittymää, joten sinun on tiedettävä ainakin, miten voit tutustua HTML -dokumenttiin vain oman sisällön lisäämiseksi. Omien mukautusten tekemiseen tarvitset kunnollisen CSS -tietämyksen.
kuinka poistaa sovelluksia samsung smart tv: stä
Mitä etsiä CSS -mallista
Valittavana on niin monia ilmaisia CSS -malleja. Joten mistä tiedät, mikä sopii sinulle? Tässä on muutamia huomioitavia asioita:
- Design - Haluat tietysti sivuston, joka näyttää hyvältä ja heijastaa mitä tahansa kuvaa, jonka haluat esittää. Mieti myös, sopiiko malli tarpeisiisi nyt ja tulevaisuudessa. Monet ovat yhden sivun verkkosivustoja; jotkut on suunniteltu useille sivuille. Jos tarvitset jälkimmäistä, harkitse, olisitko parempi käyttää CMS: ää, kuten Wordpressia.
- Mobiilioptimoitu - Mobiiliverkkokäyttö on nyt enemmän kuin pöytätietokonetta, joten on tärkeää, että sivustosi toimii oikein älypuhelimissa. Kaikissa kunnollisissa CSS -malleissa tulisi käyttää responsiivista suunnittelua, jotta sivusto toimii täydellisesti minkä tahansa kokoisella näytöllä. Jos valitsemasi ei, vaihda sellaiseen, joka tekee.
- Hyvin kirjoitettu - Lataa malli ja katso koodi ennen kuin sitoudut käyttämään sitä. Sen tulee olla puhdas, hyvin jäsennelty ja helppo muokata. Sen pitäisi myös olla SEO-tietoinen ja käyttää oikein otsikko- ja otsikkotunnisteita.
- Lisenssi - Muista tarkistaa valitsemasi CSS-mallin lisenssi. Monet ovat saatavilla Creative Commons -lisenssin alla , mutta tämän lisenssin eri versiot määrittävät, voitko muokata mallia, voitko käyttää sitä kaupallisesti ja onko sinun syytä mainita alkuperäinen suunnittelija.
- Lisäosat - Jotkut CSS-mallien kehittäjät tarjoavat työnsä freemium-periaatteella. Saat mallin ilmaiseksi, mutta sinulla on mahdollisuus maksaa lisämuokkauksista, jotta se olisi ainutlaatuinen sivustollesi.
Kun kaikki tämä on selitetty, katsotaanpa parhaita paikkoja löytää ilmaisia CSS -malleja.
1. Templated.co
Tämä upea kokoelma yli 800 CSS -mallia sisältää tyylejä jokaiselle verkkosivustoluokalle. Ne kaikki on luotu erityisesti sivustoa varten, joten sinun ei pitäisi nähdä niiden kasvavan muualla.
Kaikki mallit ovat responsiivisia ja rakennettu HTML5: llä. Ne ovat pieniä ja kevyitä, ja niissä on Javascript -lisäominaisuuksia, kuten videovalolaatikko tai vieritystehosteet, joita käytetään vain silloin, kun ne tuovat todellista lisäarvoa kokemukseen.
2. Styleshout.com
Styleshout tarjoaa laajan valikoiman sekä ilmaisia että premium -malleja, joista ensimmäinen julkaistiin Creative Commons -lisenssillä.
Ilmaiset mallit kattavat laajan valikoiman luokkia täydistä verkkosivustoista Tulossa -sivuille ja jopa usein unohdetun 404 -virhesivun. Voit muokata niitä itse ja mukauttaa ne olemassa olevan sivustosi tyyliin tai voit maksaa saadaksesi Styleshoutin tekemään sen puolestasi.
3. HTML5Up.net
Tämä erittäin tyylikäs mallikokoelma on myös erittäin suosittu. Useimmat on ladattu satoja tuhansia kertoja, ja on helppo nähdä miksi.
Kaikki tavalliset sivustoluokat, kuten blogi ja tuotesivu, on otettu huomioon, ja valokuvaajille on tarjolla erityisen hienoja malleja työnsä esittelemiseksi. Perusruudukkotyyliset mallit ovat erittäin muokattavissa, kun taas flashier-mallit käyttävät yleensä Javascriptiä melko voimakkaasti, joten ne voivat olla vähemmän sopivia säätöihisi.
Neljä. Freebiesbug.com
Mitä Freebiesbugilta puuttuu määrä, se korvaa enemmän kuin laatu. Sivusto, jossa nuoret kehittäjät esittelevät taitojaan, sisältää monia huippuluokan premium-malleja.
Sivuston vaikuttava kokoelma ilmaisia malleja on täydellinen virastoille, valokuvaajille, sovelluskehittäjille ja muille mainoksille. Pakattu Javascript- ja CSS -tehosteisiin ja animaatioihin voit muokata sivustoja, vaikka ne ovat usein niin mukavia, ettet halua.
Lisäksi Freebiesbug.com sisältää kaikenlaisia ilmaisia resursseja web -suunnittelijoille, kuten fontteja, arkistokuvia, Illustrator -luonnoksia ja PSD -tiedostoja ja paljon muuta.
5. Free-CSS.com
Free-CSS.com on yksinkertainen verkkosivusto, joka tarjoaa kirjoittamishetkellä noin 2503 ilmaista mallipohjaa sekä runsaasti premium-malleja, jos et vieläkään löydä etsimääsi.
Kun on niin paljon valittavia, voi olla hieman vaikea päättää täydellisestä suunnittelusta. Laatu on yleensä hyvä, vaikka sivuston 10 vuoden olemassaolo tarkoittaa, että se sisältää edelleen XHTML-kirjoitettuja malleja. Haluat välttää näitä. Toinen asia on varmistaa, että tarkistat valitsemasi mallin lisenssin. Ne ovat kaikki ilmaisia, mutta jotkut ovat julkisia, jotkut Creative Commons ja jotkut käyttävät tekijäkohtaista lisenssiä.
6. OS-Templates.com
28 sivua ilmaisia CSS-malleja, joissa käytetään enimmäkseen nykyaikaisia ruudukkoasetteluja yhdellä sivulla. Jos etsit yksinkertaista, tämä on oikea paikka etsiä. Mallit ovat puhtaita, houkuttelevia ja helposti muokattavia.
OS-Templates.com tarjoaa myös laajan kokoelman 'perusmalleja'. Nämä antavat sinulle verkkosivuston perusrakenteen erilaisissa suosituissa ulkoasumalleissa (kaksi saraketta, kolme saraketta jne.) Samalla kun ne ovat täysin tyylittömiä. Kuten Wordpressin oletusteeman käyttäminen, tyhjän kankaan avulla voit muuttaa sivustosi haluamaksesi.
7. boag.online [Ei enää saatavilla]
Maglev on yhden sivun verkkosivumalli, joka voi olla esikatselussa toiminnassa osoitteessa boag.online .
Se on nopea ja puhdas malli, joka on ihanteellinen tuotesivulle. Minimalistista muotoilua täydentävät vain muutamat Jquery -tehosteet, joiden avulla voit selata osioita. Yksinkertainen asettelu toimii itsenäisesti, mutta se on myös loistava lähtökohta omille mukautuksillesi.
8. Pixel Buddha
Pixel Buddhan mallit eivät rajoitu vain verkkosivustoihin, vaan ne sisältävät myös sähköpostitiedotteita.
Joko niin, ne kaikki on suunniteltu HTML5: llä ja CSS3: lla, ja ne ovat responsiivisia, joten ne näyttävät hyviltä millä tahansa laitteella. Kohokohtia ovat muun muassa Howdy HTML, kaunis portfolio-/ansioluettelomalli ja SOHO HTML, upean näköinen verkkokauppasivu, joka sisältää lähde -PSD -tiedostot HTML- ja CSS -tiedostojen päälle.
kuinka muuttaa kuvan taustaa Photoshopissa
9. Templatemo.com
Lähes 500 ilmaista mallia on saatavana Templatemosta. Jotkut parhaista ovat ne, jotka irtautuvat Bootstrap-tyyppisestä ruudukkojärjestelmästä kokeillakseen jotain erilaista.
Suurin osa malleista on yksinkertaisia ja siistejä, vaikka ominaisuuksia, kuten valolaatikoita ja sisältökarusellit, ovat mukana siellä, missä niitä tarvitaan. Pidämme myös siitä, että useat mallit on määritetty toimimaan oletuksena jopa kuuden sivun kanssa. Tämä helpottaa, jos sisältösi ei sovi yhä yleisemmälle yhden sivun asettelulle.
10. Startbootstrap.com
Bootstrap on uskomattoman suosittu käyttöliittymä, jonka avulla voit rakentaa korkealaatuisia verkkosivustoja hetkessä. Kuitenkin kestää jonkin aikaa oppia, mistä Start Bootstrap tulee.
Tämä kokoelma ilmaisia, avoimen lähdekoodin malleja on rakennettu Bootstrapin ruudukkojärjestelmän avulla. Valittavana on yli 30. Jotkut ovat täysin suunniteltuja ja tarkoitettuja sovelluksille, blogeille ja aloitussivuille, kun taas toiset ovat tyhjiä asetteluja, jotka odottavat tyyliä.
yksitoista. Bootswatch.com
Lopuksi jotain käytännönläheisempää. Bootswatch tarjoaa 16 avoimen lähdekoodin teemaa tyylisivustoille, jotka on rakennettu Bootstrapin avulla.
Voit joko rakentaa sivustosi ulkoasun itse Bootstrapilla tai ladata jonkin tyhjistä malleista Käynnistä Bootstrapista. Bootswatch muuttaa fonttien, taustavärien ja painikkeiden, valikoiden ja muiden elementtien tyylin. Se antaa sivustollesi ainutlaatuisen ilmeen ja pysyy uskollisena Bootstrapin erittäin puhtaalle eetokselle.
Perussivusto on helppo koota yhteen Bootstrapin avulla, ja Bootswatch antaa sille välitöntä kiillotusta.
CSS -mallien käyttäminen
Yleisesti ottaen malleja voidaan käyttää kahdella tavalla. Käytät niitä joko sellaisinaan tai käytät niitä oman suunnittelusi perustana.
Mallien käyttämisen vaara on, että päädyt verkkosivustoon, joka on identtinen jonkun muun kanssa. Valitse suosittu malli ja samanlaisia sivustoja voi olla kirjaimellisesti kymmeniä tuhansia. Tämä on tärkein argumentti niiden mukauttamisen puolesta.
Windows 10 vs Windows 7 pro
CSS -mallit ovat loistava pikakuvake kokeneille web -suunnittelijoille, joilla on perusasettelu mielessä ja jotka haluavat hypätä suoraan sen muotoiluun.
Ne sopivat myös kaikille web -suunnittelun aloittelijoille. Jos tiedät HTML- ja CSS -tietä, mutta sinulla ei vielä ole luottamusta tai tietoa rakentaa sivustoa alusta, CSS -malli toimii sekä helpoana tapana saada upean näköinen sivusto että mahtava oppimistyökalu.
Voit pitää sitä keskeneräisenä työnä. Aloita fonttien poistaminen käytöstä ja värimaailman muuttaminen , ja ajan myötä voit suunnitella olemassa olevia elementtejä uudelleen, lisätä uusia jne. Ei ole parempaa tapaa oppia mitään kuin käytännön, käytännön kokemuksen kautta.
Käytätkö CSS -malleja verkkosivustojen rakentamisessa? Mitkä ovat suosikkipaikkasi niiden löytämiseen? Jaa kokemuksesi ja vinkkisi kanssamme kommenteissa.
Jaa Jaa Tweet Sähköposti Kuinka puhdistaa Windows -tietokone komentoriviltäJos Windows -tietokoneesi tallennustila on vähissä, puhdista roskat näillä nopeilla komentokehotteilla.
Lue seuraava Liittyvät aiheet- Ohjelmointi
- Web-suunnittelu
- CSS
Andy on entinen painettu toimittaja ja aikakauslehtitoimittaja, joka on kirjoittanut tekniikasta 15 vuoden ajan. Tänä aikana hän on osallistunut lukemattomiin julkaisuihin ja tuottanut tekstinkirjoitustöitä suurille teknologiayrityksille. Hän on myös antanut asiantuntija -kommentteja medialle ja isännöinyt paneeleja alan tapahtumissa.
Lisää Andy Bettsiltätilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi