HTML, Excel, Word, SEOОсновы Html ⇒ Внешний лист стилей css

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
HTML профессионально
Внешний лист стилей
Форматирование таблиц
Форматирование гиперссылок
Форматирование изображений



Внешний лист стилей css

Попробуем поработать с HTML на более высоком профессиональном уровне. Это подразумевает, что вы уже знаете теги (тэги) html и их атрибуты и умеете пользоваться таблицей свойств листа стилей css документа html.


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


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


Не мудрствуя лукаво, возьмем стандартную компоновку для сайта, состоящую из пяти зон: шапка сайта (на всю ширину), левая колонка, средняя колонка, правая колонка, низ сайта (на всю ширину).


Для простоты дизайна, сделаем фиксированную ширину сайта, равную 760 пикселям, с таким расчетом, чтобы ресурс отображался без горизонтальной полосы прокрутки на мониторе с разрешением 800х600.


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


Исходный вариант неформатированного сайта можно посмотреть по ссылке: Заготовка для сайта И.Е.Репина.


Для большей наглядности на данном этапе делаем видимыми границы таблиц.

Главная таблица сайта имеет ширину 760 пикселей и выровнена по центру.

Внутри нее находятся еще три таблицы, идущие одна за другой.

Первая таблица - верхушка сайта.

Вторая - центральная часть сайта.

Третья - нижняя часть сайта.

Для большей наглядности на данном этапе этим таблицам принудительно задана высота: 60, 200, 60 пикселей соответственно.


Надеюсь, что пока все просто и понятно.

Теперь давайте начнем форматирование будущего сайта при помощи внешнего листа стилей.

Для работы с CSS лично я пользуюсь специальной программой, входящей в комплект Macromedia HomeSite - TopStyle Lite.


TopStyle Lite

Окно программы состоит из трех частей:
В верхней левой части располагается непосредственный текст (код) листа стилей.
В верхней правой - инспектор объектов, входящих в CSS. Инспектор содержит свойства всех объектов, которые могут входить в лист стилей.
В нижней части находится окно просмотра, в котором сразу отображается внешний вид того или иного объекта.


Если у вас нет подобной программы, не расстраивайтесь, вполне сойдет любой текстовый редактор, например, Блокнот. Конечно же, с ним не так удобно, но, если все написано правильно, внешний лист будет исправно работать.


Создаем пустой файл с именем style.css. Собственно само название файла может быть произвольным, но расширение обязательно должно быть css!


Начнем с форматирования одного из главных тегов - BODY.

Прежде чем начать непосредственное форматирование, нужно определиться с цветовой палитрой сайта. Постараемся работать по всем канонам "правильного сайтостроения", поэтому, будем использовать цвета только из безопасной палитры. Что это такое? Качайте мою программку SafeColor - она вам и в жизни пригодится, и через 5 минут будете знать, что означает понятие "безопасная палитра".


Еще один немаловажный момент, чтобы наш лист стилей мог работать, надо в теле тега HEAD прописать на него ссылку. Вот как это должно примерно выглядеть:

<head>
	<title>Сайт художника Ильи Ефимовича Репина</title>
	<link rel="stylesheet" href="style.css" type="text/css">
</head>

Данная ссылка предполагает, что файл style.css находится в одном каталоге с той html-страницей, на которой прописана данная ссылка. Если, например, файл листа стилей находится на один уровень выше, то ссылка должна иметь вид href="../style.css". Думаю, это понятно.


Итак, начинаем писать внешний лист стилей. Возьмем в качестве фона рисунок, размером 3х3 пикселя, состоящий из двух цветов: светло-голубовато-серого (#6699CC) и светло-голубого (#99CCFF).Назовем рисунок bg.gif и поместим его в тот же каталог, что и наш файл. В укрупненном виде он представлен ниже:


Прописываем в файле style.css следующую строку:

BODY {
	background-image : url(bg.gif);
}

Эта строка сообщает, что в качестве фонового рисунка всей страницы будет выступать наше изображение bg.gif.

Вот как будет теперь выглядеть наша html-страница.


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

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


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

BODY {
	background-image : url(bg.gif);
	margin-top: 5px;
}

Вот как будет теперь выглядеть наша html-страница.


Пока наш сайт состоит из одной страницы. Но, даже если в нем их была бы сотня, то, все равно, после внесенных поправок в файл style.css, изменения сразу произошли бы на всех страницах (естественно, при условии, что на каждой странице стоит ссылка на файл внешнего листа стилей).


На этом оставим пока "терзать" тег BODY и перейдем к оформлению наших таблиц, или другими словами, основной части сайта.



В начало страницы



В начало страницы