Сегодня поступим круто: откажемся от услуг конструктора и будем творить сами. Конструктор для неумеек. Выбери варианты дизайна и получи готовенькое. Откровенно, конструктор меня почти устраивает. Тем более, если знаком с разметкой (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'.
Кн. Просмотр - шапки как не было.
Прижали вправо и задали верхний отступ (поле) 20 px.
Жмем Просмотр. Видим справа в шапке появилась картинка (см верхний снимок). Осталась пустой серединка.
Для ее заполнения можно написать:
</div><!-- kartin-->
<h1 id='nad'>Записки</br>фотолюбителя</h1>
</header>
И CSS правила вывода этого заголовка, но получится простовато. Лучше вставить изображение. Поступаем стандартно: вставляем еще один контейнер с картикой
.
</div><!-- kartin-->
<div id='cen'>
<img height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyCaK8NoMF9oupj3AjOCizLU5W5OiUlmbmYuuaQClgQN1Lzbdzo2rPNdkd62v8uYkUowufDNzUUH3M-z1pCerlB39hTAjSCi7vJ_iTb49hoOa8oUHAxuku_mMVkp3fK97ODI9Q5EpBKFZ/h102/shrift.gif' width='540'/>
</div>
</header>
и правилами:
#cen{
position:absolute;
left:160px;
}
Задали этому блоку абсолютную позицию с отступом слева 160рх.
Жмем Просмотр. Видим картинку (см верхний снимок). Можно нажимать Сохранить шаблон.
В заключение внесем строчку в #zag:
background-color:#818961;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4nkJYt-QxjI_TmDC7oJkCosYewJ6BMZEI-furPB_ALpNsbPGA5gZCyv1LLnQMazSM0iS92dfE2j67Sg7ceWS-TnidAJe1NODZDDL41bCIvyN9rUDO6ih6MiOYqr8839MClMO9spey6Hw/h120/lumix1.gif);
Зеленый фон я накрыл маленькой картинкой, которая растиражировалась по вертикали и горизонтали.
Конечно, картинка не удачная. Просто для примера. Даже пришлось поменять картинку в <div id='cen'>. Подробней о фонах следующий раз.
У вас своя, возможно, получится лучше. А, каждые следующие все лучше и лучше. Дерзайте. Итак, приступим.
Заходим в Шаблон => Изменить шаблон, 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBcIfRSEPoN5k1bgEtTspqOxw6sqDBB2zmNIqomvHA1EQFcexQoQqjWepyWDNpCcdXSgBDW_kVVTQL2S7mQGEhdt8jLwvvfJL-ieI3yPN8HN6EU7pYrF-qdSUdQF5ZamtexoBegdYeJw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaM2FxqxDuxrWsJ-fjtIMBlwuQSbxZA931QuoFvLXcgRXYNtUKqvQ9zBe8i8YVM86D0uNkCrHB89z4LNeO-bj5rA7ctAYVcsPOTzktahdn_my9N3-D8zPMlkGzKVEmfaxHOdgT9n3pdoHc/s1600/lumix.gif' width='300'/>
</div><!-- kartin-->
</header>
В контейнер <div id='kartin'> вставили картинку, аналогично, как в контейнер логотипа. Указали ее высоту и ширину (пригодятся для подгонки). Картинку подберите соответствующих размеров, но не больше оставшейся свободной части шапки.
В CSS части пониже правил для #logzag добавляем правила вывода этого контейнера:
#kartin{
float:right;
margin-top:20px;
}
</div><!-- logzag-->
<div id='kartin'>
<img height='155' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaM2FxqxDuxrWsJ-fjtIMBlwuQSbxZA931QuoFvLXcgRXYNtUKqvQ9zBe8i8YVM86D0uNkCrHB89z4LNeO-bj5rA7ctAYVcsPOTzktahdn_my9N3-D8zPMlkGzKVEmfaxHOdgT9n3pdoHc/s1600/lumix.gif' width='300'/>
</div><!-- kartin-->
</header>
В контейнер <div id='kartin'> вставили картинку, аналогично, как в контейнер логотипа. Указали ее высоту и ширину (пригодятся для подгонки). Картинку подберите соответствующих размеров, но не больше оставшейся свободной части шапки.
В CSS части пониже правил для #logzag добавляем правила вывода этого контейнера:
#kartin{
float:right;
margin-top:20px;
}
Жмем Просмотр. Видим справа в шапке появилась картинка (см верхний снимок). Осталась пустой серединка.
Для ее заполнения можно написать:
</div><!-- kartin-->
<h1 id='nad'>Записки</br>фотолюбителя</h1>
</header>
И CSS правила вывода этого заголовка, но получится простовато. Лучше вставить изображение. Поступаем стандартно: вставляем еще один контейнер с картикой
.
</div><!-- kartin-->
<div id='cen'>
<img height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyCaK8NoMF9oupj3AjOCizLU5W5OiUlmbmYuuaQClgQN1Lzbdzo2rPNdkd62v8uYkUowufDNzUUH3M-z1pCerlB39hTAjSCi7vJ_iTb49hoOa8oUHAxuku_mMVkp3fK97ODI9Q5EpBKFZ/h102/shrift.gif' width='540'/>
</div>
</header>
и правилами:
#cen{
position:absolute;
left:160px;
}
Задали этому блоку абсолютную позицию с отступом слева 160рх.
Жмем Просмотр. Видим картинку (см верхний снимок). Можно нажимать Сохранить шаблон.
В заключение внесем строчку в #zag:
background-color:#818961;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4nkJYt-QxjI_TmDC7oJkCosYewJ6BMZEI-furPB_ALpNsbPGA5gZCyv1LLnQMazSM0iS92dfE2j67Sg7ceWS-TnidAJe1NODZDDL41bCIvyN9rUDO6ih6MiOYqr8839MClMO9spey6Hw/h120/lumix1.gif);
Зеленый фон я накрыл маленькой картинкой, которая растиражировалась по вертикали и горизонтали.
Конечно, картинка не удачная. Просто для примера. Даже пришлось поменять картинку в <div id='cen'>. Подробней о фонах следующий раз.
На Вашем сайте, очень много полезных статей! Успехов Вам, у Вас отлично получается!
ОтветитьУдалитьСпасибо. Загляните сюда:
Удалитьhttp://banja1.blogspot.ru/p/blog-page_8425.html