Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Как сделать в html шапку

Шапка сайта и навигационное меню с помощью CSS

Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.

Начал смотреть с чувством, что вот - сейчас научусь чему-то новому. Но терпения хватило досмотреть до девятой части. Устал наблюдать мучения автора по верстке шаблона, и в частности, то, как создавалась шапка.

Автор зачем-то вырезал только часть фона с навигацией, вставлял изображение логотипа в html-каркас и обертывал его ссылкой, пытался угадать местоположение навигации с помощью абсолютного или относительного позиционирования. Я решил сам попробовать сделать шапку сайта так, как мне кажется более правильным.

В основу создания шапки я положил свойство вложенных слоев на ‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).

Для чистоты эксперимента приведу эти размеры: ,

1	bg-header.gif - 800x50px

, . В CSS-свойствах сделал для них подстановку с помощью фоновой заливки цветом, для подстраховки.

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

#wrap{ width: 800px; height: 100%; margin: 0 auto; background: #c0c0c0; }

Затем создается слой , в котором будет располагаться шапка будущего сайта. Для нее прописываю совсем короткие свойства, с помощью которых гарантированно растягиваю шапку на всю ширину блока-родителя и задаю ее высоту:

#header{ width: 100%; height: 70px; }

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

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

#nav{ background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat; height: 70px; }

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

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

#head{ background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat; height: 50px; }

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

При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (как мною задумано для простоты эксперимента). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка:

#logo{ background: url(i/logo.gif) #36cf18 0 0 no-repeat; width: 30px; height: 30px; }

Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя .

Поэтому “превращаю” ссылку в блочный элемент с помощью свойства . А вот теперь растяну ссылку, задав для нее ширину и высоту в процентах. Конечно, можно указать эти параметры и с помощью пикселей, так как размеры логотипа известны. Но лучше возложить эту задачу на плечи браузера - пусть сам вычисляет размеры блока-ссылки:

#logo a{ display: block; width: 100%; height: 100%; }

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

Теперь достаточно сместить список вправо с помощью и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:

#nav ul{ list-style-type: none; float: right; } #nav li{ display: inline-block; } #nav a{ text-decoration: none; color: #fff; font-weight: bold; margin-right: 15px; line-height: 20px; display: inline-block; }

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

Но после “наводки” Kray Storm с форума проблема была решена. Для элементов и я поменял свойство на и для я дополнительно задал высоту строки , равную высоте блока . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими . Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.

Ниже приведу полный код html-каркаса и CSS-кода.

HTML-код:

CSS-код:

/* reset */ *{ margin: 0; padding: 0; } /* main */ #wrap{ width: 800px; height: 100%; margin: 0 auto; background: #c0c0c0; } #header{ width: 100%; height: 70px; } #nav{ background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat; height: 70px; } #nav ul{ list-style-type: none; float: right; } #nav li{ display: inline-block; } #nav a{ text-decoration: none; color: #fff; font-weight: bold; margin-right: 15px; line-height: 20px; display: inline-block; } #head{ background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat; height: 50px; } #logo{ background: url(i/logo.gif) #36cf18 0 0 no-repeat; width: 30px; height: 30px; } #logo a{ display: block; width: 100%; height: 100%; }

Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта:

И, наконец, результат всего - готовая шапка сайта:

На этом все.

Как вставить свою шапку на сайт

«Шапка», или верхняя часть веб-страницы, делает ваш сайт уникальным, позволяет ему отличаться от других и отражать специфику именно вашего интернет-проекта. С помощью оригинальной и качественно сделанной шапки можно украсить и облагородить любую веб-страницу, и чтобы сделать шапку самому, вам нужно научиться верстке этого веб-элемента.

Инструкция

Если вы хотите, чтобы сайт обладал статичными неизменными размерами, вам потребуется создать статичную шапку, которая не изменяется в зависимости от изменения ширины экрана. Определите ширину и высоту шапки (например, 996х230) и вставьте в верхний блок фоновую картинку, используя следующий CSS-код, где header-1.jpg – это фоновое изображение:#header { background: #a6b7d3 url(img/header-1.jpg) no-repeat; width: 996px; height: 230px;

}HTML-код шапки этого типа будет выглядеть так:

Если же сайт построен так, что его размеры подстраиваются под ширину экрана, шапка должна быть сверстана с учетом всех основных разрешений мониторов. Максимальная ширина такой шапки должна составлять 1920 пикселей. Для вставки такой шапки используйте CSS-код:#header { background: #a6b7d3 url(img/header-2.jpg) no-repeat center; height: 250px;}HTML-код является в данном случае аналогичным предыдущему. CSS-код изменен в некоторых параметрах – теперь в нем появился атрибут центровки изображения шапки, позволяющей подогнать фон под любую ширину экрана. Также вы можете сверстать более сложный вариант шапки, нарезанный на несколько фоновых блоков, которые будут менять свое положение в зависимости от размера окна просмотра. CSS-код такой шапки более сложен и обширен, и подразумевает повторения нескольких элементов фона в соответствии с плавающими размерами окна браузера, в котором могут просматривать ваш сайт.

Видео по теме

