TopStyle 2.1 Pro

Программа TopStyle была разработана компанией BradSoft довольно давно и с тех пор завоевала заслуженное уважение среди разработчиков Web сайтов, причем не только в среде любителей - профессионалы тоже не обошли ее стороной.
Если кратко - то TopStyle предназначена для созданея стилей CSS. Но я попробую остановиться на программе подробнее, поскольку без нее, когда с ней не работал хорошо, а вот когда познакомился - ну ни как.
Что такое CSS? Вы определяете, как должны выглядеть шрифты, ссылки, окна, таблицы, в общем все, что обычно повторяется и делается на кажной странице. Создается описание (стиль), которое сохраняется в теле странички или еще лучше в отдельном файле и размещается в месте размещения каталога сайта, т.е. на сервере или на компьютере. В результате этого вся страничка или сайт - смотря где размещен код CSS, приобретает одинаковый стиль.
Вы имеете возможность изменяя всего один уже созданный файл влиять на оформление всего сайта. При создании страницы, эти действия: выделения, цвета, размеры и т.д. оставляете "по умолчанию", уменьшая тем самым размеры страницы и увеличивая скорость ее загрузки.
Стили CSS можно написать вручную, можно для их создания использовать FrontPage, Dreamweaver или другой редактор. TopStyle кроме создания самих стилей еще и проделывает много разных и полезных операций и не только с созданными файлами...
Внешний вид окна программы показан на рис.1. Она разделена не несколько рабочих обрастей. Самое большое из них - поле для написания и создания силей. С него и начнем.
При установке программы в папку Templates каталога установки TopStyle были записаны несколько файлов с примерами стилей. Откроем файл Sifmple2 из этой папки.
В поле стилей увидим уже созданный стиль и попробуем его разобрать.
-BODY описание стилей для тега "body": цвет фона, цветшрифта, сам шрифт (указано несколько шрифтов - если браузер пользователя не воспринимает первый, то будет показан следующий и т.д.), выравнивание слева и справа. Обратите внимание - параметры значений выделены цветом. Чтобы быстро найти и перейти к редактированию например стиля для тега TD необходимо в окне Selectors найти и нажать мышью TD. При этом в поле стилей будут выделены стили для данного тега. Найдем в Selectors BODY и перейдем к нему.
Щелкнем мышкой по background-color стилю (установка цвета фона). При этом в окне Style Inspector отобразятся все уже созданные стили для данного тега. Для изменения цвета фона выберем и нажмем нажмем строку background-color данного окна. Теперь есть возможность выбора цветов. Аналогичным образом изменяем и устанавливаем параметры для других стилей шрифта, выравнивания и т.д. Если есть желание добавить например высоту шрифта, то в поле Style Inspector выбираем "font-zice" и в нем указываем необходимую высоту.
В указанный файл Sifmple2 добавим TABLE, для описания стилей таблиц. В окне Selectors нажимаем кнопку New Selectors, в появившемся окне выбираем раздел Simple в котором отмечаем элемент TABLE и добавляем его. Дальше осталось указать стили и описания для него. Как это делать вы уже знаете.
В случаях, если надо присвоить стили не всем элементам страницы, а только некоторым – для этого применяется параметр CLASS или идентификатор ID. В этом случае после нажатия New Selectors, в появившемся окне выбираем раздел Class, в котором надо указать имя и когда стиль будет создан - параметры стиля.
Следует отметить, что все измения и дополнения, которые производятся видны в самом нижнем окне Previews, так что визуально наблюдая за вносимыми изменениями без особого труда можно добиться желаемого результата.
Перед сохранением и дальнейшей работой файла со стилями можно проверить работу созданных стилей в IE и NN. Для этого нажимаем кнопку Style Check, внизу открывается окно Style Checker где указаны все ошибки и предупреждения. Нажав F1 на выбранной ошибке можно получить подробное описание ошибки и рекомендации по ее устранению.
Сохраняем файл под именем text и закрываем программу. Для того, чтобы данные стили работали на станице надо к ней привязать этот файл. В заголовке HTML пишем:
<link rel="stylesheet" type="text/css" href="test.css">
Если на странице в каком то месте используется параметр CLASS, неодходимо, например при применении его к участку текста, перед началом текста вставить <A class="имя описания">, а в конце - </А>. Например. В описании стилей создан следующий CLASS: ".size9 { background-color: transparent; FONT-FAMILY: tahoma, sans-serif; font-size: 9px; COLOR: Black; TEXT-DECORATION: none; }". На странице в месте, где требуется текст показать шрифтом черного цвета и высотой 9px перед началом выделения текста требуется вставить "<A class="size9">", а в конце текста - "</a>".
Если у вас очень много страниц, которые хотите оформить с помощью стилей CSS привязывание к каждой странице может оказаться довольно трудным делом, особенно если изменения нужно вносить в несколько сотен или тысяч страниц. Но тут придет на помощь функция Link Wizard, остается указать место, где хранится сайт и Link Wizard обработает все его страницы в пакетном режиме.
TopStyle имеет еще много полезных функций. Вот лишь некоторые из них.В случае, если на вашем сайте уже использовались какие либо стиле, то его надо открыть как сайт в TopStyle и использовав функцию Orphan Styles найти все забытае и затерявшиеся стили. При этом TopStyle обработает все страницы сайта.
Воспользовавшись функцией Link Wizard можно почистить и заметно облегчить страницы вашего сайта. Если вы первый раз работаете с данными функциями - рекомендую создать копию сайта и тренироваться на нем.

<< назад...