Маргоша

Таблицы и CSS



Немного о таблицах и стилях

 использование таблиц в сайтостроении

Сначала о таблицах вообще...
В процессе работы над созданием страниц сайта, вам постоянно приходится думать, как удобнее, красивее и оригинальнее, с точки зрения дизайна, разместить те или иные элементы, которыми вы хотите заполнить страничку. В этом случае на помощь приходят таблицы, при помощи которых можно раскроить "территорию" странички на множество участков, в которых и найдут место те или иные элементы дизайна - текст, графика и т.д.
Каждой ячейке таблицы (или таблиц, вложенных одна в другую), можно придать определенный дизайн - фон, цвет и размер шрифтов, что позволяет значительно упростить работу над компоновкой и дизайном web-странички.

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

***

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

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

***

CSS - каскадные таблицы стилей или просто стили

В чем же заключается изюминка нашего с вами спасения от непосильного труда корректировки содержимого и оформления страниц сайта?
Очень просто!.. Можно в одном файле описать значение для заголовков, абзацев, шрифтов, фона и т.д., а затем поместить его с расширением .css между тэгами HEAD и /HEAD фразой:
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">
Здесь название таблицы стилей я условно обозначила "style", оно может быть любым, как назовете.
И вся премудрость!.. Тогда на всех страничках вашего сайта будет выдержан один и тот же стиль, а если вы захотите что-нибудь в нем подкорректировать - изменять придется всего один только файл - файл таблицы стилей.

Для примера опишу фрагмент стиля, применяемого на этой страничке моего сайта:

<style type="text/css">
<!--
body {
color: #0000CC;
background: #FFFFFF url(img/fff.gif) no-repeat fixed right bottom;
background-image: url(../../diz/fon.gif);
background-color: #000000;
background-repeat: no-repeat;
}
body,td,th {
color: #000000;
font-size: 18px;
}
.стиль1 {color: #FFFFFF}
.стиль2 {color: #FF3399}
.стиль5 {color: #00FFCC}
.стиль6 {color: #999999}
.стиль7 {color: #999999}
.стиль9 {color: #33CCFF}
a:link {
color: #0066FF;
text-decoration: none;
}
a:visited {
color: #00CC99;
text-decoration: none;
}
a:hover {
color: #CC00CC;
text-decoration: underline;
}
.стиль11 {color: #000066}
-->
</style>

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

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



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

Например все тот же Macromedia Dreamweaver 8. В рабочем окне программы есть боковая панель инструментов для создания и корректировки стилей для различных областей и разделов страницы сайта. вы можете присвоить различным областям и тэгам отдельные названия (например <div id="content">...</div>), и для именно этой области создать свой дизайн в таблице стилей.
Ну а если мы выделим на просмотровом или в рабочем окне программы определенный тэг или область, то программа сразу же нам укажет в боковой панели, какие стили заданы для этой области вашей CSS (для корректировки или просто для вашего сведения).

Мы можем задать стиль для каждого тега, например для тегов BODY, H1, H2 и для тега P и т.д. И все эти установки перейдут на другие страницы вашего сайта, если, конечно вы закрепите созданную таблицу стилей за остальными страничками. Все просто и удобно!

А теперь более научно.
Стили, а правильнее каскадные таблицы стилей (хотя иногда их называют и листами стилей), а еще правильней - Cascading Style CSS (сокращенно CSS) - это набор шаблонов или стилей, которые применяются к какой-то части документа, или вообще ко всему документу, с помощью которых браузер отображает содержимое документа в том виде, в котором ему предписывают стили.
Причем изменять можно не только цвет различных разделов и содержимого между тэгами, но и размер, различные отступы, расположение, рамки и многое, многое другое..

CSS - поистине клад для ВЭБ-мастера, владение этим инструментом позволяет творить чудеса верстки! Думаю, что придет время и вам, рано или поздно, придется освоивать эту науку, если, конечно, вы надолго загоритесь идеей создания сайтов.

***

Совсем чуточку о SSI

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

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

Практически это выглядит так:

  • Вы создаете в корне сайта папку с названием include;
  • Определяете элемент сайта, который повторяется на всех страничках и вырезаете его код из общего кода странички, затем копируете то, что вырезали в Блокнот в виде текстового файла.
  • Сохраняете этот текстовый файл в папку include под каким-либо названием, например top, получим текстовый документ top.txt, который содержит код объекта (ну или элемента), повторяющийся в каждой страничке.
  • В том месте, где мы вырезали код повторяющегося элемента на страничке, надо сделать ссылку на созданный нами текстовый файл, она будет выглядеть так: (для нашего с вами примера top.txt)
    <!--#include virtual="include/top.txt" -->
  • Ну и, наконец, - самое главное: файл вашей странички, написанный и сохраненный, как index.html, теперь нужно сохранить, как index.shtml, поменяв расширение файла.

Вот теперь все. Правда, когда вы откроете для просмотра вашу страничку в программе для локального просмотра на компе, то не увидите вырезанного в отдельный файл объекта, так как он будет виден только после отправки на сервер.
таблицы и стили в сайтостроении Зато теперь, когда вам необходимо поменять что-либо в дизайне вашего сайта, не надо будет корректировать каждую страничку, а просто подкорректируйте созданный в папке include текстовый файл.

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

В настоящее время технологии SSI уже "морально устарела" - большинство ВЭБ-мастеров используют для создания сайтов различные CMS, использующие базы данных и позволяющие управлять сайтом еще проще. Однако, скажу вам по большому секрету, )) - если вы в совершенстве овладеете технологией SSI, то получите очень удобный механизм управления сайтом, не намного уступающий технологии с использованием CMS, особенно, если ваш сайт содержит одну-две сотни страниц, не более. Ведь CMS, по сути, - просто усовершенствованная смесь SSI и CSS.

***



Еще более облегчают кропотливую работу вэб-мастера серверные технологии и применение CMS.