Создание веб-сайта для кофейни: 9 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-02-01 14:42

В этом руководстве я покажу вам, как сделать простой веб-сайт, отображающий кафе рядом с вами, с помощью Google Maps, HTML и CSS.

Запасы

Компьютер

Текстовый редактор (я использую Atom)

Wi-Fi соединение

Шаг 1. Выберите текстовый редактор

Я использую Atom, который можно скачать здесь. Как только он будет загружен, откройте его, создайте новый проект.

Шаг 2: Создайте свой новый проект

1. Открыть Атом
2. Найти файл
3. Под файлом нажмите новый
4. в левом нижнем углу (mac) будет кнопка для создания новой папки
5. назовите свою папку "Веб-сайт карты"
6. Нажмите открыть в правом нижнем углу

Шаг 3. Создайте свой Index.html

1. Добавьте новый файл в свою папку (в атоме щелкните папку правой кнопкой мыши и нажмите «Создать»)
2. Назовите этот файл "Index.html"
3. Добавьте эту базовую структуру HTML, она используется в каждом проекте HTML:

Шаг 4. Получите карту

1. Посетите карты Google здесь: Карты Google
2. Искать кофе
3. вы должны найти все кофейни в вашем районе
4. щелкните три строчки рядом с кофе
5. найти поделиться или встроить карту
6. выберите встроить карту
7. Выберите размер карты (я использовал Large) и окончательно укажите свое местоположение.
8. нажмите копировать HTML

Шаг 5: Добавьте на сайт

1. Вернитесь к файлу HTML.
2. между двумя тегами '' вставьте этот код:

'

КОФЕЙНЫЕ МАГАЗИНЫ БЛИЖАЙШИЕ С ВАМИ

"ВСТРОЕННЫЙ КОД ИЗ GOOGLE КАРТ"

'

Шаг 6. Предварительный просмотр

Первая часть сделана!

сохраните файл и найдите его на своем компьютере. Дважды щелкните его, и он откроется в браузере по умолчанию для предварительного просмотра.

Шаг 7. Сделайте вид лучше

1. Между двумя тегами добавьте "Кофейни рядом со мной".
2. Добавьте новый файл так же, как вы создали Index.html, но назовите его Style.css.
3. вернувшись к HTML-файлу, напишите этот код над заголовком"
4. Зайдите в google images и скачайте симпатичный клипарт с чашкой кофе
5. Добавьте изображение в папку, содержащую остальные наши файлы
6. в файле CSS напишите следующий код: 'body {
7. background-image: url (НАЗВАНИЕ ИЗОБРАЖЕНИЯ);
8. размер фона: обложка;
9. }'

Шаг 8: Улучшение внешнего вида, часть 2

1. если мы сейчас сохраним и просмотрим, то увидим, что фон веб-сайтов теперь выложен плиткой с нашими кофейными чашками.
2. К сожалению, наш заголовок читать сложно
3. Итак, в CSS под "body {}" добавьте следующий код: h1 {
4. фоновый цвет = rgb (255, 255, 255);
5. размер шрифта = 40 пикселей;
6. }

Шаг 9: ПЕРЕСМОТР

Вот и все! Готово. Вы изучили основы HTML, CSS и встроенного кода. Молодец. Вы можете редактировать код, чтобы он соответствовал вашему вкусу и отображал карту всего, что вы хотите. С этого момента вы можете продолжить свой путь к созданию веб-сайта и постоянно совершенствоваться.