Tworzenie i formatowanie linków

Jednymi z podstawowych elementów stron internetowych są linki – tekstowe hiperłącza (odnośniki do innej podstrony serwisu, innego serwisu, pliku, adresu e-mail...). Uczelniany szablon oferuje kilka stylów graficznego prezentowania hiperłączy. W zależności od lokalizacji linku wśród innych elementów strony i potrzeby jego wyeksponowania redaktor może w prosty sposób wpłynąć na wygląd tekstu będącego linkiem.

Poniższe przykłady pokazują różnice w wyglądzie oraz zalety wykorzystania specyficznego formatu hiperłącza.

Warianty stylu linków

Link w bloku tekstu

Klasa CSS: dedykowany kolor główny (dedicated-main-color)

Linki moga pojawiać się w blokach tekstu. Dobrą praktyką jest wyróżnić graficznie taki link, aby nie zlewał się z resztą tekstu. W tym bloku tekstu zastosowano styl linku określany jako dedykowany kolor główny. Kolor będzie korespondować z jednym z dwóch kolorów tematycznych szablonu strony.

Klasa CSS: dedykowany kolor (dedicated-color)

W zależności od koloru tła bloku tekstu, w któym znajduje się hiperłącze, może pojawić się potrzeba zwiększenia kontrastu hiperłącza. Wtedy redaktor może wykorzystać drugą opcję kolorystyczną hiperłącza czyli dedykowany kolor.

Klasa CSS: links

Wybór opcji „links” formatowania hiperłącza spowoduje nadanie mu standardowego, niebieskiego koloru.

Link występujący samodzielnie

Klasa CSS: link dekoracyjny (decorated-link)

W przypadku potrzeby dodanie na stronie linku samodzielnie wysępującego można zastosować formatowanie „link dekoracyjny”. Tekst zostanie pogrubiony, a z jego lewej storny pojawi się pionowa kreska w tematycznym kolorze.

Linki dekoracyjne z użyciem klawisza Enter na końcu wiersza (każdy link w osobnym akapicie, większy dystans pomiędzy nimi)

Przykład linku dekoracyjnego

Drugi link dekoracyjny

Trzeci link dekoracyjny

Linki dekoracyjne z użyciem kombinacji klawiszy Shift+Enter na końcu wiersza (linki w jednym akapicie, mały dystans pomiędzy nimi, połaczone kreski)

Przykład linku dekoracyjnego
Drugi link dekoracyjny
Trzeci link dekoracyjny

Link typu przycisk

Klasa CSS: none;  Styl: Button black / white / primary / secondary

Linki mogą otrzymać wyrazistą formę dużego prostokątnego przycisku o pełnym kolorowym tle. Do dyspozycji redaktorów przygotowano cztery warianty kolorystyczne: czarny, biały, kolor pierwszoplanowy i kolor drugoplanowy. Nie każdy wariant koloru pasuje do każdego koloru tła, dlatego zaleca się wykonanie testów przez redaktorów, aby uzyskać optymalny efekt kontrastu dla osób z dysfunkcjami wzroku.

Link typu przycisk - czarny

Link typu przycisk - biały

Link typu przycisk - kolor pierwszoplanowy

Link typu przycisk - kolor drugoplanowy

Klasa CSS: none; Styl: Button outline black / white / primary / secondary

Drugim wariantem linku typu przycisk jest prostokątny obrys w czterech kolorach do wyboru. Analogicznie jak w przypadku przycisku z pełnym tłem zaleca się wykonanie testów przez redaktorów, aby uzyskać optymalny efekt kontrastu dla osób z dysfunkcjami wzroku.

Link typu przycisk - czarny obrys

Link typu przycisk - biały obrys

Link typu przycisk - pierwszoplanowy kolor obrysu

Link typu przycisk - drugoplanowy kolor obrysu

Tworzenie linków i edycja stylu

Chcąc stworzyć link tekstowy należy wykorzystać elementu zawartości dysponujący edytorem tekstowym np „Zwykły element tekstowy”, „Tekst i obrazki”, „Tekst i wideo”, itp.

  1. Będąc w oknie edycji edytora tekstowego należy wpisać tekst, który ma zostać zamieniony na hiperłącze, a nastepnie zaznaczyć go kursorem.
  2. Kliknąć w przycisk z symbolem ogniw łańcucha (Wstaw/edytuj odnośnik).

Odnośnik do innej podstrony tworzonego serwisu

  1. Chcąc dodać link odwołujący się do innej strony serwisu lub do elementu innej strony serwisu należy w oknie edycji linku wybrać kartę „Strona”.
  2. Z drzewa prezentującego strukturę serwisu wybrać docelową stronę, do której ma kierować link.
  3. W polu „Tytuł” wstawić opis strony lub elementu gdzie będzie kierować link.
  4. W rolety „Klasa CSS” wybrać wariant formatowania linku (przykłady formatowania linków).
  5. W zależności czy link ma kierować do szczytu / początku docelowej strony czy przewinąc docelową stronę do konkretnego jej elemtnu należy kliknąć przycisk z nazwą docelowej strony (5A) lub z listy poniżej wybrany jej element (5B).

Odnośnik do pliku

  1. Aby dodać link odwołujący się do pliku, aby mógł go pobrać użytkownik należy w oknie edycji linku wybrać kartę „Plik”.
  2. Z drzewa prezentującego strukturę przestrzeni serwera z danymi wybrać folder, w którym znajduje się plik.
  3. W polu „Tytuł” wstawić opis pliku do pobrania.
  4. Z rolety „Klasa CSS” wybrać wariant formatowania linku (przykłady formatowania linków).
  5. Wskazać plik, okno zamknie się.

Odnośnik do innego serwisu / innego adresu URL

  1. Celem utworzenia link odwołującego się do zewnętrznego serwisu należy w oknie edycji linku wybrać kartę „Zewnętrzny URL”.
  2. W polu „Tytuł” wstawić Tytuł docelowej strony.
  3. Z rolety „Klasa CSS” wybrać wariant formatowania linku (przykłady formatowania linków).
  4. W polu „URL” wpisać lub wkleić uprzednio skopiowany adres innego serwisu bądź lokalizacji w Internecie (adres musi zawierać przedrostek z typem protokołu: „https://...”).
  5. Aby zakończyć tworzenie linku należy kliknąć w przycisk „Ustaw odsyłacz”

Link jako przycisk

Efekt przycisku uzyskuje się modyfikując styl utworzonego hiperłącza.

  1. Po zredagowaniu linku i zamknięciu się okna edycji linku należy ponownie zaznaczyć frazę hiperłącza.
  2. Wybrać z rolety „Styl” wybrać wariant stylu przycisku.

Wróć do listy instrukcji Typo3