Гибкая таблица для сайта в Adobe Muse

Гибкая таблица для сайта в Adobe Muse

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

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

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

Гибкая таблица для сайта. Об уроке.

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

Гибкая таблица для сайта. Создаем таблицу (шапка).

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

Дизайн шапки таблицы.

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

Далее иду в настройки текста, делаю желтым цветом – это у нас будет шапка таблицы, выставляю шрифт «22» и ставлю «По центру». И, например, в моей таблице будет три столбца. Я делаю раз столбец, два столбец, три столбец. Три столбца. И растяну ее по ширине страницы. Например, первый столбец у меня будет называться «№ п/п», второй столбец будет называться «Наименование» и третий столбец будет называться «Цена». Вот у нас уже готовая шапка таблицы.

Обводка таблицы.

Что мы здесь еще должны сделать? Мы идем в «Обводка» и для всего виджета меню для шапки таблицы мы выставляем обводку. Я выберу цвет белый. Это то, что касается всей таблицы. Единственное, что мы уберем, так это уберем нижнюю линию обводки. Для этого мы разрывает этот значок и убираем вот здесь обводку снизу. При просмотре мы получим вот такую таблицу. У нас нет вот здесь разделений. Для того чтобы эти разделения появились, нам необходимо в программе Adobe Muse выделить отдельную ячейку и сделать обводку также для нее. Идем в «Обводка», выбираем белый цвет и для ячейки мы также разрываем этот значок в цепочке, и оставляем для ячейки только обводку слева и справа. Обводку сверху и снизу я убираю.

Давайте посмотрим, что у нас получилось. Нажимаем ctrl+shift+E, у нас появилась вот такая шапка таблицы. Нижнюю линию я специально не рисовал, поскольку дальше мы будем делать еще строки таблицы.

Гибкая таблица для сайта. Создаем таблицу (строки).

Идем снова в программу Adobe Muse и делаем заготовку для строк таблицы. Берем еще один виджет «Меню», выбираем «По горизонтали». Делаем все тоже самое, либо зажимаем клавишу alt и перетаскиваем виджет чуть-чуть ниже, таким образом, дублируя его. Давайте немножко подравняем то, что у меня получилось с шапкой, подровняем вот по этой линии.

И для строк таблицы у нас будет следующее. Мы выставляем текст шрифтом 18-ым и делаем его белым. Подровняем еще раз таблицу. И для строки таблицы сделаем ее чуть-чуть меньше, и посмотрим, что у нас получилось. Нажимаем ctrl+shift+E, смотрим. В принципе, нас все устраивает.

Теперь мы заходим снова в программу Adobe Muse и меняем в строчках надписи. Например, пишем в первом столбике «1», во втором «Имя 1» и в третьем «100» рублей. Теперь копируем эту строчку еще раз, зажимаем alt, перетягиваем вниз, получаем еще одну строку таблицы, повторяем еще раз. Здесь меняем значения: в первом столбике пишем «2» и «3», во втором «Имя2» и «Имя3» и можем поменять цену в третьем столбике, например, «1000» и «10000».

Вот у нас получилась такая табличка. Данная табличка уже будет хорошо адаптироваться в браузере. Если мы сейчас нажмем сочетание клавиш ctrl+shift+E для просмотра и начнем уменьшать ширину браузера, то наша таблица будет вот так адаптироваться уже сразу.

Гибкая таблица для сайта. Создаем таблицу (последняя строка).

Чтобы нам завершить таблицу, сделав последнюю линию, нам нужно выделить последнюю строку таблицы, зайти в «Обводка» и поставить здесь обводку также снизу. После того, как мы это сделаем, наша таблица будет завершена.

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

Гибкая таблица для сайта. Гибкость и точки остановки.

Для данной таблицы вы также можете делать точки остановки. Например, я сделаю еще одну точку остановки вот здесь. И, например, поменяю здесь размер шрифта таблицы: для «Наименование» поставлю не 22-ой шрифт, а 18-ый. Выделю строки таблицы и поставлю для них 14-ый шрифт, т. е. уменьшу все шрифты в таблице. Нажимаю ctrl+shift+E для просмотра, и теперь вы увидите, что при достижении браузера 660 пикселей, у нас поменяются шрифты.

Вот таким образом вы можете создавать гибкие таблицы в программе Adobe Muse. На этом, в принципе, все.

Гибкая таблица для сайта. Ячейка в две и более строк.

Есть еще один момент, который я хотел бы рассказать. Например, у вас не помещается длинное имя в строке таблицы. Напишу здесь «Длинное имя 3 из двух строчек». В точке остановки 960 пикселей все нормально, а при просмотре, если мы начинаем уменьшать такую таблицу, начинаем уменьшать ширину браузера, то эта строчка залазит на следующую ячейку таблицы.

Чтобы этого не происходило, мы идем в программе Adobe Muse и вот здесь, если мы зажмем клавишу shift и нажмем «enter», то у нас данное название перескочит на другую строчку. И будет название состоять из двух строчек. Теперь при просмотре в браузере у нас все должно быть нормально. У нас все будет уменьшаться и все будет прекрасно адаптироваться. Немного подравнять нужно таблицу, конечно, после этих всех изменений. Здесь мы еще раз ровняем. И получается вот такая табличка.

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

 

Автор видеоурока
Дмитрий Шаповалов