Jak łatwo i przyjemnie zarządzać oprawą graficzną strony czyli CSS
Jak to działa w CSS? Definicje css można umieszczać w polu head strony, lub w plikach zewnętrznych. Ja preferuję raczej w plikach zewnętrznych to pozwala zachować większy porządek i witryna ładuje się szybciej. W przypadku powyższego linku zapisalibyśmy go następującą: w pliku html <a href=”http://” class=”link”></a> w pliku CSS .link{color:red; font-weight:bold; font-size:14px;} Powyższy zapis powoduje, że w pliku html mamy bardzo prosty zapis, a jego definicję zapisujemy w oddzielnym pliku CSS. Tej klasy css możemy użyć w setkach dokumentów html naszej strony. Zmieniając definicję klasy czyli np. kolor z czerwonego na zielony zmieniamy go na wszystkich podstronach. Nie wykorzystując CSS’a musielibyśmy zmiany wprowadzić we wszystkich dokumentach html. Przy większej ilości podstron byłoby to niemalże niemożliwe. Tak jak wcześniej wspominałem to tylko definicja czcionki, a za pomocą CSS’a możemy zmieniać np. miejsce położenia menu na stronie czy innych elementów zmieniając tylko i wyłącznie CSS nie ingerując w strukturę dokumentu. Dość dobrze mogłem to zaobserwować pracując w firmie Perspektywy na CMSie Joomla. Wszystkie strony tworzyliśmy w tym CMSie wraz z programistą i redaktorem. Co ciekawe każdy pracował zupełnie niezależnie od siebie. Ja tworzyłem grafikę głównie opartą o CSS, on programował, a redaktor wpisywał teksty. Sam CMS jest o tyle kiepski, że mimo wstawianego kodu opartego o divy generuje tabele (być może to się już zmieniło). Tak naprawdę możemy mieć jeden kod strony i za pomocą samego CSS’a wdrażać różne projekty graficzne. Jeśli szef w firmie uzna, że grafika obecnej strony “jest słaba” i zmieniamy ją to nie musimy angażować całego sztabu ludzi, a wystarczy sam grafik ze znajomością CSS’a. To co powyżej opisałem dobrze obrazuje strona www.csszengarden.com. Mając jeden kod html wielu projektantów pokazuje jak różne można tworzyć designy przy wykorzystaniu odpowiednio css’a. Zapraszam na tę stronę www.csszengarden.com. Poniżej kilka przykładów projektów.
![]() |
![]() |
![]() |
Skąd czerpać wiedzę o CSS? Podstawowy i chyba najważniejszy adres internetowy z wiedzą o CSS to www.w3.org. Jest to adres strony www ogranizacji, która stoi za opracowaniem standardów w3c. Nie raz gdy chciałem upewnić się jakiś definicji korzystałem z tej strony. Po zakończeniu prac nad stroną warto skorzystać z validatora, który sprawdzi czy kod css został poprawnie napisany i czy strona nie zawiera błędów validator.w3.org. Sam podstawy CSS’a opanowałem czytając kilka książek z wydawnictwa helion. CSS według Erica Meyera. Sztuka projektowania stron WWW CSS według Erica Meyera. Kolejna odsłona CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III CSS. Antologia. 101 wskazówek i trików Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS To kilka z tych, które przeczytałem, ale jest tego dużo więcej. Polecam książki Ericka Meyera, który jest guru w tej dziedzinie. Bardzo praktyczne są tablice informatyczne CSS kosztują nie wiele, a czasami są bardzo przydatne. Jest to taka ściągawka, na jednej dużej kartce mamy podane wszystkie podstawowe definicje css. Sporo informacji o CSS można znaleźć w kursach na stronach www. Poniżej lista kursów z których miałem okazję korzystać. Polecam pierwszy z nich nauczyłem się z niego najwięcej. kurs.browsehappy.pl www.signs.pl/html www.kurshtml.boo.pl webmade.org/kursy-online/kurs-css.php. Przydatne mogą być dla Ciebie gotowe struktury stworzone na divach. Pod poniższymi linkami znajdziesz setki gotowych układów stron www o różnej rozdzielczości, ilości szpalt… http://layouts.ironmyers.com http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts http://www.dynamicdrive.com/style/layouts/ http://www.barelyfitz.com/screencast/html-training/css/positioning/ Jeśli chcesz projektować strony www, a jeszcze nie poznałeś css’a zrób to czym prędzej, a szybko zobaczysz jak wiele czasu zaoszczędzisz. Jeśli zlecasz do zrobienia stronę internetową proponuję, żebyś sprawdził czy webmaster projektuje ją wykorzystując odpowiednio css. Warto sprawdzić stronę walidatorem css/html… Jak się jakiś czas temu przekonałem dobra struktura witryny może wpłynąć także na wycenę usług pozycjonerskich.
Jeśli ten artykuł pomógł Ci, masz co do niego jakieś wątpliwości lub pytania “Zostaw komentarz”, a na pewno na niego odpowiem.
a WordPress rating system
jeszcze nie skomentowano.
dodaj swój komentarz