Poradnik #16 – Jak stworzyć profesjonalną stronę internetową bez znajomości programowania?

pexels-photo-381949

Posiadanie własnej strony internetowej w dzisiejszym świecie jest rzeczą bardzo ważną. Pozwala ona bezproblemowo dotrzeć do olbrzymiej ilości osób (według danych GUS-u ponad 75% Polaków ma dostęp do Internetu) bez potrzeby wydawania olbrzymich sum pieniędzy na reklamę. Niestety stworzenie własnej witryny od podstaw wymaga nieco umiejętności w dziedzinie programowania – szczególnie ważne są języki HTML oraz CSS. Co jednak, jeśli chcecie założyć własną stronę, a nie macie czasu na naukę języków programowania? Z pomocą przychodzą internetowe aplikacje, które sprowadzają proces tworzenia witryny do prostego budowania za pomocą przeciągania obiektów. Jedną z takich stron jest WebWave CMS i to na jej podstawie pokażę wam jak stworzyć profesjonalnie wyglądającą stronę (wraz z wersją mobilną) bez umiejętności programowania.

Co to jest WebWave?

d2bf0676c1ef11e9f7275689879f04f2

WebWave to kreator responsywnych (czyli atrakcyjnych wizualnie) stron dostosowane do wyświetlania na wszystkich urządzeniach mobilnych i na komputerach. Serwis ten pozwala nam na zaprojektowanie swojej strony marzeń od podstaw bez żadnych umiejętności kodowania – wystarczy chwila wolnego czasu oraz chęć do pracy. Cały proces tworzenia strony odbywa się w wizualnym edytorze, a elementy,  które mają znaleźć się na naszej stronie, dodajemy metodą „przeciągnij i upuść”. W WebWave strony internetowe można tworzyć od podstaw lub edytując przygotowany już wcześniej szablon.

Cennik WebWave

Poniżej przedstawiam wam cennik serwisu WebWave, który jest dość przyjazny dla klienta. Pamiętajcie, że wszystkie rzeczy w kreatorze możecie dokonać zupełnie za darmo! Publikacja strony na subdomenie WebWave również jest darmowa, lecz, by strona wyglądała profesjonalnie, warto wykupić zwyczajną domenę. Więcej informacji na temat ceny usług możecie znaleźć tutaj.

cennik

Uwaga: planujecie wykupić hosting i domenę przez stronę WebWave i chcecie zapłacić aż 30% mniej? Skorzystajcie z tego linku, a cena waszego pierwszego zakupu zostanie automatycznie obniżona.

Poradnik tworzenia profesjonalnej strony internetowej

Po omówieniu szczegółów platformy przyszła pora na przedstawienie jej możliwości. W poniższych punktach przedstawię wam krótki poradnik tworzenia strony WWW przy pomocy aplikacji internetowej WebWave. Będzie on stworzony na podstawie ogólnych kroków, które pozwolą wam stworzyć swoją własną stronę internetową na jego podstawie.  Mam nadzieję, że okaże się on dla was pomocny.

Tło górnej części strony

Nowoczesne strony internetowe, które reklamują dany produkt lub markę, charakteryzują się zazwyczaj sporym obrazkiem na samym szczycie strony, na którym zwykle umieszczony jest tekst. W tej części poradnika pokażę wam, jak coś takiego zrobić w WebWave.

1. Wykonanie odpowiedniej grafiki

Jest to najtrudniejsza część całej operacji. Tylko od was zależy z jakiego zdjęcia lub obrazka skorzystacie oraz jak go przygotujecie. Na potrzeby tego poradnika skorzystam ze zdjęcia gór, które odpowiednio przerobiłem w programie Photoshop (nałożyłem na nie różowy filtr, a następnie przyciemniłem). Prezentuje się to następująco:

góry1.png

2. Dodanie tła do strony

Dodanie odpowiedniego obrazka do strony jest banalnie proste – wystarczy skorzystać z przycisku przedstawiającego zdjęcie, który zlokalizować można na lewej krawędzi ekranu.

keimxtf4sz2caig-k-wyng

Treść strony

W tej części naszego poradnika zajmiemy się dodaniem treści dla strony – zostanie ona wyświetlona w górnej części stworzonej przez nas witryny. Do swojej strony dodam obrazek przygotowany wcześniej w programie Photoshop (cyfra 15 z nałożonym gradientem) oraz tekst.

1. Dodawanie grafiki

Dodanie nowego obrazka do strony jest banalnie proste – wystarczy powtórzyć pokazany przeze mnie wyżej krok i dodać zdjęcie, a następnie umieścić je w odpowiednim miejscu.

2. Dodawanie tekstu 

Dodanie tekstu jest tak samo proste jak dodanie obrazka. Wystarczy zlokalizować ikonkę przedstawiającą literkę T, a na stronie automatycznie pojawi się okno, które można uzupełnić tekstem. Można go oczywiście również formatować, korzystając z dostępnych narzędzi.

napis.png

Resztę treści naszej strony dodamy później – teraz zajmijmy się przyciskami oraz menu, które wyświetlane będzie nad główną grafiką.

3. Dodawanie menu oraz informacji o plikach cookies

Menu to bardzo ważny element każdej strony internetowej – pozwala ono na prostą nawigację między podstronami (o czym dalej) oraz po prostu przyzwoicie wygląda. Na szczęście dodanie własnego menu w WebWave jest banalnie proste. Aby dodać menu, które utworzone zostanie z dostępnych podstron, wystarczy kliknąć przycisk przedstawiający (kto by się spodziewał) właśnie menu, który znajduje się na lewej krawędzi kreatora. Po dodaniu menu można oczywiście zmienić jego kolor i wygląd.

lol24

Nad menu postanowiłem umieścić również półprzezroczysty pasek w kolorze białym, który oddziela tę część strony – robi się to za pomocą funkcji Kształt, którą znaleźć można po prawej stronie ekranu.

siemson

Następnie wystarczy dodać prostokąt o dużej szerokości i niewielkiej wysokości i zmienić jego kolor (np. na biały).

właściwości

Zgodnie z nowymi przepisami Prawa Telekomunikacyjnego każdy właściciel strony internetowej musi poinformować swoich użytkowników o stosowaniu plików cookies. Za niewypełnienie tego obowiązku grozi kara finansowa, dlatego lepiej dodać taki komunikat na stronie. Robi się to za pomocą dwóch kliknięć – na samym dole kreatora w zakładce „Informacja o cookies” należy wybrać lokalizację wyświetlanego komunikatu. Może to być albo góra witryny, albo jej dół. I gotowe – o nic więcej nie musicie się martwić.

cookies

4. Dodawanie przycisku

Praktycznie każda nowoczesna strona internetowa posiada przycisk, który pozwala zapoznać się z dalszą częścią witryny. W tej części naszego poradnika opowiem wam, jak coś takiego zrobić.

Aby dodać przycisk wystarczy skorzystać z funkcji Przycisk, którą znaleźć można po prawej stronie ekranu.

przycisk

Tak dodany guzik można oczywiście edytować – robi się to w oknie Właściwości elementu. Aby zmienić tekst, który znajduje się wewnątrz elementu, wystarczy na niego dwukrotnie kliknąć. Ja zdecydowałem się na usunięcie koloru przycisku oraz dodanie białego obramowania.

 

Jak jednak sprawić, by przycisk przesuwał stronę w dół? Jest to zadanie stosunkowo proste, jednak najpierw musimy utworzyć dalszą część strony. Można to zrobić poprzez dodanie białego prostokąta rozciągającego się na całej długości strony na dowolną wysokość – automatycznie stanie się ona wysokością naszej strony. Następnie dodajmy tam tytuł – przykładowy opis naszej strony. Ja dodam również grafikę.

lorem

Teraz jesteśmy w stanie aktywować nasz przycisk – w tym celu należy go wybrać i w polu Link wybrać opcję Obiekt na stronie. W tym miejscu w kategorii obiekt wystarczy wybrać pole tekstowe, grafikę lub inny przycisk. Warto zdefiniować wartość Dystans od góry – pozwala to na określenie dystansu, do jakiego dojeżdżać będzie przesunięta strona. Według mnie optymalną wartością jest 20 i na początek polecam wpisać tam właśnie tę liczbę. Po zapisaniu strony można zobaczyć, że przycisk rzeczywiście przesuwa witrynę w dół.

dystans

W podobny sposób utworzyć możemy resztę naszej strony internetowej – wystarczy powtórzyć pokazane przeze mnie wyżej kroki. Pamiętajcie, że do swojej witryny możecie dodać także elementy takie jak menu logowania, odtwarzacz wideo, integracje z Facebookiem, formularz lub widget Map Google. Warto pobawić się i poznać możliwości WebWave!

film

Dodawanie kolejnych zakładek

Po stworzeniu strony głównej należy oczywiście zająć się kolejnymi zakładkami. Stworzenie ich w WebWave jest naprawdę proste – w tym krótki akapicie pokażę, jak to zrobić. Podstronami można zarządzać przy pomocy opcji Podstrony, która znajduje się w wyświetlanym na górze strony menu.

podstrony

To menu pozwala nam na trzy naprawdę bardzo ważne interakcje – pierwsza z nich pozwala na przejrzenie aktualnie istniejących podstron oraz ich edycję i ewentualnie dodanie nowych. Trzecia za to pozwala na edycję komunikatu, który wyświetli się, gdy strona nie zostanie znaleziona (np. wtedy, gdy użytkownik źle wpisze link).

Dodawanie newsfeedu

Jeżeli przy pomocy WebWave chcecie utworzyć stronę reklamującą jakiś produkt lub wasze usługi, to nie zapominajcie, że firmy tego typu zazwyczaj prowadzą swojego bloga. Jest to bardzo fajny sposób interakcji z klientami i jest on bardzo prosty do wykonania w kreatorze. Pokażę wam, jak coś takiego zrobić.

Na początku dodajmy przykładowy artykuł – można to zrobić dzięki menu o nazwie Artykuły. Oczywiście poniżej zamieszczam króciutki i przykładowy artykuł – na waszej stronie liczę na kreatywność!

artykuł

Po publikacji kilku przykładowych artykułów na naszej nowej podstronie możemy dodać widget o nazwie newsfeed, który będzie wyświetlał wybrane przez nas artykuły. W tym celu dodajmy go przy pomocy przycisku Newsfeed – lista artykułów, który możemy znaleźć na lewej krawędzi ekranu.

newsfeed

Każdy element nowo dodanego widgetu można oczywiście edytować – zmienić możemy m.in. tytuł artykułu, jego krótki opis, styl przycisku czytaj więcej, datę lub miniaturę. Wszystko według waszej woli!

HTML, CSS i JavaScript

Kreator stron WebWave pozwala na dodanie własnego kodu HTML, CSS lub JavaScript. W prosty sposób umożliwia to na dodanie interaktywnych funkcji strony lub zupełną zmianę jej struktury i wyglądu. Niestety są to już elementy, które wymagają, chociaż podstawowych umiejętności z dziedziny programowania. Edytor kodu w kreatorze WebWave wygląda następująco:

joł

Jeżeli bylibyście zainteresowani nauką tych języków, to dobrym sposobem nauki są poradniki, które znaleźć można na łamach strony W3Schools – są bezpłatne i proste w zrozumieniu, więc warto je chociaż przejrzeć.

Dodawanie panelu do rejestracji i logowania

Jeżeli chcecie, by użytkownicy wchodzili w głębszą interakcję z waszą stroną, to świetną metodą jest dodanie panelu logowania i rejestracji. Można to zrobić za pomocą menu, które znajduje się w lewej części kreatora. Po umieszczeniu przycisku w dowolnym miejscu na naszej stronie można go oczywiście dowolnie edytować.

logowanie

Niestety sporo innych opcji możliwe jest dopiero po zakupie płatnego konta, ale można je oczywiście bezpłatnie przetestować przez pewien czas.

Tworzenie mobilnej wersji strony

Mobilna wersja naszej strony jest niezmiernie ważna w dzisiejszym świecie – ogromna część użytkowników Internet przegląda właśnie za pośrednictwem smartfonów i tabletów, a dostosowanie strony do mniejszych ekranów znacznie przekłada się na komfort użytkowania witryny. Na szczęście nie jest to trudne zadanie.

Aby przejść do procesu edycji strony, na samym początku należy uruchomić tryb edycji RWD. Można to zrobić za pomocą menu pokazanego poniżej, które znajduje się w lewym rogu ekranu.

resoibstwe

Kolejnym krokiem jest wybór urządzenia, dla którego będziemy edytować wygląd strony. Dla każdego z dwóch typów urządzeń (telefon i tablet) stronę trzeba edytować oddzielnie. Dalej jest to bardzo proste – kreator automatycznie przydziela nam miejsce na elementy, które będą wyświetlane, a naszym zadaniem jest wyłącznie ułożenie ich na stronie.

mobilna

Pamiętajcie, że warto sprawdzić, jak witryna prezentuje się na urządzeniach mobilnych – dla przykładu grafika na powyższym obrazku jest zbyt duża i powinienem ją zmniejszyć, by strona wyglądała dobrze.

Podsumowanie

Jeżeli poszukujecie kreatora, który pozwoli wam na stworzenie własnej strony za pomocą kilku kliknięć, to WebWave wydaje się bardzo dobrą propozycją. Strona jest intuicyjna i prosta w obsłudze, a dodatkowo nie są wymagane absolutnie żadne umiejętności programowania. Nawet jeśli nie jesteście przekonani, to warto spróbować – praktycznie wszystkie funkcje kreatora dostępne są w 100% za darmo. A jeśli poszukujecie dodatkowo hostingu i pakietu profesjonalnych usług, to pamiętajcie, że korzystając z tego linku, zaoszczędzicie 30% na swoim pierwszym zakupie.

Artykuł sponsorowany przez WebWave CMS

 

 

 

 

 

 

 

 

 

 

Reklamy

Skomentuj ten post

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s