metody tworzenia stron internetowych

[blazejs]

Metody cały czas się zmieniają a stopień zaawansowania dochodzi do rozmiarów, od których coraz dłużej trwa nauka od zera. Na początek zapomnij o RWD i skup się na na podstawach. Bootstrap jest tak rozbudowany, że nie wiem czy jest dobrym pomysłem zaczynanie od niego jeśli nie ma się doświadczenia. Flex box nie działa jeszcze dobrze na wszystkim. Zamiast tego poczytaj o border-box.

Tak, robi się na divach w systemie grid (tak jest najwygodniej). Najlepiej ustawiaj sobie wszystko poziomymi blokami (każda sekcja jako osobny blok tzn. nagłówek, treść, stopka i co tam jeszcze potrzebujesz). Dla wygody: główny div na całą szerokość, w środku div ze sztywną szerokością wycentrowany w stosunku do głównego (robiąc RWD będziesz sobie po prostu ustawiał w media query szerokości) a w nim kolumny ustawiane w procentach i z float. Tego jest za dużo żeby w jednym poście wyjaśnić. Zamiast id używaj raczej class (id jest dla pojedynczego elementu!).

Po co robisz menu na liście numerowanej? Wystarczy ul zamiast ol. Menu poziome od pionowego różni się tylko tym, że w poziomym dodajesz float: left do li. Pamiętaj, że kod możesz zagnieżdżać Otwórz sobie jakąś stronę code inspectorem i zobacz jak tam to jest zrobione. Choćby jakiś przykład z Bootstrapa.

[Lars]

W przypadku zmiany wymiarów wyświetlanego obrazu nie umieszczasz menu w innym divie tylko dla div id="menu" za pomocą @media queries wpisujesz dodatkowe ustawienia które będą funkcjonować z chwilą spełnienia określonych warunków.

np.:

@media all and (min-width:500px) and (max-width:800px) {
#menu {
tu wpisujesz nowe ustawienia dla div id="menu" które będa aktywne w przypadku kiedy obraz będzie mial szerokość 500-800 px.
}
}

Tutaj najpewniej będziesz musiał dać float: none dla div tworzących układ, bo w podstawowym widoku masz na pewno float:left.

[dav234]

dziekuje wam bardzo w koncu ktos odniosl sie konkretnie do mojego pytania i wiem wiecej.

Odnosnie tego grid system i RWD to chodzilo wam o to, ze jak nie mam potrzeby robic RWD to wystarczy :

<div id="caly_blok">

<div id="menu_top"></div>

<div id="lewa_strona"><p>aasaaaasssdaaahhhhaaaaaaaa</p></div>

<div id="prawa_strona"><p>assssaaaaa</p></div>

<div id="stopka">stopka</div>

</div>

a jezeli chcialbym zrobic RWD pod grid system to wtedy, kazdy div wyzej powinienem jeszcze wziasc w jeden div:

<div id="caly_blok">

<div id="container1">

<div id="menu_top"></div>

</div>

<div id="container2">

<div id="lewa_strona"><p>aasaaaasssdaaahhhhaaaaaaaa</p></div>

</div>

<div id="container3">

<div id="prawa_strona"><p>assssaaaaa</p></div>

</div>

<div id="container4">

<div id="stopka">stopka</div>

</div>

</div>

zglebiajac ten temat na internecie natrafilem na poradnik o "gridzie" zrobiony przez polaka, ktory zalecal stosowanie clearowania poprzez dodanie pustego diva, a wszedzie gdzie czytalem to pisza, ze pusty div jest nieestetyczny, czy jego metoda jest juz przestarzala czy dalej stosuje sie puste divy? no i czy moje kody sa dobre?

Z gory dziekuje

[Lars]

Ja robię specjalną klasę z clear:both i używam pustego diva.

[loomax]

Może albo się uczyć całości od 0 albo korzystać z frameworu jakim jest właśnie bootstrap z którego wykorzystaniem stworzy responsywną stronę znacznie szybciej niż kodując cały CSS odpowiedzialny za "widok" od podstaw

Zwłaszcza ze klient koncowy nie zaplaci ci za czas ktorzy poswiecisz na napisanie tego co daje z defaultu botstrap (: liczy sie efekt koncowy i niska cena. Ale dla siebie, jak najbardziej warto zrobic cos od zera zeby poznac temat od podszewki.

[blazejs]

Najlepiej by bylo gdyby caly kod byl na tyle elastyczny, zebys mogl na nim wszystko zrobic. Samo RWD robisz w zasadzie na CSS i to zalezy od osobistych preferencji. Jedni ustawiaja wszystko w procentach, inni w em'ach, inni robia sztywne breakpointy w pikselach dostosowane do rozdzielczosci. To zalezy jak projektujesz i jak ma wygladac strona w mniejszych rozdzielczosciach. Jesli chcesz to podam ci na prv kilka linkow do moich stron to sobie obejrzysz w inspektorze jak to dziala.

Co do Bootstrapa - to jest naprawde zlozony framework i musisz go dobrze poznac zeby projektujac wiedziec co mozesz zrobic latwo a nad czym spedzisz kilka godzin probujac dojsc do tego jak to zrobic. Jesli nie masz jakichkolwiek innych nawykow i zobowiazan to mozesz poswiecic te pare tygodni na nauczenie sie go. Ja doszedlem do wniosku, ze nie mam tyle czasu na jego nauke i napisalem sobie wlasny, prostszy framework, zeby miec punkt startu do kodowania stron klientow. Dla mnie to bylo szybsze rozwiazanie, ale mam tez troche zlecen i nie moglem sobie pozwolic na to by biezace zlecenia czekaly az naucze sie Bootstrapa (i zeby nie zaczynac kazdej strony od zera). Jesli masz czas to nic nie stoi na przeszkodzie, zeby sie tego Bootstrapa nauczyc.

Teraz jest tysiace narzedzi pozwalajacych tworzyc latwiej strony niz 10 czy 15 lat temu i rekompensuje to fakt, ze caly proces stal sie nieporownywalnie bardziej zlozony. Polecam zainteresowanie sie LessCSS, co i tak bedziesz musial ogranac stawiajac na Bootstrapa. Nauka nigdy nie ma konca. Jak tylko mam chwile luzu to poswiecam go na nauke nowych rzeczy. A robie to juz od 15 lat.