XV Международная студенческая научная конференция Студенческий научный форум - 2023
Web-Разработка сайта
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
Хочу вас познакомить с правильной разработкой сайта, как и что нужно для того, чтобы вы смогли сделать свой сайт.
Это будет краткое описание всего процесса создания.
На самом деле сделать сайт — это не так сложно, как вам может показаться на первый взгляд, но и для этого нужно приложить усилие.
Что бы сделать свой сайт вам нужно точно знать и соблюдать все нижеуказанные правила и пункты
Нужно написать ТЗ (Техническое задание) по своему техническому заданию вы сможете ориентироваться и соблюдать последовательность
действий.
Скелет сайта.
Создание дизайна страниц.
Верстка.
Что такое ТЗ (Техническое задание)
ТЗ — это документ, который подробно и однозначно отражает требования к Вашему будущему сайту.
Сайт создают именно на основе ТЗ. Чем более подробным и однозначным оно будет, тем больше Ваш новый сайт будет соответствовать Вашим ожиданиям.
Техническое задание на сайт должно быть. Оно станет Вашим щитом, в этот документ Вы, в случае чего, сможете ткнуть пальцем недобросовестному разработчику и потребовать привести Ваш сайт в соответствие с ним.
ТЗ- может составить, как и исполнитель так и заказчик.
В Техническом задании вы должны расписать сайт полностью как он должен выглядеть, как и название сайта так и полную цветовую палитру
Показать в каких версиях браузера будет открываться ваш сайт продемонстрировать исполнителю мокапи сайта.
Мокапы — это пример того, как будет выглядеть ваша страничка на сайте
Что бы создать сайт вам нужно понять для чего он вам вообще нужен, и какая будет у него целевая аудитория вы должны расписать полностью все плюсы и минусы.
После написание ТЗ, когда у вас есть документально представление как будет выглядеть ваш сайт и что нужно сделать можно приступить к Скелету сайта.
Скелет сайта это - структура HTML – документа определяет базовой “Скелет“ для будущего сайта
Другими словами, вы делает страничку (например, главную) того, как будет выглядеть сайт в документе HTML.
Шаблон с чего начинается Скелет сайта:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<head> </head> — этошапка (верх) сайта.
<body></bode> — Тело (содержимое страницы)
<footer></footer> — это подвал (низ) сайта.
Теги.
Тег — это специальное служебное слово, заключенное в угловые скобки. Его ещё называют «элемент HTML». Тегов в языке HTML много и каждый что-то делает с контентом, который обычно находится внутри скобок или между тегами.
Если тег парный, то тегу <ТЕГ> соответствует </ТЕГ>
Теги сайта, существует огромное количество различных команд для написание вашего сайта
<HTML></HTML> - Обозначение html документа
<HEAD></HEAD> - Заголовок
<TITLE></TITLE> - Имя документа
<BODY></BODY> - Тело (содержимое страницы)
<META> - Метаинформация
<P></P> - Параграф
<nav></nav> - Навигация
Это малая часть тегов, которые вы будете использовать при создания сайта.
Дизайн
К дизайну можно будет приступать после создания Скелета сайта.
Вам нужно изобразить как будет выглядеть ваша страничка (личный кабинет, Главная страничка, страничка 404 и т.д.)
В общем нужно изобразить полный сайт в виде картинок (расположение кнопок, где будет объявление или же статья).
Для создания сайта вы можете использовать любую программу для создания дизайнов это может быть, как и фотошоп так и сайты конструкторы я работал через программу Figma.
Figma позволит вам воплотить все задумки заказчика.
Верстка
Вёрстка веб-страниц — создание структуры гипертекстового документа на основе HTML-разметки, как правило, при использовании таблиц стилей и клиентских сценариев, таким образом, чтобы элементы дизайна выглядели аналогично макету.
Вам нужно будет от верстать сайт это чем-то похоже на скелет, но в отличие от скелета вы будете писать сайт заново начиная все действия с шапки сайта (<header></header>) вы добавляете кнопки, картинки, логотип. Потопи приступаете в Тег (<body></body>) там вы верстаете остальную информация, которая прописана согласно вашему ТЗ и в конце сайта в теге (<footer></footer>) отставляете информацию сайта номер телефона, адрес, почтовый ящик.ы
С этими всеми действиями вам придётся встретится и при разработке больших сайтов и сайт визитка.
Теперь у вас есть малое представление о том, как же всё-таки создаются наши любимые сайты и самим приступить к творению.