Определение размера страницы


Содержание

Размеры и прокрутка страницы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll-window.

Как найти ширину окна браузера? Как узнать всю высоту страницы, с учётом прокрутки? Как прокрутить её из JavaScript?

С точки зрения HTML, документ – это document.documentElement . У этого элемента, соответствующего тегу , есть все стандартные свойства и метрики и, в теории, они и должны нам помочь. Однако, на практике есть ряд нюансов, именно их мы рассмотрим в этой главе.

Ширина/высота видимой части окна

Свойства clientWidth/Height для элемента document.documentElement – это как раз ширина/высота видимой области окна.

Например, кнопка ниже выведет размер такой области для этой страницы:

Все браузеры, кроме IE8-, также поддерживают свойства window.innerWidth/innerHeight . Они хранят текущий размер окна браузера.

В чём отличие? Оно небольшое, но чрезвычайно важное.

Свойства clientWidth/Height , если есть полоса прокрутки, возвращают именно ширину/высоту внутри неё, доступную для документа, а window.innerWidth/Height – игнорируют её наличие.

Если справа часть страницы занимает полоса прокрутки, то эти строки выведут разное:

Обычно нам нужна именно доступная ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем documentElement.clientWidth .

Ширина/высота страницы с учётом прокрутки

Теоретически, видимая часть страницы – это documentElement.clientWidth/Height , а полный размер с учётом прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight .

Это верно для обычных элементов.

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

Эта проблема возникает именно для documentElement , то есть для всей страницы.

Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:

Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.

Получение текущей прокрутки

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop .

Что же со страницей?

Большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top , однако Safari/Chrome/Opera есть ошибки (к примеру 157855, 106133), из-за которых следует использовать document.body .

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset :

  • Не поддерживаются IE8-
  • Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает откат на documentElement :

Изменение прокрутки: scrollTo, scrollBy, scrollIntoView

Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.

На обычных элементах свойства scrollTop/scrollLeft можно изменять, и при этом элемент будет прокручиваться.

Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой document.documentElement.scrollTop , а в указанных – использовать для этого document.body.scrollTop . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.

Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

Метод scrollBy(x,y) прокручивает страницу относительно текущих координат.

Например, кнопка ниже прокрутит страницу на 10px вниз:

Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно документа.

Он эквивалентен установке свойств scrollLeft/scrollTop .

Чтобы прокрутить в начало документа, достаточно указать координаты (0,0) .

scrollIntoView

Для полноты картины рассмотрим также метод elem.scrollIntoView(top).

Метод elem.scrollIntoView(top) вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр top равен true , и внизу, если top равен false . Причём, если параметр top не указан, то он считается равным true .

Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:

А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:

Запрет прокрутки

Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно поставить document.body.style.overflow = «hidden» .

При этом страница замрёт в текущем положении.

При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

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

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


Итого

Для получения размеров видимой части окна: document.documentElement.clientWidth/Height

Для получения размеров страницы с учётом прокрутки:

Прокрутка окна:

Прокрутку окна можно получить как window.pageYOffset (для горизонтальной – window.pageXOffset ) везде, кроме IE8-.

На всякий случай – вот самый кросс-браузерный способ, учитывающий IE7- в том числе:

Установить прокрутку можно при помощи специальных методов:

  • window.scrollTo(pageX,pageY) – абсолютные координаты,
  • window.scrollBy(x,y) – прокрутить относительно текущего места.
  • elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.

Задачи

Полифилл для pageYOffset в IE8

Обычно в IE8 не поддерживается свойство pageYOffset . Напишите полифилл для него.

При подключённом полифилле такой код должен работать в IE8:

В стандартном режиме IE8 можно получить текущую прокрутку так:

Самым простым, но неверным было бы такое решение:

Определение размеров страницы отчета и макета

