Как сделать таблицу в мьюзе
Как вставить таблицу на сайт (из Excel в Muse)
Как вставить таблицу на сайт (из Excel в Adobe Muse)
Как вставить таблицу на сайт, составленную в программе Microsoft Excel на сайт, созданный в программе Adobe Muse с помощью онлайн сервиса по генерации таблиц.
Существует много способов преобразования и генерации HTML кода таблиц. Например, можно просто взять код таблицы прямо из файла Excel, предварительно сохранив файл как веб-страницу. Но такой код получается довольно громоздким и “грязным”.
Данный способ и сервис, который я предлагаю использовать для создания таблицы, позволит Вам взять таблицу из Excel и получить чистый и красивый код таблицы для Вашего сайта.
Смотрите это видео как вставить таблицу на сайт в Adobe Muse:
Как вставить таблицу на сайт. Подготовка.
В этом видеоуроке мы рассмотрим создание таблицы на сайте в программе Adobe Muse, точнее не создание больше, а, скорее всего, добавление таблицы на сайт в программе Adobe Muse. Таблица у меня подготовлена в программе Excel, и я хочу, например, вставить ее на свой сайт. Для этого мы будем использовать сервис генерации таблиц tablesgenerator.com. И сделаем это следующим образом.
Как вставить таблицу на сайт. Копирование таблицы на сервис.
Мы просто копируем таблицу, которую вы создали в программе Excel. Здесь вы можете не настраивать ни шрифты, ни размер шрифтом, это мы все будем делать на сайте. Просто выделяете таблицу, нажимаете «Копировать» и переходите на сайт. Здесь заходите в меню «File» и выбираете опцию «Paste table data». Как раз сюда вы и сможете вставить таблицу из программы Microsoft Excel. Нажимаем здесь «Вставить». Вставляется вот такой текст. И нажимаем кнопку «Load».
Все, наша таблица загружена на данный сервис. И здесь мы можем с ней сделать некоторые настройки.
Как вставить таблицу на сайт. Дизайн таблицы и генерация кода.
Давайте зайдем в раздел «Theme» и выберем ей какую-нибудь подходящую тему, например, я выберу вот эту синию из предложенных. И поставлю здесь границы таблицы, например, вот такие разделения колонок и строк. А также выберу здесь подсветку, например, вот эту – строки таблицы через одну будут подсвечиваться другим цветом. Пролистаю вверх, нажимаю «Закрыть», и таблица у нас достаточно уже хорошо выглядит.
Можем настроить здесь еще шрифты, например, выбрать «Verdana» или давайте «Tahoma». И выбрать размер шрифта, например, я поставлю 16. Или зайти в меню «Table» и немного добавить в таблицу «воздуха» так называемого, для того чтобы она лучше читалась и смотрелась. Выделим шапку и поставим здесь, например, жирный шрифт для шапки таблицы. Вот такая таблица у нас получилась довольно-таки быстро. Давайте еще выставим по центру цены и сделаем их тоже жирными. Далее нажимаем кнопку «Generate», копируем таблицу в буфер обмена. Вот этот код у нас скопируется, который расположен ниже, нажимаем «Copy to clipboard» и переходим в программу Adobe Muse.
Как вставить таблицу на сайт. Вставка таблицы в Muse. Просмотр.
Здесь у нас есть уже вот такая таблица, я ее делал для примера, для того, чтобы показать вам. Давайте сделаем новую страницу. Здесь нажимаем правую кнопку мыши и «Вставить». Скопированный код вставляется у нас в виде HTML фрейма. Здесь нам необходимо его немного растянуть. Для того, чтобы он лучше смотрелся на сайте, и разместим его по центру.
Как вы видите, сейчас в этом прямоугольном фрейме сейчас наша таблица прилипла к левому краю. Давайте зайдем в режим «Просмотра» и мы увидим, что наша таблица расположена не по центру сайта.
Как вставить таблицу на сайт. Центрирование таблицы.
Для того, чтобы расположить по центру данного прямоугольного фрейма нам необходимо выполнить один из двух вариантов.
Вариант 1.
Мы заходим снова на сайт, где мы только что сгенерировали таблицу. Идем вниз. И здесь есть вот такая закладка «Extra options», нажимаем на нее и выбираем вот эту функцию «Center table horizontally», ставим здесь «птичку» и выбираем данную опцию. И теперь еще раз нажимаем «Generate», еще раз копируем таблицу в буфер обмена, нажав вот эту кнопку. Заходим в программу Adobe Muse и снова нажимаем здесь вставить. Давайте теперь снова растянем данную таблицу немного шире. И теперь вы видите, что таблица расположилась ровно по центру данного прямоугольного фрейма. В прошлый раз эта таблица была расположена у нас по левому краю.
Вариант 2.
Теперь в режиме «Просмотр» у нас будет две таблицы, которые расположены ровно по центру страницы в браузере.
Как вставить таблицу на сайт. Сохранение и дальнейшее редактирование.
Для того, чтобы в дальнейшем нам снова редактировать таблицу и не нужно было постоянно делать снова такой дизайн каждый раз, мы можем прямо на сервисе здесь на сайте сохранить нашу. Нажимаем «File» и нажимаем «Save table». Выбираем здесь имя нашей таблицы, которое вы пожелаете и нажимаете «Download». Таблица сохраняется у нас в формате «.TGN». я сохранил ее на рабочий стол.
В дальнейшем, если нам нужно будет снова сгенерировать код данной таблицы или поправить ее, то мы нажимаем «File», далее «Load table» и выбираем файл, который сохранили. Я выбираю этот файл, нажимаю «Load». И таблица у нас снова загружается для редактирования. Здесь мы можем еще добавлять еще строки таблицы, колонки таблицы и редактировать текст. Затем снова нажимаете «Generate», генерируете новый код, копируете его в буфер обмена и вставляете на сайт в программе Adobe Muse.
Вот таким вот образом вы можете создавать и размещать таблицы на сайтах, которые вы делаете в программе Adobe Muse.
Все ссылки на сайты вы найдете под этим видео. Если вам понравился мой видеоурок, ставьте лайки и пишите комментарии внизу. Подписывайтесь на мой канал и до встречи в следующих видеоуроках!
Гибкая таблица для сайта в 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. Если у вас остались какие-то вопросы, задавайте их в комментариях, ставьте лайк к данному видео и смотрите следующие и предыдущие видеоуроки на канале.
Adobe Muse уроки | 35. Как вставить таблицу из Excel в Muse
Ссылка – бесплатно 3 шаблона и 49 виджетов для Adobe Muse, подписка на рассылку. Об этом видео: Это видео…. как нарисовать таблицу в muse
106 Replies to “Adobe Muse уроки | 35. Как вставить таблицу из Excel в Muse”
+Alex Redman Благодарю.)
Смотрел ваши ролики раньше, но не было ничего про таблицы да и не нужны они были ранее. А сегодня понадобились. Захожу в ютуб и вот те раз, как по заказу. «Совпадение? Не думаю» )))
+Maholot Да, случайности не случайны:) Рад что попал «в Яблочко»
Полезное видео, спасибо!
+Сергей Чернов Пожалуйста. 🙂 Рад, что этот видеоурок оказался полезным. 🙂
индексируются ли такие таблицы
+Андрей. Лихонин Да, В результате преобразования — Вы получаете чистый классический код таблицы в html. Посмотрите на сгенерированный сервисом код таблицы — там нет совершенно ничего лишнего.
Большое вам человеческое спасибо за ваши труды.
+Виталий Ш Большое пожалуйста. 🙂
Отличный сервис и видео) жду еще ) от души)
+Too ❑ Young Благодарю за отзыв, оставайтесь на видеоканале, следите за выпуском новых видеоуроков.
извините за вопрос не по теме…можно ли создать сайт с помощью muse типа avito ru…. подскажите как сделать такую страницу
+Tiko Torosyan Авито, это целый огромный сервис с регистрацией и размещением объявлений. Думаю в muse такое сделать не получится.
+Tiko Torosyan Да. Скорее всего нужен сайт с использованием базы данных MySql и функций PHP. Adobe Muse генерирует код просто в HTML5.
кфы..))
большое спасибо ….
твои уроки очень помоглимне
+Tiko Torosyan Пожалуйста.:) Рад что мои уроки востребованы и полезны. 🙂
Привет! Хотел напрямую из экселя вытащить html, но muse его не воспринимает, ты не знаешь, почему так?
+Nikita Sirichenko Здравствуйте. Напрямую можно. Просто что-то неправильно делаете. У меня вот получилось. Сохранять файл нужно как веб страницу, затем скопировать стили из head и код таблицы из body Ссылка
+Nikita Sirichenko У меня Windows. Я сохранял именно как веб-страницу, но можно использовать и публикацию.
P.S.: Способ из моего видеоурока с использованием сервиса генерации таблиц — дает намного более чистый код, чем генерирует Excel.
Здравствуйте, вы не подскажите, а что с сайтом Ссылка, а то не запускается? И на этой странице пишется, что страница не может быть отражена. Прошу прощения, если не по теме. И спасибо за уроки интересы.
+moscow9494 Здравствуйте. Рад что мои уроки Вам интересны.
Данный сайт работает, попробуйте зайти еще раз.
+Adobe Muse уроки я использовал два браузера и вот, что мне пишет: Ссылка и Ссылка может сейчас сайт на перезапуске и поэтому не доступен?
+moscow9494 Возможно и так. Не могу Вам помочь, я не являюсь владельцем и тех.поддержкой данного сайта. Попробуйте зайти позже, когда проблема доступа будет устранена.
Добрый день!
Подскажите, что может быть. Ставлю на страницу несколько таблиц, всё выровнено. Когда делаю Просмотр или Просмотр в веб-браузере, то все таблицы съезжают, меняется расстояние между ними.
И ещё, чтобы два раза не вставать… Поставил панельку кнопок соцсетей от pluso.ru. В Опере её почему-то не видно, а в ИЕ показывает.
Спасибо.
Огромное спасибо! Перепробовал до этого кучу глючных сервисов, здесь всё просто, удобно и адаптивно
+romis rom Пожалуйста! )
Дмитрий, чем эта таблица отличается от загруженного на сайт скриншота таблицы? Насколько я понял,в браузере заказчик не может с ней работать, она на активная?
+Евгений Демидов Отличается:
1. Скриншот — это картинка, картинка дольше грузится при открытии страницы сайта и при отключении картинок в браузере, не будет отображаться на сайте.Таблица html загружается гораздо быстрее, т.к. это просто код и будет отображаться даже при выключенных картинках.
2. Все содержимое таблицы индексируется поисковиками, т.к. содержимое таблицы это текст. Содержимое же скриншота (картинки) — поисковиками не индексируется.
Да, таблица не интерактивна. Однако посетителю сайта иногда очень важен 1-й пункт, особенно при отключенных картинках в браузере.
+Adobe Muse уроки Понял, спасибо! А по поводу редактирования/заполнения насколько я понял в Muse вообще такую возможность нельзя реализовать?
+Евгений Демидов Стандартными инструментами Muse — нет. Но может быть кто-то из народных умельцев уже создал удобный виджет по вашему вопросу. Нужно искать, или создать самому, если есть такие навыки. Официально для Muse есть простенькая админка (inbrowserediting), правда пока не знаю как поведет себя такая таблица в ней.
Не хочет таблица вставляться, код вставляет и все, что делать?
Все, разобрался, супер теперь на неделю меньше работать, спасибо большое.
+Дмитрий Лавров Вот и отлично! Рад, что у Вас получилось. Оставайтесь на видеоканале, следите за выпуском новых видеоуроков, чтобы и в будущем посмотрев одно короткое обучающее видео сэкономить кучу своего драгоценного времени.:)
Еще 1 маленький вопрос, как регулировать высоту и ширину таблицы?
+Alex Redman Высоту и ширину таблицы настраивайте на самом сервисе, еще до вставки таблицы в Muse. Или, если разбираетесь в коде HTML — редактируйте вручную.
+Adobe Muse уроки спасибо, просто в видио об этом ни слова, хотя важный момент.
+Alex Redman Да, благодарю. Учтем в будущих видеоуроках, чтобы сделать их еще более полными и еще более информативными.
Как сделать, что бы строки подсвечивались когда наводишь на строку, и так и сяк пробую не получается, может где виджет валяется или не шибко дорого продаётся, не подскажете?
+Dmitrij Jakovlev Используйте в качестве фона для строки — пустой прямоугольник, с заливкой в состоянии «курсор над кнопкой»
Спасибо! Наконец-то нашел подходящий под свои задачи видео урок!
Вот и здорово! Отлично! Я рад, что мой урок в очередной раз пригодился.
Благодарю за отзыв. )
Спапсибо. Но… Честно говоря… почему этого функционала нет в Мьюс. Или хотя бы всё в иллюстраторе или индезайне а потом уже в Мьюс. Это точно продукт Адоуб? Даже Скрибус имеет кривые, но всёже инструменты формирования нормальной таблицы, без постороннего софта и танцев с бубном.
А если нужен свой шрифт? и свои цвета?
… Есть какойто виджет — на него е было ещё русского видео… неюзибельный в той мере как всё остальное в мьюс, но хоть что-то, там даже ранжирование есть по колонке при клике… но всё равно костыль.
Увы. Пока только так или с помощью специальных виджетов.
Честно говоря не знаю, почему разработчики программы Adobe Muse до сих пор не сделали в ней удобный инструмент для создания таблиц.
Подскажите, плиз, не отображаются вертикальные границы ячеек в браузере. в Muse все отображается, если запихать код таблицы в отдельный файл html-отображаются. А при просмотре в браузере сайта — нет. В чем может быть дело?
Решил сам: добавил во все стили: border-color:black; border-style:solid; border-width:1px; Указаный выше сервис почему то не изменяет некоторые параметры: все равно оставляет шрифт 14, Ариал, цвет границ не прописывает. Но все равно спасибо, небольшая доработка ручками и «вуаля». Спасибо!
Вот и отлично. Рад, что справились без посторонней помощи.:)
Навык умения читать и править код html вручную никогда не будет помехой в Adobe Muse, а очень даже существенным плюсом и дополнением в определенных ситуациях.
Легко, но это такой «полуавтоматический» виджет. У него есть настройки (цвет текста, фона, размер), но сами данные таблицы нужно менять редактируя код html.
Здравствуйте.Подскажите, мне нужна таблица с поиском, есть такие?
Здравствуйте. У меня такой нету, стандартными средствами Muse такую таблицу создать не получится. Для поиска по данной таблице и необходимой информации на странице сайта можно использовать стандартный поиск браузера (например клавиша F3 в google chrome).
Если нужен какой-то особенный поиск и сортировка данных по таблице, поищите или закажите специальный виджет, возможно у кого-нибудь из разработчиков уже есть такой, а некоторые делают на заказ.
Я рад, что Вам понравилось! 🙂
А можно вопрос? Предположим у нас есть очень длинная страница. Где-то из середины я удаляю какой-то контент и появляется белое пустое пространство. Можно ли как-то его вырезать или нужно будет сдвигать все, что ниже этого пространства вверх? Это очень неудобно зачастую, и есть большая вероятность сдвинуть криво…
Нужно будет сдвигать. В последних версиях Adobe Muse есть очень удобная для этого функция, позволяющая двигать весь контент расположенный ниже одного из выделенных элементов сайта.
ну, уже что-то спасибо!
Добрый вечер! Подскажите пожалуйста, реально ли вставить виджет Excel или просто таблицу (как в Вашем видео), в которую можно было бы вносить изменения напрямую с сайта несколькими людьми?
Спасибо, Дмитрий! Это было классно! Но небольшую таблицу легко и на HTML написать.
Благодарю за отзыв. Да, можно написать таблицу самому в вставить в Adobe Muse, если хотя бы на базовом уровне знать Html.
Сказать что полезно — ничего не сказать. Просто супер
Благодарю за отзыв, Руслан, очень приятно. Рад что урок оказался настолько полезным.
пробовал недавно, не сработало, не смотря на настройки которые вводил, толку ноль. В мьюз переносит только сам текст и все(
Здравствуйте. Если у Вас не получилось, это не значит, что не работает. Возможно Вы просто не настроили дизайн таблицы. По-умолчанию в таблице не настроены стили (заливка, обводка). Нужно либо выбрать подходящую Вам тему оформления из предложенных, либо самому настроить цвета заливки и обводки.