style kate mac

Wpisy

• piątek, 24 lutego 2012

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

    Odnoś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)

    Aby 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).

    Uprzednio 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.

    Dodatkowo 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.

    Aby 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:

    • a-html
    • html elementu
    • link
    • pisanie notki

    Kategoria:

    • o bloksowaniu

    Autor(ka):

    kate_mac

    Czas publikacji:

    piątek, 24 lutego 2012 15:56

    Opcje

    • Przejdź do wpisu „Jak dodać odnośnik (link) do notki?”
    • Dodaj komentarz do wpisu „Jak dodać odnośnik (link) do notki?”

• wtorek, 31 stycznia 2012

  • 09 reliefowy, czarny

    Trzeci szablon reliefowy jest zupełnie ciemny. Rzadko kiedy robię ciemne szablony ale tym razem zupełnie zaszalałam i pobawiłam się grafitowymi odcieniami. Czerń jest jedna, w zasadzie jest to zupełny brak koloru. Czyli światła bo kolory to sposób w jaki światło odbija się od przedmiotów. Na ekranie jest nieco inaczej. Kolory powstają nie poprzez odbicie światła a poprzez jego emisję (czy jakoś tak). Czy można więc uzyskać prawdziwie czarny kolor na świecącym ekranie?

    ---

    

    09 reliefowy, czarny,
    na nowym kodzie, dla blogów na blox.pl. -935px- 

    ---

    Szablon ma bliźniacze projekty: beżowy i amerykański. Tym razem nie ma instrukcji tworzenia wersji dwukolumnowej ale w dalszej części wpisu udostępniam alternatywny kod, z węższą szeroką szpaltą i przeniesionym do drugiej kolumny jednym z elementów szpalty z treścią poboczną.

    Szablon nie ma grafiki tytułowej, należy ją sobie samemu dodać według własnego uznania. Przygotowałam kilka propozycji przykładowych ilustracji i ramek. Najlepiej jednak dodać własne zdjęcie.

    dowiedz się więcej »

    Szczegóły wpisu

    Komentarze:

    (0)

    Tagi:

    • -900px-
    • Century Gothic
    • czarny
    • reliefowy
    • typ horyzontalny

    Kategoria:

    • moje szablony

    Autor(ka):

    kate_mac

    Czas publikacji:

    wtorek, 31 stycznia 2012 23:03

    Opcje

    • Przejdź do wpisu „09 reliefowy, czarny”
    • Dodaj komentarz do wpisu „09 reliefowy, czarny”

• niedziela, 15 stycznia 2012

  • 08 reliefowy, amerykański

    Drugi szablon reliefowy jest głównym powodem stworzenia tego typu. Początkowo nawet te szablony nazwałam mail ze względu na inspirację jaką były dla mnie amerykańskie koperty z czerwono-niebieskimi paskami na krawędziach. Te paski odtworzone są w tym właśnie szablonie, to one decydują o jego amerykańskim charakterze. Nawiązanie jest niewielkie po to aby wygodnie można było wpasować ilustrację o dowolnym temacie.

    ---

    

    08 reliefowy, amerykański (czerwono-niebieski),
    na nowym kodzie, dla blogów na blox.pl. -935px- 

    ---

    Jasny anonimowy szablon pasujący do każdego tematu, bardzo szeroki, przeznaczony do prezentacji zdjęć. Dedykowany głównie fotoblogom i blogom craftowym gdzie więcej jest ilustracji prezentujących własne dzieła niż tekstu. Wiersze są bardzo długie, zawierają około 120 znaków co jest zdecydowanie za dużo jak na jedną linę ale jeżeli w akapicie nie będzie ich więcej niż 3-4 to nie powinno być problemu z gubieniem linijki.

    Szablon ma bliźniacze projekty: beżowy i czarny. Tym razem nie ma instrukcji tworzenia wersji dwukolumnowej ale w dalszej części wpisu udostępniam alternatywny kod, z węższą szeroką szpaltą i przeniesionym do drugiej kolumny jednym z elementów szpalty z treścią poboczną.

    Szablon nie ma grafiki tytułowej, należy ją sobie samemu dodać według własnego uznania. Przygotowałam kilka propozycji przykładowych ilustracji i ramek. Najlepiej jednak dodać własne zdjęcie.

    dowiedz się więcej »

    Szczegóły wpisu

    Komentarze:

    (0)

    Tagi:

    • -900px-
    • Century Gothic
    • czerwony
    • niebieski
    • reliefowy
    • typ horyzontalny

    Kategoria:

    • moje szablony

    Autor(ka):

    kate_mac

    Czas publikacji:

    niedziela, 15 stycznia 2012 12:22

    Opcje

    • Przejdź do wpisu „08 reliefowy, amerykański”
    • Dodaj komentarz do wpisu „08 reliefowy, amerykański”

