[HTML/CSS] Rozmieszczenie elementów na stronie

0

Hej, zastanawiam się jak w optymalny sposób rozmieścić elementy na stronie takie jak menu/obrazek/tekst itd.. :) w szkole uczą nas by robić to za pomocą tabel lub ramek ale według mnie ten kod nie nie czytelny i bez sensu.. i szukalem innych sposób ( divy ) .. nadajesz okreslonemu elementowi div i nazwe .. wpisujesz co tam chcesz ( menu lub obrazek ) a w css ustawiasz dokladne rozmieszczenie px i taki sposób był by fajny.. ale nie wiem czy jest to profesjolany sposób na rozmieszcznie a jezeli tak to prosze o próbke kodu HTML/CSS na zrobienie tego.. ( jeden element ) dziekuje

0

Jedyny aktualnie zalecany sposób to poprzez CSS.

0

a jakiś przykład kodu html i css np. na obrazku??

0

Podejrzyj np. 4programmers

1

Obecnie "jedyną słuszną" technologią jest to, co nazywacie tutaj "robieniem strony na div-ach". Ta nazwa jest jednak myląca. Używanie samych elementów div jest be. Trzeba używać semantycznych elementów -- czyli każdy element HTML ma opisywać sens, istotę zawartości, która się w nim znajduje. Sens! Nie wygląd! Czyli np. poziome menu robisz jako listę (

  • z elementami
  • ) linków, bo to lista powiązanych ze sobą rzeczy. I nie patrzysz na to, że menu to poziomy pasek, a
    • wyświetla domyślnie jakieś śmieszne wypunktowanie.</p>

    Wypunktowanie itp. wyłącza się w CSS, a potem -- też w CSS -- styluje się to tak, by nasza lista zamieniła się w poziome menu.

    W szkole uczą Cię źle. Prawdopodobnie dlatego, że to prostszy sposób -- na początku -- do nauki. CSS ma pewne wady i jest w gruncie rzeczy kiepskim sposobem na opis layoutu. Czyli np. dwie kolumny robi się w CSS nieco ciężej niż powinno się robić. Ale bez przesady: to nie jest budowanie rakiety kosmicznej. Dla kogoś, kto ma w tym pewne doświadczenie, i nie jest ani super-specem, ani geniuszem, zrobienie dwóch kolumn to pestka. Poza tym, CSS błyszczy jeśli chodzi np. o efekty typograficzne, ułożenie wierszy. W HTML-u zwyczajnie nie da się zrobić nawet połowy rzeczy z CSS. Do tego, CSS umożliwia rozdzielenie warstw. Są firmy, które z pewnych powodów wszystkie strony walą na tym samym HTML-u, a frontend-developerzy zmieniają tylko CSS. Zwykle taki sposób jest po prostu zły i głupi, bo trochę ten HTML jednak wypada dostosować, ale nieraz są ku temu jakieś dziwne, acz -- niestety -- logiczne w danym kontekście przesłanki.

    Strona używająca CSS może mieć bardzo lekki, zwięzły HTML. Bo wygląd strony opisany jest w osobnym pliku CSS, a w HTML-u jest tylko (prosta!) struktura. W CSS piszesz, że wszystkie linki w komentarzach do newsa mają mieć taki kolor i takie podkreślenie. Piszesz to raz i działa dla wszystkich linków. W HTML-u musiałbyś to powtórzyć dla każdego linku. Dlatego semantyczny HTML + arkusz CSS mogą nawet zajmować mniej niż sam prezentacyjny HTML (prezentacyjny, czyli definiujący również warstwę prezentacji, wygląd strony -- a nie tylko strukturę). Do tego, przeglądarki potrafią cache'ować arkusze CSS. Wchodzisz na stronę, przeglądarka zapisuje sobie arkusz na dysku i gdy łazisz po innych podstronach, to arkusz jest wczytywany z dysku, a nie ściągany z serwera. Pliki HTML są za każdym razem ściągane, więc tym ważniejsze, by były jak najmniejsze.

    Wreszcie, semantyczny HTML jest przyjaźniejszy dla Google i poprawia pozycję strony w rankingach wyszukiwarek. Bo najważniejszą rzecz, podsumowanie całej strony zamykasz w tagu

    -- i Google rozumie, że to najważniejszy nagłówek. Nie piszesz zamiast tego np. <font>, < b >, <big> itd., bo tego już Google nie zrozumie -- skąd ma wiedzieć, że coś fioletowego i dużego (ale dużego w stosunku do czego?) jest najważniejsze? A jak używasz semantycznego

    , to Google mówi: okay -- wiem, że to jest ważne i nie obchodzi mnie, jaki on tu ustawi kolor i rozmiar.</p>

    Aby opanować semantyczny HTML+CSS, musisz przerobić jakiś kurs, przeczytać książkę. Z polskich kursów polecany jest ten: http://www.kurshtml.boo.pl/ . Sam go nie czytałem, bo za moich czasów go nie było, ale ludzie sobie go chwalą. Gdy się trochę podszkolisz i zechcesz zobaczyć, jak developerzy myślą kodując dane fragmenty strony, zachęcam do kupienia książek z serii "CSS wg Erica Meyera" (są dwie). W każdym rozdziale opisuje on budowanie jednego komponentu strony. Startujesz od obrazka przedstawiającego docelowy wygląd i podstawowego kodu HTML, a potem dorzucasz do tego stopniowo kod CSS i w rezultacie otrzymujesz żywą stronę, która wygląda dokładnie jak obrazek z docelowym wyglądem. Do tych książek trzeba znać jednak podstawy CSS.

    Prawda jest taka, że jakbyś wyleciał z tabelami robiąc zadanie kwalifikacyjne do jakiejś dobrej firmy, to wyleciał byś z niej na zbity pysk. W dobrych firmach, tabelek używa się obecnie jedynie w ściśle określonych przypadkach. Gdy na stronie są dane, które faktycznie są tabelą (np. podsumowanie kosztów, tabelka z drużynami piłkarskimi, punktami, meczami i bramkami itp.) oraz czasem gdy tak jest faktycznie o wiele, wiele łatwiej niż w CSS. Ale ja np. z tej drugiej opcji nie skorzystałem dosłownie od lat.

0

w takim razie mam cała swoja strone opierać na divach? i do tych divów dodawac style?

0

Tak, ale nie tylko na divach. Są jeszcze "zapomniane" elementy w rodzaju <ul>, <h1>, <p> i tak dalej, których też trzeba używać, zgodnie z zastosowaniem.

0

ok dzieki

1 użytkowników online, w tym zalogowanych: 0, gości: 1