Jump to content
Sign in to follow this  
Saddam92

STRONA W xHTML'u - KROK PO KROKU

Recommended Posts

28.07.2010 --- poprawiłem obrazki. Enjoy;)

 

Witajcie, wychodzą…c naprzód waszym prośbom - postanowiłem napisać tutorial o tworzeniu stron od podstaw – czyli od layout’u aż po zrobienie podstron itd.. – w pełnej specyfikacji z XHTML 1.1 oraz CSS. To co przeczytacie (mam nadzieje) poniżej stanowi tylko część 1, i dotyczy pocięcia layoutu do xHTML'a i CSS'a. Zapraszam do przeczytania !!

 

ZACZYNAMY – jako layout’u użyjemy prosty przykładowy design wykonany przez Jakuba:

 

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

  1. Po pierwsze musimy z istnieją…cego już layout’u wycią…ć obrazki, w naszym wypadku wystarczą… dwa.. Zastosujemy do tego celu programu ADOBE IMAGE READY… Robimy wszystko zgodnie z powstałym już

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    . Odcięcia zaznaczamy w taki sposób
     
    1.gif
     
    Pamiętamy jeszcze tylko o jednym, żeby pliki graficzne zapisało nam do formatu gif (domyślnie JPG) – aby to ustawić w zakładce ZAWARTOÅšą† WWW zaznaczamy poszczególne odcięcia a w zakładce OPTYMALIZUJ – format ustawiamy na GIF a w ustawieniach bierzemy opcję pierwszą… od góry…
     
    2.gif
     
    Gdy zapiszemy już stronę jako HTML szukamy plików graficznych wytworzonych przez program… zaznaczamy te dwa 3.gif a resztę możemy usuną…ć – wygenerowany przez program kod HTML równieżâ€¦ Nasze obrazki wyglą…dają… tak:
     
    l1.gifl2.gif
  2. Teraz musimy zają…ć się napisaniem szkieletu na 3-kolumny opartego na divach. Budowę czegoś takiego dokładniej opisała już Aga_kc i to z jej

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    tutaj skorzystamy. Oto kod - jego opis jest w linku powyżej.
    <?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
     <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
     <meta name="Author" content="SADDAM92" />
     <title> STRONA W XHTML'u KROK PO KROKU by SADDAM92</title>
    </head>
    <body>
       <div id="container">
            <div id="header"> </div>
            <div id="navcontainer">
                  <div id="nav1"></div>
                  <div id="nav2"></div>
           </div>
            <div id="srodek"></div>
            <div id="stopka"></div>
       </div>
    </body>
    </html>

    Gdy mamy już szkielet strony, to warto by był wrzucić na nią… jakiś tekst…

    <?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
     <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
     <meta name="Author" content="SADDAM92" />
     <title>STRONA W XHTML'u KROK PO KROKU by SADDAM92</title>
    </head>
    <body>
       <div id="container"> 
            <div id="header"> </div>
            <div id="navcontainer">
                  <div id="nav1">
                         <a href="#" alt="link">LINKI1</a>
                         <a href="#" alt="link">LINKI1</a>
                         <a href="#" alt="link">LINKI1</a>
                  </div>
                  <div id="nav2">
                          <a href="#" alt="link">LINKI2</a>
                          <a href="#" alt="link">LINKI2</a>
                          <a href="#" alt="link">LINKI2</a>
                  </div>
           </div>
            <div id="srodek">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div>
            <div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac</div>
           <div id="stopka"> Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
       </div>
    </body>
    </html>

    W sekcji navcontainer utworzyliśmy linki natomiast w sekcji srodek, prawo oraz stopka wpisaliśmy normalny tekst.
    Do tej pory uzyskaliśmy tylko

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    . Nie zadawala nas to – i nic w tym dziwnego.. musimy napisać style CSS.

  3. W sekcje HEAD wstawiamy więc
    <link rel="stylesheet" href="style.css" type="text/css" media="all"  />

    oraz tworzymy nowy plik style.css…

  4. Teraz zajmiemy się nowo utworzonym plikiem..
     body {
    	background-color: #ffffff;
    	margin: 0;
    	padding: 0;
    	text-align:center;
    }
    div {
    	position:relative;
    }
    #container {
    	margin: 0 auto;
    	padding: 0 0;
    	position: relative;
    	width: 700px;
    	background-color: #ffffff;
    	text-align: left;
    }
    #header {
    	background: #ffffff url(l1.gif) no-repeat;
    	width: 700px;
    	height: 100px;
    }
    #navcontainer {
    	width:115px;
    	float:left;
    	background-color: transparent;
    }
    #prawo {
    	width:135px;
    	float:right;
    	text-align:left;
    }
    #srodek {
    	width: 446px;
    	float: left;
    }
    #stopka{
    	text-align: center;
    	clear:both;
    }

    Efekty możecie zastosowania kodu można zobaczyć

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    Nie jest to jednak zupełnie satysfakcjonują…ce, w następnym kroku zajmiemy się dodaniem ramek do naszego szkieletu.

  5. Do kodu css dopiszemy więc:
     #header {
    	background: #ffffff url(l1.gif) no-repeat;
    	width: 700px;
    	height: 100px;
    	-> background-position: left bottom;
    	-> border-bottom: 2px solid #000;
    }
    #srodek {
    	width: 446px;
    	float: left;
    	-> border: 2px solid #000;
    	-> border-bottom: 0px;
    	-> border-top: 0px;
    } 

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    w wyglą…dzie strony.

  6. Pójdźmy więc dalej tym tropem i dodajmy pola pod nagłówkiem. Użyjemy do tego specjalnej klasy którą… zaraz stworzymy, nazwiemy ją… title i dodamy do każdej kolumny
    <div class=â€titleâ€>//nazwa kolumny np. MENU albo KONTAKT//</div>

    W tym wszystkim ważniejszy jest jednak kod CSS:

    .title {
    	height: 20px;
    	border-top: 1px solid #FF4500;
    	border-bottom: 2px solid #000;
    	text-align: center;
    	line-height: 20px;
    	font-weight: bold;
    } 

    żeby się nie rozdrabniać od razu zastosowałem formatowanie czcionki która wystą…pi w naszym polu.. Oto

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.

  7. Jeszcze dwie rzeczy zwią…zane z wyglą…dem szkieletu strony zostały nam do poprawienia, obrazek w prawej czesci nagłówka, oraz ramka przy stopce. Obrazek wstawimy za pomocą… polecenia
    <img src="l2.gif" alt="by JAKUB" style="width: 65px; height: 9px; position: absolute; bottom: 3px; right: 5px;"/>

    Teraz troche wyjaśnienia, obrazek wczytujemy ze zwykłego polecenia IMG ponieważ wgranie jako tło już nie jest możliwe – mamy w tym miejscu inny obrazek. Stosujemy od razu do niego style, a w zasadzie to tylko pozycjonujemy go w odpowiednim miejscu na stronie (position: absolute; bottom: 3px; right: 5px;). Cała filozofia.. Jeszcze żeby na pewno żadna z przeglą…darek nie wyświetliła nam ramki wokół grafiki, do kodu CSS dodamy

    img {border: 0px;}


    Drugi zadanie z tego punktu wymaga już troche przebudowania naszego szkieletu strony, dotychczas istnieją…cą… stopkę

    <div id="stopka"> Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>

    musimy zamienić na

    <div id="stopka_container">
                 <div id="stopka"> Å  Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
          </div>

    zmieni się również kod CSS. Oto on:

     #stopka_container {
    	clear:both;
    	border-top: 2px solid #000;
    }
    #stopka{
    	border-left: 2px solid #000;
    	border-right: 2px solid #000;
    	width: 446px;
    	margin-left: 115px;
    	text-align: center;
    }

    Efekt pracy zobaczycie

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.

  8. Naszym następnym zadaniem będzie pogrupowanie linków. Mamy już stworzone na począ…tku dwa divy nav1 i nav2. I właśnie teraz one nam się przydadzą…. Zauważmy, że do tej pory wszędzie nasze linki zbite są… w jeden ciag wyrazów, a nie poprzenoszone do nowe linii.. Zmieńmy to za pomocą… polecenia <br />
    <div id="navcontainer">
                   <div class="title">Menu</div>
                         <div id="nav1">
                          <a href="#">LINKI1</a><br />
                          <a href="#">LINKI1</a><br />
                          <a href="#">LINKI1</a>
                   </div>
                   <div class="title" style=â€border-top: 0px;â€>Drugie Menu</div>
                     <div id="nav2">
                          <a href="#">LINKI2</a><br />
                          <a href="#">LINKI2</a><br />
                          <a href="#">LINKI2</a>
                     </div>
          </div>

    Spostrzegawczy na pewno zauważyli ze od razu dodałem do kodu DIV o klasie TITLE jednak z dodatkowym formatowaniem za pomocą… CSS, które ma za zadanie usuną…ć czerwoną… ramkę od góry tegoż diva. Od razu zajmiemy się również jakimś sformatowaniem linków w MENU. Do kodu CSS dopiszemy

     #navcontainer {
    	width:115px;
    	float:left;
    	-> text-align: center;
    	background-color: transparent;
    }
    -> #nav1 {
    	border-bottom: 2px solid #000;
    	text-align: center;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	background-color: transparent;
    }
    -> #nav2 {
    	text-align: center;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    -> #navcontainer a{
    	text-decoration: none;
    	color: #000;
    	font-weight: bold;
    	line-height: 14px;
    	font-variant: small-caps;
    	width: 80px;
    	margin: 0 auto;
    }
    -> #navcontainer a:hover{
       text-decoration: underline;
    }

    Takim kodem powinniśmy już sobie poradzić z prawidłowym sformatowaniem linków.. Jednak nie był bym sobą… gdybym nie dodał pewnych udziwnień, a raczej upiększeń.. Trick będzie polegał na dodaniu wybranego znaku specjalnego dla każdego linka z sekcji nav1 i innego dla linków z sekcji nav2. Tabelę znaków specjalnych możecie zobaczyć

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    Ja wybrałem dla sekcji nav1 coś takiego ⊗ (& #8855;, & otimes;), a dla sekcji nav2 - • (& #8226;, & bull;) Normalnie wstawienie takiego znaku nie jest trudne.. Po prostu wypisujemy którykolwiek z kodów które podałem w nawiasach, jednak my chcemy zrobić tak, aby do każdego linku znak dodawał się automatycznie. Zastosujemy do tego pseudoelement :before. Pozostaje jeszcze jedna rzecz - kod CSS nie akceptuje numeru znaku w formie dziesiętnej (np. & #8855;), wyławiamy wiec numery czyli np. 8855 i 8226, a następnie za pomocą… dowolnego kalkulatora zamieniamy je na format szesnastkowy. W moim przypadku będzie to odpowiednio: 2297 i 2022. A oto kod CSS który skonstruowaliśmy:

     #nav1 a:before {
    	content: "\2297  ";
    }
    #nav2 a:before {
    	content: "\2022  ";
    }

    Myślę że podoba sie wam ten

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.

  9. Przejdźmy więc dalej, myślę że teraz moglibyśmy skupić się na formatowaniu tekstu i odsunięciu go trochę od ramek. Pierwszą… rzeczą… którą… dopiszemy do naszego kodu CSS będzie wybór czcionki i jej rozmiaru, zastosujemy ją… do całego dokument, więc dopiszmy styl dla body:
     body {
    	background-color: #ffffff;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	-> font-family: Verdana;
    	-> font-size:11px;
    }

    Następną… rzeczą… jaką… zrobimy to dla treści w divach SRODEK i PRAWO damy odpowiednią… DIV-CLASS’ę, podzielimy sobie zawartość ze SRODKA na akapity (<p>..</p>), a zawartość KONTAKTU zmienimy na bardziej podobną… do oczekiwanej w przyszłości.. oto kod po zmianach – mam nadzieje ze rozumiecie:

    <div id="srodek">
                     <div class="title"></div>
                          <div class="tresc"><p>dolor sit amet, consectetuer adipi <a href="#">Lorem ipsum</a> scing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum.</p><p> Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac,</p> </div>
          </div>
            <div id="prawo">
                    <div class="title">Kontakt</div>
                          <div class="tresc">GG: <a href="gg:3442356">3442356</a><br />
                          E-Mail: <a href="mailto:a@a.pl">a[at]a.pl</a>
                          </div>
          </div>

    Teraz napiszemy do tego kod CSS, na począ…tku zajmiemy się nowo utworzoną… klasą… .tresc która odpowiadała będzie u nas między innymi za odsunięcie treści od ramek. CSS:

     .tresc {
       padding: 5px;
    } 

    Dotychczas osią…gnięty

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    , już jest całkiem całkiem, jednak proponuję dodanie kilku rzeczy.

  10. Po pierwsze, mamy niesformatowane linki w divach SRODEK, STOPKA i PRAWO, myślę ze możemy się tym zają…ć, dla linków w divie SRODEK i STOPKA damy kolor z podkreśleniem jako przerywana linia, zmieniają…cy się przy najechaniu na niego. Natomiast dla diva PRAWO zrobimy to samo tylko bez podkreślenia.
     #srodek, #stopka .tresc a{
    	text-decoration:none;
    	border-bottom: 1px dashed #880000;
    	color:#880000
    }
    #srodek, #stopka .tresc a:hover {
    	text-decoration:none;
    	color: #fb5107;
    }
    #prawo .tresc a{
    	text-decoration:none;
    	color:#880000;
    }
    #prawo .tresc a:hover {
    	text-decoration:none;
    	color: #fb5107;
    }

    Jak pewnie zauważyliście, mimo ze pisalem ze zastosujemy podkreślenie, to nigdzie nie ma text-decoration:underline; – przecież chcieliśmy osią…gną…ć przerywaną… linię jako podkreślenie, a pogrubiony przed chwilą… fragment kodu tworzy cią…głą… linie – i właśnie dlatego zastosowałem atrybut border, resztę mam nadzieje że rozumiecie –

    Hidden Content

      Give reaction or reply to this topic to see the hidden content.
    .

  11. Na koniec zostało nam już tylko upiększyć akapity tekstu. Zastosujemy do tego pseudoelement :first-letter – pierwszą… literę akapitu powiększymy i zmienimy jej kolor na czerwony.
     .tresc p:first-letter {background-color: transparent;color: red; font-size: 250%; float:left; }


  12. Na absolutny już koniec dodamy tylko zabezpieczenie kolumny PRAWO przed „wylaniem†się z niej tekstu, jako że na Mozilli dodanie margin-right zepsuje nam kompozycje strony, zastosujemy pewien TRICK i damy styl TYLKO dla IE, oto kod:
     /* hack dla internet explorera */
    /*\*/
    * html div#prawo {
    margin-right: 2px;
    }
    /**/


I takim sposobem doszliśmy do końca części pierwszej. Starałem się wam wyjaśnić wszystko w jak najbardziej przystępny sposób, jednak nie mogłem opisac działania każdego atrybutu styli CSS – jeśli będziecie mieć z nimi problem to poszperajcie

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
lub piszcie na forum. Mam nadzieje że spodobał wam się mój artykuł, pamiętajcie jednak że nie musicie się go ściśle trzymać – ja na tej jakże prostej stronie chciałem pokazać wam jak najwięcej możliwości CSS’a. Efektem jest to że jeśli napisałeś wszystko zgodnie z tutorialem to strona będzie zgodna ze specyfikacją…

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
oraz

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
–

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

Pozdrawiam wszystkich i życzę owocnej pracy :D

 

Edit #1 --- Na zakończenie tutoriala tego, chciałbym polecić jeszcze jednen link:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

gdyby ktoś miał problemy z dopasowaniem rozcią…galnej długości diva..

 

Michał Adamczyk dla Webtips.pl

Å  Wszelkie prawa zastrzeżone. Kopiowanie i rozpowszechnianie bez zgody autora zabronione.

  • Like 1

Share this post


Link to post
Share on other sites

Wypas, Wypas, Wypas i jeszcze raz Wypas na to czekałem! Teraz to nieproblem będzie ułożenie laya w Divy :D

Podziękowania dla Saddama92!!!!!!


...

Share this post


Link to post
Share on other sites

Super tutek Saddam Nigdy sie tym nie interesowałem ale kiedys

musiałes zaczac. Napweno sie sprzyda a jak znajde czas to na 100%

spróbuje cos zrobić :)

 

10/10


guildwars_player.png

----------------------------------------------------------------------

Nie pomagam na GG, PW, E-Mail.

Share this post


Link to post
Share on other sites

Huuu Rewelacja Saddam! Brak mi słów, żeby coś napisać :D.


"Kiedy trzymasz gorÄ…cÄ… patelniÄ™ - sekunda jest godzinÄ…, lecz gdy trzymasz gorÄ…cÄ… dziewczynÄ™ - godzina jest sekundÄ…."

Share this post


Link to post
Share on other sites

ja wszystko rozumiem ale mi nie wychodzi zbytnio. A jak zrobić tak zeby:

 

- mam swój szablon jest cały w grafice załózmy tu to tu to no i po pocieciu

mam te wszystkie obrazki i inne taki tam. jak sobie z tym poradzić bo

nie wiem za co mam sie zabrac


guildwars_player.png

----------------------------------------------------------------------

Nie pomagam na GG, PW, E-Mail.

Share this post


Link to post
Share on other sites

