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

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

</div>

 

Далее веб-дизайнер может создать стиль для тега <header> и отформатировать заголовок сайта, как он считает нужным.

 

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

<footer> – задаёт «подвал» сайта или раздела, в нём может располагается имя автора, дата документа, контактная и правовая информация. Атрибутов нет.

<header> – задает «шапку» сайта или раздела, в которой обычно располагается заголовок. Атрибутов нет.

<menu> – предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>. Атрибут label устанавливает видимую метку для меню, атрибут type задает тип меню (значения: context – контекстное меню, toolbar – меню в виде панели инструментов, list – меню в виде списка).

<figure> – используется для группирования любых элементов, например, изображений и подписей к ним.

<figcaption> – содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

 

1.4 Общие  сведения о CSS 3

 

C 1996 года CSS значительно «повзрослел» и стал основным инструментом веб-дизайнеров. Благодаря их стремлению делать все более красивые веб-сайты последующие версии CSS приобретали больше свойств и, как следствие, большую сложность. Версию CSS 3 W3C разделил на независимые модули, каждый из которых описывает отдельные наборы свойств. Назначение некоторых модулей известно, например CSS Transitions (анимация или трансформация переходов между двумя состояниями – подсветка текста при наведении на него указателя мыши) или CSS Web Fonts (инструкции для изменения различных свойств шрифта). Функции других пока точно не определены, например CSS Math или CSS Namespace.

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

Хотя CSS 3 еще не стал общепринятым стандартом, многие наиболее привлекательные свойства CSS 3 нашли свое применение в браузерах.

Некоторые новые возможности CSS 3:

– введение новых видов селекторов для более гибкой выборки элементов на странице;

– новые виды оформления текста (тень, разбиение текста на колонки и т.д.);

– настройка прозрачности элементов страницы;

– создание скругленных границ элементов;

– новые свойства, специально предназначенные для элементов форм.

 

1.5 Стилизация ссылок

 

 Большинство браузеров распознает четыре основных состояния ссылок:

– непосещенная ссылка;

– посещенная (visited) ссылка;

– нажатая (active) ссылка, по которой еще не осуществлен переход.

 

Как рассказывалось ранее, CSS предоставляет четыре псевдокласса селекторов, соответствующих этим состояниям:

:link

:visited

:hover

:active

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

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

 

a:link {

color: orange;

}

 

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

а:visited {

color: red;

}

 

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

 

a:hover {

color: aqua;

font-style: italic;

}

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

Например, можно выделить ссылку зеленым цветом:

 

a: active {

color: green;

}

 

Если для стилизации ссылок используются все псевдоклассы, то они должны располагаться в определенной последовательности:

:link

:visited

:hover

:active

2. Практическая часть

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

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

 

Рисунок 1 – структура страницы

1 – блок навигации (меню)

2 – блок заголовка

3 – блок основного содержимого

4 – блок подножия

 

      Определим состав страниц сайта:

– index.html – главная страница;

– bio.html – биография группы;

– group.html – состав группы;

– disc.html – дискография группы;

– media.html – примеры композиций группы;

– gal.html – галерея группы.

 

Создадим в таблице стилей теги и заполним её. Тег <header> будет использоваться для заголовка страницы , <section> для основного содержимого, <footer> для подножия, а для панели навигации воспользуемся тегом <div> с id=”sidebar”.

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

После заполним первую (главную) страницу сайта (рисунок 3). Никаких сложностей в заполнении она не вызывает, поэтому описание процесса приводить не будем.

Рисунок 2 – Главная страница сайта (index.html)

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

Внешний вид страницы представлен на рисунке 3.

Рисунок 3 – Страница биографии группы(bio.html)

 

Далее заполняется страница с информацией о составе группы(group.html), но она не представляет никакой сложности для заполнения, поэтому просто приведём скриншот уже заполненной страницы.

 

Рисунок 4 – Страница с информацией о составе группы (group.html)

 

После заполним страницу с информацией о дискографии группы(disc.html). Для этого создадим свой шаблон, и будем использовать его для добавления каждого альбома. Шаблон выглядит следующим образом:

<figure>

    <div><img src="Ссылка на обложку альбома" alt="Название альбома"></div>

    <figcaption> Название альбома <br> Год выпуска </figcaption>

</figure>

 

 

 

 

 

 

 

 

Используя данный шаблон, заполним нашу страницу. Результат представлен на рисунке 5.

 

Рисунок 5 – Страница с информацией о дискографии группы (disc.html)

 

Далее заполним страницу, содержащую некоторые композиции группы (media.html). Так же, создадим шаблон, который будем использовать для добавления каждой песни:

<figure>

    <div>Название песни<div>

    <figcaption>

<audio preloadp="metadata" controls >

<source src="Ссылка на песню в формате ogg" type='audio/ogg; codecs=vorbis'>

<source src="Ссылка на песню в формате mp3" type="audio/mpeg">

</audio>

</figcaption>

</figure>

 

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

Рисунок 6 – Страница с композициями группы (media.html)

В итоге, осталось заполнить страницу с некоторыми фотографиями группы (gal.html). Опять же воспользуемся шаблоном для каждого изображения:

<figure>

    <div><img src="Ссылка на изображение" width=400px height=350px class="magnify" data-magnifyby="2" data-magnifyduration="1000"></div>

</figure>

 

 

Рисунок 7 – Страница с фотографиями группы (gal.html)

 

 

 

 

 

 

 

 

 

Заключение

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

Задание на курсовую работу выполнено в полном объеме.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение

Содержимое файла styles.css

 

body {

background-color: black;

margin:0;

padding:0;

 

}

#wrapper {

    width:1000px;

margin-left:auto;

margin-right:auto;

border-left: 0px solid black;

border-right: 0px solid black;

}

header {

 

background-color: black;

text-align: center;

font-size:36px;

color: white;

background-image:url(logo.jpg);

background-repeat:no-repeat;

padding-top: 70px;

background-size: 200px;

height: 120px;

}

nav {

  float: left;

  width: 200px;

  background-color: black;

 

 

}

 

section{

    float: right;

width: 800px;

background-color: black;

color: white;

}

footer {

background-color: black;

color:red;

font-size:14px;

font-family: Courier;

clear:both;

}

  #docs li {

margin-left: 0px;

list-style-position: inside;

}

  #sidebar {

 

left: 0;

top: 70px;

width: 200px;

 

}

  #menu {

list-style-type:none;

margin-left: 5px;

padding-left: 0;

width: 200px;

padding: 5px;

}

  #menu a {

display: block;

width: 85%;

height: 40px;

border-width: 2px;

font-size: 28px;

border-style: solid;

border-radius: 10px;

background-color: rgb(230, 42, 65);

color: black;

text-decoration: none;

text-align: center;

border-top-color:white;

border-right-color:white;

border-left-color:silver;

border-bottom-color:silver;]

}

 

  #menu a:hover {

background-color: white;

  }

 

  .text

  {

  color: white;

  text-indent:30px;

  }

 

  figure {

    background: black; /* Цвет фона */

    padding: 5px; /* Поля вокруг */

    display: block; /* Блочный элемент */

    width: 350px; /* Ширина */

    float: left; /* Блоки выстраиваются по  горизонтали */

    margin: 0 10px 10px 0; /* Отступы */

    text-align: center; /* Выравнивание по центру */

   }

figcaption {

    color: white; /* Цвет текста */

   }

   #media {

color: rgb(209, 196, 196);

padding-left: 40px;

padding-bottom: 10px;

   }