Tworzenie prostej strony w programie FrontPage Express

 

PODSTAWOWE ZASADY

Aby strona utworzona za pomocą FrontPage Express była poprawna, trzeba spełnić kilka warunków:

  1. Trzeba utworzyć osobny folder w którym zapisujemy wszystkie pliki strony HTML, pliki graficzne: JPG, GIF itp.
  2. Nazwy wszystkich plików powinny być zapisane małymi literami alfabetu łacińskiego (bez polskich liter, spacji, znaków interpunkcyjnych) i cyframi np. index.htm, strona1.htm itd.
  3. Trzeba ustawić kodowanie strony zgodne z jęz. polskim: menu 'Plik'->'Ustawienia strony' - zakładka 'Ogólne'. Wybrać kodowanie strony 'Europa Srodkowa' ISO-8859-2

Struktura witryny

W utworzonym folderze np. 'strona', gromadzisz elementy swojej witryny - pliki htm i pliki grafiki, dla grafik możesz utwórzyć podkatalog, np. mający nazwę 'grafika' lub 'images', albo 'media', jeśli wstawiasz także pliki dźwiękowe.


Zapisywanie pliku

Otwórz edytor i od razu zapisz pustą stronę w swoim katalogu. Wykonaj następującą sekwencję działań:

Menu: 'Plik' -> 'Zapisz jako'

W okienku dialogowym 'Zapisz jako' wpisz od razu tytuł strony (w polu 'Tytuł strony'), np. Strona domowa Jana Kowalskiego.

Zignoruj informację w polu 'Lokalizacja strony' - kliknij na przycisku 'Jako plik' i w okienku dialogowym 'Zapisz jako plik' znajdź na dysku swój katalog 'strona', a następnie podaj nazwę pliku index.htm lub index.html.

Zapisz teraz kolejne pliki twojej strony jako: strona1.htm, strona2.htm, strona3.htm, strona4.htm; Twoja strona internetowa będzie składała się więc z pliku startowego index.htm oraz 4 podstron (pod nazwą strona1 do 4).

UWAGA! Podkreślam konieczność zapisania od razu pliku na dysku i utworzeniu tzw. "szablonu" strony, gdyż dzięki temu będzie można stosować adresy względne (hiperłącza) dla różnych plików.


Informacje o stronie

Przede wszystkim musimy pamiętać, że strona powinna być kodowana w standardzie ISO-8859-2, który jest polską normą, zgodną ze światowymi standardami. Na razie twoja strona jest zapisana w standardzie Windows 1250, o czym być może nawet jeszcze nie wiesz. Aby to zmienić, kliknij menu: 'Plik' -> 'Właściwości strony' ->'Ogólne'

Tutaj znajdują się informacje o stronie np. tytuł twojej strony, kodowanie, tło strony itp. Będą one zapisane w niewidocznej sekcji 'HEAD' w znaczniku 'META'. Więcej informacji o danych META szukaj w Kursie HTML.


Pisanie tekstów - Czcionka

FrontPage Express zawiera w pasku narzędziowym formatowania rozwijaną listę czcionek. Domyślnie czcionka ekranowa jest wyświetlana jako Times New Roman. Początkujący webmaster sądzi niekiedy, że zmiana czcionki, np. wybranie Arial, spowoduje korzystną zmianę w dokumencie. Efektem jawnej zmiany czcionki jest wstawienie do dokumentu polecenia font face="nazwa czcionki". To polecenie nie jest zalecane. Użytkownicy Internetu dysponują różnymi czcionkami w swoich komputerach i gdy wstawisz np. polecenie zmieniające czcionkę na Avenida LET, zapewne mało kto dostrzeże zmianę, gdy niewiele osób ma ją w swoim komputerze. Ty ją widzisz w swoim systemie, ale inni jej nie widzą.

UWAGA! Zalecane czcionki na stronach html to:
Arial, Tahoma, Verdana, Times New Roman, Courier


Wstawianie grafiki

Jeśli chcesz wstawić grafikę do swojej strony, przygotuj wcześniej pliki graficzne i skopiuj je do przeznaczonego na to katalogu, np. 'grafika', 'images' lub 'media'.

Wybierz w menu 'Wstaw' -> 'Obraz'. W okienku dialogowym 'Obraz' kliknij na przycisku 'Przeglądaj' i przejdź do katalogu z grafikami, wybierz obrazek i kliknij na 'Otwórz'.

UWAGA! Dla pewności można sprawdzić w menu 'Widok' -> 'HTML' czy w sekcji 'BODY' odsyłacze do grafiki są zapisane poprawnie. Szukamy znacznika <IMG SRC="">, sprawdzamy czy jest wpisany poprawny odsyłacz do pliku graficznego np. obrazek.gif. Poprawny zapis to: <IMG SRC="images/obrazek.gif">; Nieprawidłowy odsyłacz może zawierać nazwę dysku lub nazwę serwera np. <IMG SRC="//SBS2007/images/obrazek.gif">

