Treści multimedialne - kodowanie, przetwarzanie, prezentacja Odtwarzanie treści multimedialnych Andrzej Majkowski informatyka +

TYTUŁ: Tworzenie własnego serwisu WWW do zastosowań Fizyki – „Optyka” AUTOR: Bożena Kalbarczyk informatyka +

Spis treści Hiperłącza Wybór programu Tworzenie folderu strony Organizacja folderu strony Nazwy folderów i plików Tytuły strony i plików Wspólne obramowanie Tabele Wstawianie tabel na stronę Formatowanie tabeli Wstawianie grafiki Wstawianie tła Motyw Gotowe cliparty i przyciski Standardowa galeria zdjęć Hiperłącza Aktywne składniki Komponenty zewnętrzne ZEGARY SKRYPT IMIENIN DATA LICZNIKI WEJŚĆ Licznik i księga gości KALENDARZE  Wstawianie filmów (WMV) Wstawianie filmów (SWF)  Wstawianie filmu z YouTube Wstawianie tła dźwiękowego Publikowanie strony w Internecie Wstawianie pokazu slajdów Bibliografia

Wybór programu Spośród wielu możliwości na stworzenie własnej strony www, na uwagę szczególnie początkujących użytkowników zasługuje program Ms FrontPage. Microsoft FrontPage – nierozwijany pakiet  firmy Microsoft, dostępny jako oddzielna aplikacja lub jako część pakietu Microsoft Office, także w polskiej wersji językowej. Jest to jedno z najczęściej używanych narzędzi webmasterskich na rynku, zwłaszcza w firmach i biurach, w środowisku Windows.

Tworzenie folderu strony Pierwszym krokiem w kierunku utworzenia pustej sieci WEB jest utworzenie folderu strony, który zapisujemy w Moje dokumenty, w katalogu Moje witryny. W folderze tym umieścimy później wszystkie elementy naszej strony internetowej, począwszy od plików htm, poprzez grafikę i obrazy, na multimediach skończywszy Zobacz jak to zrobić: http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje/II_ semestr/001/frontpage/projekt/01_tworzenie_pust ej_strony/001_tworzenie_pustej_sieci_web_film.htm

Organizacja folderu strony Należy pamiętać o właściwej organizacji treści, którą chcemy umieścić na stronie. Jeśli umieścimy wszystkie pliki w jednym katalogu, po pewnym czasie zapanuje chaos i ciężko będzie odnaleźć cokolwiek. Należy więc pamiętać, aby w folderze głównym utworzyć kilka podkatalogów dobrze źle

Nazwy folderów i plików Nie należy zapominać o zasadzie tytułowania folderów i plików. Nie mogą się tam znaleźć ani polskie znaki, ani puste odstępy (spacje). Jeśli chcemy nazwać plik np. bałwanek.jpg - musimy usunąć z niego polski znak i zapisać go jako balwanek.jpg.   Jeśli zaś nazwa pliku lub folderu musi być dwu - bądź wieloczłonowa, każdy odstęp pomiędzy wyrazami należy zastąpić podkreślnikiem: _. Nazwa pliku np. układ słoneczny.jpg, będzie wyglądała następująco: uklad_skloneczny.jpg.

Tytuły strony i plików Tytuł strony to napis, który wyświetla się na pasku tytułowym przeglądarki internetowej. Nie zatytułowanie jej sprawi, że nasza strona będzie miała nazwę Nowa strona 1.

Wspólne obramowanie Obramowanie wspólne to sposób na dobrą organizację strony, która będzie miała wiele podstron. Pozwala ono na wyodrębnienie miejsc, które na każdej nowej stroni będą pojawiały się w tym samym miejscu.  Aby ustawić na stronie to obramowanie, powinna być ona pusta. Wybieramy polecenie Format i Obramowanie wspólne. Jak widać na obrazku powyżej obramowanie to może dotyczyć czterech obszarów. Ale może także dotyczyć dwóch (jak na obrazku poniżej) czy na przykład jednego obszaru.  

