HTML, CSS настройка размера элементов страницы в %, px, em …

enotblog-title

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

Основные единицы измерения html и css :

Единица измерения Значение свойства единицы измерения Использование
px Размер в пикселях, равен одной точке вашего экрана Шрифты, блоки, разметка
em Размер буквы m в стандартном шрифте Шрифты, блоки, разметка
% Шрифты : процент относительно шрифта определенного по молчанию. Блоки : процент относительно родительского элемента Шрифты, блоки, разметка
vh 1% от высоты области просмотра Шрифты, блоки, разметка
vw 1% от ширины области просмотра Шрифты, блоки, разметка
vmax Выбирается наибольшее используемое значение из vh и vw Шрифты, блоки, разметка
vmin Выбирается наименьшее используемое значение из vh и vw Шрифты, блоки, разметка

Размер в px (пикселях):

{font-size:16px; height:200px; width:50px}

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

При установке размера в (px) пикселях, следует учитывать возможные проблемы :

  • Элемент становится не масштабируемым, и на мобильных устройствах может отображаться мелко.
  • На дисплеях типа Retina, с высокой плотностью точек на дюйм ваш текст или элемент (без дополнительных манипуляций) рискует превратиться в нечто микроскопическое.

Размер em (буква m шрифта по умолчанию ):

{font-size:1.5em; height:200em; width:50em}

Фактически данная единица равна 100% от текущего размера шрифта (font-size:1em равнозначно font-size:100%). По умолчанию базовый размер шрифта16px. em — масштабируемая единица, что удобно при отображении на различных типах дисплея.  

Для избежания данной проблемы можно явно указывать размеры, для этого существует единица rem (Root em). Данная единица устанавливает размер элемента относительно базового значения всего документа. То есть в вышеуказанном примере размер шрифта вложенного списка будет 0.75em от размера шрифта документа.

Размер выраженный  % отношении:

{font-size:75%; height:90%; width:45%}

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

Процентное отношение зависит :

  • Шрифты — от базового шрифта.
  • Элементы разметки и дизайна — от родительского элемента.

Например: размеры height, width, margin, padding для вложенного элемента <div> будут рассчитываться от родителя (<body> или <div>). Тут может возникнуть проблема, когда высота (height) вложенного элемента в % не устанавливается. Проблема решается следующими способами :

  • Родителю задается  значение position:absolute.
  • Родителю задается значение height, Если высоту для родителя заранее определить нельзя, установите ему значение в min-height.

Для шрифтов при выражении размеров в %, важно учитывать наследование стилей, как и в случае с em (смотри выше «Размер em«).

Размеры vh и vw (1% от области просмотра):

{font-size:2.5vh; height:80vh; width:60vw}

Размеры vh и vw выражаются в % отношении от области просмотра (window), которая представляет собой окно браузера. 1 единица равна 1% от области просмотра. Единицы являются масштабируемыми.

Очень удобно использовать данные единицы для создания адаптируемых страниц.

Размеры vmax и vmin (максимальное и минимальное значение vw или vh):

{font-size:2.0vmin; height:10vmax; width:20vmin}

Размеры vmax и vmin выражаются как 1/100 наименьшей, либо наибольшей стороны:

  • 1vmax/vmin в портретном режиме будет равняться 1vh.
  • 1vmax/vmin в ландшафтном режиме режиме будет равняться 1vw.

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

Рубрика: web - дизайн | Метки: , , , | Добавить комментарий

Размещение своей страницы в сети интернет

internet

Когда сайт готов, его нужно выложить в интернет. В данной статье опишу, как это сделать.

Разместить свой сайт в интернете проще простого, для этого необходим всего 1 час свободного времени.

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

Для себя я выбрал beget.ru. На выбор повлияли :

  •  Бесплатный пробный период на 60 дней. Отличная возможность  протестировать сервис и научиться им пользоваться.
  • Возможность автоматической установки CMS. Если потребуется установить word-press или jumla, то сервис произведет установку и первоначальную настройку в автоматическом режиме и предоставит вам все пароли в виде таблицы.
  • Удобная панель управления. Отсюда будет осуществляться управление сайтами.
  • Возможность создать свой личный почтовый ящик.
  • Двух-факторная авторизация по смс-коду. Отличная защита от доступа посторонних лиц к панели управления. При входе нужно будет ввести пароль, высланный на ваш телефон.

panelНа фото представлен общий вид панели управления хостинга beget.ru

После регистрации на хостинге, нужно зарегистрировать доменное имя. Доменное имя — это, то что вводят в браузере для перехода на сайт.

Например: enotblog.ru. (доменное имя — enotblog в зоне .ru).

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

В итоге, получается три простых действия :

  1. Выбираем понравившееся имя сайта.
  2. Регистрируемся на понравившемся хостинге.
  3. Привязываем имя к своей странице через панель управления.

Поздравляю с благополучным размещением сайта.

Рубрика: web - дизайн | Метки: , | Добавить комментарий

Программы, для занятия web-дизайном.

Программы выбранные мною, как новичком для занятия веб-дизайном.

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

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

Редактор кода :

Notepad ++

Notepad ++ — отличный инструмент для написания кода HTML и CSS. Полностью русифицирован. Имеет встроенную подсветку синтаксиса, что обеспечивает правильность кода. Полностью настраивается по свои нужды благодаря огромной коллекции плагинов. Можно работать с несколькими вкладками. Отображает все дерево документов. В общем для меня оказался просто незаменимой вещью.

 

Графический редактор :

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

Веб — сервер :

XAMPP XAMPP — локальный веб сервер. Понадобится для изучения PHP в дальнейшем. На данный момент использую для редактирования шаблонов и для ознакомления с работой веб — серверов. Устанавливается очень просто и не требует ни каких лишних телодвижений. При запуске Apache может выдать ошибку что заняты порты 80 и 443. Лечится переносом Skype (занимает 80 порт) и остановкой службы IIS можно найти в поиске windows (занимает 443 порт). Также бывает нужно настроить антивирус и добавить программу в список доверенных. Больше никаких проблем не было, все работает отлично и огромная благодарность разработчикам.

Браузеры :

2015-09-25_220743

Chrome — веб-браузер.  В браузере имеется все необходимое для работы с сайтом и для его подгонки с помощью панели разработчика. Все размеры при необходимости можно подогнать на месте при просмотре страницы и внесении правок в CSS. можно проверить, как будет выглядеть страница на разных устройствах и при разных разрешениях экрана. Имеет много подключаемых плагинов и расширений для работы с сайтами (опишу позже).  В общем, уверен что данный браузер в представлении не нуждается. Также рекомендую установить все остальные браузеры для проверки отображения своей страницы на разных движках, иногда случаются «чудеса».

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

Рубрика: web - дизайн | Метки: , , | Добавить комментарий

Разбивка страницы на блоки

Буквально пару дней назад я начал изучать HTML и CSS. В данном блоге постараюсь описать свои проблемы и успехи.

Для создания любой страницы, важно разбить макет страницы на блоки, вот тут-то я и столкнулся с первой проблемой.

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

Пришлось проводить самостоятельные эксперименты. Вот какие 100% работающие решения я вывел для себя  :

  • При  разбивке блоками <div> важно использовать ширину и высоту в «% отношении.
  • Определять vmax и vmin для высоты и ширины блоков. Максимальное значение и минимальное значение.
  • Заранее прописывать в теге <html> размер шрифта для всего сайта, при надобности менять размеры шрифтов в блоках в единицах «rem«. 1 rem — размер шрифта документа. Если этого не делать, то шрифты при изменении размеров начинают выезжать за границы блоков.
  • Боковые колонки я прижимал к краям при помощи «float-left float-right«, блоки по середине вставлял при помощи  «position:relative» и в последствие выравнивал по центру родителя «margin:auto«.

Пример того, что получилось : посмотреть пример.

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

Рубрика: web - дизайн | Метки: , , | Добавить комментарий