Budujemy WWW.pdf
(
3374 KB
)
Pobierz
temat numeru
Jak zrobić własną stronę www
Interfejs
programu
Po uruchomieniu programu będzie widoczny
w oknie aplikacji anglojęzyczny poradnik .
Możesz go zamknąć, aby wygodniej pracować
w obszarze roboczym nad swoją stroną. W tym
celu kliknij strzałkę widoczną obok paska prze-
wijania wbudowanej instrukcji.
1.
1.
Menu główne prograMu
Zawiera dostęp do wszystkich funkcji programu,
które zostały podzielone tematycznie.
5.
2.
pasek narzędziowy
Z tego miejsca możesz wykonać podstawowe
polecenia, takie jak: tworzenie nowej strony in-
ternetowej , otwieranie istniejących projektów
, zapisywanie , wycinanie , kopiowanie
, wklejanie , cofanie i ponawianie. Ikona
zapewnia szybki podgląd strony w przeglą-
darkach internetowych zainstalowanych na two-
im dysku. Z kolei ikona służy do publikowa-
nia strony na dysku albo bezpośrednio na
dowolnie wybranym serwerze. Ikony
pozwalają na zarządzanie kolejnością wyświe-
tlania elementów na stronie.
3.
pasek forMatowania
Aktywny w momencie wstawiania lub edytowa-
nia tekstu w obszarze roboczym. Większość
funkcji jest podobna do tych z programów biu-
rowych. Dzięki niemu możesz zmieniać krój
i wielkość czcionki, pogrubiać lub podkreślać
tekst oraz zastosować kursywę . Kolejne
ikony służą do wyrównywania tekstu (do lewej,
do środka, do prawej lub justowanie). Za pomo-
cą ikon możesz tworzyć listy wy-
punktowania symbolem lub numeracyjne. Ko-
lejne ikony umożliwiają zwiększanie lub
zmniejszanie wcięcia tekstu. Kliknięciem ikony
wywołasz specjalny edytor tekstu WritePlus,
wzbogacony o dodatkowe możliwości formato-
wania tekstu. Ikona dostosowuje automa-
tycznie wielkość tekstu do danego pola teksto-
wego na stronie, a ikona wyłącza funkcje
automatycznego dopasowywania tekstu do ra-
mek. Ostatnia ikona – – służy do ustawiania
marginesów na stronie.
– ustawienia techniczne dotyczące
interfejsu programu
– zabezpieczanie strony hasłem
Crop Tool
– przycinanie obiektu
Hyperlink flyout
– tworzenie hiperłączy (linków)
Creative Frame Tool
– rysowanie pola tekstowego
Artistic text flyout
– wstawianie tekstu w ar-
tystycznej formie (np. do nagłówków)
Table flyout
– wstawianie tabeli
Picutre flyout
– wstawianie obrazu
Quick Rectangle
– rysowanie obiektów kształtu
Pencil Tool
– rysowanie (program automatycz-
nie poprawi kształty, pozbawiając je nierówności)
Media flyout
– wstawianie pliku dźwiękowe-
go lub muzyki w tło
Navigation flyout
– wstawianie na stronę
i deiniowanie menu nawigacyjnego
4.
pasek ustawień strony www
Przyciski dostępne w tej części okna służą do
deiniowania parametrów strony internetowej
i zarządzania jej konstrukcją.
– zarządzanie strukturą witryny,
dodawanie/edycja/kasowanie podstron
– szczegółowe parametry witryny
i podstron, możliwość deiniowania linków, teł
na podstronach i dodawania muzyki w tło
– ustawianie marginesów i linii
pomocniczych
dostępowym
5.
przybornik
Każda ikona ma dodatkowo niewielką strzałkę
po prawej stronie. Po jej kliknięciu rozwiniesz
dodatkowe opcje dla danego narzędzia.
Pointer Tool
– zaznaczanie, przesuwanie, ob-
racanie obiektów w obszarze roboczym
Fill Tool
– wypełnianie kolorem
Transparency Tool
– ustawianie przezroczy-
stości obiektu
– deiniowanie proilu użytkow-
nika, informacje teleadresowe
36
PC Format 6/2012
interfejs
instalacja
budowa strony
dodatki
interfejs
programu
P
rzed przystąpieniem do prac nad
rzut oka może wydać się skomplikowany.
Z naszym poradnikiem opanujesz program
i nauczysz się posługiwać najważniejszymi
narzędziami. Aby uruchomić własną wizy-
tówkę w sieci, wystarczy kilka godzin.
własną stroną powinieneś poznać
interfejs programu i jego poszcze-
gólne elementy. Nie zniechęcaj się anglo-
języcznym interfejsem, który na pierwszy
– dodawanie nowej podstrony
– wstawianie galerii zdjęć (do dys-
pozycji masz dwa różne mechanizmy)
Jeżeli chcesz wstawić duże ilości zdjęć, np. peł-
ne albumy fotograii, kliknij zakładkę
2.
3.
4.
,
w której łatwo dołączysz swoje kolekcje.
8.
8.
Próbki, kolory, linie,
przezroczystość
Umieszczone są w prawej części okna programu.
Z tego miejsca ustalasz parametry wizualne dla
zastosowanych obiektów na stronie. Możesz po-
kolorować nie tylko tekst, ale całe obszary zbu-
dowane z kształtów, dodać im obramowanie
i ustawić przezroczystość.
6.
9.
zarządzanie podstronami
Zakładka przedstawia drzewo twojej stro-
ny, na której widoczna jest pełna lista utworzo-
nych podstron. Klikając ikonę , przełączasz
widok między nazwami podstron a nazwami
plików. Ikona służy do dodawania podstrony,
a ikona kasuje wskazaną podstronę. Ostatnia
ikona uruchamia okno zarządzania struktu-
rą strony. Zakładka zawiera kilka ciekawych
efektów, którymi wzbogacisz elementy tekstowe
na stronie. Zakładka to biblioteka obiektów,
które możesz mieć w zasięgu ręki. Wystarczy
przenieść w to miejsce obiekt ze strony, który
chcesz powielać na innych podstronach. W za-
kładce możesz zmieniać wersję kolory-
styczną wybranego szablonu.
9.
10.
przekształcanie
obiektów i zarządzanie
nimi
W zakładce znajdziesz przyciski do wy-
równywania obiektów względem ustawionych
marginesów. Z kolei w zakładce możesz
przekształcać obiekty, zmieniając im parametry
położenia oraz wielkości i szerokości. Jeżeli
chcesz mieć wygodny dostęp do zarządzania
wielkością napisów w obszarach tekstowych,
przełącz się na zakładkę
10.
7.
11.
.
11.
Pasek nawigacji
Na samym dole okna programu masz dodatkowy
wygodny pasek nawigacyjny, z którego możesz
przechodzić między podstronami w obrębie utwo-
rzonej witryny. Dodatkowo z tego miejsca wywo-
łasz okno menedżera lub struktury strony.
7.
Pasek szybkiego
budowania/pasek mediów
Z zakładki masz szybki i wygod-
ny dostęp do najpopularniejszych elementów
narzędziowych do budowania strony. Aby dodać
wybrany element na stronę, przeciągnij wybraną
ikonę na obszar roboczy i ustaw ją w miejscu,
w którym ma się pojawić dany element.
– wstawianie ramki z tekstem
– wstawianie obrazka
– wstawianie animacji w technologii
Smart Object Tool
– wstawianie obiektu typu
smart (wymagane założenie konta na stronie
producenta)
Insert HTML Code
– wstawianie obiektu
HTML
Insert Hotspot
– tworzenie hiperłączy (lin-
ków) dla obiektów o różnych kształtach
[upgrade]
Zwróć uwagę, że niektóre ikony i przyciski są pod-
świetlone na różowo, np.
.
Tak oznaczone elementy nie są dostępne w wersji
Starter Edition. Kliknięcie takiej ikony powoduje,
że wyświetla się okno i propo-
zycja aktualizacji oprogramowania do wyższej,
komercyjnej wersji.
6.
obszar roboczy
W tym miejscu budujesz własną stronę, wyko-
rzystując narzędzia z przybornika. Nie musisz
znać podstaw języka HTML, wszystko projek-
tujesz i budujesz w interfejsie wizualnym, przy-
pominającym zwykły edytor tekstu.
lash
– wstawianie menu nawigacyjnego
– wstawianie przycisku
37
PC Format 6/2012
temat numeru
Jak zrobić własną stronę www
Zbuduj
swoją
stronę
Sięgnij po gotowy szablon…
Do dyspozycji masz kilka gotowych szablonów,
które dodatkowo zostały wzbogacone o różne
wersje kolorystyczne. Dzięki temu dobierzesz od-
powiednie dla siebie barwy. To najprostsza i naj-
szybsza droga do zbudowania własnej strony.
1
Uruchom program WebPlus Starter Edition.
opcji kolorystycznej zobaczysz w sekcji .
Oprócz strony głównej program automatycznie
przygotuje kilka podstron. Zatwierdź wybór sza-
blonu przyciskiem i rozpocznij mody-
ikację merytorycznej zawartości witryny.
3
W oknie programu WebPlus Starter Edition
kacjami, ustaw widok w ska-
li 1:1. W tym celu na pasku
narzędzi rozwiń listę mię-
dzy ikonami
Zoom out/in
i wybierz powiększenie
n
.
4
Od razu zapisz swój projekt na dysku. Klik-
Jeżeli nie widzisz okna kreatora, z menu
wybierz . W kreatorze
w sekcji wybierz
i kliknij odnośnik .
2
W oknie masz
zostanie wczytany wybrany przez ciebie
szablon. Aby wygodnie pracować nad modyi-
nij w tym celu ikonę
Save
lub z menu
wybierz
i w okienku
wskaż na dysku lokalizację, w której chcesz za-
chować projekt. Nadaj plikowi nazwę w polu
i kliknij
.
do dyspozycji kilka gotowych szablonów
podzielonych na kategorie
n
.
Wybierz jeden z nich
i zaznacz jego miniatur-
kę. W naszym przykła-
dzie wybraliśmy sza-
blon
n
.
Dodatkowo, do każdego
szablonu masz przygo-
towanych kilka wersji
kolorystycznych. Roz-
wiń listę i wybierz odpowiednią dla
siebie kolorystkę. Podgląd szablonu i wybranej
Pozycjonowanie
strony
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
38
PC Format 6/2012
budowa strony
instalacja
interfejs
dodatki
Zbuduj
swoją stronę
Z
programem Serif WebPlus
rząc stronę od podstaw. W dru-
gim przypadku niezbędne bę-
dzie przygotowanie własnych
elementów graicznych, które
wykorzystasz w projekcie.
X5 Starter możesz zbudo-
wać własną witrynę na dwa
sposoby: korzystając z jednego
z gotowych szablonów lub two-
... lub zaprojektuj witrynę sam
Poważniejszym wyzwaniem jest zaprojektowanie
całkowicie autorskiej strony. To zadanie przynie-
sie więcej satysfakcji niż tworzenie witryny we-
dług gotowego szablonu, który mogą mieć setki
innych internautów. Zanim zaczniesz projekto-
wać konstrukcję w programie WebPlus, przygotuj
projekt szaty graicznej w dowolnym programie
graicznym. Budując stronę od podstaw, nie jesteś
w żaden sposób ograniczony, wystarczy pomysł
i odrobina umiejętności graicznych. Poszczegól-
ne elementy oprawy wizualnej interfejsu zapisuj
w osobnych plikach, a z tak przygotowanych „kloc-
ków” zbudujesz spójny projekt w programie.
1
W prawej części okna
w sekcji ustal szerokość i wysokość
(w pikselach) dla strony, wpisując te parametry
odpowiednio w pola i (dla roz-
dzielczości monitora 1024x768 pikseli standar-
dowa szerokość wynosi 960 pikseli).
3
Z drzewa kategorii wybierz
szkielet strony
w Master Page
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 wykorzysty-
wanym przez wszystkie podstrony. Dzięki temu
nie będziesz musiał kopiować i dublować stale
powtarzających się elementów.
i z rozwijanej listy w sekcji wy-
bierz . Po odblokowaniu do-
datkowych opcji kliknij przycisk .
4
W okienku zaznacz teraz opcję
i kliknij .
W oknie wskaż na dysku plik
z tłem dla strony i zatwierdź wybór przyciskiem
. Z rozwijanej listy wybierz opcję
, aby tło było powtarzane w poziomie.
Jeżeli w tle chcesz zastosować plik w formie tape-
ty, nie zmieniaj tej listy, lecz na rozwijanej liście
ustal pozycję ustawienia obrazu. Aby ob-
razek w tle był wyśrodkowany i przyciągnięty ku
górnej krawędzi, wybierz opcję
które będą powtarzane na wszystkich podstro-
nach, m.in. logo, menu i stopkę.
6
Aby umie-
programu WebPlus,
w zakładce kliknij
przycisk . Roz-
winie się dodatkowe pole
zawierające ikonę
n
.
Kliknij ją
prawym
przyci-
skiem myszy i z menu kontekstowego wybierz
.
ścić na
stronie np. logo
w formie pliku
graicznego mu-
sisz przecią-
gnąć z zakładki
. Kliknij
, jeszcze raz i .
5
Pozostając na stronie wzorcowej master
na obszar roboczy ikonę
n
.
W oknie
2
W oknie
kliknij
.
wskaż na dysku plik
Następnie w oknie
page, dodaj pozostałe elementy witryny,
z logo i kliknij przycisk
. Posługując się
39
PC Format 6/2012
temat numeru
Jak zrobić własną stronę www
8
Obiekt ze sformatowanym tekstem może
kursorem myszy, ustaw logo według własnego
uznania. Powtórz tę czynność tyle razy, ile masz
do umieszczenia plików graicznych.
7
Kolejnym ważnym elementem konstruk-
master page dodać tylko elementy, które mają
być powtarzane na pozostałych podstronach.
9
Jeżeli zbudowałeś już podstawową konstruk-
wyglądać tak
n
.
cję strony i chcesz budować zawartość po-
szczególnych podstron, opuść tryb master page.
W tym celu w prawej części okna programu,
w zakładce , na liście podstron klik-
nij dwukrotnie nazwę podstrony, którą chcesz
edytować, np. . Po chwili obok nazwy pod-
strony powin-
na się pojawić
ikona
n
,
która ozna-
cza podstronę, na której aktualnie pracujesz.
cyjnym jest dodawanie tekstów.
Aby umieścić na stronie pole teksto-
we, z zakładki prze-
ciągnij na obszar roboczy ikonę
n
.
Następnie chwyć kursorem myszy
białe kwadraciki umieszczone na krawędziach
pola tekstowego i dostosuj w ten sposób szero-
kość tego obiektu. Teraz wprowadź docelowy
tekst, wybierając czcionkę, jej wielkość i kolor
według własnego uznania.
Nie przejmuj się, że wokół napisu jest obramo-
wanie. Po uruchomieniu strony w przeglądarce
nie będzie tego widać. Obramowanie jest wi-
doczne tylko w trybie projektowania, a jego ce-
lem jest ułatwienie widoczności ustawionych pól
tekstowych. Pamiętaj, aby na stronie wzorcowej
Struktura podstron i parametry witryny
ny oraz nazwę pliku, podobnie jak w kroku
3
,
i kliknij . Jeżeli chcesz usunąć podstronę,
kliknij ikonę .
5
Do zarządzania strukturą stron masz rów-
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 pod-
stawowej wizytówki w sieci. Przemyśl konstruk-
cję swojej strony. Nazwy działów będą zależały
od charakteru strony, która może być prywatna,
hobbystyczna lub irmowa.
1
Jeżeli budujesz stronę, wykorzystując go-
z twoim serwerem i przesyłanie plików wyge-
nerowanej strony bezpośrednio do sieci. W polu
nadaj nazwę dla konta, a w pole
wpisz nazwę serwera ftp, np.
ftp.
strefa.pl
. Następnie w pola i
wpisz odpowiednio nazwę użytkownika i hasło.
Kliknij przycisk
nież specjalne narzędzie, które wywołasz,
klikając ikonę
Site Structure
n
.
, by powrócić do okna
.
10
Przejdź do sekcji . W tej części
towy szablon, listę wygenerowanych pod-
stron zoba-
czysz w oknie
głównym pro-
gramu w za-
kładce .
Domyślnie są
to
n
.
W przypadku
budowania
strony od pod-
staw w tej samej zakładce masz widoczną tylko
stronę główną . Zauważ, że strona główna
jest oznaczona charakterystyczną ikoną .
2
Nadaj polskie nazwy działom swojej stro-
W oknie
możesz dodawać nowe
podstrony i deinio-
wać linki. W sekcji
na drze-
wie kategorii zaznacz
aktualną stronę, w na-
szym przykładzie
n
,
i kliknij przycisk .
6
W oknie zdeiniujesz para-
możesz ustawić opcje optymalizacji obra-
zów publikowanych na stronie. Aby zachować
najwyższą jakość graik, wybierz z listy
opcję
n
.
metry techniczne swojej witryny. W sekcji
z listy wybierz
, dzięki czemu twoja strona będzie wy-
środkowana w oknie przeglądarki. Następnie
w polach i wpisz kolejno szerokość
i wysokość. W sekcji możesz zde-
iniować kolorystykę dla hiperłączy.
7
Z drzewa opcji wybierz i z roz-
11
Z drzewa kategorii wybierz
.
Na liście
masz domyślnie wy-
ny. W tym celu kliknij
prawym
przyciskiem
myszy nazwę strony głównej lub jednej z pod-
stron i z rozwiniętego menu wybierz opcję
.
brane kodowanie
n
.
wijanej listy wybierz
format rozszerzeń dla plików twojej strony. Do-
myślnie zaznaczona opcja 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 .
8
Jeżeli masz już swój serwer i znasz jego
3
W oknie
, w sekcji
zmień zawartość pola , wpisując
nazwę danej podstrony, np.
O mnie
. Zaznacz opcję
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ów-
nież nazwę pliku podstrony, deiniując nazwę
w polu
Jeżeli na stronie wyświetlane są poprawnie
polskie znaki diakrytyczne, nie zmieniaj tej
opcji. W przypadku wyświetlania tzw. krzacz-
ków zamiast polskich liter, możesz z listy
wybrać kodowanie
n
.
12
Na koniec uaktywnij sekcję .
, np.
omnie.html
, i kliknij
.
Z drzewa kategorii wybierz jeszcze
parametry, a zarazem docelowy adres swo-
jej witryny, przejdź do części i w sek-
cji podaj ten adres. Darmowe konto
WWW możesz założyć w serwisie strefa.pl. Pro-
ces rejestracji opisywaliśmy w numerze 11/2011,
archiwalny artykuł znajdziesz pod adresem
1
.
Następnie w sekcji
i w sekcji zdeiniuj szerokość i wyso-
kość danej podstrony. W przypadku modyikacji
szablonu, postępując analogicznie, zmień nazwy
pozostałych podstron.
4
Aby do-
W polu podaj dane autora witryny.
Następnie w pole wpisz słowa kluczo-
we, które będą przydatne dla wyszukiwarek.
Zatwierdź wszystkie wprowadzone modyikacje
przyciskiem
kliknij przycisk
dać nową
podstronę, klik-
nij ikonę
n
i w oknie
.
9
W oknie wypełnij formularz,
.
AdreS internetowy
1
http://pcformat.pl/u/299
wpisz nazwę podstro-
który pozwoli programowi na łączenie się
40
PC Format 6/2012
Plik z chomika:
hazus1970
Inne pliki z tego folderu:
10 mitow pozycjonowania stron internetowych.pdf
(465 KB)
Blogi od A do sławy i pieniędzy.pdf
(380 KB)
kurs html offline.zip
(2024 KB)
Budujemy WWW.pdf
(3374 KB)
Ustalanie wyglądu tabeli za pomocą CSS.pdf
(282 KB)
Inne foldery tego chomika:
Grafika
Komputery
Kulinaria
Kursy
Muzyka
Zgłoś jeśli
naruszono regulamin