День пятый: шапка журнала

journals_covers — 24.01.2010 Для начала снова немного Css.

1. Как двигать журнал влево-вправо?

Код простой: margin: 0px auto 0px auto;

Задавать его надо самому внешнему контейнеру журнала. Помните, что контейнеров может быть несколько?

Конкретно этот ставит журнал по центру. Если вам нужно сдвинуть его куда-либо - меняйте 2 или 4 значение.

Последовательность значений: верх - право - низ - лево.

Пример: margin: 0px auto 0px 20px;

Этот код прибьёт журнал к левому краю с отступом в 20 пикселей.

Код универсален для любых блоков которые вы захотите подвинуть: для шапки, внутренних колонок, меню и так далее.
Иногда может потребоваться !important, это выясняется опытным путём.

Какой блок нужен для конкретной группы?



2. Как соединять стили?

Вроде бы все разобрались, но на всякий случай уточню: блоки кода просто ставятся один под другой. Никакой вложенности!

Второй момент: если у вас несколько стилей для одного блока, лучше объединять их все в одином месте.

Неверный вариант:

#alpha{
width:600px;
}

#alpha{
background:transparent
}

Правильный вариант:

#alpha{
width:600px;
background:transparent
}

Так же в целях повышения читабельности кода лучше описывать блоки от общего к частному: сначала про body, потом про #container, затем про #beta и #alpha, затем стили поста и так далее.

Хотя бы затем, что внутренние блоки могут воспринимать стили, заданные внешним, и их не придётся прописывать для каждого блока поотдельности.

Пример: вместо того, чтобы задавать чёрный цвет шрифта каждому блоку, можно прописать его один раз в body.

В некоторых стилях может не срабатывать из-за встроенных кодов (например, во Flexible Squares), но в большинстве случаев логика будет примерно такой.


Теперь перейдём к теме урока: шапка журнала

Шапка - это очень важный элемент страницы. В большинстве случаев там находится навигация по журналу(меню), название журнала и подзаголовок, может быть заглавная картинка.

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

Займёмся практикой.
Я не буду приводить коды, которые используются, потому что их получится слишком много, но ниже вы найдёте список классов для каждой группы, и сможете сами переопределить вид интересующих вас элементов.
Всё как обычно: имя класса с точкой или решёткой и в фигурных скобках описываете свойства.

Bloggish

#banner - вся шапка
#banner-inner - внутренний блок в шапке
#banner-header - название журнала
#banner-description - подзаголовок

Expressive

#header - вся шапка
#header-inner - внутренний блок в шапке
#header-name - название журнала
#header-name a - ссылка в названии
#header-description - подзаголовок
.nav - меню
.nav .item - пункты меню
.nav .current - выбраный пункт меню
.nav a - ссылка в меню

Важно!!! если вы меняете высоту #header, обязательно ставьте такую же или большую #header-inner! Иначе пропадает всё содержимое шапки


Flexible Squares

#header - вся шапка
ul.navheader - меню
ul.navheader li - пункты меню
.title - название журнала
.subtitle - подзаголовок

Minimalism

.header - вся шапка
.header .userpic - внешний блок с юзерпиком
.header .userpic-in - внутренний блок с юзерпиком
.header H1,.header H2, .header H3 - заголовок, подзаговоловок и ссылка на ник юзера (в последовательности не уверена)
.header .nav - меню
.header .nav .item - пункты меню

Кроме того, там есть персональные классы у ссылок меню:

.item-recent - последние записи
.item-friends - друзья
.item-archive - архив
.item-profile - профиль
.item-rss - Rss

Smooth Sailing

.header-title - заголовок
.header-subtitle - подзаголовок
.header-icon - юзерпик
.bodyheaderblock - блок с заголовком страницы
.body-title - заголовок страницы
.header-menu - блок с меню
.header-menu ul - список с меню
.header-menu li - пункты меню
.header-menu a ссылка в меню


Теперь ещё немного Css, который вам сейчас очень пригодится : )

Цвет фона и фоновую картинку вы уже научились менять : )

Высота элемента: height: 200px;

Ширина: width:600px;

↑ значения только для примера, подберите свои

Отступы



Шрифт и цвет текста



Выравнивание текста




Ссылки



Задание:

Оформить шапку журнала по своему вкусу и похвастаться : )


Напоминаю: если есть вопросы (а они обязательно будут) - пишите. Если что-то не получается - пишите, всё починим : )
Самый капризный стиль для переделки шапки - Minimalism


PS: вижу что нападало много вопросов, отвечу по мере возможности, только добралась до компа : )

Оставить комментарий

Популярные посты:

• Ранее
• Архив