Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н
А.П. Суворов В.Н. Проценко Ю.С.Золототрубова
Web-ДИЗАЙН:
ЛАБОРАТОРНЫЙ ПРАКТИКУМ
Учебноепособие
Воронеж 2017
1
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФГБОУ ВО «Воронежский государственный технический университет»
А.П. Суворов В.Н. Проценко Ю.С. Золототрубова
Web-ДИЗАЙН:
ЛАБОРАТОРНЫЙ ПРАКТИКУМ
Утверждено учебно-методическим советом университета в качестве учебного пособия
Воронеж 2017
2
УДК 681.3.06 (075.8) ББК 32.97Я7
С 891
Суворов А.В. WEb-дизайн: лабораторный практикум: учеб. пособие [Электронный ресурс]. - Электрон. текстовые и граф. данные (1,2 Мб) / А.П. Суворов, В.Н. Проценко, Ю.С. Золототрубова. Воронеж: ФГБОУ ВО «Воронежский государственный технический университет», 2017. – 1 электрон. опт. диск (CD-ROM): цв. – Систем. требования: ПК 500 и выше; 256 Мб ОЗУ; Windows XP; SVGA с разрешением 1024х768; Adobe Acrobat; CD-ROM дисковод; мышь. – Загл. с экрана.
В лабораторном практикуме рассматриваются теоретические и практические сведения, необходимые для овладения навыками в разработке и создании Web-сайтов. Практикум состоит из 5 лабораторных работ. В описании каждой лабораторной работы приведены теоретические сведения и индивидуальные задания.
Издание соответствует требованиям Федерального государственного образовательного стандарта высшего образования по направлению 09.03.02 «Информационные системы и технологии» (профиль «Информационные технологии в дизайне»), дисциплине «Web-дизайн».
Табл. 15. Ил. 3. Библиогр.: 4 назв.
Научный редактор д-р техн. наук, проф. А.В. Кузовкин
Рецензент: Воронежский институт высоких технологий (ведущий специалист проектного отдела канд. техн. наук, доц. А.Н. Зеленина); д-р техн. наук, проф. М.И. Чижов
© Суворов А.П., Проценко В.Н., Золототрубова Ю.С., 2017 © ФГБОУ ВО «Воронежский
государственный технический университет», 2017
3
ВВЕДЕНИЕ
Учебное пособие по дисциплине «Web-дизайн» предназначено помочь студентам овладеть первоначальными навыками и умениями в разработке и создание Web-сайтов. Материал приводится в виде практических пошаговых инструкций с описанием теоретического материала и самостоятельной частью, которую студент выполняет сам. Данное методическое пособие посвящено вопросам разработки дизайна и верстки Web-сайтов. В нем представлены основные методы создания Web-сайтов на основе языка гипертекстовой разметки HTML: форматирование текста, использование таблиц и графики и т.д. Проводятся основные теги языка HTML и способы их применения. При этом не требуется знаний в области программирования, достаточно базовых знаний владения компьютером.
Web-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от вебпрограммирования, подчеркивает специфику предметной деятельности вебдизайнера, позиционирует веб-дизайн как вид графического дизайна.
В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей.
3
1.ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
1.1.Основы HTML
1.1.1. Введение в HTML
HTML (HperText Markup Language) – это язык разметки документа,
описывающий форму отображения информации на экране компьютера. Когда HTML страница открывается в браузере, он просматривает ее
код, находит специальные символы, называемые тегами, и использует их для создания элементов, таких как: рисунки, таблицы, ссылки и др.
Тег — это конструкция языка, которая указывает браузеру, что нужно делать. С помощью тегов осуществляется общение с браузером и можно сказать, программирование его действий. Принято выделять одинарные и парные теги (рис. 1.1).
<html> </html> |
<br> |
Парный тег |
Одинарный тег |
Рис. 1.1. Основные типы тегов
1.1.2. Структура HTML страницы
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML, которая обычно выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01.
Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы
(<head></head>) и тела документа(<body></body>).
<html>
<head>
</head>
<body>
</body>
</html>
4