Ten dokument powstał jako materiał do kursu, który kiedyś prowadziłem.
Autor: Paweł Przewłocki (czyli Pafcio); wszystkie opinie i komentarze mozna przesyłac na adres ezhtml@bydnet.com.pl.
Opracowanie to oczywiście nie pretenduje do całościowego opisu FrontPage'a; traktujcie je jako wprowadzenie, dla początkujących.

MS Front Page 98.

Program składa się z dwóch uzupełniających się części: FP Explorera i FP Editora.

Front Page Explorer

to aplikacja zarządzająca projektami witryn internetowych, tzw. FP Webs. Są to zestawy plików (dokumentów HTML, grafik, etc), które składają się na cały projekt serwisu internetowego, który tworzymy. Wszystkie strony projektu mają zwykle podobną szatę graficzną, są połączone odnośnikami, etc.

FP Web tworzymy zwykle przy starcie programu - wtedy pyta on, czy otworzyć istniejącą Web czy też utworzyć nową. Jeśli zdecydujemy się na to ostatnie, to będziemy musieli podać folder w którym zostaną umieszczone wszystkie pliki; ponadto będziemy mogli też skorzystać z różnych Czarodziejów (Wizards), które tworzą np. typową stronę firmy, stronę domową, etc. Jeśli chcemy tworzyć strony od podstaw, wybieramy pozycję Empty Web.

FP Explorer dzieli się na tzw. Widoki (Views), które pokazane są na szarym, pionowym pasku po lewej stronie ekranu. Kliknięcie na którejkolwiek z ikon powoduje pokazanie się odpowiedniego widoku w głównej części okna FP Explorera.

Folders

Ten widok pokazuje nam wszystkie foldery należące do projektu. Klikając na nazwie folderu przywołujemy jego zawartość (obsługa podobna jak w Eksploratorze Windows).

All Files

Widok, w którym dostajemy listę wszystkich plików znajdujących się w projekcie, niezależnie od folderu w którym się znajdują.

Navigation


Najczęściej używany widok. Pokazuje strukturę naszego projektu w formie drzewka.

Każda strona ma swą nazwę, którą zmieniamy klikając na nazwie i wpisując nową. Tę nazwę strony wykorzystują wszystkie obiekty FP, m.in. Navigation Bars. Każdy projekt posiada stronę główną (HomePage), która zaznaczana jest ikonką przedstawiającą domek (Tu: ‘Strona glowna’). Każda (prawie) strona posiada strony nadrzędne, podrzędne i sąsiednie wobec siebie.

Rozpatrzmy stronę ‘Oddzialy’: ma ona stronę nadrzędną (rodzicielską; parental) - jest to ‘Strona glowna’. Stronami tego samego poziomu, sąsiednimi są dla strony ‘Oddzialy’ dokumenty ‘Opis’ i ‘Dane’. Stronami podrzędnymi, “dziećmi” (children) naszej strony są ‘Oddzial1’ i ‘Oddzial2’.

Opisana struktura wykorzystywana jest przez różna komponenty FP, np. Navigation Bars.

Dwukrotne kliknięcie strony powoduje włączenie FP Editora i otwarcie klikniętej strony, gotowej do edycji.

Aby wstawić nową stronę klikamy przycisk ‘New Page’ na pasku przycisków FP Explorera.

Hyperlinks

To widok pokazujący wszystkie strony połączone z wybraną odsyłaczami. Po wyróżnieniu dowolnej strony w lewej części widoku dostajemy schemat, w którego centrum znajduje się wybrana strona; Dokumenty, które wskazują strzałkami na naszą stronę to te, które zawierają odnośniki do niej; dokumenty, które są wskazywane strzałkami przez wybraną stronę to te, do których odsyłacze znajdują się w tejże wybranej stronie.

Hyperlink status

Pokazuje status połączeń, tzn. czy odnośniki zawarte w naszym projekcie działają (często zdarza się np. że strona na innym serwerze na którą wskazuje nasz odnośnik została skasowana -wtedy odnośnik prowadzi donikąd). Jeśli zaznaczymy opcję menu View|Show allhyperlinks to pokazywany będzie status wszystkich odnośników; w innym wypadku tylko dalekich, tzn. wskazujących na strony na innych serwerach. Aby zweryfikować status odnośników wybieramy Tools|Verify Hyperlinks.

Themes

Ten widok pozwala na aplikowanie do naszego projektu tzw. Tematów FP - układów graficznych stron. Do wyboru mamy mnóstwo ładnych takich układów, przygotowanych przez grafików Microsoftu. Aby zastosować temat do naszego projektu, klikamy Use selected theme, wybieramy odpowiedni temat i nacisamy Apply. Możemy dostosowywać tematy do naszych potrzeb: przełącznik Vivid colors zmienia kolory napisów, Active Graphics - kolory i zachowanie obrazów na stronie, za pomocą Background Image włączamy/wyłączamy graficzne tło.

Tasks

Ten widok pokazuje zadania, które zdefiniowaliśmy. Zadania to czynności, które chcemy zrobić i mamy ochotę, aby FP przypominał nam aby wykonać je na czas.

Zadania najlepiej definiować w widoku Navigation, klikając prawym przyciskiem na dokumencie, którego zadanie będzie dotyczyć i wybierając z menu, które w chwili kliknięcia się pokazuje opcję Add Task. Następnie wpisujemy nazwę (task name - najlepiej coś opisowego, np. wpisać numery telefonów!) i naciskamy OK. Utworzone właśnie zadanie pokazuje się w widoku Tasks; w każdej chwili możemy je uruchomić, klikając na nim prawym przyciskiem myszy i wybierając Do task; skojarzona z zadaniem strona otworzy się wtedy w edytorze. Gdy skończymy edycje strony (względnie zapiszemy ją), program spyta, czy uznać zadanie za zakończone (Do you want to mark the task as completed?). Jeśli odpowiemy Tak, to w widoku tasks zobaczymy ‘zielone światło’ przy naszym zadaniu i napis “Completed”; w innym wypadku nasze zadanie jest “in progress”, czyli w trakcie wykonywania.

FP Explorer - wybrane polecenia menu

File|New/Open/Close/Delete FP Web odpowiednio tworzy, otwiera, kończy edycję, kasuje z dysku otwarty projekt.

Tools|Web Settings otwiera okienko, w którym definiujemy pewne właściwości naszego projektu.

Zakładka Language definiuje język. Istotne jest pole Default HTML Encoding, w którym wybieramy domyślną stronę kodową naszych stron - Central European dla kodowania Windows, Central European (ISO 8859-2) dla kodowania ISO.

Zakładka Navigation definiuje nazwy, które będą pojawiać się na przyciskach Navigation Bars. Warto wpisać tu polskie odpowiedniki: Strona główna, Do góry, Wstecz i Dalej.

Idea Shared Borders (Dzielonych Ramek)

Shared Borders to obszary pojawiające się na wszystkich (bądź wybranych) stronach projektu i których zawartość jest taka sama w każdym dokumencie je zawierającym. To co zmienimy w ramce edytując jedną stronę naszego projektu od razu pojawia się we wszystkich pozostałych stronach posiadających tę ramkę. Maksymalnie na stronie mogą być cztery ramki: górna, dolna, prawa i lewa (poza tym zawartość centralnej części każdego dokumentu jest właściwa tylko jemu, tzn. jej zmiana nie powoduje żadnych zmian w innych dokumentach).

Wyboru ilości używanych ramek dokonujemy w FP Explorerze poleceniem menu Tools|Shared Borders.

Jeśli chcemy usunąć bądź dodać jakąś ramkę tylko w jednym dokumencie, to otwieramy ten dokument w FP Editorze i wybieramy z jego menu Tools|Shared Borders i opcję Set For This Page Only. Pamiętajmy, że pozbawione jest sensu wstawienie danej ramki (np. górnej) w jednym tylko dokumencie, ponieważ wtedy nic poza tym dokumentem się nie zmienia, gdy zmieniamy zawartość tej ramki. Dana ramka powinna występować w przynajmniej dwóch dokumentach.

 

FP Editor

służy do edycji stron WWW zawartych w projekcie. Na samym dole widzimy trzy zakładki: Normal - tryb normalnej edycji strony, HTML - tryb edycji HTML (tu widać tylko właściwą zawartość strony, pomijana jest zawartość Shared Borders) oraz Preview - szybki podgląd. Można też podejrzeć wygląd strony w przeglądarce WWW - opcja menu File|Preview In Browser.

Każda strona należąca do projektu ma zaznaczone używane Shared Borders (przerywane linie) oraz wstawione w górnej ramce dwa komponenty - banner (ozdobny nagłówek) i Navigation Bar (patrz dalej).

Właściwości każdego komponentu na stronie możemy ustawić klikając na nim prawym przyciskiem myszki i wybierając opcję FP Component Properties.

Idea komponentu Navigation Bars (Przycisków Nawigacyjnych)

Navigation bars to paski przycisków - odnośników do innych stron projektu. Tytuły pokazujące się na przyciskach są ustawiane automatycznie - są to tytuły wskazywanych stron. We właściwościach tego komponentu wybieramy strony docelowe odnośników. Do wyboru mamy opcje (Hyperlinks To Include):

Parent level - na przyciskach będą odnośniki do dokumentów z poziomu nadrzędnego względem edytowanego dokumentu (-> schemat przy opisie widoku Navigation)

Same level - odnośniki do dokumentów tego samego poziomu (sąsiadów)

Back & Next - pojawią się dwa przyciski -Wstecz i Dalej, dzięki którym możliwe będzie sekwencyjne poruszanie się miedzy dokumentami tego samego poziomu co dokument edytowany; przycisk Wstecz wskazywać będzie dokument po lewej względem edytowanej strony na diagramie w widoku Navigation (-> obrazek na pierwszej stronie), Dalej - po prawej.

Child level - odnośniki do poziomu podrzędnego

Top level - odnośniki do poziomu najwyższego w całej hierarchii (zawiera on zwykle stronę główną).

Dodatkowo można dodać odnośnik do strony głównej (jeśli jeszcze nie występuje - Home Page) i do strony rodzica - Parent Page.

W okienku Właściwości definiujemy też Ułożenie (Orientation) obiektu - pionowe bądź poziome (Vertical/Horizontal), i Wygląd (Appearance) - możemy wybrać między odnośnikami graficznymi (przyciskami-Buttons) a zwykłemi odnośnikami tekstowymi (text).

UWAGA: jeśli umieścimy Navigation Bar w jakiejś dzielonej ramce (a tak się dzieje domyślnie - przy tworzeniu strony NB wstawiany jest np. do górnej ramki), to zmiana właściwości w jednym dokumencie pociągnie za sobą tą samą zmianę w pozostałych; nie oznacza to jednak, że identyczne przyciski pojawią się na każdej stronie, ponieważ inne są dla każdej strony dokumenty rodzicielskie, dziecinne, itp.

Operacje edycyjne i formatowanie tekstu w FP Editorze

Wykonuje się w zasadzie analogicznie jak w MS Wordzie.

Odstępy duże międzywierszowe(<P>) uzyskujemy naciskając Enter, odstępy małe (<BR>) - naciskając Shift+Enter.

Kontrolę nad czcionką uzyskujemy poleceniem Format|Font, można też posługiwać się przyciskami na paskach narzędzi.

Dla każdej strony możemy indywidualnie ustawić Temat - Format|Theme.

Kolorystykę strony i grafikę tła ustalamy wywołując polecenie Format|Background. Ta opcja jest niedostępna, gdy strona używa jakiegoś tematu.

Obrazki

Wstawiamy poleceniem Insert|Image. We właściwościach obrazka mamy dwie zakładki:

General - tu ustawiamy ścieżkę do obrazka, jego typ (można w ten sposób przekonwertować jpg na gif i odwrotnie), tekst alternatywny (Alternative Representation, Text) i, ewentualnie, adres do którego przeniesiemy się po naciśnięciu obrazka(Default Hyperlink, Location - obrazek będzie wtedy odnośnikiem)

Appearance daje kontrolę nad wszystkimi parametrami HTMLowymi obrazka (border, align, etc.).

Dostęp do wielu atrakcyjnych funkcji związanych z grafikami daje tam pasek narzędzi obrazkowych (Image toolbar). Jeśli nie widać go na ekranie, należy pokazać go poleceniem View|Image Toolbar.

Pasek uaktywnia się, gdy zaznaczymy jakąś grafikę na edytowanej stronie, np. klikając ją jednokrotnie.

Obrazek można zwiększać/zmniejszać przeciągając kwadraciki w jego rogach.

Tworzenie map odnośników na obrazku

Mapy odnośników pozwalają na skojarzenie pewnych fragmentów obrazka z jakimś adresem. Taki fragment (Hotspot) obrazka zachowuje się wtedy jak odnośnik.

