Zbuduj swoją stronę

Do dyspozycji masz kilka gotowych szablonów, które dodatkowo zostały wzbogacone o różne wersje kolorystyczne. Dzięki temu dobierzesz odpowiednie dla siebie barwy. To najprostsza i najszybsza droga do zbudowania własnej strony.

Uruchom program WebPlus Starter Edition. Jeżeli nie widzisz okna kreatora, z menu File wybierz Setup Wizard. W kreatorze What do you wan to do? w sekcji Create wybierz i kliknij odnośnik Use Design Template.

W oknie Create New Site From Template masz do dyspozycji kilka gotowych szablonów podzielonych na kategorie. Wybierz jeden z nich i zaznacz jego miniaturkę. W naszym przykładzie wybraliśmy szablon Painter & Decorator. Dodatkowo, do każdego szablonu masz przygotowanych kilka wersji kolorystycznych. Rozwiń listę Color Scheme i wybierz odpowiednią dla siebie kolorystkę. Podgląd szablonu i wybranej opcji kolorystycznej zobaczysz w sekcji Pages. Oprócz strony głównej program automatycznie przygotuje kilka podstron. Zatwierdź wybór szablonu przyciskiem Open i rozpocznij modyfikację merytorycznej zawartości witryny.

W oknie programu WebPlus Starter Edition zostanie wczytany wybrany przez ciebie szablon. Aby wygodnie pracować nad modyfikacjami, ustaw widok w skali 1:1. W tym celu na pasku narzędzi rozwiń listę między ikonami Zoom out/in i wybierz powiększenie 100%.

Od razu zapisz swój projekt na dysku. Kliknij w tym celu ikonę Save lub z menu File wybierz Save As i w okienku Save As wskaż na dysku lokalizację, w której chcesz zachować projekt. Nadaj plikowi nazwę w polu Nazwa pliku i kliknij Zapisz.

Założenie strony internetowej to dopiero początek drogi do zaistnienia w sieci. Musisz zadbać o pozycję witryny w wyszukiwarce Google, która generuje nawet 95 procent ruchu na stronie. W numerze 4/2011 opisywaliśmy, jak osiągnąć dobre efekty pozycjonowania, nie ponosząc przy tym żadnych kosztów. Archiwalny artykuł znajdziesz na naszej stronie, pod adresem http://pcformat.pl/u/301

Do dyspozycji masz kilka gotowych szablonów, które dodatkowo zostały wzbogacone o różne wersje kolorystyczne. Dzięki temu dobierzesz odpowiednie dla siebie barwy. To najprostsza i najszybsza droga do zbudowania własnej strony.

Poważniejszym wyzwaniem jest zaprojektowanie całkowicie autorskiej strony. To zadanie przyniesie więcej satysfakcji niż tworzenie witryny według gotowego szablonu, który mogą mieć setki innych internautów. Zanim zaczniesz projektować konstrukcję w programie WebPlus, przygotuj projekt szaty graficznej w dowolnym programie graficznym. Budując stronę od podstaw, nie jesteś w żaden sposób ograniczony, wystarczy pomysł i odrobina umiejętności graficznych. Poszczególne elementy oprawy wizualnej interfejsu zapisuj w osobnych plikach, a z tak przygotowanych „klocków” zbudujesz spójny projekt w programie.

Aby uprościć pracę nad projektami podstron, wykorzystaj stronę wzorcową, czyli tzw. master page. W tym trybie zbuduj szkielet strony, który będzie elementem konstrukcyjnym wykorzystywanym przez wszystkie podstrony. Dzięki temu nie będziesz musiał kopiować i dublować stale powtarzających się elementów.

W prawej części okna programu WebPlus, w zakładce Site kliknij przycisk Master Pages. Rozwinie się dodatkowe pole zawierające ikonę Master A. Kliknij ją prawym przyciskiem myszy i z menu kontekstowego wybierz Master Page Manager.

W oknie Master Page Manager kliknij Properties. Następnie w oknie Master Page Properties w sekcji Dimensions ustal szerokość i wysokość (w pikselach) dla strony, wpisując te parametry odpowiednio w pola Width i Height (dla rozdzielczości monitora 1024x768 pikseli standardowa szerokość wynosi 960 pikseli).

Z drzewa kategorii wybierz Background i z rozwijanej listy w sekcji Background wybierz Use custom Background. Po odblokowaniu dodatkowych opcji kliknij przycisk Background Image.

