Видео: Как создать сайт мечты #1 - Adobe Dreamweaver CC (SMGroup) (Ноябрь 2024)
Adobe могла бы почить на лаврах, обновив Dreamweaver до своего последнего воплощения в подписанном сервисе Creative Cloud под названием Dreamweaver CC. В своем предыдущем воплощении Dreamweaver CS6, входящем в Adobe Creative Suite 6, продвинутый редактор веб-сайтов Adobe уже почти не имел серьезных конкурентов в качестве инструмента для создания и поддержки современных многоплатформенных веб-сайтов. Например, Dreamweaver CS6 представил готовые веб-макеты с «плавной сеткой», которые используют CSS для автоматического изменения веб-страниц в соответствии с размером экрана, что упрощает создание единого сайта с использованием телефонов, планшетов и настольных компьютеров без сложных Ручное кодирование CSS ранее требовалось.
Новый Dreamweaver CC расширяет возможности жидкостной сетки, поддерживая структурные элементы HTML5, такие как разделы и статьи. Он также добавляет инструмент для экономии усилий, новый CSS Designer, который использует интерактивный графический интерфейс для изменения свойств CSS, таких как тени и изогнутые углы, так что вам нужно всего лишь щелкнуть и перетащить, чтобы изменить сложный код CSS, увидев результаты в реальном времени. время. Полная поддержка веб-шрифтов, загружаемых с серверов Adobe, когда браузер загружает страницу, позволяет легко создавать привлекательные дизайны. Кроме того, как и остальная часть пакета Creative Cloud, Dreamweaver также получает упрощенный и более легко настраиваемый интерфейс и работает одинаково как в Windows, так и в OS X.
Pro и Semi-Pro
Dreamweaver - это инструмент профессионального уровня, который стоит иметь - если вы можете себе это позволить - даже если вы непрофессионал. Новые пользователи Dreamweaver могут быть напуганы множеством меню и панелей свойств в макете по умолчанию, но вскоре становится понятно, как их использовать, чтобы получить быстрый доступ к расширенным элементам управления над элементами CSS или быстро переключаться между экранами, показывающими, как веб-страница будет выглядеть при печати или при отображении на экранах разных размеров. Опытные веб-дизайнеры могут щелкнуть меню JavaScript-виджетов UI в своем коде, чтобы создавать всплывающие диалоги, средства выбора даты, меню в стиле аккордеона и все остальное в текущем списке эффектов пользовательского интерфейса. Но даже менее опытные пользователи могут создавать гибкие HTML5-совместимые сайты, которые хорошо смотрятся на любой платформе.
Начните соткать мечты
Начиная с пустой страницы или примера макета, вы нажимаете на элементы на панели «Вставка», чтобы добавить такие элементы, как шаблоны (с редактируемыми и не редактируемыми областями), мультимедиа (HTML5 или Flash) и стандартные функции HTML. Экран по умолчанию разделен на область кода и панель дизайна WYSIWYG, но вы можете выбрать одну или другую или сделать панель дизайна "Живой", чтобы просматривать мультимедийный контент, такой как видео, или контент, который будет обслуживаться из базы данных при страница появляется в браузере. Одна вещь, которой я восхищаюсь в Dreamweaver, это то, что он не поддерживает проприетарные технологии Adobe, такие как Flash, по сравнению с открытыми стандартами, такими как видео HTML5, но обеспечивает одинаковую поддержку для обоих - и даже обеспечивает более привлекательный и более удобный видеоплеер HTML5, чем его встроенный Флеш плеер
Когда вы создаете страницу с функцией плавной сетки Dreamweaver, приложение сначала создает страницу, которая содержит сетку вертикальных столбцов, которые видны в Dreamweaver, но не отображаются, когда страница отображается в браузере. По умолчанию страница, предназначенная для телефонов, помещается в четыре из этих невидимых столбцов. Когда одна и та же страница отображается на планшете, она заполняет восемь столбцов и двенадцать столбцов при отображении на настольном компьютере.
Когда вы переключаетесь между размерами экрана в окне редактирования Dreamweaver, содержимое вашего сайта перестраивается в соответствии с шириной, указанной вами для определенного типа экрана, и вы можете использовать панель «Дизайнер CSS» для настройки формы, размера и других свойств. отдельных элементов для разных размеров экрана.
