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

Создание резинового фона шапки

image

Приветствую Вас, уважаемые подписчики! В статье: Резиновая тема должна растягиваться я вскользь упомянул о создании фона для шапки блога, но совершенно упустил, что статьи должны быть рассчитаны на начинающих пользователей. А у меня получилось, как и во многих статьях в интернете, что читатель должен сам догадываться о том, что для автора, как само собой разумеющееся. Сам не люблю подобные статьи, и постараюсь сейчас исправить свои упущения. Как Вы уже догадались, рассматривать будем тему WordPress – F2.

Как создать градиентное изображение

Заходим в сервис DYNAMIC DRIVE – я о нём писал в статье: Дизайн сайдбаров в резиновой теме F2.

Выберите Горизонтальный градиент (стрелка 1)

image

Установите ширину и высоту создаваемого градиента (стрелки 1 и 2), выберите и установите желаемые цвета верхней и нижней части градиента (стрелки 3 и 4). Установите формат, в котором будет создано изображение, JPEG или PNG (стрелка 5) и нажмите кнопку: Получить полный размер (стрелка 6). Кстати, под этой кнопкой можно наблюдать отрезок общего поля градиента.

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

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

Откройте Настройки темы F2, пройдя по пути: Админ-панель/ Внешний вид/ F2 Настройки (стрелка 1). Поставьте галочку в чекбоксе: Использовать фоновый рисунок в заголовке? (стрелка 2). Если не указали высоту шапки раньше, сделайте это сейчас (стрелка 3).

В открывшемся текстовом поле: Адрес фонового рисунка, вернее, под ним, нажмите на ссылку: Загрузите рисунок здесь (стрелка 1).

В открывшемся окне нажмите на кнопку: Выберите файлы (стрелка 1).

В открывшемся проводнике вашего компьютера найдите и выделите нужное изображение (стрелка 1), нажмите кнопку: Открыть (стрелка 2).

На снимке ниже мы видим, что изображение загрузилось, видим его название и размер. Но нам нужно получить ссылку на это изображение. Для этого нажмите на ссылку: Изменить (курсор 1).

В открывшемся окне, справа, выделите и скопируйте ссылку на файл (стрелка 1).

Затем, снова перейдите в окно настроек темы F2 и вставьте скопированную ссылку в адресную строку (обведено красным).

Прокрутите страницу в самый низ и сохраните изменения (обведено). Вообще-то, это действие нужно делать при каждом переходе с изменяемой страницы на другую.

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

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

Поэтому, откройте файловый клиент (программу) FileZilla и пройдите по пути: /public_html/wp-content/themes/f2/images (стрелки 1). Найдите файл нужного изображения (стрелка 2), кликните по нему правой клавишей мыши и в выпавшем окошке нажмите на: Закачать на сервер (стрелка 3). Если кто подзабыл, как работать с программой FileZilla, освежите свою память, прочитав статью: Как работать с FileZilla.

 

Файл успешно закачан в указанную папку, нужно лишь переименовать его. Кликните по файлу правой клавишей мыши (стрелка 1), в выпадающем меню выберите: Переименовать (стрелка 2).

Название файлу нужно давать такое, чтобы Вам самим потом было понятно, что это за файл и какую роль он исполняет в вашей теме (шаблоне), например: fonheader, в моём случае это: fonhd. Формат файла так же можно переименовать, вместо jpeg присвоить png. Картинка от этого не изменит свой формат и вреда никакого не будет, просто я показал, что так делать можно. Хотя, ещё в самом начале, в сервисе, можно сразу задать формат PNG и в папку сохранять сразу под тем именем, которое будет носить данный файл.

Далее, зайдите в админку Внешний вид/ Редактор/ Таблица стилей (style.css) и вставьте такую строчку:

background-image:url(images/fonhd.png);Вот сюда: скриншот ниже (стрелка 1).

Обновите файл (стрелка 2).

Переходим на главную страницу, обновляем её и любуемся результатом.

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

Удачи Вам!

  © Михаил Ковеньков

