На сей раз нам нужно ухватить как можно больше свойств css, чтобы научиться создавать дизайн в таком виде, в каком мы уже набросали на бумаге, или выполнили эскиз в каком-нибудь пакете по работе с графикой. Совсем не зря перед этой статьей я разместил материал о том, как оптимизировать графику для web, так как дизайн будем строить не без изображений.

Создание макета сайта

Сначала обозначим свою задумку. Я сделал моментальный набросок в фотошопе и разметил области, которые были у нас на прошлом занятии, красными линиями. Теперь нужно поэтапно начать реализовывать задуманное.

image08

Макет сайта. Предполагаемое разделение на основные блоки

Обозначим цвет фона. Пипеткой в фотошопе я установил RGB-код нужного мне цвета как на эскизе. Оказалось это один из оттенков черного #050204. Удалите у всех контейнеров свойство цвета фона: background-color. Теперь нужно полученный цвет назначить для всего тела документа. Вы уже должны знать, что обращение идет к тегу body. Так мы получили черный фон.

Вставка изображения

Теперь нужно вставить логотип. Я вырезал его из эскиза и сохранил под названием logo.jpg и положил его в папку с изображениями (images) для сайта. У нас есть два пути вставки изображения. Первый с помощью HTML, а второй CSS. В первом случае картинка вставляется при помощи тега <img/>, а во втором — заданием фонового изображения контейнеру свойством background-image.

Тогда первым способом будет вот так:

         <div id="top">
                <img id="logo" src="/images/logo.jpg"/>
         </div>

А вторым способом с помощью стилей. Для этого не трогаем основной гипертокстовый файл, а изменяем таблицы стилей.

#top {
    width:100%;
    height:220px;
    background-image:url(../images/logo.jpg);
    background-position:top left;
    background-repeat:no-repeat;
    color:#FDE38C;    

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

Второй способ дает нам право изучить новые свойства управления фоновыми изображениями. Если мы используем свойство background-image, то надо знать, что картинка не будет считаться контентом и не сможет влиять на размер (растяжение) блока. Изображение попросту обрежется рамкой блока, если не влезет. В определенных ситуациях можно из этого извлечь выгоду, но сейчас установим высоту блока равный высоте логотипа. Я увеличил высоту до 220 пикселов. Не указывайте высоту контейнера, если используете первый способ, он растянется под размер.

В свойстве background-image нужно указать путь до логотипа и тут у меня возникла мысль написать статью об полных и относительных путях (адресах), если забуду ее написать, напомните мне в гостевой или комментариях! В нашем примере путь считается относительно файла таблицы стилей. Свойство background-position задает положение изображения в блоке – у нас оно прижато к верхнему и левому углу блока. Повторение (замостить) задается свойством background-repeat, без указания свойства изображение замостило бы всю доступную поверхность контейнера. Можно повторить изображение как по оси х (repeat-x), так и по оси y (repeat-y), соответственно горизонтальное и вертикальное повторение, или вовсе не повторять (no-repeat).

Одной строкой эти три свойства можно записать так:

#top {
    width:100%;
    height:220px;
    background:#050204 url(../images/logo.jpg) no-repeat top left;
}

В начале пишется свойство color, а за ним путь к картинке, повторение и позиция. В нашем случае цвет излишен, но мне хотелось показать вам полное написание свойств.

Совет: в дальнейшем используйте такую сокращенную запись известных вам свойств (нужно стараться сокращать размер css-файла (!)) В примерах же я буду расписывать новые свойства подробно, чтобы вы их знали.

Новые слои. Центрирование

Продолжим разбирательство с шапкой.

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

         <div id="top">
                <div id="top-left">
                    <img id="logo" src="/images/logo.jpg"/>
                </div>
                <div id="top-mid">
                    <span id="title">Cofemir.ru</span> <br/>
                    <span id="slogan">Целый мир в одной кружке</span>
                </div>
                <div id="top-right">
                    <span id="tel">+7(921)536-59-06</span>
                </div>
          </div>
          <div class="clear"></div>

В таблицы стилей нужно дописать строки:

#top-left {
    width:250px;
    height:217px;
    float:left;
}
#top-mid {
    width:400px;
    height:217px;
    float:left;
}
#top-right {
    width:250px;
    height:217px;
    float:left;
}
#title{
    font-size:40pt;
}
#slogan{
    font-size:20pt;
}
#tel{
    font-size:25pt;
}

Обновите браузер и посмотрите, как измениться текст. Размер текста (font-size) можно указывать в pt, px, em, %. Последние два измеряются относительно заданного общего размера. Мне хватает первых конкретных двух. Если вы не поняли, то мы начинаем потихоньку изучать свойства шрифтов.

image09

Неоформленная шапка

Теперь у вас возникнет вопрос – «А как же опустить ниже наш текст?». Что же, вполне закономерно. Ответ: самым простым способом – добавить разрывов строки перед спаном.

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

         <div id="top">
                <div id="top-left">
                    <img id="logo" src="/images/logo.jpg"/>
                </div>
                <div id="top-mid">
                    <div class="otstup">&nbsp;</div>
                    <span id="title">Cofemir.ru</span><br/>
                    <span id="slogan">Целый мир в одной кружке</span>
                </div>
                <div id="top-right">
                    <span id="tel">+7(921)536-59-06</span>
                </div>
          </div>

Дополните css-файл:

.otstup {
    height:50px;
}

Совет: Возьмите за правило изучить коды символов в HTML, так как иногда будет требоваться их вставка непосредственно при верстке. В нашем примере вы использовали символ «неразрывный пробел» (&nbsp;), чтобы контейнер otstup не был пустым, но и не имел визуального содержимого.

Eсли где-то еще потребуется отступ в 50px, то нам просто достаточно туда вставить эту строчку с контейнером. Не зря я назначил класс вместо айдишника (идентификатора, привыкайте к сленгу – многие мануалы будут понятнее) класс, который можно употребить много раз.

Теперь осталось отцентрировать номер телефона. Если у нас всего одна строчка, как в случае с телефоном, можно воспользоваться свойством line-height – межстрочный интервал. По умолчанию он равен размеру самого шрифта. Чтобы разместить текст вертикально по центру, достаточно выставить это свойство с размерами самого блока. Измените свойства идентификатора #tel:

#tel{
    font-size:25pt;
    line-height:217px;
}

Можно изменить семейство шрифта (font-family), стиль (font-style) и вес (font-weight). Что качается семейства шрифтов, то лучше пользоваться не какими-то экзотическими (потом мы и их научимся применять безбоязно), а самыми распространенными: Verdana, Arial, Helvetica, Tahoma, Trebuchet MS и другие. При этом если нет одного (первого в списке) то применится следующий. Кстати, допишите для блока top свойство:

#top {
    width:100%;
    color:#FDE38C;
    font-family: Georgia;
}

и посмотрите, что изменится.

Стиль шрифта бывает курсивом и нормальным (italic, normal), вес полужирным и нормальным (bold, normal), а больше и не нужно.
Давайте применим этот опыт для нашего слогана:

#slogan{
    font: bold italic 20px Verdana,Arial,Helvetica,Tahoma,serif;
}

image10

Что получилось в итоге

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

Всего доброго..

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле