2179
.pdf
А.П. Суворов В.Н. Проценко Ю.С.Золототрубова
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
Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и т.д. А основное содержимое: текст, таблицы, картинки, - находится в теле документа.
1.1.3. Работа с текстом
Очень полезным при создании сайтов является вставка комментария. Для выделения блоков текста в HTML используются следующие конструкции:
Заголовки
В HTML принято выделять 6 видов заголовков - от <H1> до <H6>. Тегу <H1> соответствует самый большой заголовок, тегу <H6> - самый маленький. Тег заголовка является парным в связи с чем использование закрывающего тега является обязательным.
<h1>Самый большой заголовок</h1>
Для большинства тегов характерен набор определенных параметров (атрибутов). Такие параметры указываются после имени тега через пробел в формате параметр=”значение”, если необходимо использование нескольких параметров они перечисляются через пробел. Для тегов заголовков допустимо использование следующих параметров:
align - Выравнивает заголовок в соответствии со следующими значениями:
center - По центру;
left - По левому краю;
right - По правому краю; title - Всплывающая подсказка.
Параграф
Для определения текстового абзаца используется тег <p>, который является блочным элементом и всегда начинается с новой строки, абзацы текста, идущие друг за другом, разделяются между собой отбивкой. Для тегов параграфов допустимо использование следующих параметров:
align - Выравнивает параграф относительно одной из сторон документа:
left - выравнивание по правому краю (По умолчанию).
right - выравнивание по правому краю.
center - выравнивание по центру.
5
justify - выравнивание по ширине. title - Всплывающая подсказка.
Контейнеры
Также для работы с текстом используются так называемые контейнеры для форматирования текста (рис. 1.2). Любые теги форматирования текста могут использоваться совместно друг с другом.
<b><i>ТЕКСТ</i></b>
<b>Текст</b> |
Жирное начертание текста |
|
<i>Текст</i> |
Курсивное начертание текста |
|
<sup>Текст</sup> |
Верхний индекс |
|
<sub>Текст</sub> |
Нижний индекс |
|
<pre>Текст</pre> |
Текст пишется как есть, включая все |
|
|
|
пробелы |
<em>Текст</em> |
Курсивный текст |
|
<strong>Текст</stron |
Жирное начертание текста |
|
g> |
|
|
<s>Текст</s> |
Зачеркнутый текст |
|
<u>Текст</u> |
Подчеркнутый шрифт |
|
|
Рис. |
1.2. Теги для форматирования текста |
|
Шрифт |
|
Для работы с оформлением текста используется тег <font> определяющий цвет, размер и выводимый шрифт. Для тега шрифт допустимо использование следующих параметров:
color - определяет цвет текста. face - определяет гарнитуру шрифта.
size - определяет размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт. По умолчанию размер равен 3.
1.1.4. Работа с ссылками
Для создания ссылок в HTML документе используется тег <a>. Для данного тега используется следующие параметры:
name - Для создания ссылок внутри документа, и для взаимодействия между фреймами.
6
href - Адрес сайта или страницы в сети интернет, на который должен перейти пользователь, щелкнув по ссылке. Также здесь указывается ссылка на другие ресурсы интернет:
href="any.avi" - Вызов программы просмотра видео;
href="mailto:info@site.com" - Отправить почту;
href="news:commerce" - Переход на новостной ресурс;
href="callto:name" - Позвонить кому-либо (skype).
target - Определяет, каким образом будет открываться наша страница:
_blank - Откроет страницу в новом окне;
_parent - Откроет страницу в родительском окне;
_self - Откроет страницу в том же окне, в котором была нажата ссылка (по-умолчанию);
_top - Откроет страницу на все окно.
title - Всплывающая подсказка.
1.1.5. Теги для работы со списками
В HTML документе можно создать два вида списков:
Маркированные;
Нумерованные.
Для создания маркированных списков используется контейнер <ul> </ul>, а для нумерованных <ol> </ol>. Внутри этих контейнеров с помощью контейнера <li> </li> осуществляется создание пункта списка
Для маркированных списков характерны следующие параметры: compact - Компактное представление списка.
type - Тип маркера.
disc - Маркер – закрашенный кружок.
circle - Маркер – не закрашенный кружок.
square - Маркер – квадратик.
А для нумерованных:
compact - Компактное представление списка. type - Тип маркера.
A - Прописные латинские буквы.
I - Большие римские цифры.
i - Маленькие римские цифры.
1 - Арабские цифры (по умолчанию). start=число - Начальный номер нумерации.
1.1.6. Теги для работы с изображениями
7
Для работы с изображениями используется тег <img> позволяющий вставлять графику в HTML страницу.
Для данного тега характерны следующие атрибуты: src - Задает адрес изображения.
align - Определяет вид выравниваия изображения.
left - Выравнивание по левому краю;
right - Выравнивание по правому краю;
bottom - Выравнивание по нижнему краю;
top - Выравнивание по верхнему краю;
middle - Выравнивание по центру;
absmiddle - Выравнивает изображение по горизонтальной оси текстовой строки;
texttop - Выравнивание верхнего края изображения по верхнему краю текстовой строки;
absbottom - Выравнивание нижнего края изображения по самому нижнему краю текстовой строки.
alt - Выводит текст, если картинка не загружена. width - Ширина картинки в пикселах или процентах. height - Высота картинки в пикселах или процентах.
border - Устанавливает толщину рамки вокруг изображения в пикселах. hspace - Определяет размер свободного места в пикселах слева и
справа от изображения.
vspace - Определяет размер свободного места в пикселах сверху и снизу от изображения.
title - Всплывающая подсказка.
Пример использования тега будет выглядеть следующим образом
<img src="images/primer.png" title="Пример вставленного изображения и всплывающей подсказки." width="169" height="181" border="1" />
1.1.7. Теги для работы с таблицами
Использование таблиц в HTML документе используется контейнер <table> </table>. Для данного тега характерны следующие атрибуты:
width - ширина таблицы в пикселях или в % относительно ширины окна браузера.
height - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендуют).
align - выравнивание таблицы.
left - выравнивание таблицы по левому краю.
right - выравнивание таблицы по правому краю.
8
center - выравнивание таблицы по центру. border - толщина рамки таблицы в пикселях.
cellspacing - расстояние между смежными ячейками в пикселях (по умолчанию = 2).
cellpadding - расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).
bgcolor - фоновый цвет таблицы.
background - фоновое изображение для таблицы. bordercolor - цвет всех линий рамки таблицы.
Для формирования элементов таблицы используются теги <tr> </tr> и <td> </td>. Контейнер <tr> </tr> служит для создания строки таблицы, а контейнер <td> </td> служит для создания ячейки таблицы.
И для этих параметров допустимо использование следующих параметров:
width - ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).
height - высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).
align - выравнивание в ячейке:
left - выравнивание в ячейке по левому краю.
right - выравнивание в ячейке по правому краю.
center - выравнивание в ячейке по центру.
valign - вертикальное выравнивание содержимого ячейки:
top - выравнивание по верхнему краю ячейки.
bottom - выравнивание по нижнему краю ячейки.
middle - выравнивание по центру ячейки.
bgcolor - фоновый цвет ячейки.
background - фоновое изображение для ячейки. bordercolor - цвет всех линий рамки ячейки.
colspan - количество объединяемых ячеек по столбцам (для <tr> не применяется).
rowspan - количество объединяемых ячеек по строкам (для <tr> не применяется).
1.1.8. Теги для работы с блоками
Пару лет назад "скелетом" для сайта всегда служила таблица (тег <table>). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания "скелета" будущего сайта
(рис. 1.3).
9