Привет всем на HeavenWeb! Cегодня поговорим о том, что такое CSS технология Flexbox. Если сказать коротко, применение модели Flexbox позволяет верстальщику более гибко управлять положением блоков на веб-странице с помощью CSS. В статье мы разберём основы, что нового вносит модель расположения элементов Flexbox, и как ими пользоваться.

До выхода браузеров с поддержкой Flexbox, макеты веб-страниц строились сначала при помощи таблиц (не совсем предназначенных для этого), а затем (как и чаще всего в настоящее время) при помощи, так называемой блочной вёрстки, когда блоки прижимались к разным сторонам окна браузера при помощи свойств float:left или float:right. Однако этот способ тоже имеет недостатки и не обладает большой гибкостью. Требуется создавать специальные очистители потока (clearfix), чтобы одни блоки не наезжали на другие, и.т.д.

Новая спецификация CSS позволяет решить большинство проблем вёрстки адаптивных, и десктопных макетов при помощи управляемого поведения блоков в контейнере-родителе.

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

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

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

ДемоСкачать

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

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

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

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

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

ДемоСкачать

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

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

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

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

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

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

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