Чорно-білий шаблон

Шаблон

У цього шаблона календар знаходиться на рівні шапки блога, рсс та категорії також винесено нагору, як і в попередньому шаблоні. Але чорно-біла гама з невеликими кольоровими варіаціями «важить» менше, аніж в попередньому шаблоні.

Якщо вам подобається цей шаблон, клікніть на малюнку, та знайдіть кнопочку «Копіювати CSS» в нижній частині блога, що відкриється.

Нестандартні шрифти ІІ

Спосіб, за допомогою якого я використовувала нестандартні шрифти у блозі, базується на можливостях браузера (в данному випадку Експлорера) відмальовування векторної графіки. Ця можливість у браузерів існує давно. От тільки проблема в тому, що Файрфокс має підтримку об'єктів canvas і SVG, a IE підтримує VML, коди, які я знайшла на жаль, гарно працюють тільки з VML, а я ще не такий гарний спеціаліст, щоб там щось підправити — як то кажуть, ще навчатися і навчатися 🙂

Для тих, хто не дуже в темі, що таке той вектор, у який потрібно конвертувати шрифти truetype, поясню. Існує два види комп'ютерної графіки:

1. Растрова. З растровою графікою ми зустрічаємся кожного разу, коли вмикаємо комп'ютер. У растровому форматі виконано будь-які зображення — всі фотографії, малюнки і т. п. мають растровий формат, тобто — простий набір кольорових пікселів. Пікселі — то такі квадратики, які можна побачити, якщо сильно збільшити зображення. Збільшіть будь-який малюнок у 7-8 разів, і нічого, крім кольорових квадратиків, з яких цей малюнок складено, ви не побачите. Растрове зображення може важити досить багато — 5Мб для гарної фотографії це ще не межа.

2. Векторна. Векторну графіку ми спостерігаємо зазвичай у флеш-роликах, які можуть бути досить довгими, але у той же самий час у мегабайтах (кілобайтах) важать не так вже і багато. Чому? Бо всі малюнки у флеші — векторні. Тобто, це вже не пікселі, а набір математичних координат, що обробляються флеш-програвачем. Для векторних зображень немає значення, наскільки їх збільшувати — в 10 разів, чи в 100 — якість зображення залишиться тою ж самою, бо при збільшенні программа просто математично вирахує нові розміри зображення. Звичайно, зберігати у векторі фотографії неможливо. А от шрифти — будь-ласка. Чим ми зараз і займемося 🙂

Все, що нам потрібно, так це обрати кирілічний шрифт у форматі truetype, зайти на цей сайт, завантажити на нього свій шрифт і тицьнути на кнопку Convert Font. Таким чином замість шрифта truetype ми отримаємо файлик javascript з математичним описом шрифта. Завантажте його до файлів блога. Туди ж треба завантажити ще один файл — інтерпретатор, який дозволить браузеру відображати шрифт належним чином:

Беремо його тут

До речі, я не тестувала попередніх версій цього скрипта. Якщо буде час і бажання, можете спробувати їх знайти. Можливо, вони будуть підтримувати хоч яку кроссбраузерність.

Тепер черга за кодуванням. Скопіюйте код, наданий нижче, до HTML-поля блога. Увага! Шляхи до ваших файлів шрифта та інтерпретатора треба прописувати повністю:

Прописавши коди в HTML-полі ми маємо вказати на шрифт при редагуванні замітки. А для цього потрібно знати його справжню назву, інакше нічого не вийде. Справжня назва шрифта — це зовсім не обов'язково назва файла. Потрібна назва знаходиться наприкінці конвертованого файла з шрифтом. Відкрийте цей файл у текстовому редакторі, прокрутіть до самого низу і знайдіть відомості про нього. Скопіюйте назву куди-небудь, або запишіть (але краще скопіюйте) 😉

Тепер в замітці текст, який потрібно виділити нестандартним шрифтом, вставляємо у такі теги:

В графічному редакторі для вставки тегів потрібно клацнути на кнопочці HTML редактора.

Желаю успехов!

Нестандартні шрифти

За проханнями блогерів викладаю позачерговий урок, присвячений нестандартним шрифтам. Напочатку давайте нагадаємо собі про властивості шрифтів на інтернет-сторінках:

Урок 8


Найважливішим питанням, яке треба пригадати, є те, що ваші унікальні шрифти можуть бути не встановлені у інших інтернет-користувачів і тому не будуть у них відображатися. Цю проблему можна зі складнощами, але обійти
:

Что вы сейчас читаете? Как
выглядит текст? Я уверена, что
у большинства блоггеров этого
шрифта нет. Но если у вас
установлен Интернет
Эксплорер версии 6 и выше,
текст должен отображаться
корректно.

Отож, якщо у вас — Есплорер, ви мали помітити дві речі:

1. Попередній текст набрано нестандартним шрифтом.
2. Я писала російською.

