Привет, дорогие друзья сегодня мы напишем атр программу: ссылка на программу! В которой вы сможете рисовать!!! Если вы не хотите писать код или не умеете вы можете просто перейти по ссылке и порисовать.
Ну, что ж я надеюсь вас уже заинтересовал, если это так, тогда давайте приступим к созданию проекта. Сразу говорю проект несложный, сможет выполнить каждый, даже если вы в самом начале изучения фронтенда.
И так, создаём папку в любом удобном для вас месте и называем её, как вы её назовёте не имеет смысла. Далее, заходим в неё и создаём файл с расширением .html, у меня это файл index.html. Чтобы создать такой файл, надо создать пустой текстовый документ и переименовать его в index.html другие файлы будем создавать аналогично. В этой же папке создаём ещё папку и называем её style, заходим в неё и создаём в ней файл main.css. Затем выходим из этой папки обратно в корневую и там создаём ещё одну папку, которую назовём script. Заходим в только что созданную папку и создаём в ней файл script.js.
Должно получится в корневой папке так:
Далее открываем наш проект в редакторе кода, я пользуюсь Visual Studio Code. Мне надо эту корневую папку добавить в рабочую область, я её просто перетаскиваю в соответствующий столбец.
Теперь нажимаем на файл index.html и набираем следующий код, который представлен на скрине ниже. Напоминаю: готовый проект вы сможете скачать с гугл-диска, перейдя по ссылке в конце данной статьи.
Если у вас нет редактора кода, то вы можете писать код и через блокнот, но вы сами понимаете, что подсветки синтаксиса там никакой не будет. Чтобы писать код через блокнот, надо нажать на файл правой кнопкой мыши и выбрать пункт "открыть с помощью", затем выбираем программу блокнот. У вас тогда будет это выглядеть следующим образом:
Далее подключаем к нашему проекту файл с расширением css, где будут храниться стили нашего сайта. Чтобы подключить этот файл, надо ввести следующую команду: <link rel="stylesheet" href="./style/main.css"> в тег <head></Head>, как это показано на скрине ниже.
Теперь подключаем скрипт, введя в тег body следующий код: <script src="./script/script.js"></script>
Отлично! Все зависимые файлы теперь подключены к нашему файлу index.html
Начнём заполнять наш файл index.html контентом. Создадим родительский тег div и присвоим ему класс container. И в него поместим ещё 3 дочерних тега h1, div и button, добавив им классы. В теге body должен получится следующий код:
<div class="container">
<h1 class="title-site">Рисуй по-своему!</h1>
<div class="pole"></div>
<button class="knop" id="button">Сбросить?</button>
</div>
В тег h1 мы поместим название нашего сайта и добавим ему класс "title-site". Тег div оставим пока пустым, но добавим ему класс "pole". Тег button создаёт кнопку, добавим внутрь этого тега текст "Сбросить?", так как после нажатия на эту кнопку мы будем очищать наш клетчатый фон. И добавим этому тегу класс knop, чтобы эту кнопку позже стилизовать. Также добавим id, чтобы потом кнопку было легко найти, когда будем использовать JavaScript
А чтобы посмотреть промежуточный результат нашей работы, надо два раза нажать ЛКМ на файл index.html, этот файл должен открыться в браузере. Если он не открывается не ы браузере, а в другой программе, то надо щёлкнуть по файлу index.html ПКМ, потом нажать "открыть с помощью", выбрать какой-нибудь браузер. На данный момент у вас должно быть так:
Теперь в тег div с классом "pole" мы добавляем тег div с классом "stroka". И в только созданный тег div мы записываем ещё 5 тегов div уже без каких-либо классов. Должно получится так:
Вписанный код копируем и вставляем его под этим блоком 4 раза. То есть получается, каждый div без классов это кубик, а каждый div с классом "stroka", это строка состоящая из 5 кубиков. А тег div с классом "pole" и является нашим рисовальным полем. У вас должно получится вот так:
Ура, html разметку мы закончили!
Теперь приступим к стилизации нашего проекта, открываем файл main.css. Css свойства задаются по классам, то есть, если мы хотим задать свойства тегу h1, заголовку нашего сайта, то нам нужно обратиться к нему по классу, мы ставим точку и вводим название класса, у нас это title-class. Затем ставим через пробел скобки {} и в них записываем свойства. Например, запишем такие свойства:
Обо всех свойствах я рассказывать не буду, так как можно легко загуглить и узнать, что они делают. Но о некоторых основных я расскажу:
- width - задаёт ширину элементу (например, width: 400px; - это означает ширина элемента будет 400px);
- height - задаёт высоту элемента;
- margin - задаёт отступы элемента (margin-top задаёт отступ сверху, margin-left задаёт отступ слева и т.д.)
- padding - задаёт поля элемента;
- color - задаёт цвет элемента (например, color: green, элемент будет зелёным);
- background - задаёт цвет фона элемента;
- margin: 0 auto - выравнивает блочный элемент по центру;
- text-align: center - выравнивает строчный элемент по центру;
Существует большое количество таких стилей, с которыми вы можете ознакомиться на сайте http://htmlbook.ru/css.
Вот, что у вас должно получится в файле css:
Теперь вы можете взглянуть на вашу работу в браузере. Вот, что должно у вас получится:
Теперь приступим к написанию кода JavaScript. Открываем файл script.js. Найдём элементы div с классом "stroka" по классу и запишем полученный "массив"(это не совсем массив) в переменную stroka.
С помощью метода ForEach переберём массив stroka, и относительно каждого элемента "массива" stroka найдём ещё массивы, но уже с div. Затем каждый массив c div-элементами мы перебираем. И на полученные единичные div-ы мы вешаем слушатель события на click. Когда происходит клик мы меняем свойство данного элемента, а именно мы меняем цвет фона на красный.
Теперь находим нашу кнопку аналогичный методом только по id, поставив вместо точки знак диез. Вешаем на кнопку слушатель события на клик. И при клике меняем фон всех элементов div на белый, уже знакомым для нас методом.
Вот и всё наше приложение готово!
Вот, что я нарисовал уже в этой программе, а что вы нарисовали?
Если нравится подобный контент, то ставь лайк и подписывайся на канал, чтобы поддержать меня и смотивировать на создание нового подобного контента.
Вот ссылка на готовую программу: ссылка на готовую программу
А вот и обещанная ссылка на готовы код арт программы: ссылка на исходный код - Gogle Диск
Всем удачи! Всем пока!
#it-технологии #арт программа #Html, css, Js #художественная программа для дизайнеров #html, css, js для новичков