При планировании отчета необходимо задать параметры страницы, а также размер бумаги и тип принтера, которые будут использоваться для распечатки отчета. Предполагается использовать лазерный принтер с форматом бумаги А4 (210×297 мм). После этого для настройки и получения распечатки желаемого вида можно использовать различные диалоговые окна и свойства.

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

В диалоговом окне Параметры страницы содержатся вкладки: Поля, Размер бумаги и Источник бумаги. Вкладка Поля делится на три части.

— Поля. Позволяет выбрать размеры полей страницы.

— Ориентация. Позволяет выбрать ориентацию страницы.

— Страницы. Позволяет выбрать метод работы со страницами.

Рис. 23. Диалоговое окно Параметры страницы с активизированной вкладкой Страница

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

Для задания или изменения размеров отчета разместите курсор мыши на правой границе отчета (на границе белой страницы и серого фона) (рис. 22). При этом курсор мыши примет вид двунаправленной стрелки. Перетащите его для указания ширины отчета. При перетаскивании на линейке появится вертикальная линия, которая позволит точно задать ширину. Когда отчет примет нужные размеры, отпустите кнопку мыши. Будьте внимательны и не превышайте ширину страницы, заданную в диалоговом окне Параметры страницы

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

Для установки правой границы отчета на отметке 20 см выполните следующие действия.

1. Щелкните на правой границе отчета (на границе белой страницы и серого фона). Приэтом курсор мыши примет вид двунаправленной стрелки.

2. Перетащите эту границу к отметке 20 см.

3. Отпустите кнопку мыши.

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Да какие ж вы математики, если запаролиться нормально не можете. 8426 — | 7329 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

Стандартные размеры сайтов: особенности, требования и рекомендации

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

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

Илон Маск рекомендует:  Поиск в бинарных деревьях

Стандартная ширина сайта в пикселях для рунета

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

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

Макеты на все случаи жизни

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

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

Самые популярные размеры сайтов

Компромиссом между двумя крайностями является отрисовка макета для трех или четырех размеров экранов. Среди них один обязательно должен быть макетом для мобильных устройств. Остальные должны быть адаптированы для маленького, среднего и большого десктопного экрана. Как выбрать ширину сайта? Ниже приведем статистику сервиса HotLog за май 2020 года, которая демонстрирует нам распределение популярности различных разрешений экранов устройств, а также динамику изменения этого показателя.

Из таблицы можно узнать, как определить размер сайта, который нужно использовать. Помимо этого, можно сделать вывод, что наиболее распространенным сегодня форматом является экран 1366 на 768 точек. Такие экраны устанавливают в бюджетные ноутбуки, поэтому их популярность закономерна. Следующим по популярности является Full HD-монитор, который является золотым стандартом для видеороликов, игр, а значит, и для создания макетов сайта. Дальше в таблице мы видим разрешение мобильных устройств 360 на 640 точек, а также различные варианты десктопных и мобильных экранов после него.

Проектируем макет

Итак, проанализировав статистику, можно сделать вывод, что оптимальная ширина сайта имеет 4 вариации:

  1. Версия для ноутбуков с шириной 1366 пикселей.
  2. Full HD-версия.
  3. Макет размером 800 пикселей по ширине для отображения на маленьких десктопных мониторах.
  4. Мобильная версия сайта — 360 пикселей по ширине.


Допустим, мы определились, какой необходимо использовать размер создаваемого исходника для сайта. Но такой проект все равно будет затратным. Так что рассмотрим ещё варианты, на этот раз без использования фиксированной ширины.

Делаем макет гибким

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

Что такое золотое сечение, и как его применить к верстке веб-страниц?

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

Ещё со времен античности была изобретена пропорция, которую наш глаз воспринимает как самую естественную и изящную, ведь она повсеместно встречается в природе. Открывателем формулы такого соотношения был талантливый древнегреческий архитектор по имени Фидий. Он рассчитал, что если большая часть пропорции относится к меньшей так, как целое относится к большему, то такая пропорция будет смотреться наилучшим образом. Но это в том случае, если вы хотите разделить объект несимметрично. Такую пропорцию стали позже называть золотым сечением, что все равно не переоценивает её значение для мировой истории культуры.

Вернемся к веб-дизайну

Всё очень просто — используя золотое сечение, вы можете проектировать страницы, которые будут максимально приятны человеческому глазу. Рассчитав по определению формулы золотого сечения, получаем иррациональное число 1,6180339887. но для удобства можно использовать округлённое значение 1,62. Это будет означать, что блоки нашей страницы должны быть 62% и 38% от целого, независимо от того, какой размер создаваемого исходника для сайта вы используете. Пример вы можете увидеть на такой схеме:

Используйте новые технологии

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

Как увеличить рабочее пространство сайта

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

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

Примером хорошего способа скрыть меню является следующий макет (фото ниже).

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

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

Лучший сайт — адаптивный

Если не знаете, какой выбрать макета для сайта, то для вас все просто. Чтобы сэкономить на затратах на разработку и при этом не потерять аудиторию из-за плохого макета под какое-то устройство, используйте адаптивный дизайн.

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

Чем отличается адаптивный дизайн от наличия разных версий у сайта

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

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

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

Анализ контента сайта

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

Будет определен вес главной страницы сайта, релевантность заголовка (title), процент релевантности ключевых слов (keywords) к тексту страницы. Так же будут проверены на релевантность слова, заключенные в тег H1. По завершению анализа будет составлена таблица, в которой будут представлены все слова, встречающиеся в тексте. Синим цветом будут выделены наиболее частотные слова и словоформы.

Чем полезен этот инструмент?

Инструмент «Анализ контента» позволяет анализировать определенную страницу максимально детально и мгновенно.

Что он показывает?

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

Зачем это нужно?

Комплексный анализ текста является незаменимым инструментом при SEO-продвижении сайта, так как с его помощью вы можете корректировать ваши заголовки, описания, анкоры, ключевые слова, проверять их плотность и релевантность (соответствие поисковых выдач). Таблица с количеством встречающихся слов, их весом и количеством вхождений поможет понять, какие слова нужно участить в использовании, а какие – уменьшить. Анализируйте контент конкурента и совершенствуйте свой, делитесь результатами в социальных сетях. Удобная навигация упростит анализ текстов и обработку информации. Инструмент бесплатен.

Как можно узнать высоту страницы в пикселях?

Есть страница сайта. Можно ли как-то узнать, какова её высота в пикселях?

4 ответа 4

document.documentElement.scrollHeight — высота всей страницы

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html php или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35402

Илон Маск рекомендует:  Выбор марка-модель автомобиля с использованием Ajax

А сколько «весят» страницы твоего сайта?

У многих из нас хороший, скоростной интернет. Поэтому многие вебмастера не задумываются над тем, сколько должен весить сайт. Однако, я часто сталкиваюсь с тем, что в моём распоряжении слабый интернет. Таким примером является то, что живя на достаточном расстоянии от города М, у нас нет 4G, а скорость 3G я совсем не замечаю на своём телефоне. Скорее всего, статья ничего нового вам не раскроет, просто посмотрим сколько «весят» главные страницы популярных сайтов, а так же попытаемся выяснить приемлимые цифры.

Сайты
Браузер и машина

Для снятия показаний был взят Firefox 20 на машине с xUbuntu 12.04. На других машинах и браузерах сайты могут отличаться, но не сильно.

Для автоматизации процесса были взяты аддоны:
Linky — через него я сразу открывал все сайты в новые вкладки
NoScript — для отключения скриптов и анализа размера страниц, собственно, без них
UnMHT — для сохранения всех открытых вкладок с содержимым в отдельные файлы, название которых совпадает с открытым сайтом

Сохранение

MTH сохраняет файлы немного большего размера, но погрешность не слишком высокая, по крайней мере, на моих замерах между UnMTH и сохранялкой Firefox.

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


