czesc
jak sie kodoje layouty html/css?
layout jak zakodowac?
Re: layout jak zakodowac?
Chodzi Ci o zakodowanie pliku PSD (z Photoshopa) do HTML/CSS? Na początek trzeba pociąć layout w Photoshopie przy użyciu narzędzia Slice Tool i zapisać grafikę w wybranym formacie/formatach. Jest pełno darmowych kursów na ten temat, chociażby na Youtube można znaleźć filmiki pokazujące cały proces. Później trzeba zakodować stronę, czyli poukładać pociętą grafikę w odpowiedni sposób. Do tego jest potrzebna znajomość HTML/CSS. Warto nauczyć się podstaw tych języków, np. na Khan Academy, Codemy. Są też edytory, które wspomagają kodowanie layoutów z plików PSD, np. edytor Brackets (jest darmowy).
Re: layout jak zakodowac?
Pomyśl o współpracy z ekspertem. Nie brakuje ich. Ceny nie są przesadnie wysokie.
Re: layout jak zakodowac?
1. Otwieramy nasz program do edycji tekstu.
2. Na sam początek musimy ustawić w nim kodowanie oraz "połączenie" z plikiem .css.
Tworzymy dwa dokumenty:
- index.css - odpowiedzialny za elementy, pozycje etc.
- index.htm - odpowiedzialny za tekst, zawartość strony etc.
2.1 Plik .htm
3. Następnie otwieramy nasz pusty plik index.htm.
Wpisujemy do niego na samym początku znacznik <html>, oraz na końcu dokumentu </html>. Między to wpisujemy:
Linijka odpowiedzialna za kodowanie strony
Nasz tytuł strony, np. "Zax portfolio"
Linijka odpowiedzialna za połączenie pliku .htm z plikiem .css
4. Następnie tworzymy 2 znaczniki. <body> na początku oraz </body> na końcu.
Między nimi będziemy wstawiać tekst.
2.2 Plik .css
1. Otwieramy nasz dokument .css. Na samym początku wpisujemy:
Linijka ta odpowiada za kolor tła.
2. Teraz tworzymy boczną nawigację. Dopisujemy 2 linijki pod tym taki kawałek:
Jest to nasza nazwa div-u, potrzebne do pliku .htm.
Główny kolor tła naszej nawigacji.
Wysokość nawigacji (wyrażone w pikselach).
Szerokość nawigacji (wyrażone w pikselach).
Odstęp od lewej strony (wyrażone w pikselach).
Odstęp od góry strony (wyrażone w pikselach).
3. Tworzymy do tego span.
Zaraz pod tym, dodajemy linijkę:
Jest to nasza nazwa span-u, potrzebne do pliku .htm.
Ta linijka będzie odpowiadać za nasze logo.
4. Tworzymy kolejny span, mianowicie pionową kreskę po prawej.
Wszystkie wyżej wymienione znaczniki były już opisane wyżej, więc nie będę się
powtarzał niepotrzebnie i kolorował.
5. Kolejne spany to te menu. Nie wiedziałem dokładnie jak to mam zakodować,
może trochę dziwnie ale jestem początkujący, wpisujemy:
Ja wybrałem 6 pól do menu.
2. Na sam początek musimy ustawić w nim kodowanie oraz "połączenie" z plikiem .css.
Tworzymy dwa dokumenty:
- index.css - odpowiedzialny za elementy, pozycje etc.
- index.htm - odpowiedzialny za tekst, zawartość strony etc.
2.1 Plik .htm
3. Następnie otwieramy nasz pusty plik index.htm.
Wpisujemy do niego na samym początku znacznik <html>, oraz na końcu dokumentu </html>. Między to wpisujemy:
Kod: Zaznacz cały
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Szablon strony WWW (HTML/CSS) by zax</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
Nasz tytuł strony, np. "Zax portfolio"
Linijka odpowiedzialna za połączenie pliku .htm z plikiem .css
4. Następnie tworzymy 2 znaczniki. <body> na początku oraz </body> na końcu.
Między nimi będziemy wstawiać tekst.
2.2 Plik .css
1. Otwieramy nasz dokument .css. Na samym początku wpisujemy:
Kod: Zaznacz cały
html, body {
background-color: #282828;
margin: 0;
padding: 0;
background-position: center;
}2. Teraz tworzymy boczną nawigację. Dopisujemy 2 linijki pod tym taki kawałek:
Kod: Zaznacz cały
#nawigacja {background-color:#729402; height:400px; width:230px; position:absolute; margin-left: 300px; margin-top:10px;}
Główny kolor tła naszej nawigacji.
Wysokość nawigacji (wyrażone w pikselach).
Szerokość nawigacji (wyrażone w pikselach).
Odstęp od lewej strony (wyrażone w pikselach).
Odstęp od góry strony (wyrażone w pikselach).
3. Tworzymy do tego span.
Zaraz pod tym, dodajemy linijkę:
Kod: Zaznacz cały
.logo {position:absolute; height:85px; width:157px; margin-left:14px; margin-top:80px;}
Ta linijka będzie odpowiadać za nasze logo.
4. Tworzymy kolejny span, mianowicie pionową kreskę po prawej.
Kod: Zaznacz cały
.kreska_pionowa {position:absolute; margin-left:183px; background-position:right;}
powtarzał niepotrzebnie i kolorował.
5. Kolejne spany to te menu. Nie wiedziałem dokładnie jak to mam zakodować,
może trochę dziwnie ale jestem początkujący, wpisujemy:
Kod: Zaznacz cały
.menu1 {background-color:#809F1C; position:absolute; margin-left:20px; height:27px; width:142px; margin-top:185px; color:#ffffff; font-size:16px; font-weight:bold; font-family:Tahoma; text-align:center; text-decoration: none;}
.menu2 {background-color:#809F1C; position:absolute; margin-left:20px; height:27px; width:142px; margin-top:220px; color:#ffffff; font-size:16px; font-weight:bold; font-family:Tahoma; text-align:center; text-decoration: none;}
.menu3 {background-color:#809F1C; position:absolute; margin-left:20px; height:27px; width:142px; margin-top:255px; color:#ffffff; font-size:16px; font-weight:bold; font-family:Tahoma; text-align:center; text-decoration: none;}
.menu4 {background-color:#809F1C; position:absolute; margin-left:20px; height:27px; width:142px; margin-top:290px; color:#ffffff; font-size:16px; font-weight:bold; font-family:Tahoma; text-align:center; text-decoration: none;}
.menu5 {background-color:#809F1C; position:absolute; margin-left:20px; height:27px; width:142px; margin-top:325px; color:#ffffff; font-size:16px; font-weight:bold; font-family:Tahoma; text-align:center; text-decoration: none;}
.menu6 {background-color:#809F1C; position:absolute; margin-left:20px; height:27px; width:142px; margin-top:360px; color:#ffffff; font-size:16px; font-weight:bold; font-family:Tahoma; text-align:center; text-decoration: none;}
Hello world!