Все тексты, представленные в данном разделе, являются плодом нашего интеллектуального труда. Перевод уроков осуществлялся вручную, по возможности сохранялся стиль автора и особенности оригинального языка.
Исходя из вышесказанного – огромная просьба к вам, коллеги web-мастера: пожалуйста, уважайте наш труд, при использовании любых материалов нашего сайта и, в частности, данного раздела ставьте ссылку на сайт www.bcat.com.ua. Заранее спасибо!
Здесь представлены инструментальные средства, которые понадобятся вам для того, чтобы создавать и тестировать правила CSS.
Я рекомендую иметь по крайней мере 2 графических браузера с хорошей поддержкой CSS на вашем компьютере. К таковым относятся последние версии Microsoft Internet Explorer (у IE довольно слабая, по сравнению с Opera и FireFox поддержка CSS [Черный Кот]), Netscape, Opera, Safari, и Mozilla.
Обратите внимание на то, что любой браузер, который базируется на Mozilla (типа Netscape или Camino), будет иметь хорошую поддержку CSS.
Чтобы свести к минимуму возможность возникновения головных болей и вырванных волос, в процессе выполнения упражнений, не используйте Netscape 4.x в качестве основного браузера. Netscape 4.73 - старый скрипучий браузер основанный на технологиях далекого 1996 года. Все обновления Navigator’а (браузерной части набора Communicator’а) начиная с версии 4.08, главным образом были направлены на устранение брешей в защите. К счастью, пользователи, цепляющиеся за этот браузер, за последние несколько лет практически исчезли.
Единственный инструмент, в котором Вы нуждаетесь для того, чтобы создавать таблицы стилей - хороший текстовый редактор. И я не имею ввиду Блокнот! Да я знаю, можно и такими средствами создавать web-страницы, многие так и делают. Но зачем над собой издеваться? Есть несколько хороших текстовых редакторов, к тому же бесплатных, которые значительно облегчат вашу жизнь.
Вот что требуется от хорошего текстового редактора: подсветка синтаксиса, распознавание синтаксиса CSS, качественная реализация поиска и замены, и нумерация строк. Все это необходимо не только для того, чтобы проверять ваш CSS, но также и для проверки кода HTML, являющейся не менее важной для успешного использования CSS, как будет видно из в урока 1.
Так как я использую Mac, в течение многих лет моим любимым текстовым редактором был BBEdit от Barebones Software. Он отвечает всем требованиям, упомянутым выше, даже в бесплатной версии "Lite" (хотя я использую версию Pro, имеющую множество дополнительных возможностей). Отличным текстовым редактором для Windows, выходящим в трех разновидностях (бесплатный Lite, Standard, и Pro) - является Notetab. Другой хороший (и бесплатный!) редактор для Windows - HTML-Kit.
Следующие три инструмента совершенно бесплатны, и являются основными средствами создания «страниц, которые работают». Замена текстового редактора совсем не обязательна, если вас устраивает Блокнот, но я действительно, очень рекомендую (настоятельно), использовать три следующих инструмента.
Опрятная разметка – основа любой страницы. Совершать ошибки так легко, а искать их и исправлять вручную – совсем непросто. К счастью, есть прекрасный, бесплатный инструмент, который подчистит код за вас, и называется он – HTML Tidy.
HTML Tidy - программа, которая "очищает" ваш HTML. Она выходит в огромном количестве разновидностей, для любых платформ. Разновидность, которую я использую – BBTidy - плагин Tidy для BBEdit. HTML Tidy интегрирован в HTML-Kit и Notetab (упомянутые выше). Если ваш любимый текстовый редактор не поддерживает HTML Tidy, не расстраивайтесь: есть автономные версии для Windows, Mac и Linux. См. сайт HTML Tidy для получения дополнительной информации.
После того, как вы очистили ваш HTML при помощи HTML Tidy, возможно вы захотите проверить его валидность. Почему? А потому, что чистый код не обязательно является валидным, согласно стандартам W3C. Это означает, что ваша страница может вести себя непредсказуемо, даже если вы очистили ее код. Валидатор проверит ваш документ на соотвествие выбранному вами DTD (Document Type Declaration, объявлению типа документа).
Хм..., что такое DTD, спросите вы? Скоро и до него доберемся.:) А пока, что вам лучше придерживаться HTML 4.0 Transitional DOCTYPE. Большинство "умных" текстовых редакторов автоматически вставляют объявление DOCTYPE вверху страницы, но если ваш этого не делает, вот - кусочек текста, который понадобится втавить «как есть»:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
Как только вы сделали это, идите на сайт W3C HTML Validator, здесь можно загрузить вашу страницу или дать валидатору ее URL.
И последний элемент в вашем арсенале создания опрятных сайтов - W3C CSS Validator... Как и HTML Validator, этот удобный инструмент поможет вам быстро проверить код CSS на наличие ошибок. Вы можете предоставить валидатору свой CSS код тремя способами: загрузив файл, введя URL, или непосредственно вставив код CSS в поле ввода. Последний способ особенно удобен в тех случаях, когда часть вашей таблицы стилей не работает по непонятной причине. После проверки вашего кода, валидатор создаст "валидную" версию вашего CSS кода. Стоит отметить, что «валидная» версия не, обязательно является единственной действительно допустимой версией кода (например, валидатор CSS похоже не признает краткую версию деклараций шрифтов), и все же валидатор может помочь вам оперативно исправить код CSS.
Одно предостережение: если вы скопируете "валидный" код прямо с сайта валидатора – в нем могут остаться невидимые символы (также известные, как "гремлины".), чтобы избавиться от них, отредактируйте исправленную таблицу стилей в своем текстовом редакторе прежде, чем ее использовать.
В этом курсе, вам не понадобятся специальные инструменты CSS вроде Bradbury TopStyle, WestCiv StyleMaster, или Stylespinner. Визуальные средства создания web-сайтов, такие как Macromedia Dreamweaver и Adobe GoLive также оснащены мощными инструментами для работы с CSS. Эти инструменты (в особенности TopStyle) могут быть очень полезны для уменьшения количества синтаксических и прочих ошибок, но всегда лучше знать наперед, что является ошибкой, а что – не является.
Ну вот вы и скачали необходимые инструменты – приступим к изучению!
Перейдем к уроку 1!