Poniższe polecenia znajdują się na pasku narzędzi obrazkowych:

Po skończeniu tworzenia figury pokazuje się okienko, w którym definiujemy adres - cel odnośnika (opis tego okienka -> tworzenie odnośników).

Aby zmienić rozmiary obszaru, wyróżniamy go (Select) i odpowiednio przeciągamy obiekt przy pomocy pojawiających się na wierzchołkach figury kwadracików. Położenie obiektu zmieniamy przeciągając go myszką.

Aby zmienić adres docelowy odnośnika, klikamy dwukrotnie wewnątrz odpowiadającego mu obszaru.

Retusz i inne operacje na obrazku

Odnośniki

Aby zdefiniować odnośnik, wpisujemy najpierw tekst odnośnika w edytorze, następnie zaznaczamy go myszą i wywołujemy polecenie Insert|Hyperlink. Otworzy się wtedy standardowe okienko edycji odsyłaczy(Edit hyperlink), które zawiera następujące pola:

Obok pola URL znajdują się 4 przyciski; są to w kolejności (od lewej):

Odnośniki do miejsc wewnątrz strony; bookmarks (zakotwiczenia)

Istnieje możliwość konstruowania odnośników, które prowadzić będą do wyspecyfikowanych miejsc na danej stronie. Aby odnieść się do pewnego miejsca w dokumencie, trzeba to miejsce najpierw odpowiednio oznaczyć, wstawiając tam zakotwiczenie. Robimy to poleceniem Edit|Bookmark i w polu Bookmark name wpisujemy nazwę zakotwiczenia, czyli jakiś ciąg liter (bez spacji). Na jednej stronie nie mogą się znajdować dwa zakotwiczenia o tej samej nazwie (ogólnie liczba zakotwiczeń na stronie ograniczona jest tylko zdrowym rozsądkiem twórcy).

Aby odnieść się do danego zakotwiczenia, wstawiamy odnośnik metodą “tradycyjną” (patrz wyżej), i, po wybraniu strony zawierającej żądane zakotwiczenie (jeśli jest to ta sama strona do której wstawiamy odnośnik, to nie musimy wybierać żadnej), wybieramy z listy rozwijanej Bookmark odpowiednią nazwę zakotwiczenia.

W ten sposób można tworzyć np. spis treści strony (zestaw odnośników do zakotwiczeń umiejscowionych przy nagłówku każdego paragrafu [każdy paragraf-jedno zakotwiczenie]).

Formularze

Elementy formularza wstawiamy wywołując opcję menu Insert|Form Field i wybierając odpowiednią kontrolkę. Możliwe jest też wstawianie kontrolek z paska Forms Toolbar (View|Forms Toolbar). Wstawienie pierwszej kontrolki powoduje automatyczne utworzenie formularza z przyciskami Reset i Submit.. Aby edytować jego właściwości, klikamy prawym przyciskiem myszy wewnątrz jego obszaru i wybieramy polecenie Form Properties. Ustalamy tu, co przeglądarka ma zrobić z danymi wpisanymi do formularza. Gdy zaznaczymy Send to, to będziemy mogli przesłać wyniki do pliku bądź na adres e-mail (wymaga to zainstalowanych na serwerze FP Extensions). Wybrana opcja Send to other pozwala na tradycyjne skojarzenie formularza ze skryptem CGI (przycisk Options). Dane które wpiszemy w okienku wywoływanym przez Options należy uzgodnić z administratorem serwera.

Właściwości każdej kontrolki wywołujemy poleceniem Form Field Properties, dostępnym po naciśnięciu prawego klawisza myszki na danej kontrolce.

A oto dostępne kontrolki:

Dodatkowo w okienku mamy parametry:

Tabele

Wstawiamy poleceniami Table|Draw table (Rysuj tabelę - granice tabeli wyznaczamy myszką) i Table|Insert Table (Wstaw tabelę - tu ustawiamy liczbę kolumn i wierszy i inne właściwości tabeli, opisane niżej).

Właściwości tabeli wywołujemy klikając wewnątrz niej prawym przyciskiem i wybierając opcję Table Properties. A oto opis zawartości pojawiającego się okienka:

Możemy także ustawiać właściwości poszczególnych komórek (prawy przycisk, Cell Properties); dostaniemy okienko z następującymi opcjami:

Paweł Przewłocki, 1998.