Как создать первый сайт в Adobe Dreamweaver
Введение
В мире визуальных конструкторов сайтов Adobe Dreamweaver остаётся мощным инструментом для тех, кто хочет контролировать код и одновременно использовать визуальные инструменты. В этом руководстве мы пройдём полный путь — от установки Dreamweaver до публикации простого статического сайта, используя шаблоны Dreamweaver и примерный проект. Пошаговые скриншоты сохранены в оригинальном порядке; подписи к изображениям даны на русском.
Изображение: эскиз дизайна сайта с логотипом Dreamweaver
Важно: инструкция рассчитана на базовые знания HTML/CSS. Если вы только начинаете, ключевые термины определены в «Глоссарии» в конце.
Основные понятия
- Шаблон — HTML-файл с областями, которые можно редактировать при создании страниц на его основе.
- Editable region — редактируемая область внутри шаблона; идеальна для уникального контента страниц.
- CSS Designer — панель Dreamweaver для создания и подключения таблиц стилей.
- Flexbox — современный способ компоновки элементов в CSS; он управляет выравниванием и распределением пространства.
Что вы получите из этого руководства
- Пошаговая инструкция со скриншотами.
- Полный HTML и CSS проект в конце (сохранён в исходном виде).
- Контрольные списки для разработчиков, дизайнеров и контент-менеджеров.
- Советы по тестированию, отладке и публикации.
Шаг 0: Подготовка и загрузка Dreamweaver
Прежде чем приступить, скачайте Adobe Creative Cloud с сайта Adobe, войдите в учётную запись или зарегистрируйтесь и установите Dreamweaver (доступна пробная версия). Creative Cloud управляет лицензиями и обновлениями, поэтому удобнее всего работать через него.
Совет: используйте стабильную версию Creative Cloud и Dreamweaver; для командной работы настройте совместное хранилище проектов (Git или общий диск).
Шаг 1: Создание сайта в Dreamweaver
- Откройте Adobe Dreamweaver.
- В меню выберите Site → New Site.
- Дайте название сайту и укажите локальную папку для файлов.
Подсказка: храните все ресурсы (изображения, CSS, JS) в папках внутри локальной папки сайта — так проще будет переносить проект на хостинг.
Шаг 2: Создание HTML-шаблона
Шаблоны в Dreamweaver похожи на темы CMS: они задают общую структуру страниц. Создайте шаблон:
- File → New → Document Type: HTML Template.
- Сохраните файл как основной шаблон (например, template.dwt).
Dreamweaver автоматически вставит базовую структуру HTML. Оставьте её — вы будете добавлять элементы на её основе.
Важно: шаблоны упрощают массовое обновление: правка шаблона автоматически обновит все страницы, к которым он применён.
Шаг 3: Построение заголовка (header) и навигации в шаблоне
Добавим header и навигацию:
- Вставьте Header через Insert → Header.
- Присвойте классу понятное имя (например, main-header).
- Через Insert добавьте div (site-logo) и nav (main-menu).
- Внутри nav добавьте ссылки (Insert → Hyperlink) — пока можно оставить href пустыми.
Добавьте пункты меню: Home, Lion, Tiger, Jaguar, House Cat — они служат примером структуры сайта.
Оставьте href пустыми до создания страниц. Это уменьшит риск ошибок при сохранении шаблона.
Совет по доступности: используйте семантические теги (
Шаг 4: Подключение CSS через CSS Designer
- Откройте CSS Designer (панель справа).
- Нажмите плюс рядом с Sources и создайте новый CSS-файл (например, page-css.css).
Простой CSS в примере устанавливает flexbox для header, чёрный фон и крупные белые заголовки. Flexbox помогает выровнять логотип и меню по одной линии.
Пояснение по Flexbox: это модель компоновки, которая управляет направлением (row/column), выравниванием (align-items, justify-content) и адаптивностью элементов без плавающих блоков.
Совет: для адаптивности добавьте медиазапросы и убедитесь, что навигация трансформируется в «гамбургер» для маленьких экранов.
Шаг 5: Добавление редактируемых областей в шаблон
Editable regions — это зоны, которые станут уникальными на каждой странице. Добавьте их через Insert → Template → Editable Region.
Обычно в шаблоне одна основная editable region покрывает содержимое страницы; в сложных макетах можно добавить несколько областей (контент, сайдбар, метаданные).
Шаг 6: Контент и фоновые изображения в editable region
Добавьте div-контейнер внутри editable region, который будет служить основным блоком контента и носителем фонового изображения. Дайте ему ID и класс, чтобы можно было задать уникальные CSS-правила.
- Insert → Div.
- Insert → Headings → H1 внутри div.
- Сохраните (File → Save All).
Практика: храните изображения в папке Images внутри корня сайта — это упростит ссылки и перенос.
Шаг 7: Создание страниц на основе шаблона
- File → New → Document Type: HTML. Укажите Title и нажмите Create.
- Tools → Templates → Apply Template to Page → выберите созданный шаблон → Select.
- File → Save As — сохраните страницу (например, Lion.html).
Повторите для необходимых страниц: Home.html, Lion.html, Tiger.html и т. д.
Совет: используйте понятные имена файлов без пробелов (например, house-cat.html вместо “House Cat.html”). Это уменьшит риск проблем с URL и серверами.
Шаг 8: Настройка ссылок навигации
Вернитесь в шаблон, найдите A-теги навигации и укажите href через панель Browse (иконка с кавычками) — выберите соответствующие html-файлы.
После изменения шаблона Dreamweaver предложит обновить все страницы; подтвердите — ссылки обновятся везде.
Шаг 9: Локальная кастомизация страниц (CSS/HTML)
Каждая страница наследует шаблон, но может иметь уникальные стили:
- Измените ID главного контента на каждой странице (lion, tiger, jaguar и т. д.).
- Добавьте CSS-правила для каждого ID для установки фоновых изображений.
- Обновите
и H1 на странице.</li></ul><p class="">Пример: для страницы Lion установите id=”lion” и создайте правило #lion { background-image: url(“Images/largelion.png”); }</p><h2 class="text-2xl font-bold py-2" id="h2-13">Шаг 10: Тестирование в браузере и отладка</h2><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/db7e6a06-27c0-43d5-adce-f3724a03e085.jpg" alt="real time preview in dreamweaver" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><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="">Доступность (контраст, вкладки клавиатуры, aria-метки).</li><li class="">Корректные пути к ресурсам (изображения, CSS, JS).</li><li class="">Валидность HTML/CSS (валидаторы W3C).</li></ul><p class="">Совет: тестируйте в нескольких браузерах и мобильных устройствах; иногда визуализация шрифтов и размеров отличается.</p><h2 class="text-2xl font-bold py-2" id="h2-14">Размещение сайта (хостинг)</h2><p class="">Для простого статического сайта хороши следующие варианты:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Облачное хранилище: AWS S3 + CloudFront (низкая стоимость, масштабируемость).</li><li class="">Статические хостинги: Netlify, Vercel (быстрая деплойка, CI).</li><li class="">Традиционный веб-хостинг (FTP/SFTP загрузка).</li></ul><p class="">Выбор зависит от требований: нужен ли серверный рендеринг, формы/бекенд или только статический контент.</p><h2 class="text-2xl font-bold py-2" id="h2-15">Полный HTML проекта</h2><p class="">Ниже — исходный HTML вашего шаблона. Скопируйте его в файл template.dwt или используйте как отправную точку.</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!