Создание веб-сайта, посвященного группе U2

Министерство образования и науки Российской Федерации

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ

ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«ВОРОНЕЖСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

(ФГБОУ ВПО  «ВГТУ»)

Факультет информационных технологий и компьютерной безопасности

Кафедра «Автоматизированные и вычислительные системы»

Профиль «Вычислительные машины, комплексы, системы и сети»

 

 

КУРСОВАЯ РАБОТА

 

по дисциплине «Веб-дизайн»

Тема: «Создание веб-сайта, посвященного группе U2»

Расчетно-пояснительная записка

 

Разработал студент гр. ВМ-121                                                              И.О  .Калягин                                                       подпись,  дата                                               инициалы,  фамилия

           

Руководитель                                                                              М.Ю. Сергеев

                                                      подпись,  дата                                                   инициалы,  фамилия

        

Нормконтролер                                                                        М.Ю. Сергеев

                                                    подпись,  дата                                                   инициалы,  фамилия

 

Защищен ________________          Оценка ___________________

                               дата

 

 

 

 

 

 

ВОРОНЕЖ 2014

Министерство образования и науки Российской Федерации

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ

ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«ВОРОНЕЖСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

(ФГБОУ ВПО  «ВГТУ»)

Кафедра «Автоматизированные и вычислительные системы»

 

ЗАДАНИЕ

на курсовую работу

по дисциплине «Веб-дизайн»

Тема работы: «Создание веб-сайта, посвященного группе U2»

Студент группы ВМ-121  Калягин Игорь Олегович

                                                    

Технические условия: создание веб-сайта, посвященного группе U2, с использованием технологий HTML 5 и CSS, составление расчетно – пояснительной записки по теме работы.

 

 

 

 

 

Сроки выполнения этапов:  1й-этап – _________;  2й-этап – ______________

Срок защиты курсового проекта:  с ______________ по _________________

 

Задание принял студент  гр.ВМ-121                                                И.О.  Калягин

                                                        подпись,  дата                                  инициалы,  фамилия             

Руководитель                                                                                       М.Ю. Сергеев

                                                          подпись,  дата                                  инициалы,  фамилия             

                                                          подпись,  дата                                       инициалы,  фамилия             

 

ЗАМЕЧАНИЯ РУКОВОДИТЕЛЯ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

СОДЕРЖАНИЕ

Задание на курсовую работу 2

Замечания руководителя 3

Введение 5

1. Теоретическая часть 7
1. Общие сведения о HTML 5 7
2. Теги для отображения мультимедийных объектов 7
3. Теги для обозначения блоков страницы  10
4. Общие сведения о CSS 3 12
5. Стилизация ссылок 13
2. Практическая часть 16

Заключение 23

Приложение 24

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Введение

 

HyperText Markup Language (HTML) является стандартным  языком, предназначенным для создания  гипертекстовых документов в  среде WEB. HTML-документы могут просматриваться  различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя теги HTML, вы можете обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-браузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает автор.

В большинстве случаев автор документа строго определяет внешний вид документа. В случае HTML читатель, основываясь на возможностях WEB-браузера, может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тега HTML, а затем предоставляет WEB-браузеру интерпретировать эти теги. Например, один WEB-браузер может распознавать тег начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку. Пользователи некоторых WEB-браузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.

CSS используется создателями и  посетителями веб-страниц для  задания цветов, шрифтов, расположения  и других аспектов представления  документа. Основное назначение, для  которого технология CSS была разработана, это разделение содержимого (написанного  на HTML или другом языке разметки) и представления документа (написанного  на CSS). Это разделение может увеличить  доступность документа, предоставить  большую гибкость и возможность  управления его представлением, а также уменьшить сложность  и повторяемость в структурном  содержимом. Кроме того CSS позволяет  представлять один и тот же  документ в различных стилях  или методах вывода, таких как  экранное представление, печать, чтение  голосом (специальным голосовым  браузером или программой чтения  с экрана).

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:

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

 

 

 

 

 

             1   Теоретическая часть

1.1 Общие сведения о HTML 5

Считается, что разработка стандарта началась в 2004 году Рабочей группой по разработке Гипертекстовых Прикладных Технологий в Веб (Web Hypertext Application Technology Working Group), когда W3C сосредоточилась на разработке XHTML 2.0. В 2009 году от разработки последнего решено было отказаться и обе группы объединились в работе над будущим стандартом HTML.

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

К новым особенностям HTML, любопытных в плане Web-дизайна можно отнести:

– добавление тегов, облегчающих отображение мультимедийной и графической информации;

– добавление тегов, отображающих семантическое содержание документа;

– добавление новых видов полей для формы.

HTML 5 потенциально  дает много возможностей web-дизайнеру. Некоторые даже утверждают, что  он заменит JavaScript и CSS. На самом  деле это не так – за HTML остается  структурирование содержимого веб-страницы, CSS управляет отображением элементов  на странице, а JavaScript «оживляет»  элементы web-страницы, добавляя им  анимацию и делая их интерактивными.

 

 

2. Теги для отображения мультимедийных объектов

 

 

Тег <audio>

Тег <audio> Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом. Данный тег будет работать в браузерах IE (с 9-й версии), Chrome 10.0 и выше, Opera 10.50 и выше, Firefox 4.0 и выше, Safari 3.1 и выше.

Имеет синтаксис:

 

<audio src="URL"></audio>

 

или

 

<audio>

<source src="URL">

</audio>

 

Список кодеков и поддерживаемых форматов несколько ограничен и зависит от вида и версии браузера.

Тег <audio> имеет ряд важных атрибутов:

 

• autoplay – при добавлении этого атрибута к тегу звук начинает проигрываться сразу при загрузке страницы. Можно добавить этот атрибут просто без значения, а можно написать autoplay=”autoplay”.
• controls – добавляет панель управления к аудиотреку. Вид панели и ее содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др. Способ добавления – аналогичен autoplay.

 

• loop – зацикливает воспроизведение аудио, чтобы оно повторялось с начала после завершения. Способ добавления – аналогичен autoplay.

 

• preload – используется для загрузки аудиофайла вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay. Имеет 3 значения: none – не загружать аудиофайл (значение по умолчанию); metadata – загружать только служебную информацию (продолжительность звучания и др.); auto – загружать файл при загрузке страницы.

 

 

Тег <source>

Данный тег предназначен для добавления ссылки на файл. Обычно используется в связке с тегами для отображения аудио и видео.

Синтаксис:

<audio>

<source src="URL">

</audio>

 

<video>

<source src="URL">

</video>

 

 

Имеет ряд следующих атрибутов.

• media – тип устройства, на котором будет воспроизводиться данный файл. Имеет следующие значения:
• all – все устройства;
• braille – устройства, основанные на системе Брайля и предназначенные для слепых людей;
• handheld – наладонники, смартфоны, устройства с малой шириной экрана;
• print – печатающее устройство вроде принтера;
• screen – экран монитора;
• speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры;
• projection – проектор;
• tty – телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана;
• tv – телевизор.
• src – адрес файла.
• type – MIME-тип медийного источника. Существует большое количество MIME-типов, определяющих вид добавленного на страницу файла.

Например:

type="audio/mpeg" – файл mp3;

type=”video/mpeg”  – файл mpeg;

type=”text/css”  – файл CSS и т.д.

 

3. Теги для обозначения блоков страницы

 

При блочной верстке страниц, содержимое страницы делилось на отдельные части (блоки) с помощью тегов <div>. Каждый тег <div> помечался определенным идентификатором, который вместе со стилем CSS определял, что это за блок и где он будет размещаться. Например, блок заголовка страницы помечался тегом <div> с ID “header”, блок подножия – тегом <div> с ID “footer”.

В HTML 5 разработчики решили пойти навстречу веб-дизайнеру и добавили несколько аналогов тегу <div>, имена которых призваны отразить предназначение (смысл или семантику) блока. Действительно, более удобным и наглядным будет вот такой код:

 

<header>

Заголовок сайта

</header>

 

чем

 

<div id=”header”>