W okienku Background zaznacz teraz opcję Use Background Image i kliknij Browse. W oknie Import Picture wskaż na dysku plik z tłem dla strony i zatwierdź wybór przyciskiem Otwórz. Z rozwijanej listy Repeat wybierz opcję Horizontal, aby tło było powtarzane w poziomie. Jeżeli w tle chcesz zastosować plik w formie tapety, nie zmieniaj tej listy, lecz na rozwijanej liście Position ustal pozycję ustawienia obrazu. Aby obrazek w tle był wyśrodkowany i przyciągnięty ku górnej krawędzi, wybierz opcję Top Center. Kliknij OK, jeszcze raz OK i Close.

Pozostając na stronie wzorcowej master page, dodaj pozostałe elementy witryny, które będą powtarzane na wszystkich podstronach, m.in. logo, menu i stopkę.

Aby umieścić na stronie np. logo w formie pliku graficznego musisz przeciągnąć z zakładki QuickBuilder Bar na obszar roboczy ikonę Image. W oknie Import Picture wskaż na dysku plik z logo i kliknij przycisk Otwórz. Posługując się kursorem myszy, ustaw logo według własnego uznania. Powtórz tę czynność tyle razy, ile masz do umieszczenia plików graficznych.

Kolejnym ważnym elementem konstrukcyjnym jest dodawanie tekstów. Aby umieścić na stronie pole tekstowe, z zakładki QuickBuilder Bar przeciągnij na obszar roboczy ikonę Text Frame. Następnie chwyć kursorem myszy białe kwadraciki umieszczone na krawędziach pola tekstowego i dostosuj w ten sposób szerokość tego obiektu. Teraz wprowadź docelowy tekst, wybierając czcionkę, jej wielkość i kolor według własnego uznania.

Obiekt ze sformatowanym tekstem może wyglądać tak jak na poniższym obrazku. Nie przejmuj się, że wokół napisu jest obramowanie. Po uruchomieniu strony w przeglądarce nie będzie tego widać. Obramowanie jest widoczne tylko w trybie projektowania, a jego celem jest ułatwienie widoczności ustawionych pól tekstowych. Pamiętaj, aby na stronie wzorcowej master page dodać tylko elementy, które mają być powtarzane na pozostałych podstronach.

Jeżeli zbudowałeś już podstawową konstrukcję strony i chcesz budować zawartość poszczególnych podstron, opuść tryb master page. W tym celu w prawej części okna programu, w zakładce Site, na liście podstron Pages kliknij dwukrotnie nazwę podstrony, którą chcesz edytować, np. Home. Po chwili obok nazwy podstrony powinna się pojawić ikona z okiem, która oznacza podstronę, na której aktualnie pracujesz.

Program pozwala na założenie witryny składającej się ze strony głównej i czterech podstron. To w zupełności wystarczy do przygotowania podstawowej wizytówki w sieci. Przemyśl konstrukcję swojej strony. Nazwy działów będą zależały od charakteru strony, która może być prywatna, hobbystyczna lub firmowa.

Jeżeli budujesz stronę, wykorzystując gotowy szablon, listę wygenerowanych podstron zobaczysz w oknie głównym programu w zakładce Site. Domyślnie są to te pokazane na poniższym obrazku. W przypadku budowania strony od podstaw w tej samej zakładce masz widoczną tylko stronę główną. Zauważ, że strona główna jest oznaczona charakterystyczną ikoną z domkiem.

Nadaj polskie nazwy działom swojej strony. W tym celu kliknij prawym przyciskiem myszy nazwę strony głównej lub jednej z podstron i z rozwiniętego menu wybierz opcję Page Properties.

W oknie Page Properties, w sekcji Navigation zmień zawartość pola Page name, wpisując nazwę danej podstrony, np. O mnie. Zaznacz opcję Specify page name i wpisz w pole tekstowe tytuł dla strony, który będzie wyświetlany na pasku tytułu okna przeglądarki. Następnie zmień również nazwę pliku podstrony, definiując nazwę w polu File name, np. omnie.html, i kliknij OK. Z drzewa kategorii wybierz jeszcze Appearance i w sekcji Dimensions zdefiniuj szerokość i wysokość danej podstrony. W przypadku modyfikacji szablonu, postępując analogicznie, zmień nazwy pozostałych podstron.

Aby dodać nową podstronę, kliknij ikonę z plusem i w oknie Page Properties wpisz nazwę podstrony oraz nazwę pliku, podobnie jak w kroku 3, i kliknij OK. Jeżeli chcesz usunąć podstronę, kliknij ikonę z minusem.

Do zarządzania strukturą stron masz również specjalne narzędzie, które wywołasz, klikając ikonę Site Structure. W oknie Site Structure możesz dodawać nowe podstrony i definiować linki. W sekcji Web Pages na drzewie kategorii zaznacz aktualną stronę, w naszym przykładzie projekt_wlasny, i kliknij przycisk Properties.

W oknie Site Properties zdefiniujesz parametry techniczne swojej witryny. W sekcji Page Position z listy Default page alignment wybierz Centered, dzięki czemu twoja strona będzie wyśrodkowana w oknie przeglądarki. Następnie w polach Width i Height wpisz kolejno szerokość i wysokość. W sekcji Page Appearance możesz zdefiniować kolorystykę dla hiperłączy.

Z drzewa opcji wybierz File Naming i z rozwijanej listy Default page extension wybierz format rozszerzeń dla plików twojej strony. Domyślnie zaznaczona opcja html jest dobra dla stron statycznych, ale jeżeli planujesz w przyszłości rozbudować swoją stronę o dodatkowe funkcje i mechanizmy (np. formularz kontaktowy, który przesyła wiadomość bezpośrednio przez serwer), z listy wybierz php.

Jeżeli masz już swój serwer i znasz jego parametry, a zarazem docelowy adres swojej witryny, przejdź do części Publishing i w sekcji Site URL podaj ten adres. Darmowe konto WWW możesz założyć w serwisie strefa.pl. Proces rejestracji opisywaliśmy w numerze 11/2011, archiwalny artykuł znajdziesz pod adresem http://pcformat.pl/u/299. Następnie w sekcji FTP account kliknij przycisk Manage accounts.

W oknie Account Details wypełnij formularz, który pozwoli programowi na łączenie się z twoim serwerem i przesyłanie plików wygenerowanej strony bezpośrednio do sieci. W polu Account name nadaj nazwę dla konta, a w pole FTP address wpisz nazwę serwera ftp, np. ftp.strefa.pl. Następnie w pola Username i Password wpisz odpowiednio nazwę użytkownika i hasło. Kliknij przycisk OK, by powrócić do okna Site Properties.

Przejdź do sekcji Graphics. W tej części możesz ustawić opcje optymalizacji obrazów publikowanych na stronie. Aby zachować najwyższą jakość grafik, wybierz z listy JPEG Compression opcję Highest Quality.

Z drzewa kategorii wybierz Code page. Na liście masz domyślnie wybrane kodowanie UTF-8. Jeżeli na stronie wyświetlane są poprawnie polskie znaki diakrytyczne, nie zmieniaj tej opcji. W przypadku wyświetlania tzw. krzaczków zamiast polskich liter, możesz z listy wybrać kodowanie ISO 8859-2.

Na koniec uaktywnij sekcję Summary. W polu Author podaj dane autora witryny. Następnie w pole Keywords wpisz słowa kluczowe, które będą przydatne dla wyszukiwarek. Zatwierdź wszystkie wprowadzone modyfikacje przyciskiem OK.

Po dokonaniu wyboru oprawy graficznej, opracowaniu struktury strony i zapisaniu swojego projektu przystąp do realizacji sposobu nawigacji po stronie. Na początek skup się na nagłówku strony i menu, które będzie umożliwiało nawigację po witrynie.

Jeśli korzystasz z szablonu, zacznij od wyedytowania zawartości nagłówka. W tym celu w obszarze roboczym dwukrotnie kliknij obiekt zawierający tytuł strony. Jeżeli nie możesz od razu zmienić tekstu, pod obiektem pojawią się dwie ikony, kliknij Edit on Master Page. Zostaniesz przeniesiony do edycji w trybie tzw. master page, w którym edytujesz elementy stałe dla wszystkich podstron danej witryny. Możesz przy okazji zmienić krój czcionki i formatowanie tekstu. Podobnie postąp z podpisem, który jest umieszczony pod tytułem.

Pozostając w trybie master page, zmień jednocześnie menu nawigacyjne. Nie ma jednak konieczności budowania menu w tym trybie. Możesz je ręcznie umieszczać na każdej podstronie i w razie konieczności dostosować jego położenie. Jeżeli w wybranym przez ciebie szablonie nie ma zagospodarowanego menu lub budujesz własną stronę od podstaw, przeciągnij z zakładki QuickBuilder Bar na obszar roboczy ikonę Navigation Bar lub dwukrotnie kliknij obiekt zawierający menu. Zobaczysz okienko Navigation Bar Settings.

Uaktywnij zakładkę Type i wybierz jeden z dostępnych wzorów nawigacji. Możesz przygotować menu poziome lub pionowe w formie tekstowej, graficznej lub oparte na JavaScript. Jeżeli budujesz witrynę na podstawie swojego projektu graficznego, przygotuj odpowiednie pliki z obrazami i postępując zgodnie ze wskazówkami programu, zbuduj własne menu.

