Примеры сайтов на Dreamweaver (Дримвивер) - uGuide.ru

Примеры сайтов на Dreamweaver (Дримвивер)

  • Обновлено:
    24.06.2019
  • Просмотры:
    632
  • Отзывы:
    0
Dreamweaver – десктопная программа от Adobe в формате визуального редактора для работы с HTML/CSS, JavaScript и PHP-кодом. В последнюю версию 2019 года интегрирован Bootstrap 4.0.0. Программа представляет собой визуальный редактор с набором библиотек, множеством настроек и редактором кода. Пользователь работает с кодом, формируя веб-страницы. Все изменения отображает визуальный редактор в реальном времени. Это платформа для профессионалов.

Мы собрали подборку готовых сайтов для демонстрации возможностей системы.

Dreamweaver стал популярным ещё в начале 2000-х годов, когда только начали появляться первые более-менее нормальные конструкторы сайтов и CMS. Он являлся хорошей альтернативой созданию сайтов в блокноте благодаря наличию визуального редактора: пользователь сразу видел эффект от изменений, вносимых в код, что заметно ускоряло разработку страниц. Некоторые операции автоматизированы, все проекты собраны в библиотеки для удобства доступа. Программа откровенно сложная, требует уверенных навыков работы с кодом. Не для новичков. Она платная, готовые сайты необходимо загружать на хостинг.

Сайты, созданные в Dreamweaver, не имеют каких-либо характерных черт. Они собираются вручную, хотя нередко в ход идут шаблоны различных элементов, которых в Сети сотни тысяч. Качество дизайна и сайтов, в целом, зависит исключительно от мастерства разработчика. Платформа позволяет создавать сайты любого типа и сложности, но её использование оправдано лишь для небольших проектов. С большим количеством страниц трудно работать, да и разработка обходится дорого. Выгоднее взять конструктор или CMS. Экзотический по нашим меркам, но всё ещё мощный движок. Давайте посмотрим примеры готовых сайтов.

 

Примеры Dreamweaver-сайтов:

  1. Cdop.chem.spbu.ru – сайт университета.
  2. Domkomforta32.ru – сайт дизайнерской компании.
  3. Garden.tversu.ru – сайт ботанического сада.
  4. Eu-all.ru – магазин бытовой химии.
  5. Medtran.ru – бюро медицинских переводов.
  6. Gas13.ru – сайт графического дизайнера.
  7. 1001stoleshka.ru – магазин столешниц.
  8. 100menu.ru – сайт-справочник.
  9. 1stroy-dom.ru – справочник новостроек.
  10. 1s-master.ru – курсы 1С-программирования.

 

Сайт СПбГУ

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 – сайт-визитка человека, который специализируется на пиксельной графике. Дизайн необычный, его можно назвать устаревшим. Тем не менее, по сегодняшним меркам он является оригинальным. Главная страница оформлена оттенками серого с оранжевыми акцентами на разделах с примерами работ и уроками. Короткий вводный текст выглядит контрастно, изобилует ссылками. Тут же чётко видны контакты. С точки зрения структуры и читаемости всё отлично. Дизайн не адаптивный. Сайт имеет английскую локализацию.

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

 

1001stoleshka – магазин столешниц

1001stoleshka.ru – сайт-визитка компании-производителя столешниц. Задумка по дизайну вполне нормальная, всё выглядит и читается просто, хорошо. Структура и навигация очевидные. Сайт старый, ещё с 2011 года работает, судя по футеру. Но его не доделали: в категориях левого сайдбара нет контента, большинство ссылок меню и прочих не кликаются – они пустые. Основная информация вроде контактов и карты проезда присутствует, по характеру заголовков и меню можно понять, что может предложить компании, но деталей нет. Очевидно, раз хостинг продлевают, значит, всё работает до сих пор. Но наполнение забросили, а жаль.

 

Reste 2.0 – сайт-справочник

100menu.ru – масштабный проект формате справочника рецептур, предназначенный для рестораторов. Здесь можно приобрести ТТК (технико-технологические карты) огромного количества блюд – рецептуры с граммовками и технологией приготовления по кулинарным стандартам. То есть мы, по сути, имеем дело с магазином, торгующим информацией. Оплата принимается через Webmoney, банковские карты и ещё множество средств онлайн-оплаты. Контента множество – каталог впечатляет размахом и удобством навигации. Ссылок огромное количество, но, ввиду простоты дизайна, всё отлично видно и хорошо читается.

Дизайн адапативный, оформление простое – всё в оттенках синего на белом фоне. Посетителю не на что отвлекаться, всё внимание сосредоточено на разделах справочника. Есть сортировка по фильтрам. Есть готовые пакеты ТТК по акциям, заточенные под различные типы меню. Футер в привычном формате отсутствует, его роль выполняет качественный текст на манер описания преимуществ и мотивации приобретения рецептов, разбитый на 3 колонки. В своём роде сайт отличный – узкопрофильный проект с большим количеством контента и подходящим дизайном.

 

Ярмарка новостроек – справочник новостроек

1stroy-dom.ru/ – сайт-агрегатор, который содержит предложения застройщиков. Увы, нигде не указан регион, для которого возможен подбор жилплощадей клиентам. Сайт выполнен в формате ленгдинга. Выглядит броско, контрастно, но нет разделов, пагинации и каких-либо других разделителей, способных структурировать предложения. Всё свалено в одну кучу – несколько десятков экранов скроллинга. Найти что-либо в таком хаосе трудно. Опознавательных знаков нет – где, что, как? При клике на кнопку «Подробнее» появляется форма заказа обратного звонка. То есть просто так прочитать информацию о предложении с сайта не получится. Совсем неудобно.

Под несколькими сотнями предложений застройщиков начинаются блоки преимуществ, отзывов и прочего из этой серии. Но кто до этого уровня долистает? Структура сайта совершенно не продумана, формат для каталога выбран наиболее неудачный из всех возможных. Сайт напоминает спамную страницу. Хорошо, что хоть адрес есть и телефон компании в футере. С технической точки зрения сделано неплохо, хотя слишком наляписто и шаблонно (кто в теме лендингов, тот поймёт). Сплошная реклама без опознавательных знаков. Дизайн не адаптивный. Проект не вызывает доверия ввиду формата и особенностей реализации.

 

АС-Софт – курсы 1С-программирования

1s-master.ru – сайт-визитка для сбора заявок на платные курсы по 1С-программированию. Для детей и взрослых. Оформление простенькое, школьное, можно сказать, дружелюбное. Яркие кнопки с обычной CCS-анимацией (смена цвета фона и шрифта свойством hover), красные акценты, весёлая графика в хедере. Дизайн адаптивный – макет корректно сдвигается по ширине, ничего не теряется и не смешивается в кучу. Главная страница содержит общую информацию, напоминает обычный документ Word по формату.

Раздел курсов и услуг информативный, содержит чёткий, хорошо читаемый перечень услуг с более-менее нормальным форматированием. В футере висят ссылки на социалки. Навигация простая, одноуровневая, на сайте всего 5 страниц. Есть возможность участия в вебинарах по входу с паролем – это формат монетизации сайта на равне оффлайновыми курсами. Страница контактов содержит форму обратной связи, которая позволит получить доступ к бесплатным лекциям. Сайт простейший по структуре и функционально. Но свои функции явно выполнять способен.

 

Подведём итоги

Dreamweaver – потенциально очень мощная программа для сборки веб-страниц. Мало кто использует её возможности на полную катушку. Здесь нужен опыт. С программой плотно работает поколение, которое занималось разработкой сайтов ещё в 2000-х. Более молодых разработчиков трудно заинтересовать столь сложным инструментом в пору массового распространения качественных конструкторов сайтов и CMS.

Да, сайты, созданные в Dreamweaver, работают быстро, если грамотно собраны. Программа любит сорить лишним кодом, если пользователь делает упор на работу с визуальным редактором. Технологически продукт хорош, с его помощью создано огромное количество сайтов. Чаще всего это обычные визитки. Тем не менее, в примерах вы видели справочники и магазины. Всё это делают, но далеко не новички. Есть ли смысл использовать движок? Пожалуй, нет: он сложный и дорогой, как и большинство продуктов Adobe. Более рентабельных альтернатив множество.

  • Автор:

no avatar