Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

[TuT] Pisanie Prostej strony internetowej - stwórz swój pierwszy szablon.

Pan Suavek

Rekomendowane odpowiedzi

Pan Suavek Specjalista

Pan Suavek

Opublikowano
Specjalista

Pan Suavek

Opublikowano

Otóż, aby napisać własny prosty szablon - inaczej stronę na divach nie trzeba się wysilać :)

Wymagana znajomość html, oraz CSS, ale nie koniecznie.

Bo jesteście tutaj po to żeby się też trochę CSS nauczyć :)

 

1) Tworzymy dwa pliki (index.html , style.css) oraz jeden folder (images).

Te elementy są podstawowym budulcem strony.

 

2) Otwieramy plik index.html notatnikiem (polecam Notepad++) i wpisujemy:

 

<html>
<head>
<title>Projekt Nr. 2</title><!---tytuł strony--->
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css"><!---bardzo ważna część bez niej nie zrobimy szablonu--->
</head>

 

3) Otwieramy plik style.css notatnikiem (polecam Notepad++) i wpisujemy:

 

a {
text-decoration: none;
}
body{
width: 600px;
margin:0 auto;
background: url(images/tlo.png); <!---tło selektora--->
}

 

a) Tym sposobem udało nam się dodać tło do strony, oraz usunąć podkreślenia z linków.

Jeżeli chcesz żeby zostały to nie wpisuj:

 

a {
text-decoration: none;
}

 

2) Teraz zaczynamy tworzyć poszczególne elementy strony :)

Czyli Menu itp.

 

a) Otwórz plik style.css i dopisz:

 

a {
text-decoration: none;
}
body{
width: 600px;
margin:0 auto;
background: url(images/tlo.png);
}
#linki{
width: 600px;
background: url(images/linki.png);
min-height: 40px;
}

 

B) dodaliśmy selektor "Linki", teraz musimy umiejscowić go w index.php w tym celu dopisujemy:

 

<html>
<head>
<title>Projekt Nr. 2</title><!---tytuł strony--->
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css"><!---bardzo ważna część bez niej nie zrobimy szablonu--->
</head>
<!---dopisana część--->
<div id="linki"> tresc </div>
</html>

 

3. Wiesz już o co chodzi! Dałem ci przykład jak zacząć tworzenie strony na divach,

jeżeli chcesz znać podstawowe pojęcia, i hasła w css przewiń tutorial w dół.

 

 

 

 

 

Podstawowe pojęcia i hasła w CSS

width - szerokość

min-width - minimalna szerokość, możliwość rozszerzania.

height - wysokość

min-height - minimalna szerokość, możliwość rozciągania.

background - tło selektora, diva.

background: url(ścieżka do obrazka) - tutaj jeżeli chcesz mieć obrazek w tle, lub własną grafikę.

float: right; - wówczas element strony będzie po stronie prawej

float: left; - wówczas element strony będzie po stronie lewej

margin-top: 10px; - wówczas pojawi się margines na górze o miarze 10 pixeli. Można wykorzystać left, right, bottom.

margin: 0 auto; - wyśrodkowanie strony.

Pan Suavek Specjalista

Pan Suavek

Opublikowano
Specjalista

Pan Suavek

  • Autor
Opublikowano

Powiem ci tak, jak ja początkowałem to nie było żadnego kursu.

To znaczy były te strony kurs html itp.

Ale potrzebowałem czegoś konkretnego, nie sranie o dupie maryni :)

 

Postanowiłem coś takiego stworzyć, kawa na ławę, a nie ;)

cxxus Znawca

cxxus

Opublikowano
Znawca

cxxus

Opublikowano

Mi też niezbyt się to podoba, podałeś tutaj podstawy, mogłeś napisać coś więcej i dopiero wystawić. Mało co tu przedstawiłeś, jest mnóstwo kursów do tego, pozdrawiam.

Potrzebujesz strony internetowej? Pisz śmiało, jestem do waszej dyspozycji. (Jedyna możliwość zapłaty to pieniądze (przelew, SMS, doładowanie), innej nie przyjmuje i nawet nie masz co pisać).

Konfitura Mentor

Konfitura

Opublikowano
Mentor

Konfitura

Opublikowano

To jest shit, po co nam folder images jak nawet grafiki nie porzuciłeś... To nawet tutorial nie jest, powinieneś podać tu grafikę i krok po kroku opisać co i jak. Bezsensu i do kosza z tym.

 

 

@Wiem, że sami powinniśmy utworzyć, ale masz nas tego nauczyć jak robić stronę.

Nieregulaminowa sygnatura

danielhinz Legenda

danielhinz

Opublikowano
Legenda

danielhinz

Opublikowano

Nie wiem czy tylko ja mam takie wrażenie ale pisanie strony na div'ach jest o wiele łatwiejsze niż w html.

 

Poradnik w niczym nie pomoże, opisz jak ustawić poszczególne elementy itp. Bo aktualnie krucho z tym poradnikiem.

danielhinz Legenda

danielhinz

Opublikowano
Legenda

danielhinz

Opublikowano

Co? ;o

 

Zobaczymy, co autor tematu napisze...

 

 

Może się mylę ale szczerze powiem, że nie napiszę strony opartej na samym html. Zawsze robię strony oparte o div i css.

Pan Suavek Specjalista

Pan Suavek

Opublikowano
Specjalista

Pan Suavek

  • Autor
Opublikowano

Kochani MPC-owicze, wy jesteście doświadczeni...

Robię to dla ludzi niedoświadczonych więc bez obrazy, ale zamknąć pyski.

Chcę się wykazać inicjatywą to źle, ale jak z dupskiem siedzę i nic nie robię to jeszcze bardziej źle.

Doceńcie to że się staram, i to że podałem tutaj podstawy.

To ma być wskazówką dla początkujących, a nie dla was.

Konfitura Mentor

Konfitura

Opublikowano
Mentor

Konfitura

Opublikowano

Kochani MPC-owicze, wy jesteście doświadczeni...

Robię to dla ludzi niedoświadczonych więc bez obrazy, ale zamknąć pyski.

Chcę się wykazać inicjatywą to źle, ale jak z dupskiem siedzę i nic nie robię to jeszcze bardziej źle.

Doceńcie to że się staram, i to że podałem tutaj podstawy.

To ma być wskazówką dla początkujących, a nie dla was.

Jestem początkującym jeśli chodzi o kod i gówno to ja z tego wiem.

Nieregulaminowa sygnatura

  • 2 tygodnie później...
Konfitura Mentor

Konfitura

Opublikowano
Mentor

Konfitura

Opublikowano

No bo jesteś głupi, jak gówno z tego wiesz.

Wytłumaczyłem w najprostszy możliwy sposób.

Nie wytłumaczyłeś nic, nic, nic. Nie opisałeś gdzie to wsadzić na stronie, w jakie katalogi, nic.

Nieregulaminowa sygnatura

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...