Пятница, 15.12.2017, 03:36 |  Гость | | Вход

Список элементов

Баннеры на сайте Информация, представленная на этой странице ориентирована в первую очередь для начинающих веб-мастеров. Что такое баннер? Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера. Баннеры размещают для привлечения клиентов или для формирования имиджа. (Материал из Википедии — свободной энциклопедии.) Баннер на сайте - это графическое изображение, проще - картинка, являющаяся гиперссылкой, кликнув на которую посетитель переходит на другую страницу с информацией рекламного характера. Изображение может быть в формате GIF или JPEG, статическим или с анимацией. Более современные баннеры изготавливаются с помощью специальных программ, типа Macromedia Flash 8, по технологиям Flash или Java, с различного рода эффектами. Баннеры могут быть различных видов и размеров, от кнопки "120 x 90" до большого прямоугольника "336 x 280", или даже огромного рекламного объявления с размерами "300 x 600". Задачи баннера - привлечь внимание, заинтересовать и побудить к действию, переходу на требуемый ресурс, где непосредственно можно купить товар или воспользоваться определённой услугой. Как сделать простой традиционный баннер? Например, такой: Для создания подобного рода баннера необходимо найти или сделать самостоятельно картинку, скопировать и вмонтировать в страницу сайта следующий HTML-код:  лучший в мире сайт Внимательно вглядевшись в код, можно заметить, что он состоит из кода ссылки и кода рисунка. Получается, это некий симбиоз двух вариантов. В коде ссылки вместо слова, например, "СКАЧАТЬ", вмонтирован код изображения и, в итоге, мы видим баннер. Этот процесс слегка напоминает анекдот из вопросов "армянского радио". "Что получится, если скрестить ужа с ежом?" Ответ: "Метр колючей проволоки!" Разложим, как говорится, "по полочкам". Соответствующими цветами в коде и в таблице обозначено: Адрес ссылки на запланированный рекламируемый ресурс. target="_blank"-открытие произойдёт в новом окне, target="_parent", либо отсутствие этого параметра - ссылка баннера откроется в этом-же окне. URL изображения. Часть кода http://your_site.ru/ можно не писать, а указать только "images/000000001.gif", но при условии, что изображение находится в папке images вашего сайта. Также можно указать путь к рисунку с любого другого ресурса, но, в этом случае адрес должен быть полным. Параметры изображения. border="0" - окантовка (бордюр) картинки. width="468" - ширина изображения баннера равна 468 пикселов. height="63" - высота баннера равна 63 пикселям. лучший в мире сайт- название баннера. Эти слова будут отражаться в окне баннера, если у посетителя в настройках браузера отключена возможность показа изображений, или по другим причинам, связанным с медленным или прервавшимся соединением с Интернетом. Хотелось бы отметить одну маленькую "хитрость". Размеры баннера желательно выставлять оригинальные, тогда он будет выглядеть "на все 100", или, имея рисунок соответствующих размеров, вовсе не выставлять размеры в коде, браузер самостоятельно их определит и выведет на экран как нужно, но, предпочтительнее, всё таки, вариант первый. Баннер со сменой картинок при наведении курсора мыши Картинка 1 - появляется при загрузке и перезагрузке страницы, картинка 2 - после наведения курсора мыши, картинка 3 - после того, как мышь уводим с изображения. Все картинки разместите в папке images, предварительно откорректировав размеры. Код в таблице скопируйте и вставьте на страницу своего сайта. onmouseover - событие, происходящее при наведении мыши, в нашем случае - смена изображений. images/1,(2),(3)banshange.jpg - указание пути к изображениям. В примере кода он краткий, можно указать полный путь с http://www.your_site.ru/..... onmouseout - событие, происходящее, когда мышь уходит за границы объекта. http://resource.ru - URL ресурса, на который необходимо перейти после клика. Баннер с эффектом подвижности картинки при наведении курсора мыши Эффект подвижности картинки при наведении курсора

Пропишем стиль классу, назовём его, например, mobility. (Стили писать обязательно в HEAD). Подключим скрипт (можно располагать, как в HEAD, так и в BODY). В строке кода скрипта var rector=3 //амплитуда колебания выставляем значение амплитуды колебаний. http://your_resource.ru - укажем адрес в СЕТИ, куда должен попасть посетитель, сделавший щелчок мышью на нашем баннере. Путь к файлу рисунка. Может быть полный, с указанием http://site.ru/...., либо неполным, как в нашем случае. Баннер с эффектом произвольной смены картинок Попробуем реализовать этот элемент с помощью следующего HTML - кода: Сделать щелчок мышью для выделения текста Далее осталось только подобрать изображения для баннеров, разместить их в папке images вашего сайта и проставить названия в нужных местах ( в коде скрипта и в коде баннера в body). Использование модальных окон на сайте загрузка... Информация, представленная на этой странице ориентирована в первую очередь для начинающих веб-мастеров. Понять что представляют из себя МОДАЛЬНЫЕ ОКНА лучше на визуальном примере ЗДЕСЬ. Я учился этому занятию у Евгения Попова, по его замечательному видеоуроку. Он настоящий профессионал по многим вопросам, поэтому, кто желает, можно наиболее детально рассмотреть предлагаемый вопрос, пройдя по ЭТОЙ ссылке, скачать видеоматериал и необходимые файлы. А я в свою очередь предлагаю свою текстовую версию обучения. Итак, начнём. 1. Подготовка материала ACHTUNG: 1. Для правильного отображения модальных окон необходимо проверить включение поддержки сценариев "JavaScript" в используемом вами браузере. Как включить "JavaScript" в браузерах "Opera", "Internet Explorer" и "Mozilla Firefox" можно посмотреть ЗДЕСЬ. 2. Эффект может не работать на бесплатных хостингах с минимальным набором предоставляемых услуг! В зависимости от того, что вы желаете разместить в модальных окнах, необходимо подготовить либо картинки или фотографии, либо видеоролик, либо текст. Изображения необходимо иметь в двух вариантах, большого и малого размеров. Это вы поняли, посмотрев пример размещения окон. В образце, например, малые изображения имеют ширину 180px., ну, а большие, соответственно, 600px. Размеры в дальнейшем можно изменять, кому как нравится. Изменить размеры изображений можно с помощью специальных программ, но проще всего это сделать в программе "Adobe Photoshop": 1.Запустить программу "Adobe Photoshop." 2.Открыть необходимое изображение командой: Файл -> открыть. В появившемся окне выбрать изображение. 3.В верхнем меню программы открыть вкладку Изображение-Размер изображения. 4.В открывшемся окошке установить необходимую ширину изображения (высота установится автоматически). Нажать ОК. 5.Сохранить изображение с новыми размерами. Видеоролики можно вставлять как свои, используя для этой цели программы, например Microsoft Office SharePoint Designer 2007 , Adobe Dreamweaver, сервисы, о которых рассказано на этой странице так и из СЕТИ, просто скопировав КОД. Для размещения текста (контента) в модальном окне необходимо вначале подготовить отдельный HTML-файл с необходимым текстовым материалом, картинками и прочим по желанию. Так как мы будем рассматривать все три случая возможного использования модальных окон, поэтому предположим, что весь материал вы подготовили. Если у вас пока нет своего материала, скачайте архив с файлами, которые также будут необходимы в нашем дальнейшем обучении: Скачать архив (360 кб) Распакуйте архив в отдельную папку. Открыв эту папку с названием "Modalwindows" вы увидите папки "code", "fancybox", "images". В папке "code" содержатся шаблоны для вставки текста, видео и изображений. Папка "fancybox" содержит все "яваскрипты", картинки и таблицу стилей, а папка "images" тестовые изображения в двух вариантах, как говорилось ранее. Файл index.html - это полностью готовый файл, открыв который в браузере, Вы сможете увидеть все варианты окон в работе. Ну и файл content.html-это тот файл с контентом, о котором говорилось ранее. При просмотре в различных браузерах возможны некоторые несовпадения и неправильное отображение, как, например, размер окна под видеоролик, а также проблемы с отображением текста (контента) в окне. Возможно отображение текста в "кракозябрах" в браузере при просмотре на компьютере и правильное отображение при закачке на сервер. Я думаю, что эти неприятности происходят из-за наличия разных кодировок и неправильных перекодировок. С файлами изображений ещё нормально, а вот с текстом есть некоторые "заморочки". Если что не будет получаться с контентом, попробуйте самостоятельно поэкспериментировать, потому, что я тоже пока в стадии изучения этого вопроса. На этом подготовка рабочего материала закончена. 2. Подключение элементов к сайту Папку "fancybox" копируем в "корневую" папку сайта. Содержимое папки "images" копируем в папку с изображениями, обычно она так же называется "images". Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами следующий код: Разные элементы выделены отдельными цветами. Первая строка - это подключение таблицы стилей. Три последующие - это "яваскрипты". Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно. Всё это хорошо видно на рисунке кода. В случае, если Вы не планируете работать со вставкой видео в "окно", участок кода $("a.video").fancybox({"frameWidth":520,"frameHeight":400}); не пишите, и, соответственно, когда не возникает необходимость размещения контента, опускаем часть кода для его старта, а именно $("a.content").fancybox({"frameWidth":600,"frameHeight":300});. Я намеренно упростил задачу, предоставив полный набор необходимых элементов кода, чтобы было легче, удобнее и быстрее работать. Просто нужно вставить этот код между тегами и особо не заморачиваться на деталях, но некоторые из них всё-же мы разберём, но немножко позже. Одиночное изображение в модальном окне. В то место на странице вашего сайта между тегами , где вы желали бы видеть маленькую картинку, которая при нажатии будет открываться в модальном окне, вставляем следующий код:
Выделенный текст заменяем своим. Для удобства монтажа в код вашего сайта ссылку я обрамил DIV-ами. Вот что у нас получилось: Хочу отметить, что я копирую предложенные вам коды и вставляю на эту-же страницу и получаю изображение. Тем самым обеспечиваю гарантии их работоспособности. Замечательно! С одиночной картинкой справились. Идём дальше... Серия изображений Для показа нескольких изображений в модальных окнах используем этот код:
Копируем этот код, вставляем точно также, как и в первом варианте. И вот что получаем в итоге: Симпатично получается. Изображения открываются в модальных окнах, стрелки для просмотра работают. Видеоролик в модальном окне: И, как прежде, выделенное маркером - это переменные составляющие. Смотрим результат: Посмотрите этот видеоролик В архиве, который вы скачали ранее есть папка "parameters.txt", в которой представлены различные настройки для строки $("a.video").fancybox({"frameWidth":560,"frameHeight":340}); Она у нас вверху, помните? Можно эти настройки менять, но, я думаю, что двух основных, а именно, ширина и высота вполне хватит. Когда вы будете просматривать результаты своей работы на разных браузерах, увидите, что на "Opera", "Mozilla", Safari и "Хроме" размеры видеоролика и модального окна совпадают, при условии выставления оригинальных размеров, а вот в "замечательном" "IE" дело обстоит не так хорошо. Там, почему-то, ролик никак не вписывается в окно. Но, как говорится, "четверо против одного", поэтому я в настройках выставляю размеры заявленные в ролике. Текст в модальном окне Ну и наконец рассмотрим размещение контента в наших окнах. Если по какой-либо причине вы желаете , чтобы текст открывался в отдельном окне на затемнённом фоне основной страницы, вставляйте в нужное место этот код:

Пример размещения контента в модальном окне

"content.html" - это, как говорилось ранее, самостоятельный, заблаговременно подготовленный HTML-файл, который загружается на ваш сайт, а ссылку на него прописываете в данном коде. Файл изображения, который желаете приобщить к тексту также нужно загрузить в папку "images". Получается следующее: Пример размещения контента в модальном окне Размер окна регулируем в строке $("a.content").fancybox({"frameWidth":600,"frameHeight":300}); Вот и всё. Мы научились размещению картинок, текста и видеороликов в модальных окнах. Это вовсе не сложно. Теперь вы сможете вполне реально применять свои знания и наработки на практике. Удачи вам!