верстка — Блог одной студии

Использование относительных значений шрифтов

В работе над версткой сайта мы используем только относительные размеры шрифтов. Если сделать размер шрифта абсолютным, тогда браузер не сможет масштабировать текст, грубо говоря, пользователь не сможет менять размер шрифта. Это может быть полезно для людей с ограниченными возможностями и тем, кто просто любит, чтобы буквы были побольше.
К относительным величинам относятся — em (вычисляемая единица), % (процент) и pt (пункты). pt применяется с оговоркой, что это значение для типографии, я рекомендую указывать его только для тех элементов, которые планируется выводить на печать.
Если вы используете em, вам нужно считать размера шрифта браузера, начиная с 16px, т.е. по умолчанию 1em=16px. Обычно базовый размер шрифта сбрасывают до 10px, через css, вот таким образом:

body { font-size: 62.5%; }

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

Пункты	Пиксели	EMs	Проценты
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

Верстка и движок для сайта «Веста ТЛ»

www.vesta-tl.ru — Верстка сайта, движок.

Для сайта компании «Веста ТЛ» мы установили наш движок и написали специальные модули, позволяющие быстро и легко обновлять информацию и загружать фотографии.

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

А вот так, в режиме редактирования, для администратора:

Можно загрузить сразу до 10 фотографий, дать для них описание, пересортировать в любом порядке, а так же временно скрыть не нужные.
Для каждой страницы создается своя галерея фотографий, при этом, автоматически создается уменьшенная копия, а если файл назван по-русски, он переименовывается в транслит.
Таким же образом, прямо из сайта, можно управлять текстом, просто выбирая нужную страницу. Редактор позволяет создавать любые текстовые эффекты, списки, таблицы, дополнительные слои и т.д.
Сейчас сайт наполняется и поддерживается сотрудниками компании.

Верстка одинаково хорошо работает в любых браузерах, в том числе, в Internet Explorer 6, а так же в браузерах под Mac и Linux.

Создание сайта «Завода метталических конструкций»

www.l-dv.ru — Создание сайта, верстка, движок.

Новый сайт компании «LDV» создан в минималистическом дизайне. Основную ставку мы сделали на наполнение и судя по отзывам клиента, не ошиблись.

Сайт одинаково хорошо отображается в любом браузере, благодаря особому вниманию к верстке. Кстати мы до сих пор поддерживаем даже такие древние браузеры, как Internet Explorer 6!

Вся информация разложена по полочкам, у каждого товара имеется своя страница с описанием, фотографией и ценой. Кстати цены актуальные и постоянно обновляются. Сами сотрудники компании регулярно изменяют цены, добавляют новые описания и целые страницы, обновлять сайт очень легко, потому что он работает на нашем движке.
Мы выделили место под специальные акции и сезонные снижения цен, которые так же обновляются и сохраняют актуальность.
Наполнение сейчас является главным продающим фактором и это является главной особенностью сайта. Нами было создано и наполнено около 200 страниц (не считая технических), добавлено более 400 единиц товаров. Результат — высокая отдача от рекламы.

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

Благодарим Тлучкевич Андрея и Светлану за помощь в создании проекта и некоторые свежие идеи.

Верстка и движок для магазина свадебных аксессуаров

www.love-in-city.ru — Верстка, движок, программирование.

Верстка и движок.
Верстка сайта выполнена в соответствии со стандартами W3C, благодаря чему, сайт одинаково хорошо выглядит в любом браузере, причем, даже в старых версиях. Почти все элементы страницы взаимодействуют с фоном и потому состоят из PNG файлов. Специально для IE6, применен хитрый PNG фикс, позволяющий увидеть все преимущества альфа канала в PNG файлах, при этом не сильно утяжеляя страницу.
Основная часть верстки выполнена слоями, а контентная часть таблицами. Это сделано для того, чтобы было проще обновлять сайт. Например, при таком подходе, можно поменять на странице все что угодно и это может сделать любой человек, даже без специальных компьютерных знаний. В этом помогает наш движок.

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

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

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

В целом, работа получилась интересной и объемной. Благодарю Антона Князькина за интересную задачу и плодотворное сотрудничество.

Верстка сайта и движок, для компании «Zoom Expo»

Верстка и движок сайта, для компании «Zoom Expo»

www.zoom-expo.ru — Верстка сайта, Движок.

Работа для наших друзей, компании «Zoom Expo», получилась сложной, но от этого даже более интересной. Мы выполняли верстку и устанавливали свой движок. Сайт получился объемный, со сложной структурой и дизайном, потому приходилось проектировать многие вещи, еще до этапа основной работы.

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

Интерактивное меню

На каждой странице, своя картинка:

Сайт работает на нашем движке, благодаря чему, легко обновляется сотрудниками компании «Zoom Expo». Установлены специальные модули пакетной загрузки фотографий, прописаны специальные шаблоны для портфолио.

Новый знак рубля

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

1. Скачайте и установите на ваш сайт специальный шрифт ruble.eot.

2. Для начала, прописываем CSS стили:
@font-face { font-family: "Rubl Sign"; src: url(http://www.sajt.ru/ruble.eot); } span.cost { font-family: "Rubl Sign"; } span.cost span.rur { text-transform: uppercase; // text-transform: none;} span.cost span.rur span.eot { display: none; // display: inline;} span.cost span.rur span.ttf, span.cost span.end { // display: none; } span.cost span.end { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; } span.cost span.end:before { content: '2013'; }

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

3. Теперь прописываем код в тело HTML страницы:
Французские булки по 100 Aруб. Французские булки по 100 Aруб. Французские булки по 100 Aруб. Французские булки по 100 Aруб.

Можно играть со значениями, как угодно.

Результат:

Соответсвие символов (только для Internet Explorer):

Этот способ гарантирует правильное отображение во всех браузерах и в любых условиях.

Создание блога о Nintendo Wii. Часть 2

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

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

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

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

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

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

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

Установили и настроили RSS ленту, для слежения за новыми записями. Можно подписаться напрямую, через сервис Feedburner, Google или Яндекс-Лента. Если вы не любитель RSS, можете подписаться на рассылку новых записей по email, просто впишите свой email и вам будут приходить уведомления.

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

Страницы блога (3):[1]2 3 »