Wspólne obramowanie Jeśli zaznaczymy opcję Wszystkie strony, wklejona w obramowaniu wspólnym grafika lub tekst pojawi się na każdej stronie w tym samym miejscu i w niezmienionej formie. Zmiana grafiki lub tekstu w tym obszarze, spowoduje taką samą zmianę na wszystkich stronach. Jak ustawić obramowanie wspólne zobacz na filmie http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje/I I_semestr/001/frontpage/projekt/02_podzial_tabe le/001_obramowanie_wspolne_film.htm

Tabele Tabela pozwala rozplanować elementy na stronie i umożliwia umieszczenie ich tam, gdzie chcemy aby się znajdowały. Nie wymusza jednak identycznych elementów tak jak to się dzieje przy obramowaniu wspólnym. Jeśli chcemy, aby tabela lub inne elementy znajdowały się na każdej stronie w tym samym miejscu, wystarczy utworzyć stronę-szablon z odpowiadającymi nam ustawieniami (tabelą, tekstem, grafiką), a następnie tworzyć z niej kolejne strony.

Wstawianie tabel na stronę Tabelę wstawiamy na stronę poprzez polecenie na pasku poleceń Tabela, a następnie Wstaw i Tabela. Pokazuje się tabelka, którą widzimy poniżej. W sekcji Rozmiar ustawiamy ilość wierszy i kolumn naszej tabeli. Komórki tabeli można dzielić i scalać.

Formatowanie tabeli Wyrównanie domyślne ustawi naszą tabelę po lewej stronie. Możemy również ustawić tabelę z prawej strony lub do osi, co oznacza, że tabela będzie umiejscowiona po środku strony. Rozmiar obramowania Każda większa liczba od 1 pogrubi obramowanie tabeli. Wartość 0 sprawi, że tabela będzie całkowicie niewidoczna na stronie. Dopełnienie komórek tworzy w ramce odstęp pomiędzy linią obramowania a znajdującą się w niej zawartością.  

Formatowanie tabeli Odstęp między komórkami tworzy się pomiędzy poszczególnymi komórkami tworząc przestrzeń pomiędzy tekstem a linią boczną komórki. Szerokość tabeli możemy określić na dwa sposoby: Poprzez określenie procentowo jej szerokości na stronie Możemy określić jej szerokość w pikselach. Aby dowiedzieć się więcej o tabelach zobacz film http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje /II_semestr/001/frontpage/projekt/02_podzial_ tabele/002_tabele_film.htm

Wstawianie grafiki Używamy do tego polecenie Wstaw, a następnie Obraz oraz Z pliku.... Należy pamiętać aby obraz nie był zbyt duży. Po pierwsze będzie się długo wczytywać, a po drugie obciąży niepotrzebnie naszą stronę. Jeśli chcemy wkleić zdjęcie np. do galerii, które ma następnie pojawić się w pustym oknie i zajmować cały obszar okna, nie powinno być ono większe niż standardowa rozdzielczość ekranu monitora, czyli 1024 x 768 lub 1152 x 864. Jeżeli wklejamy na stronę zdjęcie, które ma się na niej pojawić obok innych elementów, powinno być one nie większe niż 50% obszaru strony (450 x 450 pixeli). Dużym błędem jest też wklejanie na stronę dużego zdjęcia i pomniejszanie go już na stronie.

Wstawianie tła Tło strony ustawiamy poprzez kliknięcie polecenia Format, a następnie Tło. Pojawia się tabelka, w której możemy ustawić nie tylko kolor tła, ale również tekstu i hiperłączy.

Wstawianie tła Jak ustawić te dane zobacz na filmie: http://www.uz.zgora.pl/~jjedrycz/mtiinstr ukcje/II_semestr/001/frontpage/projekt/ 03_grafika/002_tlo_film.htm

Motyw Motyw jest zestawem połączonych ze sobą elementów strony: tła, kolorystyki, grafiki i stylów czcionek Microsoft FrontPage zawiera wiele gotowych motywów.  Motyw można zastosować do jednej lub wielu stron albo do całej witryny. Motyw uwzględnia wszystkie aspekty wyglądu strony: Kolory - w tym kolory tekstu podstawowego, nagłówków, hiperłączy, napisu na transparencie, etykiet na pasku łączy, obramowania tabel i tła strony. Grafiki - np. obrazy tła, transparenty, punktory, przyciski nawigacyjne oraz linie poziome. Można stosować grafiki standardowe lub aktywne. W zestawie grafik aktywnych na paskach łączy zamiast zwykłych przycisków znajdują się przyciski interakcyjne.

Motyw Jak to zrobić zobacz na filmie Style - czyli odmienne style i rozmiary czcionek tekstu podstawowego i nagłówków. Każdy motyw można dowolnie zmieniać i edytować, poprzez wybieranie schematów kolorów, dodawanie grafiki oraz wybór stylów czcionek. Istnieje również możliwość utworzenia własnego motywu, który może składać się z elementów dostępnych w MS FrontPage lub zewnętrznych, wybranych przez nas. http://www.uz.zgora.pl/~jjedrycz/mtiinstrukc je/II_semestr/001/frontpage/projekt/03_grafi ka/002_motyw_film.htm

Gotowe cliparty i przyciski Projektując stronę internetową nie należy zapominać, że sam MS Office proponuje szereg elementów i komponentów, które mogą uatrakcyjnić wygląd naszej witryny. W folderze Microsoft Office znajdują się tysiące obrazków, ruchomych gifów, teł, przycisków, linii i wiele innych grafik. Wystarczy po nie sięgnąć.  Ich zaletą jest to, że są idealnie dopasowane do stron internetowych zarówno pod względem konstrukcji, jak i rozmiaru, który jest niewielki i nie powoduje obciążenia witryny.

Standardowa galeria zdjęć Tworzy się poprzez wklejenie na stronę zdjęcia w rzeczywistym rozmiarze, a następnie kliknięcie na nią prawym klawiszem myszy i wybranie opcji "Autominiatura". Można także użyć Składnika sieci WEB, który zawiera gotowe wzory galerii, które działają na tej samej zasadzie, a więc tworzą na stronie autominiatury dużych zdjęć.

Standardowa galeria zdjęć Jak wykonać taką galerię zobacz na filmie http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje /II_semestr/001/frontpage/projekt/04_galeria/ 005_galerias_film.htm

Hiperłącza Hiperłącze to zamieszczone w dokumencie elektronicznym (tekstowym, graficznym, wideo, animacji, PDF, HTML) odwołanie do innego dokumentu lub innego miejsca w danym dokumencie. Odwołanie takie związane jest z fragmentem tekstu lub obrazem – uaktywnienie hiperłącza (kliknięcie lub nadejście odpowiedniego momentu) powoduje otwarcie dokumentu docelowego. Nowa strona może otworzyć się w tym samym lub w nowym oknie.

Hiperłącza Odnośników nie tworzy się na aktywnych komponentach, np. obiektach flash, pokazach slajdów i innych. Nie oznacza to jedna, że jest to niemożliwe.   Jak utworzyć hiperłącze zobacz na filmie: http://www.uz.zgora.pl/~jjedrycz/mtiinstru kcje/II_semestr/001/frontpage/projekt/05_ hiperlacza/006_hiperlacza1_film.htm

Aktywne składniki Program MS Front Page pozwala na umieszczanie na stronie aktywnego menu.  Sposobów na utworzenie takie menu jest kilka. Jednym z nich jest skorzystanie z Efektów języka DHTML, które znajdziemy w zakładce Format.

Aktywne składniki Jak utworzyć aktywne składniki zobacz na filmie: http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje /II_semestr/001/frontpage/projekt/06_gotowe_ komponenty/001_aktywne_skladniki_film.htm

Komponenty zewnętrzne Komponenty i skrypty, które można umieścić na stronie internetowej to gotowe programy lub aplikacje, które za pomocą odpowiednich znaczników wkleja się do kodu strony. Elementy te są napisane w języku programowania. Najczęściej jest to HTML, JavaScript, PHP lub inne. Aplikacje takie można wkleić bezpośrednio na stronę lub umieścić na niej odnośnik, który pozwoli wyświetlać na naszej stronie skrypt, który funkcjonuje na innej stronie. Najczęściej poszukiwanymi komponentami są zegary, data, kalendarz, skrypt imienin, liczniki wejść

ZEGARY <object width="150" height="138" type="application/x-shockwave-flash" data="../images/zegarek3.swf" title="dodatki.blogowicz.info"> <param name="type" value="application/x- shockwave-flash" /> <param name="src" value="http://dodatki.blogowicz.info/zegarek3.swf" /> <param name="loop" value="true" /> <param name="wmode" value="transparent"> <param name="quality" value="high" /> </object>

SKRYPT IMIENIN <!-- START free4u.pl --> <script type="text/JavaScript" src="http://www.free4u.pl/imieniny.php "></script> <!-- STOP free4u.pl -->

DATA <SCRIPT LANGUAGE="JavaScript"> <!-- // skrypt pobrano z http://szablony.freeware.info.pl miesiac = new Array(12) miesiac[0] = "stycznia " miesiac[1] = "lutego " miesiac[2] = "marca " miesiac[3] = "kwietnia " miesiac[4] = "maja " miesiac[5] = "czerwca " miesiac[6] = "lipca " miesiac[7] = "sierpnia " miesiac[8] = "września " miesiac[9] = "października " miesiac[10] = "listopada " miesiac[11] = "grudnia " dzien = new Array(7) dzien[0] = "niedziela " dzien[1] = "poniedziałek " dzien[2] = "wtorek " dzien[3] = "środa " dzien[4] = "czwartek " dzien[5] = "piątek " dzien[6] = "sobota " function podaj_date(){ var Dzisiaj = new Date() var Tygodnia = Dzisiaj.getDay() var Miesiac = Dzisiaj.getMonth() var Dnia = Dzisiaj.getDate() var Rok = Dzisiaj.getFullYear() if(Rok <= 99) Rok += 1900 return dzien[Tygodnia] + "," + " " + Dnia + " " + miesiac[Miesiac] + ", " + Rok +"r." } //--> </SCRIPT> <SCRIPT>document.write("Dziś jest " + podaj_date())</SCRIPT>

LICZNIKI WEJŚĆ <script type="text/javascript" src="http://www.darmowe- statystyki.com/usluga.licznik.40182"></ script>

Licznik i księga gości http://www.uz.zgora.pl/~jjedrycz/mtiinstr ukcje/II_semestr/001/frontpage/projekt/0 8_publikowanie/licznik_ksiega_gosci_film.h tm

KALENDARZE <!-- START free4u.pl --> <script type="text/JavaScript" src="http://www.free4u.pl/kalendarz.ph p?"></script> <!-- STOP free4u.pl -->

Wstawianie filmów (WMV) Film w formacie WMV można wstawić na stronę internetową, podobnie jak w formacie AVI oraz MOV i QT (Quick Time). Nie zaleca się wklejania na stronę internetową filmów w formacie WMV. Filmy takie zanim będą odtwarzane muszą się najpierw wczytać, a czasem trwa to dość długo, w zależności od rozmiaru pliku. Można wstawić taki film na stronę umieszczając w kodzie html, następujące znaczniki: <embed width="800" height="600" src="filmy/filmik.wmv">

