Уроки по дизайну ЖЖ. Часть V.

[yoksel]

Сегодня я расскажу что ещё интересного можно вставлять в блоки HEAD. Например:
Плавный переход между страницами

Как правильно заметил товарисч degro, он задаётся именно в HEAD. Эффект к сожалению, виден только в IE.
Как это делается:

Навигация по урокам
в нужный вам блок HEAD вставляется следующий код:

Значения:
Page-Enter — появление страницы
Page-Exit — уход со страницы
Duration — скорость появления следующей страницы, чем больше число — тем медленней появляется
Transition — выбраный эффект
Эффекты:
0 — сворачивается в квадрат
1 — разворачивается из квадрата
2 — в круг
3 — из круга
4 — вверх
5 — вниз
6 — вправо
7 — влево
8 — вертикальные жалюзи
9 — горизонтальные жалюзи
10 — горизонтальные кирпичи
11 — вертикальные кирпичи
12 — "снег в телевизоре"
13 — вертикальное сворачивание к центру
14 — вертикальное разворачивание из центра
15 — горизонтальное сворачивание к центру
16 — горизонтальное разворачивание из центра
17 — зубчатая маска в нижний левый угол
18 — в верхний левый угол
19 — в нижний правый угол
20 — в верхний правый угол
21 — случайные горизонтальные линии
22 — случайные вертикальные линии
23 — случайный эффект
Эффект растворения:

Здесь задается только Duration — скорость появления следующей страницы, чем больше — тем медленней

Переход между страницами выглядит настолько эффектно, что я не выдержала и прикрутила его к сообществу, хотя в ИЕ захожу крайне редко : )

Попутно нашла различные фильтры типа свечения, тени, инверсии и пр. здесь. К сожалению, они работают только в IE, но все эти эффекты можно без труда повторить с помощью картинок : )

Favicon

Что это и с чем его едят? Выглядит это вот так:


значки ЖЖ и Яндекса
Этот значок будет представлять ваш журнал рядом с названием страницы в браузере и в закладках, в ИЕ только в закладках.

FAQ по favicon

Как он делается?

Вариант I.

1. Рисуете 2 картинки: 32х32 и 16х16 пикселей, сохраняете в PNG.
2. Скачиваете конвертилку.
   Пояснения на английском.
   Если по русски:
   в меню Пуск выбираете Выполнить, в появившемся окошке набираете cmd и нажимаете ОК. Появится чёрное окно со строкой:
   
   C:\>_
   
   Для того чтобы было удобно пользоваться программой, нужно попасть в папку где она лежит. Если нужно сменить диск, набираете букву обозначающую диск с двоеточием, то есть, например:
   
   C:\>d:
   
   нажимаете Enter и попадаете на нужный диск. Проще всего конечно сохранить программу в корне диска, иначе вам придётся прописывать к ней весь путь : ) Если же всё-таки прога не в корне, папку можно указать так: cd \путь к папке на этом же диске, то есть:
   
   C:\> cd \My work\test
   
   и нажать Enter
   
   Итак, вы находитесь там же где программа. Теперь надо ввести следующую строку:
   png2ico favicon.ico logo16x16.png logo32x32.png. Что примерно получтся:
   
   C:\My work\test png2ico favicon.ico logo16x16.png logo32x32.png
   
   Обратите внимание на logo16x16.png и logo32x32.png. Это ваши заготовленные файлы 16х16 и 32х32 пикселя соответственно, формат PNG. Они должны находиться там же где программа!
   
   Файлы можно называть по своему, главное чтобы латиницей и без заглавных букв. По нажатию Enter программа генерит favicon.ico, сохраняет его в папку в которой вы находитесь и закрывается.
   

Этот способ пока самый корректный, иконки работают во всех браузерах.
Вариант II.
Вариант предложен denisdenisoff. Способ прост до безобразия и очень удобен : )
Скачивается отсюда http://dens.redbox.by/temp/icoformat.zip плагин для фотошопа и распаковывается в в фотошоповскую папку /Plugins/File Formats/. Теперь вы можете получить ico-файл просто через Save As.., выбрав в форматах для сохранения ico : )
Проверяла 16х16 и 32х32 px, первый вариант не работает в ИЕ, второй работает везде

Вариант III.

Скачать программу для создания и редактирования иконок и курсоров (то есть файлов в форматах .ico, .cur, .ani) и нарисовать прямо в ней.

Я одну такую скачала, но у неё оказался ужасно неудобный интерфейс (ICAconverter, весит всего 200kb). Наверное есть удобнее, я не особо искала. По мне проще нарисовать в фотошопе и сконвертить. Так что выбирайте сами : )

Файл favicon должен быть именно в формате ICO, а не получен путём изменения расширения файла другого формата на ICO. Работать может и будет, но глючно.

Тем не менее,Вариант IV - переименование.
Результаты тестов:

1. ИЕ поддерживает корректно сделаные favicon (как я описывала), в случае альтернативных вариантов выдаёт просто обычный жжшный карандашик. В закладках тоже самое, если favicon правильный — показывается он, если нет — синий карандашик : )
2. В Мозилле и Опере работают все варианты, том числе с простым переименованием
3. В закладках Мозиллы и Оперы favicon теоретически работают. Практически — в Опере синий карандашик, в Мозилле свой favicon не показывается

Так что если вам всё равно будет ли виден favicon в ИЕ — можете просто поменять файлу расширение, если нет — пойти одним из предложеных путей : )

Вариант V.
Online-сервисы для получения favicon (по наводке your7).
Создание и редактирование иконок online — Favicon.Ru (рус)
tools.dynamicdrive.com/favicon/ (eng)

Как вставить favicon.ico в журнал?
Таким кодом:
http://путь к файлу с иконкой/favicon.ico" type="image/x-icon">
http://путь к файлу с иконкой/favicon.ico" type="image/x-icon">
Например:

На сегодня хватит. В следующий раз я буду рассказывать о самой интересной и наиболее изменяемой части дизайна — о блоке с заголовком журнала и меню : )

Навигация по урокам
I. Общее представление о HEAD, WEBSITE и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
 V.  Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.