-
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:
-
23 Responses to “Tworzenie prostej strony za pomocą wtyczki Edit Css”
Leave a Reply
Komentarze
Kategorie
Top 10
Wski: Cross Processing
Kallie Akinyooye: Krótko o… Wordpress 2.7
Agressiva: Jak za pomocą js poprawić wygląd formularzy
S.Wojnowski: Jak za pomocą js poprawić wygląd formularzy
Arek: Menu “wychodzące” zza strony
Giuseppe Heitner: Wstęp do programowania zorientowanego obiektowo w PHP5…
Kamil: 960 Grid System
Piotrek: Rozwijany panel z odrobiną słodyczy
Kuba: Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku
- 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.
- Wieczór z Open Source
- 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
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
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
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 [...]
stwierdzam, ze autorowi tego filmu nie znane pojęcie zwane wcięciem , dla lepszego zapoznania się z szablonem, a można było nawet zastosować nottepada do pokolorowania samej składni