Перейти к содержимому
  • Что такое сетка сайта

       (125 отзывов)

    Евгений Зубов
    • 10 4,25,6,20,3,26,27,28,29 4,2,31,6,20,32,3 https://creatura.club/uploads/monthly_2015_12/2.1.6_%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D1%81%D0%B5%D1%82%D0%BA%D0%B0.mp4.aa154633f4d506e796d1553eb6ecc70b.mp4 8 До 10 минут display: none; https://creatura.club/uploads/ Средняя сложность display: none;
      1. Пройдите тестирование
      2. Задайте вопросы в обсуждениях (если есть)
      3. Сдайте задание и оцените урок
    • Какое максимальное количество столбцов в сетке сайта?




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




    • Какое из утверждений о среднике верно?




    • Какая минимальная ширина одного столбца в сетке?




    • В каких случаях оправдано использование наложение сетки?




    • В этом видео уроке речь пойдет о «Сетке сайта». Сетка сайта является основой при создании сайта. Это один из самых первых и самых важных вспомогательных инструментов. В программе Adobe Muse сетка представляет собой набор столбцов, на которые разбивается ширина страницы, и позволяет нам выравнивать и очень точно размещать элементы на страницах сайта. Каждый новый сайт в программе Adobe Muse начинается с окна настроек. Давайте создадим новый сайт.

      Как вы, наверное, уже догадались, речь пойдет о настройке таких параметров, как количество столбцов и величина средника. Естественно, мы не сможем не затронуть понятие максимальной ширины страницы. Именно эти параметры отвечают за настройку сетки. Кстати, если у вас сайт уже создан (допустим, сайт у вас уже создан), настроить сетку сайта вы всегда сможете, зайдя в меню «Файл» – «Свойства сайта». Мы попадаем, в принципе, в такие же настройки. Здесь у нас есть и столбы, и средники, и максимальная ширина страницы.

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

      Далее, по сути дела, сетка у нас уже кое-как, но настроена. Но она состоит всего из одного столбца и в ней отсутствует средник. Средник отключен, потому что столбец всего один. Средник, как вы помните – это расстояние между столбцами на странице. Давайте для наглядности перейдем в режим «Дизайна страницы сайта». Закрываем «Свойства сайта», нажимаем «ОК», кликаем 2 раза на миниатюре страницы, заходим в меню «Файл» – «Свойства сайта». Кстати, здесь, в «Свойствах сайта» мы устанавливаем сетку для всех будущих страниц сайта. Давайте сейчас уберем поля. И давайте изменим количество столбцов на 2. Сразу видим, что вся ширина сайта разделилась на 2 равные части, между которыми есть небольшое расстояние, которое называется средник. Значение величины средника в пикселях мы можем так же редактировать в «Свойствах сайта», после того, как столбцов у нас стало 2 и более.

      Теперь, как вы видите, наша сетка состоит из 2-х столбцов одинаковой ширины и средника в 20 пикселей. Если мы изменим количество столбцов на 3, то мы получим сетку из 3-х столбцов и уже 2-х средников по 20 пикселей.

      Далее все то же самое. Увеличиваем количество столбцов и автоматически между ними добавляются средники. Каждый средник по 20 пикселей. Следует заметить, что все столбцы создаются одинаковой ширины. Точно так же, как и средники все одинаковой ширины. Притом, если мы сейчас начнем изменять размер средника, то программа автоматически рассчитает и изменит ширину всех столбцов. Вы видите, что ширина столбцов уменьшается, а ширина средника при этом увеличивается. Все происходит равномерно. Если выставим средник равным 0 сейчас, то все столбцы сетки как бы примыкают друг к другу, то есть, расстояние между столбцами как бы равно 0. Мы можем добавлять столбцы до тех пор, пока их ширина не достигнет минимальной ширины в 10 пикселей.

      Как вы видите, максимальная ширина страницы у нас 960, средник у нас 0 и столбцов – 96. То есть каждый столбец у нас занимает ровно 10 пикселей. Но оптимально для сайта размером 960 пикселей использовать сетку, например, из 12 столбцов. При ширине сайта 960 пикселей каждый столбец получается шириной по 80 пикселей. Это при том, если средник равен 0. Если мы средник начнем выставлять больше, то столбцы наши тоже уменьшаются.

      Итак, мы настраивали сетку сайта для всех страниц сайта в целом. Мы настраивали сетку через «Свойства сайта». Мы заходили «Файл» – «Свойства сайта». Также мы можем настраивать индивидуально сетку для каждой страницы через «Свойства страницы». Для этого нам нужно зайти в меню «Страница» – «Свойства страницы». Если мы настраиваем сетку в «Свойствах страницы», то эти свойства применяются только к этой странице. При создании новых страниц к ним будет применяться сетка, которая настроена в «Свойствах сайта». Также мы можем вернуть свойства сетки к этой странице, чтобы они стали такими же, как в «Свойствах сайта» прописано. Мы нажимаем «Сброс».

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

      Второй пункт, который отвечает за сетку – это «Наложение сетки». Сейчас данный пункт отключен, если его включить, то каждый столбец у нас закрашивается вот таким полупрозрачным розовым цветом. Здесь, в принципе, все просто: если пункт отключен, здесь галочки нет; если пункт включен (вот включен пункт «Наложение сетки»), то стоит вот такая галочка напротив него. Отключаем пункт наложения сетки. Хотя, пускай пока останется. Сейчас я вам покажу «Файл» – «Свойства сайта». Смотрите: пункт «Отображение сетки» удобен при использовании сетки со средниками. Когда у нас сетка настроена таким образом, что у нас есть и столбцы, и средники между ними, то использование параметра «Наложение сетки», в принципе, удобно, поскольку их цвета отличаются. Если же мы не хотим использовать средники, то отображение сетки мало чем будет полезно, поскольку все столбцы сольются просто в один розовый цвет, в заливку. Поэтому если мы работаем только со столбцами (нажимаю «ОК»), то нам лучше отключить наложение сетки и включить направляющие. Таким образом, нам будет удобно верстать сайт по данной сетке.

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

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

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

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


      Жалоба


    Отзывы пользователей


    Виталий Билецкий

    Коротко и ясно объяснил.

    Поделиться отзывом


    Ссылка на отзыв
    luckyman

    Спасибо! Урок понятен!

    Поделиться отзывом


    Ссылка на отзыв
    efimomi4

    Спасибо,все понятно

    Поделиться отзывом


    Ссылка на отзыв
    Даниил Князев

    Все понятно, спасибо

    Поделиться отзывом


    Ссылка на отзыв
    Руслан Гараев

    По сетке очень интересно и полезно!

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    samoylov.webmaster

    +

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    +

    Поделиться отзывом


    Ссылка на отзыв
    Харин Владислав

    Спасибо,понятно.

    Поделиться отзывом


    Ссылка на отзыв
    Ол Баданин

    Всё понятно. Узнал кое-что новое по применение сетки

    Поделиться отзывом


    Ссылка на отзыв
    adel

    четко! все не могла понять зачем наложение сетки этой розовой, а средники не использовала!

    Поделиться отзывом


    Ссылка на отзыв
    Гаврилова Ирина

    Хорошо и подробно.Благодарю!

    Поделиться отзывом


    Ссылка на отзыв
    Нэд Крубер

    Полезная иформация!

    Поделиться отзывом


    Ссылка на отзыв
    Егор Чукавин

    Отличный урок

    Поделиться отзывом


    Ссылка на отзыв
    Сергей Круглов

    Доступно,понятно.

    Поделиться отзывом


    Ссылка на отзыв

×