Кнопочная навигация

На этой странице приведены простейшие реализации навигации на основе горизонтального меню (сразу же поз заголовком, на всех страницах сайта), набора кнопок и закладок примощи CSS.

Книги Тесты Рекомендации Полезные ссылки

Навигация на основе папок.

CSS-атрибут float - выравнивание одного блока по левой границе, а второго по правой в одной строке

"Дивная" верстка вызывает наибольшие проблемы у начинающих WEB-дизайнеров и WEB-программистов. Одним из столпов "дивная" верстки является CSS-свойство float, которое управляет обтеканием эругих элементов разметки.
Ниже приведен пример создания таблицы из двух ячеек при помощи "дивов". Таблица состоит из "дива" контейнера, двух ячеек (содержат слова Left и Right) и "дива" снимающего любое обтекание элементов разметки. В качестве "фичи" приведен вертикальный разделитель ячеек, сформированный правой частью рамки левого "дива".

<DIV style="background-color:silver;width:300px;">
    <DIV style="float:left;border-right:1px solid;width:100px;">
        Left
    </DIV>
    <DIV style="float:right;width:50px;">
        Right
    </DIV>
    <DIV style="font-size: 1px;clear:both;"> </DIV>
</DIV>

Результат:

Left

Right

Не работают CSS-фильтры и CSS-трансформации

CSS-фильтры (dropshadow, glow, mask, shadow и т.д.) и соответствующие им CSS-трансформаций необходимо использовать вместе со свойством width. в противном случае эффект к элементу разметки не применяется.

<DIV style="filter:dropshadow(color=blue,positive=1);width:100px;">
    dropshadow
</DIV>

Пример

Внимание!!! Большинство CSS-фильтров и CSS-трансформаций доступно только с IE5.5.

А-ля портлеты на JavaScript

В последние время появляется все больше решений на BEA WebLogic portal и IBM WebSphere portal. При создании этого сайта я попытался смоделировать простейшую версию статического портала, а управление контентом осуществлять при помощи JavaScript.
Обратите внимание на аля-портлет "Краткая история как я стал писать книги" на стартовой странице этого сайта. Этот аля-портлет может управляться почти как настоящий при помощи JavaScript. Его можно минимизировать, потом обратно развернуть или даже скрыть при помощи кнопок находящихся в правой части заголовка аля-портлета. Если портлет скрыт, то его можно вернуть на экран только нажав кнопку за копирайтом.

Сохранение текстового файла на диске в IE

Всегда считал недопустимым использование ActiveX в WEB-страницах для управление файловой системой, режистри и т.д. Тем неменее, при создании заданий для лабораторных работ по информатике очень удобно сохранять результаты выполнения JavaScript-кода в итоговом файле.
Ниже приведен пример создания файла test.txt в корневом каталоге диска С.

<SCRIPT type="text/javascript" language="JavaScript">
     var ax = new ActiveXObject("Scripting.FileSystemObject");
     var file = ax.CreateTextFile("c:\\test.txt", true);
     file.WriteLine("Test text.");
     file.Close();
</SCRIPT>