• czwartek, 22 grudnia 2011

  • 07 reliefowy, beżowo-karminowy

    Relief czyli płaskorzeźba. Początkowo miałam bardzo duży problem z nazwaniem tego szablonu. Samą wersję magentowo-beżową robiłam trzy razy, niewiele zmieniając w jego podstawowym układzie czy doborze kolorów. Od początku to był szeroki, jednokolumnowy szablon z tłem w beżowych odcieniach i wyróżnikami w nieco czerwieńszej odmianie magenty. To się nie zmieniało. Dopiero jednak dodawszy zagłębione przyciski zdecydowałam się na tytuł.

    ---

    

    07 reliefowy, karminowy,
    na nowym kodzie, dla blogów na blox.pl. -935px- 

    ---

    Bardzo szeroki szablon, przeznaczony do prezentacji zdjęć. Dedykowany głównie fotoblogom i blogom craftowym gdzie więcej jest ilustracji prezentujących własną pracę niż tekstu. Linie tekstu są bardzo długie, zawierają około 120 znaków co jest dużo za dużo i łatwo czytelnikowi będzie zgubić linijkę. Jeżeli jednak akapity nie będą zawierały więcej niż trzy wiersze nie powinno być problemu.

    Szablon ma bliźniacze projekty: amerykański i czarny. Tym razem nie ma instrukcji tworzenia wersji dwukolumnowej ale w dalszej części wpisu udostępniam alternatywny kod, z węższą szeroką szpaltą i przeniesionym do drugiej kolumny jednym z elementów szpalty z treścią poboczną.

    Szablon nie ma grafiki tytułowej, należy ją sobie samemu dodać według własnego uznania. Przygotowałam kilka propozycji przykładowych ilustracji i ramek. Najlepiej jednak dodać własną grafikę.

    dowiedz się więcej »

    Szczegóły wpisu

    Komentarze:

    (0)

    Tagi:

    • -900px-
    • Century Gothic
    • magentowy
    • reliefowy
    • typ horyzontalny

    Kategoria:

    • moje szablony

    Autor(ka):

    kate_mac

    Czas publikacji:

    czwartek, 22 grudnia 2011 10:42

    Opcje

    • Przejdź do wpisu „07 reliefowy, beżowo-karminowy”
    • Dodaj komentarz do wpisu „07 reliefowy, beżowo-karminowy”

• poniedziałek, 05 grudnia 2011

  • Ilustrowany przewodnik po bloksie

    Na szablonowym blogu stworzyłam nowy tag Ilustrowany przewodnik po bloksie. Przypomniał mi się stary wpis DeBergeraca, już niedostępny i postanowiłam zrobić własną wersję. Opisałam ze strzałkami jak trafić do pola na dodatki i do arkusza stylów, będzie chyba jeszcze o załadowaniu plików do zasobów... wydaje mi się, że powinno być coś jeszcze ale jak na razie nic nie przychodzi mi do głowy.

    

    Sprawdziłam kategorię o blokowaniu i okazało się, że jest tam całkiem sporo wpisów wyjaśniających bardzo podstawowe rzeczy. Takich dla zaczynających dopiero przygodę z blogowaniem, dla zielonych jak szczypiorek na wiosnę, dla seniorów-internetowych juniorów... itp. Dodałam więc listę tych wszystkich wpisów w tamtejszych zakładkach.

    Tutaj takich wpisów nie będzie. Nie ma co powtarzać tych samych notek i tematów skoro w dziedzinie obsługi bloga nowy kod HTML nic nie zmienia. Dlatego tylko wypiszę tutaj tamte notki o podstawowej obsłudze ustawień bloga a tam zaś posprawdzam czy wszystko jest aktualne.

    ilustrowany przewodnik po bloksie

    1. Dodawanie komentarzy na blox.pl
    2. Blox.pl dla początkujących. Jak założyć bloga? (Piotr Sajnog)
    3. Edytor TinyMCE: Wstawianie obrazów i filmów do notki
    4. Edytor TinyMCE: Jak prosto i wygodnie dzielić notkę na wstęp i treść
    5. Edytor TinyMCE: Otaczanie ilustracji w notce tekstem (FAQ)
    6. Edytor TinyMCE: Dodawanie obrazu w notce, możliwości zmiany właściwości
    7. Nawigacja po blogu na bloksie
    8. Boczna szpalta: co się tam wyświetla i jak to zmienić
    9. Zakładki, jak dodawać, jak układać w kolejności i czy można dodać obrazki
    10. Dodawanie dodatków, czyli jak trafić na pole nad kod HTML
    11. Dodawanie elementów pod wąską szpaltą
    12. Edycja ustawień wyglądu (FAQ)
    13. Zmiany w wyglądzie bloga, co i gdzie w edycji klikamy aby trafić do miejsc w których możemy wprowadzić zmiany
    14. Wprowadzanie zmian w szablonie, czyli jak trafić do arkusza stylów (css)
    15. Favicon - jak dodać ikonę własnego bloga

    

    Szczegóły wpisu

    Komentarze:

    (2) Pokaż komentarze do wpisu „Ilustrowany przewodnik po bloksie”

    Tagi:

    • Ilustrowany przewodnik po bloksie

    Autor(ka):

    kate_mac

    Czas publikacji:

    poniedziałek, 05 grudnia 2011 11:59

    Opcje

    • Przejdź do wpisu „Ilustrowany przewodnik po bloksie”
    • Dodaj komentarz do wpisu „Ilustrowany przewodnik po bloksie” i/lub któregoś z (2) komentarzy

• wtorek, 29 listopada 2011

  • 06 Klasyczny, oliwkowy

    Najbardziej klasyczny z klasycznych. Wyblakła oliwkowa zieleń wygląda bardzo naturalnie i antycznie. W wielu miejscach w szablonie użyłam wersalików. To oczywiście nie pierwszy raz ale chyba po raz pierwszy w tak wielu miejscach. Podobnie jest z ilością światła między literami. Poszerzyłam odstępy znacznie co chyba najbardziej podkreśla antyczny charakter. W takim połączeniu traci się nieco na czytelności więc nie polecałabym w przypadku żadnych dłuższych tekstów (długi opis to ryzykowna rzecz). Krótkie frazy pisane wersalikami mogą zyskać nawet na rozświetleniu. To taki starszy sposób podkreślania istotności (zamiast kursywy, pogrubienia czy podkreślenia).

    ---

    

    06 szablon klasyczny, oliwkowy,
    na nowym kodzie, dla blogów na blox.pl. -600px- 

    ---

    Stosunkowo szeroki szablon, zmieszczą się w nim ilustracje szerokości 600px i będą miały rameczkę. W szablonie można w łatwy sposób umieścić poziome górne menu z dowolną zawartością. Miejsce jest przygotowane tak aby szablon wyglądał dobrze zarówno z menu jak i bez niego.

    Szablon ma bliźniacze projekty: brązowy i oliwkowy. Korzystając z dokładnych instrukcji dla subtelnego można bez problemu zmienić położenie wąskiej szpalty (lewostronny) albo można też skorzystać z gotowca umieszczonego w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Najłatwiej ze wszystkiego wymienić tło, można na własne ale i ja przygotowałam alternatywy.

    dowiedz się więcej »

    Szczegóły wpisu

    Komentarze:

    (2) Pokaż komentarze do wpisu „06 Klasyczny, oliwkowy”

    Tagi:

    • -600px-
    • Georgia
    • klasyczny
    • opcja zmiana stronności
    • Trebuchet MS
    • typ wertyklany
    • zielony

    Kategoria:

    • moje szablony

    Autor(ka):

    kate_mac

    Czas publikacji:

    wtorek, 29 listopada 2011 15:30

    Opcje

    • Przejdź do wpisu „06 Klasyczny, oliwkowy”
    • Dodaj komentarz do wpisu „06 Klasyczny, oliwkowy” i/lub któregoś z (2) komentarzy

• wtorek, 22 listopada 2011

  • 05 Klasyczny, granatowy

    Postanowiłam zmienić kolor klasycznego na bardziej atramentowy ale wyszedł indygo. I dobrze bo taki modny kolor fajnie pasuje do bardzo tradycyjnego wzoru tego szablonu. Pisałam poprzednio, że powodem jest klasyczny. To jak najbardziej prawda. Taki klasyczny szablon jest chyba na każdej platformie blogowej, widziałam chyba kilka na bloggerze i wordpress.com, stary bloksowy kod ma szablon klasyczny a dla kodu new_age nowego klasyka popełniłam ja czerpiąc podstawy z każdego dostępnego mi źródła (w tym wspomniane wyżej szablony klasyczne z różnych platform).

    ---

    

    05 szablon klasyczny, granatowy,
    na nowym kodzie, dla blogów na blox.pl. -600px- 

    ---

    Stosunkowo szeroki szablon, zmieszczą się w nim ilustracje szerokości 600px i będą miały rameczkę. W szablonie można w łatwy sposób umieścić poziome górne menu z dowolną zawartością. Miejsce jest przygotowane tak aby szablon wyglądał dobrze zarówno z menu jak i bez niego.

    Szablon ma bliźniacze projekty: brązowy i oliwkowy. Korzystając z dokładnych instrukcji dla subtelnego można bez problemu zmienić położenie wąskiej szpalty (lewostronny) albo można też skorzystać z gotowca umieszczonego w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Można też sobie wymienić tło.

    dowiedz się więcej »

    Szczegóły wpisu

    Komentarze:

    (2) Pokaż komentarze do wpisu „05 Klasyczny, granatowy”

    Tagi:

    • -600px-
    • Georgia
    • klasyczny
    • niebieski
    • opcja zmiana stronności
    • Trebuchet MS
    • typ wertyklany

    Kategoria:

    • moje szablony

    Autor(ka):

    kate_mac

    Czas publikacji:

    wtorek, 22 listopada 2011 11:16

    Opcje

    • Przejdź do wpisu „05 Klasyczny, granatowy”
    • Dodaj komentarz do wpisu „05 Klasyczny, granatowy” i/lub któregoś z (2) komentarzy

• wtorek, 15 listopada 2011

  • 04 Klasyczny, brązowo-bordowy

    Szablon na nowym kodzie ale o realnie staroświeckim wyglądzie. Celowałam po części w antyk a po części w jego pochodne w postaci stylu klasycznego. Efekt jest nawet bardziej różnorodny gdy weźmie się pod uwagę od czego pochodzą kroje albo z czym kojarzą się kolory i wzory. Podstawowym powodem dla którego zrobiłam ten szablon jest bloksowy szablon o nazwie klasyczny (na starym kodzie). Na prywatnym blogu wybrałam go jako mój pierwszy szablon bo miał najbardziej papierowy wygląd chociaż mówiąc szczerze monotonność i jaskrawość bordowego bardzo mnie w nim drażniła. Dlatego mój klasyczny jest odrobinę bardziej brązowy.

    ---

    

    Szablon 04 klasyczny, brązowo-bordowy,
    na nowym kodzie, dla blogów na blox.pl. -600px- 

    ---

    Stosunkowo szeroki szablon zmieści zdjęcia szerokości nawet 600px i to z delikatną rameczką. W szablonie można w łatwy sposób umieścić poziome górne menu z dowolną zawartością. Miejsce jest przygotowane tak aby szablon wyglądał dobrze zarówno z menu jak i bez niego.

    Szablon ma bliźniacze projekty: granatowy i oliwkowy. Bez problemu można mu zmienić położenie wąskiej szpalty (lewostronny) korzystając z dokładnych instrukcji dla subtelnego albo skorzystać z gotowca w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Są też alternatywne wersje tła do wymiany.

    dowiedz się więcej »

    Szczegóły wpisu

    Komentarze:

    (4) Pokaż komentarze do wpisu „04 Klasyczny, brązowo-bordowy”

    Tagi:

    • -600px-
    • brązowy
    • Georgia
    • klasyczny
    • opcja zmiana stronności
    • Trebuchet MS
    • typ wertyklany

    Kategoria:

    • moje szablony

    Autor(ka):

    kate_mac

    Czas publikacji:

    wtorek, 15 listopada 2011 22:01

    Opcje

    • Przejdź do wpisu „04 Klasyczny, brązowo-bordowy”
    • Dodaj komentarz do wpisu „04 Klasyczny, brązowo-bordowy” i/lub któregoś z (4) komentarzy

• 1. strona wpisów
• 2. strona wpisów
• 3. strona wpisów
• 4. strona wpisów
• Następne wpisy »