На сайте Вы повидимому уже читали тему и отдельную статью для начинающих дизайнеров автор которой является Haliff3007 и статью по табличному дизайну JIopD XaocA. Я хочу продолжить полезное начинание и предложить сделать табличный дизайн сайта с применением каскадных таблиц стилей CSS. Что бы понять что же это такое, обратимся к теории.

Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad'ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: «Все свои привычные документы я создаю посредством программ WISIWYG («что вижу, то и получаю») – тексты я создаю в MS Word, презентации – в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу – MS FrontPage...» Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.

Первый раз – в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы «отсебятину» – множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален – любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.

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

Что такое CSS

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

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

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:

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

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

Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.

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

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <STYLE>



В данном примере показано изменение стиля заголовка <H1>. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей



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

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ.



В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <LINK> в заголовке страницы. Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.



Достоинства данного способа:

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее. Именно этот способ мы и будем использовать при построении нашего сайта.

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

Для экспериментов воспользуемся более стабильной версией AS 3.2.3 можно и другой, кому как нравится.

В паке "templates" создадим папку "Lesson" и в неё скопируем содержимое папки "Default". Заходим в админ панель (конфигурация) и ставим тему оформления "Lesson", она там уже появилась. Теперь воспользуемся текстовым редактором или блокнотом.
Открываем в созданной папке Lesson файл index.html, который отвечает за основной дизайн сайта и удалаем из него всё что находится между тэгами <body>. Содердимое должно выглядеть так:



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



Прописываем стиль основной таблицы и ячеек оформления:




Выставляем цвета ссылок, размер шрифта (font), a:link = Не посещённая ссылка, a:visited = Посещённая ссылка, a:hover = Псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит, по простому, цвет ссылки при наведении курсора:



Далее правим стили... А в принципе далее экспериментируйте сами.

В приложении я положил уже готовый файл index.html и таблицу стилей. В таблице всё прокомментировано.
Так же есть новшество, которое позволило немного поизголявшись сделать интересную примочку. Работает во всех браузерах.
Так же кинул не полный пакет иконок без теней, для применения на сайтах с тёмным дизайном. Все делать нет времени и сил, если уж сильно надо, пишите, постараюсь доделать.
Вот вроде на этом и всё, что я хотел показать. Применяя таблицы стилей, можно сделать своеобразный дизайн сайта. Смотрите сами на скриншот. Но интересное увидите после того как установите тему.



Файлы здесь:  Lesson.rar ( 350.74 Кб ) Скачивания: 181


Пакет иконок:  images.rar ( 331.04 Кб ) Скачивания: 132