Оформление дизайна сайта

Как оформить дизайн сайта, используя минимум графических вставок. Недостаток графических элементов заключается в том, что чем их больше, тем весомей становится страница и, соответственно, она дольше загружается. Ещё один недостаток заключается, что при отключении показа рисунков в настройках браузера дизайн сайта резко изменяется и далеко не в лучшую сторону. Уменьшить количество рисунков на страницах, не ухудшая дизайн можно, используя каскадные таблицы стилей – CSS. Примером такого использования может быть замена графических кнопок навигационного меню кнопками, оформленными с помощью CSS. Создать простую, но красивую кнопку можно с помощью текста (названия кнопки), заключённого в границы с соответствующим фоном.

Граница любого элемента в CSS задаётся с помощью параметра border. Данный параметр задаёт свойства всех четырёх сторон границы в одном объявлении. Форма записи: border: border-width border-style border-color. Border-width – задаёт ширину границы. Border-style – задаёт стиль границы. Стили границ:

Dotted – Пунктирная граница. Изображается в большинстве браузеров сплошной линией.
Dashed – Штрих-пунктирная граница. Изображается в большинстве браузеров сплошной линией.
Solid – Сплошная граница.
Double – Двойная граница.
Groove – 3D-граница.
Ridge – 3D-граница.
Inset – 3D-граница.
Outset – 3D-граница.
Border-color – определяет цвет границы.

Для создания объёмной кнопки лучше использовать 3D границу.

Ниже показан пример создания изображения кнопки:

<span style="border: 5px outset green; background-color: green"> Кнопка</span>. В данном примере ширина границы составляет 5 пикселей. Цвет границы зелёный (green). Фон текста тоже зелёный (background-color: green). Чтобы сделать изображение ссылкой необходимо записать: <a href="MySite.html" style="border: 5px outset green; background-color: green">КНОПКА</a>.

Для придания ссылки динамичности можно воспользоваться каскадной таблицей стилей. Для применения внешней каскадной таблицы стилей нужно открыть блокнот.
Далее надо записать параметры кнопки при не наведённом на неё курсоре мыши:

a.menu
{
border: 5px outset green; /* Рамка вокруг картинки */
background-color: green;
}

После селектора a через точку указывается класс menu (название может быть произвольным). Он необходим для определения к какой ссылке будут принадлежать данные параметры. Ведь ссылок на станице может быть несколько. Далее записываем параметры кнопки при наведённом на неё курсоре мыши:

a.menu:hover
{
border: 5px outset green; /* Рамка вокруг картинки */
background-color: lightgreen;
}

В результате общая запись будет:

a.menu
{
border: 5px outset green; /* Рамка вокруг картинки */
background-color: green;
}
a.menu:hover
{
border: 5px outset green; /* Рамка вокруг картинки */
background-color: lightgreen;
}

Сохраняем файл с расширением css. Пример, myfile.css.

В html документе внутри контейнера <head> делаем запись. Вместе с контейнером она будет выглядеть:

<head>
<link rel="stylesheet" href="myfile.css"/>
</head>

Таким образом, осуществляется подключение внешней таблицы стилей.

Вставляем нашу ссылку <a href="MySite.html" class="menu">Кнопка</a>.