5530

МИНОБРНАУКИ РОССИИ

Федеральное государственное бюджетное образовательное учреждение высшего образования

«Нижегородский государственный архитектурно-строительный университет»

Родионова С.В.

ВЕБ-ПРОЕКТИРОВАНИЕ

Учебно-методическое пособие по подготовке к лекциям, практическим занятиям

(включая рекомендации по организации самостоятельной работы),

по выполнению курсовой работы

для обучающихся по дисциплине «Веб-проектирование»

по направлению подготовки 09.03.04 Программная инженерия направленность (профиль) Разработка программно-информационных систем

Нижний Новгород

2022

УДК 004.9

Родионова С.В. / Веб-проектирование: учебно-методическое пособие / С.В. Родионова; Нижегородский государственный архитектурно-строительный университет – Нижний Новгород: ННГАСУ, 2022. – 14 с.– Текст: электронный.

В настоящем учебно-методическом пособии по дисциплине «Веб-проектирование» даются конкретные рекомендации учащимся для освоения как основного, так и дополнительного материала дисциплины и тем самым способствующие достижению целей, обозначенных в учебной программе дисциплины. Цель учебно-методического пособия — это помощь в усвоении лекций, в подготовке к практическим занятиям, а также в написании курсовой работы.

Учебно-методическое пособие предназначено для обучающихся в ННГАСУ по дисциплине «Веб-проектирование» по направлению подготовки 09.03.04 Программная инженерия, направленность (профиль) Разработка программно-информационных систем.

© С.В. Родионова, 2022

© ННГАСУ, 2022

2

Оглавление

3

Компьютерные сети. Иерархия сетей в Интернет. WEB - технологии в сетях различного уровня. СетиОбъединения сетей провайдеров Понятия ISP, POP, NAP, "последняя миля". Варианты доступа в Интернет для различных категорий пользователей. Передача информации в Интернет. Стек протоколов TCP/IP. Процесс IP - маршрутизации. Надежность передачи информации в Интернет. Адресация в Интернет. Система доменных имен. DNS - сервер. Браузеры и серверы. Прокси-сервер. Формат URL - адреса. Протоколы прикладного уровня модели OSI. Сервис WWW. Гипертекст и Web - страницы. HTTP сервер и клиент. Заголовки запросов и ответов по HTTP – протоколу Электронная почта, протоколы SMTP, POP3, почтовый сервер и клиент. Назначение FTP протокола, формат адреса FTP - ресурса, FTP - сервер и клиент. Назначение протоколов Telnet и NNTP. Чат, службы мгновенной почты, сети IRC, IP - телефония, видео конференции, мобильный Интернет на основе WAP – протокола.

Основы языка разметки HTMLТехнологии создания Web – приложений

Виды тегов. Правила написания атрибутов и тегов. Теги заголовков, текстов. Применение логических и физических стилей. Задание параметров текста. Выравнивание текста. Создание маркированных, нумерованных и определенных списков. Создание вложенных списков. Создание линий. Назначение графического фона и задание цвета страницы. Создание таблиц. Тег table и его атрибуты. Тег создания строк и его атрибуты. Тег создания ячеек и его атрибуты. Объединение ячеек. Тег создания заголовков таблицы. Вставка таблицы в ячейку таблицы (создание вложенных таблиц).

Основы CSS

Создание таблицы стилей для страницы. Создание стиля для тега. Создание стиля для всего сайта. Применение стилей для форм, для списка, для изображений, ссылок, таблиц.

Технологии создания Web - приложений

Статические и динамические HTML - страницы. Язык гипертекстовой разметки документов HTML. Технологии исполняющиеся на стороне клиента и сервера. Механизм работы Web - сервера. Переменные окружения сервера. Технология CGI, заголовки ответов и запросов по CGI. Серверные сценарии PERL, PHP, ASP, SSI. Технологии Java, Java - script, VB - script. Инструментарий создания Web - приложений.

Основы Java Script

Назначение Java Script. Синтаксис языка. Свойства, методы, события языка. Основы объектно-ориентированного программирования (ООП) в JavaScript.

1.3Вспомогательная литература для изучения дисциплины

1.Серова, Е. А.. Использование web-технологий при создании информационных систем : учебно-методическое пособие. / Серова, Е. А., Шилова, Л. А., Евстратов, В. С. ; Е. А. Серова, Л. А. Шилова, В. С. Евстратов. – Москва : МИСИ-МГСУ, ЭБС АСВ, 2020. – 55 с. – URL: URL: http://www.iprbookshop.ru/101866.html. – ISBN ISBN 978-5-7264-2203-9.

2.Столбовский, Д. Н.. Разработка Web-приложений ASP.NET с использованием Visual Studio

.NET : учебное пособие. / Столбовский, Д. Н. ; Д. Н. Столбовский. – Москва, Саратов : ИнтернетУниверситет Информационных Технологий (ИНТУИТ), Ай Пи Ар Медиа, 2020. – 375 с. – URL: URL: http://www.iprbookshop.ru/89469.html. – ISBN ISBN 978-5-4497-0370-5.

3.Фролов, А. Б.. Web-сайт. Разработка, создание, сопровождение : учебное пособие. / Фролов, А. Б., Нагаева, И. А., Кузнецов, И. А., Нагаевой, И. А. ; А. Б. Фролов, И. А. Нагаева, И. А. Кузнецов; под редакцией И. А. Нагаевой. – Саратов : Вузовское образование, 2020. – 355 с. – URL: URL: http://www.iprbookshop.ru/93989.html. – ISBN ISBN 978-5-4487-0700-1.

5

2. Методические указания по подготовке к лекциям

2.1 Общие рекомендации по работе на лекциях

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

фундаментальным вопросам изучаемой дисциплины.

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

Личное общение на лекции преподавателя со студентами предоставляет большие возможности для реализации образовательных и воспитательных целей.

При подготовке к лекционным занятиям студенты должны ознакомиться с презентаций,

предлагаемой преподавателем, отметить непонятные термины и положения, подготовить вопросы с целью уточнения правильности понимания. Рекомендуется приходить на лекцию подготовленным, так как в этом случае лекция может быть проведена в интерактивном режиме,

что способствует повышению эффективности лекционных занятий.

2.2 Общие рекомендации при работе с конспектом лекций

В ходе лекционных занятий необходимо вести конспектирование учебного материала.

Конспект помогает внимательно слушать, лучше запоминать в процессе осмысленного записывания, обеспечивает наличие опорных материалов при подготовке к семинару, зачету,

экзамену.

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

В случае неясности по тем или иным вопросам необходимо задавать преподавателю

6

уточняющие вопросы. Следует ясно понимать, что отсутствие вопросов без обсуждения означает в

большинстве случаев неусвоенность материала дисциплины.

2.3 Контрольные вопросы

Что такое HTML Элементы и атрибуты Создание документа Разновидности синтаксиса

Семантическая структура страницы Элемент article

Элемент section Элемент nav

Элементы header, footer и address

Элемент aside Элемент main

Основы CSS3. Селекторы Введение в стили Селекторы Селекторы потомков

Селекторы дочерних элементов Селекторы элементов одного уровня Псевдоклассы Псевдоклассы дочерних элементов Псевдоклассы форм Псевдоэлементы Селекторы атрибутов Наследование стилей Каскадность стилей

Псевдоклассы :is() и :where() Создание макета страницы и верстка Блочная верстка.

Вложенные плавающие блоки Выравнивание столбцов по высоте Свойство display

Создание панели навигации Выравнивание плавающих элементов Создание простейшего макета Позиционирование Фиксированное позиционирование Что такое Flexbox. Flex Container Направление flex-direction

flex-wrap

flex-flow. Порядок элементов Выравнивание элементов. justify-content

Выравнивание элементов. align-items и align-self Выравнивание строк и столбцов. align-content Управление элементами. flex-basis, flex-shrink и flex-grow Многоколоночный дизайн на Flexbox

7

Макет страницы на Flexbox

Что такое JavaScript

Выполнение кода javascript Подключение внешнего файла JavaScript Консоль браузера и console.log Переменные и константы Типы данных Операции

Условные операторы ?: и ?? Преобразование данных Введение в массивы Условные конструкции Циклы Функции

Параметры функции Результат функции

Область видимости переменных Замыкания и функции IIFE Паттерн Модуль Рекурсивные функции Переопределение функций

Передача параметров по значению и по ссылке Стрелочные функции

Создание массива и объект Array Массивы и spread-оператор Операции с массивами Наследование массивов Встроенные объекты

Объект Date. Работа с датами

Объект Math. Математические операции Объект Number

Символы

Работа с браузером и BOM

Browser Object Model и объект window

Управление окнами

История браузера. Объект history

Объект location Объект navigator

Таймеры Введение в DOM

Объект document. Поиск элементов Свойства объекта document Объект Node. Навигация по DOM

Создание, добавление и удаление элементов веб-станицы Объект Element. Управление элементами

Изменение стиля элементов Создание своего элемента HTML События Обработчики событий

Объект Event

8

Распространение событий События мыши События клавиатуры

9

3. Методические указания по подготовке к практическим занятиям

3.1Общие рекомендации по подготовке к практическим занятиям

Входе подготовки к практическим занятиям необходимо изучать основную литературу, знакомиться с дополнительной литературой, а также с новыми публикациями в периодических изданиях: журналах, газетах и т.д. При этом необходимо учесть рекомендации преподавателя и требования учебной программы.

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

При подготовке к практическим занятиям можно также подготовить краткие конспекты по вопросам темы. Очень эффективным приемом является составление схем и презентаций.

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

3.2 Примеры задач для практических занятий

Верстка страницы по образцу Разработка CSS стиля для страницы Разработка CSS стиля для сайта

Создание навигационной панели (HTML, CSS) Пример блочной верстки.

Макет страницы на Flexbox Адаптивная верстка страницы

Пример внедрения Java script на HTML страницу

Создать скрипт генерирующий целое случайное число от 0 до 100. Скрипт должен предлагать пользователю угадать число, ввести его в окно prompt и сообщать ему больше и ли меньше введённое число. И так до тех пор, пока число не будет угадано. Также должно появится сообщение за сколько попыток угадано число.

Создать скрипт создающий массив из 10 целых случайных чисел, принимающих значения от1 до 20. Вывести элементы массива через- ;

Создать скрипт генерирующий целое случайное число от 0 до 100. Скрипт должен предлагать пользователю угадать число, ввести его в окно prompt и сообщать ему больше и ли меньше введённое число. И так до тех пор, пока число не будет угадано. Также должно появится сообщение за сколько попыток угадано число.

10