Самый простой способ создания меню и прайс-листов, даже без ежедневного опыта проектирования. За считанные минуты вы можете создать меню и прайс-листы, которые привлекут внимание вашего бизнеса, кафе, бара или ресторана!
Приложение для создания прайс-листов и меню содержит множество бесплатных ресурсов, включая миллионы изображений и сотни шаблонов, шрифтов и иконок, которые вы можете использовать совершенно бесплатно. Хотите что-нибудь темное, светлое, классическое или гладкое? Вы найдете это. Нужно переключиться с обеденного меню на меню? Это не может быть проще.
Настройте его по своему усмотрению и загрузите готовые к печати файлы высокого разрешения бесплатно!
Кроме того, приложение Прайс-лист и Конструктор меню поставляется с функциональностью Desygner, как описано Forbes, Product Hunt, Social Media Examiner, Entrepreneur и Terra. Присоединитесь к 4 миллионам + людям, которые используют Desygner для создания красивого контента быстро и бесплатно.
СОЗДАТЬ ЛЕГКО: ВСЕ мощные и простые в использовании инструменты редактирования, которые вам нужны, такие как изменение размера, изменение шрифта, изменение цвета, выравнивание, порядок слоев и многое другое. Редактируйте изображения, текст и значки любым способом.
Дизайн-стрим. Боль в глазах или верстка ресторанного меню
БЕСПЛАТНЫЕ ИЗОБРАЖЕНИЯ, ИКОНЫ И ШРИФТЫ: больше не платите за такие пакеты, как другие приложения, иногда до 10 долларов за изображение или значок. Прайс-лист и Конструктор меню приложение поставляется с бесплатным бесплатным бесплатным бесплатным контентом без забот о лицензиях!
ИМПОРТ СВОИХ СОБСТВЕННЫХ ИЗОБРАЖЕНИЙ: добавьте контент из рулона камеры, социальных сетей и накопителей.
СКАЧАТЬ БЕСПЛАТНО БЕСПЛАТНО! Все, что вы создаете с помощью приложения Прайс-лист и Конструктор меню, принадлежит вам, как вы пожелаете.
– SHARE разрабатывает электронную почту, Instagram, Facebook, Twitter и многое другое.
– СКАЧАТЬ как JPEG, PNG или PDF.
– ПЕЧАТЬ с вашего телефона за считанные секунды.
AUTOMAGICALLY RESIZE: вам не нужно обновлять, чтобы изменить размер и перераспределить Меню и прайс-листы. Измените размер файлов столько раз, сколько хотите.
ВОССТАНОВИТЬ ПРЕДЫДУЩИЕ ВЕРСИИ: «Хм . Думаю, вчера это выглядело лучше». Не беспокойтесь, просто получите доступ и верните лучшую версию своих Меню и прайс-листы.
МАГАЗИН И РЕДАКТИРОВАТЬ В ЛЮБОЕ ВРЕМЯ: Создайте столько Меню и прайс-листы сколько хотите, и сохраните их бесплатно. Они всегда будут доступны для редактирования с вашего компьютера и мобильного устройства с вашей учетной записью Desygner.
Хотите создать больше, чем просто Меню и прайс-листы? Попробуйте приложение Desygner. Он предлагает тысячи профессионально разработанных шаблонов, которые идеально подходят для всего, что вам когда-либо понадобится, включая сообщения в социальных сетях, объявления, презентации, открытки, флаеры и многое другое.
СМОТРЕТЬ КОРПОРАТИВНОЕ РЕШЕНИЕ? Ознакомьтесь с нашим центром корпоративного маркетинга на desygner.com/enterprise, который используется крупнейшими голубыми фишками в мире.
Источник: play.google.com
Горизонтальное меню для сайта на HTML+CSS
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию и их общее впечатление от вашего сайта.
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.
Пример использования html тегов для создания меню в коде ниже:
Стандартные CSS стили для горизонтального меню
ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ >a < text-decoration: none; /*убираем подчеркивание текста ссылок*/ >li < float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ >
Вёрстка простого макета
С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.
Настройка рабочего пространства в программе Adobe Photoshop
Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.
Открыв программу Adobe Photoshop, вы увидите примерно следующее:
- Строка главного меню;
- Панель параметров;
- Панель инструментов;
- Дополнительные панели.
Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:
Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.
Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:
При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:
Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:
Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.
Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:
Теперь кликните два раза по линейке и откройте вкладку Units . Имена оттенков удобно применять для черного black и белого цвета white , так как имя записать гораздо быстрее, чем шестнадцатеричный код. Все имена оттенков цветов можно посмотреть в этой таблице.
Свойства для блока
Для этого блока мы укажем ширину, а также отступы сверху, слева и справа:
У многих свойств вы будете видеть запись значений в следующих вариантах:
В первом случае мы указываем значения для каждой из четырех сторон, например, margin: 10px 12px 20px 15px; : 10px – отступ сверху, 12px – отступ справа, 20px – отступ снизу, 15px – отступ слева. Такую запись обычно используют когда отступы с каждой стороны разные.
Во втором случае записано три значения, например, margin: 10px 12px 20px; : 10px – отступ сверху, отступ справа и слева по 12px, 20px – отступ снизу. Такую запись удобно применять, когда значения справа и слева равны, а значения сверху и снизу различны. Значение auto используют, когда нужно, чтобы браузер автоматически расчитал отступы слева и справа.
В третьем случае используется два значения, например, margin: 10px 12px; : отступ сверху и снизу по 10px, отступ справа и слева по 12px. Если отступы сверху и снизу равны, и равны друг другу отступы справа и слева, то удобно записывать только два значения, как и в нашем примере.
В четвертом случае записано одно значение, например, margin: 10px; : отступ с каждой стороны равен 10px. Когда параметры со всех сторон равны, то удобно использовать именно такую запись.
Как измерить ширину или высоту элемента в программе Adobe Photoshop? Рассмотрим один из способов: берем инструмент Rectangular Marquee Tool (горячая клавиша M):
Затем выделяем область, например, нам нужно узнать отступ от верхнего края макета до начала содержимого, выделяем ее:
В панеле Info смотрим значения высоты H, или значение ширины W, если вам нужно узнать ширину элемента:
Переходим к заголовку
Здесь нам нужно указать размер, межстрочный интервал, тень и отступ снизу. Как прописывать первые два свойства вы уже знаете.
Для указания тени нам потребуется свойство text-shadow:
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
- Здесь 0 – отступ по оси X;
- 1px – отступ по оси Y;
- 0 – радиус размытия тени;
- rgba(0,0,0,0.3) – цвет тени. В данном случае мы используем формат RGBA, включающий альфа-канал, который задает прозрачность элементу. В скобках первые три значения отвечают за цвет в формате rgb, а последнее значение отвечает за прозрачность. Это значение записывается в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 – непрозрачности.
Как узнать параметры тени в программе Adobe Photoshop? Выбираем нужный слой в панели слоев, и кликаем по иконке ƒx:
Открывается окно Layer Style. В нем нужно выбрать вкладку Drop Shadow:
Здесь параметр Opacity отвечает за прозрачность, параметр Distance отвечает за отступ по оси Y, параметр Size отвечает за размытие, и параметр Angle отвечает за отступ по оси X. Так как наша тень падает под прямым углом, значит отступ по оси X будет равен нулю. Цвет тени можно узнать в квадратике напротив параметра Blend Mode:
Значение цвета в RGB формате и с альфа-каналом в данном случае будет выглядеть таким образом:
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
Осталось записать отступ снизу.
Если вам нужно записать значение для одной из четырех сторон, то используйте такую запись:
- margin-top – отступ сверху;
- margin-right – отступ справа;
- margin-bottom – отступ снизу;
- margin-left – отступ слева.
Так как нам нужно указать отступ снизу, то запишем margin-bottom: 30px;
В итоге получим такой код в файле style.css:
* < margin: 0; padding: 0; >body < background-color: #e35b5b; font-size: 16px; line-height: 24px; color: white; font-family: Arial; >div < width: 724px; margin: 43px auto 0; >h1
Первый абзац. Соседние селекторы
Запишем свойства для первого абзаца:
Теперь, если вы сохраните изменения и откроете файл index.html в браузере, то увидите, что данные свойства применились ко всем абзацам на странице. Так как нам нужно записать эти свойства только для первого абзаца, то в данном случае можно воспользоваться соседними селекторами. Что это такое? В шаблоне html, теги и
(берем именно первый абзац) идут друг за другом, а значит являются соседними тегами, в css соседние селекторы записываются таким образом:
Теперь, данные свойства будут применяться только к первому абзацу.
Последний абзац. Классы в CSS
Теперь давайте перейдем к последнему абзацу. Так как он тоже отличается от основного текста, то для него мы зададим класс. В html-шаблоне запишите для последнего абзаца атрибут class со значением last-p . Название класса, также как и идентификатора должно начинаться с букв латинского алфавита:
В CSS классы записываются таким образом:
p.last-p
Эти свойства будут работать только для последнего абзаца в нашем шаблоне.
В отличии от идентификаторов, класс с определенным значением вы можете использовать на странице сколько угодно раз.
Свойство text-align со значением right применяется в том случае, когда нужно выровнять текст по правому краю. Также можно использовать и другие значения, например, text-align: center; в этом случае текст будет выравниваться по центру блока.
Остальные абзацы
Для остальных абзацев запишем следующее свойство:
Остальные свойства: цвет, семейство шрифтов, размер, межстрочный интервал данный тег будет наследовать от родительского элемента, т.е. тега .
Если мы уменьшим окно браузера, то увидим, что содержимое прибито по бокам к краям окна. Чтобы это исправить, добавим для селектора div внутренние отступы:
Группирование селекторов
Если несколько элементов веб-страницы содержат одинаковые свойства с одинаковыми значениями, например, как в нашем примере, заголовок и последний абзац имеют общее свойство – это тень, то вы можете сгруппировать эти селекторы, записав их через запятую:
h1,p.last-p
Не забудьте удалить свойства у отдельно взятых элементов, в нашем случае нужно удалить тень у селекторов h1 и p.last-p .
Видео к уроку
Часть 1
Часть 2
Источник: psd-html-css.ru