Cześć,
Od jakiegoś długiego czasu walczę z tworzeniem stron.
Tym razem usiłuję przełożyć swój layout z photoshopa do rzeczywistości.
Widzę dziesiątki tutoriali, jedne pokazują jak ludzie zwyczajnie za pomocą kodu starają sięuzyskać to samo co w ps, inni znowu kroją swoje layouty na części pierwsze i wklejają te partie za pomocą kodu określając ich rozmiary.
Zastanawiam się jednak, czemu nie przucić całości layoutu określając tylko jego width i height? Po co rozdrabniać się na części które będą rozpadać się w drobny mak przy każdym błędzie? jaki to ma sens?
Zobaczcie dla przykładu na stronę tego forum... na górze idzie czarna linia, potem jakieś bordowe tło, do tego sporo różnorodnych ramek... po co miałbym je kroić na części skoro mógłbym je wkleić jako całość unikając wielu problemów?
Czyżbym czegoś tutaj nie rozumiał ;/?

Im więcej nabierasz wprawy tym mniej błędów potem powstaje.


To jest border-bottom w css a nie grafika. Chcesz żywcem wstawić layout strony jako obrazek? o.O Ciekawe jak to wszystko dobrze rozmieścisz przy różnych rozdzielczościach i co zrobisz, jeżeli contentu pojawi się więcej niż przewiduje projekt graficzny wstawiony na stronę i po prostu zabraknie miejsca.

no właśnie... wydaje mi się ,że jeśli wszystko jest pokrojone na części, podczas jakiegokolwiek dodania treści wszystko może się porozklejać, a ewentualna przeklejona "całość" zawsze trzyma się stałej struktury o którą martwić się nie muszę.
Chyba musze sobie dokupić literatury, ponieważ czytam już od długiego czasu o projektowaniu stron jednak wszystko zaczyna mi się mieszać.
Wszystko było świetnie do czasu gdy mój kod zaczął się rozpadać w innych rozdzielczościach, ze stronami przekładanymi z psd mam małe doświadczenie ale widzę ,że będzie się działo to samo >,<
Nie umiem sobie tego poukładać w głowie w logiczną całość

I to jest prawidłowa metoda. Kod CSS w 99% przypadków będzie się ładował i generował o wiele szybciej, niż odpowiedni plik graficzny. Do tego jest dużo bardziej odporny na fantazje użytkowników - rzecz jasna wtedy, gdy jest dobrze napisany.



Podejście dobre dla początkujących - nie ma w tym nic złego, sam to swojego czasu stosowałem. Zresztą taki kod gradientu:

[PHP] pobierz, plaintext 
background: #f0b7a1;
background: -moz-linear-gradient(top,  #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(100%,#bf6e4e));
background: -webkit-linear-gradient(top,  #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
background: -o-linear-gradient(top,  #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
background: -ms-linear-gradient(top,  #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
background: linear-gradient(to bottom,  #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 );
[PHP] pobierz, plaintext 

zajmuje ok. 760 bajtów. Obrazek 1x32px z takim gradientem zajmuje >2KB. Jeśli nagle ktoś uzna, że ramkę trzeba powiększyć - musisz generować nowy obrazek. W przypadku CSS zmieniasz parametr height i gitara.



Ma to głęboki sens, ponieważ strona przerzucona na Twój sposób będzie miała przy niskiej złożoności ~1MB objętości i kilkadziesiąt oddzielnych plików. Dodaj opóźnienia między nimi i może się to wszystko ładować nawet kilkanaście sekund. Użytkownik zwyczajnie się zniecierpliwi i pójdzie szukać czegoś, co działa szybciej.
Strona 'rozdrobniona' w CSS pobierze się i wygeneruje w parę sekund.
Z tym 'rozpadaniem się w drobny mak' nie mogę się zgodzić - dobrze napisana struktura nie rozleci się sama z siebie, jeśli nie dowalisz jej znienacka nowych elementów. Przypuszczam, że Twoja frustracja wynika z divów układających się nie tak, jak chcesz. Na to nie ma innego lekarstwa, jak kodować i kodować. Każdy przez ten etap przechodził.



Gdyby tu wszystko było wklejone jako obrazek, forum chodziłoby 10-15x wolniej i miało odpowiednio mniej użytkowników.

Ale jakby idąc tym tokiem rozumowania, mogę dojść do wniosku że obrazek o rozmiarze 3MB załaduje się wolniej niż trzy pojedyncze o rozmiarach 1MB?
Moje frustracje wynikają z tego ,że tworzyłem od dłuższego czasu stronę przy rozdzielczości fullhd, jak się po miesiącach okazało, całość się rozpada na mniejszych ekranach przez stosowanie position absolute i tym podobnych.
Gdy otworzyłem ową stronę na rozdzielczości 800x600 okazało się ,że te małe ikonki loga zajmują cały ekran i są ponakładane jedna na drugą nie mówiąc już o przeogromnych elementach strony.
Zawsze myślałem ,że wszystko jest absolute to strona zawsze będzie identyczna, a jedynie na małych ekranach użytkownik będzie sobie musiał przewijać, ale coś zrobiłem źle...
Byłem tak zażenowany ,że porzuciłem cały projekt i teraz po półrocznej przerwie wracam.
Właśnie w wyżej wymienionych względów postanowiłem tworzyć w photoshopie layouty od pixelowej linijki... jestem wstanie przewidzieć jak strona będzie wyglądała na danej rozdzielczości, ponieważ projektuję wszystko na wymiar.
Tutaj pojawia się obawa, że gdy zostanie wszystko pokrojone, znowu wszystko zacznie się rozpadać. Chyba pisząc to uzmysłowiłem sobie gdzie leży mój problem....
Czy znacie jakąś porządną lekturę odnośnie rozmieszczania elementów na stronie?

Obrazek 3MB załaduje się WOLNIEJ, niż 3x 1MB. Między rozpoczęciem ładowania kolejnego obrazka są przerwy, które wydłużają ogólny czas.

Masowe stosowanie position:absolute jest... ciekawą koncepcją, ponieważ wyrywa dany element spod kontroli struktury html i początkującym ciężko jest go potem opanować.

No właśnie - sam widzisz, że popełniłeś najbardziej podstawowy błąd projektanta stron - nie przetestowałeś swojego dzieła na małych rozdzielczościach. Nie potrafię zrozumieć, dlaczego tego nie zrobiłeś - przecież na upartego wystarczy zmniejszyć okno przeglądarki i już widać, jak się wszystko zachowuje. Wiele programów ma opcję podglądu w określonym rozmiarze okna, co ułatwia sprawę.

Poza tym tworzenie stron w rozdzielczości FHD było i jest dziwnym działaniem - dzisiaj wśród sztywnych stron najczęstszą szerokością jest 960-980px. Designerzy nieśmiało zaczęli wkraczać na 1200 i większe, ale w tym momencie nastąpiła eksplozja popularności tabletów i smartfonów - teraz najlepszym rozwiązaniem jest korzystanie z elementu CSS @media i tworzenie uniwersalnych stron responsywnych.

Bardzo źle, że się zniechęciłeś - HTML/CSS nie opanujesz w tydzień czy miesiąc. Tutoriale tutorialami, ale na chwilę obecną ciągłej pracy i zdobywania doświadczenia nic nie jest w stanie zastąpić.

Temu, że nie każdy siedzi z laptopem w namiocie pod przekaźnikiem... Zwykle początkujący webmasterzy wstawiają na strony radośnie grafiki 2000px x 4000px "bo takie właśnie mają", i dziwią się, że ludzie omijają stronę szerokim łukiem. Niech cokolwiek wczyta się nie tak, powiedzmy człowiekowi jadącemu w autobusie, użytkownikowi internetu na kartę mieszkającemu gdzieś na wsi(sprawdź w statystykach jaki procent obywateli NIE MIESZKA w dużych miastach). Dalej, dłużnicy wszelacy umów na neta też nie podpiszą - więc siedzą na kartach kupionych w kiosku, z których internet bywa bardzo zawodny. Tacy ludzie widząc powiedzmy stronę na której bez ładu i składu bloki tekstu wędrują po jednolitym tle, poczują się jakby otworzyli notatnik(chociaż już spotkałam się z białym tekstem na białym tle, zanim grafika-słoń się doczytała, a trwało to i trwało).

Ale pozostaje kwestia logiki. Wrzucając taki cały layout prosto z programu graficznego masz w zasadzie tyle samo roboty, bo tym razem musisz wymierzyć, zmierzyć, i obmierzyć dokładnie szerokość i wysokość każdego elementu zawierającego treść, co do procenta czy co do piksela. I również - jakikolwiek błąd, i strona wygląda jak z "Egzorcyty".
Zechcesz zmienić jakiś element - np powiększyć blok tekstowy, dodać reklamę, i co? Będziesz przerabiał cały projekt zamiast dodać element na stronę w wybranym położeniu?

Robisz sobie kilka podstron... i co? Dla każdej wrzucasz inną ogromną grafikę zamiast wykorzystać już opracowane elementy?

Dalej, krojąc taką grafikę masz duże szanse na to, że część elementów dopracujesz plikiem stylu, tam gdzie kolor albo obramowanie są jednolite - więc użytkownikowi możesz zaserwować w efekcie zamiast wielkiego pliku 2, 3 małe graficzki które natychmiast przystroją mu stronę.
Strona wczytuje się wówczas szybciej, nie wygląda jak niedokończona w połowie jeśli cokolwiek z grafiki się nie doczyta, oszczędza transfer twój, użytkownika, i wszyscy są szczęśliwi.

Aha, i odpowiednio pokrojona grafika nie "rozjedzie się" przy zmianie rozdzielczości. To, jak grafika jest rozmieszczona, jak reaguje na zmianę rozdzielczości, regulujesz stylem CSS, a nie wklejasz na głucho w html "jak ją autor stworzył".

Tak więc ty nie będziesz miał problemu, ale każdy kto na twoją stronę wejdzie, już będzie go miał. Podsumowując, jaki jest powód, oprócz twojej własnej wygody, by NIE DOSTOSOWYWAĆ layaotu?

Różnica pomiędzy czasem ładowania jednego obrazka 3MB, a trzech obrazków 1MB będzie niezauważalna. Taki problem jest zauważalny przy wielu niewielkich plikach, gdzie czas nawiązywania połączenia jest podobny do czasu pobierania pliku.

W większości przypadków nie da się po prostu utworzyć strony tak jak chcesz. Na forum raz masz 1 post, raz 5, a raz 10 postów. Czasem post jest wyższy, czasem niższy. Czasem jest przeglądany w szerokości 1920px, a czasem w 800px. No i jeżeli bardzo lubię tą stronę, a nie podoba mi się jej kolorystyka, to mogę sobie za pomocą własnego cssa szybko podmienić kolory na takie, jakie mi odpowiadają.

A najprościej to chyba spróbować i przekonać się samemu.