Artykuły:

  • data publikacji: 22.04.2009

    Tworzenie prostej strony za pomocą wtyczki Edit Css

    kategoria: Webmaster, XHTML/CSS autor: pafeu

    Tworzenie prostej strony za pomocą wtyczki Edit Css

    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.

    pobierz

    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>

            <div id="footer"></div>
            <div id="author"></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.
    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    23 Responses to “Tworzenie prostej strony za pomocą wtyczki Edit Css”

    1. Szakal pisze:

      Chyba jednak zostanę przy firebugu ale i tak ciekawa rzecz :)

    2. korek pisze:

      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

    3. agressiva pisze:

      Osobiścnie nie stosuję żadnej z tego typu wtyczek.
      Ale licze, że tutek komuś się przyda :)

    4. korek pisze:

      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

      • agressiva pisze:

        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.

    5. pafeu pisze:

      Do css używam StyleMaster.
      Polecam. ;-)

    6. Gremlin pisze:

      Zgadzam się w 100% z “korkiem”. Co do artykułu to bardzo dobry.

    7. korek pisze:

      firebugu przecież ma konsole do js

    8. agressiva pisze:

      Byc moze, nie korzystam,
      nie przemawiają do mnie narzędzia tego typu.

    9. korek pisze:

      “…Bardziej do JSu by się coś takiego przydało…” :D to czas spróbować

    10. agressiva pisze:

      Ma to jedną wadę – dwa razy trzeba pisac to samo, najpierw w takim resterze a pozniej wrzucac to do kodu wlasciwego,
      marnowanie czas :P

    11. korek pisze:

      StyleMaster WYSIWYG ,ble to jest zło

    12. korek pisze:

      niom palce bolą od “Ctrl+C” i “Ctrl+V”

    13. pafeu pisze:

      firebug jest do sprawdzania błędów a nie do pisania całego kodu..

    14. korek pisze:

      mówimy tu o konsoli JS czy czym?

    15. nacudjonasza pisze:

      Ja osobiście korzystam z Top Style Lite. Ale tę wtyczkę z pewnością sprawdzę.

    16. m_gol pisze:

      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…

    17. agressiva pisze:

      m_gol – skąd mozesz mieć pewność, że art był pisany w Pandzie Małej (wspomnienie o podkreśleniach) ? :)

    18. Marek pisze:

      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 :)

    19. Hubert pisze:

      Ciekawa wtyczka, ale jednak firebug ma chyba nieco więcej funkcji. Mimo to warto się zapozanć

    20. darek pisze:

      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

    Leave a Reply

Komentarze

Kategorie

Top 10

  • 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