Постоянные читатели

суббота, 5 марта 2011 г.

Как я делала кнопку-баннер, ведущую в блог.

     Хозяйка сайта Донецких рукодельниц "Золотые ручки" предложила мне разместить у нее на сайте кнопку-баннер моего блога. Как же не воспользоваться таким предложением?
     Но, учитывая, что я в таких делах "Чайник", пришлось повозиться, перерыть весь интернет и подумать, а точнее, я думала, что у меня "мозг взорвется"...
     Методом проб и ошибок получился у меня вот такой баннер:
Уголок рукоделия

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

     Итоговыми моими "Чайниковывми" соображениями делюсь с вами, а, заодно, и сама не забуду, как, что и куда, вдруг, еще понадобится.
     Тех, кто разбирается в вопросе, прошу не смеяться, а дружески подсказать, что можно было бы сделать правильнее и лучше.
     Итак, я решила поместить на кнопку свою шапочку-тюльпанчик, потому что она яркая и привлекающая внимание и сделать надпись - название моего блога.
     Никаких специальных графических редакторов у меня нет, да, и пользоваться я ими не умею... Есть только программы Picasa и Paint. С их помощью я сделала саму картинку. 
     В программе Picasa вырезала из фотографии шапочки два кусочка: квадратик с шапочкой и прямоугольник с фоном. Из этих двух фотографий сделала коллаж, соединила их в одну полоску. Подретушировала стыки. 
     Размер кнопки должен быть 180х45 пикселей. Посчитала, что это 4:1 и вырезала прямоугольник подходящего размера (тупо меряя на мониторе линейкой :-) ).
     Добавила надпись красного цвета, поэкспериментировала со шрифтами, выбрала самый, на мой взгляд,  походящий.
     Картинка готова, но она очень большая. Уменьшила ее в программе Paint до нужного количества пикселей.

     Теперь, картинку нужно превратить в кнопку. Для этого нужен HTML код картинки, а значит, надо разместить ее на каком-то сайте и получить этот самый код.
     Попробовала поместить картинку в Веб-альбомах Picasa , но не смогла потом найти нужный код картинки :-(. *
     Пробовала разместить на Радикале, получилось!
     Но, я остановилась на другом варианте: разместила картинку в своем фотоальбоме на Я.ру, у меня там есть регистрация. Скопировала "Код для вставки на сайт или в блог".
     Выглядел он так:

(Кликните на картинку, чтобы увеличить ее и подробно все рассмотреть...)

     Красным цветом выделен кусок, который нужен мне для вставки в код баннера.

     Пользуясь знаниями, по крупицам выуженными из интернета, я написала такой HTML код:






(Кликните на картинку, чтобы увеличить ее и подробно все рассмотреть...)    

     Синим цветом выделен адрес моего блога, то место, куда мы должны переместиться, нажав на кнопку-картинку.

     Код    target="_blank"    -означает, что, мой блог откроется в новом окне. Этот код можно не вписывать, тогда, блог откроется в том же окне.

     Код    width="180"   - это ширина картинки в пикселях.
Если бы в программе Paint я "промазала" с размерами, то, указав в коде 180, картинка приобрела бы нужную мне ширину.

      Код    height="45" - это высота картинки в пикселях.
А здесь я немножко "промазала" :-). Обратите внимание, в коде картинки ширина 44 пикселя, а здесь я исправила его на 45.

     Коды    width="ширина картинки" и height="высота картинки" писать не обязательно, если размеры картинки у вас такие, какие вам нужны для баннера.

     Код    title="Уголок рукоделия"  - слова "Уголок рукоделия" будут высвечиваться при наведении мышки на картинку.

     Код   alt="Уголок рукоделия" - описание картинки для поисковых систем.
    
     Код   border="1" - размер рамочки вокруг картинки в пикселях. Если поставить цифру 0, то рамочки не будет, чем больше цифра, тем шире будет рамочка.

     Ну вот, у меня все получилось! На самом деле, все не так уж сложно... Сложнее найти, систематизировать и "переварить" интернетовскую информацию, написанную "сухим" и "заумным" языком...

     Надеюсь, мой "язык" вам понятен ;-)

     Буду рада почитать ваши отзывы, замечания и предложения! И постараюсь ответить на вопросы!

* - при написании поста, я случайно наткнулась на прекрасную статью Picasa, отдай мою ссылку! , в которой Светлана доступным и понятным языком объясняет, как можно получить нужную ссылку на картинку!!!


5 комментариев:

  1. Мама мия!!!
    тоже хочу, но пока чета кажется трудно, даже с идеями )))
    спасибо за информацию, как созрею буду знать где искать

    ОтветитьУдалить
  2. Какой труд! Умница , Оля! Обязательно воспользуюсь! походу ты решила изучить html))

    ОтветитьУдалить
  3. ого, сколько работы! и столько полезной информации! спасибо! :)

    ОтветитьУдалить
  4. Оля, Яна, Люба, Лена, спасибо, что оценили проделанную мной работу!
    Если еще что-нибудь блогополезное "открою" для себя, делиться?

    ОтветитьУдалить

Related Posts Plugin for WordPress, Blogger...