Tworzenie layoutów

Rollercoster OP · 19-01-2014 14:16

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

Kusterek · 19-01-2014 14:22

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

Pytoo · 19-01-2014 14:31

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)

Bazan · 19-01-2014 17:14

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:

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;}

A dziś zrobiłbym to tak:

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;}

Tym sposobem stało się to bardziej uniwersalne :)
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 :)

Rollercoster OP · 19-01-2014 20:34

Fajnie by było gdybyś to napisał, serio !
Jakbyś potrzebował pomocy z blogiem to wal również na PW, coś za coś :D

Bazan · 19-01-2014 23:26

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

Rollercoster OP · 21-01-2014 19:04

Używacie bootstrapa lub/i LESS ?

Bazan · 23-01-2014 18:20

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.

Absherr · 23-01-2014 18:29

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.

Temat: Tworzenie layoutów

Narzędzia tematu

Oceń ten temat

Tworzenie layoutów

Informacje o temacie

Użytkownicy przeglądający temat

Podobne tematy

[Inne] Tworzenie domeny No-IP - sposób jak ominąć zmienne IP!*

[Poradnik] Tworzenie własnej skórki do Tibii.

[Podstawy] Tworzenie najazdów*

[Inne][7.6] Tworzenie new Vocations !*

Jak wygląda tworzenie Questów?

Zakładki

Zakładki

Zasady postowania