5878

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

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

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

Веб-дизайн

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

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

для обучающихся по дисциплине «Веб-дизайн» по направлению подготовки 09.03.03 Прикладная информатика

профиль Прикладная информатика в экономике

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

2016

УДК 004.9

Родионова С.В. / Веб-дизайн [Электронный ресурс]: учеб.-метод. пос. / С.В.Родионова; Нижегор. гос. архитектур. - строит. ун-т – Н. Новгород: ННГАСУ, 2016. – 19 с.– 1 электрон. опт. диск (CD-RW).

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

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

Учебно-методическое пособие ориентировано на обучение в соответствии с календарным учебным графиком и учебным планом по основной профессиональной образовательной программе направления 09.03.03 Прикладная информатика, профиль Прикладная информатика в экономике, утверждённым решением учёного совета ННГАСУ от 02.09.2016 г. (протокол № 1).

© С.В.Родионова, 2016 © ННГАСУ, 2016

2

Оглавление

3

1. Общие положения

1.1 Цели изучения дисциплины и результаты обучения

Основной целью освоения учебной дисциплины «Веб-дизайн» является: обучение студентов созданию Web-сайтов в Internet.

В процессе освоения дисциплины студент должен Знать:

принципы организации, функционирования Интернет и Web технологий, которые включают в себя применение Web-дизайна.

этапы разработки Web -сайта

основы языка разметки HTML

основы CSS

основы языка Java Script.

Уметь:

создавать статические и динамические Web–страницы Владеть:

программными средствами для создания web-страниц

1.2Содержание дисциплины

Материал дисциплины сгруппирован по следующим разделам:

1. Основы интернет-технологий

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

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

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

рии PERL, PHP, ASP, SSI. Технологии Java, Java - script, VB - script. Инструментарий создания Web -

приложений. Защита информации в Интернет.

4

3. Основы языка разметки HTML

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

4. Основы CSS

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

5. Основы Java Script

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

1.3 Порядок освоения материала

Материал дисциплины изучается в соответствии с порядком, определённым в следующей таблице:

Таблица 1

Порядок освоения дисциплины

5

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

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

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

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

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

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

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

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

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

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

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

1.Какой тег осуществляет принудительный перевод строки.

2.Какой тег не требует закрытия

3.Какой тег отображает шрифт большим

4.Какой тег создает горизонтальную линию.

5.Напишите тег, задающий шрифт по умолчанию красного цвета

6.Какой тег задает шрифт размера 2 и цвета “зеленый”.

7.Каким тегом можно вставить картинку dog.jpg с подписью “собака”.

8.Напишите значение атрибута DIRECTION тега MARQUEE, задающего направление движения слева направо.

9.Напишите тег, задающий название страницы.

10.Какой тег используется для формирования абзаца.

11.Какой тег используется для перевода строки.

12.Какой тег используется для выделения текста полужирным шрифтом.

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

6

ной.

14.Что называют гипертекстом, гиперграфикой.

7

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

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

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

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

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

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

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

Практическое задание №1

8

8.Вставить текст. Создать абзацы;

9.Гарнитура шрифта текста без засечек, размер 13pt, цвет текста - #505050;

Практическое задание №2

Цель практического задания:

1.Ознакомиться с правилами табличной верстки.

2.Изучить технику вставки графических изображений: в качестве фона и отдельных изображений внутри текста.

3.Ознакомиться с основными приемами создания ссылок: относительных и абсолютных.

Задание:

Создать персональный сайт (не менее 3 HTML-страниц) на основе табличной верстки, сохранить файлы в папку Задание_2. Требования:

1.Ширина и высота 100%, рамка таблицы–0px, заливка ячеек;

2.Внешний отступ между ячейками – 10 px;

3.Внутренний отступ между содержимым ячейки и рамкой ячейки - 10 px;

4.Отступ между изображением и текстом – 10 px;

5.Организовать переход по страницам;

6.Создать якорную ссылку НАВЕРХ для перехода на начало страницы.

7.Гарнитура текста без засечек, выравнивание абзацев по ширине. Рисунок Рисунок

Практическое задание №3

Цель практического задания:

1.Отработать механизм вставки всех типов CSS в HTML-документ;

2.Поэкспериментировать с применением правил CSS.

Задание:

10