Распечатать

Как вставить свою шапку на сайт

Как сделать шапку для сайта

Июн-1-2009 Автор: VeryOldMan

Итак, как нам сделать шапку для сайта. Сейчас определим стили css, вернее стилевой класс css для шапки, или правильнее, хедера (header):

Все, как и для внешнего контейнера:

Обзовем его header и сохраним в уже созданной таблице стилей. Жмем ОК и попадаем снова в окошко определения правил. Если вы помните, в шапке у нас есть надпись. Но так как это заголовок, то зададим для него отдельный стиль. А сейчас идем в категорию Фон:

С помощью кнопки Обзор выбираем из папки images фрагмент шапки, изображение не повторяем. Идем в категорию Рамка. Если вы записали размеры фрагментов, то проставьте их, если нет, то посмотрите в разделе Фотошоп. Ладно, я вам подскажу:

В окошке Плавающий указываем контейнеру, куда ему плавать. Пункт левая (left) заставляет контейнеры сдвинуться к левому краю страницы и выстроиться по горизонтали. Жмем ОК.

Продолжаем создавать класс css. Привязываем стиль к первому верхнему контейнеру, где будет шапка. Для этого его нужно активировать. Это можно сделать в режиме Проект, так как и с первым, внешним контейнером. Но для того, чтобы не запутаться с активацией контейнеров сделайте так. Зайдите в режим Код:

Выделите строчку кода контейнера как на рисунке. Это делается, так же как и любом текстовом редакторе. Привяжите стиль header к контейнеру так же, как и в случае с внешним контейнером. Перейдите в режим Проект. Если вы все сделали правильно, то в контейнере появиться наша шапка:

Удалим надпись сверху шапки, и она станет на место.

Ну вот, стили css для шапки сайта определили и продолжаем процесс его создания.

Дальше наш путь — в раздел Сайдбар для сайта

Как сделать шапку для сайта

Здравствуйте друзья! Сегодня будет показано, как сделать шапку для сайта бесплатно и своими руками всего за три шага. Замена шапки сайта под силу любому новичку.

Как заменить шапку сайта

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

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

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

находим ту папку на блоге, где хранится картинка нынешней шапки сайта;
создаём в любом графическом редакторе новую шапку сайта;
делаем простую замену старой картинки шапки на новую.

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

На экране открывается картинка шапки. В адресной строке браузера появляется ссылка, где четко прописано, где размещается картинка. Ссылку надо скопировать. Картинку шапки сайта тоже надо скопировать, она понадобится нам для определения размеров.

Не все темы на WordPress позволяют так просто определить адрес папки, где хранится картинка шапки. Например, тема моего тестового блога это не позволяет сделать, при нажатии правой кнопкой мыши по шапке, записи «Открыть фоновое изображение» просто нет. С этом случае надо поступить следующим образом:

открываем админпанель нашего блога;
в панели инструментов выбираем «Внешний вид», «Заголовок».

В верхней части окна появляется изображение шапки сайта, теперь нажав правую кнопку мыши, появляется окно и запись «Открыть фоновое изображение» (смотрите скрин),

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

к оглавлению ↑

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

Теперь переходим ко второму этапу – создание шапки сайта, точнее, изображение для нее. Этот процесс описывать не буду, в прилагаемом видео это показано. Упомяну только важную деталь – новое изображение должно быть точно такого же размера, как и старое и иметь такое же расширение, например, png. Во многих темах нужно дать картинке такое же название, какое было у старой картинки. Почему? Потому, что Вы будете просто подменять старую картинку новой, а в кодах сайта прописаны ссылки именно под название изображения шапки.

На третьем этапе осуществляется простая замена одной картинки другой. Как это делается можно посмотреть либо в предыдущей статье, либо посмотреть прилагаемое видео. Некоторые темы позволяют сделать замену изображение шапки гораздо проще. Вернемся снова на мой тестовый блог. Заходим в админпанель, «Внешний вид», «Заголовок». Нажимаем кнопку «Обзор», выбираем изображение для шапки сайта на компьютере и нажимаем «Загрузить», через несколько секунд изображение загружено.

Теперь в чек-боксе возле нужного изображения ставим точку и нажимаем кнопку «Сохранить изменения».

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

Данная статья и видео дополнили предыдущую статью, Вы узнали, как сделать шапку для сайта бесплатно своими руками. Весь процесс занимает минут 10-15, не считая затрат времени на создание изображения новой шапки. Ведь создание картинок всегда процесс творческий. Обновляйте свои картинки и делайте блог индивидуальным и привлекательным. Удачи Вам!

С уважением, Иван Кунпан.

P.S. Для продвижения Вашего блога Вам пригодятся мои знания и трёхлетний опыт. Можете скачать интеллект карты «Пошаговый алгоритм создания блога для новичков» или «Пошаговый алгоритм написания мощных статей для блога«. Можете посмотреть также мой платный видео-курс «Как написать и оптимизировать статью на блоге. Продвижение блога статьями«. Если этих материалов будет мало, заходите на страницу библиотеки «Создание сайтов и работа с ними» и выбирайте нужный Вам видео-курс.