Как создать первый сайт в Adobe Dreamweaver
В эпоху конструкторов сайтов с перетаскиванием Adobe Dreamweaver остаётся мощным инструментом для тех, кто хочет полный контроль над кодом. Он сочетает визуальный редактор и кодовый режим, поддерживает шаблоны, связку с FTP, встроенный просмотр и работу с CSS. Это руководство научит вас создать базовый сайт, рассказав о ключевых шагах, практиках и подводных камнях.
Что нужно знать перед началом
Определения в одну строку:
- Шаблон — HTML‑файл с областями, которые при создании страницы можно редактировать.
- Область для редактирования — часть шаблона, содержимое которой изменяют для каждой страницы.
- Flexbox — современная модель раскладки в CSS, удобная для гибкого меню и хедеров.
Важно: перед началом скачайте Adobe Dreamweaver через Adobe Creative Cloud. Доступна бесплатная пробная версия.
Основные варианты использования и для кого это подходит
- Веб‑дизайнеры, которые хотят визуально редактировать интерфейс и одновременно иметь доступ к коду.
- Разработчики, создающие статические сайты или шаблоны с повторяемой структурой.
- Команды, которым нужен экспорт готовых HTML/CSS без CMS.
Когда Dreamweaver не лучший выбор:
- Для сложных динамических сайтов с бэкендом лучше использовать фреймворки и IDE.
- Для быстрой блого‑ платформы без кода удобнее WordPress, Wix или Squarespace.
1. Создание сайта в Dreamweaver
- Откройте Adobe Dreamweaver.
- В меню выберите Site → New Site.
- Укажите имя сайта и локальную папку для файлов. Эта папка станет корнем проекта.
Совет: держите структуру простую — папки: css, images, pages. Это облегчит навигацию и деплой.
2. Создание файла шаблона
Шаблоны ускоряют создание страниц с одинаковой структурой.
- File → New → Document Type: выберите HTML Template.
- Дайте имя и сохраните шаблон в корне сайта, например templates/main_template.dwt.
Dreamweaver сгенерирует базовую структуру HTML. Оставьте существующий HTML — он станет основой.
Важно: сохраняйте шаблон до внесения изменений, чтобы иметь контроль версий.
3. Построение хедера и меню в шаблоне
В шаблоне создадим шапку сайта (header) с логотипом и навигацией.
- В меню Insert выберите Header.
- В диалоге задайте имя класса, например main-header. Dreamweaver вставит код внутри .
- Insert → Div — создайте контейнер для логотипа, присвойте класс site-logo.
- Insert → Nav — добавьте элемент навигации, присвойте класс main-menu.
- Insert → Hyperlink — добавьте ссылки. В примере: Home, Lion, Tiger, Jaguar, House Cat.
Пока страницы не созданы, оставьте href пустыми или используйте временные якоря (#). Это позволит верстать меню заранее.
Совет по доступности: добавьте атрибут aria‑label к nav и используйте понятные тексты ссылок.
4. Добавление таблицы стилей CSS
Используйте CSS Designer в Dreamweaver для подключаемых файлов.
- Откройте панель CSS Designer справа.
- Нажмите плюс рядом с Sources и создайте новый файл, например css/page-css.css.
Пример действий, которые мы сделаем в CSS:
- Сделаем хедер флексбоксом для выравнивания логотипа и меню.
- Установим шрифты, цвета фона и отступы.
Коротко о flexbox: это модель для раскладки, удобная при адаптации под разные ширины экрана.
5. Добавление областей для редактирования в шаблоне
Editable regions позволяют при создании страниц менять только контентную часть, сохраняя общий каркас.
- Insert → Template → Editable Region.
- Назовите область, например MainContentRegion.
Это важно: элементы шапки и футера останутся неизменными на всех страницах, а содержимое — редактабельным.
6. Добавление контента и фоновых изображений
Внутри редактируемой области добавьте div, который будет контейнером для текста и фонового изображения.
- Insert → Div. Дайте диву класс и уникальный id, например class=”main-content” id=”lion”.
- Insert → Headings → H1 — добавьте заголовок страницы.
Настройте CSS: background-image, background-size: cover, height: 100vh и отступы. Для разных страниц используйте разные id и фоны.
Практическая рекомендация: сохраняйте изображения в папке images и используйте относительные пути.
7. Создание страниц на основе шаблона
- File → New → Document Type: HTML.
- Укажите Title и нажмите Create.
- Tools → Templates → Apply Template to Page → выберите ваш шаблон → Select.
- File → Save As — сохраните страницу в папке pages, например Lion.html.
Совет: используйте осмысленные имена файлов без пробелов (например house-cat.html вместо “House Cat.html”) — это упрощает ссылки и SEO.
8. Настройка ссылок навигации
Вернитесь в шаблон и замените временные href на реальные пути к страницам. В редакторе свойств ссылок используйте кнопку Browse (кавычки) и выберите нужную страницу.
Проверьте относительные пути: если шаблон в одной папке, а страницы в другой, корректируйте путь (../pages/Lion.html).
9. Завершение CSS и уникальность страниц
Чтобы страницы отличались, проделайте эти шаги для каждой новой страницы:
- Поменяйте id у контейнера .main-content, например id=”tiger”.
- Добавьте в CSS правила для каждого id с разным background-image.
- Обновите
и H1 на странице.</li></ul><p class="">Пример простых правил:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">#lion { background-image: url(“Images/largelion.png”); }</li><li class="">#tiger { background-image: url(“Images/tiger.png”); }</li></ul><p class="">Критерии приёмки:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Навигация работает и ведёт на корректные страницы.</li><li class="">Для каждой страницы задан заголовок <title> и H1.</li><li class="">Фоновые изображения загрузились и масштабируются корректно.</li></ul><h2 class="text-2xl font-bold py-2" id="h2-11">10. Тестирование в браузере</h2><p class="">Dreamweaver позволяет просматривать в реальном времени:</p><ol class="my-6 space-y-2 list-decimal pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">File → Real‑Time Preview → выберите браузер.</li></ol><p class=""><img src="/files/ed7c2685-b202-4a8a-a3fb-38c606926110.5" alt="предпросмотр в реальном времени" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><p class="">Проверяйте сайт в нескольких браузерах и на мобильных экранах. Особенности CSS (особенно flexbox) могут отличаться в старых браузерах.</p><h2 class="text-2xl font-bold py-2" id="h2-12">Публикация сайта — варианты</h2><ol class="my-6 space-y-2 list-decimal pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">FTP/SFTP: стандартный способ для динамических хостов. Настройте подключение в Dreamweaver.</li><li class="">Статическая публикация на AWS S3 + CloudFront: дешёвая и быстрая для статических сайтов.</li><li class="">Git + CI/CD: храните сайт в репозитории и деплойте через скрипты.</li><li class="">Хосты типа Netlify/Vercel: удобны для статических сайтов, автоматический деплой из Git.</li></ol><p class="">Короткая инструкция по AWS S3:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Создайте бакет с названием сайта.</li><li class="">Включите статический хостинг и укажите index.html и error.html.</li><li class="">Настройте политику доступа или подключите CloudFront для HTTPS.</li></ul><p class="">Примечание про безопасность: не храните секреты и ключи доступа в репозиториях. Используйте IAM роли и переменные окружения.</p><h2 class="text-2xl font-bold py-2" id="h2-13">Полный HTML и CSS проекта</h2><p class="">Ниже приведён исходный HTML и CSS, использованный в руководстве. Скопируйте их в соответствующие файлы и адаптируйте под свой контент.</p><div class="code-ui group"><pre class=""><code class=""> `<!doctype html> <html> <head> <meta charset="utf-8"> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document MakeUseOf Example SiteThis is a lion!