Web-Разработка |
Как создать стиль CSS или разбор программы TopStyle |
Уже сейчас многие
пользуются только стилями CSS, так как это просто и
очень, очень удобно для ваших страниц. CSS расчитан
на то, чтобы облегчить создание веб-страниц.
Давайте разберёмся и создадим свой стиль для
страниц. Для создания стиля CSS вам понадобится программа TopStyle от компании BradSoft (www.bradsoft.com). Она находится в веб-редакторе HomeSite. Итак, зайдём внутрь этой программы. Вы увидите что-то вроде двух фрэймовых белых страниц (рис.1). Рис. 1 Самая большая из них - это поле ввода HTML тагов. Расположенная ниже(Previews) - это поле вывода (просмотра) того, что получилось. Чтобы было легче работать, лучше не создавайте всё с белого листа, а откройте уже созданный .css и измените его. Итак, зайдите в меню File, затем выберите Open. В основном каталоге программы выберите папку user, затем templates, и выберите любой из предложенных .css. Я выбрал ocean.css. Нажмите Открыть. Перед вами появятся в большом фрэйме таги, а в маленьком воспроизведение их (рис.2). Рис. 2 Щёлкните один раз мышкой на самый верхний таг BODY, TD и вы увидите в правом, маленьком окошке, под названием Style Inspector (рис.3) слова. Например, около слова color появится слово white - это и есть те таги. С помощью этого Инспектора вы можете не зная языка HTML создать свой стиль CSS. Щёлкните на слове white и вы увидите небольшую палитру цветов, выберите любой цвет и смотрите в окно Previews. Вы увидите как текст Element TD изменит свой цвет, в тот, который вы ему дали. Предлагаю вам посмотреть мою таблицу RBG-цветов, она вам может понадобиться для изменения цвета на более красивый, чем там находящиеся:
Так, идём ниже, видите слово font-family, а около него слова Arial, sans-serif, как вы наверное поняли - это шрифт текста. Щёлкните на название шрифта и выберите другой, увидите в окне Previews как текст изменит свой шрифт. Рис. 3 Дальше вы наверное сами понимаете, как делать. Теперь побольше изучим программные разделы. Помните, что допустив ошибку, вы можете её исправить нажатием клавиш Ctrl+Z. Нажав F12 или F9 вы сможете убрать ненужное вам окно. Допустим нажав F12 вы уберёте окно воспроизведения (Previews). Файл справки находится в разделе Help меню Contents. Нажав F8 вы попадёте в раздел Options. Советую вам ничего там не менять, так как вы собъёте весь CSS файл. Сохранить файл можно нажав Ctrl+S, сохранить как... можно нажав Shift+Ctrl+S. Создать новый файл можно нажатием клавиш Ctrl+N. Выйти из программы можно нажав Alt+X. Итак, будем считать, что вы создали свой первый стиль .css. Сохраните его как style.css. Заходите в любую программу по созданию Веб-страниц (FrontPage, HomeSite, Notepad...), впишите в неё этот HTML таг - <link href="style.css" rel="stylesheet"><p class="TD">Приветики</p> - сохраните в той же директории, где находится ваш файл style.css. Откройте html файл в браузере и смотрите на ваш результат (рис.4). Рис. 4 Это произошло из-за того, что я вписал в строке class="TD", TD - название одного из стилей в вашем стиле CSS. Если вы хотите вставить другой стиль, то просто впишите вместо уже находящегося другое название стиля. Ну вот практически всё, что я хотел вам сказать. Ждите новых статей. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Автор: ADOLO |
Copyright by ADOLO |
Копирование и использование данных материалов разрешается только в случае указания на журнал "ADOLO", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта www.adolo.tk. |