Home-theater-designers
Projektowanie stron internetowych jest bardziej dostępne niż kiedykolwiek, ale nadal wymaga dużo pracy i wielu umiejętności, aby uzyskać profesjonalnie wyglądające wyniki.
Na szczęście nie musisz za każdym razem zaczynać od zera. W sieci dostępne są tysiące darmowych szablonów CSS, które uwzględniają nowoczesne trendy i technologie projektowe. Możesz ich używać w ich oryginalnej formie lub dostosować do własnych potrzeb.
W tym przewodniku przyjrzymy się bliżej szablonom CSS i wyjaśnimy, gdzie je znaleźć.
Co to jest szablon CSS?
Szablon CSS zawiera nie tylko CSS: zapewnia wszystko, czego potrzebujesz do stworzenia w pełni działającej strony internetowej. Po pobraniu zazwyczaj otrzymasz folder zawierający następujące elementy:
- pliki HTML -- Otrzymasz plik HTML dla każdej strony witryny. Będzie zawierał przykładowy tekst i obrazy, które musisz zastąpić własną treścią. Musisz także mieć możliwość dostosowania metadanych, związanych z takimi rzeczami, jak opis witryny.
- Plik CSS -- Zwykle otrzymujesz jeden główny plik CSS zawierający wszystkie style dla witryny oraz wszelkie dodatki, takie jak resetowany arkusz stylów lub jeden dla czcionek internetowych.
- Plik JavaScript -- Jeśli witryna zawiera funkcje JavaScript, najlepiej umieścić je w osobnym pliku, a nie w dokumentacji HTML.
- Obrazy, czcionki i ikony -- Wszystkie obrazy użyte w szablonie również powinny być uwzględnione. Możesz zachować takie elementy, jak ikony i tła, ale będziesz musiał zastąpić inne obrazy zastępcze własnymi. Mogą być również uwzględnione niektóre niestandardowe czcionki.
W przeciwieństwie do większości innych rodzajów szablonów, które napotkasz – czy to Wordpress, Excel, czy Szablony InDesign -- Szablony CSS wymagają pewnej wiedzy technicznej.
Nie ma przyjaznego interfejsu, w którym można je edytować, więc musisz przynajmniej wiedzieć, jak poruszać się po dokumencie HTML, aby dodać własną treść. Aby dokonać własnych dostosowań, będziesz potrzebować przyzwoitej znajomości CSS .
dlaczego internet w moim telefonie jest taki wolny?
Czego szukać w szablonie CSS
Jest tak wiele darmowych szablonów CSS do wyboru. Skąd więc wiesz, co jest dla Ciebie odpowiednie? Oto kilka rzeczy, na które należy zwrócić uwagę:
- Projekt -- Oczywiście chcesz, aby witryna wyglądała ładnie i odzwierciedlała dowolny obraz, który chcesz przedstawić. Ale zastanów się również, czy szablon jest odpowiedni dla Twoich potrzeb zarówno teraz, jak i w przyszłości. Wiele z nich dotyczy witryn jednostronicowych; niektóre są przeznaczone dla wielu stron. Jeśli potrzebujesz tego drugiego, zastanów się, czy nie lepiej byłoby używać CMS, takiego jak Wordpress.
- Zoptymalizowany pod kątem urządzeń mobilnych – Korzystanie z internetu mobilnego jest teraz większe niż na komputerach, dlatego ważne jest, aby Twoja witryna działała prawidłowo na smartfonach. Każdy przyzwoity szablon CSS powinien wykorzystywać responsywny design, aby strona działała idealnie na każdym ekranie. Jeśli twój wybrany nie, przełącz się na taki, który to robi.
- Dobrze napisane -- Pobierz szablon i spójrz na kod, zanim zdecydujesz się go użyć. Powinien być czysty, dobrze zorganizowany i łatwy do edycji. Powinna być również świadoma SEO, z prawidłowym użyciem tagów tytułu i nagłówka.
- Licencja – Sprawdź licencję wybranego szablonu CSS. Wiele jest dostępnych na licencji Creative Commons , ale różne wersje tej licencji określają, czy możesz edytować szablon, czy możesz go używać komercyjnie i czy musisz przyznać autorstwo oryginalnemu projektantowi.
- Dodatki -- Niektórzy twórcy szablonów CSS oferują swoją pracę na zasadzie „freemium”. Otrzymujesz szablon za darmo, ale możesz zapłacić za dodatkowe dostosowania, aby był unikalny dla Twojej witryny.
Po wyjaśnieniu tego wszystkiego spójrzmy na najlepsze miejsca, w których można znaleźć bezpłatne szablony CSS.
1. Szablony.co
Ta oszałamiająca kolekcja ponad 800 szablonów CSS zawiera style dla każdej klasy witryny. Wszystkie zostały stworzone specjalnie dla witryny, więc nie powinieneś ich widzieć nigdzie indziej.
Wszystkie szablony są responsywne i zbudowane w HTML5. Są małe i lekkie, z dodatkowymi funkcjami JavaScript, takimi jak lightbox wideo lub efekty przewijania, używane tylko tam, gdzie dodają prawdziwą wartość do doświadczenia.
2. Styleshout.com
Styleshout oferuje szeroką gamę szablonów zarówno darmowych, jak i premium, z których te pierwsze zostały wydane na licencji Creative Commons.
Bezpłatne szablony obejmują szeroki zakres kategorii, od pełnych witryn internetowych po strony dostępne wkrótce, a nawet często pomijaną stronę błędu 404 . Możesz je dostosować samodzielnie i dostosować do stylu istniejącej witryny lub możesz zapłacić, aby Styleshout zrobił to za Ciebie.
3. HTML5Up.net
Ta super-stylowa kolekcja szablonów jest również bardzo popularna. Większość z nich została pobrana setki tysięcy razy i łatwo zrozumieć, dlaczego.
Obsługiwane są wszystkie zwykłe kategorie witryn, takie jak blog i strona produktu, a fotografowie mogą pochwalić się swoimi pracami szczególnie fajnymi projektami. Podstawowe szablony w stylu siatki są niezwykle konfigurowalne, podczas gdy te bardziej błyskotliwe mają tendencję do używania JavaScriptu, więc mogą być mniej dostosowane do twoich poprawek.
Cztery. Freebiesbug.com
To, czego Freebiesbug brakuje w ilości, to więcej niż nadrabia jakością. Witryna, w której młodzi programiści prezentują swoje umiejętności, zawiera wiele wysokiej klasy projektów premium.
Imponująca kolekcja bezpłatnych szablonów w witrynie jest idealna dla agencji, fotografów, twórców aplikacji i innych twórców. Wyposażone w efekty i animacje JavaScript i CSS, możesz dostosować strony, chociaż często są tak ładne, że możesz nie chcieć.
Ponadto Freebiesbug.com zawiera wszelkiego rodzaju bezpłatne zasoby dla projektantów stron internetowych, w tym czcionki, zdjęcia stockowe, szkice programu Illustrator i pliki PSD i wiele innych.
5. Darmowa-CSS.com
Free-CSS.com to prosta strona internetowa oferująca - w chwili pisania tego tekstu - około 2503 darmowych szablonów, a także wiele szablonów premium, na wypadek, gdybyś nadal nie mógł znaleźć tego, czego szukasz.
Mając tak wiele do wyboru, może być trochę trudno zdecydować się na idealny projekt. Jakość jest ogólnie dobra, chociaż 10-letni okres istnienia witryny oznacza, że nadal obsługuje szablony napisane w XHTML. Będziesz chciał tego uniknąć. Drugą rzeczą jest upewnienie się, że sprawdziłeś licencję dla wybranego szablonu. Wszystkie są bezpłatne, ale niektóre należą do domeny publicznej, niektóre Creative Commons, a niektóre korzystają z licencji specyficznej dla autora.
6. OS-Templates.com
28 stron darmowych szablonów CSS, w większości wykorzystujących nowoczesne, oparte na siatce układy na jednej stronie. Jeśli szukasz prostoty, to jest to miejsce, w którym powinieneś poszukać. Projekty są przejrzyste, atrakcyjne i łatwe do dostosowania.
OS-Templates.com oferuje również duży zbiór „podstawowych szablonów”. Dają one podstawową strukturę witryny w różnych popularnych schematach układu (dwukolumnowe, trzykolumnowe itp.), a jednocześnie są całkowicie pozbawione stylu. Podobnie jak w przypadku domyślnego motywu w Wordpress, puste płótno umożliwia przekształcenie witryny we wszystko, co chcesz.
7. boag.online [Już nie jest dostępny]
Maglev to jednostronicowy szablon strony internetowej, który może być podgląd w akcji na boag.online .
To szybki, przejrzysty szablon, idealny na stronę produktu. Minimalistyczny projekt jest wzbogacony tylko o kilka efektów Jquery, które ułatwiają przewijanie między sekcjami. Prosty układ działa sam w sobie, ale stanowi również świetny punkt wyjścia do własnych dostosowań.
8. Pikselowy Budda
Szablony Pixel Buddha nie ograniczają się tylko do stron internetowych, obejmują również biuletyny e-mailowe.
Tak czy inaczej, wszystkie są zaprojektowane w HTML5 i CSS3 i są responsywne, dzięki czemu świetnie wyglądają na każdym urządzeniu. Najważniejsze to Howdy HTML, piękny szablon portfolio/życiorysu oraz SOHO HTML, niesamowicie wyglądająca strona e-commerce, która zawiera źródłowe pliki PSD nad kodem HTML i CSS.
jak wybrać wszystkie utwory na spotify
9. Templatemo.com
W Templatemo dostępnych jest prawie 500 darmowych szablonów. Niektóre z najlepszych to te, które uwalniają się od systemu siatki w stylu Bootstrap, aby spróbować czegoś innego.
Większość szablonów jest prosta i przejrzysta, chociaż funkcje, takie jak lightboxy i karuzele treści, są dostępne tam, gdzie są potrzebne. Podoba nam się również fakt, że kilka szablonów jest domyślnie skonfigurowanych do pracy z aż sześcioma stronami. Ułatwia to, jeśli treść nie pasuje do coraz powszechniejszego układu jednostronicowego.
10. Startbootstrap.com
Bootstrap to niezwykle popularny framework front-endowy, który umożliwia tworzenie wysokiej jakości stron internetowych w mgnieniu oka. Jednak nauczenie się zajmuje trochę czasu, i tutaj pojawia się Start Bootstrap.
Ta kolekcja darmowych szablonów typu open source została zbudowana przy użyciu systemu siatek Bootstrap . Do wyboru jest ponad 30. Niektóre z nich są w pełni zaprojektowane i przeznaczone dla aplikacji, blogów i stron docelowych, podczas gdy inne to puste układy czekające na zmianę stylu.
jedenaście. Bootswatch.com
Wreszcie coś bardziej praktycznego. Bootswatch oferuje 16 motywów open source do stylizacji witryn zbudowanych przy użyciu Bootstrap.
Możesz samodzielnie zbudować układ witryny za pomocą Bootstrap lub pobrać jeden z pustych szablonów z Start Bootstrap. To, co robi Bootswatch, to zmiana czcionek, kolorów tła i stylu przycisków, menu i innych elementów. Nadaje Twojej witrynie niepowtarzalny wygląd, pozostając wiernym ultraczystości Bootstrap.
Łatwo jest stworzyć podstawową stronę internetową z Bootstrapem, a Bootswatch zapewnia jej natychmiastowy połysk.
Jak korzystać z szablonów CSS
Ogólnie rzecz biorąc, szablony można używać na dwa sposoby. Używasz ich tak, jak są, lub używasz ich jako podstawy do własnego projektu.
Niebezpieczeństwo podczas korzystania z szablonów polega na tym, że otrzymujesz witrynę identyczną z cudzą. Wybierz popularny szablon, a może istnieć dosłownie dziesiątki tysięcy identycznych witryn. To główny argument przemawiający za ich dostosowywaniem.
jak naprawić rysę na cd
Szablony CSS to świetny skrót dla doświadczonych projektantów stron internetowych, którzy mają na myśli podstawowy układ i chcą od razu przejść do jego stylizacji.
Są również idealne dla każdego, kto dopiero zaczyna projektować strony internetowe. Jeśli znasz się na HTML i CSS, ale nie masz jeszcze pewności ani wiedzy, aby zbudować witrynę od podstaw, szablon CSS służy zarówno jako łatwy sposób na uzyskanie świetnie wyglądającej witryny, jak i niesamowite narzędzie do nauki.
Możesz to potraktować jako pracę w toku. Zacznij od wyłączanie czcionek oraz zmiana kolorystyki , a z czasem możesz przeprojektować istniejące elementy, dodać nowe itd. Nie ma lepszego sposobu na nauczenie się czegokolwiek niż poprzez praktyczne, praktyczne doświadczenie.
Czy budując strony internetowe używasz szablonów CSS? Jakie są twoje ulubione miejsca, w których je znajdziesz? Podziel się z nami swoimi doświadczeniami i wskazówkami w komentarzach.
Udział Udział Ćwierkać E-mail Jak wyczyścić komputer z systemem Windows za pomocą wiersza poleceniaJeśli na komputerze z systemem Windows zaczyna brakować miejsca, usuń śmieci, korzystając z tych szybkich narzędzi wiersza polecenia.
Czytaj dalej Powiązane tematy- Programowanie
- Projektowanie stron
- CSS
Andy jest byłym dziennikarzem prasowym i redaktorem magazynu, który od 15 lat pisze o technologii. W tym czasie przyczynił się do niezliczonych publikacji i wykonał prace copywriterskie dla dużych firm technologicznych. Prowadził również eksperckie komentarze dla mediów oraz prowadził panele na wydarzeniach branżowych.
Więcej od Andy'ego BettsaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować