Wersja do druku
Możecie mi podać jakieś linki do stron/blogów/pdfów gdzie będzie fajnie i czytelnie opisane jak robić layouty i później je kodować według obecnie panujących standardów ?
@edit
Żeby nie było - potrafię używać google, chodzi mi bardziej o poprawne kodowanie, według panujących zasad. W necie jest bardo dużo starych materiałów.
Mogą być po angielsku :)
ja uczylem sie tak, ze bralem jakis interesujacy mnie layout i staralem sie go skopiowac. To apropo layout'ow. Niestety pociąć go już nigdy nie umialem
Ja spotykam się z coraz częstszym trendem by zastępować wszelkie możliwe grafiki odpowiednikami w css3, czyli tła, zaokrąglenia boxów, no i gradienty głównie. Co do poradnika jak zrobić layout to wątpię by był jakiś złoty poradnik. Wszystko powinno się zacząć w Twojej głowie, a pocięcie tego to już pryszcz. Tu masz ostatnią fazę opisaną na przykładzie wordpressa. http://webhosting.pl/Jak.stworzyc.wl...do.HTML.i.CSS)
Ja mam w planach zrobienie takiego tutoriala kompletnego. Ale póki co muszę stworzyć sobie blog, a mi to kiepsko idzie z czasem :P
Ciśnij mnie o to to będę się za to brał, na pw możesz pisać wszelkie pytania. Ja chętnie zrobię tutoriale, przeszkodą jest czas :/
Dobry tutorial html/css jest na tutsplus.com - https://courses.tutsplus.com/courses...learn-html-css
Dobra zasada tworzenia layoutu:
HTML ma być jak najczystszy - czyli, im mniej niepotrzebnych tagów tym lepiej. Do tego trzeba intuicyjnie nazywać klasy elementów.
CSS - jak najmniej obrazków, ale tutaj to też nie koniecznie bo tu doświadczenie podpowiada kiedy można użyć CSS3 np do cieni, a kiedy lepiej obrazek. Trzeba jednak wiedzieć, że kod cs może być bardziej skomplikowany jakby. Jesli mozna usunac jakis tag w html, dzieki dodaniu czegos w css, w 90% lepiej jest to zrobic :)
Przykładowo - zrobienie boksu z komentarzem, który jest dziwnie zakończony na gorze i na dole, np taką ramką falistą - nie da się tego zrobić css, potrzebny obrazek.
Kiedyś zrobiłbym to tak:
A dziś zrobiłbym to tak:Kod PHP:<div class="comment-box"> <div class="box-top"></div> <div class="box-content"> Treść dalej, już nieważne co. <span class="large-text">ZOBACZ NAS</span> </div> <div class="box-bottom"></div> </div> CSS: .comment-box { float:left; width:300px; position:relative; } .box-top { content:url(obrazek-top.jpg); position:absolute; top:0; left:0; height:20px; } .box-content { padding: 20px 15px; } .box-bottom { content:url(obrazek-bottom.jpg); position:absolute; bottom:0; left:0; height:20px; } .large-text {color:red; font-size:20px;}
Tym sposobem stało się to bardziej uniwersalne :)Kod PHP:<div class="comment-box"> Treść dalej, już nieważne co. <span class="comment-box-more">Zobacz nas</span> </div> CSS: .comment-box { float:left; width:300px; position:relative;padding:20px 15px;} .comment-box:before { content:url(obrazek-top.jpg); position:absolute; top:0; left:0; height:20px;} .comment-box:after { content:url(obrazek-bottom.jpg); position:absolute; bottom:0; left:0; height:20px; } .comment-box .comment-box-more {color:red; font-size:20px; text-transform:uppercase;}
A kod css bardziej czytelny przy 200+ liniach :)
Przed uzyciem CSS3 trzeba wejsc na stronkę caniuse.com i sprawdzic jak jest obslugiwana. W wiekszosci juz bardzo dobrze, ale przed niektorymi elementami jeszcze powinnismy sie wstrzymac :)
Fajnie by było gdybyś to napisał, serio !
Jakbyś potrzebował pomocy z blogiem to wal również na PW, coś za coś :D
Pomocy nie potrzebuję, chodzi tylko i wyłącznie o czas. Mam tak że dużo pracuję, i jak już skończę swoje zadania, to chce się odmóżdzyć w CSie a nie siedzieć kolejne godziny w kodzie :P
Używacie bootstrapa lub/i LESS ?
Nie używam bootstrapa, na razie przynajmniej. Dla mnie to zbyt duży kombajn, nie potrzebuje takich rzeczy. No i mój grafik nie korzysta z tej siatki bootstrapa więc trudno by było jego projekty napisać wykorzystując bootstrapa. Aczkolwiek polecam, może swojego bloga napiszę z bootstrapem. Przydałoby się go wkońcu dobrze nauczyć.
Co do LESS, też niestety nie korzystam, ze względu na czas zleceń. Szybciej napiszę w czystym CSS, bo nie znam dobrze LESS, podchodziłem raz do niego, ale za wolno mi to szło a czas gonił. Zbieram się ale średnio mi to wychodzi. Aczkolwiek, jak ktoś się uczy to polecam jak najszybciej zacząć korzystać :) Na eduweb jest fajny kurs Preprocesorów CSS, właśnie jest opisywany SASS i LESS na raz, na tych samych przykładach.
Ja w projektach na studiach zawsze korzystałem z bootstrapa. Nie wykorzystywałem tam 90% możliwości, ale chyba najlepsze narzędzie do zrobienia względnie ładnego frontendu bez większej zabawy. No i w pracy też korzystamy z niego.