Ćwiczenie 3 - Odsyłacze

Transkrypt

1 Ćwiczenie 3 - Odsyłacze Ćwiczenie to poświęcone jest odsyłaczom czyli powiązaniu plików wewnętrznych i zewnętrznych na róŝne sposoby. Linki, które natychmiast przenoszą w określone miejsce to istota stron WWW. Polega na wykonaniu małej witryny kilkuplikowej i powiązaniu jej wzajemnymi linkami róŝnego typu: zwykłymi, obrazkowymi i mapą odsyłaczy, a takŝe wywołaniu konkretnego miejsca w pliku i miejsca w zasobach internetu. W ćwiczeniu bardzo waŝne jest właściwe adresowanie i zapisywanie ścieŝki dostępu do pliku. Ćwiczenie naleŝy rozpocząć od przygotowania właściwej struktury folderów i plików. Do ćwiczenia będą potrzebne pliki, które znajdują się spakowane w paczce pliki.zip (do pobrania ze strony). Proszę przygotować odpowiednie foldery i umieścić w nich właściwe pliki, odpowiednio nazwane. Pliki na razie niech zawierają tylko szablon HTML 4.01 Transitional. Grafiki umieszczone są w oddzielnym folderze nazwanym grafiki. Struktura folderów i plików na załączonym zrzucie:

2 Krok 1. Następne zadanie polega na wykonaniu poziomego menu w kaŝdym z plików. NaleŜy to zrobić wykorzystując znacznik <a>...</a>. Znacznik ten obejmuje tekst, który będzie podkreślonym linkiem. Znacznik posiada kilka atrybutów, które naleŝy uwzględnić: <a href="adres" title="tekst" target="cel">...</a> adres: 1. względna ścieŝka dostępu z miejsca w miejsce 2. naleŝy wpisać drogę uwzględniając wszystkie foldery 3. wchodząc do folderu wpisujemy jego nazwę/ 4. wychodząc z folderu wpisujemy../ 5. na końcu podajemy nazwę pliku z rozszerzeniem 6. przykładowa ścieŝka od index.html do plik_mapa.html: 7. struktura folderów i plików 8. pliki/odsylacze_mapa/plik_mapa.html 9. teraz droga odwrotna od plik_mapa.html do index.html: 10.../../index.html 11. jeszcze ścieŝka od plik_mapa.html do plik_1.html: 12.../odsylacze_1/plik_1.html tekst: 1. tekst pomocniczy, który pojawi się po najechaniu kursorem cel: 1. "_blank" - załadowanie do nowego okna 2. "_parent" - do ramki nadrzędnej 3. "_self" - do tej samej, w której znajduje się element 4. "_top" - do pełnego oryginalnego okna W pliku naleŝy zrobić teŝ odsyłacz do niego samego. Gotowe menu w kaŝdym pliku z działającymi łączami powinno wyglądać tak jak poniŝej na printscreenie:

3

4 Krok 2. Kolejny krok w tym ćwiczeniu polega na zrobieniu łączy w tekście w tym samym pliku i w innym. W plikach: plik_1.html i plik_2.html naleŝy przygotować kilka długich akapitów tekstu, tak aby strona się przewijała. Następnie w kilku akapitach obu plików naleŝy wstawić etykiety, które będą miejscami wywoływanymi z innych miejsc. Etykieta ma postać: <a name="nazwa">...</a>. nazwa: 1. dowolna, niepowtarzająca się nazwa W dalszej części, w innych miejscach naleŝy wstawić odsyłacze do etykiet, w tym samym pliku i do drugiego pliku. Odsyłacz do zakładki - etykiety ma postać: <a href="adres/nazwa_pliku.html#nazwa_etykiety">...</a> adres: 1. względna ścieŝka dostępu z miejsca w miejsce 2. naleŝy wpisać drogę uwzględniając wszystkie foldery 3. wchodząc do folderu wpisujemy jego nazwę/ 4. wychodząc z folderu wpisujemy../ 5. na końcu podajemy nazwę pliku z rozszerzeniem 6. przykładowa ścieŝka od index.html do plik_mapa.html: 7. struktura folderów i plików 8. pliki/odsylacze_mapa/plik_mapa.html 9. teraz droga odwrotna od plik_mapa.html do index.html: 10.../../index.html 11. jeszcze ścieŝka od plik_mapa.html do plik_1.html: 12.../odsylacze_1/plik_1.html 13. za rozszerzeniem html dopisujemy: #"nazwa_etykiety" 14. koniecznie ze znakiem # 15. np.: plik_1.html#etykieta_1 16. albo:../odsylacze_2/plik_3.html#etykieta_3

