Проектирование сайтов | Web-сайт | Структура сайта

Курсовой проект «Создание WEB-сайта «Спортивный портал»

Web-сайт. Технологии создания сайтов. Проектирование сайтов. Структура сайта. Инструменты программирования сайтов.

Содержание

Введение

1. Задание

2. Обзор сайтов спортивной тематики

3. Концептуальное проектирование сайта

4. Логическое проектирование сайта

4.1 Макет страниц сайта

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

5. Физическое проектирование сайта

5.1 Описание языка гипертекстовой разметки HTML

5.2 Инструменты программирования сайта

5.3 Листинг созданного сайта

Заключение

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

Введение

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

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

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

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

Цель работы: разработать сайт на спортивную тематику.

Задачи работы:

  • проанализировать сайты спортивной тематики;
  • изучить особенности языка гипертекстовой разметки HTML;
  • создать сайт «Спортивный портал»;

Объект работы: технологии создания сайтов.

Предмет работы: сайт на спортивную тематику.

ЗАДАНИЕ НА ВЫПОЛНЕНИЕ КУРСОВОГО ПРОЕКТА

1. Тема проекта (работы): Создание Web-сайта «Спортивный портал»

2. Срок сдачи студентом законченного проекта (работы):

3. Исходные данные к проекту: методические указания по курсовому проектированию, методы программирования на языке HTML, материалы по созданию сайта «Спортивный портал»

4. Содержание пояснительной записки (перечень подлежащих разработке вопросов):

1. Создать сайт по спортивному профилю, состоящий не менее чем из 12 страниц, где первая главная, остальные — подчиненные,

2. Предусмотреть структуру иерархии сайта, состоящую не менее, чем из 3х уровней иерархии, где 1-ый — главная страница;

3. Количество разделов на странице от 3-до 6;

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

5. Каждая страница сайта должна содержать заголовок, текст информации и графические объекты (схемы, диаграммы, рисунки). Количество граф. объектов на сайте не менее 12;

6. На главной странице предусмотреть какой-либо объект, текст, графику, находящийся в динамичном режиме, т.е. данный объект должен совершать движения в рамках страницы (влево-вправо — бегающая строка).

7. на одной из страниц сайта должна быть импортирована таблица, созданная в приложении MS Aceess. таблица должна состоять не менее чем из 5ти полей и 10-ти записей.

8. На одной из страниц сайта должна быть предусмотрена возможность заполнения стандартной формулы, состоящей не менее, чем из 7ми полей, где у 1-ой из полей имеется возможность подставлять имеющиеся значения. Форма должна иметь 2 элемента управления (представить в виде 2х кнопок-отправить, очистить); заключение, список использованных источников, приложения.

Примерный объём пояснительной записки 48 страниц машинописного текста.

2.      Обзор сайтов спортивной тематики

Чтобы создать интернет-портал спортивной тематики, необходимо проанализировать подобные сайты, оценить их структуру, наполнение и дизайн. Это даст понимание, каким должен быть создаваемый сайт, позволит быстро сформировать информационную структуру сайта, определить размещение разных блоков на страницах сайта.

Для анализа выбраны следующие интернет-порталы спортивной тематики: http://www.championat.com/ (рис. 1), http://www.sport-express.ru/ (рис. 2), http://sportxbet.ru/ (рис. 3).

Интернет-портал «Чемпионат»
Рис. 1 — Интернет-портал «Чемпионат»

Сайт http://www.championat.com/ выполнен в светлых тонах, фон сайта серый, фон блоков с контентом – белый, верхняя и нижняя часть темные. Логотип красного цвета.

Интернет-портал «Спорт Экспресс»
Рис. 2 – Интернет-портал «Спорт Экспресс»

Интернет-портал «Спорт Экспресс» выполнен в темно-светлых тонах, фон сайта темно- серый, фон блоков контента – серый с белым, верхняя и нижняя часть состоят из темного и светлого блоков. Логотип черно-красного цвета.

Интернет-портал «Спортиксбет"
Рис. 3 – Интернет-портал «Спортиксбет»

Интернет-портал «Спортиксбет» выполнен в бело-сине-темных тонах. Логотип сайта синий, панель меню темная, фон сайта белый, боковая панель синяя.

Как видно из примеров, спортивные интернет-порталы (рис. 1, 2, 3) выполнены в темно-светлых тонах, во всех сайтах светлый фон. На сайтах многоуровневое меню, с множеством пунктов для разных тематик и направлений.

3. Концептуальное проектирование сайта

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

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

Основной целью сайта является предоставление пользователям информации о мире спорта. На сайте можно найти много информации о спортивных событиях, новостях спорта, также есть раздел с прогнозами и ставками.

Задачи сайта:

— предоставление пользователям спортивных новостей;

— возможность просмотра статей на спортивную тематику;

— знакомство с системами ставок и прогнозов;

— обучение ставкам, стратегиям;

— возможность заполнения контактной формы для связи с администрацией сайта.

Увлекательный мир спорта, с которым нас может познакомить сайт, является главным способом поддержки физической активности для современного офисного человека. И с его множеством видов, каждый человек может выбрать себе занятие по душе: поиграть в футбол, баскетбол или теннис, записаться в спортзал и заниматься на тренажёрах, выйти пробежку.

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

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

4. Логическое проектирование сайта

4.1 Макет страниц сайта

Главная страница сайта содержит главное меню и логотип, с этой страницы осуществляется переход на все остальные страницы сайта (рис. 4).

Макет главной страницы сайта
Рис. 4 – Макет главной страницы сайта

На главной странице сайта кроме главного меню находится слайдер и блоки с анонсами новостей, ссылками на разделы сайта и последними новостями.

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

Макет главной страницы сайта
Рис. 5 – Макет главной страницы сайта

Все страницы сайта, кроме главной, построены по макету, показанному на рис. 5.

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

Структура сайта показана на рис. 6. В структура входят следующие страницы: раздел с новостями спорта (содержит страницы – футбол, хоккей, баскетбол), фото, статьи, контакты, таблица, спортивные события, мир ставок, прогнозы, школа беттинга.

Структура сайта
Рис. 6 – Структура сайта

Далее, на рис. 7 – 19 покажем скриншоты страниц сайта.

Главная страница сайта
Рис. 7 – Главная страница сайта
Страница «Статьи»
Рис. 8 – Страница «Статьи»
Страница «Контакты»
Рис. 9 – Страница «Контакты»
Страница «Фото»
Рис. 10 – Страница «Фото»
Страница «Мир ставок»
Рис. 11 – Страница «Мир ставок»
Страница «Прогнозы»
Рис. 12 – Страница «Прогнозы»
 Страница «Школа беттинга»
Рис. 13 – Страница «Школа беттинга»
Страница «Футбол»
Рис. 14 – Страница «Футбол»
Страница «Хоккей»
Рис. 15 – Страница «Хоккей»
Страница «Баскетбол»
Рис. 16 – Страница «Баскетбол»

5.      Физическое проектирование сайта

5.1    Описание языка гипертекстовой разметки HTML

Язык гипертекстовой разметки HTML (HyperText Markup Language) служит для наглядного и хорошо структурированного представления информации в сети Интернет, который приобрел широкую популярность в середине 90-х годов. Программы, интерпретирующие данную разметку и выводящие информацию на экран, стали называться браузерами. На сегодняшний день известно много их разновидностей: Firefox, Chrome, Opera, Internet Explorer и др.

Разнообразие браузеров впоследствии привело к нюансам и разночтениям в интерпретации некоторых инструкций языка HTML и соответственно проблемам адаптации HTML-документа к разным вариантам их интерпретации. Для разрешения данной проблемы был создан консорциум W3C (World Wide Web Consortium), в задачу которого входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений разработчиков браузеров. Важными итогами работы консорциума стал выход спецификации HTML 4.0 и HTML 5.0. В частности, в HTML 4.0 рекомендуется разделение описания структуры документа от его вида на экране монитора или мобильного устройства, что значительно упрощает разработку, исправление документа, а также поддержку большого числа платформ, сред и т.п.

Современные браузеры имеют довольно широкие возможности для представления информации и взаимодействию пользователей в сети Интернет. Кроме форматированного вывода текста они позволяют отображать изображения, видео, проигрывать музыку. Встроенный в HTML-документ язык JavaScript позволяет анализировать и обрабатывать содержимое страницы, взаимодействовать с сервером (откуда загружен документ), динамически менять свойства и содержание документа в окне браузера. По сути, на сегодняшний момент, браузер стал еще одной платформой взаимодействия пользователя с информацией и другими пользователями, а для ряда мобильных устройств составной частью операционной системы [6].

Язык разметки гипертекста (HyperText Markup Language — HTML) можно использовать для представления:

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

Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру.

Сам по себе HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера. Инструкции записываются в виде тегов (читается тэг, от англ. tag) и имеют следующий синтаксис: <имя_тега [возможные параметры]>.

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

<html>

HTML-документ

</html>

Следует отметить, что не каждый открывающий тег должен иметь соответствующий закрывающий. Имеется набор тегов, действие которых начинается и заканчивается одним открывающим тегом:

<img src=»image.gif»> — тег для вывода изображения image.gif в окно браузера;

<input type=»text» value=»»> — тег для ввода значений в окне браузера.

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

Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов:

<!— Это комментарий —> Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

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

При создании HTML-документов рекомендуется соблюдать структуру, показанную на рис. 17.

Структура HTML-документа
Рис. 17 – Структура HTML-документа

Здесь <html> — это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

1.            Заголовок страницы

2.            Кодировку, в которой представлен HTML-документ

3.            Краткое описание содержания документа

4.            Список ключевых слов документа

5.            Подключаемые внешние javascript файлы (скрипты)

6.            Внешние таблицы стилей (css) для форматирования документа.

Раздел тега <head> может содержать и другие конструкции языка HTML, например, базовый адрес сайта: <base href-‘http://reeders.m/» /> и многое другое. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид (рис. 18) [7].

Конфигурация раздела HEAD
Рис. 18 – Конфигурация раздела HEAD

В тегах <body>…</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) и т.д.

HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях.

Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы.

Для придания сайту определенного внешнего вида были использованы каскадные таблицы стилей. CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, который написан с использованием языка разметки HTML. Подготовкой и выпуском спецификации занимается консорциум W3C (см. сайт http://www.w3.org/Style/CSS/) [9, 10]. Исторически CSS появился вместе с HTML версии 4.01 для упрощения манипулирования разметкой, поскольку именно применение стилей позволяет осуществлять групповую замену шрифта, цвета, размера и взаимного рас-положения элементов, разделив разметку и внешний вид как таковой.

CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.

Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:

—              h1 {font-family:sans-serif}

—              h2 {font-family:sans-serif}

—              h3 {font-family:sans-serif}

Селекторы групп:

h1, h2, h3 {font-family: sans-serif}

Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов [16].

Селекторы класса:

*.firstclass{ color: green } — все элементы, имеющие class=firstclass

или

.firstclass{ color: green } — все элементы, имеющие class=firstclass

а также

Hl.firstclass{ color: green } — только элементы H1, имеющие class=firstclass

Селекторы идентификатора ID:

—              h1#chapter1 { font-family: sans-serif } — для <h1 id=»chapter1″>…</h1>

—              #chapter1 { font-family: sans-serif } — для любого элемента с id=»chapter1″

Селекторы атрибутов:

—              h1[class] { font-family: sans-serif } — элемент имеет class

— h1[class=»fancy»] { font-family: sans-serif } — элемент имеет class=»fancy»

— *[title] { font-family: sans-serif } — любой элемент, имеющий заголовок

Селектор потомков (устанавливает иерархию применения):

tr h1 { font-family: sans-serif } — <tr><td><h1>…</h1></td></tr>

Псевдоклассы (особый вид динамических атрибутов, которые изменя-ются в зависимости от определенных действий):

—              a:link — ссылки, которые не были посещены

—              a:visited — посещенные ссылки

—              a:hover — выделенная в данный момент ссылка

—              a:active — активные ссылки.

При оформлении страницы доступны следующие семейства (family) шрифтов:

—              Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;

—              Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;

—              Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;

—              Fantasy, Cursive — декоративные и курсивные шрифты. Не ре-комендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.

Выбор шрифта осуществляется свойством font-family. Пример исполь-зования семейств стилей:

—              <p style=”font-family: serif”>Serif: Образец текста</р>

—              <р style=”font-family: sans-serif”>Sans-serif: Образец текста</p>

—              <p style=”font-family: cursive”>Cursive: Образец текста</p>

—              <p style=”font-family: fantasy”>Fantasy: Образец текста</p>

—              <p style=”font-family: monospace”>Monospace: Образец текста</p>

Свойство font-family может содержать перечисление шрифтов:

p{font-family:”Times New Roman”, Times, serif;} В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере «Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию [9].

Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:

font-style: normal | italic | oblique | inherit

где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).

Размер шрифта задается с помощью свойства font-size. Его возможные значения:

— larger и smaller — константы, определяющие относительный размер;

— xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;

— ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;

— ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).

Толщина шрифта регулируется с помощью свойства font-weight:

—              font-weight: normal | bold | bolder | lighter | 100, 200.. 900

Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.

Свойство color задает цвет шрифта. Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).

Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным.

Используются следующие свойства фона:

— background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример (рис. 12):

header .navbar-default { background-color: #fff;}

— background-image — фоновое изображение. Пример:

body {background-image:url(‘paper.gif’);}

— background-repeat — флаг мозаичного размножения изображения. Пример:

body {

background-image:url(‘gradient2.png’);

background-repeat:repeat-x;

}

— background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте. Пример:

background-attachment:fixed;

— background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:

body

{

background-image:url(‘img tree.png’); background-repeat:no-repeat; back-ground-position:right top;

}

В соответствии со спецификацией (см. http://www.w3.org/TR/ css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:

— изменение регистра букв (capitalize | uppercase | lowercase);

— изменение пробелов (collapse | preserve | preserve-breaks);

— ограничение длины строки;

— формирование переносов слов;

— форматирование текста;

— выравнивание и разреживание;

— отступы;

— декорирование.

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

В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами [9].

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

Размер отступа задается свойствами ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.

Пример:

.container {

padding:0 20px 0 20px;

}

Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’. Указываются толщина, тип начертания границы и цвет.

Пример:

header .nav .caret {

border-bottom-color: #f5f5f5;

border-top-color: #f5f5f5;

}

При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством ‘margin’ с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ для каждой из сторон в отдельности. Пример:

— body { margin: 2em }

— body { margin: 1em 2em }

— body { margin:1em 2em 3em }

— body {margin-top: 1em; margin-right: 2em;}

CSS поддерживает 4 вида позиционирования:

—              статическое (static);

—              абсолютное (absolute);

—              относительное (relative);

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

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

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

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

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

Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:

img {

float: right; padding: 15px;

}

Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.

5.2 Инструменты программирования сайта

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

Notepad++ бесплатный программный продукт, который имеет открытый исходный код, большое сообщество пользователей, которые его поддерживают. Программа потребляет минимум ресурсов и быстро загружается. На рис. 19 показано рабочее окно программы (рис. 19).

Рабочее окно Notepad++
Рис. 19 – Рабочее окно Notepad++

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

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

Рабочее окно Notepad++ можно разделить на две части, что позволяет удобно сравнивать разные вариации документов. Определить различия помогает плагин Compare.

Notepad++ поддерживает следующие форматы файлов:

— текстовые ini, log, txt, text;

— C++ language Files h, hpp, hxx, c, cpp, cxx, cc, m;

— Java & Pascal java, class, cs, pas, inc;

— Web Scripts html, htm, php, phtml, js, asp, aspx, css, xml;

— Public Scripts sh, bsh, nsi, nsh, lua, pl, pm, py;

— Property Scripts rc, as, mx, vb, vbs;

— Fortran, Tex, SQL f, for, f95, f2k, tex, sql;

— Остальное mak, nfo, cmd, bat, reg.

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

Выделим основные особенности Notepad++:

— сворачивание блоков и подсветка текста, в зависимости от синтаксиса языка программирования;

— функция WYSIWYG – вывод на печать того, что находится на экране в окне редактирования;

— автозавершение набираемого слова;

— поддержка Поиска/Замены регулярных выражений – пользователь может менять определенные строки в документе, используя определенные выражения;

— перемещение фрагментов текста или отдельного слова на новое место;

— масштабирование – уменьшение и увеличение содержимого документа;

— динамическое видоизменение окон просмотра;

— поддержка огромного числа языков;

— автоопределение состояния файла – при изменении или удалении файла, редактируемого в Notepad++, иной утилитой, пользователь получает программное сообщение;

— расстановка заметок по тексту документа;

— запись макросов и их выполнение.

Таким образом, можно сказать, что программа Notepad++ является очень удобным программным средством, которое можно использовать для разработки сайтов.

5.3 Листинг созданного сайта

Исходный код главной страницы сайта

<!DOCTYPE html>

<head>

    <meta charset=»utf-8″>

    <title>SportLife — интернет-портала о спорте и спортивных событиях</title>

    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>

    <meta name=»description» content=»Интернет-портал о спорте SportLife»/>

    <meta name=»keywords» content=»интернет-портал о спорте, SportLife, футбол, хоккей, новости спорта «>

    <link href=»css/bootstrap.min.css» rel=»stylesheet»/>

    <link href=»css/fancybox/jquery.fancybox.css» rel=»stylesheet»>

    <link href=»css/flexslider.css» rel=»stylesheet»/>

    <link href=»css/style.css» rel=»stylesheet»/>

    <link href=»css/animation-l-r.css» rel=»stylesheet»/>

    <link rel=»icon» href=»img/favicon.png» type=»image/x-icon»/>

    <link href=»skins/default.css» rel=»stylesheet»/>

</head>

<body>

<div id=»wrapper»>

    <header>

        <div class=»navbar navbar-default navbar-static-top»>

            <div class=»container»>

                <div class=»navbar-header»>

                    <button type=»button» class=»navbar-toggle» data-toggle=»collapse» data-target=».navbar-collapse»>

                        <span class=»icon-bar»></span>

                        <span class=»icon-bar»></span>

                        <span class=»icon-bar»></span>

                    </button>

                    <a class=»navbar-brand» href=»index.html»><img src=»img/logo.png»></a>

                </div>

                <div class=»navbar-collapse collapse «>

                    <ul class=»nav navbar-nav»>

                        <li class=»active»><a href=»index.html»>ГЛАВНАЯ</a></li>

                        <li class=»dropdown»>

                            <a href=»#» class=»dropdown-toggle » data-toggle=»dropdown» data-hover=»dropdown»

                               data-delay=»0″ data-close-others=»false»>НОВОСТИ СПОРТА <b class=» icon-angle-down»></b></a>

                            <ul class=»dropdown-menu»>

                                <li><a href=»football.html»>Футбол</a></li>

                                <li><a href=»hockey.html»>Хоккей</a></li>

                                <li><a href=»basketball.html»>Баскетбол</a></li>

                            </ul>

                        </li>

                        <li><a href=»foto.html»>ФОТО</a></li>

                        <li><a href=»blog.html»>СТАТЬИ</a></li>

                        <li><a href=»contact.html»>КОНТАКТЫ</a></li>

                        <li><a href=»table.html»>ТАБЛИЦА</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </header>

    <section id=»featured»>

        <section id=»content»>

            <section class=»callaction»>

                <div class=»container»>

                    <div class=»row»>

                        <div class=»col-lg-12″>

                            <div class=»animationtext»><span>SportLife — интернет-портал о спорте</span></div> <!— анимация впроаво-влево —>

                            <div id=»main-slider» class=»flexslider»>

                                <ul class=»slides»>

                                    <li><img src=»img/slides/1.jpg» alt=»»/>

                                        <div class=»flex-caption»>

                                            <h3>Быстрые и сильные</h3>

                                            <p>Самые быстрые спортсмены мира. Истории жизни и успеха</p>

                                            <a href=»#» class=»btn btn-theme»>Читать дальше</a></div>

                                    </li>

                                    <li><img src=»img/slides/2.jpg» alt=»»/>

                                        <div class=»flex-caption»>

                                            <h3>Девушки-спортсмены</h3>

                                            <p>Жизненные истории самых успешных спортсменок мира. Секреты успеха в

                                                спорте</p>

                                            <a href=»#» class=»btn btn-theme»>Читать дальше</a></div>

                                    </li>

                                    <li><img src=»img/slides/3.jpg» alt=»»/>

                                        <div class=»flex-caption»>

                                            <h3>Скорость и драйв</h3>

                                            <p>Интересные истории из мира автомобильных гонок. Лидеры автогоно и секреты

                                                их

                                                успеха</p>

                                            <a href=»#» class=»btn btn-theme»>Читать дальше</a></div>

                                    </li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

                <div class=»container»>

                    <div class=»row»>

                        <div class=»col-lg-12″>

                            <div class=»big-cta»>

                                <div class=»cta-text»>

                                    <h2><span>SportLife</span> — Ваш интернет-портал о спортивных событиях</h2>

                                </div>

                            </div>

                        </div>

                        <div class=»container»>

                            <div class=»row»>

                                <div class=»col-lg-12″>

                                    <div class=»row»>

                                        <div class=»col-lg-3″>

                                            <div class=»box»>

                                                <div class=»box-gray aligncenter»>

                                                    <h4>Спортивные события</h4>

                                                    <!—div class=»icon»—>

                                                    <div><i class=»fa fa-desktop fa-3x»></i></div>

                                                    Все о мире спортивных событий и не только.

                                                </div>

                                                <div class=»box-bottom»><a href=»blog.html»>Читать дальше</a></div>

                                            </div>

                                        </div>

                                        <div class=»col-lg-3″>

                                            <div class=»box»>

                                                <div class=»box-gray aligncenter»>

                                                    <h4>Мир ставок</h4>

                                                    <!—div class=»icon»—>

                                                    <div><i class=»fa fa-globe fa-3x»></i></div>

                                                    Новости мира ставок. Статьи и обзоры по теме

                                                </div>

                                                <div class=»box-bottom»><a href=»stavki.html»>Читать дальше</a></div>

                                            </div>

                                        </div>

                                        <div class=»col-lg-3″>

                                            <div class=»box»>

                                                <div class=»box-gray aligncenter»>

                                                    <h4>Прогнозы</h4>

                                                    <!—div class=»icon»—>

                                                    <div><i class=»fa fa-edit fa-3x»></i></div>

                                                    Прогнозы на футбольные матчи. Зарабатыайте с нами

                                                </div>

                                                <div class=»box-bottom»><a href=»prognozi.html»>Читать дальше</a></div>

                                            </div>

                                        </div>

                                        <div class=»col-lg-3″>

                                            <div class=»box»>

                                                <div class=»box-gray aligncenter»>

                                                    <h4>Школа беттинга</h4>

                                                    <!—div class=»icon»—>

                                                    <div><i class=»fa fa-usd fa-3x»></i></div>

                                                    Учебники по ставкам, стратегии, словарь игрока.

                                                </div>

                                                <div class=»box-bottom»><a href=»betting.html»>Читать дальше</a></div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class=»row»>

                                <div class=»col-lg-12″>

                                    <div class=»solidline»></div>

                                </div>

                            </div>

                            <div class=»row»>

                                <div class=»col-lg-12″>

                                    <h4 class=»heading»>Последние новости</h4>

                                    <div class=»row»>

                                        <section id=»projects»>

                                            <ul id=»thumbs» class=»portfolio»>

                                                <li class=»col-lg-3 design» data-id=»id-0″ data-type=»web»>

                                                    <div class=»item-thumbs»>

                                                        <a class=»hover-wrap fancybox» data-fancybox-group=»gallery»

                                                           title=»Отжимания от пола» href=»img/works/1.jpg»>

                                                            <!—span class=»overlay-img»></span> <span class=»1overlay-img-thumb font-icon-plus»></span—> </a>

                                                        <img src=»img/works/1.jpg»

                                                             alt=»Польза от ожиманий от пола, как правильно отжиматься? Эта и другая информация у нас на сайте»>

                                                    </div>

                                                </li>

                                                <li class=»item-thumbs col-lg-3 design» data-id=»id-1″ data-type=»icon»>

                                                    <a class=»hover-wrap fancybox» data-fancybox-group=»gallery»

                                                       title=»История мяча» href=»img/works/2.png»>

                                                        <!—span class=»overlay-img»></span> <span class=»overlay-img-thumb font-icon-plus»></span—> </a>

                                                    <img src=»img/works/2.png»

                                                         alt=»Что такое мяч? Какие бывают мячи? И много других историй от времени первого упоминания мяча»>

                                                </li>

                                                <li class=»item-thumbs col-lg-3 photography» data-id=»id-2″

                                                    data-type=»illustrator»>

                                                    <a class=»hover-wrap fancybox» data-fancybox-group=»gallery»

                                                       title=»Фитнес» href=»img/works/3.png»>

                                                        <!—span class=»overlay-img»></span> <span class=»overlay-img-thumb font-icon-plus»></span—> </a>

                                                    <img src=»img/works/3.png»

                                                         alt=»Где лучше, дома или в спортзале? Как найти время на занятия спортом?»>

                                                </li>

                                                <li class=»item-thumbs col-lg-3 photography» data-id=»id-2″

                                                    data-type=»illustrator»>

                                                    <a class=»hover-wrap fancybox» data-fancybox-group=»gallery»

                                                       title=»Интересная история» href=»img/works/4.png»>

                                                        <!—span class=»overlay-img»></span> <span class=»overlay-img-thumb font-icon-plus»></span—></a>

                                                    <img src=»img/works/4.png»

                                                         alt=»Откуда пришел? Кто придумал? И много другого из истории этой активной игры»>

                                                </li>

                                            </ul>

                                        </section>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

        </section>

        <div>

            <footer>

                <div id=»sub-footer»>

                    <div class=»container»>

                        <div class=»row»>

                            <div class=»col-lg-6″>

                                <div class=»copyright»>

                                    <p>

                                        <span>&copy; SportLife 2016 Все права защищены</span>

                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </footer>

        </div>

        <a href=»#» class=»scrollup»><i class=»fa fa-angle-up active»></i></a>

        <script src=»js/jquery.js»></script>

        <script src=»js/jquery.easing.1.3.js»></script>

        <script src=»js/bootstrap.min.js»></script>

        <script src=»js/jquery.fancybox.pack.js»></script>

        <script src=»js/jquery.fancybox-media.js»></script>

        <script src=»js/google-code-prettify/prettify.js»></script>

        <script src=»js/portfolio/jquery.quicksand.js»></script>

        <script src=»js/portfolio/setting.js»></script>

        <script src=»js/jquery.flexslider.js»></script>

        <script src=»js/animate.js»></script>

        <script src=»js/custom.js»></script>

</body>

</html>

Исходный код страницы contact.html

<!DOCTYPE html>

<head>

    <meta charset=»utf-8″>

    <title>SportLife — интернет-портала о спорте и спортивных событиях</title>

    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>

    <meta name=»description» content=»»/>

    <meta name=»author» content=»http://bootstraptaste.com»/>

    <link href=»css/bootstrap.min.css» rel=»stylesheet»/>

    <link href=»css/fancybox/jquery.fancybox.css» rel=»stylesheet»>

    <link href=»css/flexslider.css» rel=»stylesheet»/>

    <link href=»css/style.css» rel=»stylesheet»/>

    <link href=»skins/default.css» rel=»stylesheet»/>

</head>

<body>

<div id=»wrapper»>

    <header>

        <div class=»navbar navbar-default navbar-static-top»>

            <div class=»container»>

                <div class=»navbar-header»>

                    <button type=»button» class=»navbar-toggle» data-toggle=»collapse» data-target=».navbar-collapse»>

                        <span class=»icon-bar»></span>

                        <span class=»icon-bar»></span>

                        <span class=»icon-bar»></span>

                    </button>

                    <a class=»navbar-brand» href=»index.html»><img src=»img/logo.png»></a>

                </div>

                <div class=»navbar-collapse collapse «>

                    <ul class=»nav navbar-nav»>

                        <li><a href=»index.html»>ГЛАВНАЯ</a></li>

                        <li class=»dropdown»>

                            <a href=»#» class=»dropdown-toggle » data-toggle=»dropdown» data-hover=»dropdown»

                               data-delay=»0″ data-close-others=»false»>НОВОСТИ СПОРТА <b class=» icon-angle-down»></b></a>

                            <ul class=»dropdown-menu»>

                                <li><a href=»football.html»>Футбол</a></li>

                                <li><a href=»hockey.html»>Хоккей</a></li>

                                <li><a href=»basketball.html»>Баскетбол</a></li>

                            </ul>

                        </li>

                        <li><a href=»foto.html»>ФОТО</a></li>

                        <li><a href=»blog.html»>СТАТЬИ</a></li>

                        <li class=»active»><a href=»contact.html»>КОНТАКТЫ</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </header>

    <!— end header —>

    <section id=»inner-headline»>

        <div class=»container»>

            <div class=»row»>

                <div class=»col-lg-12″>

                    <ul class=»breadcrumb»>

                        <li><a href=»#»><i class=»fa fa-home»></i></a><i class=»icon-angle-right»></i></li>

                        <li class=»active»>Контакты</li>

                    </ul>

                </div>

            </div>

        </div>

    </section>

    <section id=»content»>

        <div class=»container»>

            <div class=»row»>

                <div class=»col-lg-12″>

                    <h4>Воспользуйтесь формой для контакта с нами</strong></h4>

                    <form id=»contactform» method=»post»>

                        <div class=»row»>

                            <div class=»col-lg-3 field»>

                                <input type=»text» name=»name» placeholder=»Имя» data-rule=»maxlen:4″>

                                <div class=»validation»>

                                </div>

                            </div>

                            <div class=»col-lg-3 field»>

                                <input type=»text» name=»name» placeholder=»Фамилия» data-rule=»maxlen:4″>

                                <div class=»validation»>

                                </div>

                            </div>

                            <div class=»col-lg-3 field»>

                                <input type=»text» name=»email» placeholder=»Электронный адрес» data-rule=»email»>

                                <div class=»validation»>

                                </div>

                            </div>

                            <div class=»col-lg-3 field»>

                                <input type=»text» name=»subject» placeholder=»Тема сообщения» data-rule=»maxlen:4″>

                                <div class=»validation»>

                                </div>

                            </div>

                            <div class=»col-lg-12 margintop10 field»>

                                <textarea rows=»12″ name=»message» class=»input-block-level»

                                          placeholder=»Ваше сообщение…» data-rule=»required»

                                          data-msg=»Поле для сообщения. Можете ввести свой текст»></textarea>

                                <div class=»validation»>

                                </div>

                                <p>

                                    <button class=»btn btn-theme margintop10 pull-left» type=»submit»>Отправить

                                        сообщение

                                    </button>

                                    <button class=»btn btn-theme margintop10 pull-right» type=»reset»>Очистить форму

                                    </button>

                                </p>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </section>

    <footer>

        <div id=»sub-footer»>

            <div class=»container»>

                <div class=»row»>

                    <div class=»col-lg-6″>

                        <div class=»copyright»>

                            <p>

                                <span>&copy; SportLife 2016 Все права защищены</span>

                            </p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </footer>

</div>

<a href=»#» class=»scrollup»><i class=»fa fa-angle-up active»></i></a>

<script src=»js/jquery.js»></script>

<script src=»js/jquery.easing.1.3.js»></script>

<script src=»js/bootstrap.min.js»></script>

<script src=»js/jquery.fancybox.pack.js»></script>

<script src=»js/jquery.fancybox-media.js»></script>

<script src=»js/google-code-prettify/prettify.js»></script>

<script src=»js/portfolio/jquery.quicksand.js»></script>

<script src=»js/portfolio/setting.js»></script>

<script src=»js/jquery.flexslider.js»></script>

<script src=»js/animate.js»></script>

<script src=»js/custom.js»></script>

<script src=»js/validate.js»></script>

</body>

</html>

Заключение

Для создания сайта был использован язык гипертекстовой разметки HTML (HyperText Markup Language) с использованием каскадных таблиц стилей. Для работы над сайтом была использована программа Notepad.

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

Страницы сайта содержит заголовки, текстовую информацию, графические элементы (общее количество рисунков на сайте около 30).

На главной странице реализовано динамическое движение текста, которое находится в верхней части сайта. На страницу таблица импортирована таблица MS Acсess, которая состоит из 5 полей и 10 записей.

На странице «Контакты» реализована форма, которая состоит из 7 полей, одно из который предлагает выбрать значения из выпадающего списка. Форма имеет 2 элемента управления – кнопки «Отправить» и «Очистить».

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

  1. Дунаев В. HTML, скрипты и стили / В. Дунаев. — СПб: БХВ-Петербург, 2011- 816 с.
  2. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012. – 70 с.
  3. Кисленко Н. П. HTML. Самое необходимое / Н. П. Кисленко. — СПб: БХВ-Петербург, 2012 – 352 с.
  4. Комолова Н. HTML, XHTML и CSS / Н. Комолова, Е. Яковлева. — СПб: Питер, 2012 – 304 с.
  5. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. — М.: Вильямс, 2011 – 272 с.
  6. Методы верстки сайтов [Электронный ресурс] / Режим доступа: http://webformyself.com/metody-verstki-sajtov/ (Дата обращения: 18.11.2016).
  7. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 c.
  8. Примеры красивого оформления списков [Электронный ресурс] / Режим доступа: http://html5book.ru/krasivoe-oformlenie-spiskov/ (Дата обращения: 18.11.2016).
  9. Принципы анимации для веба [Электронный ресурс] / Режим доступа: https://habrahabr.ru/company/htmlacademy/blog/255583/ (Дата обращения: 18.11.2016).
  10. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
  11. Современные формы на HTML5 и CSS3 [Электронный ресурс] / Режим доступа: http://webformyself.com/sdelajte-sovremennye-formy-s-pomoshhyu-css3-i-validacii-html5/ (Дата обращения: 18.11.2016).
  12. Справочни HTML. <marquee>. [Электронный ресурс] / Режим доступа: https://webref.ru/html/marquee (Дата обращения: 18.11.2016).
  13. Стилизация списков с помощью псевдо-элементов [Электронный ресурс] / Режим доступа: http://ruseller.com/lessons.php?id=1479&rub=2 (Дата обращения: 18.11.2016).
  14. Топ 10 Конструкторов сайтов [Электронный ресурс] / Режим доступа: http://sitebuilders.club (Дата обращения: 18.11.2016).
  15. Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
  16. CSS3 анимация для сайта [Электронный ресурс] / Режим доступа: http://beloweb.ru/javascript-jquery/css3-animatsiya-dlya-sayta.html (Дата обращения: 18.11.2016).

Купить данную работу или заказать подобную