UWAGA! W tym momencie ujawnia się korzyść z wcześniejszego zapisania dokumentu na dysku. Odsyłacz do grafiki jest wstawiany w postaci względnej, a więc np. grafika/obrazek.gif. Gdyby dokument nie był zapisany, pojawi się adres bezwzględny, czyli pokazujący dokładne położenie grafiki NA DYSKU. Edytor "nie wie" z góry, jakie będzie położenie naszego dokumentu i "na wszelki wypadek" tworzy dokładny odsyłacz. Podkreślam ten moment, gdyż jest to dość często spotykany błąd początkujących webmasterów, którzy dziwią się, dlaczego ich grafika nie jest widoczna w Sieci. Nie może być widoczna, skoro odwołaliśmy się do pliku na twoim dysku komputera! Gdyby natomiast w dokumencie był umieszczony adres względny grafiki, grafika będzie widoczna, gdyż "będzie jej wszystko jedno", czy jest na serwerze, czy na dysku. Taki adres zawsze będzie poprawny.

Inny błąd to odwoływanie się do grafiki, która w naszym komputerze jest położona na innym dysku. Nawet gdy zapiszemy wcześniej nasz dokument, edytor i tak będzie musiał wstawić bezwzględny adres pliku na innym dysku. Także i taki adres nie będzie poprawnie działać w Sieci. Taki obrazek może być niewidoczny w oknie FrontPage

Pamiętaj więc: zawsze kopiuj obrazki do odpowiedniego katalogu i zanim je wstawisz do dokumentu, zapisz plik HTML na dysku!


Odsyłacze do stron - Hiperłącza

Gdy tworzysz w swojej witrynie odsyłacz do innej strony otwórz ją wcześniej we FrontPage, a jeśli jej jeszcze nie ma, utwórz ją i zapisz na dysku, a następnie otwórz. Jest to najwygodniejsza metoda.

Na stronie, na której tworzysz odsyłacz np. łącze ze strony "index.htm" do strony "strona1.htm", zaznacz blokiem tekst odsyłacza (np. STRONA 2) i wybierz w menu 'Wstaw' -> 'Hiperłącze' (lub Ctrl-k lub ikona Hiperłącze).

W okienku dialogowym 'Utwórz hiperłącze', w części 'Otwarte strony', zobaczysz listę otwartych w edytorze plików. Wskaż po prostu jeden z nich i zatwierdź przyciskiem 'OK'.

Inne typy hiperłącza:

  • Jeśli zechcesz utworzyć odsyłacz do strony w Internecie, poza twoją witryną, wybierz w okienku dialogowym 'Sieć Web', wskaż typ łącza 'http' i w polu 'URL' dopisz adres, np. www.polbox.pl/lupus.
  • Gdy tworzysz łącze do adresu poczty elektronicznej, np. do siebie samego, wybierz typ 'mailto' i dopisz adres pocztowy, np. jan.kowalski@firma.com.pl.

Wstawianie plików multimedialnych

Wszystkie pliki muzyczne, filmowe powinny być zapisane np. w folderze 'media'. Do dokumentów html można wstawiać muzykę, filmy, prezentacje, animacje, animacje FLASH. Uzależnione  jest to od tzw. wtyczki (plugin) dostępnej i zainstalowanej w przeglądarce Internet Explorer (tzw. format Active X). Można wstawić muzykę w pliku WMA lub film WMV. Do odtwarzania tych plików uruchomi się wtyczka Windows Media Player'a.

Wstawianie filmu: Kliknij menu 'Wstaw' -> 'Inne składniki' -> 'Format ActiveX'. W otwartym okienku trzeba wskazać folder 'media' następnie plik. Program sam dołączy odpowiednie opisy w znaczniku <object classid=""> oraz <EMBED SRC="">

Sprawdź kod twojego pliku 'htm' czy zawiera następujące linie ze znacznikami

Kod źródłowy dla plików filmowych WMV:

<object type="video/x-ms-wmv" data="plik.wmv" width="320" height="260">
<param name="src" value="plik.wmv">
<param name="autostart" value="false">
<param name="controller" value="true">
</object>

Kod źródłowy dla plików FLASH (swf):

<object type="application/x-shockwave-flash"
data="film.swf" width="200" height="150">
<param name="movie" value="film.swf">
</object>

POZOSTAŁE ZNACZNIKI I WSZELKIE DODATKOWE INFORMACJE SZUKAJ W KURSIE HTML


 © All Right Reserved 2011 ADMIN