Как сделать текст в меню в виде ссылок

шапка для сайта

Дорогие друзья, после того как я опубликовал фотошоп урок - как сделать шапку для сайта или блога, посыпались вопросы - как в шапке сделать ссылки рабочими? как сделать что бы ссылки были кликабельные? Как сделать надписи в меню в виде ссылок? (уже человека 3-4 интересовалось).

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

Сейчас у нас шапка идет одним куском, нам нужно ее разделить на две части.

шапка для сайта

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

И так начнем.

1. Открываем фотошоп

2. Открываем File→Open (Файл→Открыть или CTRL+O) в фотошопе исходник шапки (исходник можно взять на странице с уроком).

шапка для сайта
(нажмите на картику для просмотра оригинала)

3. Скрываем слои с текстом, в палитре Layers (Слои, F7) убираем глазик рядом с нужными нам слоями.

(нажмите на картику для просмотра оригинала) 

4. Далее порежем нашу картинку на две части: одна часть будет логотип с картинками, другая часть будет фоном для меню. Берем инструмент  Slice Tool (C) и делим нашу шапку на две части.

(нажмите на картику для просмотра оригинала)  

С помощью инструмента Slice Select Tool (C) можно выбирать область и редактировать размер, название и т.д.

5. Теперь остается только сохранить картинки. Идем File → Save for Web & Devices (Файл→ Сохранить для Веб или Устройств, Alt+Shift+Ctrl+S). Выбираем формат JPG (JPEG), ставим Quality (качество сжатия) - 70, выбираем галочку Optimized (Оптимизировать) и нажимаем кнопку Save (Сохранить). После сохранения, наши картинки будут лежать в папке Images, в том месте где мы их сохранили

Картинки мы подготовили, остается и только вставить в html-страницу. Для этого идем в новость - Примеры верстки «шапок» для сайтов (урок написан, моим другом Андреем год назад и сейчас очень актуален, очень жаль что Андрей завязал с блоггингом).

Переходим к Примеру 1 – Шапка для сайта со статическими размерами.

Вот код из первого примера:

Сейчас мы этот код немного модернизуем и получим нужный нам результат)

 

HTML-код

<div id="header"></div><!-- Блок с шапкой -->

CSS-код

#header {
  background: #a6b7d3 url(img/header-1.jpg) no-repeat;
  width: 996px;
  height: 230px;
}

В этом примере шапка представлена - одной целой картинкой, а у нас две картинки, так что немного изменим код.

CSS-код

#header {
  background: #a6b7d3 url(img/header1.jpg) no-repeat center;
  width: 1000px;
  height: 153px;
  margin:0 auto;
}

#menu {
  background: #a6b7d3 url(img/header2.jpg) no-repeat;
  width: 1000px;
  height: 36px;
  color: #FFF;
  margin: 0 auto;
  }
 
#menu  a{color: #FFF; text-decoration:underline;}

#menu  a:hover{color: #FFF; text-decoration:none;}

HTML-код

<div id="header"></div><!-- Блок с шапкой --><div id="menu"><div style="padding-top:7px; text-align:center"> <a href="/">Главная</a> &nbsp;|&nbsp; <a href="/">О сайте</a> &nbsp;|&nbsp; <a href="/">Контакты</a> &nbsp;|&nbsp; <a href="/">Поиск</a> &nbsp;|&nbsp; <a href="/">Реклама на сайте</a> &nbsp;|&nbsp; <a href="/">Блог</a></div>

Что я добавил/изменил:
В CSS-коде создал еще один идентификатор #menu и задал ему параметры фона, ширины и высоты, цвета ссылок и выравнивание блока. Так же, помимо фонового рисунка задан цвет фона #a6b7d3 на случай, если картинки будут отключены. Параметр no-repeat говорит о том, что фон не будет повторяться.

В HTML-коде, сразу после блока с верхней картинкой шапки вставил еще один блок, в который добавил вторую картинку с идентификатор #menu. Так же для ссылок в
новом блоке задал цвет и оформление).

Вы так же можете скачать уже готовый вариант шапки с меню и посмотреть как я делал.

На этом все, если у вас возникли вопросы, задавайте - буду отвечать)

Облако тегов:

Отзывов к посту "Как сделать текст в меню в виде ссылок" уже 12:

Аватар пользователя Рома

И я не понял как в шапку всавить картинку там место красным обозначено куда хотел

Аватар пользователя Сергей Иванов

шапку делал вот по этому уроку - http://www.blogohelp.ru/urok-fotoshop-kak-sdelat-shapku-dlja-sajta-ili-b... , там подробно написано как вставить картинку.

Аватар пользователя Рома

Помогити пожалуста что значит "блог с шапкой" ???

picsplace.ru/?v=240911da440565da182f0df507cac59aa7e34b.gif

Аватар пользователя Сергей Иванов

скорее всего вы имели в виду не "блог с шапкой", а "блок с шапкой", так?

Блок с шапкой вставляете в html-код вашей страницы, в то место где будет распологаться ваша шапка, а css-код вставляете в файл стилей, или же отдельно вставкой в ваш html код, погуглил нашел интересный курс - Основы. Как создать стили CSS и прикрепить их к HTML документу - http://www.dimachen.info/osnovy/

Аватар пользователя Mayk

А как сделать что бы ссылка в меню в виде кнопки была и нажималась, ну или хотя бы видимый эфект нажатия создавался?

Аватар пользователя Сергей Иванов

Mayk, тут вам нужен ролловер, погуглил и нашел полезную статью websovet.com/rollover-menyu-na-css, надеюсь вам пригодится)

Аватар пользователя Тёмка

ОГРОМНОЕ СПАСИБО!!!!!!!!!!!!!!!!!!!! ОЧЕНЬ ПОМОГЛИ!!!!

Аватар пользователя Сергей Иванов

Пожалуйста, очень рад что я вам помог.

Аватар пользователя Мария

Спасибо за урок, но картинка не появляется, только ссылки, подскажите пожалуйста, где должна быть ссылка на картинку

Аватар пользователя Сергей Иванов

Мария, картинка прописана в измененном коде css.

Так же в конце поста есть уже готовый вариант шапки со ссылками, можете скачать и посмотреть, если не получится напишите мне на почту (через обратную связь).

Аватар пользователя Максим

Так как для меня всякого рода скрипты - это всегда не сильно понятно, то пойдем практическим опытом добывать результат.
Буду стараться следовать всем вашим настановлениям)

Аватар пользователя Гость

суть такова, у меня появилась шапка, меню, НО почему то сам текст меню у меня чуть ниже самой шапки... может я не правильно что-то, или че??

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.
  • Строки и параграфы переносятся автоматически.
  • Используйте специальные теги [adsense:format:slot] или [adsense:format:[group]:[channel][:slot]] или [adsense:block:location] для показа Google AdSense ads.
  • Вы можете использовать метки BBCode в тексте.
  • Вы можете разместить код, используя теги <code>...</code>(общий) или <?php ... ?> (выделенный PHP).

Подробнее о форматировании