среда, 3 апреля 2013 г.

Шапка блога с нуля.

Сегодня поступим круто: откажемся от услуг конструктора и будем творить сами. Конструктор для неумеек. Выбери варианты дизайна и получи готовенькое. Откровенно, конструктор меня почти устраивает. Тем более, если знаком с разметкой (HTML, CSS), то всегда можешь подправить его действия: что то удалить, что то вставить.Чем мы до этого и занимались. Сегодня шапка блога с нуля. Это не урок по дизайну, а практика по HTML и CSS. Я сотворю вот такую шапку:


У вас своя, возможно, получится лучше. А, каждые следующие все лучше и лучше. Дерзайте. Итак, приступим.

Заходим в Шаблон => Изменить шаблон, Ctrl +F, вводим в поле поиска <header>, находим в коде и все что между этими тегами (<header> ...</header>) удаляем. Создаем свою шапку, в которой в любое время сможете оперативно изменять составляющие ее элементы.
Вместо удаленного начинаем писать код:

<!--02.03.13*03.04.13********************************************ШАПКА -->
 <header id='zag'>

 </header>

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

Сразу совет: не скупитесь на комментарии. Они помогут Вам разобраться в коде, если Вы вернетесь к нему спустя какое то время. И тот, кто будет разбираться в нем, будет Вам признателен.

Итак, первая строчка: начало работы с кодом 02.03.13, редактирование 03.04.13 код - шапка.
Дальше открывающий и закрывающий теги шапки <header>, между которыми поместим все что хочется.
Конструктор поддерживает язык HTML5, в котором появился тег заголовка <header>. Это контейнер типа тега <div>. Что бы подчеркнуть что это заголовок ему присвоили свое название. Этому тегу присваиваем идентификатор id='zag'.

Кн. Просмотр - шапки как не было.

В некоторых шаблонах тело блога поднимается до самого верха экрана, прикрывая  фон (удалили что то лишнее). Поправим. Закрываем просмотр, возвращаемся в окно изменения шаблона, жмем Ctrl + F, вводим <![C. Для body gрописываем позицию от верха (синий шрифт):

   <![CDATA[
      body {
        min-width: $(content.width);
        top:30px;
      }
Кн. Просмотр - все ОК (сверху появилась полоска фона).

Ну что бы что то увидеть на экране в стилях перед скобочками ]]> (как их найти Вы уже должны знать) пропишем:

/* 02.03.13 *******************************************************ШАПКА*/
#zag{
height:200px;
background-color:#818961;
padding:5px;
}
/*02.03.13###############*/
      ]]>

Все ясно без комментариев. Задали высоту, цвет фона и внешний отступ. Кстати, для снятия скриншотов я использую программку FS Capture. Руссифицирована, бесплатна. Есть пипетка и линейка, редактор. Рекомендую.

Фон шапки выбрал созвучный фону блога (под зелень) пипеткой FS. Его будут видеть только те, у кого отключены картинки. Потом на фон мы наложим картинку.
Жмем Просмотр. Видим пустой прямоугольник будущей шапки, залитый цветом в тон $. 
Все ОК. Начнем заполнять. Вставим слева что то типа логотипа. Для этого в контейнер шапки вложим <div id='logzag'>.

<header id='zag'>
<div id='logzag'>
<img src='https://lh6.googleusercontent.com/-rDB5NE3WPeU/UTW6Ivwqp-I/AAAAAAAABLc/SWQQOcPOuBY/h120/gerb.gif'/>
<p>Я рожден в стране советов,<br/> К Вам с советами <br/>пришел.</p>
</div><!-- logzag-->
</header>

В этот контейнер вставили фото и текст, которые легко поменять в любое время.
Адрес фото можно взять так: кн. Вставить изображение, кн. Выбрать файлы, после выбора Из этого альбома, щелчок правой кнопкой по нужной фотографии, выбрать Копировать URL и вставляем в src="URL фото" между ковычек.

В разделе CSS пониже правил для #zag добавляем правила вывода контейнера логотипа.

#logzag{
float:left; /*разрешаем обтекание контейнера справа*/
width:150px;
height:200px;
background-color:#CED2BC;/*можно залить фоном*/
color:#ff0000;/*цвет текста*/
font-weight:bold;/*полужирный*/
text-align:center;/*выровнять по центру*/
}

Жмем Просмотр. Видим слева в шапке появился логотип (на верхней картинке). Продолжаем писать код:


</div><!-- logzag-->
<div id='kartin'>
<img height='155' src='http://3.bp.blogspot.com/-DZxBfUCJcwo/UVwO35ErVJI/AAAAAAAABPc/rdPEvyGf6gw/s1600/lumix.gif' width='300'/>
</div><!-- kartin-->
</header>

В контейнер <div id='kartin'> вставили картинку, аналогично, как в контейнер логотипа. Указали ее высоту и ширину (пригодятся для подгонки). Картинку подберите соответствующих размеров, но не больше оставшейся свободной части шапки.
В CSS части пониже правил для #logzag добавляем правила вывода этого контейнера:


#kartin{
float:right;
margin-top:20px;
}


Прижали вправо и задали верхний отступ (поле) 20 px.
Жмем Просмотр. Видим справа в шапке появилась картинка (см верхний снимок). Осталась пустой серединка.
Для ее заполнения можно написать:


</div><!-- kartin-->
<h1 id='nad'>Записки</br>фотолюбителя</h1>
</header>

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

</div><!-- kartin-->
  <div id='cen'> 
<img height='180' src='https://lh3.googleusercontent.com/-hP8ekzmCGEc/UVwnE_-TXzI/AAAAAAAABPs/gNCyilvNMks/h102/shrift.gif' width='540'/>
</div>
    </header>


и правилами:


#cen{
position:absolute;
left:160px;
}

Задали этому блоку абсолютную позицию с отступом слева 160рх.
Жмем Просмотр. Видим картинку (см верхний снимок). Можно нажимать Сохранить шаблон.

В заключение внесем строчку в #zag:


background-color:#818961;
background-image: url(https://lh4.googleusercontent.com/-MeglBHRlJTY/UVxpwJ9_5BI/AAAAAAAABQM/3-grz-i_Qkc/h120/lumix1.gif);

Зеленый фон я накрыл маленькой картинкой, которая растиражировалась по вертикали и горизонтали.



Конечно, картинка не удачная. Просто для примера. Даже пришлось поменять картинку в <div id='cen'>.  Подробней о фонах следующий раз.

2 комментария:

  1. На Вашем сайте, очень много полезных статей! Успехов Вам, у Вас отлично получается!

    ОтветитьУдалить
    Ответы
    1. Спасибо. Загляните сюда:
      http://banja1.blogspot.ru/p/blog-page_8425.html

      Удалить

От Вас деловой комментарий - Вам подарок!