Lekcja 9: "Wewnątrz tabel": rozmiar obrazuTo szybka lekcja lub właściwie może tylko szybka wskazówka.
Lekcja 9 nie jest związana z sygnaturami, ale jest związane z BBCode i dobrze wiedzieć o tym kiedy myślisz o ulepszaniu designu wątków etc.
Jeżeli chcesz stworzyć tabelę i wstawić obraz do środka komórki (rzędu) tabeli - rozmiar obrazu zostanie wizualnie zmniejszony. Co ważne nawet dodanie atrybutu szerokości do twojego obrazu nie rozwiąże tego problemu.
Przykład:![](https://ip.bitcointalk.org/?u=https%3A%2F%2Fi.imgur.com%2FOaJobp5.png&t=663&c=11diJ1iWmPmP8Q)
| 150px x 150px Bitcoin logo Ale jego rozmiar to nie 150x150...
|
![](https://ip.bitcointalk.org/?u=https%3A%2F%2Fi.imgur.com%2FOaJobp5.png&t=663&c=11diJ1iWmPmP8Q)
| 150px x 150px Bitcoin logo Dodany atrybut szerokości: Width=150. Ale wciąż to nie jest 150x150..
|
Kod przykładu:[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Ale jego rozmiar to nie 150x150...
[/td]
[/tr]
[/table][/quote]
[quote][table]
[tr]
[td]
[img width=150]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Dodany atrybut szerokości: Width=150. Ale wciąż to nie jest 150x150..
[/td]
[/tr]
[/table][/quote]
Jak rozwiązać ten problem?W tej samej komórce (rzędzie) gdzie jest obraz musimy wpisać dowolną linię tekstu, która będzie dłuższa niż szerokość obrazu.
I ustawić kolor tekstu na przezroczysty. ( color=transparent ).
![](https://ip.bitcointalk.org/?u=https%3A%2F%2Fi.imgur.com%2FOaJobp5.png&t=663&c=11diJ1iWmPmP8Q) fffffffffffffffffffffffffffffff
| 150px x 150px Bitcoin logo Teraz bez wprowadzania jakiegokolwiek atrybutu szerokości obraz jest wyświetlany jako 150px x 150px
|
Kod:[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[color=transparent]fffffffffffffffffffffffffffffff[/color]
[/td]
[td]
150px x 150px Bitcoin logo
Teraz bez wprowadzania jakiegokolwiek atrybutu szerokości obraz jest wyświetlany jako 150px x 150px
[/td]
[/tr]
[/table][/quote]
Lekcja 10: "Zaawansowane techniki rysunku BBCode poziom I"Obiecałem powiedzieć więcej na temat rysowania czcionką 'Monospace'.
'Monospace' wydaje się być jedyną czcionką, która zachowuje identyczną szerokość znaku, przerwę pomiędzy dwoma znakami - więc po prostu będzie wyglądać tak samo pod różnymi systemami operacyjnymi.
(Choć na pewno nie wszystkimi).
Więc nawet użytkownicy Maka ze starszymi wersjami Safari zobaczą 'taki sam' rysunek jak powiedzmy użytkownicy ostatniej wersji Chrome. Chociaż akurat ostatnia wersja Chrome trochę nabałaganiła w naszych projektach
W porządku gdzie jest haczyk?Jedyny problem jest taki, że rysunki w 'Monospace' nie wyglądają tak jednolicie (solidnie) jak te same rysunki tworzone czcionką dafaultową.
Ale czcionka ta ma kilka bardzo ważnych zalet.Nie tylko to, że będzie wyglądała "tak samo" pod różnymi przeglądarkami. Ale także!
Możesz rysować swoje projekty znakami w rozmiarach 1px, 1pt, 2px, 2pt i wciąż będzie wyglądał tak samo pod różnymi przeglądarkami.Ale pamiętaj! Ten sam obraz stworzony znakami czcionki 'Monospace' o różnym rozmiarze będzie miał różne nasycenie kolorów uzależnione od rozmioru cznionki.W aktualnych wersjach przeglądarek Chrome/Mozilla/Safari sugeruję wykorzystanie czcionki Monospace o rozmiarze 2px tworząc obrazy w BBCode.
Przykład:░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██
Size=2pt | ░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██
Size=2px | ░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██
Size=1pt | ░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██
Size=1px |
Code:[table]
[tr]
[td]
[font=Monospace][size=2pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=2px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2px[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1px[/b][/size][/center]
[/td]
[/tr]
[/table]
Możesz to przetestować samodzielnie - wystarczy otworzyć tę stronę pod różnymi przeglądarkami żeby porównać wyniki.
Oczywiście nie będą nadal kompatybilne z wszystkimi przeglądarkami pod każdym systemem operacyjnymi, ale i tak wygrywa pod kątem kompatybilności z czcionkami defaultowymi.
Lekcja 11: "Zaawansowane techniki ograniczania ilości znaków część I" THE BIGGEST NIGHTMARE
SLEEPLESS NIGHTS & HOURS SPENT ON SQUEEZING THE CODE...
4K LIMIT
But don't give up! There are several ways to face the pure evil ^_^ of 4k limit.
(it's not so evil at all ![Wink](https://bitcointalk.org/Smileys/default/wink.gif)
Limit znaków nie jest tak zauważalny w projektach sygnatur dla Memberów i Full Memberów, gdzie 4tysiące znaków jest ilością zdecydowanie wystarczającą.
Koszmar zaczyna się podczas projetkowania sygnatur dla Senior, Hero and Legendary members
![Smiley](https://bitcointalk.org/Smileys/default/smiley.gif)
No.... to może nie prawdziwy koszmar - to raczej wyzwanie
![Cool](https://bitcointalk.org/Smileys/default/cool.gif)
Podzielę się z wami kilkoma technikami oszczędzania ilości znaków, których używam podczas walki z demonami limitu 4 tysięcy
![Grin](https://bitcointalk.org/Smileys/default/grin.gif)
Postaram się stworzyć rodzaj listy łatwej do przeczytania (mam nadzieję).
Wskazówka 1: Nie musisz zamykać każdego taga w kolumnach tabeli.Nie musisz zamykać wszystkich tagów. Możesz to zastąpić kolejnym tagiem.
Na przykład zamiast zamykać taga koloru możesz zmienić kolor na inny otwierając kolejny tag.
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][color=#7b2d2d]█[/color][color=#382877]█[/color][color=#3a6921]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]
Wskazówka 2: Nie musisz zamykać żadnych tagów przed zamknięciem tagu kolumny w tabeli.Nie musisz zamykać tagów czcionki, rozmiaru etc (żadnego) jeżeli zamykasz tag kolumny w tabeli.
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]
Wskazówka 3: Ustaw główny kolor jako pierwszy...Kiedy rysujesz coś z w BBCode - logo etc. - postaraj się określić kolor, który będzie się pojawiał najczęściej i umieść jego tag na początaku.
Kiedy kolejny element wymaga innego koloru, zmień kolor i zamknij tak nowego koloru na końcu elelmentu.
Następny znak pozostanie pod mocą pierwszego koloru
Łatwiej pokazać to na przykładzie ^_^:
[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[font=Monospace][size=2px]
[color=#3a75bf]█████████████████████████████████████
[color=#3a75bf]████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
Wskazówka 4: Wstaw tagi czcionki i stylu na początku...Kiedy ustawiasz styl czcionki i chcesz wykorzystać go do końca kolumny w tabeli wstaw tag stylu na początku.
Ale nie przed tagiem adresu URL i wyrównania (center/left/right) tags. Wiem, że brzmi to trochę skomplikowanie....
Więc zobaczmy to na przykładzie
![Grin](https://bitcointalk.org/Smileys/default/grin.gif)
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]Przykładowy tekst.[/b]
I kolejna linia tekstu.
[/td]
[/tr]
[/table][/center]
Co się stało: Zamknąłem tag 'Bold' i odruchowo z zamknięciem tagu 'bold' inne tagi w zasięgu 'bold' zostały zamknięte.
Ale jeżeli przesuniemy je na poza zakres tagu 'bold' zachowają swoje właściwości
![Wink](https://bitcointalk.org/Smileys/default/wink.gif)
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][font=Arial][size=25px][b][color=#000]Przykładowy teks.[/b]
I kolejna linia tekstu.
[/td]
[/tr]
[/table][/center]
Co się stało: Taka sama liczba znaków jak w przykładzie 1 - inne rezultaty.
Zbyt wiele pisania by wspomnieć o wszystkich możliwych sytuacjach w których możesz to wykorzystać aby zaoszczędzić trochę znaków.
Skupmy się na najważniejszych rzeczach do zapamiętania:Zamykając dowolny tag wewnątrz kolumny, zamykasz wszystkie tagi w zasięgu zamykanego tagu.
[center][table]
[tr]
[td]
[center][font=Arial][size=15px][b][url=https://bitcointalk.org]Trochę bardziej zaawansowany przykład[/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]Druga linia - I kolejny link ale ta sama czcionka/rozmiar bez pogrubienia.
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]Trochę bardziej zaawansowany przykład[/url][/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80][font=Arial][size=15px]Druga linia - I kolejny link ale ta sama czcionka/rozmiar bez pogrubienia.
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]Trochę bardziej [color=#000]ZAAWANSOWANY[/color] przykład[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Druga linia - [color=#12d]I [/color] kalejny link ale ta sama czcionka + pogrubienie
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]Trochę bardziej [color=#000]ZAAWANSOWANY[/color] przykład[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Druga linia - [color=#12d]I [/color] kalejny link ale ta sama czcionka + pogrubienie
[/td]
[/tr]
[/table][/center]
Trudno jest jasno określić jak wykorzystywać zasięg zamykanych tagów dla naszych korzyści - wszystko zależy od projektu i potrzeb - w różnych sytuacjach możemy wykorzystywać to na wiele sposobów.
Wskazówka 5: Tag wyrównania zamyka inne tagi...[table]
[tr]
[td]
[color=blue][font=Verdana][size=16px]Test text example
[center]Test text example bottom
[/td]
[/tr]
[/table]
Wskazówka 6: Zamienianie przezroczystych elementów pustą przestrzenią...Wspomniałem o tym kilka miesięcy temu w
poście.
[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████ █████
[/td]
[/tr]
[/table][/center]
[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████[color=transparent]░░░░░░░░[/color]█████
[/td]
[/tr]
[/table][/center]
To jeszcze nie wszystkie techniki oszczędzania znaków ale idę spać. Wkrótce powrócę z kolejną porcją lekcji
![Smiley](https://bitcointalk.org/Smileys/default/smiley.gif)