Budowa strony..., ... na tablekach ? Opcje

[Diablos]

Witam. Nie raz spotkalem sie z opiniami, że strona oparta na tabelach jest nieprofesjonalna itd itp. Ci co siedza juz w tym dluzej gardzą także sposobem ciecia grafik przez Adobe Photoshopa (czyli tzw. spacer). Co w tym jest złego ? Czemu to jest nieprofesjonalne ? Jak aktualnie worzy sie i naczym opiera profesjonalna www ?

[Draugfor]

Hej.
No niby na <div>ach jest profesjonalnie, ale ja tam wole tabelki - tak jest mi wygodniej i latwiej, bo pozycjonowanie (niezbedne w zasadzie przy divach) jeszcze lekko kuleje w przegladarkach.
Nie wiem, czy tabelki sa takie zle, bo jakos, jak wspomniales, wiele programow przy tworzeniu layoutu buduje strukture strony na tabelach.
Pozdrawiam. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[Diablos]

Na <div>ach ? Ale to chyba zeby odpowiednio rozmiescic divy to i tak trzeba zrobic jakies tabelki ?

[revyag]

Kod z pociętą grafiką generowany przez programy jest daleki od doskonałości. Raczej nie polecam jego używania.
@Draugfor - co rozumiesz przez to że pozycjonowanie kuleje ?

[Diablos]

A co polecacie ? (IMG:http://forum.php.pl/style_emoticons/default/rolleyes.gif)

PS. mógłby ktos mi dac linka do przykładowej strony zrobionej an divach ?

[yavaho]

Ja jakies rok temu robilem jeszcze na tabelkach teraz juz tylko na div'ach. Oczywiscie nie zrezygnowalem zupelnie z tabelek, pewne elementy musza byc zrobione w tabelkach (czyli najzwyklejsze tabele).
A grafike tne w photoshopie zapisujac jako obrazki bo tylko to mi jest potrzebne, a nie jako strona html bo wygenerowany kod do niczego mi nie pasuje.
To jest pierwsza moja strona ktora powstała na diva'ch NSTT

[Diablos]

A całą grafike i jej rozmieszczenie opisujesz w css ?

[yavaho]

A całą grafike i jej rozmieszczenie opisujesz w css ?

Tak. I to jest najrosadniejszy sposob podczas stosowania div'ow.
Jeden minus to taki, ze trzeba poznac roznice w interpretacji styli pomiedzy poszczegolnymi przegladarkami. Bo kazda potrafi inaczej wyswietlic strone (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Tu jeszcze jeden przyklad strony zrobionej na div'ach na ktorej sie wzorowalem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[Draugfor]

@Draugfor - co rozumiesz przez to że pozycjonowanie kuleje ?

Ach, te numery z postion: fixed na przyklad.

[Diablos]

a co oznacza XHTML ? czym sie rózni od zwyklego HTML'a ?
a do czego słuzą Smarty itp ?

Ten post edytował Diablos 17.06.2005, 17:13:31

[matid]

http://wiki.php.pl/index.php/XHTML
http://wiki.php.pl/index.php/Smarty

Może by tak poszukać?

Ten post edytował matid 17.06.2005, 17:19:05

[Diablos]

Bardziej zalecane jest napisanie strony w XHTML czy HTML'u ? Przeczytałem ze XHTML ma wieksze mozliwosci.

Czym są kanały RSS, co one dają ?

Ten post edytował Diablos 17.06.2005, 18:09:41

[matid]

Zaleca się pisanie stron w XHTMLu

A co do RSS: http://pl.wikipedia.org/wiki/Really_Simple_Syndication

[czachor]

Podłączę się apropo XHTML'a... Czytałem różne opinie... Wg niektórych lepiej używać xhtml 1.0 zamiast 1.1, wg innych odwrotnie... Jak to wygląda u was?

[Diablos]

Informacje z Wikipedii nie wyjasniły mi bardzo "na chłopski" rozum po co są kanały RSS , do czego słuzą i na jakiej zasadzie (IMG:http://forum.php.pl/style_emoticons/default/dry.gif)

Z pcozatku myslalem ze czytnik RSS tworzymy u siebie dla siebie, a to z Wikipedii zamotało mi i wychodzi na to ze robimy kanał RSS zeby inni mogli od nas cos pobierac ? (IMG:http://forum.php.pl/style_emoticons/default/worriedsmiley.gif)

[matid]

Z pcozatku myslalem ze czytnik RSS tworzymy u siebie dla siebie, a to z Wikipedii zamotało mi i wychodzi na to ze robimy kanał RSS zeby inni mogli od nas cos pobierac ? (IMG:http://forum.php.pl/style_emoticons/default/worriedsmiley.gif)

Polega to dokładnie na tym, co jest opisane w Wikipedii. Strona internetowa tworzy kanał RSS, aby użytkownik korzystając z czytników (czy to oddzielnych programów, czy wbudowanych w przeglądarki internetowe lub klienty pocztowe) mógł pobierać nagłówki wiadomości.

[Diablos]

Czyli czytniki RSS sa przydatne dla rozbudowanych serwisów, z ktorych rozni ludzie moga czerpac rozne ciekawe informacje. A to jest dla nich ułatwienie ?
Raczej nie przyda sie dla strony klanowej Quake (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

[matid]

Czyli czytniki RSS sa przydatne dla rozbudowanych serwisów, z ktorych rozni ludzie moga czerpac rozne ciekawe informacje. A to jest dla nich ułatwienie ?
Raczej nie przyda sie dla strony klanowej Quake (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Generalnie tak. A ułatwieniem jest to wielkim, nie wyobrażam sobie teraz korzystania z Internetu bez subskrypcji kilku kanałów RSS.

A co do strony klanowej Quake: kanał RSS na temat terminów meczów albo ważnych informacji dla członków klanu to całkiem ciekawy pomysł.

[Diablos]

Odnosnie jeszcze divów. Wszystkie przegladarki jednakowo odczytaja kod, i nie bedzie róznic w wygladzie z dwoch roznych przegadarek ?

[Chewolf]

mógłby ktos mi dac linka do przykładowej strony zrobionej an divach ?

Strona zbudowana na Divach : http://mp3.dabnet.pl/

[Diablos]

w kursie XML przeczytalem ze do "#" odnosi sie id a do "." class. Co bardziej opłaca sie uzywac ? Czym o sie rozni ? Jedno jest szybsze od drugiego ? czy poprostu chodzi tutaj o jakis podział, oraz ułatwienie pracy tworzacemu servis ?

[Draugfor]

Jak masz w dokumencie HTML jakis jeden unikalny element, ktory ma wartosc id, to dla podkreslenia tego w kodzie CSS mozesz dac #, a jesli masz wiele podobnych elementow, ktore naleza do tej samej klasy, to dajesz kropke.

[yavaho]

Odnosnie jeszcze divów. Wszystkie przegladarki jednakowo odczytaja kod, i nie bedzie róznic w wygladzie z dwoch roznych przegadarek ?

Przegladarki roznie interpretuja style.
np: padding dla jednej przegladerki to moze byc zewnetrzy margines a dla innej wewnetrzy. Albo jedna i ta sama przgladarka paddind dla elementow blokowych ustawi jako margines zewnetrzy a dla elementow liniowych wewnetrzy. Podobnie jest z border.

Zawsze mialem problem ze stylami w takim prostym kodzie jak ponizej aby byl tak samo wyswietlony we wszystkich przegladarkach.

[HTML] pobierz, plaintext 
<div><a href="strona1.php">link1</a></div>
<div><a href="strona2.php">link2</a></div>
<div><a href="strona3.php">link3</a></div>
[HTML] pobierz, plaintext 

Z tym ze w stylach trzeba okreslic kilka atrybutow:
-div ma miec z gory orkeslone wymiary bo bedzie w nim niepowtarzajace sie tlo.
-div ma miec okreslone wszystkie marginesy (zwlaszcza gorny)
-link tez musi miec okreslone marginesy w stosunku do div'a (zwlaszcza gorny)

[mike]

Jak już dajesz przykład to daj jakiś dobry.
Lista linków i każdy w elemencie blokowym <div> ? Bez obrazy ale głupi pomysł.
1. Można to samo zrobić nadając elementowi <a> styl display: block;
albo
2. A do wyświetlania listy służy coś innego (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[HTML] pobierz, plaintext 
<ul>
    <li><a href="" class="menu">Link</a></li>
    <li><a href="" class="menu">Link</a></li>
    <li><a href="" class="menu">Link</a></li>
    <li><a href="" class="menu">Link</a></li>
</ul>
[HTML] pobierz, plaintext 

[matid]

[HTML] pobierz, plaintext 
<ul>
    <li><a href="" class="menu">Link</a></li>
    <li><a href="" class="menu">Link</a></li>
    <li><a href="" class="menu">Link</a></li>
    <li><a href="" class="menu">Link</a></li>
</ul>
[HTML] pobierz, plaintext 

A nie lepiej tak:

[HTML] pobierz, plaintext 
<ul class="menu">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
[HTML] pobierz, plaintext 

A potem w stylach mamy:

Kod

ul.menu a
{
}
ul.menu a:hover
{
}

itp.

PS. Menu jako klasa, bo ktoś może chcieć mieć kilka menu na stronie.

[Diablos]

Zaczałem kombinowac nad własna strona na divach. Nie wiem co zle robie ale zielony pasek i miejsce na button rozjerzdzaja sie ie nie wygladaja tak jakbym chciał.

http://mh.one.pl/~stron/

[mike]

Twoja (@matid) uwaga jest co najmniej dziwna.
Z tego wyjdzie że może lepiej tak:

[HTML] pobierz, plaintext 
<ul class="MainMenu">
<!-- ... -->
</ul>
[HTML] pobierz, plaintext 

Możnaby tak długo.

Chodziło mi o zwrócenie uwagi że do listy służy <ul>

[Diablos]

Oto stronka: łądnie pocieta w Photoshopie i zrobiona na tabelkach. Mógłby ktos podpowiedziec jak to bedzie wygladalo na divhach ?

[yavaho]

Lista linków i każdy w elemencie blokowym <div> ? Bez obrazy ale głupi pomysł.

Nie wazne w jakich tagach html to menu bedzie umieszczne. Dla mnie wazne bylo jakie style zastosujecie aby to normalnie wygladalo we wszystkich przegladarkach.
<li> to tez glupi pomysl aby tam wsadzic grafike a zwlaszcza ustawic wszystkie takie marginesy jak podalem w poprzednim poscie.

Jak już dajesz przykład to daj jakiś dobry.

Tylko w ten sposob jak ponizej zrobilem to aby sie nie rozjezdzalo w roznych przegladarkach.
Pokazcie swoj przyklad.

[HTML] pobierz, plaintext 
<style>
.menu {
display: block;
margin: 5px 0px 0px 0px;
width:200px;
height:30px;
padding: 0px 0px 0px 10px;
line-height:30px;
}
a:link.menu, a:visited.menu {
background: #8CB3DA url('img_1.png');
color: #FFFFFF
}
a:hover.menu, a:active.menu {
background: #8CB3DA url('img_2.png');
color: #FF0000;
}
.blok{
overflow:hidden;
width:200px;
margin-left:10px;
}
</style>
 
<div class="blok">
<a class="menu" href="">Link</a>
<a class="menu" href="">Link</a>
<a class="menu" href="">Link</a>
</div>
[HTML] pobierz, plaintext 

[Diablos]

Ogolnie jak tak patrze to wychodzi ze kazdy div zastepuje jedna tabelke. To tak jakby mozna powiedziec taki zamiennik ?

[mike]

Pokazcie swoj przyklad.

[HTML] pobierz, plaintext 
<style>
ul.menu 
{
    width: 165px;
    margin-left: 0px;
    padding-left: 25px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: #000000;
    list-style-image: url("gfx/menu_left_small_bullet.jpg");
}
 
a.menu:active,
a.menu:visited,
a.menu:link
{
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: #000000;
}
 
a.menu:hover
{
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px dashed #113B85;
    color: #000000;
}
</style>
<ul class="menu">
<li><a href="index.html" class="menu">Item 1</a></li>
<li><a href="index.html" class="menu">Item 2</a></li>
<li><a href="index.html" class="menu">Item 3</a></li>
<li><a href="index.html" class="menu">Item 4</a></li>
</ul>
[HTML] pobierz, plaintext 

Ogolnie jak tak patrze to wychodzi ze kazdy div zastepuje jedna tabelke. To tak jakby mozna powiedziec taki zamiennik ?.

No nie do końca.
<div> jest elementem blokowym coo oznacza że możesz ( służy do ) umieścić w nim pewnien blok strony, jakąś zawartość, może to być menu, obrazki, lub jakiś tekst, cokolwiek
Natomiast tabela jest tabelą w zwykłym tego słowa rozmumieniu. Służy do prezentowania treści krótrch sruktura wymaga ujęcia ją w tabelę: raporty, porównania, cenniki, ...
Więc nie są to zamienniki, pownieważ mają inne ( docelowo ) zastosowanie.

[xarr]

Temat byl juz walkowany tyle razy.
Ktos tam pisal, ze na tabelkach jest latwiej, a pozycjonowanie nie dziala najlepiej i podano przyklad position: fixed. No ok, to, ze ie jest zacofany to nic na to nie porawdzisz, a pokaz mi jak taki efekt uzyskac przy pomocy tablic. Nie zgadzam sie tez ze tabelki sa prostrze, bo nie sa. Nie sa nawet szybsze zarowno pod wzgledem implementacji znacznikow, co i czytania ich przez przegladarki. Operowanie na divacg poprostu wymaga wiekszej wiedzy i nic wiecej, a nie sorry za wyrazenie durne scalanie dziesiatek kolumn, wierszy i wsadzanie w nie jakis skrawkow nic nie znaczacych informacji typu layoutowe grafiki. Po pierwsze zasadnosc css`a mozemy widziec wtedy, kiedy caly dokument (x)html mozemy formatowac przy pomocy css, wiec takze rozmieszczenie elementow na www nalezy do kompetencji arkusza styli. Po drugie latwosc manewrowania pozniejszymi zmianami ukladu np: czesto robiac www na predce zapominamy o dostepnosci i pozniej nie stanowi dla nas problemow zmiana np: kolejnosci wyswietlania poszczegolnych elementow www.
Tabelki sa do wyswietlania danych tabelarycznych, a nie jakis layoutow czy innych rzeczy. Robiac www w tabelkach poprostu sami siebie szufladkujemy, nie mamy na nic wplywu. Ot szablon na sztywno, jakby wziol cementem zalal.

Reasumujac: zrozumienie zasadnosci specyfikacji zarowno xhtml, css jak i wai pozwala tworzyc strony internetowe, a nie jakies tandetne podroby. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Stosujac sie do tych zasad tworzyc strony dla wszystkich, a nie dla wybranych (nawet jesli ci wybrani stanowia 98%). Poprostu, albo sie podchodzi profesjonalnie, albo amatorsko. Poza tym praca na divach to redukcja czasu pracy, bo i kodu mniej i wlasciwie specjalnie nie trzeba kombinowac, a kazde pozniejsze zmiany to pestka.

Goraco namawiam do lektury w3c i specyfikacji xhtml i wai w szczegolnosci.

@edited: Gdzies czytalem opinie, ze esencja tworzenia www jest wlasnie jezyk znacznikowy i jego formatowanie (w tym wypadku xhtml+css), a nie zadne skrypty, ktore z kolei powinny byc dodatkiem do stworzonej strony wzbogacajace ja. Podpisuje sie pod ta opinia w 100%. Ludzie nauczyli sie traktowac html marginalnie, a niektorzy nawet dzisiaj nie wiedza po co komu css, skoro html zapewnia wiele w dziedzinie formatowania znacznikow. W moim przekonaniu czlowiek znajacy np: swietnie php, mysql, asp... a nie znajacy na odpowiednim poziomie 3 powyzszych specyfikacji jest programista, nie webmasterem. Mam nadzieje, ze kiedys dozyje tego, co pojawilo sie w usa, ale tylko odnosnie wiekszych witryn rzadowych puki co, czyli: kazda strona niedostosowana do specyfikacji section 508 dyskryminuje pewna grupe spoleczna i odpowiedzialny za nia urzad/czlowiek moze zostac pociagniety do odpowiedzialnosci karnej tudziez zostanie na niego nalozona odpowiednia grzywna.
Znajac zycie egzekwowanie tego przepisu pewnie nie jest jeszcze skuteczne, ale napewno pokazuje pewien trend i znaczenie potencjalnie marginalnego jezyka znacznikow - htmla. Pomyslcie przyszlosciowo i poprawiajcie wizerunek polskiej sieci (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[revyag]

@xarr masz w 100% rację.
Wiem że jest wiele osób które potną sobie grafikę np. w photoshopie potem program wygeneruje im html i cieszą się że mają stronę (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)
Też wiele razy korzystałem z grafy wygenerowanej w ten sposób, ale nie uzyłem ani grama kodu z tego co "wykodował" photoshop, bo to by było samobójstwo (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)
Np. Objętość kodu wynosiła 12-15kB (to dolna granica), po stworzeniu layoutu na warstwach + formatowanie przy użyciu css, zamknąłem to w wielkości około 3kB.

[xarr]

Na stronach wielkich tego swiata jesli idzie o zastosowania i innowacje/rozwoj html/css mozna czasami poczytac o potedze rozwiazan tych divow. Optymalizacje kodu znacznikowego czasami zmniejszaja czas ladowania www znaczaco. Pisal tez o tym Zeldman w swojej ksiazce o standardach. Swoja droga... lektura obowiazkowa dla kazdego true-webmastera, a nie jakiegos kosmity ;]

Pozdrawiam

[miik]

A jak np. napisze stronke w XHTML ze skrytami php to powinienemzapisać ją w formacie *.php czy *.xhtml?

[Diablos]

raczej *.php (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

A ja mam pytanie, jak w CSS zrobic zeby tekst był automatycznie na dole bloku. Zeby nie dawac kilkanascie razy <br/>

[Liko]

http://www.w3.org/TR/CSS21/visudet.html#pr...-vertical-align

(IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[Diablos]

Chciałbym aby ktos sprawdził moj kod:

Ta strona !

wyglada tak jakby chciał, ale nie dziala tak jakby chciał (IMG:http://forum.php.pl/style_emoticons/default/worriedsmiley.gif)

Te szare bloczki po prawej stronie przesuwaja sie wraz z dopisanym tekstem. Chciałbym aby one pozostały w tamtym miejscu juz na zawsze (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
I jeszcze to miejsce gdzie napisałem "a". Jak usune "a" i nie wstawie tam nic, to moje tło stanie sie białe, i zrobi sie długa biala przerwa miedzy logo i reszta strony.

Prosze o pomoc (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Ten post edytował Diablos 22.06.2005, 22:48:57

[Kamis]

Zamiast a wstaw twardą spację (&nbsp;), albo <br> jak wolisz (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[Diablos]

No juz tak kombinowałem ... ale wydaje sie to byc takie troche lamerskie zagranie.

Ponadto jesli w divie odpowiadajacym za białe pole (pole to bedzie głownym polem wyswietlajacym informacje) napisze jakis dłuzszy kilkulinijkowy tekst to kwadraciki szare zjada do dołu (IMG:http://forum.php.pl/style_emoticons/default/dry.gif)

[Ilmenauer]

Widzę, że ignorancja jest niezależna od wiedzy: czy na div na na table, większość stron nie jest poprawnie wyświetlana w wysokich rodzielczościach. Zawsze widać w oknie przeglądarki pasek o szerokości 768 punktów, albo węższy (o zgrozo) i trzeba nos wciskać w ekran, żeby cokolwiek zobaczyć. Próba zwiększania fonta (Firefox) powoduje często rozjeżdżanie się całej struktury strony.
No, wyłuszczyłem swoje bolączki. Dziękuję za uwagę.

[Diablos]

No wiem, juz mi wytłumaczyliscie i przekonaliscie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Jeszcze tylko szukam odpowiedzi na moje ostatnie pytanie (IMG:http://forum.php.pl/style_emoticons/default/cool.gif)

[invx]

a jak w przypadku CMS'a czy zrobienie go na div'ach to dobry pomysl (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) jak np forum na divach zrobic ?

[revyag]

jak np forum na divach zrobic ?

Nie wiem czy kolega czytał wątek dokładnie, bo było wspomniane parę razy że dla układu tabelarycznego divów się nie stosuje, bo nie przynosi to korzyści. Używa się w taki przypadku tabelek.