Wstawianie filmów (SWF) O wiele praktycznie jest umieszczać na stronie filmy w formacie SWF lub FLV. Film odtwarza się natychmiast. Należy wpisać następujący kod: <object type="application/x-shockwave-flash" data="wideo/filmik.swf" width="360" height="300" align="center" border="0"> <param name="movie" value="wideo/filmik.swf" /> </object> W kodzie trzeba wpisać jedynie ścieżkę do filmu w naszym katalogu oraz wymiaru okna, w którym będzie się on odtwarzał. Jest to jeden ze sposobów, a efekt możemy zobaczyć  http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje/II_se mestr/001/frontpage/projekt/07_multimedia/filmik. htm

Wstawianie filmów (SWF) Innym sposobem, jest wklejenie następującego kodu. <object classid="clsid:D27CDB6E-AE6D-11CF-96B8- 444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shock wave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="360" height="300"> <param name="movie" value="wideo/filmik.swf"> <param name="quality" value="High"> <embed src="wideo/filmik.swf" pluginspage="http://www.macromedia.com/go/getflashpl ayer" type="application/x-shockwave-flash" name="obj1" width="800" height="624" quality="High"> </object> Efekt jest identyczny

Wstawianie filmu z YouTube Na naszej stronie możemy umieścić także film z innej strony. Taką opcję udostępnia np. serwis YouTube. Aby to zrobić należy odszukać w serwisie interesujący nas film, pobrać kod z ramki EMBED jak na obrazku poniżej i wkleić go w widoku html naszej strony.

Wstawianie tła dźwiękowego Z reguły odradza się umieszczania tła dźwiękowego na stronach internetowych. Internauci zgodnie twierdzą, że dźwięk przeszkadza w przeglądaniu stron. Koliduje on także z innymi mediami na stronie np. filmami. Aby umieścić na stronie tło dźwiękowe, czyli aby muzyka odtwarzała się bez żadnego panelu kontrolnego, należy do kodu kleić następujący znacznik: <bgsound src="muzyka/mj.mp3" />   Można również użyć znacznika <embed> <embed src="muzyka/mj.mp3" hidden="true" autostart="true" loop="4">   gdzie za pomocą znacznika <hidden> ukryje się panel kontrolny, znacznik <autostart> rozpocznie odtwarzanie dźwięku zaraz po wejściu na stronę, a znacznik <loop> określa ile razy powtórzyć dźwięk.

Publikowanie strony w Internecie Krok 1 W pasku poleceń wyszukaj ikonę  odpowiedzialną na zainicjowanie publikowania. Krok 2 Wpisz w okno Miejsce docelowe publikowania adres FTP. Na serwerach Interia wpisuje się przydzielony adres ftp, ale nie zawsze się tak dzieje. Np. na portalu Onet Republika, serwer ftp jest ogólny, a dane szczegółowe podaje się dopiero przy kroku kolejnym. Wszelkie informacje na ten temat zostaną podane po założeniu konta WWW Krok 3 Wpisz nazwę użytkownika, która w tym przypadku jest składową adresu ftp - ms_front_page.w.interia.pl oraz hasło (takie samo jak hasło dostępu do konta). Krok 4 Opublikuj stronę.

Wstawianie pokazu slajdów Aby wstawić na stronę pokaz slajdów, na którym zdjęcia zmieniają się co jakiś czas, należy utworzyć taki pokaz w programie np.Sothink SWF Quicker, a następnie wkleić go na stronę w ten sam sposób jak film w formacie SWF. <object type="application/x-shockwave-flash" data="wideo/pokaz.swf" width="400" height="300" align="center" border="0"> <param name="movie" value="wideo/pokaz.swf" /> </object>

Bibliografia http://www.uz.zgora.pl/~jjedrycz/mtiinstrukcje/II_semestr/001/frontpage/projekt/spis.htm http://pl.wikipedia.org/wiki/Frontpage