Сегодня:
Блог: "Основы сайтостроения и веб дизайна"
сайтостроение

Переход на: Главная / Макет сайта /

Виды макетов сайта. Часть 3 Эластичный макет сайта.

АвторАвтор: aklychin

Дата добавленияДата добавления: 30.05.2013

Число просмотровЧисло просмотров: 4200



Здравствуйте уважаемый читатель блога "Основы сайтостроения и web дизайна".


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


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


Но не стоит думать, что из любого макета можно сверстать эластичный сайт. По-моему это заблуждение. Почему я считаю, что это заблуждение я постараюсь объяснить далее. И так начнем с определения, в чем же особенность эластичного макета сайта.


Эластичный макет сайта


И так небольшой пример. Разброс разрешений монитора, посетителей вашего будущего сайта будет достаточно большим. Как показывает практика это от 800x600рх до 1920x1080. То есть изменение размеров монитора происходит более чем в два раза. А теперь представьте себе, что основной шрифт вашего сайта установлен 12рх и как он будет смотреться на экране с разрешением 1920x1080, а может быть и более. Как говорится впору покупать очки.


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


Вот мы и подошли к особенностям эластичного макета сайта. А основной особенностью является тот факт, что эластичность сайта строится вокруг изменения размера шрифта. Как говорится, отправной точкой во всем этом деле является шрифт. Причем исходный размер шрифта определяется не в пикселях, а в em. ЕМ - это относительная единица длины, равная размеру текущего шрифта. По умолчанию 1еm равняется 16рх, соответственно 10рх = 0,625em. В em устанавливаются так же и размеры модулей сайта. Таким образом, разработчик получает эластичную систему изменения размеров сайта при изменении размера шрифта.


Эластичный макет сайта


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


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


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


Поделиться

Добавьте Ваш комментарий и оцените статью:

+ Добавлять комментарии и оценивать статью могут только зарегистрированные пользователи. Если Вы регистрировались, то просто авторизируйте свой аккаунт.


Комментарии к данной статье:


Подписаться на обновления блога

монетизация сайтаРеклама
заработок на сайтеПомощь

Понравился проект?

Внесите вклад в его развитие, пожертвовав любую сумму на один из кошельков:

Z255632435111

R174106546724

Деньги пойдут на оплату серверов, зарплату авторам уроков и развитие ресурса.

В примечании к платежу укажите Ваш email или логин на нашем проекте.

Администрация.

Статистика блога:

Статей: 107

Комментариев: 10

Зарегистрировано: 17

Все права защищены сopyright © Блог - "Основы сайтостроения и веб дизайна" 2012 - 2017