szablony katemac

Na początek niewielkie wyjaśnienie związane z edytorem. Blox się rozwija i zmiany zachodzą w nim na bieżąco. Mino iż notka nie jest bardzo stara (w momencie ponownej edycji, w grudniu 2011 ma nieco ponad rok) to nawet w dziedzinie właściwości ilustracji zaszły pewne zmiany, częściowo na lepsze częściowo na gorsze.

Drobne zmiany w oknie edytora wyszły mu na lepsze. Określenia są nieco bardziej jasne i zrozumiałe.

Udostępniono nieco zmienioną wersję edytora nazwaną TinyMCE z nowymi zdjęciami, której zasadniczo nie polecam. Wszystko się jeszcze może zmienić ale jak kilka dni temu sprawdzałam to dodając zdjęcia do wpisu nie można było nawet alt (alternatywnego opisu obrazka) wpisać co nie tylko jest niedogodnością ale i chyba sporym błędem. Co do reszty opisywanych tu ustawień i właściwości ilustracji to nie dotyczą one edytora TinyMCE z nowymi zdjęciami bo on choć może i łatwiej czy szybciej dodaje zdjęcia do notek to jednak trudniej cokolwiek z tymi zdjęciami zrobić (choćby ustawić je względem tekstu).

Edycja obrazu: OGÓLNE

Ta część jest niezbędna. Uzupełnić musimy jedno pole, powinniśmy dwa a trzy są mile widziane.

Zaczynamy od URL obrazka czyli adresu internetowego naszej grafiki (img src). Jeżeli tyle co wstawiliśmy go do zasobów to to pole jest zapewne automatycznie wypełnione jeżeli nie to wpisać należy cały adres począwszy od http skończywszy na rozszerzeniu pliku (czyli gif, png, jpg...).

Następnie jest Opis obrazka (alt), który jest konieczny z co najmniej trzech względów:

• osoby niewidzące a korzystające z programów odczytujących im treść strony tylko dzięki opisowi obrazu mogą zapoznać się z jego treścią;
• drugi powód to przeglądarki tekstowe i wyłączone wyświetlanie obrazów czyli sytuacje gdzie z różnych względów użytkownicy widzą Twoją stronę pozbawioną elementów graficznych;
• ostatni powód to roboty wyszukiwarek; jasne biorą one pod uwagę kontekst czy słowa w adresie ale to alt powinien opisywać co jest na zdjęciu

Trzecie pole to Tytuł (title). To nie jest to samo co tekst alternatywny. Przykładowo w większości przeglądarek tytuł obrazu wyświetli się w chmurce po najechaniu kursorem na obraz.

Na tej karcie zostaje nam już tylko podgląd. Jeżeli właściwie uzupełniono pole na adres URL to w podglądzie widać będzie nasz plik.

Edycja obrazu: WYGLĄD

W części Prezentacja jak sama nazwa mówi mamy dostęp do edycji sposobu w jaki będzie wyświetlana nasza ilustracja. W zasadzie wszystko co nas tutaj interesuje to dwa pola: Rozmiary i Styl, pozostałe mają tylko pomagać wypełnić pole styl. Ale po kolei.

Wyrównanie w przypadku obrazu nie oznacza prostego do lewej-prawej-środka. W tym miejscu będziemy określać wzajemne położenie tekstu i obrazu. Jeżeli obraz wyświetla się jako jedyna rzecz w akapicie (enter-obraz-enter) pierwszych sześć możliwości w zasadzie go nie dotyczy. Dla lepszego wyobrażenia przygotowałam przykład, w którym większy z obrazków wyrównany jest na osiem różnych sposobów (mniejszy zostawiam bez opisu więc powinien zachowywać się zupełnie jak tekst). Zachęcam więc do zapoznania się z przykładową notką: Dodawanie obrazu - Prezentacja - Wyrównanie PRZYKŁAD.

