Archiwum miesiąca Sierpień 2009

Mapa odnośników

poniedziałek, 31 Sierpień 2009

Definiowanie mapy odnośników

Połączenie niekoniecznie musi być skojarzone z tekstem lub pojedynczym obrazem. Równie
dobrze może odnosić się do punktu o określonych współrzędnych. Mapa odnośników to obraz,
który prowadzi do wielu plików, a skierowane do nich połączenia definiowane są w oparciu o
współrzędne. Każdy punkt obrazu ma swoje współrzędne X i Y. Oto przykład kodu HTML
definiującego za pomocą współrzędnych obszar będący połączeniem i umieszczony wewnątrz
mapy odnośników:
<area shape=?rect? coords=?9,181,111,256? href=?capricorn.html?>
Liczby 9, 181, 111 i 256 określają obszar w obrębie obrazu, który stanowi połączenie do innego
dokumentu. Gdy użytkownik umieszcza wskaźnik myszki nad takim aktywnym obszarem,
wskaźnik przyjmuje postać łapki lub innej ikony wskazującej obecność połączenia. Kliknięcie
obszaru aktywnego powoduje wysłanie żądania HTTP i załadowanie nowej strony do bieżącego
lub nowego okna przeglądarki.
Na pewno spotkałeś w Internecie strony WWW, na których umieszczone były mapy kraju, a
poszczególne jego obszary stanowiły połączenia do innych dokumentów. Jest to chyba najbardziej
typowe zastosowanie mapy odnośników.
Webmaster mając zamiar przy  tworzeniu strony zastosować mapę odnośników, może wykorzystać
obszary aktywne w kształcie kwadratu, prostokąta lub wielokąta. Nie musisz brać
korepetycji z geometrii, aby zdefiniować mapę odnośników. Wystarczy Ci obraz w formacie GIF
lub JPG, który należy umieścić w dokumencie programu blog.

Uwaga dla użytkowników Fireworks: możecie zdefiniować obszary aktywne już w trakcie
tworzenia obrazu. Zapisaną mapę odnośników można potem zaimportować do programu.

Twoja strona zrobi większe wrażenie na odbiorcach, jeśli wprowadzisz na nią tak złożony element jak pasek nawigacji.
Pasek nawigacji tworzony jest przy pomocy narzędzia Navigation Bar programu blog i
składa się z szeregu obrazów podpowiadających wizualnie, gdzie prowadzą przyciski. Czasami na
pasku nawigacji umieszczane są także obrazy interaktywne (ang. rollover images). Są to obrazy-przyciski,
których treść lub kolorystyka zmienia się, gdy znajdzie się nad nimi wskaźnik myszki.
Zazwyczaj pasek nawigacji zawiera także połączenie powrotne, prowadzące do strony głównej.
Zapisz dokument i wyświetl w przeglądarce, aby zobaczyć rezultaty. Jeśli popełniłeś jakiś błąd,
wybierz w menu Modify pozycję Navigation Bar, aby go poprawić.

Wykorzystując wszystkie cztery stany przycisku paska nawigacji możesz uzyskać efekt animacji.
Spróbuj przygotować obrazy i przyporządkować je wszystkim stanom, aby uzyskać podobieństwa
do prawdziwego przycisku.

Połączenia puste (ang. null links) umożliwiają przypisanie tekstowi lub obrazom behawiorów, na
przykład takich jak odegranie dźwięku po kliknięciu obrazu, otwarcie wyskakującego okna lub
pojawienie się wyskakującego komunikatu.
Aby zdefiniować połączenie puste, zaznacz tekst lub obraz, a w polu Link inspektora Property
wpisz znak #. Po zdefiniowaniu połączenia pustego, otwórz paletę Behaviors wybierając pozycję
Behaviors w menu Window (lub stosując skrót Shift+F3). Kliknij przycisk ze znakiem plus, u
góry palety, aby rozwinąć listę dostępnych behawiorów, które możesz przypisać zakotwiczeniu
(tekst lub obraz muszą być zaznaczone w trakcie tej operacji).

Tagi: , ,
Kategoria: Tworzenie stron | Komentarze są wyłączone

Zakotwiczenia

poniedziałek, 31 Sierpień 2009

Zakotwiczenia o zdefiniowanych nazwach

Czyż nie doceniasz wysiłku tych autorów stron WWW, którzy wyposażyli je w połączenia
prowadzące do celu na tej samej stronie? Dzięki temu nie musisz przewijać strony, aby znaleźć to,
czego szukasz. Jeśli definiujesz połączenie do określonego miejsca dokumentu, to tworzysz
połączenia do zakotwiczenia o zdefiniowanej nazwie.

