Województwo mazowieckie

WWW krok po kroku
ikonka - drukuj drukuj
  • ikonka 15 marzec-19 kwiecień 2015
ilustracja

Zakładasz firmę? Liczysz się z kosztami? Nie stać Cię na profesjonalistów? Mimo to chcesz zareklamować się w sieci? Na początek samodzielnie stwórz prostą stronę internetową, żeby zaistnieć w internecie. I ja Ci w tym pomogę. Pokażę Ci, jak za pomocą prostego narzędzia stworzyć ją szybko.

   W życiu różnie bywa. Raz się jest na wozie, a raz pod wozem. Często sytuacja zmusza nas do podjęcia bardzo ważnych życiowych decyzji. Do tej pory miałeś spokojną pracę. Po ośmiogodzinnym dniu wracałeś zadowolony do domu i zajmowałeś się gospodarstwem. Ale coś zdarzyło się nieoczekiwanego. Doszło do zwolnień w twoim biurze. Znalazłeś się na tej czarnej liście, dostałeś odprawę i twoja kariera zawodowa legła w gruzach. Postanawiasz założyć własną działalność gospodarczą. Jednak nie wszystko idzie tak, jak zaplanowałeś. Dużo bieganiny, załatwiania formalności, a i reklama, choć skromna, też by się przydała. Chciałbyś spróbować zareklamować się w internecie, a nie masz pojęcia, jak się do tego zabrać?

I tu przychodzę z pomocą

   Pokażę Ci, jak zrobić bardzo prostą stronę internetową bez znajomości języka HTML. Wystarczy mieć odpowiedni program w formie kreatora i wszystko odbędzie się poprzez kilkanaście kliknięć myszką.

   Jest bardzo dużo programów do tworzenia stron www. Ja osobiście używam programu Pajączek. Jednak dla osób, które nigdy nie tworzyły tego typu stron polecam program Adobe Dreamweaver CS3. Jest to bardzo prościutki kreator, odpowiedni dla początkujących. Można go sobie ściągnąć z internetu w wersji Trial czyli testowej, trzydziestodniowej. Wersja Trial jest wprawdzie uboższa, niż pełna wersja licencyjna, jednak do pierwszego zaistnienia w sieci, jak najbardziej wystarczająca.

   Przed przystąpieniem do pracy z kreatorem Adobe musimy wcześniej przygotować sobie grafikę, jaką chcielibyśmy zastosować na tworzonej przez siebie stronie. Dla niewprawionych w tym zakresie istnieje proste rozwiązanie. Jeżeli nie macie programu do obróbki zdjęć, czy też do tworzenia grafiki, proponuję wykorzystać zdjęcia, jakie posiadacie w swoim komputerze. Nie ściągajcie ich z internetu, gdyż większość zamieszczonych tam zdjęć jest chroniona prawami autorskimi i wykorzystanie ich do swojej stronki może skutkować nieprzyjemnymi konsekwencjami prawnymi. Na początek stwórzcie sobie logo. Takie, które będzie rozpoznawalne na stronie. I zróbcie to z wykorzystaniem własnych fotek. Możecie do tych zdjęć dodać jakieś elementy z wordowego cliparta, wpisać na nie teksty poprzez proste narzędzie, jakie macie na swoim komputerze, a mianowicie poprzez Painta. Ja tak zrobiłem. Następnie również z cliparta pobrałem kafelki. Wybrałem dla przykładu cztery (Wy możecie więcej, w zależności z ilu stron dodatkowych będzie składała się wasza strona www), ażeby służyły mi za odnośniki do podstron i opisałem je jako: "Strona główna", "Nowości", "Promocje" i "Kontakt". Wszystkie te opisy również zrobiłem poprzez Painta. Wszystko skopiowałem do jednego pliku, żeby później nie szukać po całym komputerze, a także każde zapisałem w formacie jpg. Następnie przygotowałem sobie zdjęcia do tła, jak również do zaimportowania na stronę w ramach galerii. Po tak przygotowanych plikach graficznych utworzyłem katalog pod nazwą „strona www”, w którym będę zapisywał utworzoną stronę z jej podstronami.

Praca z kreatorem

   Teraz mogę rozpocząć pracę z programem Adobe Dreamweaver CS3. Klikam na ikonę programu i otwiera mi się okno, w którym w trzech kolumnach znajdują się ikony wyboru opcji, z których chcemy skorzystać. Wybieram w kolumnie „Utwórz z szablonu” ikonę „Zbiory ramek” i klikam na nią. Pojawia się kolejne okno z ikonami wyboru. Klikam na ikonę „Pusta strona”. Pokazują mi się dwie kolumny. Jedna zatytułowana „Typy strony”, w której mamy podświetloną ikonkę HTML. Zostawiam to podświetlenie przechodząc do kolumny zatytułowanej „Układ”. Jak sama nazwa wskazuje, możemy w ten sposób wybrać sobie układ strony, jaki nam będzie odpowiadał. Ja wybieram najprostszy, licząc od dołu jedenasty pod nazwą „2 kolumny, stała szerokość, pasek boczny z prawej, nagłówek i stopka”. Klikam na nią raz i dalej na przycisk "utwórz". Otwiera nam się projekt strony. W tym miejscu otwieramy katalog z wcześniej przygotowanymi grafikami i zdjęciami. Kasujemy nazwę HEADER i wybieramy sobie logo, które wcześniej przygotowaliśmy, a dalej przeciągamy go z katalogu w miejsce po napisie HEADER (tak, jak przy przenoszeniu czy kopiowaniu). Ukazały mi się dwa okna, w których klikam zwyczajnie OK. Wklejone zdjęcie dopasowuję do ramki, w którą je wkopiowałem, czyli kursor ustawiam na krawędź zdjęcia, aż ukaże mi się dwustronna strzałka i przesuwam dopasowując. Można to zrobić ustawiając wysokość i szerokość w pikselach poprzez właściwości, które są wyświetlone w formie narzędzi poniżej tworzonej strony, jednak sposób ten dla niewprawionych jest o wiele trudniejszy. We właściwościach ustawiłem sobie krawędź zdjęcia na „wyrównaj do środka”, a w polu „Łącze” wpisałem index.html. Następnie w miejsce napisu MAIN CONTENT wpisałem słowa „Strona główna”, oczywiście formatując sobie we właściwościach trzcionkę, format nagłówka i styl. Następnie wykasowałem tekst w języku angielskim i wpisałem swój, który to wcześniej przygotowałem. Jest to jeden z moich wcześniejszych artykułów, Wy oczywiście wpisujecie tutaj informacje o waszej firmie. Czym się zajmuje, jej profil, itp. Kolejny krok to w miejsce napisu SIDEBAR1 CONTENT wpisujemy słowo „Menu” i we właściwościach klikamy na „wyrównaj do środka”. Następnie wykasowałem tekst pod „Menu” i kliknąłem we właściwościach ponownie przycisk „wyrównaj do środka”. Z paska narzędzi umieszczonego na górze w zakładce "Wspólne" klikamy na tabelę (czwarta ikona od lewej). Otwiera się okno z wyborem dostępnych tabel. Wybieram z nagłówka tabelę z podpisem „Brak” (pierwsza z lewej) i w rozmiarze tabeli wpisuję - rzędy 4, kolumny 1, szerokość tabeli 100 pikseli i grubość krawędzi 1 piksel. Klikam OK i pod „Menu” zaimportowała się tabela. Teraz otwieram katalog z grafiką i zdjęciami i przeciągając kafelek z napisem „Strona główna”, umieszczam go w pierwszym polu tabeli. Oczywiście znowu na dwóch ukazujących się kolejno polach wciskam OK. Następnie klikamy raz na przekopiowany kafelek "Strona główna" i we właściwościach, poniżej tworzonej strony, w pole „Łącze” wpisujemy hasło index.html. Powtarzamy te same kroki z kolejnymi kafelkami. Najpierw w drugie pole tabeli przeciągam kafelek z napisem „Nowości”, oczywiście raz klikając na niego i we właściwościach w polu „Łącze” wpisuję tym razem nowości.html. Kolejny kafelek przeciągnięty został na trzecie pole tabeli z napisem „Promocje”, a we właściwościach w polu „Łącze” wpisano promocje.html. Kafelek z napisem „Kontakt” przeciągnąłem na czwarte miejsce tabeli i tu we właściwościach w polu „Łącze” wpisujemy kontakt.html.

Pierwsza strona prawie gotowa. Została kosmetyka

   Właściwie to strona główna już prawie jest gotowa. Dokonamy lekkiej kosmetyki, żeby trochę fajniej wyglądała. Toteż najeżdżam kursorem myszy na krawędź pola, w którym zamieściłem „Menu” z tabelą. Gdy krawędź podświetla się na czerwono, klikam na nią i w prawej części również we właściwościach, przy pozycji WIDTH (szerokość) zmieniam wartość z 200 pix na auto. Proces ten sprawia, że całe to zaznaczone pole „Menu” ładnie nam się wyjustuje.

   Teraz zostało tylko wstawić stopkę i tło. W miejsce napisu FOOTER wstawiłem swoje imię i nazwisko oraz nazwę projektu M@zowszanie. Natomiast po pojedynczym kliknięciu na szare pole znajdujące się po prawej lub po lewej stronie, klikamy na przycisk „właściwości strony” z pola właściwości. Ukazuje nam się okno, w którym z pola „kolor tła” wykasowałem oznaczenie koloru #666666, pozostawiając to pole puste. Następnie, przy obrazie w tle klikam na przycisk przeglądaj i wybieram z katalogu grafiki i zdjęć na swoim komputerze odpowiedni plik, który będzie tłem dla strony. Klikam OK, zastosuj i ponownie OK i mam już tło. Zostało już tylko zapisanie strony. Najeżdżam kursorem na zakładkę „Bez nazwy-1*” i naciskam prawy przycisk myszki. Otwiera mi się okno, z którego wybieram polecenie „zapisz”. Powoduje to otwarcie katalogu do zapisu. Wybieram katalog „strona www” i zapisuję w nim utworzoną stronę pod nazwą index.html. Tak stworzyliśmy początkową stronę WWW naszej firmy. Teraz trzeba stworzyć kolejne trzy strony i przypisać je do odnośników (kafelków w tabeli) pod nazwą "Nowości", "Promocje" i Kontakty".

Kolejne strony

   Ponownie najeżdżam kursorem na zakładkę. Tym razem nazywa się ona „index.html”. Klikam na niej prawym przyciskiem myszy. Z ukazanego okna wybieram „nowy”. Otwiera mi sie nowa zakładka, w której jest nowy szablon strony. Wykonujemy dokładnie wszystkie te czynności, jakie robiliśmy przy tworzeniu strony głównej. A więc, tak samo logo, menu z tabelą, stopka. Zmianą będzie nagłówek. Ja w nagłówku wpisałem słowo „Nowości” i załączyłem przykładowe zdjęcie z zachodem słońca, też przeciągając go z katalogu zdjęć i grafiki. Zmieniłem też tło, ażeby trochę dodać stronie kolorytu. Po wprowadzeniu danych na stronę, najeżdżamy ponownie kursorem na zakładkę, tym razem na nową z napisem „Bez tytułu-2*” i klikamy prawym przyciskiem myszy. Z okna wybieramy polecenie „zapisz” i dokonujemy zapisu w tym samym katalogu, co poprzednio – „strona www" pod nazwą „nowości.html".

   I ponownie tworzymy nową zakładkę w taki sam sposób, jak poprzednio. Również wykonujemy takie same czynności, jak przy tworzeniu poprzednich stron, a więc to samo logo, menu z tabelą i kafelkami i stopką. Również w tym przypadku zmieniłem tło na jeszcze inne, a w nagłówku wpisałem hasło „Promocje” i poniżej dodałem przykładowy tekst. Czynności powtarzamy przy ostatniej, czwartej zakładce „Kontakt”. Możemy tu wpisać adres firmy, kontakt email, telefon. A właśnie, jak dodać adres mailowy? Zaznaczamy na stronie, w którym miejscu chcemy, żeby się znajdował i z paska narzędzi umieszczonego powyżej strony klikamy na drugą ikonę „Łącze e-mail”. Otwiera nam się okno, gdzie w polu „Tekst” wpisujemy nazwę, jaka będzie się wyświetlała na stronie. Może to być normalny adres email. W „Email” wpisujemy nasz adres mailowy. Ja wpisałem slon.trabalski@gmail.com. Zapisujemy zakładkę pod nazwą kontakt.html i koniec, po bólu. Zamykamy wszystko i mamy już gotową stronę internetową.

   Żeby sprawdzić, czy wszystko działa poprawnie otwieramy katalog, w którym zapisaliśmy strony i obojętnie którą otwieramy. Po otwarciu możemy zobaczyć, że klikając na kafelek (ja to nazywam odnośnik) na przykład „Kontakt”, otwiera się strona z kontaktami. Klikając na „Nowości”, otwiera się strona z nowościami. Klikając na stronie z kontaktami na link „Kontakt e-mail” otwiera się domyślny program pocztowy. W moim przypadku otworzył się program Outlook.

   Można do tej strony dołączyć jeszcze licznik odwiedzin, filmik, datę z godziną, łącza do facebooka czy twittera lub innych portali. Ja nie zrobiłem tego celowo, gdyż zrobienie tego to drobnostka w porównaniu z opisaniem tych czynności w artykule.

   Tak stworzyliśmy bardzo prosta stronę internetową, bo taki właśnie mieliśmy cel. Stworzenie tych stron zajęło mi niecałą godzinkę. Dużo więcej zajęło mi właściwie opisanie tego procesu. Tylko co z tego, że mamy stronę. To dopiero połowa pracy. Teraz trzeba ją umieścić na odpowiednim portalu. Ale to już temat na kolejny artykuł.

Tomasz Olszański

t.orzelowski@mazowszanie.eu 13-3-2015

Tekst w oparty na tworzeniu strony internetowej w formie testowej

Źródła zdjęć: własność Tomasz Olszański

 

Komunikat

Brak komentarzy dla tego wpisu

Fotogaleria

Strona używa cookie

Zamknij

Original text