ramki, tabelki, divy, inne - styl pisania

0

Witam
Tak się ostatnio zastanawiałem - za mojej młodości na topie były strony w ramkach, później ktoś stwierdził, że to be i cool strony opiera się o tabelki. Później ktoś (inny, ten sam?) stwierdził, że tabelki są be i teraz strony opiera się o divy.
Jako iż moja styczność z www (php, css, html) jest raczej nikła i nigdy nie był to dla mnie priorytet czy też źródło zarobku to nigdy nie wnikałem w szczegóły.
Jak to jest teraz - co jest cool. Pytam, bo mam do napisania dla znajomej prostą stronkę (4-5 podstron) poradni AA i nie ciekaw jestem jak się takie strony pisze dzisiaj.

0

Zapodam coś od siebie, może będzie pomocne:

Layout:

Obecnie głównie na div-ach. Zminimalizowanie znaczników, jeśli chodzi o o samą strukturę ma znaczenie m.in w dostępności takiej strony. A w przypadku strony poradni jakiekolwiek myślę, że ma nawet duże znaczenie. Ramki to zło, właśnie jeśli chodzi o kwestię dostępności, zresztą ich funkcjonalność można zastąpić Ajax-em i np przy pomocy biblioteki jQuery jedną linijką kodu wywołując funkcję load();

Wg mnie odpowiednie użycie tabel do tworzenia szablonu to też nie takie znowu wielkie "zabobony". O ile zminimalizujesz ilość znaczników stricte tabelowych, tzw. układ hybrydowy.

Struktura pod zawartość strony to już inna bajka. Tu nawet ważniejsze jest użycie dobrze dobranych znaczników. Dla przykładu zobacz sobie główną stronę nk. np. panelik z ostatnio dodanymi fotkami. Ilość zbędnych znaczników tam użytych można by zminimalizować o jakieś 70%, używając listy definicji. A tam wszechobecne są absolutnie zbędne divy z atrybutami class, ktoś do końca nie zrozumiał o co chodzi w standardach sieciowych i stąd takie kwiatki.

Przydałoby się, żebyś odświeżył swoją wiedzą i przyjął jakąś książkę o tej tematyce, np:

http://astore.amazon.com/simplebits-20/detail/1590593812

Przyda się na pewno nie tylko do tej małej strony.

0

ja robię tak: w html tylko podstawowe znaczniki (przede wszystkim div, span, a, h#, ul, li, form, img), nigdy układ strony, tylko łączenie treści strony w bloki. wszystko co związane z wyglądem w css, czasem także obrazki (zamiast img w kodzie strony div, a w css ustawiam jego rozmiary i tło).
tabelki tylko grupowania danych, nigdy do formatowania wyglądu. ramki - nigdy (poza iframe).

popatrz np. na http://www.csszengarden.com/

0

@GhostDog dzięki za info, jednak aż tak mi nie zależy aby się literaturować :p - ot mam coś takiego do zrobienia to chcę żeby to jakoś tam wyglądało a nie jakbym to w wordzie składał.

@ŁF bardzo to schludnie wygląda. Przykładzik jak zwykle tłumaczy więcej niż tysiąc słów i myślę, że niej więcej wiem ocb :)

0

Proponuje zrobić na div'ach i zewnętrznym arkuszu stylów css, ponieważ później jest bardzo łatwo wprowadzić jakieś zamiany na stronie, ale to jest tylko moje zdanie [green]
a tutaj podaję link dlaczego warto jest zrobić stronę w div, a nie w tabeli ;) http://osiolki.net/tabelki/

0

Ze tak się wtrące , w życiu zrobiłem ze 2 strony jedną z tab drugą na div .
Na divach było fajnie ale strasznie się mordowałem z głównym pojemnikiem ..
z tabelą nie ma problemu przy zmianie rozdzielczości ekranu rozciąga sie do jego rozmiaru
jak to uzyskać z div ?
W końcu wsadziłem div w table - gupie nie ...