Przejdź do zakładki Navigation Type, gdzie domyślnie zaznaczona jest opcja Based on site structure, która automatycznie buduje menu, wykorzystując założone podstrony. Możesz zdecydować o układzie struktury, wybierając jedną z dostępnych opcji. Jeżeli chcesz mieć pełną kontrolę nad układem i zawartością menu, zaznacz opcję Custom.

Po chwili zobaczysz drzewo podstron. Korzystając z przycisków: Move Down oraz Move Up, mo żesz zmieniać kolejność ustawienia podstron. Aby ustawić szczegółowe parametry dla linku, dwukrotnie kliknij wybraną podstronę i w oknie Hyperlinks ustaw opcje linku według własnego uznania. Na razie nie przejmuj się anglojęzycznymi nazwami w menu. Zmienią się one automatycznie po dokonaniu zmian w ustawieniach nazw poszczególnych podstron.

Do menu możesz dołączyć odnośniki prowadzące do zewnętrznych witryn, np. do strony pcformat.pl. W tym celu kliknij przycisk Add Link i w oknie Hyperlinks w polu Title wpisz nazwę dla pozycji w menu, np. PC Format.pl. Następnie na drzewie opcji kliknij Internet Page, w polu URL address wprowadź adres internetowy (np. http://pcformat.pl) i kliknij OK.

W zależności od tego, czy pracujesz na gotowym szablonie czy budujesz stronę od podstaw, musisz odpowiednio wyedytować zawartość zagospodarowanych pól tekstowych lub je utworzyć. Pokazujemy, jak wykorzystać najbardziej użyteczne narzędzia oferowane przez program.

Na początek narysuj pola tekstowe, w których wprowadzisz odpowiednie treści dla twojej strony. W przyborniku narzędzi kliknij ikonę Creative Frame Tool i w obszarze roboczym narysuj kształt. Możesz od razu wprowadzić treść. Jeżeli chcesz dodać obramowanie dla tego elementu, kliknij zakładkę Line i dobierz odpowiednie parametry. Oprócz ustawienia grubości obramowania możesz wybrać jego styl.

Aby narysować tabelkę, wybierz z paska narzędzi ikonę Table flyout, a następnie w obszarze roboczym narysuj kształt, w którym zostanie umieszczona tabela. W okienku Create Table zobaczysz na liście Format kilkanaście wzorów tabel, wybierz jeden. W sekcji Table Size wpisz w pole Numer of rows, z ilu wierszy ma się składać tabela, natomiast w pole Number of columns – ile ma zawierać kolumn. Kliknij przycisk OK. W obszarze roboczym pojawi się teraz tabelka – uzupełnij ją według uznania.

Jeżeli chcesz utworzyć hiperłącze dla fragmentu tekstu lub jednego wyrazu, zaznacz wybrany fragment i kliknij ikonę Hyperlink flyout. W oknie Hyperlinks wybierz z drzewa kategorii Site Page, aby ustawić odnośnik do podstrony w obrębie twojej witryny. Jeżeli chcesz zdefiniować link prowadzący do strony zewnętrznej, z drzewa kategorii wybierz Internet Page.

W budowaniu układu strony przydatne mogą być również kształty, którym możesz nadać dowolną kolorystykę. Możesz je łączyć i nakładać na siebie bez ograniczeń. W celu narysowania kształtu kliknij strzałkę obok ikony Quick Rectangle i z rozwiniętej listy kształtów wybierz taki, jakiego potrzebujesz. Następnie narysuj go w obszarze roboczym i korzystając z zakładek Swatches/Color/Line/Transparency, nadaj mu formatowanie.

Ostatnim elementem, który okaże się przydatny, jest ikona Insert Hotspot. Jej zadaniem jest utworzenie hiperłącza na obiekcie, który nie jest tekstem, np. na obrazku. W naszym przykładzie chcemy na logo dodać link prowadzący do strony głównej. Po wybraniu ikony Insert Hotspot narysuj kształt w obszarze roboczym, w naszym przykładzie na napisie mateusznosel. Obiekt zostanie obramowany na zielono. W oknie Hyperlinks postępuj jak w przypadku tworzenia zwykłego hiperłącza, które opisaliśmy w kroku 3.

W każdej chwili możesz sprawdzić, jak twoja strona wygląda w przeglądarce internetowej. Kliknij strzałkę obok ikony Preview i z listy wybierz przeglądarkę, w której chcesz otworzyć podgląd, np. Preview Page in Mozilla Firefox.