Сайты со всем включённым

Я открыл все вкладки и сохранил их. Под сохранение попали и Flash и HTML5 вещи, что значительно увеличивает размеры сайта.
Получился такой график

Я всё строил в LibreOffice Calc, просто потому что могу.
Средняя получена путем высчитывания среднего арифметического по 4м соседям, просто для наглядности.

Видно, что почти все вкладываются в 3 Мб, а средний вес сайта составляет около 1,4 Мб.

Сайты с отключенными Javascript и Flash/Html5 объектами

Теперь у нас нету скриптов, поэтому размеры должны уменьшиться достаточно сильно. Некоторые сайты сразу выкидывают окно с сообщением, что они не работают без JS, они весят совсем мало.

Видно, что весь график смещается влево, средний размер сайтов порядка 0,9 Мб.

Общий график
Сайты JS включен (Mb) JS отключен (Mb)
accounts.google.com 0,3 0,3
allbest.ru 0,1 0,1
amazon.com 1,3 0,6
apple.com 1,1 0,5
artlebedev.ru 2 1,3
ask.com 1,1 0,6
auto.ru 2,3 0,9
avito.ru 0,5 0,3
baby.ru 1,5 1,2
babyblog.ru 1 0,8
baidu.com 0,1 0,05
bash.im 0,7 0,1
bing.com 0,4 0,05
championat.com 3,2 1,4
consultant.ru 0,4 0,2
directadvert.ru 1,3 0,5
dribbble.com 1,8 1,3
drom.ru 0,8 0,5
e1.ru 0,5 0,4
ebay.com 1,5 0,9
echo.msk.ru 3,5 2,3
facebook.com 0,9 0,5
forum.searchengines.ru 0,8 0,3
fotostrana.ru 3,4 1,7
gazeta.ru 2,7 1
gismeteo.ru 0,6 0,4
google.ru 0,9 0,2
habrahabr.ru 2,7 1,8
imdb.com 0,9 0,9
irr.ru 1 0,5
job.ru 2 1
kinopoisk.ru 3,1 1,7
kp.ru 7,6 5,8
lenta.ru 1,8 0,7
liveinternet.ru 0,5 0,1
login.live.com 0,4 0,3
mail.ru 0,8 0,6
microsoft.com 1,7 1,1
news.sportbox.ru 2,4 1,4
newsru.com 0,9 0,8
ngs.ru 1,3 1,2
nsportal.ru 2,2 2,1
odnoklassniki.ru 1 0,1
paypal.com 0,7 0,7
planeta-online.tv 1,9 1,5
play.google.com 2,6 2,5
pulscen.ru 1,3 0,6
qq.com 2 0,9
rabota.ru 1,4 0,5
rbc.ru 0,9 0,5
rg.ru 2,5 1,8
ria.ru 9,4 1,3
ru.msn.com 2,2 0,8
ru.yahoo.com 1,1 1,1
rutracker.org 0,4 0,3
samara.hh.ru 0,7 0,3
sberbank.ru 1 0,4
slando.ru 2,1 0,8
smi2.ru 1,7 1,9
sotmarket.ru 3,4 0,4
spishy.ru 1 2
sport-express.ru 2,9 0,8
superjob.ru 1,1 1,6
taobao.com 2,6 0,1
thepiratebay.se 0,1 1,6
tiu.ru 2,6 0,6
topface.com 1,5 0,05
twitter.com 1 0,7
ulyanovsk.farpost.ru 0,8 0,5
utro.ru 2,6 1,3
vesti.ru 2,3 1,4
vk.com 0,6 0,1
wikipedia.org 0,2 0,2
wildberries.ru 2,1 1
woman.ru 3,4 2,6
wordpress.com 0,6 0,2
yandex.ru 1 0,5
youtube.com 1,4 1,3
zona.ru 5,5 3,7

Самыми жирными оказались сайты с большим количеством текста — ria.ru, kp.ru. К ним в догонку идут сайты магазинов. В 300Кб укладываются трекеры (thepiratebay.se весит меньше ста), так же поисковики и некоторые соцсети.

Выводы

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

Лучше всего посмотреть что не так с Page Speed.

Основные пункты, про которые вы можете прочесть в любой статье по оптимизации:

  • Оптимизируйте изображения. Они как правило составляют огромную весовую часть сайта.
  • Сжимайте CSS и JS. Иногда получается скукожить раза в два.
  • Используйте Ajax, для подзагрузки страниц и элементов, а не перезагрузки
  • Кешируйте всё, что сможете. Главное, следите за нагрузкой на сервер.
  • Включите Gzip сжатие
  • Используйте отложенную загрузку изображений. Я на своих сайтах подключил Lazyload. Рекомендую, особенно на мобильных сайтах или мобильных версиях сайта.
  • Css-спрайты. Группируйте картинки. И клиент, и сервер будут рады.
  • Убирайте всё лишнее! Не ставьте тяжелые Flash приколюхи, онлайн радио и автоплей видеороликов без необходимости.

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

Записки Web-разработчика

По моему уже все знают, что стандартный размер сайта в рунете почему-то 1000px. “Чтобы за монитор не вылезал”. А как насчет размера сайта равного 960px или 980px? Плохо, мало, некрасиво…

Почему? А вы никогда не задумывались, почему большинство сайтов рунета, как “профессиональных”, так и не очень, выглядят настолько убого? Вот смотришь — и вроде бы все хорошо, цвета, картинки, текст. Но композиция, как говориться, разваливается. На него неприятно смотреть. Даже не на уровне осознания, а как-то неудобно, глаз, как говорится, спотыкается. Тут даже не в размере сайта. Размер сайта тут не причем, дело в другом, о том и эта статья.

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

Складывается впечатление, что мало кому их этих лагерей приходило в голову, что веб дизайн тоже можно строить по классическим канонам. Еще совсем недавно только появилась возможность подгружать шрифты на сайт, задавать нужные расстояния и другие проверенные временем вещи, присущие классической типографике и дизайну уже более 500 лет (поправьте, если не точен).

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

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

Золотое сечение

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

Ключом для перехода от плохого дизайна к хорошему можно назвать числе 1,618033988749895… и далее. Обычно для удобства используют число 1,6, 1,618 или 1,62. Это и есть золотая пропорция, золотое сечение.

Так почему же не применять его в веб дизайне? Применяют и очень успешно. Но не в России. Пример вычислений касательно разлиновки веб сайта вы видите ниже.

Объясняю пример. Вы хотите создать сайт с фиксированной шириной 960px. Мало? Об этих ширинах потом. Если мы делаем блог, то сайдбар у нас располагается справа, а контент слева. Размеры области контента, относительно сайдбара считаются так:

  1. Cначала сосчитаейте ширину области контента. Про правилу золотого сечения она должна быть на 1,6 меньше, чем ширина сайта (960px). Поделим 960 на 1,62, получим 593px.
  2. Отнимите от общей ширины получившуюся: 960px – 593px = 367px.

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

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

Несмотря на то, что дизайн этого блога неправилен с точки зрения сечения, пользователи не замечают этого, потому что они интуитивно делят страницу на два блока: 583px (630px – 31px – 31px) и 299px (330px – 31px). Причина в пассивной игре боковых полей (линии по 31 px), они обеспечивают пропорциональные промежутки и отступы от края до контента.

И хотя отношение между областями сайта равно 630 : 330 px ≈ 1.91 (не 1.62), а отношение между размерами текстовой области и меню равно 583 : 299px ≈ 1.92 (не 1.62), дизайн смотрится хорошо. Это достигается благодаря балансу — все элементы страницы имеют одинаковые пропорции 1,92. Отсюда и создается ощущение гармонии и эстетичности.

Также надо заметить, что такие отступы от краев, равны 31px не случайны еще по одной причине. Как я уже упоминал ранее, в записи про создание этого сайта существуют стандарты, по которым наиболее удобная для чтения длинна строки находится между 50–80символами текста в строке. Однако на данном сайте длина строки примерно равна 100 символам. Такой размер тоже вписывается в общую пропорциональную концепцию размеров сайта.

Посчитаем. Золотое сечение равно 1,62, на этом сайте пропорция равно 1,92. Соответственно 1,92/1,62=1,18. Округлим до 1,20. Умножаем: 80*1,2 = 95. Таким образом все укладывается в рамки законов природы. Для грубых набросков вы можете использовать отношение 5 : 3.

Илон Маск рекомендует:  Улучшите ваши формы с помощью HTML5!

Правило трети

Изначально правило трети использовалось как упрощенное понимание золотого сечения и понимания пропорции и композиции. Использование правила трети позволит вам быстро составить композицию не имея на руках калькулятора.

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

Применение правила трети возможно и в отношении к размерам сайта. Вернемся к нашим 960px, при этом его высота может варьироваться от 750px до 950px. Произведем следующие действия:

  1. Разделите ширину на 3, получим 320px
  2. Разделите среднюю высоту вашей страницы на 3 ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
  3. Следовательно каждый прямоугольник должен быть размером 320px × 285px.
  4. Постройте сетку из девяти квадратов, 3 × 3

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

Пример можно увидеть, посмотрев на сайт demandware.com. Рассматривая этот сайт можно заметить, что актуальные данные расположены в точках пересечения. Также стоит отметить, что нижние блоки информации располагаются в соответствии с правилом трети и расположены строго под нижней линией, что соотносит пропорции размеров сайта как 2 : 1.

Заключение

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как узнать размер элемента сайта в пикселях

Как узнать размер элемента сайта в пикселях

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

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


Пусть необходимо поместить баннер с рекламой в место блога, указанное красной стрелкой на рис. 1. Ширина баннера должна быть равной ширине элемента, показанного синей стрелкой.

Для измерения расстояний в браузере Google Chrome имеется расширение MeasureIt — «Линейка». Установить его можно по следующей ссылке, скопировав ее и поместив в строку браузера.

После установки расширения в правом верхнем углу браузера появляется соответствующий значок (рис. 2)

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

Нас интересует горизонтальный размер 300 пикселей. Для выхода из режима измерения еще раз нажимаем на значок с линейкой или на клавишу . Далее в панели управления сайтом выбираем виджет «Текст», указываем в нем место расположения и размеры баннера (ширина баннера принимается равной 302 пикселя, чтобы учесть толщину границы области величиной в один пиксель),

перемещаем виджет в нужное место сайдбара, нажимаем кнопку «Сохранить», переходим на сайт и обновляем изображение. Полученный результат приведен на рис. 5.

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

Надеюсь материал статьи будет Вам полезен! Удачи!

Как определить свой размер одежды

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

Антропометрические измерения дают возможность определять уровень и особенности физического развития, степень его соответствия полу и возрасту, имеющиеся отклонения, а также уровень улучшения физического развития под воздействием занятий физическими упражнениями и различными видами спорта. Таким образом, антропометрия включает в себя определение длины, окружностей и других показателей. Для чего это нужно человеку в жизни? С помощью антропометрических показателей можно контролировать динамику физического развития, эффективность физических упражнений. Также можно научится определять размер одежды. Большинство современных расчетно-графических методов конструирования одежды предусматривает в качестве исходных данных сведения о размерах тела (размерную характеристику фигуры) человека и прибавки (припуски) на свободное облегание. Размер — это буквенный либо цифровой код, соответствующий определённым линейным параметрам человеческого тела, или той его части, для которой предназначена данная деталь одежды, аксессуар либо обувь. Как правило, размер наносится на бирку, прикрепленную к одежде или аксессуару, а в случае обуви он может быть нанесён на подошву или стельку.

Какие антропометрические показатели используются для определения размера одежды и обуви, как правильно их измерить

Рост. Для того чтобы верно измерить свой рост, вам будет необходима посторонняя помощь, линейка и карандаш. Становитесь босиком спиной к стене, стараясь не горбиться. Линейка кладется на голову, проводится прямая линия от макушки до стены, где и делается пометка карандашом. Теперь при помощи линейки или метра высчитываете расстояние от пола до метки.

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

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

Обхват бедер. Измеряется примерно на 15-18 сантиметров ниже уровня талии по самым выступающим точкам ягодиц.

Размер обуви.Размер ноги человека определяется двумя параметрами — длиной и шириной стопы.Определяем свои размеры. Первое — измерим длину стопы. Делать это рекомендуется в конце дня, т.к. ноги растаптываются и становятся больше. Встаньте на лист бумаги и обведите ногу карандашом. Для определения длины стопы измерьте расстояние между самыми удаленными точками на чертеже. Измерьте обе ноги и выберите большую длину. Округлите полученный результат до 5 мм и найдите свой размер в таблице.

Таблица 1. Определяем размер одежды

Таблица № 2 Определяем размер ноги

Таблица № 3 Определяем размер обуви

Изменение размера страницы, размера бумаги и ориентации страницы в Publisher

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

Под размером страницы понимается размер области, занимаемой публикацией. Размер бумаги или листа — это размер бумаги, используемой при печати.

Под ориентацией страницы подразумевается книжное (вертикальное) или альбомное (горизонтальное) расположение публикации. Дополнительные сведения об изменении ориентации страницы см. в разделе Изменение ориентации страницы.

В этой статье

Размер страницы, размер бумаги и ориентация

Любой макет публикации, выбранный в Publisher, включает часто используемые для этого типа публикации размер и ориентацию страницы. Вы можете изменить их и просмотреть результат в группе Параметры страницы на вкладке Макет страницы. Кроме того, можно задать эти параметры и просмотреть результат изменения, а также взаимосвязь между размером страницы и бумаги на вкладке Печать в представлении Backstage. Дополнительные сведения о вкладке Печать см. в статье Печать.

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

Размера страницы, размер бумаги и ориентация для отдельных страниц

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

Изменение размера страницы

Эта процедура позволяет задать размер публикации. Например, этот метод можно использовать для выбора размера печатной публикации, если требуется напечатать афишу размером 55,88 х 86,36 см — независимо от того, как она будет печататься на принтере: на одном большом листе или на нескольких перекрывающихся листах (фрагментах).

Примечание: Вы можете создавать публикации размером до 6 х 6 м.

Выбор размера страницы

Откройте вкладку Макет страницы.

В группе Параметры страницы нажмите кнопку Размер и щелкните значок, который обозначает требуемый размер страницы. Например, щелкните Letter (книжная) 21,59 x 27,94 см. Если вы не видите нужный размер, щелкните Дополнительные готовые размеры страниц или выберите Создать новый размер страницы, чтобы создать нестандартный размер страницы. Дополнительные сведения о создании нестандартных размеров страниц см. в статье Диалоговое окно «Пользовательский размер страницы».

Создание пользовательского размера страницы

Откройте вкладку Макет страницы.

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

Изменение размера бумаги

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

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

В меню Файл выберите Настройка печати.

В диалоговом окне Настройка печати в группе Бумага выберите нужное значение в списке Размер.

Изменение ориентации страницы

Вы можете изменять ориентацию страницы с книжной на альбомную или наоборот.

Откройте вкладку Макет страницы.

В группе Параметры страницы в раскрывающемся меню Ориентация выберите вариант Книжная или Альбомная.

Изменение единиц измерения линейки

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

В меню Файл последовательно выберите пункты Параметры, Дополнительно и прокрутите содержимое окна до раздела параметров Отображение. Найдите пункт Единица измерения и измените единицы измерения.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL