Иллюстрированный самоучитель по Dreamweaver MX. Каскадные таблицы стилей. Зачем они нужны

Недорогой но высококачественный сайт. Такое может быть? Да. У нас может быть всё. Достойное качество по доступной цене.
С точки зрения нашей студии создание сайта недорого значит, прежде всего, отменно, технологично и потом уже - недорого.
Удаленная форма работы с клиентами оптимизирует наши расходы и мы можем делать сайты по всему миру. Вам совсем не нужно приезжать к нам. Мы сэкономим Ваше время и средства.

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


Macromedia Dreamweaver MX обеспечивает мощную комбинацию инструментов визуального макетирования, программной разработки и редактирования кода, позволяя разработчикам и дизайнерам на квалифицированном уровне быстро создавать визуально привлекательные и соответствующие стандартам и спецификациям сайты и приложения.
Поддерживая CSS-верстку и возможность ручного кодинга, Dreamweaver дает профессионалам интегрированные инструменты единой среды разрабокти. Разработчики могут использовать Dreamweaver с серверными технологиями на их выбор, чтобы создавать мощные веб-приложения с подключением СУБД и веб-сервисов.
Эта электронная книга рассказывает о Macromedia Dreamweaver MX — версии популярного Web-редактора компании Macromedia. Это исключительно мощная программа, поддерживающая все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе.


Macromedia Dreamweaver MX 2004: профессиональные сайты - легко и непринужденно! Лучший HTML редактор! Лучшая программа для создания сайтов!
Macromedia Dreamweaver MX - На мой взгляд лучшая на сегодняшний день программа, позволяющая создавать Web-страницы, те кто с ней работал думаю согласятся со мной.
Очень мощный, удобный и, пожалуй, один из самых лучших пакетов для создания web-страниц и сайтов.

                    


Зачем они нужны

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

Вы создали сложный Web-сайт с большим количеством объемистых страниц. Текст этих страниц очень сложно отформатирован: обильно используются различные шрифты разных цветов и размеров, жирное и курсивное выделения и т. п. В частности, все цитаты выделены красным курсивным шрифтом. Сайт создан, опубликован и достаточно давно работает; посетители довольны, никаких неполадок нет, все ошибки давно исправлены, и вы о своем сайте уже, честно говоря, забыли.

Вдруг, откуда ни возьмись, — распоряжение начальства: срочно выделить цитаты на сайте еще и уменьшенным шрифтом. (Этому начальству всегда нечего делать, как давать идиотские указания...) А цитат у вас хватает на всех страницах, вдобавок они разбросаны по всему тексту так, что их нужно еще и поискать. Вспомним также, что сайт очень большой, и страницы его также велики.

Ваши действия?

Чтобы уменьшить шрифт цитаты, его необходимо выделить и выбрать в раскрывающемся списке размеров нужный пункт. Сами понимаете, это крайне трудоемко. Можно также попытаться воспользоваться мощнейшими возможностями, предлагаемыми диалоговым окном Find and Replace. Но. чтобы это сделать, надо правильно ввести подстроки для поиска и замены, для чего нужно долго экспериментировать. Наконец можно воспользоваться регулярными выражениями, но это вообще занятие не для слабонервных. Выходит, так и придется форматировать цитаты вручную?

Почему мы вынуждены так поступать? Чтобы объяснить это, надо немного рассказать о принципах написания и хранения программ и используемых ими данных.

Возьмем любую программу, например Microsoft Word. Данные этой программы (документ) находятся в одном файле (с расширением doc), а сама программа — в другом (исполняемый файл ехе). Если нужно изменить программу (скажем, вы получили новую версию), вы просто переписываете файл программы, не трогая данные. Если вам надо изменить данные, то вы просто откроете их в программе и измените, а сама программа останется неизмененной.

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

Это обычные программы. А что же HTML?

Беда HTML в том, что данные и их представление хранятся в одном файле. Более того, они представляют собой единое целое. Откройте любой HTML-файл в текстовом редакторе (например, Блокноте) и посмотрите на него. Текст перемешан с тегами форматирования самым причудливым образом. Найти какую-то нужную информацию в "сыром" HTML-коде — проблема. И еще большая проблема — изменить способ ее представления: для этого надо "перелопачивать" весь файл с риском повредить сами данные. Это очень неудобно, но что ж поделаешь — таков уж этот HTML...

И все же было бы очень неплохо создать некий набор правил форматирования различных фрагментов текста в зависимости от их назначения. Этот набор правил хранился бы в отдельном файле, независимо от содержимого Web-страницы. А в HTML-файл записать только сам текст, разбитый на логические фрагменты тегами <р> и <нп>. Таким образом, и данные хранятся отдельно от представления, и форматированы они гораздо "прозрачнее", и нужную информацию искать значительно проще.

У такого подхода есть еще одно преимущество: становится намного легче изменять представление страниц. Скажем, если нам нужно изменить форматирование какого-либо типа фрагментов текста, мы просто корректируем соответствующие ему правила в файле правил. После этого Web-обозрезатель при следующей загрузке этой страницы покажет все так, как нам надо. Таким образом, мы можем наконец-то изменить вид наших многострадальных цитат редактированием всего одного файла вместо того, чтобы править все страницы.

Хорошо? А как вам понравится, если окажется, что все это существует уже достаточно давно, с 1997 года? Да-да, существует и называется каскадными таблицами стилей.

Каскадные таблицы стилей или просто таблицы стилей (CSS — Cascading Style Sheets) — это набор правил, описывающих форматирование разных фрагментов HTML-кода и хранящихся отдельно от него. Одно такое правило, отображающее форматирование какого-то одного фрагмента или однотипной группы фрагментов кода, называется стилем. Таблицы стилей описываются на особом языке CSS и хранятся в особых файлах с расширением сss, хотя могут быть внедрены в саму Web-страницу.

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

<?><FONT COLOR="#FF0000">Это цитата.</FONT></P>

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

<P><FONT COLOR="#FF0000" size="-1">Это цитата.</FONT></P>

С одной цитатой мы справились без труда. А если их сотня? Нет, без таблицы стилей тут не обойтись. Перепишем наш пример с использованием стилей.

Сначала напишем саму таблицу стилей.

.cit { font-style: italic; color: #FF0000 }

Эта таблица стилей содержит определение всего одного стиля — cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.

Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут — font-style — задает "стиль" текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега . Второй атрибут — color — задает цвет текста. Как видите, два атрибута стиля cit заменили оба тега: и <FONT>, и .

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

.cit {font-style:italic;color: #FF0000}

Так она получается даже компактнее — весьма немаловажное достоинство во времена господства медленных каналов связи. Но, согласитесь, красиво отформатированный вариант легче читается.

Сохраним нашу таблицу стилей в файле styles.css. И давайте перепишем наш фрагмент HTML-кода так, чтобы он использовал эту таблицу стилей.

<Р CLASS="cit">3TO цитата.</Р>

Как видите, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определенного нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшенного размера.

Но, кроме того, нам еще нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог ее найти. Эта ссылка будет иметь следующий вид:

<LINK REL="stylesheet" HREF="styles.ess" TYPE="text/css">

Вот теперь точно все!

Вы уже, наверно, догадались, что таблицу стилей, сохраненную в отдельном файле, можно использовать во многих Web-страницах. Более того, она может находиться вообще на другом сайте. В частности, фирма Microsoft, насколько известно автору, предлагает бесплатно воспользоваться библиотекой таблиц стилей, помещенной на ее сайте. (Внимание: информация непроверенная!)

Кроме того, Web-страница может ссылаться одновременно на несколько таблиц стилей. Например, так:

<LINK REL="stylesheet" HREF="styles1.css">

<LINK REL="stylesheet" HREF="styles2.css">

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

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

.cit { color: #FF0000;

font-style: italic; font-size: smaller }

Здесь мы поместили в определение стиля помещен новый атрибут font-size, задающий размер шрифта. И присвоили ему значение smaller, задающее шрифт на одну ступень меньший, чем у родительского элемента.

И это все! Никаких изменений в коде Web-страниц, ссылающихся на эту таблицу стилей, нам делать не нужно. Достаточно было только изменить файл таблицы стилей.

Удобно? Еще бы!

А еще с помощью таблицы стилей можно изменить внешний вид любого тега HTML. Для этого нужно просто переопределить его в таблице стилей следующим образом:

H1 | { color: #FF0000;

font-size: smaller }

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

А если вы создадите такой стиль:

H1 I { color: #FF0000;

font-size: smaller }

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

<Н1>Курсивный заголовок</Н1> А следующий текст:

<1>0бычный курсив</1>

<Н2>Экспериментируем с курсивом</Н2>

будет отображаться как обычно. А такой стиль:

I.cit { color: #FF0000;

font-size: smaller }

будет применяться только к тексту, помещенному внутрь тега с атрибутом CLASS, установленном в cit (своеобразный гибрид стилевого класса и переопределения тега; этот стиль так и называется — гибридный), т. е. к такому тексту:

<i class="сit:">Маленысий зеленый курсивчик

Как видите, тег также поддерживает атрибут CLASS. Вообще, его поддерживают практически все теги, "отвечающие" за видимые элементы страницы. Так что проблем с форматированием страниц у вас возникнуть не должно.

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

<Р ID="cit">это цитата.</Р>

Тогда определение стиля в таблице должно выглядеть следующим образом:

#cit { font-size: smaller; font-style: italic }

Такой стиль называется стилем-селектором.

Конечно, в одной таблице стилей вы можете определить одновременно несколько стилей:

.cit { font-size: smaller;

font-style: italic } I { color: #00FF00 } HI I { color: #FF0000;

font-size: larger }

Используя стили, можно задать для текста даже такие параметры, о которых и не мечтал "чистый" HTML. Например, можно создать рамку вокруг фрагмента текста или сделать так, что при наведении курсора мыши на текст он (курсор) будет менять форму. Обо всем этом будет рассказано ниже.

С помощью таблиц стилей можно форматировать не только текст. Любому элементу страницы — изображению, таблице, горизонтальной линии — может быть присвоен стилевой класс.

Например, вы можете переопределить поведение тега <BODY> таким образом:

BODY ( background-color: #000000 )

Здесь мы задали черный цвет фона страницы с помощью нового атрибута

background-color.

К сожалению, это справедливо в полной мере только для последних версий Web-обозревателей. В частности, в старых версиях Navigator поддержка таблиц стилей очень ограничена и относится, в основном, к тексту. Но поскольку старыми версиями этой программы вряд ли пользуется много народу, вы можете использовать таблицы стилей в своих страницах без опасения, что их "не поймут".

В составе Dreamweaver вместе со справочным руководством по HTML поставляется справочник по CSS. Чтобы вызвать его на экран, сначала вызовите панель Reference, выбрав пункт Reference в меню Window или нажав комбинацию клавиш <Shift>+<Fl>. После этого в раскрывающемся списке

Рис. 10.1. Справка по атрибуту color в панели Reference

Book этой панели выберите пункт O'REILLY CSS Reference. Чтобы просмотреть справочную информацию по какому-либо атрибуту, достаточно выбрать его имя в раскрывающемся списке Style. Например, на рис. 10.1 представлена справочная информация по уже знакомому нам атрибуту
color.

Мы познакомились с одной из двух разновидностей таблиц стилей — внешней или привязанной. О второй их разновидности, а также об альтернативном способе задания стиля для элемента страницы мы сейчас узнаем.


электронная книга получена с сайта www.knigka.info

   Почти всегда целью создания сайта является получение прибыли, которая в свою очередь, зависит от его внешнего вида. Статистика говорит, что около 94% людей, при выборе товара, сначала обращают внимание на упаковку, а потом уже на её содержимое. И если эта упаковка не привлекательная и безвкусная, мало кто обратит на нее внимание, и, соответственно, товар не будет пользоваться спросом.
   В случае с интернет, “упаковкой” выступает ваш сайт, а “товаром” - его контент. Если сайт выглядит непривлекательно, то каким бы ценным и нужным не было его содержимое, люди будут обходить его стороной. Наша задача - сделать ваш сайт привлекательным и удобным, чтобы люди чувствовали себя уютно и комфортно, чтоб они возвращались к вам еще и еще. Соответствие между ценой и качеством вас, несомненно, порадуют.
.
   Мы делаем сайты для бизнеса, а не красочную картинку, которая увешена тяжеловесными флэшами и огромными фотографиями.
   Пользователя, когда он попадает на абсолютно любой сайт, прежде всего интересует информация, затем, как реализовать на этом сайте полученную информацию, чтобы было удобно и просто (юзабилити), подбор цветовой гаммы, расположение блоков на странице и многое другое.

   Перед тем, как заказывать создание сайта, рекомендуем прочесть статью А зачем мне (нам) сайт? или Что нужно знать заказчику сайта
Да и вообще, обратите внимание на раздел Статьи о продвижении сайта и бизнеса там вы найдёте ответы на многие вопросы.