Tutorial IR: Jak najprościej pociąć layout - Dyskusja


(Asterisk) #1

Wszystkie recenzje, jako OT, zostały skasowane

To nie jest chat :evil:


(system) #2

od siebie jeszcze dodam:

można potem z kodu usunąć





id="Table_01"

gdyż wpisy te są zbędne.

Jeśli chcemy, aby layout był "rozciągliwy" pionowo w zależności od ilości tekstu, musimy usunąć domyślną wysokość całej tabeli, w tutku jest to już usunięte, więc podam przykład z kosmosu:

fragment height="600" jest do usunięcia.

Oczywiście potem kończymy layout dodając style itp.


(L337 Crew) #3

(system) #4

to zależy, jak się użyło Slice Tool, u każdego będzie inaczej :slight_smile:

tak nie lepiej?

TREŚĆ STRONY !@!@!@@Wykrzyknik@@Wykrzyknik@@!

:slight_smile:


(L337 Crew) #5

Mam jeszcze taki problem:

ugq9x0jpdzupncpom.jpg

dotyczy on pozycjonowania textu - pociąłem już tak dla próby "stronę",

i text nie jest najlepiej ułożony.

Mówisz rss ,

żeby usunąć parametr "height",

ale wtedy wszystko się mnoży u mnie :-o (tabelki)


(system) #6

wpisz


(L337 Crew) #7

LOL :lol:

Ja byłem pewien,

że to coś zostało źle po cięciu tego :?

Nie wiedziałem, że można normalnie tak :slight_smile:


(adam9870) #8

Jeżeli chodzi Ci o to, że tekst jest na srodku a nie wyrownany do gory to dodaj parametr do komórki tabeli gdzie chcesz:

valign="top"

Np:

TREŚĆ STRONY !@!@!@@Wykrzyknik@@Wykrzyknik@@!

Ja ostatnio ciołem stronę i jak się dużo tekstu da to czasami strona się rozjeżdża (budowa) niestety. Jak się pisze strony to chyba nie jest tak, ale coś za coś :frowning:


(Airborn) #9

Coż, faktycznie wiele osób ma problem z cięciem layoutów w photoshopie, jednak chciał pokazać też inną metodę: link bądź dowolny inny link z google łączący w sobie CSS oraz pozycjonowanie uzyskany w ten sposób efekt jest o wiele bardziej czytelny i ułatwia puźniejszą ewentualną edycję dokumentu. Jako jego wada może być wymienione to iż samemu trzeba poszukać informacji na temat współrzędnych (x,y) miejsca w którym chcemy wyświetlić tekst.

Efektem takiego zabiegu będzie tylko jeden plik z grafiką (w przykładzie z tutoriala takich plików jest aż 12). Ktoś jako kontrargumentu może powiedzieć, iż po pocięciu grafiki można utworzyć z całej komórki hiperłącze, nie zapominajmy jednak, że grafikę można mapować! (dla tych co nie zapomnieli, a nie wiedzą link)

W tej sytuacji już tylko od nas zależy której metody użyjemy, aby cieszyć się gotowym layoutem, w obu sytuacjach jedyną różnicą jaką odczuje osoba przeglądająca będzie tylko prędkość ładowania się strony (na korzyść CSS), jednak dla osoby tworzącej stronę jej reedycja może okazać się o wiele łatwiejsza.


(Sypi15) #10

Witam.Wielkie dzięki za ten post. bardzo mi pomógł. Ale mam inny problem. Jak ustawie sobie hiperłącze do tego linka to mi sie wszystko przesuwa. Proszę o pomoc.

11113ic.th.jpg

Chciałem jeszcze dodać ze to nie jest sam tekst tylko caly obrazek.


(Airborn) #11

pokazał byś jeszcze kod strony... takie cude to sie tylko na tabelkach dzieją :stuck_out_tongue: pewnie złe wymiary tabelek masz gdzieś nastawione, przejrzyj raz jeszcze kod


(Sypi15) #12

(system) #13

do każdego tagu IMG dodaj BORDER="0"

np.

index_20.jpg


(Sypi15) #14

oki wszystko ładnie... wielkie dzięki :slight_smile: :slight_smile: :slight_smile:


(Devilspl606) #15

ONMOUSEOVER="changeImages('index_04', 'images/index_04-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_04', 'images/index_04.gif'); return true;">

index_04.gif

ONMOUSEOVER="changeImages('index_05', 'images/index_05-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_05', 'images/index_05.gif'); return true;"

index_05.gif

ONMOUSEOVER="changeImages('index_06', 'images/index_06-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_06', 'images/index_06.gif'); return true;"

index_06.gif

ONMOUSEOVER="changeImages('index_07', 'images/index_07-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_07', 'images/index_07.gif'); return true;"

index_07.gif

ONMOUSEOVER="changeImages('index_08', 'images/index_08-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_08', 'images/index_08.gif'); return true;"

index_08.gif

ONMOUSEOVER="changeImages('index_09', 'images/index_09-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_09', 'images/index_09.gif'); return true;"

index_09.gif

ONMOUSEOVER="changeImages('index_10', 'images/index_10-over.gif'); return true;"

ONMOUSEOUT="changeImages('index_10', 'images/index_10.gif'); return true;"

index_10.gif

 

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif

spacer.gif


(Fora) #16

taka mała moja dygresja z mojej strony :slight_smile:

lepiej strone pociać na divy co prawda o wiele więcej roboty jest przy divach w porównaniu z tabelkami ale strona mniej zajmuje i jest bardziej przejżyszta (jeśli tu jest ortograf to przepraszam :mrgreen: )

slice1.gif

slice2.gif

:mrgreen:

tutaj jest dlaczego :slight_smile:

http://osiolki.net/tabelki/everything.html

naprawde polecam przeczytac :slight_smile:


(Startowa) #17

a nie moge sobie w paincie pociąć? :D:D

mam rozumieć że po pocięciu program wygeneruje kod html?


(Devilspl606) #18

no to jest lepsze ...tylko znowu w IE nie wyświetla strony jak trzeba :frowning:


(adam9870) #19

Interesuję się sporo webmasterstwem i wiem, że lepiej jest stosować DIVy. Wiem, że photoshop umożliwia ciąć na DIVy ale niestety nie zabardzo dobrze to robi i strona wychodzi "kuślawa" :stuck_out_tongue:

Oczywiście, że możesz ale wtedy jak chcesz zrobić to z tłami to musisz sam od początku do końca pisać kod (czyli te wiersze itp.).

Tak. Po zrobieniu kroku 3 z tego tutoriala tam gdzie zapisałeś będzie plik .html z kodem który możesz dowolnie modyfikować.

Mógłbyś umieścić tą stronę pociętą w internecie i dać link ? Ponieważ widzę, że masz mały skrypt JavaScript na stronie i pewnie on coś robi więc chciałbym zobaczyć co jak ,dokładnie wygląda :slight_smile:


(L337 Crew) #20

zależy jak to robisz :stuck_out_tongue:

Ja mogę nawet w wolnym czasie napisać prosty tutorial jak pociąć do CSS :slight_smile:

Kilka ustawień i naprawdę łatwe :slight_smile: