День третий: ширина журнала

journals_covers — 22.01.2010 Для начала все дружно вспомнили стиль из какой группы вы выбрали.
Можно для наглядности написать на листочке и положить рядом с клавиатурой.
Как я уже говорила, во всех группах разное строение страниц, поэтому очень важно брать коды именно для стилей своей группы.

Затем вспомним как выглядит код и заодно немного познакомимся с Css.

Css - это каскадные таблицы стилей и это именно тот язык, которым мы объясняем нашей странице, какой же мы хотим её видеть.

Вчера мы уже познакомились с коротеньким, но очень полезным кодом:

body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
}

Ничего же страшного, правда? Для людей знакомых с английским этот текст будет понятен почти как русский, потому что в нём используются самые обычные слова из английского языка:

background - фон
color - цвет
image - картинка

ну и так далее.

Люди незнакомые с английским попутно выучат несколько новых слов : )

Сама страница журнала написана на HTML, но прямого доступа к коду у нас нет (есть только в платных слоях), так что мы не можем попереставлять элементы страницы как хотим или сверстать всё заново.

Да оно обычно и не нужно, потому для того, чтобы поменять внешний вид страницы, достаточно Css
Повторю: с помощью Css мы объясняем странице, как она должна выглядеть.

— Хочу чтобы шапка была фиолетовой, а заголовок розовым!
— Хочу цветочки на фоне и космолёт заглавной картинкой!
— Хочу серый фон и красный шрифт!

Легко! Это всё Css. Его использование даёт нам очень большие возможности, с некоторыми из которых мы с вами и познакомимся.

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

Как правильно позвать элемент? Зачем точки и решётки перед названиями?



На странице есть обычные Html-элементы (картинки, таблицы, ссылки, параграфы), которые можно позвать все сразу. Например, добавить всем параграфам цвет фона или убрать у всех картинок рамки.

Некоторым из них добавлены классы, чтобы можно было обратиться не ко всем элементам div, например, а только к нужным.
На странице может быть несколько элементов с одним классом.

У некоторых элементов есть id - личный идентификатор. Одному идентификатору соответствует 1 элемент. Двух элементов с одним id на странице быть не может.

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

Это немного сложнее вчерашнего, но и интереснее. Если справитесь с этим, считайте что вы сделали не просто шаг вперёд, а значительный прыжок!

В некоторых стилях ширина задаётся в настройках:

— A Novel Conundrum
— Classic
— Clean and Simple
— Digital Multiplex
— Disjointed
— Flexible Squares
— Generator
— Gradient Strip
— Haven
— Magazine
— Nebula
— Notepad
— Punquin Elegant
— Quite Lickable
— Refried Paper
— Tabular Indent
— Tranquility II
— Unearthed
— Variable Flow

К сожалению, большинство из них досталось нам в наследство от S1 и морально устарело, поэтому я не рекомендовала бы брать их для серьёзных переделок.
Исключения - Flexible Squares, Generator,Tranquility II, Variable Flow

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

В стилях, не перечисленных в списке, ширину можно менять кодами.
В тех что в списке тоже можно, но если есть настройки - коды ни к чему.

Ниже приведены коды для пяти основных групп.
Если вашей тут нет, напишите какую группу стилей выбрали вы, и я добавлю в пост код для вашей группы.

В каждом блоке заданы ширина в пикселях (width) и рамка (border).

C width всё более менее ясно: задайте нужную ширину в пикселях или процентах. Рекомендую начать с пикселей, значения в процентах более капризны. Но не бойтесь экспериментировать : )

border - подручный инструмент, гениальный и простой. В норме вы не видите границы блоков, и нельзя понять где кончился один и начался другой. Чтобы увидеть блоки и понять как они взаимодействуют - я добавила в коды цветные рамки:

border:1px solid red;

