Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Budowa strony...
Forum PHP.pl > Forum > Po stronie przeglądarki
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. 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 ? 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
Cytat(Diablos @ 2005-06-17 14:55:47)
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 sad.gif

Tu jeszcze jeden przyklad strony zrobionej na div'ach na ktorej sie wzorowalem winksmiley.jpg
Draugfor
Cytat(revyag @ 2005-06-17 13:33:34)
@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 ?
matid
http://wiki.php.pl/index.php/XHTML
http://wiki.php.pl/index.php/Smarty

Może by tak poszukać?
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ą ?
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 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 ? worriedsmiley.gif
matid
Cytat(Diablos @ 2005-06-17 19:42:56)
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 ? 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 biggrin.gif
matid
Cytat(Diablos @ 2005-06-17 20:00:20)
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 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
Cytat(Diablos @ 2005-06-17 13:10:24)
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
Cytat(Diablos @ 2005-06-17 20:27:45)
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.
  1. <div><a href="strona1.php">link1</a></div>
  2. <div><a href="strona2.php">link2</a></div>
  3. <div><a href="strona3.php">link3</a></div>
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 winksmiley.jpg
  1. <ul>
  2. <li><a href="" class="menu">Link</a></li>
  3. <li><a href="" class="menu">Link</a></li>
  4. <li><a href="" class="menu">Link</a></li>
  5. <li><a href="" class="menu">Link</a></li>
  6. </ul>
matid
Cytat(mike_mech @ 2005-06-18 08:09:21)
  1. <ul>
  2. <li><a href="" class="menu">Link</a></li>
  3. <li><a href="" class="menu">Link</a></li>
  4. <li><a href="" class="menu">Link</a></li>
  5. <li><a href="" class="menu">Link</a></li>
  6. </ul>

A nie lepiej tak:
  1. <ul class="menu">
  2. <li><a href="">Link</a></li>
  3. <li><a href="">Link</a></li>
  4. <li><a href="">Link</a></li>
  5. </ul>

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:
  1. <ul class="MainMenu">
  2. <!-- ... -->
  3. </ul>

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
Cytat(mike_mech @ 2005-06-18 08:09:21)
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.
Cytat
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.
  1. .menu {
  2. display: block;
  3. margin: 5px 0px 0px 0px;
  4. width:200px;
  5. height:30px;
  6. padding: 0px 0px 0px 10px;
  7. line-height:30px;
  8. }
  9. a:link.menu, a:visited.menu {
  10. background: #8CB3DA url('img_1.png');
  11. color: #FFFFFF
  12. }
  13. a:hover.menu, a:active.menu {
  14. background: #8CB3DA url('img_2.png');
  15. color: #FF0000;
  16. }
  17. .blok{
  18. overflow:hidden;
  19. width:200px;
  20. margin-left:10px;
  21. }
  22.  
  23. <div class="blok">
  24. <a class="menu" href="">Link</a>
  25. <a class="menu" href="">Link</a>
  26. <a class="menu" href="">Link</a>
  27. </div>
Diablos
Ogolnie jak tak patrze to wychodzi ze kazdy div zastepuje jedna tabelke. To tak jakby mozna powiedziec taki zamiennik ?
mike
Cytat(yavaho @ 2005-06-18 11:08:57)
Pokazcie swoj przyklad.

  1. ul.menu
  2. {
  3. width: 165px;
  4. margin-left: 0px;
  5. padding-left: 25px;
  6. font-family: Verdana, Arial, sans-serif;
  7. font-weight: normal;
  8. font-size: 12px;
  9. text-decoration: none;
  10. color: #000000;
  11. list-style-image: url("gfx/menu_left_small_bullet.jpg");
  12. }
  13.  
  14. a.menu:active,
  15. a.menu:visited,
  16. a.menu:link
  17. {
  18. font-family: Verdana, Arial, sans-serif;
  19. font-weight: normal;
  20. font-size: 12px;
  21. text-decoration: none;
  22. color: #000000;
  23. }
  24.  
  25. a.menu:hover
  26. {
  27. font-family: Verdana, Arial, sans-serif;
  28. font-weight: normal;
  29. font-size: 12px;
  30. text-decoration: none;
  31. border-bottom: 1px dashed #113B85;
  32. color: #000000;
  33. }
  34. <ul class="menu">
  35. <li><a href="index.html" class="menu">Item 1</a></li>
  36. <li><a href="index.html" class="menu">Item 2</a></li>
  37. <li><a href="index.html" class="menu">Item 3</a></li>
  38. <li><a href="index.html" class="menu">Item 4</a></li>
  39. </ul>



Cytat(Diablos @ 2005-06-21 23:47:38)
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. 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 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ę 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 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 smile.gif

A ja mam pytanie, jak w CSS zrobic zeby tekst był automatycznie na dole bloku. Zeby nie dawac kilkanascie razy <br/>
Diablos
Chciałbym aby ktos sprawdził moj kod:

Ta strona !

wyglada tak jakby chciał, ale nie dziala tak jakby chciał 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 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 tongue.gif
Kamis
Zamiast a wstaw twardą spację (&nbsp;), albo <br> jak wolisz 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 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 smile.gif

Jeszcze tylko szukam odpowiedzi na moje ostatnie pytanie cool.gif
invx
a jak w przypadku CMS'a czy zrobienie go na div'ach to dobry pomysl questionmark.gif jak np forum na divach zrobic ?
revyag
Cytat
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.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.