Forum PHP.pl > Struktura HTML5 oraz sprite

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Struktura HTML5 oraz sprite

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

Mefiuu

11.06.2014, 18:51:42

Witam serdecznie. Chciałbym zapytać bardziej doświadczonych forumowiczów o sprawę związaną z HTML5. Sam dopiero raczkuję w tym temacie, wcześniej pisałem w xhtml. Chcę sobie zrobić prostą stronkę, zawierającą jakieś tam ze 3 czy 4 elementy blokowe. Normalnie w xhtml zrobiłbym to tak, że podzieliłbym to divami na 3 jednakowe bloczki, ostylował i by było. Nie wiem jak to zrobić w przypadku HTML5. Czytając o nowych znacznikach i ich własnościach doszedłem do wniosku, że struktura by mogła wyglądać jakoś tak:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<head>
...
</head>
<body>
<header>
logo
</header>
 
<nav>
  <ul>
     <li>menu</li>
  </ul>
</nav>
 
 
<section class="bloczek">
pierwszy
</section>
 
<section class="bloczek">
drugi
</section>
 
<section class="bloczek">
trzeci
</section>
 
</body>
</html>
 
[HTML] pobierz, plaintext

czy taka struktura jest mniej więcej poprawna ? chodzi mi szczególnie o elementy <section>, czy mogę ich używać do wypełniania taką normalną treścią, obrazkami, przyciskami itd.

Drugie pytanie dotyczy technologii sprite. Czy warto, jeśli mam dajmy na to te trzy, cztery bloczki, każdy z innym tłem, zapisywać je jako jeden obrazek i go ustawić jako tło dla jakiegoś jednego bloczka obejmującego je wszystkie czy lepiej podzielić ten obrazek na trzy autonomiczne tła ?

Z góry dziękuję , pozdrawiam.

fate

18.06.2014, 19:40:44

Pyton_000

19.06.2014, 08:05:36

Sprite jest po to aby zminimalizować ilość requestów dla dużej ilości bardzo małych obrazków, ponieważ koszt całego requesta dla jednego malutkiego obrazka przewyższa jego wartość.

Połączenie w sprite pozwoli dużo szybciej pobrać content.

KotWButach

15.07.2014, 07:40:34

Ja bym umieścił nav w header choć Twój kod jest jak najbardziej poprawny
zresztą bardzo dobrze opisują to takie obrazki jak ten

http://www.codeproject.com/KB/HTML/semanti...5pagelayout.png

tutaj masz strukturę dokładnie taką jak podałeś.
http://uofgts.com/BasicWD/layout/html5-layout.png

No i przez przypadek odświezyłem posta

proszek

15.07.2014, 17:42:08

Jeżeli chodzi o semantykę to z tego co pamiętam nie powinno się używać <section> jako kontenera dla treści. Od tego jest <div>. Ja raczej zrobiłbym <section class="content">div1 div2 div3</section>. Ale z punktu widzenia przeglądarki twój kod jest jak najbardziej poprawny.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.