Поделиться ссылкой:

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

Чтобы поменять шапку своего сайта, Вам необходимо знать её размер и, исходя из размера Вашей шапки, будем создавать новую с помощью программы Фотошоп. Для начала запускаем программу. В строке меню выбираем: файл => создать. Откроется такое окно:

В этом окне надо выставить размеры шапки. Я привожу пример для создания шапки размером 900х200 пикс. Прописав размеры, нажмите ОК. Появится вот такое рабочее окно:

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

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

Эта картинка имеет размер 1920х1200 пикс. Теперь надо эту картинку переместить в Фотошоп. Для этого в меню выбираем — файл ==> открыть. В открывшемся окошке выбираете на компьютере файл с нужной картинкой и нажимаете «открыть». Теперь окно Фотошопа будет выглядеть так:

Внутри теперь два рабочих окна. Теперь нам надо вырезать нужный фрагмент картинки, который мы поместим в нашу шапку. Вырезать надо по размерам шапки. Для вырезания можно воспользоваться инструментом — «раскройка», который найдёте в панели инструментов:

Если с фрагментом определились, то можно инструментом «раскройка» раскроить рисунок. С размерами ориентируйтесь по шкале слева и вверху. После работы инструмента картинка будет выглядеть так:

Нас интересует выделенный объект. Надо подкорректировать его размеры. Для этого на нужном фрагменте сделайте клик правой кнопкой мышки и в открывшемся меню выберите — «Редактировать параметры фрагмента». В открывшемся окошке выставляете размеры шапки и нажимаете ОК.

Все размеры отредактированы, теперь остаётся перенести этот фрагмент на шапку. Для этого заходим в меню и выбираем — Редактирование ==> Скопировать

Следующий шаг — надо выставить в Фотошопе на передний план окно с будущей шапкой. Далее опять заходим в меню «Редактирование» и выбираем функцию «Вставить»

Вот и всё, шапка в принципе готова. Смотрим, что у нас получилось. Это и будет шапка сайта, вернее её основа.

Теперь останется нанести свой логотип и название сайта. Но тут всё будет зависеть от того, как были они установлены на Вашем сайте. На некоторых шаблонах логотип и название находятся в отдельных файлах в корневой папке сайта. Они установятся автоматически. Вам останется только заменить в корневой папке сайта старый файл рисунка шапки на новый. Ну а если захотите изменить логотип или форму названия, то можно воспользоваться опять таки программой Фотошоп.

Вот и всё, это был самый простой способ. Освоив возможности Фотошопа, можно делать более оригинальные виды шапок. Всё в Ваших руках.

2012-09-01

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

Итак, как поменять шапку сайта на okis.ru? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png. Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.

Здесь Вы можете загружать изображения на сайт.

Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px», так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».

Далее нажмите на кнопку «Загрузить изображение на сервер»

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

Эту ссылку мы будем использовать при замене старой шапки на новую.

Зайдите в редактор CSS -> Редактировать CSS. На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».

Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:

div.art-header-jpeg {background: url(/ПУТЬ_К_ФАЙЛУ/shapka.png);}

Это и есть стили для шапки сайта.

В моём случае путь к файлу такой: /img/cocktail60/shapka.png

Значит в моей админке написан следующий код: У Вас же ПУТЬ_К_ФАЙЛУ к шапке другой, поэтому Вы копируете ту ссылку, которая показывается у Вас в админке.

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

Дело в том, что во всех шаблонах сайта okis.ru, где есть закругленные углы, шапка состоит из двух частей: из основной картинки, которую мы загрузили и из контура шапки. Давайте поменяем контур шапки. Зайдите снова в пункт «Загрузка фото» в панели управления сайта и загрузите там файл shapka_kontur.png. Перед загрузкой контура шапки не забудьте снять галочку с «Уменьшить размер изображение до 500 х 500 px». В админке нет кнопки «Контур шапки», поэтому мы добавим стили вручную для данного элемента. В редакторе CSS с новой строчки нам нужно прописать следующий код:

div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/shapka_kontur.png);}

В моем случае путь к файлу контура шапки такой: /img/cocktail60/shapka_kontur.png Поэтому я прописываю следующий код: div.art-header-png {background: url(/img/cocktail60/shapka_kontur.png);} Не забывайте о том, что Ваш путь к файлу отличается от моего.

Сохраните изменения.

Если Вы обновите наш сайт, то увидите, что синих уголков больше не наблюдается.

Теперь Вы знаете, как поменять шапку сайта в конструкторе сайтов ОКИС. В следующем уроке Вы узнаете, как поменять низ сайта на okis.ru.

Урок№5. Как поменять низ сайта на okis.ru Урок№7. Как поменять контур сайта на okis.ru Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU) Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

Дополнительные уроки по созданию и ведению сайта на OKIS: Урок№9. Как организовать общение на сайте, сделанном на okis.ru Урок№10. Как активировать сайт на okis.ru с помощью WebMoney Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

Перейти в начало к урокам по созданию сайта на OKIS>>>

Вёрстка таблицами. Часть-2.

Прежде чем мы продолжим наш урок, хотелось бы немного определится с целью того что мы созидаем. Понятно, что мы, учимся создавать сайт, познавая языки гипертекстовых разметок, в данном случае «HTML».  Но нам нужна некая, предопределённая цель. Для примера мы будем создавать, небольшой сайт визитку, который должен быть простым и понятным. Что должно быть именно в таком сайте, что бы легче понять я создал картинку, определяющую структуру будущего проекта.

Рисунок №1

 И так на рисунке №1, мы видим следующую схему, а точнее каркас нашего сайта визитки. Первым делом это идёт «Шапка сайта» (header), далее следует «Горизонтальное меню», в центре планируется две части, это «Боковая колонка» и контент (content). Завершающим, этапом станет так называемый «Подвал» (footer), или «Нижняя часть сайта». Обратите внимание, что при некоторых пояснениях, я вставляю в скобки,  название этих частей сайта, на английском языке. Это не просто фарс, это необходимо для того, что бы вы сразу запоминали, как они называются. Поскольку все языки программирования  написаны на английском, то это не просто слова, это и часть тегов, и стилевых оформлений, о которых вам предстоит ещё узнать.

Шапка сайта.

На прошлом занятие, мы с вами познакомились с таблицами, то есть с тем из чего будет состоять наш сайт, или его основной структурой каркаса.  Сегодня мы создадим шапку сайта. И так приступим, открывайте файл «index.html», в редакторе, где мы и продолжим наше занятие.

Впоследствии, мы создадим большое количество таблиц и чтоб, не запутаться в них, мы создадим так называемую «Закомментированную строку». Что это такое? Закомментированная строка, это часть текста, или кода, которую видит «браузер», но не отображает её для пользователя. Ниже приведён пример.

 

На примере мы видим, знаки перед текстом  <!- — </strong>и в конце текста — -> . Вот такой несложный код, и закрывает содержимое. Закомментировать, в HTML документе, можно двумя способами. Первое вручную, проставив необходимые знаки, второе, выделив текст, в редакторе «Notepad++», нажав «ПКМ», выбрать «Закомментировать выделенное».

Для начала обозначим общую таблицу, созданную на прошлом занятие. Приписав пред открывающим тегом «table» следующее:

  

А после его закрытия:

 

Далее продолжим работу с таблицей изменим её ширину, созданную на прошлом занятие именно « height: 100px; », заменим на « height: 100%; ». Теперь согласно, нашему каркасу (рисунок №1), нам необходимо создать четыре основных горизонтальных сектора, или говоря языком таблиц «четыре строки». Для этого копируем вот эту часть кода:

            Привет!        

И вставляем, её обратно три раза, так что бы получилось, четыре кода подряд. Что бы нам дальше было легче их понимать и находить, обозначим каждый по номерам (1,2,3,4) и каждый кусок кода прокомментируем.

