Как создать первый сайт в 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 на странице.
Пример простых правил:
- #lion { background-image: url(“Images/largelion.png”); }
- #tiger { background-image: url(“Images/tiger.png”); }
Критерии приёмки:
- Навигация работает и ведёт на корректные страницы.
- Для каждой страницы задан заголовок
и H1. - Фоновые изображения загрузились и масштабируются корректно.
10. Тестирование в браузере
Dreamweaver позволяет просматривать в реальном времени:
- File → Real‑Time Preview → выберите браузер.
Проверяйте сайт в нескольких браузерах и на мобильных экранах. Особенности CSS (особенно flexbox) могут отличаться в старых браузерах.
Публикация сайта — варианты
- FTP/SFTP: стандартный способ для динамических хостов. Настройте подключение в Dreamweaver.
- Статическая публикация на AWS S3 + CloudFront: дешёвая и быстрая для статических сайтов.
- Git + CI/CD: храните сайт в репозитории и деплойте через скрипты.
- Хосты типа Netlify/Vercel: удобны для статических сайтов, автоматический деплой из Git.
Короткая инструкция по AWS S3:
- Создайте бакет с названием сайта.
- Включите статический хостинг и укажите index.html и error.html.
- Настройте политику доступа или подключите CloudFront для HTTPS.
Примечание про безопасность: не храните секреты и ключи доступа в репозиториях. Используйте IAM роли и переменные окружения.
Полный HTML и CSS проекта
Ниже приведён исходный HTML и CSS, использованный в руководстве. Скопируйте их в соответствующие файлы и адаптируйте под свой контент.
`
Untitled Document
MakeUseOf Example Site
This is a lion!
`
`@charset "utf-8";
body {
margin: 0;
background: black;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
display: flex;
background: black;
padding: 20px;
}
.site-logo {
width: 30%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.main-menu {
width: 70%;
text-align: right;
}
.main-menu a {
padding: 10px;
text-decoration: none;
color: white;
}
.main-content {
height: 100vh;
padding: 20px;
background-size: cover;
}
.main-content h1 {
color: white;
font-size: 10rem;
text-transform: uppercase;
}
#lion {
background-image: url("Images/largelion.png");
}
#tiger {
background-image: url("Images/tiger.png");
}
#jaguar {
background-image: url("Images/jaguar.png");
}
#housecat {
background-image: url("Images/housecat.png");
}
#allcats {
background-image: url("Images/loadsofcats.png");
}`
Эти файлы — исходная точка. Изменяйте их, добавляя адаптивность, оптимизацию изображений и семантическую разметку.
Лучшие практики и советы
- Оптимизируйте изображения (WebP, правильные размеры).
- Используйте относительные пути для переносимости проекта.
- Добавьте мета‑теги для SEO: title, description, viewport.
- Проверяйте контраст цветов для доступности.
- Используйте семантические теги (header, nav, main, footer).
Проверка и отладка — типичные проблемы и решения
Проблема: фон не отображается.
- Проверьте путь к изображению (регистр и относительный путь).
- Убедитесь, что файл загружен на хост.
Проблема: шрифт не подключается.
- Проверьте @font‑face или ссылку на CDN.
- Убедитесь, что поле font‑family указано корректно.
Проблема: мобильная верстка ломается.
- Добавьте meta name=”viewport” content=”width=device-width, initial-scale=1”.
- Используйте медиазапросы для размеров шрифтов и отступов.
Контроль качества и тестовые сценарии
Тест кейсы для приёмки:
- Навигация по всем ссылкам без ошибок 404.
- Отображение страниц в Chrome, Firefox, Safari и мобильных браузерах.
- Проверка скорости загрузки (изображения оптимизированы).
- Проверка работы шаблона: изменение области редактирования отражается только в содержимом.
Роль‑ориентированные чеклисты
Дизайнер:
- Проверил макет в нескольких разрешениях.
- Подготовил изображения и спрайты.
- Уточнил цветовую палитру и типографику.
Разработчик:
- Настроил структуру папок и пути.
- Подключил CSS и убедился в кроссбраузерности.
- Провёл базовые тесты и настроил репозиторий.
Контент‑менеджер:
- Добавил тексты, метаданные и alt для всех изображений.
- Проверил орфографию и читаемость.
Альтернативные подходы
- Использовать редактор кода (VS Code) и шаблонизатор, если нужен контроль версий и CI/CD.
- Выбрать статический генератор (Gatsby, Hugo) при наличии большого числа контента и необходимости шаблонов.
- Использовать CMS (WordPress) при частых обновлениях контента и работе с несколькими редакторами.
Короткая методология для повторяемых проектов
- Спланируйте структуру (список страниц и папки).
- Создайте шаблон и области для редактирования.
- Настройте CSS и базовую типографику.
- Создайте страницы, заполните контент.
- Тестируйте, оптимизируйте и деплойте.
Список приёмки проекта
- Все ссылки работают.
- Заголовки и мета‑описания заполнены.
- Изображения оптимизированы и имеют alt.
- Адаптивность в основных разрешениях.
- SSL и CDN настроены, если требуется.
Краткое резюме
Dreamweaver сочетает визуальные инструменты и доступ к коду. Это делает его удобным для создания шаблонных статических сайтов. Следуя шагам этого руководства, вы быстро получите прототип сайта, который затем легко адаптировать, протестировать и опубликовать.
Важно: по мере роста проекта подумайте о внедрении контроля версий и автоматизации деплоя.
(Внизу приведены HTML и CSS для копирования и адаптации.)
Похожие материалы
Notion: управление проектами — полное руководство
Виджет Google Tasks на Android — быстрый гайд
Запуск Sticky Notes при включении Windows 11
Как исправить WDF_Violation в Windows
Добавить Windows 11 в меню GRUB