Узнайте, как легко создать веб-страницу, используя компоненты и небольшой объем кода.
Мы будем использовать бесплатные компоненты веб-сайта из Component IO, чтобы создать базовую веб-страницу с нуля, добавляя по ходу части, которые мы можем легко редактировать с нашей онлайн-панели. Конечный продукт можно увидеть здесь, а весь код - здесь.
Начнем с пустой HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
</body>
</html>
и мы создадим сайт для фиктивной некоммерческой организации под названием The Ocean Conservation Committee. Войдите в Component IO, чтобы следовать.
Сначала перейдите на вкладку Библиотека, чтобы просмотреть набор компонентов, которые мы можем добавить на создаваемую веб-страницу. Для простоты мы можем добавлять компоненты, начиная с верха нашей веб-страницы до низа страницы, поэтому давайте начнем с навигационной панели в верхней части страницы. Найдите в библиотеке панель навигации с логотипом:
Щелкните по первому результату поиска. Этот компонент выглядит так, как будто он соответствует нашим потребностям, поэтому нажмите кнопку Добавить в свой проект.
Нажав Добавить в свой проект, мы попадаем на экран с информацией о том, как установить наш новый компонент панели навигации.
Скопируйте код установки и вставьте его в HTML-код своей веб-страницы между тегами <body>, чтобы ваш файл выглядел так:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<component key=elmob></component>
<!-— Paste script once per page at the bottom -->
<script project=”876MN8" src=”https://cdn.component.io/v1"></script>
</body>
</html>
Код, который мы добавили, состоит из 2 частей. Первая часть - это заполнитель для компонента навигационной панели:
<component key=elmob></component>
а вторая часть - это скрипт, который создает наши компоненты, когда браузер загружает нашу веб-страницу:
<script project=”876MN8" src=”https://cdn.component.io/v1"></script>
Если мы сохраним HTML-файл и откроем его в нашем браузере, мы увидим, что компонент загружается для веб-страницы:
Компонент рабочий!
Теперь мы можем настроить нашу навигационную панель так, чтобы она выглядела так, как мы хотим. Вернувшись на панель мониторинга компонентов ввода-вывода, щелкните вкладку с надписью «Панель навигации с логотипом». Здесь вы можете настроить изображение, цвет и метки логотипа компонента.
Поиграйте с компонентом, чтобы он выглядел так, как вы хотите. Мы загрузили логотип и отредактировали ссылки, чтобы настроить:
Затем давайте добавим изображение баннера, чтобы пользователи точно знали, где они находятся, когда они посещают наш сайт. Вернитесь в Библиотеку и найдите изображение.
Как и раньше, нажмите на первый результат, чтобы лучше рассмотреть:
Теперь нажмите Добавить в свой проект. Это снова возвращает нас к экрану установки. Однако, поскольку у нас уже есть тег Component IO <script> в нашем HTML-файле, нам нужно только скопировать и вставить новый тег <component>.
Независимо от того, сколько компонентов вы добавляете на веб-страницу, вам нужно включить тег
<script>только один раз.
Теперь наш HTML-файл выглядит так:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<component key=elmob></component> <!-- Navbar menu -->
<component key=edmdo></component> <!-- Image -->
<!-— Paste script once per page at the bottom -->
<script project=”876MN8" src=”https://cdn.component.io/v1"></script>
</body>
</html>
Если мы сохраним HTML-файл и перезагрузим нашу страницу в браузере, теперь на ней будет панель навигации и изображение:
Чтобы использовать собственное изображение, мы можем вернуться к панели управления Component IO и щелкнуть вкладку с надписью «Image». Щелкните изображение слева и выберите «Загрузить», чтобы загрузить изображение нашего логотипа.
Мы загрузили баннер Комитета по охране океана.
И теперь, когда мы перезагружаем нашу веб-страницу, новое изображение показывает:
С этого момента мы можем продолжать добавлять контент на нашу веб-страницу с помощью компонентов из библиотеки. Для следующего компонента мы настроим содержимое и код на панели управления.
Давайте найдем визуально интересный способ отобразить миссию нашей некоммерческой организации. Мы будем использовать текст, поэтому давайте поищем «текст» в библиотеке компонентов, выберем «Карточку наложения изображений» и добавим ее в наш проект.
Мы можем заменить фоновое изображение на более подходящее для нашего сайта, и мы можем использовать текстовую область, чтобы наложить изображение на текст нашей миссии. Мы также изменим CSS компонента, чтобы он выглядел именно так, как мы хотим. Мы нашли красивое черно-белое изображение кита:
После того, как мы загрузили желаемое изображение и набрали понравившийся текст, мы видим, что цвет текста по умолчанию - белый, который исчезает на выбранном фоновом изображении:
Давайте изменим цвет текста на черный, чтобы увеличить контраст изображения и облегчить чтение текста. Для этого перейдем на вкладку «Код» на панели инструментов и добавим CSS в верхний правый раздел, чтобы изменить внешний вид:
background: lightblue;
padding: 40px 20px;
.card {
max-width: 600px;
margin: 40px auto;
}
.card-img {
max-width: 100%;
height: auto;
}
.card-img-overlay {
text-align: center;
color: rgb(0, 51, 102);
text-shadow: 2px 2px #ffffff;
font-weight: bold;
}
Затем нажмите кнопку «Сохранить», чтобы посмотреть, как это выглядит.
Выглядит отлично! Еще раз, давайте скопируем код установки в наш HTML-файл, выбрав вкладку «установка» и скопировав строку кода для нашего компонента. Помните: нам не нужно добавлять скрипт, потому что мы уже сделали это один раз в нашем HTML-файле.
Мы добавили всего 3 компонента, и наш сайт уже выглядит неплохо!
Повторите процесс добавления компонентов в свой проект столько, сколько захотите, и настройте их с помощью панели инструментов. Другие компоненты, которые мы хотим добавить в этот проект:
Подсказки с призывом к действию
Связывает наших посетителей со страницей, на которой они могут сделать пожертвования в пользу нашей некоммерческой организации.
Блок содержимого
Блок текста, который мы можем поместить куда угодно, а затем отредактировать.
Карусель (слайд-шоу)
Визуальное слайд-шоу с дополнительной информацией о OCC.
Раздел команды
Легко редактируемый раздел для добавления членов нашей команды.
Подписка на рассылку новостей
Простой способ собирать электронные письма пользователей, который работает автоматически.
Ссылки на социальные сети
Ссылки на аккаунты в социальных сетях.
По завершении мы еще раз просмотрим наш HTML-файл, прежде чем опубликовать его в Интернете.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body component-cloak> <component key=elmob></component> <!-- Navigation menu --> <component key=edmdo></component> <!-- Banner image --> <component key=eanar></component> <!-- Mission statement --> <component key=enman id="donate"></component> <!-- Donate now --> <component key=nknlr id="about"></component> <!-- About OCC --> <component key=ekbbo></component> <!-- Carousel (slideshow) --> <component key=enmmm id="team"></component> <!-- Our team --> <component key=eankd id="signup"></component> <!-- Signup form --> <component key=kdkbk></component> <!-- Social media links --> <!-- Component IO script --> <script project="876MN8" src="https://cdn.component.io/v1"></script> </body> </html>
Мы решили добавлять только теги ‹component›, но мы могли бы так же легко поместить теги ‹component› внутри любых других тегов, таких как ‹p›, ‹div›, ‹section› и т. Д. Вы можете разместить компоненты где угодно на своей странице, и они будут работать одинаково.
Наконец, если вы следовали инструкциям и хотите разместить свой веб-сайт, вы можете сделать это, загрузив свой HTML-файл в проект GitHub, а затем следуя инструкциям здесь: https://pages.github.com/
Мы загрузили приведенный выше HTML-код здесь, и конечный продукт доступен для просмотра по адресу
https://component-io.github.io/occ/
Теперь вы создали веб-страницу, полную содержания, которое можно легко изменить и настроить прямо из панели управления, не касаясь кода. Поздравляю!
