|
HTML, Excel, Word, SEO |
|
|
|
Внешний лист стилей cssПопробуем поработать с HTML на более высоком профессиональном уровне. Это подразумевает, что вы уже знаете теги (тэги) html и их атрибуты и умеете пользоваться таблицей свойств листа стилей css документа html. Для начала рассмотрим более подробно внешний лист стилей. Почему именно внешний? Да потому, что именно как раз он используется в подавляющем большинстве случаев при разработке сайта, т.к. позволяет сконцентрировать в одном месте практически полное форматирование ресурса. Если возникает необходимость дополнить или исправить форматирование того или иного элемента на сайте, то это можно сделать в течение считанных минут. При этом, объем сайта никакой роли не играет - будь то персональный сайт, состоящий из десятка страничек, то ли мегапортал, включающий несколько сот (а то и тысяч) документов. Теоретический материал будем сразу же закреплять на конкретном примере. В качестве оного, попробуем сделать сайт, посвященный творчеству великого русского художника Ильи Ефимовича Репина. Материал возьмем из электронной энциклопедии Кирилла и Мефодия. Не мудрствуя лукаво, возьмем стандартную компоновку для сайта, состоящую из пяти зон: шапка сайта (на всю ширину), левая колонка, средняя колонка, правая колонка, низ сайта (на всю ширину). Для простоты дизайна, сделаем фиксированную ширину сайта, равную 760 пикселям, с таким расчетом, чтобы ресурс отображался без горизонтальной полосы прокрутки на мониторе с разрешением 800х600. Полный фрагмент html-кода приводить здесь не буду, только основные моменты. Все желающие могут посмотреть полный вариант кода, выбрав в верхнем меню браузера "Вид - Просмотр HTML-кода". Исходный вариант неформатированного сайта можно посмотреть по ссылке: Заготовка для сайта И.Е.Репина. Для большей наглядности на данном этапе делаем видимыми границы таблиц. Главная таблица сайта имеет ширину 760 пикселей и выровнена по центру. Внутри нее находятся еще три таблицы, идущие одна за другой. Первая таблица - верхушка сайта. Вторая - центральная часть сайта. Третья - нижняя часть сайта. Для большей наглядности на данном этапе этим таблицам принудительно задана высота: 60, 200, 60 пикселей соответственно. Надеюсь, что пока все просто и понятно. Теперь давайте начнем форматирование будущего сайта при помощи внешнего листа стилей. Для работы с CSS лично я пользуюсь специальной программой, входящей в комплект Macromedia HomeSite - TopStyle Lite. 
Окно программы состоит из трех частей: Если у вас нет подобной программы, не расстраивайтесь, вполне сойдет любой текстовый редактор, например, Блокнот. Конечно же, с ним не так удобно, но, если все написано правильно, внешний лист будет исправно работать. Создаем пустой файл с именем 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 и перейдем к оформлению наших таблиц, или другими словами, основной части сайта. |
|
|
Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :) |
|
© 2005-2008 |
E-mail: |