Рисунок №2.

 На рисунке №2, показано как я это сделал.  В конце статьи открыв пример, вы сможете просмотреть, как  я их обозначил по названию. Теперь удаляем цифру «1», опускаем закрывающий тег « ниже на два пункта, и посредине вставляем код вот такой таблицы:

                                    Шапка                                

Сохраняем и открываем для просмотра в браузере. Как видим, создалась ещё одна таблица, с текстом «Шапка», по левой стороне. Поскольку ширина (width: 1000px), этой таблицы меньше чем основная, по краям мы видим отступы, а вот отступов сверху и снизу отсутствуют. Это потому что общая ширина основной таблицы у нас стоит 100% и содержимое срок по ширине заполняется полностью. Что бы отступ появился нам необходимо, указать ширину именно для строки, которая до этого была у нас под №1. Для этого после закомментированной строки «Шапка сайта», в тег <</strong>td> прописываем ширину, должно получится вот так:

Сохранили, просмотрели, отлично отступы появились. Далее вместо отсутствующего фона, нам необходимо вставить картинку, сам путь и имя картинки, у нас уже прописаны:

Теперь в папке, которую мы создавали ранее «Простая вёрстка в HTML» где лежит наш файл «Index.html», создаём папку «images», в которую и помещаем нашу картинку, или фон будущей шапки. Я создал картинку размером 1000х200 пикселей, что бы ваша картинка вписалась в этот дизайн, то вам необходимо создать рисунок такого же размера. Из кода указанного выше следует «background-image: url», что говорит браузеру, фон в данной области будет изображение, далее следует «'images/header.png'», где «images»,это созданная нами папка для хранения изображений, а «header.png'» имя и расширения самой картинки. Обратите внимание, что имя и расширения может быть любым (png, gif, jpg), главное, что бы оно было правильно указано. И так, создав папку, и поместив в неё картинку, я сохраняю, все это дело и запускаю файл для просмотра. Получилось вот что: Рисунок №3.  

 Всё отлично моя шапка работает, а вот вместо текста шапка, я напишу номер телефона компании

); text-align: left;">8 800-000-00-00

Что бы мой текст с телефоном не прилипал, перед ним я проставлю вот такой код   два раза. Для браузера это означает пробел.

); text-align: left;">  8 800-000-00-00

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

До встречи в следующем уроке «Простая вёрстка в HTML. Урок №4.», «Вёрстка таблицами. Часть-2».

Блог > Создание сайта

imageОпубликовано в Создание сайта / /

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.

HTML-код для горизонтального меню

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

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

 

Стили CSS выпадающего меню

ul {    list-style: none; /*убираем маркеры списка*/    margin: 0; /*убираем отступы*/    padding-left: 0; /*убираем отступы*/    margin-top:25px; /*делаем отступ сверху*/    background:#819A32; /*добавляем фон всему меню*/    height: 50px; /*задаем высоту*/  }  a {    text-decoration: none; /*убираем подчеркивание текста ссылок*/    background:#819A32; /*добавляем фон к пункту меню*/    color:#fff; /*меняем цвет ссылок*/    padding:0px 15px; /*добавляем отступ*/    font-family: arial; /*меняем шрифт*/    line-height:50px; /*ровняем меню по вертикали*/    display: block;     border-right: 1px solid #677B27; /*добавляем бордюр справа*/    -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/    -o-transition: all 0.3s 0.01s ease;    -webkit-transition: all 0.3s 0.01s ease;    }  a:hover {    background:#D43737;/*добавляем эффект при наведении*/  }  li {    float:left; /*Размещаем список горизонтально для реализации меню*/    position:relative; /*задаем позицию для позиционирования*/  }             /*Стили для скрытого выпадающего меню*/      li > ul {          position:absolute;          top:25px;          display:none;         }             /*Делаем скрытую часть видимой*/      li:hover > ul {          display:block;           width:250px;  /*Задаем ширину выпадающего меню*/            }     li:hover > ul > li {          float:none; /*Убираем горизонтальное позиционирование*/      }

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

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

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Скачать все горизонтальные меню в одном HTML файле

Благодарю за внимание.

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий