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> |
Причем раздвигать их можно просто пробелами, так же, как при редактировании текста.
Ну вот, собственно, и все.
Экспериментируйте, это интересно!
Всегда с Вами, Валерий Пичко
ааа ббб ввв
РЕКОМЕНДУЕМ ПОЧИТАТЬ:
Для пользователей Jimdo. Размещаем текст поверх изображения.
Часовой магазин. Скачиваем флеш-часики для сайта.
Фотожоп. Ляпы фотошоперов, попавшие в «глянцевый» тираж.
История ретуши или «советский фотошоп».
"ADOBE" все возрасты покорны, или реcтаврация фотографий по-китайски.
Если Вам была полезна эта статья нажмите, на кнопочку "Мне нравится"!
