Dreamweaver – десктопная программа от Adobe в формате визуального редактора для работы с HTML/CSS, JavaScript и PHP-кодом. В последнюю версию 2019 года интегрирован Bootstrap 4.0.0. Программа представляет собой визуальный редактор с набором библиотек, множеством настроек и редактором кода. Пользователь работает с кодом, формируя веб-страницы. Все изменения отображает визуальный редактор в реальном времени. Это платформа для профессионалов.Мы собрали подборку готовых сайтов для демонстрации возможностей системы.
Dreamweaver стал популярным ещё в начале 2000-х годов, когда только начали появляться первые более-менее нормальные конструкторы сайтов и CMS. Он являлся хорошей альтернативой созданию сайтов в блокноте благодаря наличию визуального редактора: пользователь сразу видел эффект от изменений, вносимых в код, что заметно ускоряло разработку страниц. Некоторые операции автоматизированы, все проекты собраны в библиотеки для удобства доступа. Программа откровенно сложная, требует уверенных навыков работы с кодом. Не для новичков. Она платная, готовые сайты необходимо загружать на хостинг.
Сайты, созданные в Dreamweaver, не имеют каких-либо характерных черт. Они собираются вручную, хотя нередко в ход идут шаблоны различных элементов, которых в Сети сотни тысяч. Качество дизайна и сайтов, в целом, зависит исключительно от мастерства разработчика. Платформа позволяет создавать сайты любого типа и сложности, но её использование оправдано лишь для небольших проектов. С большим количеством страниц трудно работать, да и разработка обходится дорого. Выгоднее взять конструктор или CMS. Экзотический по нашим меркам, но всё ещё мощный движок. Давайте посмотрим примеры готовых сайтов.
Примеры Dreamweaver-сайтов:
Содержание статьи:
- Cdop.chem.spbu.ru — сайт университета.
- Domkomforta32.ru — сайт дизайнерской компании.
- Garden.tversu.ru — сайт ботанического сада.
- Eu-all.ru — магазин бытовой химии.
- Medtran.ru — бюро медицинских переводов.
- Gas13.ru — сайт графического дизайнера.
- 100menu.ru — сайт-справочник.
- 1stroy-dom.ru — справочник новостроек.
- 1s-master.ru — курсы 1С-программирования.
- Apriorikzn.ru — визитка производителя систем обогрева.
- Aquanum.ru — блог о водных растениях.
- M-btd.ru — визитка производителя мебели.
- Setplastic.ru — сайт пластического хирурга.
- Sts59.ru — сайт логистической компании.
- Trpoliteh.ru — Трубчевский политехнический техникум.
Сайт СПбГУ
Cdop.chem.spbu.ru — сайт Санкт-Петербургского государственного университета, по формату является визиткой. Дизайн макета адаптивный. Выглядит чисто и ярко за счёт использования оттенков красного для выделения важных элементов. Есть поиск по сайту. Меню простейшее, страницы открываются молниеносно. Кажущаяся простота структуры обманчива: в разделе образовательных программ сокрыты разделы с доступом ко множеству статических страниц, организованных в блоговом формате (характерный порядок публикаций и дочитывание через кнопку «подробнее»). Материалы ожидаемо качественные — всё лаконично и доходчиво подано.
Правый сайдбар содержит множество ссылок на различные формуляры документов, необходимых для поступления, да и просто информационного характера. Страница контактов сдобрена простенькими иконками. Справа на всех страницах висит вкладка для перехода в различные разделы основного портала университета. Сделана качественно, эргономика отличная, содержит ссылки на почтовый аккаунт, соцсети и ленту RSS учебного заведения. Футер простейший, дублирует информацию из шапки и страницы контактов. Вполне сбалансированная, качественная работа без изысков либо явных недостатков.
Уютный дом — дизайнерская компания
Domkomforta32.ru — сайт-визитка компании, которая предоставляет услуги по дизайну интерьеров, ландшафтов и всего в таком духе. Макет проекта выполнен в устаревшем стиле, но смотрится симпатично — работа качественная. Стилизованное под лист пергамента меню, эффекты, активируемые наведением курсора мыши, вычурные шрифты, атмосферная подложка и затемнение фона контентной области (зона прозрачности) вместе смотрятся приятно, вызывают ностальгию по сайтам 2000-х годов. Галерея готовых работ вынесена в отдельную вкладку справа и оформлена хорошо.
Весь контент размещается внутри статичной центральной области и, зачастую, помещается на 1 экран. Для расширения рабочего пространства используется пагинация, но не вертикальный скроллинг, как это обычно бывает. Форматирование материалов непростое: много картинок, значков, отступов и прочего. Описания услуг более-менее качественные, доходчивые. Есть ссылки на стоимость элементов оборудования, необходимых для выполнения конкретных видов работ. Есть прайс, что вызывает доверие. В целом, сайт вызывает симпатию, он ощущается уютным на фоне современных модных макетов.
Сайт ботанического сада
Garden.tversu.ru — портал ботанического сада Тверского государственного университета. Довольно крупный проект по меркам движка, труда вложено немало. Сайт был разработан одним из сотрудников команды сада — специалистом по маркетингу и связям с общественностью. Дизайн простой, но подходящий — серьёзный, эргономичный и, так сказать, зелёный, экологичный. Ширина макета фиксированная — адаптивности нет. Шрифты мелковаты, но читаются нормально. Статьи с глубоким смыслом по теме, грамотные, но форматирование местами хромает на обе ноги — читать простыни мелкого текста без разделителей и малыми отступами между абзацами откровенно трудно. Качалка пользовательского внимания.
На сайте используются Flash-элементы, которые по умолчанию отключены в большинстве браузеров. Навигация одноуровневая, но, тем не менее, сложная — основное меню из двух ярусов, плюс приличной длинны сайдбар со ссылками на разделы. Всё это вызывает уважение — создать на Dreamweaver такой массив страниц непросто. Оформление многих материалов выполнено колонками, используется большое количество значков и фотографий. Никаких социалок и прочих интеграций здесь нет. Сайт контентно-ориентированный. В этом его сила и слабость: оформление статей не везде качественное, трудно читать. В остальном порядок.
Euro Alliance — магазин бытовой химии
Eu-all.ru — пример магазина на Dreamweaver. Дизайн довольно хороший, хоть и не адаптивный. Яркий, все элементы качественно подогнаны — магазин не злоупотребляет расширением пространства и необходимостью скроллинга на несколько экранов. Всё сложено компактно, даже слишком кучно, но при этом выглядит совершенно нормально. Тут есть всё необходимое, что и у магазинов на движках: корзина, возможность указания количества товаров, заказа обратного звонка, лента популярных товаров и прочее. Меню у сайта понятное, одна его часть висит в шапке, а другая показывает категории товаров в сайдбаре. Эргономика отличная.
Витрина пестрит всеми цветами радуги, перенимая палитру с ярких упаковок моющих средств на миниатюрах. Товарные карточки компактные, информативные, с качественными описаниями характеристик. Все заказы собираются в корзине, а оттуда уже можно отправить заполненную форму с данными продавцу. В магазине есть панель партнёрских брендов, оформленных логотипами со ссылками на их сайты. Эта деталь придаёт веса проекту. В футере находятся аккуратные значки доступа к соцсетям. Есть стрелка «наверх», хотя она и не нужна — почти все манипуляции занимают не более 1 экрана по высоте. Хороший, небольшой магазин.
MedTran — бюро медицинских переводов
Medtran.ru — мощный сайт-визитка компании, которая специализируется на переводах медицинской документации с английского на русский язык. Дизайн отличный: чистый, адаптивный, структура макетов страниц грамотная, форматирование текстовых материалов выполнено на высоком уровне. Используются эффекты увеличения изображений при наведении курсора мыши. Зелёные акценты на белом фоне освежают атмосферу сайта. Логотип выглядит привлекательно, внушительно. Всё вместе это смотрится убедительно, добротно.
Меню одноуровневое, но довольно обширное. В него спрятана и панель контактов. Страницы содержат довольно много качественного текстового контента и ссылок. Шрифты хорошо читаются, материалы грамотно структурированы. Разборчивость контента увеличивает большое количество иконок для иллюстрации преимуществ и прочих текстовых тезисов. Футер в привычном формате отсутствует. Вместо него разместили аккуратную форму обратной связи. Итого, на сайте есть всё необходимое: доказательства компетентности команды, смежные материалы, контакты и красивое обрамление всего этого дизайном. Хорошая работа.
Gas13 — сайт графического дизайнера
Gas13.ru — сайт-визитка человека, который специализируется на пиксельной графике. Дизайн необычный, его можно назвать устаревшим. Тем не менее, по сегодняшним меркам он является оригинальным. Главная страница оформлена оттенками серого с оранжевыми акцентами на разделах с примерами работ и уроками. Короткий вводный текст выглядит контрастно, изобилует ссылками. Тут же чётко видны контакты. С точки зрения структуры и читаемости всё отлично. Дизайн не адаптивный. Сайт имеет английскую локализацию.
При переходе в любой раздел появляется меню с примерами работ, уроками, магазином, формой обратной связи и полезными для дела ссылками. В правом сайдбаре находятся миниатюры примеров работ, при клике по которым появляются детальные превьюшки со вкладками для переключения страниц иллюстраций. Несмотря на кажущуюся простоту структуры, на сайте довольно много контента, в основном, графического. В целом, работа хорошая, атмосферная и необычная. Напоминает выставочный зал со множеством вспомогательных материалов.
Reste 2.0 — сайт-справочник
100menu.ru — масштабный проект формате справочника рецептур, предназначенный для рестораторов. Здесь можно приобрести ТТК (технико-технологические карты) огромного количества блюд — рецептуры с граммовками и технологией приготовления по кулинарным стандартам. То есть мы, по сути, имеем дело с магазином, торгующим информацией. Оплата принимается через Webmoney, банковские карты и ещё множество средств онлайн-оплаты. Контента множество — каталог впечатляет размахом и удобством навигации. Ссылок огромное количество, но, ввиду простоты дизайна, всё отлично видно и хорошо читается.
Дизайн адапативный, оформление простое — всё в оттенках синего на белом фоне. Посетителю не на что отвлекаться, всё внимание сосредоточено на разделах справочника. Есть сортировка по фильтрам. Есть готовые пакеты ТТК по акциям, заточенные под различные типы меню. Футер в привычном формате отсутствует, его роль выполняет качественный текст на манер описания преимуществ и мотивации приобретения рецептов, разбитый на 3 колонки. В своём роде сайт отличный — узкопрофильный проект с большим количеством контента и подходящим дизайном.
Ярмарка новостроек — справочник новостроек
1stroy-dom.ru — сайт-агрегатор, который содержит предложения застройщиков. Увы, нигде не указан регион, для которого возможен подбор жилплощадей клиентам. Сайт выполнен в формате ленгдинга. Выглядит броско, контрастно, но нет разделов, пагинации и каких-либо других разделителей, способных структурировать предложения. Всё свалено в одну кучу — несколько десятков экранов скроллинга. Найти что-либо в таком хаосе трудно. Опознавательных знаков нет — где, что, как? При клике на кнопку «Подробнее» появляется форма заказа обратного звонка. То есть просто так прочитать информацию о предложении с сайта не получится. Совсем неудобно.
Под несколькими сотнями предложений застройщиков начинаются блоки преимуществ, отзывов и прочего из этой серии. Но кто до этого уровня долистает? Структура сайта совершенно не продумана, формат для каталога выбран наиболее неудачный из всех возможных. Сайт напоминает спамную страницу. Хорошо, что хоть адрес есть и телефон компании в футере. С технической точки зрения сделано неплохо, хотя слишком наляписто и шаблонно (кто в теме лендингов, тот поймёт). Сплошная реклама без опознавательных знаков. Дизайн не адаптивный. Проект не вызывает доверия ввиду формата и особенностей реализации.
АС-Софт — курсы 1С-программирования
1s-master.ru — сайт-визитка для сбора заявок на платные курсы по 1С-программированию. Для детей и взрослых. Оформление простенькое, школьное, можно сказать, дружелюбное. Яркие кнопки с обычной CCS-анимацией (смена цвета фона и шрифта свойством hover), красные акценты, весёлая графика в хедере. Дизайн адаптивный — макет корректно сдвигается по ширине, ничего не теряется и не смешивается в кучу. Главная страница содержит общую информацию, напоминает обычный документ Word по формату.
Раздел курсов и услуг информативный, содержит чёткий, хорошо читаемый перечень услуг с более-менее нормальным форматированием. В футере висят ссылки на социалки. Навигация простая, одноуровневая, на сайте всего 5 страниц. Есть возможность участия в вебинарах по входу с паролем — это формат монетизации сайта на равне оффлайновыми курсами. Страница контактов содержит форму обратной связи, которая позволит получить доступ к бесплатным лекциям. Сайт простейший по структуре и функционально. Но свои функции явно выполнять способен.
Априори – визитка производителя систем обогрева
Apriorikzn.ru — типичный пример старого сайта, созданного в Dreamweaver, который считался бы нормой в каком-нибудь 2005 году. Сейчас воспринимается как архаизм, который неохота сёрфить. Здесь почти всё не так по современным меркам: никакой адаптивности, узкая область клика по широким кнопкам, размытые изображения, страницы без контента, есть нерабочие и непонятные ссылки, убогая графика, низкая эргономика, запутанная структура и т. д.
Единственное, что хоть как-то вытягивает сайт – это контент. Его немало, он неплохо написан, пускай оформление и хромает на обе ноги. Понятно, никаких технологий, используемых в наше время, нет – консультантов, заказов звонка, форм обратной связи, калькуляторов, кнопок соцсетей и прочего. Проект, однажды созданный, оставили в первозданном виде. Поход в музей сайтостроения. Но домен жив, значит, хоть какой-то толк визитка до сих пор приносит.
Аквантум – блог о водных растениях
Aquanum.ru — сайт, посвящённый, преимущественно, аквариумным растениям. С визуальной точки зрения безнадёжно устарел, но всё же не раздражает – хотя бы цветовая гамма соответствует тематике, плюс эргономика неплохая, всё понятно и доступно. Адаптивности нет. Галерея простенькая, работает медленно, некоторые картинки вообще не загружаются, плюс, они очень маленькие. Зато на сайте много контента – разделов хорошо написанных статей, есть библиотека с книгами по теме и большим количеством ссылок. Читать на сайте не очень удобно – форматирование не ужасное, но длинные простыни текста на синем фоне, пусть и с нормальным шрифтом, не очень хорошо воспринимаются. Из продвинутого по меркам возраста сайта отметим наличие блока социальных сетей. Устаревший, но весьма информативный блог, который, судя по всему, ещё пользуется некоторым спросом у целевой аудитории.
Визитка производителя стройматерилов
M-btd.ru — сайт компании-изготовителя древесных материалов и мебели из них. Не шедевр, но сравнительно хорошо реализован, более-менее свежий и, по крайней мере, адаптивный. Дизайн светлый, яркий и сочный благодаря красочный изображениям. Главная страница компактная, основная информация содержится в слайдере. Меню в десктопной версии слишком крупное, структура у него нелогичная, некоторые пункты из раздела «Продукции» лучше было вынести отдельными пунктами. Да и подписаны странно – в материалах видим варианты расцветок ЛДСП, а не разновидности. В общем, с логикой и навигацией есть проблемы.
Структура у страниц нормальная, как и качество текстовой составляющей. В некоторых местах используются несложные эффекты. Страница контактов неплохо оформлена, есть карта с местоположением, а вот ссылки на соцсети отсутствуют. Сайт похож на то, что получается в далеко не топовом WYSIWYG-конструкторе, но там подобный результат достигается гораздо проще, да и технологичности в проекте побольше будет.
Сайт пластического хирурга
Setplastic.ru — сайт армянского хирурга по наведению красоты тела. Мультиязычный – русский и армянский, соответственно. Разработан веб-студией ещё в 2014 году. Дизайн, скажем так, подходящий. Светлый, пастельные тона, чистый, что дополнительно подчёркивается той же тональности фотографиями – чётко просматривается тема цвета кожи. Адаптивность, увы, отсутствует, что снимает баллы сайту. Структура своеобразная. Навигация удобная, одноуровневая. Сделано всё просто и аккуратно. Восторга или отторжения не вызывает.
Разделов много, как и контента. Статьи довольно короткие, зато написаны хорошо. А вот форматирование хромает: шрифты внятные, но не хватает пробелов между абзацами, текст выглядит простынёй, пусть и вполне читаемой. Качество иллюстраций среднее, достаточное. Много информации о достижениях доктора и клиники. Очень много описаний услуг, ссылки на некоторые из них выдают ошибку – недосмотр. Страница контактов оформлена нормально, есть карта проезда и форма обратной связи. Неплохая визитка. Чудом её не назовёшь, но для работы, сделанной в Dreamweaver и на фоне некоторых других примеров выглядит прилично.
Сайт логистической компании
Sts59.ru — сайт крупной пермской логистической компании с большим парком техники, каждый тип и модель которого расписан отдельной статьёй со всеми спецификациями. Поэтому объём контента большой и написан/форматирован он качественно с кучей деталей, иллюстрациями, таблицами и прочими атрибутами подачи информации. Эргономика навигации у сайта удобная, реализованная одноуровневым меню и сайдбаром с перечнем техники. Есть отдельный раздел с прайс-листами на услуги, что очень хорошо.
Дизайн приятный. Ничего особенного в нём нет, но и не раздражает, не мешает ничего. Внятные шрифты, чистое оформление, изображения техники и прочее. Не хватает только адаптивности макета – в этом главный минус этой довольно-таки хорошо сделанной визитки. В остальном полный порядок, особенно с учётом десятилетнего возраста сайта.
Трубчевский политехнический техникум
Trpoliteh.ru — портал образовательного учреждения. Структурно очень сложный и объёмный сайт. Даже версия для слабовидящих реализована. Дизайн да, устаревший, но он не раздражает, смотрится органично. Понятно, что сайт старый. Ценность его заключается не в свежести одёжки, эффектах и технологичности, а в огромном количество полезной и постоянно обновляемой информации для всех – абитуриентов, спонсоров, студентов и различных организаций.
Эргономика, учитывая гигантский объём контента, здесь отличная. Всё на виду. Простое меню, сайдбары, ссылки, логичность структуры размещения материалов – не придраться. Сайт образовательный и статьи соответствующие – грамотные, информативные, как будто в Википедии. Да, форматирование не такое продвинутое, как у современных блогов, но вполне приемлемое: хорошо читаемый простой шрифт, иллюстрации, таблицы, абзацы и всё такое. Живой, регулярно обновляемый качественный в своём роде проект. Свои задачи решает на 200%.
Подведём итоги
Dreamweaver — потенциально очень мощная программа для сборки веб-страниц. Мало кто использует её возможности на полную катушку. Здесь нужен опыт. С программой плотно работает поколение, которое занималось разработкой сайтов ещё в 2000-х. Более молодых разработчиков трудно заинтересовать столь сложным инструментом в пору массового распространения качественных конструкторов сайтов и CMS.
В программе довольно сложно создать современный сайт, который бы по дизайну и функциональности мог конкурировать с тем, что получается в хороших конструкторах и CMS. Это возможно, но потребует гораздо большего количества знаний и затрат усилий. Во многих случаях получается нечто устаревшее, неадаптивное и странное. Многие существующие сайты были созданы 5-10 или более лет тому назад и до сих пор никак не модифицировались, но продолжали наращивать контент, как-то развиваться. Они неплохие по своей сути, но уже не смотрятся – делать редизайн или перевести на другой движок сайты, созданные в этом инструменте, – ещё та проблема. Сложно и дорого, да ещё попробуйте найти того, кто за это возьмётся.
Да, сайты, созданные в Dreamweaver, работают быстро, если грамотно собраны. Программа любит сорить лишним кодом, если пользователь делает упор на работу с визуальным редактором. Технологически продукт хорош, с его помощью создано огромное количество сайтов. Чаще всего это обычные визитки. Тем не менее, в примерах вы видели справочники и магазины. Всё это делают, но далеко не новички. Есть ли смысл использовать движок? Пожалуй, нет: он сложный и дорогой, как и большинство продуктов Adobe. Более рентабельных альтернатив множество.
- Автор: Дмитрий Луценко
Источник: uguide.ru