style kate mac

Blog o stylowaniu bloksowych szablonów, tych na nowym kodzie. Szablony udostępnione bez ograniczeń i za darmo, porady, instrukcje i trochę lania wody z innej beczki. Zapraszam.

Wpisy

  • niedziela, 20 maja 2012

    • Odnośniki, odsyłacze, linki, hiperłącza... kwintesencja strony internetowej

      znaczniki linku

      Linki (<a>słowo linkujące</a>) są kwintesencją stron internetowych. Nie ma co dyskutować o celowości ich używania bo na pytanie czy linkować? odpowiedz jest tylko jedna: TAK. Możemy się co najwyżej zastanawiać do czego linkować i jak często. Tak więc zapewne linki jako fundamenty Internetu są obecne na twoim blogu teraz pozostaje ci jedynie zastanowić się jak one powinny wyglądać.

      Zastosowanie a

      Znacznik a w kodzie html oznacza link. Link czyli inaczej odnośnik, hiperłącze, hipertekst czasem używa się też nazw łącze czy hiperlink. Bez względu na to jak to nazwiemy zawsze to będzie jednak jakaś dodatkowa specyficzna właściwość przypisana elementowi. Właściwością tą jest możliwość szybkiego i łatwego przejścia na inną stronę bądź nieco inne miejsce na stronie (w zależności do czego linkujemy).

      Nie używamy natomiast znacznika a jako kotwicy (zakładki, zaznaczenia w treści). W starszych wersjach stron właśnie poprzez atrybut nazwy dodany do znacznika linku można było zaznaczyć miejsce w treści. Był to zazwyczaj pusty znacznik, często niepotrzebnie odrębny. Teraz obowiązującym standardem jest używanie atrybutu identyfikatora, który można przypisać dowolnemu znacznikowi więc jest to zmiana na lepsze. Więcej o zaznaczaniu miejsca w treści przy nieco innej okazji a póki co polecam notkę poruszającą częściowo temat z mojego poprzedniego bloga.

      Ja linkuję kiedy tylko się da. Moje główne blogi są pomocowe więc istotnym są dla mnie linki do powiązanych treści umieszczonych na tych blogach. Nie chcę za każdym razem tłumaczyć wszystkiego od początku. Moje notki są też najczęściej bardzo rozbudowane więc aby ułatwić korzystanie z nich często umieszczam linki do innych (zaznaczonych uprzednio identyfikatorami) miejsc w treści tej samej notki.

      Druga sytuacja, niestety nieco rzadsza na pomocowych blogach ale za to najczęstsza na wszystkich innych, to linki do innych stron i blogów. Pierwsza zasada: zawsze linkuj do źródła. To nie jest coś co jest pożyteczne tylko dla miejsc do których linkujesz ale także dla ciebie i twojego bloga. Twoja strona będzie lepiej powiązana z innymi stronami o podobnej treści i łatwiej będzie odnajdowana w wyszukiwarkach.

      Dodawanie linków do notki

      Wszystko oczywiście zależy od wybranego edytora w którym piszesz notki. W prostym tekstowym należy wpisać <a href= przed elementem/słowem który ma być linkiem a za nim </a>. Zaawansowane mają do tego celu odpowiedni przycisk, który wygląda jak połączone ogniwa. Dokładniej i z ilustracjami (tak dla nawet bardzo zielonych) opisane jest to w notce Jak dodać odnośnik (link) do notki?

      Wygląd linków

      przykład koloru linkuNajczęściej stosowanym przeze mnie sposobem opisania wyglądu linków jest kolor, najprostszy i najoczywistszy sposób wyróżnienia linku. Od zmiany koloru linku zaczęło się właśnie moje zainteresowanie szablonami. Na mój pierwszy blog wybrałam sobie śliczny szablon 103 by epeeya ale kolor linków wydawał mi się za jasny i za szary więc postanowiłam dowiedzieć się jak to zmienić. Odpowiedz znalazłam w bardzo podstawowym wpisie BODY, Box, Text, Szpalta - o co chodzi?  Mój nowy opis w css wyglądał mniej więcej tak: 

      a {
       color: #cc7070;
       text-decoration: none;
      }
      a:hover {
       color: #cc9999;
      }

      Link a przeglądarka.

      Znacznik a, jak wiele innych, może mieć automatyczny wygląd przypisywany mu przez przeglądarkę. Otwierając stronę przeglądarka czyta kod naszej strony, zagląda do stylów i jeżeli na blogu używasz linków a nie masz ich wyglądu opisanego w css to przypisze mu go sama wedle własnego uznania (wygląd w poszczególnych przeglądarkach i ich wersjach może się nieco różnić).

      kolor linków w przeglądarceW przypadku linków najczęściej jest to kolor niebieski i podkreślenie, w przypadku linów odwiedzonych następuje zmiana na kolor fioletowy. Są to ustawienia przeglądarki a nie cecha strony. Zmienić to można sobie w swojej przeglądarce dowolnie, wystarczy przejść do działu opcje.

      Jeżeli linki na twoim blogu mają właśnie taki kolor a nie powinny to coś z ich opisem jest nie tak. W 99% przypadków gdy komuś nieoczekiwanie linki zrobiły się niebieskie powodem nie był szablon, zarówno w oryginalnej formie jak i pozmieniany przez użytkownika, błędy w szablonach nie mają aż takiego wpływu na stronę. Zazwyczaj to coś nie tak pochodziło z kodu html, niewłaściwe znaczniki, tajemnicze skrypty... w html trzeba być bardzo dokładnym (bez względu na to czy jest to pole na dodatkowy kod html czy kod właśnie pisanej notki).

      Przede wszystkim należy więc w szablonie opisać linki generalnie, dla samego a. Dotyczyć to będzie właśnie całej strony. Później można zająć się konkretnymi linkami, wyglądem tytułu bloga czy linków w notce. Dzięki temu nawet jeżeli jakiś nowy typ linków pojawi się na blogu to nie będzie on niebieski. W najstarszych szablonach użytkowników czasami brakuje pewnych opisów elementów, generalne opisanie linków sprawia, że wyglądają one wystarczająco dobrze.

      Najpopularniejsze cechy możliwe do przypisania linkom.

      • color - kolor; linki zawsze mają inny kolor więc nawet jeżeli jakiemuś elementowi, przykładowo tytułowi notki, zostanie zmieniony kolor to o ile jest on linkiem to konieczne jest wpisanie koloru właśnie przy linku
      • text-decoration - dekoracja tekstu; linki często są podkreślone (underline) nie polecam jednak zdawać się tylko na przeglądarkę i jeżeli oczekujesz podkreślenia to mimo wszystko wpisz je; jeżeli go nie chcesz to koniecznie wpisz none
      • font - krój; nie polecam zbiorczego zapisu bo wymaga wpisania rozmiaru i nazwy kroju a to nie zawsze jest niezbędne (chociaż czasami możliwe do wykorzystania; polecam jednak taki zbiorczy zapis użyć przy opisach linków bliżej ciała);
        • font-weight - pogrubienie
        • font-style - kursywa (pochylenie)
        • font - zapis zbiorczy gdy zmienia się zarówno rozmiar jak i rodzinę
      • border-bottom - dolna ramka; może służyć jako podkreślenie, umieszczana jest nieco niżej ale można zmienić zarówno kolor, grubość jak i styl takiego podkreślenia
        • w określonych sytuacjach może się też przydać border-left albo border-right
      • background - tło; w podstawowej wersji wystarczy kolor tła
        • w specyficznych warunkach przydać się może tło graficzne

      Wygląd linków na stylowym blogu: kolor i podkreślenie.

      przykład <hr /> z bloga stylekatemac.blox.plTutaj aktualnie stosuję tylko karmazynowy kolor w podstawowej formie a po najechaniu kursorem na link szarzeje on nieco i zyskuje przerywane podkreślenie.

      Kolory można opisywać na różne sposoby, ja od początku używałam najczęściej tzw. zapisu HEX. Podkreślenie jest rodzajem dekoracji tekstu i można co najwyżej określić czy ono jest czy nie. Dlatego aby uzyskać podkreślenie przerywane zastosowałam dolną ramkę o szerokości 1px i jako styl wpisałam dashed. Opis linku w arkuszu stylów wygląda dokładnie tak:

      a {
       color: #d71149;
       text-decoration: none;
      }
      a:hover {
       color:#a30331;
       text-decoration: none;
       -moz-opacity: 0.8;
       -khtml-opacity: 0.8;
       filter:alpha(opacity=80);
       opacity: 0.8;
      }
      #tresc-glowna .tresc a:hover {
       border-bottom: 1px dashed #a30331;
      }

      • color: #d71149; - mój karmazynowy odcień, który używam na wszystkich szablonowych blogach
      • text-decoration: none; - linki mają opisane w przeglądarce podkreślenie, ja go nie chciałam
      • color:#a30331; - to mój nowy ulubiony odcień karmazynowego, umieściłam go jako kolor linku po najechaniu na niego kursorem (opacity nie jest dostępne dla najstarszych przeglądarek)
      • opacity: 0.8; - czyli transparentność; w przypadku tekstu daje to tu efekt podobny do szarzenia; na zupełnie białym tle link by blaknął; taki efekt można uzyskać także odpowiednim kolorem; plusem korzystania z opcaity jest wtapianie się w tło także ilustracji; przy moim tle o teksturze papieru daje to dodatkowe efekty
      • border-bottom: 1px dashed #a30331; - dolne podkreślenie w postaci linii przerywanej

      Wygląd linków, najprostsze rozwiązania.

      • Kolor kolor linków niebieski

      Najoczywistszym sposobem wyróżnienia linków zawsze będzie kolor. Powinien znacząco odróżniać się od koloru tekstu aby czytelnicy łatwo mogli odszukać linki w tekście (linkami powinny być frazy mające znaczenie a nie słowa typu KLIKNIJ TUTAJ). Są różne sposoby zapisu koloru, najpopularniejszy na stronach internetowych jest HEX. Ciekawą i wygodną dla projektantów zmianą jaką przynosi CSS3 jest możliwość zapisu koloru wg. numeru barwy i procentowego stopnia jasności i nasycenia (hsl bądź wraz z kanałem alfa hsla).

      Początkującym polecam tabelę kolorów X11. Od tego można zacząć i następnie subtelnie dopasowywć odcienie. W przypadku tekstu powinny być wyraziste, intensywne ale niekoniecznie bardzo jasne. Kolor tekstu zawsze będzie się wydawał jaśniejszy niż ten sam kolor użyty jako wypełnienie tła.

      Jeżeli wszystkie linki mają jeden kolor to wystarczy opisać je dla wszystkich znaczników linku.

      zobacz przykład w szablonie 02 subtelnym, niebieskim »

      a {
       color:#668888;
       text-decoration:none;
      }
      a:visited {
       color:#779999;
       text-decoration:none;
      }
      a:hover {
       color:#cc9900;
       text-decoration:underline;
      }

      • Podkreślenie czerwone podkreślone linki

      Jest to drugi spodziewany sposób wyróżnienia linku. O ile w tekście pisanym ręcznie podkreślenie będzie rodzajem wzmocnienia (zaznaczenia ważności) o tyle na ekranie jest używane rzadko w takim znaczeniu i zdecydowanie częściej kojarzone jest z linkami. Jeżeli więc nie chcesz linków wyróżniać kolorem podkreśl je.

      Przykład pochodzi z szablonu na starym kodzie ale opis dotyczy wszystkich linków więc dokładnie taki sam może być na dowolnej stronie.

      zobacz przykład w szablonie 19 Light, beżowym »

      a {
       color:#ed1c24;
       text-decoration:underline;
      }
      a:hover {
       color:#9e0b0f;
       text-decoration:underline;
      }

      • Pogrubienie i kursywa

      Aby wyróżnić linki spośród zwykłego tekstu nie trzeba stosować jaskrawych kolorów. Można użyć subtelnego koloru i bardziej typowych dla pisma wyróżników czyli pogrubienia bądź kursywy (pochylenia tekstu). Używając jednak takiego wyróżnienia należy liczyć się także z jego znaczeniem. Pogrubienie przypisywane jest zazwyczaj wzmocnieniom, kursywa natomiast związana jest z frazami wymagającymi emfatycznego podkreślenia. Polecam więc mimo wszystko dodać także nieco inny kolor aby uniknąć niejasności.

      pomarańczowe, pogrubione linkiPrzykład pogrubienia pochodzi z szablonu na starym kodzie. Wszystkie linki w tym szablonie miały ten sam pomarańczowy kolor ale już pogrubienie było cechą tylko linków w notce. Poniższy kod CSS dotyczy jednak notek w szablonach na nowym kodzie (wygląd ten sam ale selektory nazwane są nieco inaczej).

      zobacz przykład w szablonie 61 fall jesiennym »

      a {
       color: #E57449;
       text-decoration: none;
      }
      a:hover {
       color: #A77A58;
       text-decoration: none;
      }
      #tresc-glowna .tresc a {
       font-weight:bold;
      }

      fioletowe, kursywne linkiW szablonach klasycznych wszystkie linki mają ten sam kolor, w piątym jest to fioletowo-niebieski odcień. Kursywa przy linkach pojawia się tylko w kilku miejscach: przy tytule notki, linkach w elemencie ostatnie notki i linkach w notkach. Poniższy kod dotyczy koloru wszystkich linków i pochylenia linków w treści notki.

      zobacz przykład w szablonie 05 klasycznym, granatowym »

      a {
       color:#110055;
       text-decoration:none;
      }
      a:visited {
       color:#3B0055;
      }
      a:hover {
       text-decoration:underline;
      }
      #tresc-glowna .tresc a {
       font-style:italic;
      }

      Wygląd linków, mniej standardowe rozwiązania.

      Możliwości jest oczywiście więcej. Nie polecam rozwiązań bardzo rzucających się w oczy stosować na całym blogu ale dla linków w notce czemu by nie (jeżeli już na całym blogu to dla prostego wizualnie szablonu).

      • Inny kolor podkreślenia podkreślenie linków w kolorze zbliżonym do tła

      Stosując zamiast podkreślenia tekstu (text-decoration:underline;) właściwość dolnej ramki (border-bottom) możemy osobno określić kolor linii a co za tym idzie możemy linki podkreślić innym kolorem. O ile nie ma to być blog jak dziecięca kolorowanka to proponuję wybierać kolory podobne do tła na jakim umieszczony został link.

      W szablonie z reliefami jest to ciemniejszy szary. Wszystkie linki w tym szablonie są niebieskie i po najechaniu na nie zostają podkreślone ciągłą szarą linią. Czerwone są linki w notce, tytuły notek i samego bloga. Poniższy opis dotyczy tylko widocznych na ilustracji cech czyli podkreślenia i koloru czerwonego przy linkach w treści notki.

      zobacz przykład w szablonie 08 reliefowym, czerwono-niebieskim »

      a:hover {
       border-bottom:#d1d1d1 1px solid;
      }
      .dzien .tresc a {
       color: #cd2a3f;
      }
      .dzien .tresc a:hover {
       color: #ac1e2c;
      }

      • Inny rodzaj podkreślenia

      Wykorzystując do podkreślenia dolną ramkę można nie tylko zmienić kolor podkreślenia ale także jego rodzaj. W najprostszym ujęciu zmodyfikować można grubość i rodzaj podkreślenia, ewentualnie można dodać też zakrzywienie wykorzystując zaokrąglenie narożników (CSS3).

      czerwone linki podkreślone grubą przerywaną liniąPodkreślenie linków linią przerywaną można znaleźć w szablonach na starym kodzie które nazwałam ampla. Bardziej jaskrawy przykład widoczny jest w szablonie z cudzym topem o nazwie This Is How It Feels. Jest to szablon na starym kodzie ale poniższy fragment kodu CSS dostosowałam do potrzeb new_age. Linki w tym szablonie mają różne kolory ale czerwony opisałam jako podstawowy. Za to specyficzne podkreślenie jest już cechą tylko linków w notkach.

      zobacz przykład w szablonie top 06 - This Is How It Feels »

      a {
       color: #CC0000;
       text-decoration: none;
      }
      a:hover {
       color: #339900;
      }
      .dzien .tresc a {
       font-weight:bold;
       border-bottom: 3px dashed #CC0000;
      }
      .dzien .tresc a:hover {
       border-bottom: 3px solid #CC0000;
      }

      granatowe linki podkreślone linią kropkowanąLubię też podkreślać linki liną kropkowaną. Na moim szablonowym blogu takie podkreślenie pojawia się po najechaniu na link kursorem ale w szablonie na starym kodzie o nazwie 31 Garamond podkreśliłam tak linki w notce aby je wyróżnić spośród treści. Treść pisana jest grafitowym kolorem a linki są granatowe. Różnica w kolorach jest niewielka aby więc zaznaczyć dodatkowo linki użyłam ramki kropkowanej. Ponownie mimo iż przykład jest z szablonu na starym kodzie poniższy zapis CSS wykorzystuje selektory z nowego.

      zobacz przykład w szablonie 31 szablon Garamond - ciemny »

      #tresc-glowna .tresc a {
       color: #08122E;
       border-bottom: 1px dotted #08122E;
      }
      #tresc-glowna .tresc a:hover {
       color: #8C8C8C;
       border-bottom: 1px dotted #8C8C8C;
      }

      • Inne tło pod linkiem

      Zazwyczaj nie dodaje się innego tła pod samym tekstem ale jest to kolejny ze sposobów podkreślania ważności tekstu przeniesiony ze świata pisma ręcznego. Inne tło pod tekstem imituje użycie podkreślacza. Czy rzeczywiście będzie to jaskrawy (najczęściej żółty) kolor czy jakaś inna forma to kwestia pomysłu, wykonanie jest mniej więcej takie samo, używa się właściwości background.

      link podświetlony żółtym tłemŻółty pasek tła pod linkiem jest jedną z cech szablonu 14 ale, że zamierzam jego wygląd nieco zmienić to do tego przykładu wykorzystam bardziej subtelne rozwiązanie z szablonu zero. Wszystkie linki w szpalcie z główna treścią po najechaniu na nie kursorem zyskują żółte tło. Oczywiście poniższe selektory dotyczą nowego kodu mimo iż szablon zrobiony jest na starym.

      zobacz przykład w szablonie 01 zero, szarym »

      #tresc-glowna .tresc a {
       color: #777777;
       background-color: #ffffff;
       text-decoration: none;
      }
      #tresc-glowna .tresc a:hover {
       color: #777777;
       background-color: #ffffbb;
       text-decoration: none;
      }

      linki na ciemny tleW bardziej rzucającej się w oczy formie podświetlenie innym kolorem tła wykorzystałam w szablonie na starym kodzie o nazwie The Kid. Wybrałam radykalne rozwiązanie w postaci ciemno szarego tła i grubej czarnej ramki na lewo od linku. Po najechaniu kursorem na link tło znika ale lewa ramka zostaje. Poniższy kod dostosowany został do selektorów szablonów new_age.

      zobacz przykład w szablonie filmowym 03 - The Kid »

      #tresc-glowna .tresc a {
       padding: 0px 3px 2px 2px;
       background:#222;
       border-left:4px solid #000;
       color:#ddd;
      }
      #tresc-glowna .tresc a:hover {
       background:none;
       color:#666;
      }

      • Obrazek obok linku

      Nie polecam tworzenia skomplikowanej, przyciętej na wymiar grafiki ale coś prostego i niewielkiego powinno dobrze się sprawdzić. Jeżeli to ma być obrazek, który zajdzie się pod całym linkiem (np. na całej jego długości) to należy pamiętać, że linki na blogu mogą mieć bardzo dowolną długość. Najbardziej przydatny wydaje się obrazek na wysokość litery umieszczony zaraz obok linku. W takim przypadku należy pamiętać o wysokości tekstu. Nie polecam zwiększania wysokości linków, zaburzy to stały odstęp między wierszami tekstu.

      W jednym z nowych szablonów pojawi się opcja szczególnego wyróżnienia niektórych linków gwiazdką. Jak szablon zostanie opublikowany to podzielę się opisem wyglądu w tej notce.

      obrazek przy linkach target=Na szablonowym blogu linki otwierane w nowej karcie zaznaczam specjalną ilustracją. Jako użytkownika linki otwierane w nowych kartach mocno mnie drażnią z drugiej strony jako autorka własnego bloga nie mogę się powstrzymać przed zmianą celu gdy linki są tylko rodzajem wtrącenia albo prowadzą do ilustracji czy dokumentów tekstowych. Do niedawna taka ilustracja informacyjna była tylko na szablonowym blogu (stąd powyższa ilustracja) ale poniższy opis dotyczy już blogów z szablonami na nowym kodzie (takich jak ten).

      a[target="_blank"] {
       padding-right: 11px;
       background: url(/resource/skm_t_blank.png) center right no-repeat;
      }      

      Wygląd linków w szablonach na starym kodzie opisałam w notce: Właściwości odnośników cz.1 wygląd linków

      Wpisy na powiązane tematy opublikowane na blogu o szablonach na starym kodzie:

      Szczegóły wpisu

      Komentarze:
      (0)
      Tagi:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      niedziela, 20 maja 2012 11:46

      Opcje

  • piątek, 24 lutego 2012

    • Jak dodać odnośnik (link) do notki?

      znaczniki otwierający i zamykający dla linkuOdnośniki - inaczej hiperłącza, odsyłacze hipertekstowe, linki - stanowią kwintesencję Internetu. Bez nich nie byłby on sobą, w niczym nie różniłby się od wydrukowanej strony. Odnośnik jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Coś takiego na papierze też istnieje ale przewaga Internetu polega na tym, że skok do wskazanego miejsca dokonywany jest natychmiastowo a czytelnik nie musi nawet wiedzieć gdzie to docelowe miejsce jest (czyli nie musi go szukać; na papierze co najwyżej wskazać można stronę czy inną pozycję książkową, którą trzeba sobie samemu odszukać).

      Nikogo chyba nie trzeba przekonywać do używania linku. Ten sam cel trudno osiągnąć przy użyciu innych środków. Czy warto używać linków? Niezaprzeczalnie. Jest to jedna z największych zalet Internetu jako sieci powiązanych ze sobą treści. Pisząc o czymś zawsze warto to podlinkować aby czytelnik miał szansę zapoznać się także z oryginałem ale jeszcze większą zaletą będzie podlinkowanie wyjaśnień, które rozszerzą dany temat albo go doprecyzują. Ja dzięki temu mogę uniknąć wielokrotnego powtarzania tych samych wyjaśnień. Nigdy wszak nie wiem ile już wie czytelnik.

      Linkiem może być pojedyncze słowo czy ilustracja ale także całe zdanie, paragraf czy cokolwiek innego. Starsze specyfikacje sugerują aby linkiem były tylko elementy wyświetlane w linii ale w HTML5 nie ma to znaczenia. Mimo iż sam link może być elementem śródliniowym gdy przypisany jest tego typu elementowi (em, strong, span, code czy nawet sam czysty tekst) może też być dodany do elementu blokowego (p, h3).

      Znacznik a (html)

      Niezbędnym atrybutem linku jest href poprzez który wprowadza się adres docelowy. Bez tego atrybutu element jest tylko potencjalnym linkiem. Inne atrybuty specyficzne dla linku to: target, rel, media, hreflang, type. Linkowi można bez problemu dodać też atrybuty dozwolone globalnie (standardowe), będą to: id, class, style, title, lang, dir. 

      Jeżeli chcesz się dowiedzieć jak wstawić link to najpierw zdefiniuj jakiego edytora notek używasz.

      1. prosty edytor tekstowy - wprowadzam tekst w znacznikach html
      2. TinyMCE - istnieje pasek narzędzi

      1. Wstawianie znacznika a (prosty edytor tekstowy)

      Aby w prostym edytorze dodać odnośnik (link) należy wpisać znacznik otwierający <a href="http://adres"> (nawias ostry otwierający - Alfa - odstęp (spacja) - Hotel Romeo Echo Foxtrott - znak równości - cudzysłów (ale nie ten prawdziwy) - adres linku wpisany razem z protokołem - cudzysłów (ale nie ten prawdziwy) - nawias ostry zamykający); następnie wpisać treść linkującą i zakończyć ją znacznikiem zamykającym </a> (nawias ostry otwierający - ukośnik (prawy, slash) - Alfa - nawias ostry zamykający).

      Jest to znacznik, który wymaga zamknięcia. Koniecznie trzeba określić gdzie się kończy część linkująca.

      Można dodać różne atrybuty czy zdarzenia ale najbardziej przydatne są dwa: target, title. Pierwszy określa cel czyli miejsce w którym otworzony zostanie link. Domyślnie jest to _self czyli w tym samym oknie i polecam taki zostawić. Jak ktoś będzie chciał otworzyć sobie link w osobnym oknie to bez problemu to zrobi korzystając z roki myszy czy prawego przycisku. Jeżeli jednak chcesz zdecydować za użytkownika to do otwarcia w nowym oknie służy target="_blank".

      Title to w najprostszym rozumieniu etykieta tytułowa linku. Jest to atrybut o tyle przydatny, że jego treść wyświetla się w dymku narzędziowym. Rzecz całkiem wygodna gdy chce się dokładniej wyjaśnić gdzie przeniesie czytelnika dany link.

      2. Wstawianie linku (edytor TinyMCE)

      TinyMCE - jak dodać link alink (a) w TinyMCEAby w edytorze TinyMCE dodać poziomą linię należy kliknąć w przycisk wyglądający jak połączone ogniwa (kiedyś wydawało mi się, że wygląda to bardziej jak znak nieskończoności czyli przewrócona ósemka). Znajduje się on w drugim rzędzie, mniej więcej na środku, pomiędzy cofnij/ponów a dodawaniem ilustracji (albo podglądem html jeżeli jest to Tiny ze zdjęciami).

      link (a) w TinyMCEUprzednio należy jednak zaznaczyć obiekt, któremu chce się dodać link, czy to będzie ilustracja słowo czy cały paragraf, w pierwszej kolejności zaznaczamy całość. W przeciwnym razie przycisk dodawania linku będzie nieaktywny.

      Po kliknięciu w aktywny przycisk dodawania linku wyświetli się okienko z ustawieniami Wstaw/edytuj link. Są tam aż cztery zakładki ustawień, które umożliwiają dodanie chyba każdego rodzaju linku (można opisać różne atrybuty czy zdarzenia). W zdecydowanej większości wystarczy jednak pierwsza zakładka Właściwości ogólne i wypełnienie pierwszego pola: URL linka.

      URL linkaDodatkowo można podać jeszcze tytuł, który może podpowiadać czytelnikowi gdzie prowadzić będzie link. Szczególnie jest to mile widziane gdy adres linku jest mocno niejasny. W szczególnych wypadkach można rozważyć wypełnienie pola Cel. Umożliwia ono między innymi zdefiniowanie polecania, które sprawi, że link otwierać się będzie w nowym oknie/karcie. Nie bardzo to jednak polecam bo odbiera to możliwość dokonania wyboru osobie, która z tego linku korzysta. Dodatkowo miliony pootwieranych okien drażnią gdy są niezamierzone.

      Na koniec klikamy wstaw i gotowe.

      usuń link Tiny MCElink (a) w TinyMCEAby usunąć link nie musimy już zaznaczać całego linkującego elementu, wystarczy umieścić kursor w dowolnym miejscu, które jest linkiem i kliknąć przycisk Usuń link, który znajduje się obok przycisku Dodaj/edytuj link. Tym razem przycisk nie tylko powinien wyglądać na aktywny ale także na zaznaczony/użyty. W zasadzie oba będą tak wyglądać.

      Wygląd linków w notce

      O ile nie opiszemy wyglądu a w arkuszu stylów to będzie się on wyświetlał się w sposób automatyczny czyli w zależności od rodzaju przeglądarki będzie to podkreślony niebieski tekst.

      Więcej o wyglądzie linków a we wpisie: Odnośniki, odsyłacze, linki, hiperłącza... kwintesencja strony internetowej

      O wyglądzie linków w szablonach na starym kodzie można sobie poczytać w notce: Właściwości odnośników cz.1 wygląd linków

      Szczegóły wpisu

      Komentarze:
      (0)
      Tagi:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      piątek, 24 lutego 2012 15:56

      Opcje

  • wtorek, 31 stycznia 2012
  • niedziela, 15 stycznia 2012
  • czwartek, 22 grudnia 2011
  • poniedziałek, 05 grudnia 2011
  • wtorek, 29 listopada 2011
  • wtorek, 22 listopada 2011

Wyszukiwarka

Kanał informacyjny

Related Posts Plugin

Opcje Bloxa