W miejscu punktu wstawiania pojawi się zakotwiczenie. Jeśli go nie widzisz, wybierz w menu
View pozycję Visual Aids, a następnie pozycję Invisible Elements.
Ponieważ wstawiłeś zakotwiczenie, potrzebne Ci jeszcze połączenie do niego prowadzące. Wróć
do początku strony i zaznacz nazwę odpowiedniego miesiąca.

Definiując nazwy zakotwiczeń, unikaj spacji. Pamiętaj także, że wielkość liter gra tu rolę.
Upewniaj się także, że nie umieszczasz samego zakotwiczenia w obrębie warstwy, ponieważ w
niektórych przeglądarkach nie będzie to działać (na przykład w Netscape Navigatorze).

Jeśli chcesz skierować połączenie do zewnętrznego pliku, nazwa zakotwiczenia musi pojawić się
jako ostatni element ścieżki wyświetlanej w polu Link inspektora Property. Wyglądałoby to mniej
więcej tak: inny_plik.html#nazwa_zakotwiczenia

Tagi: ,
Kategoria: Tworzenie stron | Komentarze są wyłączone

Właściwości połączeń

niedziela, 30 Sierpień 2009

Kolory połączeń i podkreślenia

W programie blog kolory połączeń definiowane są w oknie dialogowym Page Properties. Aby je otworzyć, wybierz pozycję Page Properties z menu
Modify lub skorzystaj ze skrótu klawiaturowego Ctrl+J.

O ile Twój dokument nie jest tworzony na bazie szablonu, musisz zdefiniować dla niego w oknie
dialogowym Page Properties następujące kolory:

Aby wybrać własne kolory dla połączeń, kliknij w oknie dialogowym Page Properties ikonę
próbki koloru obok pola Link, a następnie wybierz z palety odpowiedni kolor próbnikiem lub
kliknij ikonę System Color Picker i zdefiniuj nowy kolor w oknie dialogowym Color.

Wybór schematów kolorystycznych

Wybór odpowiednich kolorów dla połączeń to trudna sprawa. Ważne jest to, aby wybrane kolory
prezentowały się jednakowo wspaniale na różnych ekranach. Trzeba mieć świadomość, że
rozjaśnienie ekranu zależy nie tylko od rodzaju platformy (ekrany komputerów Macintosh są z
reguły jaśniejsze niż ekrany komputerów PC). W tym aspekcie komputery różnią się także między
sobą. Dlatego kolory, które na Twoim ekranie są wyświetlane poprawnie, na innym ekranie mogą
stapiać się z tłem.
Nic nie zastąpi testowania wybranych kolorów. Zobacz jak się prezentują na różnych komputerach
i w różnych przeglądarkach, aby mieć pewność, że są czytelne. Możesz także skorzystać z
wbudowanych schematów kolorystycznych programu blog. Aby uzyskać dostęp do
schematów, wybierz pozycję Set Color Scheme w menu Commands.

Schemat kolorów zawiera zestaw kolorów tła, połączeń, aktywnych połączeń i odwiedzonych
połączeń. Kliknij nazwę koloru na liście Background i wybierz z listy Text and Links
odpowiadający schemat Ci schemat kolorystyczny połączeń. Kliknij przycisk Apply, aby
zastosować schemat w dokumencie.

Wyłączanie opcji podkreślania połączeń

W niektórych przypadkach konieczne jest usunięcie domyślnego podkreślenia połączenia. Aby
wyłączyć opcję podkreślania dla całej witryny, zastosuj zewnętrzny kaskadowy arkusz stylów.

  1. Wybierz w widoku projektu pozycję CSS Styles z menu Window lub zastosuj skrót Shift+F11.
  2. Otwórz okno dialogowe definiowania nowego stylu klikając ikonę New Style (ze znakiem plus) znajdującą się u dołu okna palety CSS Styles. Alternatywnie, możesz nacisnąć przycisk ze strzałką w prawym górnym rogu palety CSS Styles i wybrać pozycję New Style z menu.
  3. W oknie dialogowym New Style kliknij przycisk opcji Redefine HTML Tag. Utworzony zostanie nowy styl HTML, który tak zdefiniujemy, aby nie zawierał podkreślenia połączeń.
  4. Rozwiń listę Tag i wybierz znacznik a.
  5. Wskaż opcję This Document Only. W ten sposób zmiana będzie dotyczyła tylko bieżącego dokumentu.
  6. Kliknij OK.

W ustawieniach kategorii Type okna dialogowego Style definition for zaznacz pole wyboru none. Usuwa to podkreślenie połączeń.

Definiowanie stylu
Styl, który właśnie utworzyłeś zostaje osadzony w kodzie strony.

Połączenia e-mail są definiowane nieco inaczej niż zwykłe. Kliknięcie połączenia e-mail
powoduje otwarcie pustego okna nowej wiadomości pocztowej. Ponieważ stanowi ono element
przeglądarki, to niepoprawnie skonfigurowane ustawienia obsługi poczty uniemożliwią działanie
połączeń e-mail.
Połączenia e-mail wstawiane są poleceniem Email Link. Aby z nich skorzystać:
1. Wskaż kursorem miejsce dokumentu, w którym ma się pojawić połączenie e-mail. Jeśli
chcesz przekształcić obraz w takie połączenie, zaznacz obraz. Jeśli natomiast chcesz
utworzyć połączenie tekstowe, zaznacz tekst.
2. Wybierz pozycję Email Link w menu Insert. Możesz także skorzystać z palety obiektów
i wybrać ikonę Insert Email Link z kategorii Common.
3. W wyświetlonym oknie dialogowym Email Link wpisz lub zmień tekst prezentacyjny
połączenia.
4. W polu E-Mail podaj adres e-mail, do którego połączenie ma prowadzić.
5. Kliknij OK.

Jeśli tekst prezentacyjny połączenia został wcześniej sformatowany, zanim przeznaczyłeś go na
połączenie e-mail, formatowanie zostanie utracone.

Aby automatycznie adresować pola cc: lub subject: w oknie wiadomości e-mail, dodaj znak
zapytania ? po nazwie domeny, a po nim wpisz subject=xxx (lub cc=inny@adres.com):
mailto:twojadres@nazwadomeny.com?cc=inny@adres.com

Tagi: , ,
Kategoria: Tworzenie stron | Komentarze są wyłączone

Działania na połączeniach

sobota, 29 Sierpień 2009

Naprawianie zerwanych połączeń
Połączenie Back Home (u dołu strony) w pliku BLOGOWISKO.HTML z foldera podrzędnego Blog
foldera Ch05 jest zerwane.
Aby naprawić to połączenie, otwórz plik BLOGI3.HTML w oknie programu blog i
umieść punkt wstawiania w obrębie tekstu połączenia. Wykonaj działania skierowując połączenie do pliku BLOG.HTML.

Komunikat o zerwanym połączeniu

Narzędzie Point-to-File umożliwia tworzenie połączeń w niezwykle prosty sposób. Narzędzie to
znajdziesz w inspektorze Property, obok narzędzia Browse for File (ikony foldera). Korzystając z niego musisz pamiętać o takim zmniejszeniu rozmiarów okna Site, abyś mógł
widzieć jednocześnie zarówno to okno, jak i dokument, nad którym pracujesz.

Aby zdefiniować połączenie korzystając z ikony Point-to-File:

  1. Otwórz plik BLOGI2.HTML, wpisz w notce reklamowej i zaznacz go.
  2. Otwórz okno Site i tak uporządkuj ekran, abyś widział jednocześnie okno dokumentu i okno Site. Kliknij ikonę Point-to-File w inspektorze  roperty i przeciągnij ją do pliku MOREINFO.HTML. Plik ten znajduje się w folderze BLOGI, wraz z pozostałymi plikami, z których korzystamy w tym ćwiczeniu. Wskazywany przez znacznik ikony Point-to-File plik oznaczany jest ramką.
  3. Zapisz plik i wyświetl w przeglądarce, aby sprawdzić działanie połączenia.

Usuwanie połączeń
Jeśli musisz usunąć połączenie, także pomoże Ci w tym inspektor Property. Zaznacz cały tekst
połączenia. Jeśli zaznaczysz go częściowo, ten fragment, który nie został zaznaczony nadal będzie
połączeniem.
Aby usunąć połączenie:

  1. Zaznacz tekst połączenia.
  2. Zaznacz adres URL wyświetlany w polu Link inspektora Property.
  3. Naciśnij klawisz Del lub Backspace.

Definiowanie połączeń prowadzących na zewnątrz witryny
Jak już wspomniano w tym rozdziale, połączenia do stron WWW innej witryny muszą być
definiowane bezwzględnie. Aby zdefiniować takie połączenia:

  1. Zaznacz w swoim dokumencie tekst połączenia.
  2. Umieść punkt wstawiania w polu Link inspektora Property.
  3. Wpisz w tym polu pełny adres URL, rozpoczynając od http:// (na przykład http://www.google.pl).
  4. Naciśnij Enter, aby zakończyć definiowanie połączenia.

Tagi: ,
Kategoria: Tworzenie stron | Komentarze są wyłączone