Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

HTML форма поиска для сайта. Создание и оформление.

Как создать и оформить красивую форму поиска для сайта? В этой статье рассмотрен процесс вёрстки нескольких таких html форм поиска c psd исходника.

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

С точки зрения браузера – это простые HTML формы, с двумя элементами: текстовое поле и кнопка, которая отправляет запрос. Иногда кнопки может и не быть, тогда форма отправляется нажатием клавиши enter.

В качестве примера я взял одну из работ с сайта premiumpixels.com. Вот ссылка на сам пост. Этот бесплатный psd файл с оформлением шести видов форм выглядит, как показано на картинке ниже. Вы можете скачать и сам PSD с того сайта, так как он распространяется бесплатно.

ДемоСкачать

Мы ограничимся созданием светлой и тёмной версии, так как третья – синего цвета очень похожа на светлую.

Простой jQuery слайдер . Часть 2.

Добрый день всем читателям и подписчикам heavenweb.ru. В одной их прошлых статей я рассказывал как сделать несложный jQuery слайдер. Его код был компактным и простым, однако, скрипт имел некоторые недостатки. В этой статье мы рассмотрим как можно расширить возможности скрипта, и исправим некоторые баги. Смотрите демо ниже:

ДемоСкачать

 

Итак, какие возможности нам хотелось бы добавить во вторую версию HWSlider?

  • Во первых, хотелось бы иметь возможность вставить несколько таких слайдеров на странице. Иногда возникает такая необходимость, например в первом блоке прокручиваются какие-нибуть баннеры, а во втором – какие-то анонсы статей (текст). Соответственно, нужно предусмотреть возможность оформить каждый слайдер индивидуально.
  • Во вторых, не всегда нужна автоматическая смена слайдов. Нужно дать возможность администратору отключить авто прокрутку в любом из слайдеров.
  • В первой версии HWSlider была возможность отключить ссылки «следующий» и «предыдущий», но не было возможности отключить кнопки перехода на каждый слайд (ещё их называют буллеты).

Ну что ж, с требованиями определились, начнём дорабатывать наш скрипт.

Добавляем кнопки социальных сетей в Drupal 7. Вариант без внешних скриптов.

Социальные кнопки могут быть полезны для посетителей вашего сайта или блога. Нажимая на эти кнопки, они смогут сохранить ссылки на интересные материалы в своих аккаунтах в социальных сетях.

Размещение таких кнопок очень полезно. Ведь после нажатия кнопки «поделиться», ссылка с кратким описанием сайта и может даже картинкой появится на стене у того кто её нажал, а там её могут увидеть и перейти другие пользователи социальной сети. В этой статье рассмотрим три самые популярные соц. сети: Вконтакте, Twitter и Facebook.

Каждая из них предоставляет нужные кнопки для установки на сторонних сайтах. Однако, каждая такая кнопка подгружает свой js-файл со скриптом. Это замедляет время загрузки страницы в целом. Кроме того, используя готовый код, вебмастер никак не сможет оформить кнопки социальных сетей по своему желанию – всё оформление находится вне сайта.

К счастью, многие социальные сети позволяют использовать простые HTML гиперссылки с определёнными параметрами для публикации закладок. Используя данный метод, мы можем оформить кнопки, по своему желанию. В статье представлен пример создания блока из трёх социальных кнопок, по клику на которые открывается новое окно браузера (в центре экрана), где у посетителя запрашивается подтверждение на создание закладки.

Делаем простой слайдер на jQuery

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

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

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

  • Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным  и понятным.
  • Возможность вставлять в слайды как изображения, так и любой HTML – код.
  • Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
  • Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

ДемоСкачать

Как работать с FTP в Adobe Dreamweaver.

Добрый день всем читателям и подписчикам heavenweb.ru. В этой статье я расскажу как наиболее просто работать с сайтом уже загруженном на удалённый сервер.

Большинство вебмастеров разрабатывают свои проекты сначала на локальном компьютере, а затем переносят готовый сайт на удалённый хостинг по FTP. Это очень просто, нужен всего лишь какой-либо FTP – клиент, например бесплатная программа – FileZilla. Возникают проблемы в тот момент, когда нужно что-то изменять в файлах, уже загруженных на хостинг. Если такой работы немного, то можно пойти тем же путём: скачать файл по FTP, отредактировать его в текстовом редакторе, и закачать обратно, заменив старый. Но если это приходится делать часто, то уходит много времени и сил.

Наверное многим вебмастерам знаком текстовой html – редактор Adobe Dreamweaver. С его помощью можно не только написать свой сайт, но и работать с файлами на удалённом сервере в сети.

Что это нам даёт?

Во первых нам не нужно каждый раз вводить пароль и логин для доступа к FTP. Все данные сохраняются в программе. (однако если вы не уверены в безопасности своего компьютера, возможно это сохранение отменить).

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

Страницы