@Misiekd
Stronę z div zrobiłem z przerobionego szablonu - których jest masa w internecie i nawet to
wygląda .. (tzn te szablony :-D ) , wystarczy przejrzeć kod i trochę przerobić ..
z tego korzystałem:
http://www.ittechnology.us/wyszukiwanie-lokalne-przewodnik/darmowe-szablony-www/

0

Zrobienie siatki opartej na jednym elemencie

0
dzejo napisał(a)

Ze tak się wtrące , w życiu zrobiłem ze 2 strony jedną z tab drugą na div .
Na divach było fajnie ale strasznie się mordowałem z głównym pojemnikiem ..
z tabelą nie ma problemu przy zmianie rozdzielczości ekranu rozciąga sie do jego rozmiaru
jak to uzyskać z div ?

podać szerokość i wysokość div (i wszystkich jego parentów) w procentach?

0

Ramek i tabel do layoutu nie powinno się używać. Powinno się użyć "semantycznych znaczników". Ludzie mówią na to "robienie strony na divach", co być może wynika z niedbalstwa, chęci uproszczenia, czy braku wiedzy. A początkujących niestety wprowadza w błąd. Tak naprawdę element div nie wprowadza do dokumentu żadnego znaczenia i trzeba go... unikać. I stosować inne znaczniki, które podkreślą (lub nawet: określą) znaczenie treści, która się w nich znajduje.

Przykładowo, do oznaczenia nagłówków powinieneś użyć h1, h2 itd., aż do h6. Listy niewielkich, powtarzających się rzeczy powinieneś zamknąć w ul lub (raczej rzadziej) w ol. Listami rzeczy jest np. menu nawigacyjne (lista linków), galeria (lista miniatur obrazków), czy wg niektórych nawet elementy formularza (lista par etykieta-pole). A skoro o tym mowa, to ważne jest użycie elementu label do oznaczenia etykiet pól w formularzu. Niektórzy też umieszczają informacje o autorze czy właścicielu strony (chodzi o te informacje przeważnie umieszczane w stopce strony).

Wewnątrz treści trzeba używać strong i em do podkreślenia, że jakiś fragment tekstu jest ważniejszy. W ten sposób -- zwykle używając strong -- pogrubia się małe fragmenty tekstu (po kilka słów), by uczynić go łatwiejszym do skanowania. Skróty należy umieszczać w elemencie abbr, którego atrybut title powinien zawierać rozwinięcie skrótu. Dłuższe cytaty (zwykle: takie na wiele linii) powinny być w elemencie blockquote, krótsze w elemencie q. Każdy paragraf tekstu powinien się oczywiście znaleźć w elemencie p. Jeśli powiedzmy na blogu update'ujemy notkę, bo ktoś w komentarzach zwrócił nam uwagę na błąd, to do oznaczenia usuniętego tekstu można użyć elementu del, a do oznaczenia dodanego -- elementu ins.

Jak widzisz, elementów jest więcej niż div. I każdy coś oznacza. W przeciwieństwie do diva, który jest elementem uniwersalnym i nie oznacza praktycznie nic -- jedynie tyle, że oddziela jakieś części dokumentu (nie definiuje się jednak, czy oznacza to silny podział -- jak na na sekcje lub poszczególne notki na blogu -- czy słabszy -- jak na paragrafy wewnątrz jednego testu).

Chodzi o to, że maszyny -- przeglądarki, roboty wyszukiwarek (Google!) itd. -- nie wiedzą, że jakiś fragment tekstu umieszczony w divie jest nagłówkiem i podsumowuje cały tekst. Spróbuj spojrzeć na ten fragment kodu, ale oczami maszyny:

<div>Pierwszy nagłówek</div>
<div>Jakiś poprzedzający tekst (...)</div>
<div>Jeszcze trochę tekstu (...) bswierczynski mówi:</div>
<div>Używajcie divów, ale tylko w ostateczności! Czyli niestety bardzo często! RTFM!</div>
<div>I trzeba mu przyznać, że ma rację</div>
<div>Drugi nagłówek</div>
<div>Tekst (...)</div>

Maszyna nie rozpozna, co jest czym. O ile być może wyłapie pierwszy nagłówek (tylko dlatego, że jest na samym początku), to potem ma tylko serię divów. Nie domyśli się, że szósty div zawiera kolejny nagłówek.

Nawet jeśli zastosujesz atrybut class i napiszesz:

<div class="naglowek">Pierwszy nagłówek</div>
<div>Jakiś poprzedzający tekst (...)</div>
<div>Jeszcze trochę tekstu (...) bswierczynski mówi:</div>
<div>Używajcie divów, ale tylko w ostateczności! Czyli niestety bardzo często! RTFM!</div>
<div>I trzeba mu przyznać, że ma rację</div>
<div class="naglowek">Drugi nagłówek</div>
<div>Tekst (...)</div>

to to też nic wyszukiwarce nie powie. Bo klasa "naglowek" nie jest nigdzie ustandaryzowana. Mógłbyś tam wstawić "header", "heading", "nagloweczek", czy "dupajasiupierdzistasiu".

I tu z pomocą przychodzą elementy (tagi), ustandaryzowane w specyfikacji HTML:

<h2>Pierwszy nagłówek</h2>
<p>Jakiś poprzedzający tekst (...)</p>
<p>Jeszcze trochę tekstu (...) bswierczynski mówi:</p>
<blockquote cite=http://twitter.com/bswierczynski>
  <p>Używajcie divów, ale tylko w ostateczności! Czyli niestety bardzo często! <abrr title="Read The Freakin' Manual">RTFM</abbr>!</p>
</blockquote>
<p>I trzeba mu przyznać, że ma rację</p>
<h2>Drugi nagłówek</h2>
<p>Tekst (...)</p>

Powyższy fragment dokumentu jest już zakodowany zupełnie inaczej! Tu robot wyszukiwarki wie, w jaki sposób nagłówki dzielą tekst na fragmenty (od h2 do h2). Dodatkowo, oznaczony jest cytat wraz ze źródłem, a w cytacie mamy skrót -- jak ktoś najedzie myszą na RTFM, to wyświetli się jego rozwinięcie :).

To powiedziawszy muszę dodać, że "divów" niestety używa się bardzo często. Trzeba tak robić, bo specyfikacja HTML 4(.01) jest zbyt uboga i ma stosunkowo niewiele semantycznych znaczników. Nie ma np. znacznika pozwalającego na oddzielenie postów na forum, czy notek na blogu. Więc używamy divów. Trzymając się przykładu z blogiem, HTML 4 nie ma znaczników pozwalających pogrupować część nagłówkową notki -- tę z autorem, datą i paroma innymi informacjami. Nie ma też elementu mogącego reprezentować poboczną zawartość, która zwykle znajduje się w pasku bocznym. W tych wszystkich przypadkach musimy użyć divów lub innych ogólnych elementów.

Ale w HTML-u 5 będzie już inaczej. Notki na blogu zamknie się w elemencie article, sekcje nagłówkowe w header, a zawartość poboczną w aside.

Rozpisałem się na ten temat by wytłumaczyć PO CO my to wszystko robimy. Po co stosujemy semantyczne znaczniki. Bez zrozumienia tych rzeczy raczej nie można być dobrym webdeveloperem. Tak, przerzucenie prezentacji do zewnętrznych arkuszy CSS zmniejsza rozmiar strony (szczególnie zasobów niebuforowanych przez przeglądarkę) i daje większą elastyczność. Ale pozwala również uczynić stronę bardziej przyjazną robotom wyszukiwarek (co daje nam lepszą pozycję w rankingu Google!) i wszystkim innym robotom. A ludzie przeglądają Sieć właśnie przy użyciu robotów, więc jest to dość istotne.


Co do rozciągania divów na całą szerokość strony, to można też... w ogóle nie określać szerokości. Ani im, ani elementom nadrzędnym. W CSS elementy blokowe domyślnie rozciągają się na całą dostępną im szerokość.

0

No jakoś nie bardzo mi to działało , owszem jeśli div był już zawarty w jakimś div
to działa , chodzi mi o zewnętrzny - czyli właściwie ekran , jak się poda w procentach
to po zmianie rozdzielczości nie dostosowuje się do rozmiaru całego ekranu .
Miało być tak - zewnętrzny kontener na cały ekran niezależnie od rozdzielczości
wypełniony jakimś tłem bckground a w środku reszta ,
czyli mam zewnętrzny 100% i np. 2 div w środku obok siebie prz. 100px width
w przypadku tabeli i 100% width działa a dla div nie , chyba że coś zwaliłem
bo nie mam w tym doświadczenia ...

0

@dzejo:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title></title> <style type="text/css"> html, body {width:100%;height:100%;margin:0} #container {width:100%;background-color:#f00;height:100%;text-align:center;} #body {margin:auto;width:100px;height:100%;background-color:#0f0} </style> </head> <body>
</body> </html> ``` o to chodzi?
0

@dzejo:
Pokaż konkretnie o co Ci chodzi. Daj np. działający kod na tabelach, albo samego screena, żebyśmy wiedzieli jaki efekt chcesz osiągnąć. Plus dopisz komentarz co ma się z tym dziać po zmianie rozdziałki (a najlepiej daj 2 screeny w różnych rozdziałkach, to to po prostu zobaczymy).

Chodzi Ci w końcu o wysokość, czy szerokość? Tło to kolor, czy obrazek? Jeśli obrazek, to ma być powtarzany ("kafelki") czy rozciągany (skalowany odpowiednio do rozmiarów ekranu)?

Jeśli chcesz mieć tylko kolor tła pod całą stroną, to wystarczy w stylach deklaracja (dla czerwonego tła bez obrazka):

html { background: red; }

I ten kolor będzie pod całym obszarem strony, niezależnie od rozmiaru okna przeglądarki.

0

@dzejo kontener "otaczającym" jest dla Ciebie body, z reguły nie ma powodu do stosowania zamiennika w postaci

</p>
0

@ŁF
Takie coś jak podałeś , a dokładniej:
--Takie coś--
Niby dobrze , tylko ciągle mam problemy ,
np. Opera lokalnie nie wyświetla mi obrazka wcale
Explorer wyświetla.
jak dodam marginesy do pojemnika prawego to ucieka cały na dół strony nawet w % [rotfl] .
ale i tak lepiej , wcześniej div główny zawsze kończył mi się na rozmiarze obrazka ,teraz jest ok.
A można ten obrazek z tła rozciągnąć zamiast powtarzać ?

Tu CSS

@GhostDog
wiem że tak można , ale się uparłem na wrapp w div ...

Jeszcze jedno pytanie , jak podzielić obszar równo 50% pomiędzy lewy i prawy :
jak dam w css coś takiego to niby jest dobrze :

#container_left{

              width: 50%;
              height: 480px;
              background:#ffffff;
              color:#2a2a2a;
              text-align:center;
               border:1px solid #999999;
               margin:left;
               float:left;
            }
            
#container_right{

              width: 49%;
              height: 480px;
              background:#ffffff;
              text-align:center;
               border:1px solid #999999;
               color:#0a0a0a;
               float:left;
            }

tylko dlaczego jak oba width są == 50% to container_right spada na dół strony ?

0

Bo są 1px obramowania.

0

Tak myślałem , czyli nie można tego "przygwoździć" aby 100%div zewn==2x50%div srodek jak jest obramowanie
i nie spadło na dół ?

0

to ja jeszcze jedno pytanko - w jaki sposób dodajecie elementy stałe, które są na wszystkich stronach (np. menu / logo / stopka) aby nie powielać na każdej stronie tego samego kodu.

I aby było jasne mówimy cały czas o stronach statycznych (w sensie nie korzystających z BD), co nie znaczy bez php :).

Wymyśliłem aby cały kod zawrzeć w jakiejś procedurze php a potem ją wywoływać w odpowiednim miejscu. Ale czy to jest "ładne" (jakoś tak średni to do mnie przemawia)? Może można jakoś inaczej?

A i jeszcze jakby był ktoś tak dobry i naszkicował jak się realizuje MVC (wszyscy piszą aby nie mieszać html z php no ale w którymś miejscu on musi być wymieszany :/) w aplikacjach webowych

0

Ad. 1

Można użyć ajax, np jQuery i funkcji load().

Ad. 2 Jeśli przelałeś na "papier" tą procedurę to ją pokaż.

Ad. 3 Jeśli chodzi o PHP i MVC, wiadomo, że trochę tego kodu w widoku jest oraz musi być on odpowiedzialny tylko i wyłącznie za wyświetlanie danych. Można użyć też szablonów typu Smarty, ale to głównie do złożonych, dużych projektów.

Z góry przepraszam za wprowadzenie w błąd w punkcie 1 swojego postu, na który zwróciłem uwagę, dzięki @bswierczynskiemu.
Nie doczytałem i zrozumiałem, że ma być to robione bez skryptu po stronie serwera, a tylko jako zamiennik dla ramek statycznej treści, więc w takiej sytuacji, wydało mi się przystępną radą AJAX + jQuery, jako proste i szybkie rozwiązanie, na którym pytającemu myślę zależy.

</b>

0

@Misiekd:
@GhostDog:
Nie, w żadnym wypadku NIE powinno się tu używać Ajaxa! No dobra, są od tej reguły rzadkie wyjątki, ale one są... rzadkie! Tutaj takiego czegoś nie widzę. NIE WOLNO używać Ajaxa gdzie popadnie tylko dlatego, że jest modny i że z jQuery używa się go łatwo!

Kolega tutaj pewnie użyłby tego do nagłówka, czy nawet menu nawigacyjnego. I co by było, gdyby wczytywał te rzeczy Ajaxem? Ano nie byłyby dostępne dla UA (ang. User Agent), które nie obsługują w danej chwili z JavaScriptu. Raz, że to dotyczy przeglądarek używanych przez ludzi (szczególnie na komórkach czy terminalach tekstowych JS może być całkowicie wyłączony lub bardzo ograniczony, jak w Operze Mini). A dwa, i to jest prawdopodobnie znacznie ważniejsze, z takim JS nie da sobie rady... Google. Ono po prostu widzi HTML. Googlebot nie odpali sobie JavaScriptu, nie odpali więc Ajaxa, który ściągnie mu nagłówek czy menu nawigacyjne. Skutkiem tego Google nie zarejestruje żadnego tekstu w nagłówku strony (który może być ździebko ważny do pozycjonowania strony głównej, prawda?), ani nie otrzyma linków nawigacyjnych, więc nie podąży za menu. Więc w ogóle nie odwiedzi innych podstron. To drugie można obejść kierując Google bardziej bezpośrednio na inne podstrony za pomocą zewnętrznych narzędzi, ale po co?

Tutaj @Misiekd może robić tak, jak robi. Skorzystanie z funkcji to proste, ale sprawdzone rozwiązanie. Nie jest to może podejście obiektowe, ale też ono nie zawsze jest potrzebne. Wiele udanych CMS-ów korzysta lub przynajmniej przez wiele lat korzystało ze zwykłych funkcji (WordPress!). Tylko wtedy rozważ zaimplementowanie tego tak, że funkcja po prostu includuje HTML z jakiegoś osobnego pliku.

Można też nawet olać dodatkowe funkcje i użyć bezpośrednio include/require, szczególnie gdy chcesz dołączyć naprawdę stałe elementy. Można nawet olać PHP zupełnie i skorzystać z SSI (Server Side Includes).

W żadnym wypadku nie widzę tu zaś zastosowania dla Ajaxa.

Skoro @Misiekd pytasz o MVC, to może zastosowałbyś jakiś szkielet, który z niego korzysta? Choćby stosunkowo lightowy? Np. Zend Framework, czy CodeIgniter? Albo chociaż zerknij na kod napisany w tych szkieletach. Zobaczysz, jak wygląda porządnie zrobione, obiektowe MVC. Na stronie CodeIgnitera są nawet filmiki.

0
dzejo napisał(a)

@ŁF
Takie coś jak podałeś , a dokładniej:
--Takie coś--
po container_left dodaj jakiś znacznik ze stylem clear:both, np. br. float wisi ponad parentem nie wpływając na jego wysokość.

dzejo napisał(a)

jak dodam marginesy do pojemnika prawego to ucieka cały na dół strony nawet w % [rotfl] .
ale i tak lepiej , wcześniej div główny zawsze kończył mi się na rozmiarze obrazka ,teraz jest ok.
tak jak tłumaczyli koledzy - margines dodaje się do szerokości, więc masz 50%+margin-left+margin-right, nic dziwnego, że się nie mieści. potrzebujesz marginesu mimo to? umieść wewnątrz div z marginesami.

dzejo napisał(a)

A można ten obrazek z tła rozciągnąć zamiast powtarzać ?
google... http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

dzejo napisał(a)

tylko dlaczego jak oba width są == 50% to container_right spada na dół strony ?
jw - border dodaje się do szerokości elementu. rozwiązanie identyczne - wewnątrz div z borderem.

0

Dzięki wszystkim za odpowiedzi , to mi wystarczy .
Pozdrowienia..

0

dobrzy ludzie jakby się Wam chciało zerknąć na http://www.fhumag.yoyo.pl/ i wytknąć błędy zarówno w kodzie jak i w wyglądzie.
Strona powstała na podstawie jednego z szablonów, które dał dzejo :D

0

Pomimo tego, że wiele mi brakuje do dobrego człowieka:

<h1>
NZOZ ZLO SP. z o.o.
</h1>
<h2>
Poradnia Leczenia Uzależnień i Współuzależnienia
</h2>

Źle dla SEO pierwszy nagłówek kompletnie nic nie znaczący, zamień elementy, a wygląd dostosuj w CSS, dla tego skrótu użyj <abbr> (ogólnie dla wszystkich wystąpień)

<h3>Możemy Ci pomóc
</h3>

Kompletnie nic nie znaczący nagłówek, nie ma w nim słów kluczy, zmień np. na:

UZALEŻNIENIA POMOC, czy jakoś tak...

Poza tym dlaczego

pod ul a nie przed, do poprawki.</p>

Staraj się w treści głównej strony używać słów kluczowych dużo miksów z : alkohol narkomania itd.

Poczytaj o tagach meta i je uzupełnij w prawidłowy sposób (wiem, że google tak się nie patrzy na keywords, ale description jest dalej ważna)
Czeka mnie format więc uciekam, chyba laptop mi się sypie, to kara za grzechy:(, pozdrawiam




 
0

generalnie na samą treść strony nie mam wpływu bo mam ją narzuconą ale co do reszty to pozmieniam i się jeszcze "pochwalę" :p

0

Dodam od siebie, że teraz praktycznie wszystkie stromy robi się na div-ach. Dobrze to wpływa na walidację strony i tym samym na indeksację. Zauważ, że jak była strona na ramkach to treść zawarta w ramce odsyłała do innego adresu strony - co powodowało indeksację nie tego adresu co trzeba. Z kolei tabelki są nieco mało mobilne...


http://budujmy.fm.interia.pl/

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