День пятый: шапка журнала
Для начала снова немного Css.
1. Как двигать журнал влево-вправо?
Код простой: margin: 0px auto 0px auto;
Задавать его надо самому внешнему контейнеру журнала. Помните, что контейнеров может быть несколько?
Конкретно этот ставит журнал по центру. Если вам нужно сдвинуть его куда-либо - меняйте 2 или 4 значение.
Последовательность значений: верх - право - низ - лево.
Пример: margin: 0px auto 0px 20px;
Этот код прибьёт журнал к левому краю с отступом в 20 пикселей.
Код универсален для любых блоков которые вы захотите подвинуть: для шапки, внутренних колонок, меню и так далее.
Иногда может потребоваться !important, это выясняется опытным путём.
Какой блок нужен для конкретной группы?
Bloggish: #container
Expressive/Mixit: #container-inner
Flexible Squares: #content
Minimalism: блок, которому вы задали ширину журнала
Smooth Sailing: .pageblock
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 - подзаголовок
Chameleon
.j-l-header - вся шапка
.j-w-social-networks-nav - виджет социконок. Может находиться в шапке либо в сайдбаре.
.j-social-networks-nav-item - элемент списка, каждый также имеет собственный класс
.j-w-journal-nav - меню журнала. Так же может находиться в шапке либо в сайдбаре.
.j-journal-nav-item - элемент списка, каждый также имеет собственный класс
.j-w-header-image - заглавная картинка. Блок появляется на странице, если картинка задана в настройках
.j-header-user - блок с названием, подзаголовком журнала и юзерпиком
.j-header-user-pic - блок с юзерпиком, можно выключить в настройках
.j-header-user-name - юзернейм в шапке, содержит ссылку
.j-user-journal-title - название журнала, содержит ссылку
.j-user-journal-subtitle - подзаголовок журнала
Expressive/Mixit
#header - вся шапка
#header-inner - внутренний блок в шапке
#header-name - название журнала
#header-name a - ссылка в названии - цвет заголовка задаётся здесь!
#header-description - подзаголовок
ul.nav - меню
ul.nav li.item - пункты меню
ul.nav li.current - выбраный пункт меню. Правильно перекрасить - .nav .current a, так как он тоже является ссылкой
ul.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 - пункты меню
.header .nav .item-selected - текущий пункт меню
Кроме того, там есть персональные классы у ссылок меню:
.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;
↑ значения только для примера, подберите свои
Отступы
Вы уже познакомились с margin: margin: 0px auto 0px auto;
Margin - это отступ наружу
Отступ внутрь - padding
Задаётся так же как margin, но при этом объект "отталкивает" не внешние объекты, а своё содержимое.
Если нужно чтобы содержимое шапки не прилипало к её краям - нужен padding. Если нужно чтобы сама шапка никуда не прилипала - margin.
Если нужно задать только одно значение - уточняем с какой стороны нужен отступ. Например:
margin-left:15px; или padding-top:10px;
Шрифт и цвет текста
Размер шрифта: font-size: 20px; (так же можно задавать в процентах и em, после цифры обязательно пишите единицу измерения)
Цвет шрифта: color: #ffcc00;
Жирность: font-weight: bold; нежирный - normal
Наклонный: font-style:italic;
Выравнивание текста
text-align: left;
Варианты: left/right/center (лево/право/по центру)
Ссылки
Подчёркивание: text-decoration: underline; отключить - text-decoration: none;
a:link - обычная ссылка
a:visited - посещённая
a:hover - ссылка при наведении
a:active - при нажатии
Задание:
Оформить шапку журнала по своему вкусу и похвастаться : )
Напоминаю: если есть вопросы (а они обязательно будут) - пишите. Если что-то не получается - пишите, всё починим : )
Самый капризный стиль для переделки шапки - Minimalism
Навигация по урокам
День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
1. Как двигать журнал влево-вправо?
Код простой: margin: 0px auto 0px auto;
Задавать его надо самому внешнему контейнеру журнала. Помните, что контейнеров может быть несколько?
Конкретно этот ставит журнал по центру. Если вам нужно сдвинуть его куда-либо - меняйте 2 или 4 значение.
Последовательность значений: верх - право - низ - лево.
Пример: margin: 0px auto 0px 20px;
Этот код прибьёт журнал к левому краю с отступом в 20 пикселей.
Код универсален для любых блоков которые вы захотите подвинуть: для шапки, внутренних колонок, меню и так далее.
Иногда может потребоваться !important, это выясняется опытным путём.
Какой блок нужен для конкретной группы?
Bloggish: #container
Expressive/Mixit: #container-inner
Flexible Squares: #content
Minimalism: блок, которому вы задали ширину журнала
Smooth Sailing: .pageblock
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 - подзаголовок
Chameleon
.j-l-header - вся шапка
.j-w-social-networks-nav - виджет социконок. Может находиться в шапке либо в сайдбаре.
.j-social-networks-nav-item - элемент списка, каждый также имеет собственный класс
.j-w-journal-nav - меню журнала. Так же может находиться в шапке либо в сайдбаре.
.j-journal-nav-item - элемент списка, каждый также имеет собственный класс
.j-w-header-image - заглавная картинка. Блок появляется на странице, если картинка задана в настройках
.j-header-user - блок с названием, подзаголовком журнала и юзерпиком
.j-header-user-pic - блок с юзерпиком, можно выключить в настройках
.j-header-user-name - юзернейм в шапке, содержит ссылку
.j-user-journal-title - название журнала, содержит ссылку
.j-user-journal-subtitle - подзаголовок журнала
Expressive/Mixit
#header - вся шапка
#header-inner - внутренний блок в шапке
#header-name - название журнала
#header-name a - ссылка в названии - цвет заголовка задаётся здесь!
#header-description - подзаголовок
ul.nav - меню
ul.nav li.item - пункты меню
ul.nav li.current - выбраный пункт меню. Правильно перекрасить - .nav .current a, так как он тоже является ссылкой
ul.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 - пункты меню
.header .nav .item-selected - текущий пункт меню
Кроме того, там есть персональные классы у ссылок меню:
.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;
↑ значения только для примера, подберите свои
Отступы
Вы уже познакомились с margin: margin: 0px auto 0px auto;
Margin - это отступ наружу
Отступ внутрь - padding
Задаётся так же как margin, но при этом объект "отталкивает" не внешние объекты, а своё содержимое.
Если нужно чтобы содержимое шапки не прилипало к её краям - нужен padding. Если нужно чтобы сама шапка никуда не прилипала - margin.
Если нужно задать только одно значение - уточняем с какой стороны нужен отступ. Например:
margin-left:15px; или padding-top:10px;
Шрифт и цвет текста
Размер шрифта: font-size: 20px; (так же можно задавать в процентах и em, после цифры обязательно пишите единицу измерения)
Цвет шрифта: color: #ffcc00;
Жирность: font-weight: bold; нежирный - normal
Наклонный: font-style:italic;
Выравнивание текста
text-align: left;
Варианты: left/right/center (лево/право/по центру)
Ссылки
Подчёркивание: text-decoration: underline; отключить - text-decoration: none;
a:link - обычная ссылка
a:visited - посещённая
a:hover - ссылка при наведении
a:active - при нажатии
Задание:
Оформить шапку журнала по своему вкусу и похвастаться : )
Напоминаю: если есть вопросы (а они обязательно будут) - пишите. Если что-то не получается - пишите, всё починим : )
Самый капризный стиль для переделки шапки - Minimalism
Навигация по урокам
День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку