Міністерство освіти та науки, молоді і спорту України Запорізький національний технічний університет

Кафедра Програмних засобів

Пояснювальна записка до розрахунково-графічного завдання з дисципліни «Web-технології та Web-дизайн» на тему «футбольний клуб Арсенал»

Виконав

студент групи ІОТ-712 В.А. Маштак

Прийняли:

Н.А. Миронова

О.О. Олійник

2013

Зміст

Реферат 3

1 КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ 4

1.1 Предназначение разрабатываемого сайта 4

1.2 Обоснование выбора языка вёрстки сайта HTML 4

1.3 Обоснование выбора языка скриптов JavaScript 5

1.4 Вывод по разделу 7

2 ПРОЕКТИРОВАНИЕ САЙТА 8

2.1 Логическая структура сайта 8

2.2 Описание элементов структуры 9

2.3 Взаимодействие конструктивных элементов 9

2.4 Вывод по разделу 9

3 РЕАЛИЗАЦИЯ САЙТА 10

3.1 Физическая структура сайта 10

3.2 Описание структуры типовой страницы сайта 10

3.3 Стилизация сайта 11

3.4 Интерактивность сайта 11

3.5 Вывод по разделу 12

4 ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ 13

4.1 Основные решения по поводу дизайна 13

4.2 Пример роботы пользователя с сайтом 13

4.3 Выводы 14

Додаток А Текст програми 16

А.1 Текст файлу іndex.htm 16

А.2 Текст файлу Style.css 19

А.3 Текст файлу src.js 22

Список использованной литературы 24

Реферат

ПЗ: 23 стр. 5 рис. 5 источников

Цель работы – разработать сайт для футбольного клуба ФК Арсенал.

В процессе разработки необходимо было ознакомится с общей структурой HTML документа, отформатировать тексты , которые подготовлены для сайта в согласии с поточным стандартом языка HTML. Научится использовать ссылки на разные типы документов используя относительные и абсолютные URL, а также добавлять к web – страничке графические элементы.

Научится создавать таблицы и размещать разные элементы на странице с помощью таблиц.

Научится управлять внешним видом web – страницы с помощью каскадных таблиц стилей (CSS). Ознакомится с элементами необходимыми, для создания формы, и создать контактную форму для сайта. Необходимо было ознакомиться с синтаксисом языка JavaScript, научится использовать функции JavaScript в собственных документах.

Windows, NotePad++, Dreamweaver, ФК Арсенал, WWW, П.К.,

1 Краткие теоретические сведения

1.1 Предназначение разрабатываемого сайта

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

1.2 Обоснование выбора языка вёрстки сайта html

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

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

Кроме того, HTML никогда не стоит на месте в плане развития, без конца появляются новые версии, которую позволяют оптимизировать и облегчить работу, улучшая при этом общую картину конечного результата. Последняя версия HTML – это HTML 5.

Если рассматривать эту версию в отдельности, то можно выявить следующие плюсы: она стала более гармоничной в плане SEO-продвижения, так что теперь и код вы сможете оптимально сопоставить с поисковыми алгоритмами. [1]

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

Если вас интересует вопрос о том, каким образом работать с HTML и как начать обучение, то ответ прост: возьмите любой обучающий материал и позанимайтесь над ним несколько часов. Вы увидите, что все и в самом деле довольно просто.

Для написания страниц на языке гипертекстовой разметки HTML вам достаточно лишь открыть «Блокнот» (имеющийся в рабочем арсенале Windows). Но для большего удобства рекомендуется NotePad++ или же более профессиональный редактор Dreamweaver.

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