Краткое руководство по работе с программой

В начале работы с программой необходимо создать или взять готовую HTML страничку и записать в нее путь файлу (файлам) каскадных таблиц стилей CSS. с помощью инструкции <LINK REL=stylesheet HREF=“explorer.css“ TYPE=»text/css>После этого можно открыть программу, создать в ней новый файл CSS и сохранить его под нужным именем. В данном примере это имя explorer.css. Зачем это все нужно?

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

1. Скорость загрузки страниц существенно растет т.к. блочная верстка в отличие от табличной дает гораздо более «легкие» файлы html;

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

3. Изменяя только лишь CSS файл можно одним махом изменить оформление всех страниц сайта ОДНОВРЕМЕННО, что очень здорово экономит время на более творческие виды работ веб-мастера.

Рассмотрим теперь, что же можно сделать для оформления используемых в HTML тегов с помощью CSS Magic:

Окно программы состоит из следующих компонентов:

1. Строка меню: через главное меню доступны основные файловые операции; создание, переименование, удаление стилей, просмотр результатов работы со стелем через встроенный в программу браузер (в него нужно загрузить соотвествующую редактируемому стилю HTML страницу).
2. Строка минибраузера. Расположена на вкладке «Браузер». Содержит такие команды (следа направо): назад, вперед, открыть HTML, запомнить путь к HTML в стиле (для быстрого доступа), обновить, стоп, адрес, подвижные панели, автообновление. Обратите внимание на назначение двух последних кнопок. С их помощью можно использовать редактор как инструмент визуального проектирования оформления сайта. Для этого нужно открыть CSS файл, загрузить в браузер соответсвующую HTML страницу и после вкючения автообновления любое изменение в стиле можно сразу наблюдать в браузере (см. ниже).
3. Три горизонтальные панели инструментов для управления шрифтами и параметрами абзаца (вверху). На них же расположены быстрые кнопки копирования и отката.
4. Панель выбора активного стиля (справа) с кнопками управления именами стилей.
5. Окно просмотра (в центре). Служит для просмотра или редактирования стиля, для просмотра текущей и предыдущей таблиц стиля, а также просмотра сайта в минибраузере.
6. Панель управления оформлением блока (справа). Содержит пять вкладок. Владки «Блок» «Положение» и «Отступы» определяют поведение блока в потоке, его размер и т.д. Вкладки «Фон» и «Цвет» определяют окраску, границы, параметры скроллбаров и фоновый рисунок блока.
7. Строка подсказок (внизу). Содержит советы и подсказки о назначении кнопок. Почти все функции кратко описаны в подсказках.
   

 

При создании программы стояла задача построения интуитивно понятного интерфейса. Насколько это удалось — судить Вам.

Работа с минибраузером

1. Перед началом работы включите вкладку «Просмотр» и введите локальный адрес странички в строке адреса минибраузера. Лучше ввести адрес странички к которой прикреплен файл стиля.
2. Нажмите кнопку «Записать текущую страницу в стиль». Кроме того, рекомендуется включить режим автообновления. Теперь при открытии CSS Вы сразу будете попадать на нужную страничку.
3. После внесения каких-либо изменений в стиль можно посмотреть как повлияли изменения на ее оформление. Сохранять стиль при этом не обязательно. Программа автоматически временно заменит исходный файл стиля. Если Вы не укажете команду сохранения при выходе или открытии другого файла, то оригинал будет восстановлен и все изменения будут отменены.
4. В режиме автообновления большинство изменений вносимых в стиль вызывают автообновление окна просмотра. Таким образом можно визуально проектировать CSS. Такой функции нет у других редакторов. У них бывает только предпросмотр, который, за исключением цвета и шрифтов, редко совпадает с реальным дизайном сайта.

Работа со списком стилей

1. Начнем с того, одна строчка списка называется селектором стиля. Если создать с помощью мастера стилей новый селектор с именем H1 и выбрав этот селектор указать, что он должен быть жирным, курсивным, выровненным вправо (все как в Wordе), то все страницы, использующие данный CSS файл будут отображать заголовки первого уровня именно в таком виде.
   Это очень простой пример. На самом деле АБСОЛЮТНО ЛЮБОЕ ОФОРМЛЕНИЕ И ПОЗИЦИОНИРОВАНИЕ элементов HTML страницы можно указать в CSS.
   В простейшего качестве примера можете сохранить на диск и исследовать этот сайт. Его дизайн сделан исключительно на CSS без особых ухищрений. Отсутствие ухищрений привело к тому, что дизайн «едет» в NN и Опере, но зато сайт легче изучать изнутри. В оптимальном случае придется разрабатывать свой CSS для трех основный браузеров и подключать нужный CSS скриптом (на этом сайте раньше так и было, но из-за сложности изучения и сохранения CSS пришлось прибить).
2. Для выделения нужного стиля достаточно щелкнуть по его названию в панели стилей.
3. Любой стиль можно перетащить вверх или вниз в списке, изменяя тем самым порядок наследования свойств.
4. Любой стиль можно переименовать двойным щелчком по имени или с помощью команды Переименовать в главном меню
5. Команды Создать и Удалить служат для добавления или удаления нового стиля.
6. При формировании имени стиля можно использовать специальные символы (точка — класс, двоеточие — псевдокласс, # — идентификатор имени блока (например, для тега <DIV ID=имя>), запятая — отделяет несколько имен если для них используется один стиль. Эти символы автоматически формируются мастером имени стиля. Детали смотрите в спецификации CSS.

Работа с текстом стиля.

При вводе текста в окно редактирования стиля появляется кнопка обновления. Ее необходимо нажимать для сохранения в стиле сделанных изменений. После этого происходит распознавание введенного стиля. Нераспознанные элементы не удаляются, но записываются в конце стиля большими буквами. Фрагменты стиля можно копировать и вставлять, однако при таком изменении необходимо после вставки обновить стиль.

При перемещении курсора по тексту стиля вкладки правой панели автоматически переключаются.

Элементы управления стилем

Существут четыре типа элементов управления

1. Кнопки собранные в группу. При нажатии на отпущенную кнопку в текст стиля добавляется соответствующий параметр. Старое значение этого параметра заменяется. При нажатии на вдавленную кнопку параметр удаляется. Так, например, работают команды выравнивания (влево, вправо, по центру…). Думаю, должно быть удобно.
2. Поле ввода числа. Можно ввести данные с клавиатуры или накрутить кнопками вверх/вниз рядом с полем. Единица измерения указывается нажатием на кнопку единиц справа от поля. Если параметр введен (можно вводить положительные, отрицательные и нулевые значения), то он появится в стиле после нажатия Enter или потери фокуса ввода. Для очистки поля и соответственно удаления параметра нужно сделать в поле ввода двойной щелчок или очисть поле клавишей BackSpace и нажать Enter. Так, например, работает любой из отступов.
3. Выпадающий список. Нужно просто выбрать значение параметра. В поле ввода размера шрифта можно вводить данные с клавиатуры. Если выбрать первый элемент в выпадающем списке, то параметр отключается. Так, например, работают команды выбора шрифта.
4. Выбор цвета. Выполняется щелчком по панели цвета. В появившемся окне можно выбрать кликом один из 216 цветов или перейти в стандартное меню выбора цвета Windows. Для отключения параметра нужно снять соответствующий флажок.

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