web платформа - 2018 : rapid application development (RAD) начинающего web-разработчика!


Редактор CSS-стилей просматриваемой страницы


Самое затратное по времени занятие- доводка общего вида страницы в связке с оформлением ее отдельных элементов. Адаптивный дизайн вносит в это занятие свои "прелести". Web-Платформа может формировать страницу из общего шаблона, в который входит содержимое, сформированное из подшаблонов страницы или подшаблонов для вывода изображений и/или различных блоков контекста, созданных в визуальном редакторе. При этом каждый элемент контекста может иметь индивидуальный стиль, подшаблоны или общий шаблон могут иметь стили в блоках STYLE. Стили могут быть прописаны в подключаемых файлах стилей страницы. Это позволяет легко строить сложные страницы и добиться гибкости в разработке сайта. Однако на конечном этапе, когда надо поправить вид собранной и показаной браузером страницы или отдельного элемента на ней, приходится править CSS-стили, которые могут быть разбросаны по многим местам. Кроме того, часто приходится подправить несколько стилей, например цвет, совсем чуточку. Это удобно делать в браузере в режиме разработчика. Но потом приходится копировать готовые результаты в нужное место. Нужное место - это файлы CSS, шаблоны, подшаблоны, блоки контекста. В каждое надо внести изменения отдельно. На это уходит не так уж мало времени. Web-Платформа, которая позиционируется как средство быстрой разработки позволяет забыть об этих проблемах, а сосредоточиться исключительно на дизайне.
Как это достигается? При загрузке страницы в браузер, Web-Платформа может подключить к ней CSS-редактор, позволяющий менять CSS-стили где бы они не находились. Для этого достаточно вызвать страницу с параметром ed, например "http://demo.osnovnoe.info?ed=1". На странице, загруженной с таким параметром, возможно щелкнуть правой клавишей мыши на интересующем элементе- это запустит CSS-редактор для этого элемента. CSS-редактор вычислит какие из заданных стилей влияют на этот элемент в текущем состоянии и представит их для редактирования:

Для примера показан щелчок правой клавишей мыши на пункте меню страницы. Важно! Редактировать можно только заданные при разработке CSS-стили. В данном случае вид элемента меню задан в файле menu.css. Выделенные жирным названия стилей являются группой, раскрываемой при щелчке на таком наименовании. Например, border в реальности содержит составной стиль, состоящий из стелей верхней, правой, нижней и левой части рамки. CSS-редактор позволяет редактировать как в целом заданные стили, состоящий из составных частей, так и отдельные стили. Обратите внимание, что отступы padding в редакторе заданы как padding-top. Наличие косой черты указывает, что стиль padding задан для всех составных частей, начиная с top. Давайте рассмотрим еще один пример. При щелчке правой клавишей мыши на заголовке страницы, появится окно CSS-редактора, котрый покажет стили, влияющие на элемент H1 старницы:

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

Видим, что при щелчке мышкой на значении цвета, открывается возможность отредактировать цвет с помощью движков- отдельно для базовых цветов. Если надо скопировать или ввести скопированную строку цвета, то следует щелкнуть на квадратике в правом нижнем углу редактора цвета. При перемещении ползунков цвет букв заголовка будет меняться, что позволяет легко и быстро подогнать дизайн заголовка.
После окончания редактирования одного или нескольких элементов, следует сохранить изменения, нажав на клавишу "Сохранить эти+раннее сделанные изменения...". CSS-редактор самостоятельно разберется, где следует произвести изменения исходных текстов и перезагрузит страницу с уже новыми стилями. Имеются ограничения при работе CSS-редактора: невозможно работать со стилями типа "border-top-left-radius", так как в них более 3-х элементов детализации. Такие конструкции порождают множество вариантов их представления. Так отдельный радиус может быть также указан сложной строкой параметров в стилях: border и border-top. Это порождает множество вариантов записи стиля в исходных текстах, а при этом требуется еще и отслеживать приоритетность стилей. Анализатор текстов CSS-редактора не позволяет уходить "глубже" трех параметров детализации, что вполне достаточно для повседневной работы.
Несколько замечаний. При наведении на элемент и нажатии правой клавиши мыши CSS-редактор отражает стили с учетом псевдоселектора :hover. Чтобы отредактировать стили без :hover, следует нажать на кнопку слева вверху окна редактора (под заголовком). Если требуется отредактировать стиль родителя элемента, укажите его, выбрав из списка, находящегося в заголовке окна CSS-редактора. Чтобы не запутаться, Web-Платформа позволяет указывать пояснительный текст-подсказки во вложенных элементах DIV при создании контента. Пишите подсказки, чтобы потом можно было легко понять куда вложены элементы страницы.


WEB-платформа для владеющих PHP
» инструмент ускоренной разработки <IMG>-вых сайтов!