Advertisement
  1. Web Design
  2. Kids

Web Design dla dzieci: Przygotowania do budowy strony internetowej

by
Read Time:4 minsLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Polish (Polski) translation by Krzysztof Kaptur (you can also view the original English article)

Witaj w drugiej lekcji serii Web Design dla Dzieci!

W tej lekcji dowiemy się co musimy zrobić i co będzie nam potrzebne, zanim zaczniemy pisać kod naszej strony, Miasteczka Tuts+. Zmierzamy do celu, obiecuję! W razie wątpliwości, nie zapomnij zapytać w komentarzach, na dole strony.

Po pierwsze, rzućmy okiem na projekt, nad którym będziemy pracowali!

Szkicowanie

Bardzo pomocne jest szkicowanie każdego pomysłu, który przyjdzie nam do głowy zanim zaczniemy nad nim pracować. To ćwiczenie pozwoli Ci zaoszczędzić mnóstwo czasu, gdy dojdziemy do pisania kodu.

Możliwe, że to co sobie wyobraziliśmy nie będzie wyglądało dobrze na papierze. Możliwe, że pojawią się nowe problemy i pytania podczas szkicowania. Możliwe, że nasz projekt jest zbyt czasochłonny. Wiele z tych problemów ujawni się podczas szkicowania.

Jeśli na początku nie podobają Ci się Twoje szkice, to DOBRZE, właśnie tego oczekujemy! Chcemy to wszystko najpierw opracować na papierze.

Szkicowanie strony Miasteczka  Tuts+

Potrzebujemy strony dla turystów odwiedzających nas, których interesuje położenie sklepów i firm w naszym mieście. Pogrupujemy firmy w logiczne kategorie, takie jak "hotele" w jednej, oraz "restauracje" w drugiej. Będziemy chcieli mieć hiperłącza prowadzące do stron domowych firm, by użytkownicy mogli znaleźć bardziej szczegółowe informacje.

Mamy także kilka obrazków, których użyjemy dla przyjaznego klimatu.

Poniżej widzisz szkic, który poprowadził do już zaprojektowanego i pokolorowanego podglądu strony:

To jest dokładnie strona, którą będziemy tworzyli od zera! Nieźle, co?

Edytory

Żeby napisać kod HTML (ten sekretny język, o którym mówiliśmy w lekcji pierwszej) potrzebujemy edytora tekstowego, w którym go zapiszemy.

Ważne, by nie korzystać tutaj z Microsoft Word, ponieważ odpowiedni edytor tekstowy ułatwi nam pracę. Odpowiedni edytor tekstowy zrozumie co napiszemy i użyje odpowiednich kolorów, posczas gdy Microsoft Word jest odpowiedniejszy do pisania np. szkolnych wypracowań.

Jest kilka dobrych, darmowych edytorów tekstowych, które możesz ściągnąć z sieci. Jeśli nie jesteś pewny jak ściągnąć, lub czy powinieneś, najlepiej jest zawsze zapytać dorosłego.

Bluefish jest świetny dla komputerów z Windowsem, natomiast Atom dla Maców.

Wytłumaczymy sobie znaczenie powyższego kodu w następnej lekcji, a teraz pokaże Ci skrawek, który będziemy pisali.

Pliki, Pliki, Pliki.

Już wcześniej mówiliśmy, że strona to zbiór plików. Wszystkie pliki muszą się znajdować w jednym folderze, by przeglądarka mogła je znaleźć.

Strona Miasteczka Tuts+ będzie miała plik HTML (zapisany z rozszerzeniem .html na końcu), plik CSS (zapisany z rozszerzeniem .css na końcu), oraz cztery obrazki, które zapiszemy w folderze "images" (obrazki). Folder z obrazkami będzie się znajdował w tym samym miejscu co pliki HTML i CSS.

Rozszerzenie pliku jest grupą liter, które występują po kropce w nazwie pliku. Mówią nam z jakim rodzajem pliku mamy do czynienia.

Jak już wspominaliśmy, nasze obrazki będą zapisane w folderze "images" wewnątrz głównego foldera strony, właśnie tak:

Powyżej mamy obrazek zapisany pod nazwą town.svg (svg jest rodzajem rozszerzenia obrazków), którego umieściliśmy w dodatkowym folderze "images".  Taka organizacja pozwoli nam utrzymać porządek:

Oba sposoby są prawidłowe, ale my będziemy korzystali z dodatkowego foldera, jak na obrazku po prawej.

Przeglądarki

Nasz postęp od razu zobaczymy w przeglądarce, takiej samej z jakiej korzystasz w tym momencie, przeglądając Tuts+!

Istnieje kilka darmowych przeglądarek, które możesz pobrać, jeśli jeszcze jej nie masz. Np. Google Chrome i Firefox. Jeżeli korzystasz z Maca to już masz zainstalowaną przeglądarkę Safari!

Nie w Sieci, Jeszcze

Naszą stronę stworzymy bezpośrednio na naszym komputerze, nie w internecie. Na pierwszej lekcji mówiliśmy, że nie można zobaczyć strony w internecie jeśli nie jest umieszczona na serwerze.

Poniższy obrazek przedstawia wygląd skończonej strony lokalnie (nie w internecie), w przeglądarce. Zamiast adresu jak www.tutsplus.com, widzimy lokalny adres strony, który jest trochę inny.

Dobra robota!

W tej lekcji przerobiliśmy kilka istotnych rzeczy, które pomogą nam w pisaniu kodu. Przerobiliśmy jak przygotować pliki i poznaliśmy narzędzia, takie jak edytor tekstowy i przeglądarka.

W następnej lekcji zajmiemy się pisaniem kodu naszej strony! Uporządkujemy (wiem, dużo porządków) i dodamy jakiś kod do pliku HTML. Tu zaczyna się zabawa!

Do zobaczenia w miasteczku!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.