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

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

Воскресенье, 26 сентября 2010 17:16

Верстка psd макета — находим подходящий размер шрифта.

Недавно во время верстки одного проекта я обнаружил следующую проблему: размер шрифта в программе “Adobe Photoshop” не соответствует аналогичному размеру шрифта в таблице стилей. То есть надпись в “Adobe Photoshop” размером, например, 24 pt выглядит намного мельче, чем текст такого же размера в окне браузера.

Опубликовано в HTML-верстка
Воскресенье, 26 июля 2009 17:19

Верстка блока с овальными уголками.

Задача: создать блок с овальными уголками.

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

Опубликовано в HTML-верстка
Пятница, 03 июля 2009 00:23

Создание верстки тянущейся по высоте на 100%.

Задача: создать блочную верстку макета чтобы при любом количестве текста подвал всегда был внизу окна браузера.

Опубликовано в HTML-верстка
Понедельник, 07 мая 2012 22:13

Пример верстки страниц сайта агентства недвижимости Realty

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

  • Adobe Photoshop CS4 (рисование и нарезка макета)
  • html (xhtml 1.0 Strict)
  • CSS 2.1
  • jQuery
  • jQuery UI
 

Описание:

Была поставлена задача разработать сайт одного агентства недвижимости. В процессе работы над этим проектом мной были созданы .psd макеты основных страниц сайта, из которых были сверстаны html–шаблоны. На момент создания тестирование макета производилось в браузерах IE7+, Firefox3+, Opera9.64+, GoogleChrome2+, Safari4+.

Отдельное внимание в этом макете хотелось бы уделить форме поиска объектов недвижимости, находящейся в левой колонке макета сайта. При ее создании я использовал библиотеку jQuery UI для создания интерфейса формы. При работе с формой возможно выбирать различные населенные пункты Московской области, а при выборе города Москва, появляется список станций метро. События, происходящие внутри формы обрабатываются при помощи jQuery.

Открыть html–странички макета

Опубликовано в Мои работы
Воскресенье, 06 мая 2012 11:29

Интернет-магазин по продаже торгового оборудования posmsk.ru

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

  • Adobe Photoshop CS3 (рисование и нарезка макета)
  • html (xhtml 1.0 Strict)
  • CSS 2.1
  • php 5 (создание шаблона сайта, кастомизация компонентов магазина и шаблонов компонентов)
 

Описание:

В процесе работы над этим проектом мной был создан .psd макет сайта, который впоследствии был сверстан в html–шаблон. Во время создания тестирование макета производилось в браузерах IE6, IE7, IE8, Firefox3, Opera9.64, GoogleChrome2, Safari4.

Кроме того, были произведены настройки для корректной работы интернет-магазина, в частности: обмена с «1С», создание различных типов цен и групп покупателей.

Сайт работает под управлением CMS «1С-Битрикс».

Скачать шаблон сайта для ознакомления

Опубликовано в Мои работы
Воскресенье, 06 мая 2012 11:12

Сайт-визитка компании ООО «Орехово-Зуевская Теплосеть»

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

  • Adobe Photoshop CS3 (рисование и нарезка макета)
  • html (xhtml 1.0 Transitional)
  • CSS 2.1
 

Описание:

В процесе работы над этим проектом мной был создан .psd макет сайта, который впоследствии был сверстан в html–шаблон. На момент создания сайта тестирование макета производилось в браузерах IE6, IE7, IE8, Firefox3, Opera9.64, GoogleChrome2, Safari4. Кроме верстки шаблона для CMS «1С-Битрикс», мной были созданы инфоблоки для хранения информации, а также настроен внешний вид шаблонов компонентов  для вывода новостей, документов, вакансий. Кроме того были произведены настройки шаблонов фотогалереи.

Посетить сайт ООО «Орехово-Зуевская Теплосеть»

Опубликовано в Мои работы
Пятница, 04 мая 2012 18:42

Пример верстки макета сайта мебельной фабрики «Роникон».

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

  • Adobe Photoshop CS2 (нарезка макета)
  • html (xhtml 1.0 Transitional)
  • CSS 2.1
 

Описание:

Из .psd–макета был создан кроссбраузерный блочный html–макет. На момент создания тестирование макета производилось в браузерах IE6, IE7, Firefox3, Opera9.64, GoogleChrome2, Safari4.

Открыть html–страничку макета

 

Опубликовано в Мои работы
Пятница, 04 мая 2012 18:33

Пример верстки макета сайта салона оптики «EyeKraft».

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

  • Adobe Photoshop CS2 (нарезка макета)
  • html (xhtml 1.0 Strict)
  • CSS 2.1
  • JavaScript
 

Описание:

Из .psd–макета был создан кроссбраузерный блочный html–макет. Верстка «резиновая», страница растягивается по ширине окна браузера. При разрешении экрана пользователя больше 1600px, страница располагается по центру экрана.  На момент создания макет тестировался в браузерах IE6, IE7, Firefox3, Opera9.64, GoogleChrome2, Safari4.

Открыть html–страничку макета

Опубликовано в Мои работы
Страница 2 из 2
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх