Twoja własna strona WWW - Zrob to sam!
  • Strona główna
  • Moje projekty
  • Pobieralnia
  • Kontakt
Podstawy

Tworzenie podstawowego szablonu w CSS

4




Ten poradnik pokaże Ci, w jaki sposób napisać swój pierwszy, według mnie najprostszy jaki może być szablon strony internetowej przy użyciu CSS. Nie do pomyślenia jest, abyś szablon strony wykonywał na podstawie tabel - te czasy już dawno minęły.

W poprzednich poradnikach pisałem jaka jest struktura HTML i jak umieścić arkusz stylów CSS w pliku HTML - będzie to koniecznie, byś napisał swój pierwszy szablon.

Krok 1

Pierwsze co musisz zrobić to napisać strukturę strony i umieścić CSS w pliku HTML. Nie będę tłumaczył jak to zrobił, można o tym przeczytać w moich wcześniejszych poradnikach.

Krok 2

W tym kroku należy w pliku HTML napisać strukturę divów, które posłużą jako cegiełki szablonu. Czym jest div?  Jest to element blokowy, który stosuje się głównie do tworzenia struktury strony. Chcemy by nasza strona składała się z miejsca gdzie będzie logo, z lewego menu, z treści oraz ze stopki. Przykładowy projekt wygląda tak:


Struktura szablonu znajdowała się będzie pomiędzy znacznikami <body> </body> i będzie wyglądała następująco:


W zamieszczonym przykładzie stworzyliśmy div o id=kontener. Będzie to miejsce, w którym umieszczać będziemy wszystkie divy.

Krok 3

Teraz odwołamy się do naszych divów, które napisaliśmy w pliku HTML. Przechodzimy do pliku style.css i zapisujemy każdego z divów, które stworzone zostały wcześniej. Wygląda to tak:



Można teraz przejść do ustalania odpowiednich wartości dla każdego diva. Będzie to wyglądało w ten sposób:


<

Opis poszczególnych właściwości:


width - szerokość.

height - wysokość.

margin - margines (ustawiony na wartość 0 auto;, by wyrównać diva do środka).

background-color - kolor tła.

float: left; - ustawienie tej wartości przenosi diva na lewą stronę. Ustawiliśmy tą wartość dla #menu i #tresc, ponieważ sprawi to, że divy będą obok siebie.

clear:both; - usuwa formatowanie float, dzięki czemu reszta divów poniżej nie będzie już przesuwania do lewej strony - było to konieczne by stopka pojawiła się na dole strony.


Skomplikowane czy może banalnie proste? Kluczową rolę w posługiwaniu i uczeniu się języka CSS jest znajomość języka angielskiego, bo wszystkie wartości są właśnie w języku angielskim.





Unknown

Zobacz również

Podstawy
Autor: Unknown o 11:20
Etykiety: CSS, Podstawy

4 komentarze:

  1. PoL24 sierpnia 2019 06:41

    Szablon sklepu internetowego Start. Pakiet idealny dla początkujących Klientów.

    OdpowiedzUsuń
    Odpowiedzi
      Odpowiedz
  2. Wojciech Roszkowski5 kwietnia 2021 18:03

    Solidnie napisane. Pozdrawiam i liczę na więcej ciekawych artykułów.

    OdpowiedzUsuń
    Odpowiedzi
      Odpowiedz
  3. Tomasz Krawczyk10 kwietnia 2021 01:17

    Faktycznie można samodzielnie tworzyć strony www, jednak ja się na tych rzeczach kompletnie nie znam. Właśnie w takiej sytuacji zdecydowanie najlepszym rozwiązaniem było zgłoszenie się do firmy https://haiku.com.pl/ gdyż moim zdaniem wykonują oni profesjonalne strony internetowe.

    OdpowiedzUsuń
    Odpowiedzi
      Odpowiedz
  4. Kamil23 czerwca 2021 02:01

    Nie jest to nic aż tak trudnego, no ale też zależy czego oczekujecie od strony internetowej. Tu firmie https://seomamut.pl/tworzenie-stron-internetowych-puck/ znajdziecie usługi tworzenia profesjonalnych stron www.

    OdpowiedzUsuń
    Odpowiedzi
      Odpowiedz