5

6

7

8

9 Krok 3. Następnie w obu plikach z tekstem proszę u góry strony wstawić etykietę i w dwóch miejscach w tekście: między akapitami i u dołu strony wstawić odsyłacz do góry. W pliku z tekstem proszę wstawić jeszcze odsyłacz do innego pliku otwieranego w nowym oknie.

10

11 Krok 4. Kolejny krok to odsyłacze obrazkowe. Proszę w pliku 3 wstawić odsyłacze obrazkowe do wszystkich plików. Grafiki znajdują się w osobnym folderze. NaleŜy je umieścić w folderze, zgodnie ze strukturą folderów i plików z Kroku 1. adres: Składnia odsyłacza obrazkowego wygląda następująco: <a href="adres"><img src="ścieŝka dostępu do obrazka" alt="tekst alternatywny" /></a> 1. miejsce, gdzie chcemy się przenieść 2. względna ścieŝka dostępu z miejsca w miejsce 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. na końcu podajemy nazwę pliku z rozszerzeniem 7. przykładowa ścieŝka od index.html do plik_mapa.html: 8. struktura folderów i plików 9. pliki/odsylacze_mapa/plik_mapa.html 10. teraz droga odwrotna od plik_mapa.html do index.html: 11.../../index.html 12. jeszcze ścieŝka od plik_mapa.html do plik_1.html: 13.../odsylacze_1/plik_1.html ścieŝka dostępu do obrazka: 1. obrazek, który ma być linkiem do miejsca 2. względna ścieŝka dostępu z miejsca w miejsce 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. na końcu podajemy nazwę pliku z rozszerzeniem 7. przykładowa ścieŝka od plik_3.html do cw_3_1.gif: 8. struktura folderów i plików 9.../../grafiki/cw_3_1.gif 10. koniecznie z podaniem rozszerzenia pliku graficznego tekst alternatywny: 1. tekst zastępczy, kiedy nie wyświetla się obrazek

12

13 Krok 5. Następny krok to podobne zadanie: odsyłacze obrazkowe w postaci miniatur zdjęć do oryginalnych rozmiarów. Proszę umieścić miniatury i zdjęcia duŝe w odpowiednich folderach z Kroku 1. Składnia jest identyczna jak wyŝej: <a href="adres"><img src="ścieŝka dostępu do obrazka" alt="tekst alternatywny" /></a> adres: 1. miejsce, gdzie znajdują się zdjęcia w oryginalnych rozmiarach 2. względna ścieŝka dostępu z miejsca w miejsce 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. na końcu podajemy nazwę pliku z rozszerzeniem 7. przykładowa ścieŝka od plik_3.html do foto_1.jpg: 8. struktura folderów i plików 9.../../grafiki/duze/foto_1.jpg 1. ścieŝka dostępu do obrazka: 2. obrazek - miniatura, który ma być linkiem do miejsca 3. względna ścieŝka dostępu z miejsca w miejsce 4. naleŝy wpisać drogę uwzględniając wszystkie foldery 5. wchodząc do folderu wpisujemy jego nazwę/ 6. wychodząc z folderu wpisujemy../ 7. na końcu podajemy nazwę pliku z rozszerzeniem 8. przykładowa ścieŝka od plik_3.html do cw_3_1.gif: 9. struktura folderów i plików 10.../../grafiki/cw_3_1.gif 11. koniecznie z podaniem rozszerzenia pliku graficznego tekst alternatywny: 1. tekst zastępczy, kiedy nie wyświetla się obrazek W przypadku odsyłaczy obrazkowych warto wykonać na stronie alternatywne, zastępcze, zwykłe linki.

14

15

16 Krok 6. Kolejny krok tego ćwiczenia to mapa odsyłaczy. Wykonuje się ją na pliku graficznym. Wyznacza się miejsca, które będą reagowały na kursor i będą aktywnymi łączami. Grafika do ćwiczeń: mapa_odsylaczy.gif. Składnia mapy odsyłaczy wygląda następująco: <img src="ścieŝka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy" /> <map id="nazwa_mapy" name="nazwa_mapy"> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" /> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" /> (...kolejne kształty...) </map> ścieŝka dostępu do obrazka: 1. obrazek, który ma być mapą odsyłaczy 2. względna ścieŝka dostępu z miejsca w miejsce 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. na końcu podajemy nazwę pliku z rozszerzeniem 7. przykładowa ścieŝka od plik_3.html do mapa_odsylaczy.gif: 8. struktura folderów i plików 9.../../grafiki/mapa_odsylaczy.gif 10. koniecznie z podaniem rozszerzenia pliku graficznego tekst alternatywny: 1. tekst zastępczy, kiedy nie wyświetla się obrazek nazwa_mapy: 1. dowolny tekst, taki sam w pierwszej i w drugiej linii 2. w pierwszym wierszu musi być poprzedzony znakiem # 3. na jednej stronie nie mogą powtarzać się mapy o takiej samej nazwie

17 kształt: 1. kształt obszaru na mapie odsyłaczy: 2. "rect" - prostokąt 3. "poly" - wielokąt 4. "circle" - koło współrzędne: adres: 1. lewy-górny wierzchołek obrazka jest punktem zerowym 2. dla prostokąta: 3. "xl,yl, xp,yp" 1. "xl" - współrzędna pozioma lewego-górnego wierzchołka 2. "yl" - współrzędna pionowa lewego-górnego wierzchołka 3. "xp" - współrzędna pozioma prawego-dolnego wierzchołka 4. "yp" - współrzędna pionowa prawego-dolnego wierzchołka 4. dla wielokąta: 5. "x1,y1, x2,y2, x3,y3,..." 1. "xn,yn" - współrzędne poziome i pionowe kolejnych wierzchołków 6. dla koła: 7. "x,y, r" 1. "x,y" - współrzędne środka 2. "r" - promień koła 1. miejsce, gdzie chcemy się przenieść 2. względna ścieŝka dostępu z miejsca w miejsce 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. na końcu podajemy nazwę pliku z rozszerzeniem 7. przykładowa ścieŝka od index.html do plik_mapa.html: 8. struktura folderów i plików 9. pliki/odsylacze_mapa/plik_mapa.html 10. teraz droga odwrotna od plik_mapa.html do index.html: 11.../../index.html 12. jeszcze ścieŝka od plik_mapa.html do plik_1.html: 13.../odsylacze_1/plik_1.html

18 tekst alternatywny: 1. tekst zastępczy, kiedy nie wyświetla się obrazek Kształty na mapie mogą być róŝne i moŝe być ich więcej. W przypadku mapy odsyłaczy warto wykonać na stronie alternatywne, zastępcze, zwykłe linki. Pomocnym w określaniu współrzędnych na mapie moŝe być program Paint.

19 Podczas wyznaczania wielokąta naleŝy uwzględnić kilka wierzchołków, aby obszar aktywny był w miarę dokładnie odwzorowany. W grafice mapa_odsylaczy.gif naleŝy uaktywnić te województwa, na których są nazwy plików i powiązać je z odpowiednimi plikami HTML.

20 Krok 7. Kolejny krok jest podobny do poprzedniego. W oparciu o grafikę shape.bmp - naleŝy wykonać mapę odsyłaczy: 1. do podstrony 2. do etykiety w innym pliku 3. do zasobów Internetu

21 Krok 8. Ostatni krok polega na wykonaniu w ostatnim pliku nazwanym plik_mapa.html mapy serwisu czyli aktywnego spisu treści odsyłającego do wszystkich plików wraz z ewentualnymi etykietami. Następnie naleŝy wstawić kilka linków do zasobów Internetu: HTTP i FTP oraz link do kontaktu z autorem poprzez . Składnia odsyłaczy do HTTP jest następująca: <a href="adres" title="tekst" target="cel">...</a> adres: tekst: cel: 1. " 1. tekst pomocniczy, który pojawi się po najechaniu kursorem 1. "_blank" - załadowanie do nowego okna 2. "_parent" - do ramki nadrzędnej 3. "_self" - do tej samej, w której znajduje się element 4. "_top" - do pełnego oryginalnego okna Składnia dla FTP wygląda tak: <a href="adres" >...</a> adres 1. "ftp://ftp.adres_serwera" Składnia dla a wygląda tak: <a href="mailto:adres@drzewniak.slupsk.pl" >adres@drzewniak.slupsk.pl</a>

22 Oceniany będzie cały folder: odsylacze wraz z podfolderami i plikami HTML umieszczonymi w odpowiednich miejscach i z wykonanymi wszystkimi działającymi odsyłaczami: zwykłymi i obrazkowymi, zgodnie z krokami ćwiczenia. Spakowany cały folder proszę wysłać do mnie na . Powodzenia.