1. Główna linia (vertical-align: baseline;)
• To jest wartość początkowa. Jeżeli w szablonie nie zostało to zmienione to w ten właśnie sposób wyrównywane są elementy, czyli zazwyczaj brak i główna linia będą dawały taki sam efekt.
• Linia bazowa obrazu wyrównana jest z linią bazową tekstu w paragrafie.
2. Górny (vertical-align: top;)
• Wyrównuje górę elementu (opisywanego obrazku) z górą najwyższego elementu w linii paragrafu.
• Jeżeli na moim przykładzie nie było by drugiej ilustracji, która jest wyższa od tekstu górą, do której wyrównywalibyśmy byłaby góra tekstu co wyglądałoby podobnie jak tekst górny.
3. Środkowy (vertical-align: middle;)
• Wyrównuje środek elementu (ilustracji) ze środkiem małych liter rodzica (czyli elementu w którym obrazek się znajduje).
• W związku z czym możemy mieć małą zmyłkę bo wydawałoby się, że rzecz dotyczyć powinna środka wysokości linii elementu czyli w przypadku linii z drugim obrazkiem powinna powinna być gdzie indziej i uwzględniać wielkość drugiego obrazu ale tak nie jest. Środkowy działa tak jakby był tekstem środkowym (text-middle), który nie istnieje.
4. Dolny (vertical-align: bottom;)
• Wyrównuje dół obrazu z dołem całkowitej linii czyli z dolną krawędzią najniższego elementu.
• Trudno zauważyć różnicę pomiędzy tym wyrównaniem a wyrównaniem tekst-dolny ale jest ono odwrotne do górnego więc mam nadzieję, że zasada jest jasna.
5. Tekst górny (vertical-align: text-top;)
• Wyrównuje górę ilustracji z górą tekstu w paragrafie.
• Tutaj najprościej zauważyć różnicę pomiędzy wyrównaniem do górnej krawędzi a wyrównaniem do górnej części tekstu. W linii paragrafu umieszczona jest druga, mniejsza ilustracja i ona wyznacza górną krawędź. My natomiast wyrównujemy do góry czcionki co sprawia, że drugi obrazek nieco wystaje.
6. Tekst dolny (vertical-align: text-bottom;
   • Wyrównuje dół ilustracji z dołem czcionki.
   • Różnica pomiędzy tym rozwiązaniem a wyrównaniem dolnym może nie być wyraźnie widoczna. Na moich przykładach jest to zaledwie 1px.
7. Lewy (float: left;)
   • To jest zupełnie inny typ wyrównania i nie ma żadnych analogii z powyższymi sześcioma.
   • Powstaje przy wykorzystaniu pływania elementu.
   • Left wysyła obrazek w kierunku lewej krawędzi paragrafu a pozostałe elementy w akapicie oblewają jego prawą i dolną krawędź.
8. Prawy (float: right;)
   • Obrazek płynie ku prawej krawędzi akapitu i od swej lewej i dolnej strony oblewany jest tekstem i innymi elementami.

Jak łatwo zauważyć wybierając określony typ wyrównania wypełniamy też pole styl. Pojawia się tam css-owa wersja tego co zamierzamy zrobić z naszą ilustracją.

Następne okienko to Rozmiary. Jako jedyne nie ma tutaj nic wspólnego ze stylami (choć mogłoby i może w przyszłości będzie choć nie byłabym tego pewna). Przypisane są bezpośrednio ilustracji jako width i height. W ten sposób możemy dostosować wielkość (w pikselach) naszego obrazu nie ingerując w jego rzeczywisty rozmiar. Obraz dalej będzie miał swoje oryginalne parametry, zostanie jedynie przeskalowany (ściśnięty) do wymiarów podanych w oknie. Pierwsza jest szerokość (width) a następnie wysokość (height). To stosunkowo łatwy sposób zmniejszania ilustracji. Nie zmienia to jej ciężkości (czyli rozmiaru w MB) ale umożliwia szybką i łatwo-dostępną zmianę. Konieczne jest aby okienko Zachowaj proporcje było zaznaczone. W takim wypadku uzupełniając jedno pole drugie zostanie automatycznie dostosowane tak aby obrazek zachował proporcje i z kwadratu nie stał się prostokątem.

Pionowy i poziomy odstęp to margines czyli odstęp naszej ilustracji od otaczających ją elementów (nie mylić z dopełnieniem czyli padding, czyli przestrzenią pomiędzy obrazem a przykładowo jego ramką). Odstęp jest szczególnie mile widziany gdy stosujemy wyrównanie Lewe. Tekst opływa wtedy obraz z prawej strony i zaczyna się w momencie gdy kończy się obraz. W przypadku vertical-align brane są także pod uwagę spacje tutaj tak nie ma. Dlatego też przydaje się zastosowanie margin-right.

Zostało nam jeszcze Obramowanie. Również jest uzyskiwane dzięki stylom (zanim bloksowy TinyMCE przeszedł uaktualnienie ramka była przypisana bezpośrednio jako border="wielkość" co było słabszym i już nie polecanym rozwiązaniem). Wpisujemy wielkość obramowania a w stylach pojawia się odpowiedni fragment kodu. Ramka to nie tylko wielkość ale także rodzaj i kolor. Wpisany jest solid black czyli pojedyncza, prosta, ciągła czarna linia. Dysponując stylami możemy wprowadzić także tutaj zmiany wybierając własny styl linii czy kolor. Jak możemy opisywać ramki opisane jest w notce Ramka jako dodatek do tła, część 2

I na koniec Styl. Jeżeli coś w tej zakładce zmieniano to w stylu są już odpowiednie dane. Można jednak dodać inne, które także będą odpowiednie dla ilustracji jak przykładowo padding czy background. Polecam zerknąć do zakładek na tym blogu i odszukać dział z linkami do notek o CSS.

Edycja obrazu: ZAAWANSOWANE

Tutaj możemy określić dodatkowe atrybuty obrazu. To rzeczywiście jest już zaawansowana zabawa choć niekoniecznie skomplikowana, po postu niepotrzebna na co dzień.

Zaznaczając pole Alternatywny obrazek możemy pobawić się w całkiem zaawansowany sposób z naszą ilustracją. Możemy dobrać jej towarzysza. Alternatywna grafika wyświetli się po najechaniu kursorem na obraz jeżeli w polu for mouse over podamy jej adres. Drugie pole (for mouse out) służy do wyboru ilustracji która wyświetli się gdy usuniemy kursor znad ilustracji. Jeżeli go nie wypełnimy pozostanie tam obrazek alternatywny. Należy pamiętać, że ze względu na określone wcześniej atrybuty wielkości wszystkie obrazki powinny być tej samej wielkości (główny, alternatywny i następny).

Id to identyfikator, czyli unikalna jakby-nazwa. Identyfikator na stronie może pojawić się tylko raz a więc jeżeli zdecydujemy się przypisać identyfikator to za każdym razem powinien być inny. Po co nam to? Z dwóch powodów:

• Jeżeli obrazek ma identyfikator to można podać link do konkretnej ilustracji ale umieszczonej w kontekście strony. Można podać link do każdej ilustracji wystarczy podać w polu linku jej adres. Identyfikator pozwala na coś nieco innego, pozwala na wskazanie elementu na stronie, przenosi do konkretnego miejsca na stronie.
• Ten link przenosi do kategorii na stronie głównej.
• Ten link pozostawi cię na tej stronie ale przesunie do części wstępnej, do ilustracji z całym oknem edycji.
• Dzięki identyfikatorowi można również w szablonie opisać wygląd ego unikalnego elementu, któremu jest on przypisany, w tym przypadku ilustracji. Do tego celu polecam raczej klasę (pozwala na przypisanie tej samej lasy innym ilustracjom) ale identyfikator też w tym celu można wykorzystać.

Kierunek języka ławo się domyślić co znaczy ale zastanawia mnie dlaczego akurat przy obrazku mamy łatwy dostęp do tego atrybutu.

Podobnie kod języka. Rozumiem, że może się zdarzyć sytuacja w której będzie to nam przydatne ale dlaczego akurat łatwy dostęp przy obrazku?

Mapa obrazu to coś jeszcze bardziej niezwykłego niż obraz alternatywny ale równocześnie znacznie trudniejszego (przykładowa mapa graficzna: genealogia.mrog.org - najedz kursorem na jedną z twarzy i zobacz co się dzieje). W okienku mapa obrazu podajemy tylko ścieżkę dostępu do mapy. Samą mapę sporządzamy już we własnym zakresie i wymaga ona nieco pracy. Dodatkowo taką mapę moglibyśmy zrobić nie poprzez html a dzięki css więc nie wiem czy to właściwe rozwiązanie.

Długi opis linku to znów alternatywa obrazu znajdująca się w osobnym pliku. Traktowana jest jako uzupełnienie alt. Podaje się ją w osobnym pliku może więc być dużo bardziej szczegółowa.

I to wszystko. Opis jest bardzo dokładny bo podobnie jak z edytorem, prosty jest dla zaawansowanych a zaawansowany dla początkujących. Mój obszerny opis jest dla początkujących choć niekoniecznie bardzo zielonych. Jeżeli mimo wszystko opis jest niejasny to zapytaj się w komentarzu, pokażę paluszkiem i wyjaśnię innymi słowami, może dzięki temu będzie jaśniej.

Powiązane notki:

• Otaczanie ilustracji w notce tekstem (FAQ)
• Jak prosto i wygodnie dzielić notkę na wstęp i treść
• Dodawanie ilustracji i filmów do notki
• CSS: background (moduł tła i ramek cz. 1)
• CSS: border (moduł tła i ramek cz. 2)
• sposoby dodawania stylu na stronie: style lokalne