Tego rodzaju strona to idealny sposób na zaprezentowanie niewielkiej firmy lub zakładu usługowego w sieci. W oparciu o szablon mogą ją wykonać osoby, które dopiero stawiają pierwsze kroki w kodzie HTML/CSS.
One-Page jak sama nazwa wskazuje to projekt internetowy składający się z jednej strony. Treści, które w bardziej rozbudowanych witrynach znajdują się na podstronach w tym przypadku zamieszone są na stronie głównej. Do poszczególnych sekcji możemy przejść przewijając stronę lub klikając w wybrany element menu, np. “O firmie”.
One-Page przypomina nieco tzw. wizytówki internetowe jest jednak bardziej rozbudowany i złożony pod względem designu.
Napisanie tego typu strony od podstaw w kodzie dla początkującego mogłoby być trudnym zadaniem, ale sprawę ułatwiają znacznie gotowe szablony (templates). W tym przypadku wystarczy wprowadzić do projektu własne treści i elementy graficzne, co nie jest zadaniem szczególnie trudnym nawet dla HTML-owych nowicjuszy.
Prace musimy rozpocząć od znalezienia właściwego szablonu. W tym celu możemy wpisać w wyszukiwarce: One-Page Templates. Dostępne są zarówno darmowe jak i płatne projekty. Projekty dobrej jakości znajdziemy m.in. tutaj.
Po ściągnięciu i rozpakowaniu pliku będziemy mieli taką oto zawartość:
Nas interesować będą tylko trzy elementy: plik index.html oraz foldery “img” (niekiedy “images”) i “mail”.
Do pracy z kodem będziemy potrzebowali edytora – wartym polecenia jest na przykład Atom. Po jego zainstalowaniu otwieramy w programie plik “index.html”. Widoczne na stronie treści, które będziemy edytować wyświetlane są w jasnoszarym kolorze w odróżnienia od pozostałych, kolorowych elementów kodu.
Edytujemy stronę One-Page
W tym ćwiczeniu stworzymy stronę dla firmy ogrodniczej. Nasz index.html otworzymy jednocześnie w Atomie i przeglądarce internetowej, aby na bieżąco monitorować efekty prac.
Zaczniemy od modyfikacji banera. Odnajdujemy w pliku otwartym w Atomie właściwy fragment kodu i zastępujemy go własnym tekstem.
Teraz musimy zmienić zdjęcie w tle. Otwieramy folder “img”, kasujemy obrazek tła i umieszczamy w teczce docelowe zdjęcie z taką samą nazwą i rozszerzeniem jak skasowany plik.
Teraz możemy zobaczyć efekt naszych pierwszych działań odświeżając stronę w wyszukiwarce:
W ten samo sposób modyfikujemy kolejne sekcje wprowadzając własne treści i zdjęcia
Sekcja: Informacje o firmie
Sekcja: Czym się zajmujemy
Może się okazać, że któraś sekcja nie będzie w naszym projekcie potrzebna. Przykładowo w naszym ćwiczeniu usuniemy sekcję “portfolio”. Zaznaczamy ją całą w kodzie i kasujemy. Jeśli coś poszło nie tak i wykasowaliśmy zbyt duży fragment kodu klikamy edit > undo.
Teraz zmodyfikujemy formularz kontaktowy na stronie, tak by maile wysyłane przez klientów docierały na wybrany adres. Otwieramy folder mail, a następnie plik “contact_me.php” w Atomie i wprowadzamy właściwy adres.
W kolejnym kroku zmodyfikujemy menu – angielskie nazwy zastępujemy polskimi. W przypadku jeśli skasowaliśmy jakąś sekcję, usuwamy również element menu, który do nie prowadził.
Na koniec wprowadzimy tytuł oraz opis strony.
Zapisujemy projekt: File > Save. Całość jest gotowa, pora zatem umieścić nasz One-Page na serwerze. Możemy to uczynić za pośrednictwm cPanelu z poziomu zaplecza hostingu lub poprzez protokół FTP używając na przykład programu Filezilla.