Матвей Земсков

Заметки веб-мастера

Среда, 02 марта 2016 13:07

FlexBox верстка блока с комментариями

FlexBox – новый мощный способ верстки макетов, с помощью которого процесс веб-разработки значительно упрощается. Практически все современные браузеры поддерживают FlexBox, поэтому неплохо будет применять этот метод для решения своих повседневных задач.

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

Опубликовано в HTML-верстка
Понедельник, 07 сентября 2015 11:39

Верстка landing pages о торговле на рынке Forex

Используемые инструменты и технологии:

  • HTML, CSS
  • jQuery
 

Описание:

Из PSD-макетов были сверстаны страницы (landing page), также были созданы JS-скрипты.

Посетить одну из страниц

Опубликовано в Мои работы
Четверг, 18 июня 2015 14:39

reGrid.js - инструмент для показа сетки на веб-странице

Уже в течении нескольких лет техника верстки сайтов при помощи сетки пользуется популярностью у разработчиков. В сети существует большое количество CSS-библиотек (Grid Systems) для работы с сеткой. Стоит заметить, что эта методика включена в Bootstrap, который на мой взгляд является одним из самых популярных CSS-фреймворков (если не сказать, что самым популярным).

Использование сетки в процессе верстки сайтов дает разработчику ряд преимуществ: увеличивается скорость разработки, верстать становится легче за счет четкого позиционирования элементов. Размещая элементы макета по сетке, вы сразу замечаете, что страница становится более аккуратной, блоки выглядят пропорционально, имеют одинаковые отступы. Конечно же, при использовании этой методики существуют и свои маленькие недостатки: например, в код добавляются дополнительные элементы разметки. Эти недостатки незначительны, поэтому их можно считать особенностями этого подхода.

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

Опубликовано в HTML-верстка
Воскресенье, 25 января 2015 14:12

Верстка шаблонов сайта Indonesia Trading Academy

Используемые инструменты и технологии:

  • HTML, CSS3
  • jQuery, AJAX

Описание:

Из PSD-макетов было сверстано несколько страниц. Затем на их основе были созданы шаблоны для Системы управления содержимым.

Опубликовано в Мои работы
Суббота, 08 ноября 2014 16:14

Верстка макетов в NetBeans

В процессе своей работы обычно я использую редактор Notepad++. Мне нравится этот редактор. Работать в нем удобно, плюс для него существует множество плагинов, используя которые можно оптимизировать процесс разработки. Но иногда функционала моего любимого редактора не хватает. Это бывает, например, в том случае, если вы начинаете работать над большим проектом, причем до вас этот проект уже существовал и обслуживался другими людьми. Notepad++ не сможет помочь разработчику при поиске чего-либо по всем файлам проекта. Здесь на помощь разработчику приходят интегрированные среды разработки (IDE). Среди программ такого рода встречаются и платные, и бесплатные. В этой статье я попытаюсь сделать небольшой обзор IDE NetBeans, причем хотелось бы найти положительные моменты этой программы, которые помогут в работе веб-верстальщику.

Опубликовано в HTML-верстка
Четверг, 23 января 2014 04:00

Создание шаблона сайта (каталог недвижимости) для CMS «1С-Битрикс»

 

Используемые инструменты и технологии:

  • HTML, CSS
  • jQuery, AJAX
  • PHP, Bitrix API
 

Описание:

Из PSD-макетов было сверстано несколько страниц (главная, внутренняя + страницы каталога). Затем на их основе были созданы шаблоны для CMS «1С-Битрикс». После создания структуры сайта, на страницах размещены компоненты системы и кастомизированы их шаблоны. Создан компонент заказа обратного звонка.

Опубликовано в Мои работы
Воскресенье, 22 сентября 2013 16:37

Полезные сведения об адаптивной верстке

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

Опубликовано в HTML-верстка
Пятница, 23 августа 2013 18:02

Размещаем круглые изображения на веб-странице

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

Опубликовано в HTML-верстка
Вторник, 23 октября 2012 11:07

Несколько правил html-верстки шаблона почтовой рассылки

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

Опубликовано в HTML-верстка
Понедельник, 18 октября 2010 08:29

Верстка формы без использования таблиц.

В этой небольшой заметке я опишу процесс верстки html–формы без использования табличной разметки. Наша будущая форма будет предназначена для регистрации новых пользователей на сайте. Каждое поле формы с подписью будет находиться на новой строке. Подписи и поля будут выровнены друг под другом, создавая ощущение, как будто мы использовали табличную верстку. Вобщем будет красиво ☺.

Опубликовано в HTML-верстка
Страница 1 из 2
Наверх