Якщо у вас будь-який інший браузер, ви також мали помітити дві речі:

1. Текст було набрано просто великим шрифтом, тобто, іншими браузерами така опція не підтримується (хоча кажуть, що Файрфокс має читати, але я не впевнена; Опера не читає точно).
2. Я писала російською 🙂
Виникає питання: чому? А тому, що більшість фентезійних шрифтів не підтримують українських символів. А при запропонованій обробці документа варто набрати лише один незнайомий символ, і щезне весь текст.
Але! При цьому способі відображення рідкісного шрифта на ваш комп’ютер нічого не завантажується. Тобто, вам зовсім не потрібно мати цей шрифт у себе, щоб бачити його у мене. Не потрібно нічого встановлювати, щоб читати інтернет-сторінку, а це — великий плюс, хоча добитися такого ефекта набагато складніше, аніж запропонувати користувачеві завантажити потрібний шрифт до своєї операційної системи. Тому сьогодні я торкнуся простішого і багатьом знайомого метода завантаження шрифтів до комп’ютера, а складний спосіб, який полягає в конвертуванні потрібного шрифта у цифровий вигляд, що буде оброблятися браузером математично, залишу на завтра, бо інакше урок може стати безкінечним. Якщо ви вмієте встановлювати нові шрифти до операційної системи, далі можете не читати 🙂
1. Знайдіть гарні шрифти, яких у вас ще нема, в інтернеті. Наприклад, тут: http://rufont.ru/
2. Скопіюйте шрифти до папки Fonts вашої операційної системи.
3. Відкрийте браузер, зайдіть до меню Tools > Internet Options > Fonts і оберіть шрифт, яким будуть відображатися веб-сторінки. Ви можете поділитися улюбленими шрифтами з іншими блогерами, прописати його в CSS, як я пояснювала у попередніх уроках (посилання напочатку замітки), але це не гарантує, що більшість ваших відвідувачів вирішить марнувати свій час на підборку потрібного шрифта для того, щоб краще зрозуміти атмосферність вашого блога.
Тому рекомендую зараз погратися зі своїм блогом та підібрати найкращий шрифт для нього, а завтра ми будемо його встановлювати 🙂

Починаємо нову серію уроків :)

Сьогодні починаю нову серію уроків, які мають покращити ваші (а разом з тим і мої) навички у веб-дизайнуванні. Завдяки порадам блогера username я тепер маю свій сайт: ABCweb.ho.ua

Як можна побачити, поки що сайт пустий і містить у собі тільки посилання на мої власні блоги. Але! Крім головної сторінки він також вже має каскадну таблицю стилів (тобто CSS), яка наразі відповідає за колір фону сайта. А більше для експериментів нам поки що нічого і не потрібно 🙂

Якщо ви читаєте уроки з цієї категорії, це означає, що інтерес до CSS та HTML у вас не обмежується кодуванням у блозі. Як ми з вами будемо працювати? До кожного нового урока я буду змінювати щось на ресурсі ABCweb.ho.ua, докладно пояснюючи вам, як це робила. При цьому ви можете:

а) відтворювати те саме за допомогою тестового редактора та браузера, створивши окрему папку під уроки на комп’ютері;

б) також зареєструвати власний сайт (це буде корисно, особливо якщо у вас є потреби в особистому сайті).

Після кожного урока я буду давати завдання, про виконання яких можна відписуватися в коментарях, або давати посилання на створений сайт, де можна буде побачити зміни після чергового урока. Але це — за бажанням 🙂

Тепер — декілька слів про свій щойностворений сайт. ABCweb.ho.ua — з назви випливає, що скоріше за все на ресурсі має розміщуватися якась інформація, що може допомогти новачку навчитися орієнтуватися в мережі Інтернет. Але насправді на цьому сайті буде всього декілька учбових сторінок, кожна з яких буде містити посилання на ці уроки. Можна навіть сказати, що ABCweb.ho.ua має стати плацдармом для створення дизайну іншому моєму проекту, про який я розповім пізніше.

Завдання:

Ті, хто буде експериментувати тільки на власному комп’ютері, без винесення сторінок в мережу, мають створити папку на жорсткому диску під назвою «my project» чи будь-якою іншою назвою. А також 2 таких файли в новоствореній папці: test.css i test.html

Ті ж, хто вирішить створити власний сайт, має подумати над такими питаннями:

Яка тематика буде у мого сайта?

Як його влучно назвати? (Тобто так, щоб було легко запам’ятати назву іншим користувачам, а також щоб вона підходила до тематики ресурса).

Світло-коричневий шаблон

Шаблон

У  цього шаблона календар знаходиться на рівні шапки блога, рсс та категорії також винесено нагору 🙂

Якщо вам подобається таке дизайнерське рішення, клікніть на малюнку, та знайдіть кнопочку "Копіювати CSS" в нижній частині блога, що відкриється.