-
data publikacji: 22.04.2009
Tworzenie prostej strony za pomocą wtyczki Edit Css
kategoria: Webmaster, XHTML/CSS autor: pafeu
Chciałbym wam zaprezentować bardzo przydatną wtyczkę do przeglądarki Mozilla Firefox, EditCss. Jest to zwykły edytor Css lecz wkomponowany w pasku przeglądarki. Dzięki niemu możemy pisać style w czasie rzeczywistym – czyli gdy zaczynamy wpisywać style od razu widzimy rezultaty w oknie z dokumentem.
Wtyczka jest darmowa oraz wygodna. Można ją pobrać z https://addons.mozilla.org/pl/firefox/addon/179.
Tworzymy dokument html
Aby zacząć parce z EditCss, należy najpierw stworzyć „fundament” strony, czyli tworzyć pewien układ strony, zrobimy to przy pomocy divów.
Div, inaczej blok – jest to zwykły prostokąt, któremu można nadać margines, kolor wypełnienia, obramowania, tło itd.
Głównym divem, w którym wszystko będzie się znajowało to Container, następnie stronę podzieliłem na pięć części, Top, Cytat, Content-left (treść w lewej kolumnie), Content-right (treść w prawej kolumnie) oraz Footer.
Struktura strony wygląda następująco:
<div id="container">
<div id="top">
<div id="logo"></div>
<div id="slogan"></div>
</div>
<div id="cytat"></div>
<div id="content-left">
<div id="header-left"></div>
<div id="author-left"></div>
<div class="content-text"></div>
</div><div id="content-right">
<div id="header-right"></div>
<div id="author-right"></div>
<div class="content-text"></div>
</div>css
Wszystko jest ukazane na filmie oraz w pliku źródłowym. Chciałbym jedynie wypisać kilka solucji na pewne problemy, które się dość często zdarzają przy opisywaniu divów.
- Na przykładzie footera (w filmie można zauważyć ten problem), gdy nasz footer idzie na górę ponad wszystkie inne divy, należy zastosować w nim parametr "clear: both".
- Jeśli jakiś element który znajduje się w divie wychodzi za jego granicę, stosujemy parametr "overflow: hidden", który ucina element za granicą diva.
- Aby wyśrodkować stronę należy głównemu blokowi (w naszym przypadku "container") przypisać "margin: 0 auto". Są oczywiście inne sposoby na to jednak ten mnie nigdy nie zawiódł.
- Pamiętaj aby nie ustawiać wysokości (height) dla bloków, które będą służyły jako treść, gdyż może być problem gdy zapełnimy diva zbyt dużą ilością tekstu.
-
Zobacz podobne wpisy:
-
22 Responses to “Tworzenie prostej strony za pomocą wtyczki Edit Css”
Leave a Reply
Komentarze
Kategorie
Top 10
Stan: Gravatar, czyli jak mieć globalnego avatara
JaRo: Halu!?
Adi: Halu!?
rokicza: Menu akordeonowe z odrobiną CSS3
Marcin Lewandowski: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
Agressiva: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
Marcin: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Przypominamy o Konkursie Noworocznym
Wraz z nowym, 2010 rokiem ogłosiliśmy konkurs na tutorial o tematyce CMS-owej.
Mamy nadzieję, że jakieś prace zostaną nadesłane do końca terminu i znajdzie się zwycięzca w pierwszym naszym oficjalnym konkursie z nagrodami.
Zachęcamy wszystkich do spróbowania swoich sił.
Szczegóły dostępne są pod tym adresem: http://vivee.info/2010/01/01/konkurs-noworoczny/
Zareklamuj nas :)
Jako, że pojawiła się na vivee.info nowa skóra przygotowałam nasze firmowe banerki reklamowe. Osoby, które wyrażą chęć wsparcia nas reklamą u siebie na blogach lub innych serwisach mogą pobrać je poniżej. Czytaj dalej
Polecane strony
- WordPress Theme from Scratch – Day 1: PSD
- 20 Tutorials For Creating HDR Images
- Ask the Expert – Using Wordpress to Build Large Scale Websites with Derek Herman
- Making an Interactive Picture with jQuery
- Create a Horizontal Scrolling Website
- 800 Most Wanted Free RSS Icons for Bloggers
- 45 Most Wanted Beautiful Free Hand Drawn Fonts
- Caffe-Break Themed Blog Layout Photoshop Tutorial
- Create a nature inspired layout in photoshop
- Coding a Web Design for Speed and Quality
- Beautiful Hand Drawn Websites | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
- 40 Fresh Creative and Inspiring Photographs
- Wordpress portfolio layout | Grafpedia
- Simple Facial Photo Retouching | Grafpedia
- Create a beauty layout in 10 steps | Grafpedia
Chyba jednak zostanę przy firebugu ale i tak ciekawa rzecz
fajne ale ale firebug ma tą samom opcje ale do tego rozróżnia kolorystyką i podpowiada co przyspiesz czas pracy co prawda często wrzuca trochę śmieć ale to chwila moment by to skasować no ale ciekawa wtyczka
Osobiścnie nie stosuję żadnej z tego typu wtyczek.
Ale licze, że tutek komuś się przyda
czas to pieniędzy , a firebugu skraca czas pracy i znacznie go przyspiesza i każde fajne narzędzie trzeba wykorzystywać i niema co skrobać w notatniku całe życie
Kto korzysta z notatnika ten korzysta. Przy swojej pracy nad kodem zwyczajnie nie potrzebuje takich narzędzi, bo kodowanie idzie mi sprawnie, a jak od czasu do czasu coś się sypnie (z IE6 nigdy nic nie wiadomo) to używam background:red; i juz wiem gdzie jest babol
Bardziej do JSu by się coś takiego przydało, bo jednak mechanizmy ożywiające stronę w animację i in. efekty potrafią przedłuzyć czas szlifowania wygladu.
Do css używam StyleMaster.
Polecam.
Zgadzam się w 100% z “korkiem”. Co do artykułu to bardzo dobry.
firebugu przecież ma konsole do js
Byc moze, nie korzystam,
nie przemawiają do mnie narzędzia tego typu.
“…Bardziej do JSu by się coś takiego przydało…”
to czas spróbować
Ma to jedną wadę – dwa razy trzeba pisac to samo, najpierw w takim resterze a pozniej wrzucac to do kodu wlasciwego,
marnowanie czas
StyleMaster WYSIWYG ,ble to jest zło
niom palce bolą od “Ctrl+C” i “Ctrl+V”
firebug jest do sprawdzania błędów a nie do pisania całego kodu..
mówimy tu o konsoli JS czy czym?
Ja osobiście korzystam z Top Style Lite. Ale tę wtyczkę z pewnością sprawdzę.
Firefox, nie FireFox. Mozilla bardzo zwraca uwagę na to, by nazwę pisać poprawnie. Zresztą, Firefox ma chyba poprawianie pisowni, nie? Na pewno podkreślił to słowo…
Poprawione
m_gol – skąd mozesz mieć pewność, że art był pisany w Pandzie Małej (wspomnienie o podkreśleniach) ?
Lubię, to. Czasem używam, jeśli chcę szybko sprawdzić inny krój czcionki, czy kolor. Tylko że ja używam wbudowanego modułu w web developer toolbar. Nie widzę sensu instalowania oddzielnej wtyczki. Wiadomo, że każdy powinien mieć ów toolbar
Ciekawa wtyczka, ale jednak firebug ma chyba nieco więcej funkcji. Mimo to warto się zapozanć
[...] Oryginalna wersja artykułu znajduje się na Vivee.info [...]