1.2 Описание css
Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
В первых версиях стандарта HTML не было предусмотрено никаких средств для управления внешним видом информации. Общая концепция гипертекста была направлена на доступность информации для любых устройств, способных воспроизводить текст. Для разметки рекомендовалось использовать только логические теги, определяющие заголовки, подзаголовки, списки, абзацы, цитаты и т.д. - то есть, те элементы, которые и составляют структуру документа. Интерпретация же внешнего вида оставалась полностью на совести оконечного терминала.
Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации.
Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.
Подключение CSS
Для подключения таблиц стилей можно использовать один из трех методов:
inline-описание – подключение стиля в самом теге, посредством определенных атрибутов;
описание в секции заголовка – подключение стилей посредством вынесения всех значений в <head> путем тегов <style></style>;
внешний файл – вынесение всех значений в отдельный файл, который подключается с помощью тега <link>
-
<link rel="stylesheet" type="text/css" href="style.css">
Таблица 2
Подключение внешнего СSS-файла на примере собственного сайта
2. Элементы сайта
Зайдя на главную страницу сайта можно обнаружить сверху навигационную панель, которая включает в себя такие кнопки, как:
Gallery
Pastime
Sample links
Каждая
страница обладает одинаковым дизайном
и элементами навигации, что делает ее
визуально-восприимчивой для пользователя.
Однако контент каждой страницы уникален.
На главной странице можно найти текстовое описание сайта, короткий ролик и большую кнопку со встроенной ссылкой на соцсеть. Текст с описанием сайта создан с помощью тегов <h1></h1> и <h3></h3>. На остальных страницах используется тот же размер шрифта для большего визуального восприятия. Шрифт я выбрал 'Oswald', который подгружается на сайт посредством тега @media.
-
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700)
Таблица 3
Пример подгрузки шрифта на собственный сайт из архивов Googl’a
Далее на главной странице можно увидеть ролик, который подгружается с видеосервиса YouTube. Осуществлено это с помощью тега <iframe></iframe> - плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Ниже находится кнопка, нажатие на которую направляет пользователя на соцсеть «Вконтакте». Кнопка была отрисована в графическом редакторе Adobe Photoshop в двух стадиях – активном и неактивном. Изначально она представлена пользователю в неактивном виде, однако при наведении курсором на нее, она принимает вид «нажатой» кнопки. Осуществлено это с помощью псевдокласса :hover, который заменяет одну картинку на другую.
На странице Галереи можно увидеть небольшой JavaScript-слайдер, который подгружает нужные слайды с облака и имеет свой графический интерфейс, благодаря которому можно переключать слайды. Осуществлено это, опять же, с помощью тегов <iframe></iframe>.
На Интерактивной странице можно найти Flash-приложение и описание к нему. Установлено оно было с помощью тегов <iframe></iframe>, которым была задана определенная ширина и высота. Под приложением можно увидеть радио-плеер со списком каналов. Плеер был предоставлен ресурсом «Lovi.fm» и доработан мною.
Также, можно заметить, что контент на каждой странице находится посередине и огражден слева и справа полосами. Сделано это для большего визуально восприятия пользователем и для оптимизации страницы. Сделано это было с помощью блоков <div></div>, которым был задан отступ слева и справа. Так же этому блоку было задано иметь границы слева и справа определенного цвета и толщины. Результат можно наблюдать на любой из страниц сайта.
-
.content{;
margin-left: 20%;
margin-right: 20%;
border-left: 5px solid #8B795E;
border-right: 5px solid #8B795E;
}
Таблица 4
Параметры блока с контентом на примере собственного сайта
Также,
на каждой странице сайте, в левом нижнем
углу расположен счетчик посещения,
предоставленный ресурсом «24log».
В продолжение визуального восприятия, каждый сайт имеет дополнительную нижнюю панель, которая, как и верхняя, представляет из себя блок <div></div>, имеющий определенные параметры.