@Jakub - strona zrobiona wg tego artykułu wyświetla się prawidłowo wszędzie - ale pomysle nad tym.

@Kamil_ - nie rozumiem cię.. generalnie po pocięciu szablonu zabierasz sie za stworzenie szkieletu strony.

Share this post


Link to post
Share on other sites

Sorry, że spóźnione, ale lepiej późno niż wcale.

 

SUPER TUT.

Przyznam, że miałem problemy z tworzeniem na divach.

Za takie coś to powinienem ci wycałować stopy i zrobiłbym to gdyby nie to, że przez neta się nie da :P.

 

1768/10 jak dla mnie

a obiektywnie -10/10.


Atmosphere-studio.com:

Oferujemy wykonanie:


  •  
  • stron internetowych (w caÅ‚oÅ›ci lub fragmentów)
  • skryptów (php, actionscript, js, html)
  • layout'ów (grafika i/lub kodowanie)
  • banerów
  • innych wybranych grafik
  • obróbki fotografii
  • jingli (przerywnik muzyczny) np. radiowych
  • ... oraz innych prac zwiÄ…zanych z podobnÄ… tematykÄ….

Muzyk jako Tilnaaay : http://www.youtube.com/tilnaay

Share this post


Link to post
Share on other sites

zrobiłem strone dzięki temu tutorialowi ,ale strona za bardzo się rozcią…ga w IE, w Mozilli ma dobre wymiary ,a w IE jest bardziej rozcią…gnięta. Jak naprawić ten błą…d? Jakiś hack?

 

P.S. Jak zrobić żeby te kreski w środku były stałe, tzn. żeby się nie zmniejszały?

Share this post


Link to post
Share on other sites

pokaż strone

@ P.S - o które kreski ci chodzi..;

 

edit:

To co napisałem ci na gg a propos twojej strony (

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
)

Jeśli chodzi o te kreski to niedługo pokażę tutorial..

a jeśli chodzi o rozjeżdżanie sie strony - nie patrzyłem w kod, ale z tego co widzę to wina leży po stronie IE, który poporstu inaczej interpretuje kod i przez to strona rozjeżdża się w dół - chyba ze nie o to ci chodziło..

Share this post


Link to post
Share on other sites

Saddam a kiedy bedzie czesc druga? iwogole to jak ja uzywam twojego tutoriala to mam zuplenie inny efetkt

mozesz jeszcze dodac wyglad koncowy tego arkusza css bo juz mnie krew zalewa i nie moge tego w calosc poskladac :angry:

Share this post


Link to post
Share on other sites

a to tak trudno zobaczyc w necie:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

część druga pojawi się nieoczekiwanie sam jeszcze nie wiem kiedy bede miał troszke wiecej czasu.. mozliwe ze dopiero podczas przerwy świą…tecznej..

 

na zakończenie tutoriala tego, chciałbym polecić jeszcze jedną… rzecz:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

 

gdyby ktoś miał problemy z dopasowaniem rozcią…galnej długości diva..

Share this post


Link to post
Share on other sites

jak nie masz programu Image Ready to mozesz to zrobic takze Gimpem albo nawet Paintem.. chodzi tylk o to zeby wycinac takie obszary jak na zamieszczonym wyżej obrazku..

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...