red - просто название цвета, самый быстрый и короткий способ задать заметный цвет рамке
1px - толщина рамки. Чтобы скрыть рамку - вместо 1 вставьте 0.
solid - тип.

Все три параметра обязательны. Цвета можно менять, не обязательно использовать только красные рамки.

Итак, коды.

Bloggish

div#container{
width: 900px !important;
border:1px solid red;
}

div#alpha{
width: 695px !important;
border:1px solid green;
}

div#beta{
width: 200px !important;
border:1px solid orange;
}

Expressive/Mixit

#container-inner{
width: 900px !important;
border:1px solid red;
}

div#alpha{
width: 695px !important;
border:1px solid green;
}

div#beta{
width: 200px !important;
border:1px solid orange;
}

Flexible Squares

#content{
width: 900px !important;
border:1px solid red;
}

div#maincontent{
width: 695px !important;
border:1px solid green;
}

div#sidebar{
width: 200px !important;
border:1px solid orange;
}

Minimalism

div.layout{
width: 900px !important;
border:1px solid red;
}

div.content-inner{
width: 695px !important;
border:1px solid green;
}

div.sidebar-inner{
width: 200px !important;
border:1px solid orange;
}

Smooth Sailing

div.pageblock{
width: 900px !important;
border:1px solid red;
}

div.entryHolder{
width: 645px !important;
border:1px solid green;
}

div.sidebar{
width: 200px !important;
border:1px solid orange;
}


Примечание: !important - параметр полезный, но не обязательный.
Он означает, что строчка с ним важнее всех остальных значений для этого элемента. Приказ выполнить операцию не взирая ни на что : )
В некоторых стиля она нужна, в некоторых нет. Для экономии времени сделала везде, чтобы вставленный код заработал сразу.


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



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

Во всех примерах первый блок - это внешний контейнер.

Второй блок - ширина ленты записей.

Третий - ширина сайдбара.

Очень важно: сумма ширины сайдбара и ленты постов не должна превышать ширину контейнера!

Пример: 200 (сайдбар) + 600 (лента) = 800 - подходящая ширина контейнера.

Сделаете ширину контейнера меньше - сайдбар может уехать вниз или просто всё будет коряво выглядеть

Имейте в виду, что толщина рамки суммируется с шириной объекта, поэтому не делайте значения впритык:

Например: 200 (сайдбар) + 590 (лента) = 790.

При ширине контейнера 800 всё будет выглядеть как положено, запас 10px.

Так же на странице могут быть заданы отступы, которые так же потребуется учитывать выбирая ширину контейнера.
Если что-то съехало, проще всего делать контейнер шире до тех пор, пока не добьётесь, чтобы ничего никуда не съезжало.

Теперь задание:

1. Убедитесь что поняли всё написанное про Css. Это важно, мы и дальше будем с ним работать. Чего не ясно - спрашивайте.
2. Скопируйте код для своей группы в поле для Css (туда же куда и вчера) и посмотрите что получилось в журнале.
3. Поэкспериментируйте со значениями ширины и с рамками.

Напомню о необходимости брать код только для своей группы стилей
Если вашей группы нет в посте - пишите, добавлю нужный код.

Внимание: если с первого раза не получается - не впадаем в панику, это нормально, особенно на второй день знакомства с Css : )
Пишите мне, разберёмся.
Для экономии времени давайте сразу ссылку на журнал где делаете и ваши коды (если их мало). Если кодов много - просто ссылку на журнал.

Upd: если коды сработали, но журнал выглядит как после бомбёжки, сообщаю: фон ленты - тема нашего следующего урока! : )



ВАЖНО

Друзья мои, если что-то не получается - не надо насиловать коды по три дня и записывать себя в законченые тупицы. Просто попросите помощи.
Невозможно управлять авиалайнером, если вы его видите первый раз в жизни.

Ошибки - это нормально и естественно. Не бойтесь ошибаться - это просто ещё один способ узнать новое

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

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

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