День третий: ширина журнала
Для начала все дружно вспомнили стиль из какой группы вы выбрали.
Можно для наглядности написать на листочке и положить рядом с клавиатурой.
Как я уже говорила, во всех группах разное строение страниц, поэтому очень важно брать коды именно для стилей своей группы.
Затем вспомним как выглядит код и заодно немного познакомимся с 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
- Chameleon
- 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 и морально устарело, поэтому я не рекомендовала бы брать их для серьёзных переделок.
Исключения - Chameleon, 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: если коды сработали, но журнал выглядит как после бомбёжки, сообщаю: фон ленты - тема нашего следующего урока! : )
ВАЖНО
Друзья мои, если что-то не получается - не надо насиловать коды по три дня и записывать себя в законченые тупицы. Просто попросите помощи.
Невозможно управлять авиалайнером, если вы его видите первый раз в жизни.
Ошибки - это нормально и естественно. Не бойтесь ошибаться - это просто ещё один способ узнать новое
Навигация по урокам
День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
Можно для наглядности написать на листочке и положить рядом с клавиатурой.
Как я уже говорила, во всех группах разное строение страниц, поэтому очень важно брать коды именно для стилей своей группы.
Затем вспомним как выглядит код и заодно немного познакомимся с 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
- Chameleon
- 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 и морально устарело, поэтому я не рекомендовала бы брать их для серьёзных переделок.
Исключения - Chameleon, 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: если коды сработали, но журнал выглядит как после бомбёжки, сообщаю: фон ленты - тема нашего следующего урока! : )
ВАЖНО
Друзья мои, если что-то не получается - не надо насиловать коды по три дня и записывать себя в законченые тупицы. Просто попросите помощи.
Невозможно управлять авиалайнером, если вы его видите первый раз в жизни.
Ошибки - это нормально и естественно. Не бойтесь ошибаться - это просто ещё один способ узнать новое
Навигация по урокам
День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку