В мире создателей веб-сайтов с помощью перетаскивания Adobe Dreamweaver преуспел, чтобы оставаться актуальным среди конкурентов. Это программное обеспечение, оснащенное отличными функциями и множеством инструментов, облегчающих вашу жизнь, является отличным выбором для веб-дизайнеров и разработчиков.
Но как создать свой первый веб-сайт с помощью Dreamweaver?
Начало работы с Dreamweaver
Вам необходимо получить копию Adobe Dreamweaver, прежде чем вы сможете начать с ней работать, но доступна бесплатная пробная версия.
Направляйтесь к Adobe веб-сайте, войдите или зарегистрируйте учетную запись и загрузите инструмент Adobe Creative Cloud, чтобы приступить к работе. Отсюда вы можете загрузить Adobe Dreamweaver и приступить к работе с полным руководством.
В этом руководстве показано, как создать простой веб-сайт, используя в качестве основы файлы шаблонов Dreamweaver. Вы можете найти полные файлы проекта на этот репозиторий GitHub.
Шаг 1. Создайте сайт Dreamweaver
Откройте Adobe Dreamweaver и перейдите в
Сайт меню вверху страницы. Выбирать Новый сайт, затем выберите имя для своего веб-сайта и укажите место для его файла.Шаг 2: Создайте файл шаблона
Затем пришло время создать файл шаблона для вашего нового веб-сайта. Файлы шаблонов работают аналогично темам, используемым системами CMS, такими как WordPress и Shopify, только вы делаете их сами.
Нажмите на Создать новый или перейти к Файл > Новый и выбрать HTML-шаблон от тип документа список.
Это создаст базовый шаблон с уже существующим HTML. Вы будете использовать этот HTML-код для своего проекта, поэтому стоит сохранить его для следующих шагов.
Шаг 3: Создайте заголовок в шаблоне
Теперь пришло время создать раздел меню/шапки на веб-сайте в шаблоне, который вы только что создали. Перейти к Вставлять в верхней части экрана и выберите Заголовок из списка.
В этот момент откроется диалоговое окно. Добавьте имя для нового класса заголовка и нажмите ХОРОШО чтобы добавить код в ваш HTML. Он должен автоматически поместить новый код в теги, но вы можете переместить его, если вам нужно.
После этого вы также должны добавить элемент div для логотипа сайта и элемент навигации для меню сайта. Перейти к Вставлять меню и выберите Див, затем вернитесь к Вставлять меню и выберите навигация. Оба этих элемента нуждаются в собственном имени класса.
На последнем этапе этого процесса мы добавили несколько пунктов меню в наш элемент навигации. Для этого перейдите в Вставлять и выберите Гиперссылка. Мы добавили в шапку нашего сайта пять гиперссылок: «Дом», «Лев», «Тигр», «Ягуар» и «Домашний кот».
Страницы, на которые будут ссылки в шапке, еще не существуют, поэтому оставьте href свойство пустое, пока вы их не создадите.
Шаг 4: Добавьте таблицу стилей для CSS
Как видите, этот сайт выглядит не очень хорошо. Немного CSS решит эту проблему, и вы сможете легко добавить таблицу стилей в Dreamweaver. Перейти к CSS-дизайнер в правой части экрана и нажмите кнопку Плюс значок рядом с источниками. Вам просто нужно выбрать имя для вашей таблицы стилей, а остальные настройки можете оставить как есть.
Первое, что нужно сделать, это превратить заголовок в flexbox. Flexbox — это всего лишь один из способов верстки веб-страницы с помощью CSS.. Наряду с этим установлен шрифт сайта, установлен черный фон и внесены некоторые другие изменения, чтобы сайт выглядел лучше. Вы можете увидеть полный код CSS в конце статьи.
Шаг 5: Добавьте редактируемые области в шаблон
Редактируемые области создают разделы HTML, доступные для редактирования при использовании шаблона для создания других страниц. Контент нашей главной страницы идеально подходит для такого региона. Перейти к Вставлять > Шаблон > Редактируемый регион чтобы добавить редактируемый регион на вашу страницу.
Шаг 6: Добавьте изображение/текст в шаблон
Редактируемую область, которую вы только что добавили, можно использовать без дополнительного HTML, но вы все равно можете добавить ее для редактирования при создании отдельных страниц. Для начала перейдите в Вставлять и выберите Див чтобы добавить новый элемент div на ваш сайт.
Это будет работать как контейнер для текстового содержимого на странице, а также как место для добавления фонового изображения. Этот элемент имеет класс и идентификатор, поэтому разные страницы имеют разные свойства CSS. Эти уникальные фоновые узоры CSS отлично подходят, если вы хотите вывести свой веб-сайт Dreamweaver на новый уровень.
Далее перейдите к Вставлять > Заголовки > H1 чтобы добавить заголовок внутри только что добавленного элемента div. Оба этих элемента нуждаются в некотором CSS для правильной работы. У div есть значения background-image, background-size и height. Перейти к Файл > Сохранить все чтобы убедиться, что ваш шаблон обновляется.
Вы можете добавлять изображения из любой точки вашей локальной сети или Интернета, но лучше всего сохранять изображения в собственных файлах веб-сайта для быстрого доступа.
Шаг 7: Добавьте страницы с помощью шаблона
Теперь, когда у вас есть шаблон, вы можете начать добавлять несколько страниц. Перейти к Файл > Новый и выберите HTML под тип документа. Добавить Заголовок за каждую страницу, которую вы добавляете перед нажатием Создавать.
Новая страница белая и еще не имеет нашего шаблона. Когда ваша новая страница будет открыта в Dreamweaver, перейдите к Инструменты > Шаблоны и нажмите на Применить шаблон к странице. Выберите свой шаблон из списка и нажмите Выбирать для загрузки вашего шаблона. Наконец, перейдите к Файл > Сохранить как и выберите имя для своей новой страницы перед ее сохранением.
Повторяйте этот процесс, пока у вас не будет достаточно страниц для удовлетворения ваших потребностей. Для этого вам не нужно придерживаться одного шаблона; вы можете добавить новые для разных макетов страниц.
Шаг 8: Добавьте ссылки на страницы в шаблон
После добавления страниц вы можете изменить навигационные ссылки в своем шаблоне, чтобы они вели к нужным страницам. Вернитесь к своему шаблону и найдите теги A, которые вы добавили ранее. Удалите ссылку-заполнитель и нажмите кнопку кавычки открыть Просматривать меню. Отсюда вы можете выбрать правильную страницу для каждой из ваших ссылок.
Шаг 9. Исправьте CSS/HTML на новых страницах
Каждая из страниц будет выглядеть одинаково в данный момент. Есть несколько шагов, чтобы убедиться, что у них есть собственный контент; следуйте инструкциям ниже, чтобы закончить свой новый веб-сайт.
- Измените идентификатор элемента div контента на каждой странице, чтобы он отражал заголовок страницы.
- Добавьте код CSS для нового идентификатора элемента с другим фоновым изображением.
- Изменить заголовок на каждой странице
Шаг 10: протестируйте веб-сайт в своем браузере
Вы можете протестировать новый веб-сайт в выбранном веб-браузере непосредственно из Adobe Dreamweaver. Перейти к Файл > Предварительный просмотр в реальном времени и выберите браузер по вашему выбору для просмотра вашего веб-сайта. Это отлично подходит для тестирования CSS или другого кода, который совместим не со всеми браузерами.
Теперь вам просто нужно где-то разместить свой сайт. Размещение статического сайта на AWS S3 отличное место для начала.
Код HTML и CSS
<!doctype html>
<HTML>
<глава>
<мета кодировка ="утф-8">
<!-- Имя TemplateBeginEditable="название докторской диссертации" -->
<заглавие>Документ без названия</title>
<!-- TemplateEndEditable -->
<ссылка href="../страница-css.css" отн="таблица стилей" тип="текст/CSS">
</head>
<тело>
<класс заголовка ="основной заголовок">
<раздел класс ="логотип сайта">Пример сайта MakeUseOf</div>
<класс навигации ="главное меню">
<ссылка ="../Главная.html">Дом</ а><ссылка ="../Лев.html">Лев</ а><ссылка ="../Тигр.html">Тигр</ а><ссылка ="../Ягуар.html">Ягуар</ а><ссылка ="../Каталог дома.html">Домашняя кошка</ а>
</nav>
</header>
<!-- Имя TemplateBeginEditable="MainContentRegion" -->
<раздел класс ="основное содержание" идентификатор ="лев">
<h1>Это лев!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Этот HTML создает готовый веб-сайт для нашего проекта. Вы можете разобрать его, чтобы посмотреть, как он работает, но мы рекомендуем вам создать собственный HTML-код для своего веб-сайта.
@charset "утф-8";
тело {
маржа: 0;
фон: черный;
семейство шрифтов: Gotham, "Гельветика Ной", Гельветика, Ариал, "без засечек";
}
.main-заголовок {
дисплей: гибкий;
фон: черный;
отступ: 20 пикселей;
}
.сайт-логотип {
ширина: 30%;
белый цвет;
вес шрифта: полужирный;
преобразование текста: верхний регистр;
}
.главное меню {
ширина: 70%;
выравнивание текста: вправо;
}
.главное менюа {
отступ: 10 пикселей;
текстовое оформление: нет;
белый цвет;
}
.основное содержание {
высота: 100вх;
отступ: 20 пикселей;
размер фона: обложка;
}
.основное содержаниеh1 {
белый цвет;
размер шрифта: 10rem;
преобразование текста: верхний регистр;
}
#лев {
фоновое изображение: URL("Изображения/largelion.png");
}
#тигр {
фоновое изображение: URL("Изображения/тигр.png");
}
#ягуар {
фоновое изображение: URL("Изображения/jaguar.png");
}
#Домашняя кошка {
фоновое изображение: URL("Изображения/котенок.png");
}
#всекоты {
фоновое изображение: URL("Изображения/loadsofcats.png");
}Этот CSS также является частью готового проекта. Как и в случае с HTML, который мы рассмотрели, вы можете поиграть с этим кодом, чтобы сделать этот веб-сайт своим собственным.
Создание веб-сайтов с помощью Adobe Dreamweaver
Dreamweaver может показаться не таким простым в использовании, как такие инструменты, как WordPress или Squarespace, но он дает вам гораздо больше возможностей. Это руководство — отличная отправная точка, но вам предстоит еще многому научиться, и вам стоит изучить Dreamweaver самостоятельно.