Dodaj komentarz
Wczytaj więcej...

Nowszy post Starszy post Strona główna
Subskrybuj: Komentarze do posta (Atom)

O mnie

Nazywam się Kamil Wiśniewski i założyłem tego bloga, aby pomóc innym w tworzeniu swojej własnej strony internetowej.

Popularne posty

  • Podstawowe znaczniki HTML i struktura strony
    Ten poradnik pokaże Ci podstawowe znaczniki języka HTML, które pomogą Ci przy tworzeniu Twojej pierwszej strony internetowej. Dodatkowo ...
  • TOP 3 darmowych edytorów WWW
    Tworzenie stron internetowych za pomocą edytora tekstowego jest moim zdaniem bardziej opłacalne, niż pracowanie w edytorze graficznym. ...
  • Tworzenie strony internetowej - podstawy
    Zastanawiasz się nad stworzeniem strony internetowej? Może jest ona dla Ciebie koniecznością? Ten poradnik jest dla Ciebie. Zawarłem tu...
  • Dodawanie CSS do HTML - czyli jak umieszczać arkusze stylów
    Pisanie w samym języku HTML nie jest tym, co satysfakcjonuje każdego. Strona napisana tylko w takim języku nie jest do końca estetyczna...
  • Tworzenie podstawowego szablonu w CSS
    Ten poradnik pokaże Ci, w jaki sposób napisać swój pierwszy, według mnie najprostszy jaki może być szablon strony internetowej pr...
  • Hosting SMS na ProSerwer.pl
    W sieci można znaleźć wiele hostingów, które oferują przeróżne usługi. Należą do nich np. rejestracja domeny, hosting WWW na stronę inter...
  • Jak wrzucić stronę na hosting przez FTP
    Jak wrzucić stronę na hosting przez FTP? Jest to pytanie, które zadać musi sobie każdy webmaster, który chce, aby jego strona została p...
  • Tworzenie stron czas zacząć!
    Witam Cię czytelniku na moim blogu. Blog wlasna-www.blogspot.com oparty jest głównie o tworzenie, projektowanie strony inter...
  • Kolory na stronach WWW
    Kolory na stronach internetowych są sprawą kluczową, jeżeli chodzi o estetykę. W poprzednim wpisie napisałem 3 kroki do estetycznej str...
  • Jak wstawić szablon na bloga na blogspocie
    Czym jest szablon i po co on jest? Strona internetowa czy też blog jest obrazem, który jest wyświetlany na ekranie monitora na ...

O MNIE

Nazywam się Kamil Wiśniewski i jestem uczniem technikum informatycznego. Bardzo interesuję się pisaniem stron internetowych, dlatego postanowiłem założyć tego bloga, aby pomóc początkującym napisać ich pierwszą stronę internetową.

KONTAKT
wisniewski.kamil81789@gmail.com

Popularne posty

  • Dodawanie CSS do HTML - czyli jak umieszczać arkusze stylów
    Pisanie w samym języku HTML nie jest tym, co satysfakcjonuje każdego. Strona napisana tylko w takim języku nie jest do końca estetyczna...
  • TOP 3 darmowych edytorów WWW
    Tworzenie stron internetowych za pomocą edytora tekstowego jest moim zdaniem bardziej opłacalne, niż pracowanie w edytorze graficznym. ...
  • Tworzenie podstawowego szablonu w CSS
    Ten poradnik pokaże Ci, w jaki sposób napisać swój pierwszy, według mnie najprostszy jaki może być szablon strony internetowej pr...
  • Podstawowe znaczniki HTML i struktura strony
    Ten poradnik pokaże Ci podstawowe znaczniki języka HTML, które pomogą Ci przy tworzeniu Twojej pierwszej strony internetowej. Dodatkowo ...
- - |