Jimdo для начинающих|html для Jimdo


РИСУЕМ КНОПОЧКИ.

Первая статья из серии статей «HTML для Jimdo».

 

 

Эта информация будет полезна не только пользователям движка Jimdo. Она будет полезна всем начинающим веб-мастерам, тем кто пользуется он-лайн конструкторами сайтов, но, в первую очередь, предназначена для почитателей Jimdo. Не обессудьте, если я черезчур подробно буду описывать, как проводить те или иные итерации, но опыт общения со слушателями тренингов по Jimdo показывает, что излишней подробности не бывает :).

 

Концепция конструктора веб-сайтов Jimdo предполагает, что пользователь не владеет навыками программирования и знаниями html, MySQl и php. Ну вот и я не буду перегружать читателей «ненужной» информацией:).

 

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

 

В конструкторе Jimdo сформировать кнопку можно тремя методами.

 

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

 

Достоинства такого метода – кнопку можно нарисовать любого цвета и формы, ведь это всего-навсего только рисунок.

 

Недостатки – расположение кнопочки ограничено модулем размещения рисунков. При наведении на кнопку курсора и при «нажатии» на неё изображение (внешний вид) кнопки не меняется. Необходимо уметь пользоваться графическим редактором.

 

Второй метод формирования кнопки – воспользоваться модулем Jimdo «таблица».

 

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

 

Достоинства – кнопку можно нарисовать любого цвета и ширины и дать ей обводку.

Ну вот, например, что получается.

 

кнопочка-1

КНОПОЧКА-2

Недостатки этого метода – кнопка получается только прямоугольной формы с острыми углами. При наведении на кнопку курсора и при «нажатии» на неё внешний вид кнопки также не меняется.

 

Давайте рассмотрим, как сформировать кнопку в табличном модуле Jimdo.

 

Открываем модуль "таблица" и удаляем все строки и столбцы, кроме одного (например, с надписью "фамилия"). Меняем эту надпись в оставшейся табличной ячейке на ту, которая нам нужна. Например, на надпись «открыть страницу». Выбираем команды <параметры ячейки><дополнительно><цвет заливки>, входим в палитру заливки цветом и выбираем необходимый цвет заливки (например, салатовый). Таким же образом поступаем и с окантовкой:<параметры ячейки><дополнительно><цвет границы>, входим в палитру окантовки и выбираем необходимый цвет (например, черный). В результате получаем кнопку такого вида.

открыть страницу

А теперь перейдем в режим просмотра html кода и увидим следующий код:

 <table border="0" cellspacing="0" cellpadding="3" width="169" height="27">
<tbody>
<tr>
<td style="text-align: center; background-color: #91f678; border: 1px solid #000000;"><strong><em>открыть страницу</em><br /></strong></td>
</tr>
</tbody>
</table>

Здесь-то мы и сможем подкорректировать внешний вид кнопочки, выставить её ширину (вместо 169 поставить, например, 210 пикселей) и изменить ширину окантовки (вместо border: 1px поставить 2 px), а также добавить бордюрчик (там, где стоят нолики, тоже поставим какое-нибудь значение, например, 2 ).  Сохраняем изменения. Остаётся только присвоить надписи ссылку назначения (добавить ссылку) и кнопка готова.

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

 <table border="2" cellspacing="2" cellpadding="3" width="210">
<tbody>
<tr>
<td style="text-align: center; background-color: #91f678; border: 2px solid #000000;">
                <strong><em><a href="http://www.google.com" target="_blank">открыть страницу</a></em><br /></strong>
            </td>
</tr>
</tbody>
</table>

Итак, кнопочка готова. Как ей пользоваться? - Очень просто. Если вы сформировали кнопочку на месте её дальнейшего «проживания», то ничего делать не надо. Если Вы хотите переместить её в другое место – то Вам надо скопировать html код кнопки и вставить его в нужное место.

 

Для копирования кода кнопочки Вы входите в режим просмотра html кода таблицы, выделяете его мышкой и копируете выделенный фрагмент.

 

Для  того, чтобы вставить кнопку в нужное место, Вы открываете модуль "таблица", либо "текст", переходите в режим просмотра html и вставляете в пустое поле скопированный код.

 

Вот, собственно, и все.

 

Ну а теперь, после того, как мы научились копировать и вставлять html код кнопки в нужное нам место, мы можем рассмотреть третий метод формирования кнопки в конструкторе Jimdo.

 

Пожалуй, это самый простой метод формирования кнопочки. Это простейшая html кнопочка " batton", и выглядит она так:

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


Как Вы поняли, код кнопочки вставлен в табличную ячейку просто вместо текста.

Какие недостатки у такой кнопочки? Учитывая то, что мы не будем рассматривать в этой статье вопросы формирования более сложных html кнопок, недостатков у такой конструкции, пожалуй, два. Первый (и самый главный) адрес перехода, указанный в кнопке, не индексируется как поисковыми роботами, так и генераторами карты сайта. Это обязательно надо учитывать при использовании таких кнопок при навигации по сайту. Второе. Если Вам необходимо установить в ряде кнопок точные размеры, то при переходе на другой браузер эти размеры могут "убежать". Правда, в конце концов, это мелочи.

 

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

<button onclick="window.open('http://www.kpi-photo.com/buttons-jimdo')">кнопочка</button>

Где красным цветом выделена страница перехода.

 

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

<button onclick="window.open('http://адрес странички перехода')"><span style="padding:68px;"><span style="color: #0000ff;"><span style="font-size:10pt;">КНОПОЧКА</span></span></button>

ГДЕ:

 

68рх – размер в пикселях полей до и после надписи КНОПОЧКА (эти поля вместе с надписью, в конечном итоге, определяют ширину кнопочки).

 

size:10pt– размер шрифта.

 

#0000ff цвет надписи на кнопке (в данном коде это синяя надпись КНОПОЧКА)

Цвет можно ставить любой, но лучше смотрятся синий (#0000ff) , черный (#000000), и красный (#ff0000).


Команда window.open показывает, что страничку перехода надо открывать в новом окне.

 

Если Вы хотите, чтобы новая страничка открывалась в этом же окне, то должна быть команда window.location.href= Тогда код кнопки будет иметь следующий вид:

 

<button onclick="window.location.href=('http://адрес странички перехода')"><span style="padding:68px;"><span style="color: #0000ff;"><span style="font-size:10pt;">КНОПОЧКА</span></span></button>

Если Вы хотите разместить несколько кнопочек в один ряд, просто вствьте несколько кодов подряд в html окошко модуля "текст". У вас получится вот что:

А вот код который был вставлен (назначения перехода, конечно должны быть разные).

<button onclick="window.location.href=('http://www.kpi-photo.com/buttons-jimdo')"><span style="padding: 20px;"><span style="color: #0000ff;"><span style="font-size: 10pt;">КНОПОЧКА1 </span></span></span></button>

<button onclick="window.location.href=('http://www.kpi-photo.com/buttons-jimdo')"><span style="padding: 20px;"><span style="color: #0000ff;"><span style="font-size: 10pt;">КНОПОЧКА2 </span></span></span></button>

<button onclick="window.location.href=('http://www.kpi-photo.com/buttons-jimdo')"><span style="padding: 20px;"><span style="color: #0000ff;"><span style="font-size: 10pt;">КНОПОЧКА3 </span></span></span></button>

Причем раздвигать их можно просто пробелами, так же, как при редактировании текста.

                                

Ну вот, собственно, и все.

 

Экспериментируйте, это интересно!

 

 

                                 Всегда с Вами, Валерий Пичко

ааа   ббб   ввв



Если Вам была полезна эта статья нажмите, на кнопочку "Мне нравится"!



Подпишитесь на обновления!

 

Bы можете подписаться на рассылку обновлений нашего сайта. Как только будут появляться новости в разделах "Статьи"- Вы узнаете об этом раньше всех!

 

 




Заходите на нашу страничку в Фейсбук