Cięcie szablonu w PS do HTML i dopasowanie do rozdzielczości do przeglądarki internetowej

0

Witam wszystkich , jestem tutaj nowy więc jeśli się pomyłem z działem to z góry przepraszam.

Mam taki problem, że wykonałem mój pierwszy szablon pod strone www w Photoshopie CS6 , pociąłem na kawałeczki oczywiście i wygenerowałem do pliku html, wszystko pięknie ładnie było aż do momentu kiedy odpalam ten szablon w przeglądarce, o ile w IE jest ok to np w Chrome szablon się rozjeżdża tzn nie dopasowuje się do rozdzielczości, próbowałem kombinować z kodem według różnych instrukcji ale nadal nie wiem jak to ruszyć żeby poszło to w dobrą stronę. Jeśli ktoś bybył tak uprzejmy i sprawdził ten mój szablon i ewentualne wskazówki lub propozycję rozwiązania problemu zaproponował to byłbym wdzięczny.

Jestem studentem 2 roku informatyki, że niczego sensownego nas nie uczą byle odklepać przedmiot zazwyczaj ( uczelnia prywatna ) to staram się samemu nauczyć co by coś umieć jak na przyszłego informatyka przystało a być może pójdę w ślady IT, trzeba się rozwijać.

Tutaj podaje link z plikiem spakowanym w winrarze gdzie jest szablon pliki graficzne i plik index.html wygenerowany przez PS CS6. : https://megawrzuta.pl/download/bc464dc7fd8668f8c68c184a51646316.html

Pozdrawiam :)

Dodam że szablon wykonany w rozdzielczosci 1024x768

0

U mnie ten rar nie działa. Kombinować mi się nie chce.

0

poprawilem w zipie : https://chomikuj.pl/farmeras jest to plik strona budowalana.zip

1

uuu, zbudowałeś stronę na tabelach :O
zero pojęcia o rwd
zero css
menu zamiast fontów, obrazki z tytułami działów
niestety bardzo źle
wyszukaj w google jakiś tutorial "jak zbudować stronę rwd" i jedziesz, tego co masz nawet nie pokazuj nikomu

1

A nie możesz normalnie jak człowiek na jakiegoś Githuba wrzucić?

mój pierwszy szablon pod strone www w Photoshopie CS6 , pociąłem na kawałeczki oczywiście i wygenerowałem do pliku html,

Teraz się już tak nie robi.

Nie tnie się projektów z Photoshopa "na kawałeczki", bo po pierwsze nie ma takiej potrzeby, w Photoshopie to można sobie projektować wygląd/prototyp (też nie wiem czy jest to dobre narzędzie, ale załóżmy, że milion much grafików nie może się mylić), a potem i tak wszystko można odtworzyć z palca w HTML/CSS/SVG (łącznie z zakrzywionymi liniami, gradientami, nietypowymi fontami, figurami geometrycznymi itp.),

Po drugie w czasach kiedy strony się robi dopasowane do wielu rozdzielczości to masz to co masz (czyli ci się rozjeżdża w innych rozdzielczościach - i nic dziwnego, że się rozjeżdża, skoro same założenia są złe).

Po trzecie można wiele rzeczy robić źle, ale za umieszczanie napisów w gifach (co zrobiłeś) to za to jakbym był twoim wykładowcą dałbym ci 2. To koszmar pod kątem UX. W ten sposób nie będzie można choćby wyszukać niczego na stronie ani zaznaczyć tekstu, nie mówiąc już o tym, że jak użytkownik będzie oglądać w powiększeniu stronę, to mu się ten tekst rozmyje. alt do img też nie dodałeś więc czytniki głosowe też tego nie przeczytają.

Dodam że szablon wykonany w rozdzielczosci 1024x768

Jakie urządzenia mają teraz taką rozdzielczość? Tablet? Komórka? Ale też nie wszystkie raczej, a tylko wybrane modele (miałem iPada mini i on był faktycznie 1024x768).

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Ten kod i inne rzeczy wskazują na to, że jesteś przybyszem z przeszłości. Od lat się tak się nie pisze, tylko się definiuje kolor czy marginesy w CSS.

Layout na tabelkach też nie jest już potrzebny. Masz CSSa i masz tam mnóstwo rzeczy do robienia layoutów (position, float, flex, grid, jakieś inne cuda).

Skądkolwiek czerpiesz informacje na temat robienia stron - jest to złe źródło. Przestarzałe.

Lepiej poczytaj np. MDN i naucz się CSS https://developer.mozilla.org/en-US/docs/Learn/CSS
przerób jakiś nowszy tutorial (bo te które obecnie przerabiasz pewnie mają z 20 lat): http://ferrante.pl/books/html/

0
czysteskarpety napisał(a):

uuu, zbudowałeś stronę na tabelach :O
zero pojęcia o rwd
zero css
menu zamiast fontów, obrazki z tytułami działów
niestety bardzo źle
wyszukaj w google jakiś tutorial "jak zbudować stronę rwd" i jedziesz, tego co masz nawet nie pokazuj nikomu

No ok, z css się bawiłem a ten szablon zkleilem w photoshipie, podbno tak jest robie?

OK przejrzę materiały jakieś na temat rwd, 2 tyg się bawię że strona www tak więc szanuje każda podpowiedź i ścieżkę nauki :) tylko mnie nie zjeździe za błędy :)

A druga sprawa co w tym kodzie było nie tak ze wyświetla się tylko do lewej strony? Tak dla informacji jako błąd tam mam chciałbym wiedzieć.

1

widzisz płacisz za studia grubą kasę jeszcze nikt ci nie wytłumaczy jak w 2018 zbudować stronkę tylko musisz pytać na forum
tutaj masz mega prostu tutek od tego możesz zacząć
http://www.footstep.pl/blog/strona-responsywna-tutorial

0
czysteskarpety napisał(a):

widzisz płacisz za studia grubą kasę jeszcze nikt ci nie wytłumaczy jak w 2018 zbudować stronkę tylko musisz pytać na forum
tutaj masz mega prostu tutek od tego możesz zacząć
http://www.footstep.pl/blog/strona-responsywna-tutorial

Połowe czesnego mam dotowane z UE ale to nie o to chodzi, pierwszy rok to przeprawa była przez matematykę normalna, matematykę dyskretna, logikę (dość ważne), a z przedmiotów stricte informatycznych to było jedynie systemy komputerowe na których nic człowiek się nie nauczył, sieci komputerowe na których wykładowca w miarę fajnie wytłumaczył pewnie rzeczy, grafika managerska i reprezentacyjna (powerpoint) i arkusze kalkulacyjne.

A co do tutorialu na pewno skorzystam :)

1

Nie szukaj tutoriali tylko pobierz sobie gotowy darmowy szablon strony HTML5 i popatrz jak został zrobiony, jak to wszystko działa. A rada ode mnie - olej zupełnie kursy. Próbuj zrozumieć jak to działa i jak to się robi. Kursy Cię tego nie nauczą, a to według mnie klucz w całej branży IT.

0

A jeśli chodzi o same banery grafiki itp to w PS można to robić czy wszystko w 70% idzie przez css :)?

0

Zazwyczaj Twój goal to zrobić tak by było jak najbardziej wydajnie (najmniej ważyło/najszybciej ładowało się). Wszystko co możesz zamienić z obrazka na kod jest dobrym rozwiązaniem, bo kod jest zazwyczaj lżejszy niż obrazek i ładuje się bez dodatkowych Requestów. Zamiast wielkiego obrazka z czarnym tłem dajesz po prostu background: #000; w CSS.

2

A jeśli chodzi o same banery grafiki itp to w PS można to robić czy wszystko w 70% idzie przez css :)?

Ujmijmy to tak. Lepiej wyjdziesz, jak na tym etapie w ogóle nie będziesz włączać Photoshopa, a będziesz pisać wszystko z palca (zakładając, że będziesz aktywnie szukał informacji, np. "chcę mieć takie efekt, poszukam informacji w internecie jak to można osiągnąć").

Wtedy zobaczysz jakie cuda można zrobić w samym HTML/CSS/SVG.

A Photoshop to w kwestii tworzenia stron to najwyżej narzędzie designerskie, żeby zwizualizować sobie jak to ma wyglądać (czyli narzędzie równoważne np. kartkom papieru i kredkom), a nie implementacyjne.

1
Uczynny Polityk napisał(a):

A druga sprawa co w tym kodzie było nie tak ze wyświetla się tylko do lewej strony? Tak dla informacji jako błąd tam mam chciałbym wiedzieć.

Strona znajduje się w tabeli. Tabela domyślnie przykleja się do krawędzi. Możesz dopisać

<table cellpadding="0" cellspacing="0" style="text-align: center; MARGIN:AUTO;">

A później wystawić całość w muzeum internetu ;)

0

Z tego co napisales wnioskuje jako weteran Photoshopa, ze pociales szablon slicem z PS, ktory owszem tnie ten szablon ale dodatkowo generuje do niego kod rodem z PRLu :-)

A wiec to nie do konca na tym polega kolego :-) Nie tak sie koduje strony. Nie uzywa sie do tego narzedzia wbudowanego w PS. Zeby nie bylo tl;dr to lap playliste.
_

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