Динамическая настройка меню. CSS переходы для анимации меню

Не все шаблоны предлагают возможность использования встроенного в них динамического меню, когда при наведении на пункт меню курсора мыши скрытые подменю раскрываются выпадающим списком. Статические меню могут быть, конечно, самодостаточными, при условии, если структура вашего сайта состоит всего из нескольких разделов. Но такое характерно только для сайтов-визиток. Как правило, уважающий себя сайт имеет достаточно разветвленную структуру, что само по себе заставляет прибегать к раскрывающимся меню, поскольку ширина или высота веб-страницы не бесконечны и не смогут разместить все пункты в одну строку (случай горизонтального положения меню) или в один столбец (случай вертикального меню). Кроме того, замечено, что пользователи очень не уважают меню, в которых больше 5-10 пунктов, для них становится утомительным вчитываться в бесконечный перечень пунктов меню сайта, они уходят с него, даже не дойдя до последнего пункта, даже, быть может, как раз того, что искали на вашем сайте. Поэтому необходимость динамического меню очень серьезно мотивирована. Существует специальное расширение, которое инсталлируется в вашу Joomla и позволяет в режиме конструктора вам самим создать и оформить меню по своему усмотрению. Но даже если вам не нужно динамическое меню, вам вполне достаточно статического, или выбранный вами шаблон сайта уже имеет таковое, не спешите игнорировать эту тему. Она в любом случае позволит вам лучше понимать специфику веб-приложений, когда вы сами поработаете в программе Swmenufree.

Com_swmenufree5.2_J1.5

Именно так называется плагин, который мы скачиваем отсюда и устанавливаем уже известным нам способом на своем сайте. После установки в меню «Компоненты» выбираем «SwMenuFree» и переходим в панель управления этой программы. Перед нами окно с множеством настроек и вкладками «Параметры модуля», «Размеры и положение», «Цвет и фон», «Шрифты и отступы», «Границы и эффекты». Особо не стоит пугаться обилия настраиваемых параметров, но оговоримся сразу: работа предстоит творческая.

В строке «Имя модуля» мы сразу вводим название меню, которое собираемся создать. Это название важно для системы, а не для нас, поскольку после его создания меню с таким именем вы все равно не увидите в списке меню вашего сайта. Дело в том, что мы не создаем новое меню как таковое, а преобразуем содержимое любого, по выбору, из уже созданных в новый, динамический вариант. Мы для ясности использовали название «Динамическое меню».

В строке «Источник меню» выбираем «Trans Menu», так как этот вариант, из всех трех возможных, самый оптимальный для нашего шаблона. Кто не верит, пусть попробует остальные, чтобы в результате согласиться с нашей версией.

Строка «Источник меню» позволяет нам выбрать из списка то, уже существующее меню сайта, которое мы хотим представить в динамическом виде. Собственно, выбор не велик, ведь у нас пока всего одно меню – Главное, с системным именем mainmenu. Его-то в этом списке и выбираем.

В строке «Родитель» оставляем значение TOP. Это означает, что наше меню не является дочерней веткой, а само выступает в качестве родителя, способного «порождать» другие ветки меню.

Спускаемся в следующий блок настроек – «Параметры таблицы стилей». В строке «Загрузка таблицы» выбираем «Внедрить стиль напрямую в страницу», это позволит нашему меню использовать именно те стили оформления, которые мы сами ему зададим, игнорируя навязываемые шаблоном сайта стили.

В строке «Суффикс класса модуля» ничего не пишем.

Следующий блок «Параметры кэширования» игнорируем.

Блок «Общие параметры модуля». Проставляем флажки так, как показано на рисунке.

Блок «Размещение и доступ». В строке «Размещение модуля» ставим header1 (это положение горизонтального меню предусмотрено для данного шаблона. Кстати, у нас на данный момент там стоит модуль поиска по сайту, поэтому вам нужно будет предварительно переключить его в другую позицию - banner).

Другие настройки в этой вкладке не трогаем, пока у нас на сайте всего одно меню, они не актуальны, и значения, по умолчанию выставленные в них, нас вполне удовлетворяют. Хотя, если вы желаете, чтобы ваше главное меню отображалось не на всех страницах сайта, а только на нескольких, - выберите в блоке «Отображение модуля меню на страницах» нужное.

Переходим в следующую вкладку – «Размеры и положение». Здесь мы сможем настроить высоту, ширину элементов меню и подменю, а также способ расположения на странице.

Блок «Положение и ориентация меню». В строке «Меню - Выравнивание:» ставим left, т.к. выравнивание текста меню по левому краю считается оптимальным. В строке «Меню / Подменю - Ориентация:» выбираем horizontal/down/right (горизонтально-вниз-вправо). Не забываем после каждого внесенного изменения в настройки нажимать кнопку «Просмотр». После чего вы увидите ваше меню в отдельном окне, в котором оно функционирует и выглядит так, как будет выглядеть на странице после сохранения результатов. Полюбовавшись, можно закрыть это окно.

Блок «Размеры элементов меню». Здесь все значения равны нулю, что означает размер элементов меню по размеру содержащегося в нем текста. Это очень удачный для нас вариант, т.к. мы создаем горизонтальное меню, а в нем, в отличие от вертикального, все элементы не должны быть одного размера.

В блоках «Смещения меню верхнего уровня» и «Смещения подменю» можно задать величину смещения элементов меню относительно друг друга. Хотя в этом нет особой объективной необходимости.

Вкладка «Цвет и фон». Здесь начинается самое интересное. Здесь мы должны проявить максимум творческого подхода, оформив все элементы нашего меню в гармонирующие с фоном шаблона сайта цвета. Фон элементов меню можно заливать цветом и изображениями (вспоминаем PowerPoint!). Причем заливка изображением имеет доминирующее значение над заливкой цветом: если вы зальете обоими вариантами, результирующей окажется заливка изображением. Так как у нас нет никаких изображений, блок «Фоновые изображения» пока пропускаем. А в блоке «Цвет фона» начинаем работать. Чуть ниже находится палитра выбора цветов и подсказка, как это сделать: «Выберите цвет на палитре и нажмите кнопку выбор около поля, к которому вы хотите применить выбранный цвет».

Не забываем всякий раз просматривать результат. Какие цвета выбрать, смотрите сами, но все же лучше будет после просмотра в отдельном окне нажать кнопку «Сохранить» и перейти на главную страницу сайта (если вы работаете с сайтом в двух вкладках – главная страница и админпанель – как мы предлагали изначально, то не составит трудности переключиться на соседнюю вкладку браузера), чтобы воочию увидеть соответствие выбранного цвета фону шаблона сайта.

Но мы не можем использовать всех возможностей.

Изменение структуры меню

Во-первых, перейдя на главную страницу, мы видим, что у нас два главных меню: одно – новое, над которым мы сейчас работаем, а другое – старое, которое стоит в своей позиции в правой части страницы. Не удивляйтесь, чтобы меню не дублировались, одно из них надо отключить, а именно старое, точнее, отключить модуль его отображения. Идем в «Расширения» - «Модули» и отключаем модуль «Главное меню», щелкнув по зеленой галке в его строке, превратив её в красный круг с белым крестом. Переходим на вкладку, в которой открыта главная страница и видим, осталось одно меню.

Во-вторых, мы не можем настроить оформление подменю, поскольку у нас пока их нет. Поэтому нам нужно перестроить структуру нашего меню так, чтобы основные элементы стали подпунктами.

Для этого идем в меню настройки: «Меню» - «Главное меню». Перед нами список основных элементов меню. Давайте два из них оставим основными, а остальные переведем в разряд подменю. Нам нужно будет последовательно открывать каждое из «приговоренных» к роли подменю основных элементов меню и в строке «Родительский пункт меню» щелкнуть тот элемент, чьим подменю мы делаем данный элемент. На рисунке показан уже результат пяти последовательных выборов для каждого элемента (бывшие основные элементы «Форум», «Галерея», «Загрузка», «Блог категории», «Демонстрация», чьим родительским элементом раньше являлся невидимый пункт «Вверху», стали «детьми» основного пункта «Возможности»).

Чтобы лучше понять механизм этих изменений, рекомендую после каждогоизменения статуса элемента меню и его сохранения выходить на главную страницу, нажимать F5 и смотреть на результат. Двух-трех раз, думаю, будет достаточно. Можно пойти даже далее и еще усложнить меню, например, сделав родителем двух последних элементов подпункт «Загрузка». В результате мы будем иметь трехуровневую иерархию в своем меню.

Количество уровней, которые можно создать подобным образом – не ограничено, но больше трех уровней делать не рекомендуется.

Теперь возвращаемся в панель управления SwMenuFree и донастраиваем оставшиеся элементы подменю, а также цвет шрифта и цвет границ в соответствующих одноименных блоках вкладки «Цвет и фон». Следует пояснить, что цвет меню, подменю и шрифта устанавливается для двух вариантов: вне курсора и когда на подпункт (пункт и его содержимое) наведен курсор мыши. Эти цвета, разумеется, должны различаться.

Вкладка «Шрифты и отступы». Здесь можно выбрать вид шрифта и отступы от границы ячейки меню до текста этой ячейки. Рекомендую здесь ничего не менять, кроме толщины шрифта, поскольку обычное начертание сливается подчас с фоном заливки (в блоке «Плотность шрифта» выбираем bold).

Вкладка «Границы и эффекты». На рисунке указаны наши настройки.

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

Но мы еще не рассмотрели возможность заливки фона рисунком.

Заливка фона меню рисунком

Этот способ сложнее, но возможности оформления дает неограниченные. Для создания изображений мы воспользуемся GIMP (помнится, в 5 занятии мы с его помощью создавали логотип сайта, вернее, пытались создать).

Нам нужно создать прозрачное изображение размером 200 ×200px. «Файл» - «Создать».

Настройки диалогового окна, как на рисунке. Теперь берем инструмент «Прямоугольное выделение» (нажимаем клавишу R) и рисуем на нашем прозрачном изображении рамку выделения шириной пикселей 100 и высотой 25 пикселей. В панели инструменов, в строке «Размер», при перемещении мыши вы видите изменяющиеся цифры высоты и ширины создаваемого выделения, в зависимости от этих значений мы и направляем нашу мышку в ту или иную сторону, пока значения не будут равны 100 и 25 пикселей соответственно. Получившееся выделение мы должны залить темно-коричневым цветом, воспользовавшись инструментом «Плоская заливка» (Shift+B) и выбрав нужный цвет в палитре. Палитра вызывается на экран щелчком по прямоугольнику цвета переднего плана в панели инструментов. (Вообще все кнопки панели обладают подсказками, достаточно задержать курсор на каком-либо значимом элементе панели – тут же выскакивает подсказка).

В палитре нужно щелкнуть курсором в подходящий цвет и согласиться с выбором. После этого щелкаем внутри выделения – и оно заливается выбранным цветом.

Теперь нам нужно выделить полоску толщиной 3 пикселя по нижнему краю нашей заливки. Мы делаем это, как только что выделяли первую область, ориентируясь на цифры в панели инструментов (в строке «Размер»). Если вы уже отпустили курсор, а цифры все не те, скажем, больше или меньше нужных, подводим курсор к границе выделения. Как только он меняет форму, придавливаем левую кнопку мыши и тащим курсор вниз или вверх. Отпустив мышь, видим, что таким образом мы увеличили или уменьшили область выделения. Пробуем еще раз, доведя область выделения до нужных нам размеров. Заливаем её оранжевым цветом.

Теперь делаем слой частично прозрачным: меню «Окна» - «Панели» - «Слои». В появившейся панели видим прямоугольник текущего слоя, выделяем его щелчком и перемещаем ползунок в строке «Непрозрачность» так, чтобы значение стало равным 80. Наша заливка стала немного прозрачной. Теперь из всей этой заливки нам нужно вырезать тонкую полоску высотой 25 пикселей и шириной 3 пикселя. Берем инструмент «Кадрирование» и, как до этого инструментом выделения, охватываем нужный прямоугольник, опять же ориентируясь на размеры в панели. Если промахнулись, исправляем ошибку, так же, как и с выделением, в плане исправления погрешностей это идентичные инструменты. (Для работы с мелкими объектами лучше увеличить масштаб изображения до 200-400%. Выпадающий список с возможными размерами масштаба – в строке состояния окна с изображением, промахнуться трудно.) После того, как нужные размеры достигнуты, щелкаем внутри выделенного прямоугольника и получаем наше первое готовое изображение для кнопки меню. Не удивляйтесь, что оно такое маленькое, браузер повторит его столько раз, сколько нужно для заполнения всей площади кнопки. Сохраняем его в формате.png на Рабочем столе под именем а2.

Создаем еще одно прямоугольное изображение 25 на 3 пикселя, только залитое сплошным коричневым цветом, тем же, что и первое. Сохраняем его под именем a1.png.

Идем в админку сайта, запускаем SwMenuFree. Вкладка «Цвет и фон». Блок «Фоновые изображения». Строка «Меню - фон:», кнопка «Выбор». Нам нужно теперь загрузить наши изображения на сайт. В появившемся окне жмем кнопку «Обзор». Указываем наш рисунок a1.png на Рабочем столе и жмем кнопку Upload. Он загружается в папку на сайте. Чтобы вставить его в качестве фона пункта меню, щелкаем прямо по загруженному на сайт изображению и жмем OK. То же самое, но только в строке «Меню - фон при наведении:» проделываем с изображением a2.png.

Если все сделали правильно, получилось очень оригинальное меню: в спокойном состоянии меню однотонное, а при наведении курсора в нижней части элемента меню появляется оранжевая полоса. Когда быстро ведешь по меню мышкой, эта полоса стремительно пробегает по всему меню.

Контрольные вопросы:
  • Назовите преимущества динамического меню над статическим.
  • Что такое «родитель» в терминологии динамического меню.
  • Каким образом можно изменить структуру уже созданного меню?
  • В чем заключается специфика работы в расширениях joomla, иначе говоря, веб-приложениях?
  • Что произойдет, если после настройки меню в приложении SwMenuFree, подключить сайт к другому шаблону? Перечислите возможные проблемы.
  • Контрольные задания:
  • Продумайте дизайн изображений для вашего меню.
  • Создайте в GIMP четыре изображения: два для меню, два для подменю.
  • Установите изображения на ваше меню.
  • Вышлите ссылку на ваш сайт для контроля.
  • Наверняка вы видели на некоторых веб-сайтах динамичные и анимированные меню, которые изменяются при прокрутке вниз. Минимизируя главное меню навигации, вы оставляете больше места для содержания. В этом уроке мы объясним, как вы можете создать меню самостоятельно с помощью HTML5, CSS3 и немного jQuery.

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

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

    Создание базовой структуры в HTML5

    Мы начнем с создания основного HTML кода, который нам понадобится. Для начала, мы будем придерживаться очень простой структуры HTML5.

    Теперь, когда наш первоначальный HTML код написан, мы добавим код для меню, а также некоторые другие детали для хедера нашего HTML файла.

    Как создать анимированное меню | WebDesignMagazine

    • Главная
    • Статьи
    • Это очень клевый сайт!

    Крутим вниз и смотрим как изменится меню

    Все! Приехали!

    В нашем : мы добавили мета-тег для автора, чтобы указать создателя документа, после чего мы включили известный “сброс CSS” от Эрика Мейера, что приведет к сбросу почти каждого элемента в HTML файле, давая вам более понятный и простой документ для работы. И так как мы будем использовать JQuery позже, в последней строке нашего главного элемента мы импортируем его через JQuery CDN.

    В нашем теге, мы использовали по умолчанию HTML5 элемента. Наш будет во всю ширину страницы и будет нести ответственность за изменения между большими и малыми версии меню. Мы даем нашему класс с именем “large”, так чтобы мы могли изменить некоторые специфические свойства в CSS, чтобы преврать наше меню в уменьшенную версию. это наш меню-контейнер, который содержит изображение логотипа нашего веб-сайта и простой неупорядоченный список меню с тремя ссылками.

    Поскольку у нас здесь нету никакого контента, будет использоваться, чтобы растянуть страницу и заставить действовать прокрутку.

    И это все по HTML части. Теперь нам нужно стилизовать элементы при помощи CSS и сделать меню динамичным.

    Стилизация меню и страниц

    /* Импортируем шрифт Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Основной стиль */ body{ background-color: #ebebeb; } ul{ float: right; } li{ display: inline; float: left;} img.logo{float: left;} /* Размер и центровка меню */ nav{ width: 960px; margin: 0 auto;}

    Немного этого CSS сделает наше меню 960px шириной по центру, при организации нашего меню справа и логотипа слева. Мы также импортируем Amaranth шрифт от Google Web Fonts, чтобы использовать его для нашего текста на странице.

    Section.stretch{ float: left; height: 1500px; width: 100%; } section.stretch p{ font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; } section.stretch p.bottom{ top: 100%; }

    Здесь мы просто заставляем страницу растянуться, чтобы спровоцировать скроллинг (прокрутку), и позиционирование текста для обозначения начала и конца содержания.

    Header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; } header a{ color: #969696; text-decoration: none; font-family: "Amaranth", sans-serif; text-transform: uppercase; font-size: 1em; } header a.active, header a:hover{ color: #3d3d3d; } header li{ margin-right: 30px; } /* Размеры для увеличенного меню */ header.large{ height: 120px; } header.large img{ width: 489px; height: 113px; } header.large li{ margin-top: 45px; }

    Здесь мы заканчиваем основную стилизацию нашего заголовка. будет служить нашим меню контейнером. Он будет содержать наш элемент и будет служить элементом, где мы определяем цвет фона, высоту меню, стиль меню ссылок и другое. Он будет адаптироваться к ширине экрана со свойствами ширины: 100% и будет оставаться фиксированными в течение других элементов на веб-сайте. Важно не забуть задать z-индекс, чтобы этот элемент перекрывал остальные части страницы, а также положения:fixed​​, чтобы сделать div закрепленным вверху, так чтобы он оставался на том же положении, в то время как пользователь прокручивает веб-сайт. Как вы видите, кроме установки стилей для заголовков, мы также устанавливаем некоторые специфические стили для “large” класса, используя header.large. Начальное состояние нашего меню будет большим, и поэтому мы здесь определяем только нужные стили, чтобы оно выглядело, как мы хотим, при первоначальном входе пользователя на страницу.

    Динамическое изменение размера меню

    Наше меню сделано и стилизовано, но мы все еще хотим поработать над его минимизацией. Для создания этого «состояния», мы будем создавать новый класс для в CSS под названием “small”, который будет ответствен за изменение свойств, которые мы должны модифицировать. Мы уже определили большое меню, так что теперь мы просто должны сделать наше меню короче, наше изображение меньшего пропорционального размера, а (margin top) мы используем в наших элементах

  • , что также должно быть уменьшено, чтобы они оставались вертикально в центре с новой высотой меню:

    /* Sizes for the smaller menu */ header.small{ height: 50px; } header.small img{ width: 287px; height: 69px; margin-top: -10px; } header.small li{ margin-top: 17px; }

    Итак, как вы видите, эти стили практически идентичны тем, которые в большей меню, мы просто изменили класс “large” на “small” и изменили значения, которые мы использовали, на меньшие. Мы используем отрицательные марджин-топ на изображение, чтобы централизовать его в контейнере, так как изображение имеет тонкую тень и выше, чем написание для его приспособления. Теперь у нас есть все необходимые стили, чтобы настроить меню размера изменения, и если вы попытаетесь изменить его в вашем , вы увидите в браузере, что меню станет меньше. Но нам нужно, чтоб оно было динамичным.

    Изменение класса меню при помощи jQuery

    При всех наших стилях на местах, нам просто нужно добавить немного JavaScript, чтобы переключатся между классами «large» и «small». Так как мы хотим изменить это на основе прокрутки пользователем, мы будем использовать.ScrollTop () функцию в jQuery. Эта функция позволит нам получить или установить позицию прокрутки в пикселях. Положение прокрутки является количеством пикселей, которые уже были прокручены в окне браузера. В этом случае мы просто должны знать сколько пикселей пользователь прокрутил, чтобы мы могли вызвать наш код и переключиться между классами:

    $(document).on("scroll",function(){ if($(document).scrollTop()>100){ $("header").removeClass("large").addClass("small"); } else{ $("header").removeClass("small").addClass("large"); } });

    Если пользователь прокрутил более 100 пикселей, то тогда будет удален класс «large», который мы создали, и добавлен наш новый класс «small». Таким образом, меню будет изменяться в размере, как мы ранее определили в CSS. Попробуйте, к этому времени оно должно уже работать, но вы могли заметить, что переходы между классами, кажутся очень резкими.

    CSS переходы для анимации меню

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

    Header,nav, a, img, li{ transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ }

    Здесь мы определили переходы для всех свойств CSS для , и

  • элементов, в основном все элементы, которые мы меняем. Этот код будет анимировать изменения между обоими классами с переходами CSS в течение 1 секунды. Проверьте сейчас, результат должен быть очень плавным.

    Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на CSS для IE"? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.

    Цель, которой мы хотим достичь в этой статье

    Цель данной статьи - сделать выпадающее меню для IE, сделанное исключительно на CSS. Начав с этой постановки, я расширил задачу до того, чтобы заставить работать такое меню в других наиболее известных браузерах (прим. пер.: из комментариев выясняется, что этими браузерами являются Opera 7.x и последние версии Firefox).

    Цель, которой мы хотим достичь в этой статье, в принципе более или менее общеобразовательная, т.е. дать общее представление о некоторых "скрытых" и редко используемых особенностях браузеров.
    Также особенно любопытные могут в этой статье найти некоторые ухищрения, с помощью которых можно достичь определенных нестандартных результатов. Ну и для разработчиков эта статья может стать поводом для размышления или источником новых идей.

    Каким мы представляем уровень читателя.

    Вообще-то я думал о том, чтобы пометить эту статью как для "углубленного изучения (advanced)". Но я уверен, что даже не самые опытные разработчики хорошо поймут то, что написано в статье. Короче, читатель просто обязан знать основы CSS и
    HTML.

    Чем это меню отличается от всех других?

    Я долго искал в сети меню, которые были бы сделаны на CSS, но не нашел ни одного решения, которое бы работало без глюков в IE. Однако же я нашел много интересных идей, которые и привели меня к тому результату, который будет здесь описан. Да, мой код тоже не совершенен, но у меня попросту нет времени, чтобы выправить все ошибки. Самое интересное альтернативное решение из всех, что я видел (которые используют CSS), основано на использовании псевдокласса hover для элементов LI. А я-то никогда и не думал, что такое возможно, впрочем, как и не думал о том, что вообще возможно сделать выпадающее меню для IE без скриптов...

    Основным отличием между моим и другими меню является то, что мое работает в IE. Все решения, которые я видел, используют элемент LI как основной элемент для псевдокласса:hover, однако Microsoft решила, что этот псевдокласс может быть использован только для
    элемента A. Большинство сайтов делают оговорку, что их меню работают только в браузерах Opera 7.x или Mozilla. Но ведь эти браузеры используются только пятью процентами пользователей! Да, такие меню хороши в этих браузерах, но к сожалению не могут быть видны в большинстве самых распространенных браузеров. Сейчас мы исправим это недоразумение.

    Что такое меню, сделанное с помощью только CSS?

    Это динамическое меню, для создания которого используется только CSS, и не используются скрипты (например, написанные на JavaScript).

    Что, не верится?

    Давайте рассмотрим код:

    < STYLE type = text / css id = "default" title = "default" name = "default" >
    *::- moz - any - link br ,*:- moz - any - link br {
    /*a workarround for mozilla*/
    display : none ;
    }

    div #menu * {
    cursor : pointer ; /*because IE displays the text cursor
    if the link is inactive*/
    }

    Disabled {
    color : red ! important ;
    background : none ! important ;
    }

    Div #menu {
    background : #F5F5DC;

    height : 15px ;
    white - space : nowrap ;
    width : 100 %;
    }

    Div #menu .a {
    background : #F5F5DC;
    border : 1px solid #F5F5DC;
    color : #000000;
    text - decoration : none ;
    }

    Div #menu .a table {
    display : block ;
    font : 10px Verdana , sans - serif ;
    white - space : nowrap ;
    }

    Div #menu table, div#menu table a {
    display : none ;
    }

    Div #menu .a:hover, div#menu div.menuitem:hover {
    background : #7DA6EE;
    border : 1px solid #000080;
    color : #0000FF;
    margin - right :- 1px ; /*resolves a problem with Opera
    not displaying the right border*/
    }

    Div #menu .a:hover table, div#menu div.menuitem:hover table{
    background : #FFFFFF;
    border : 1px solid #708090;
    display : block ;
    position : absolute ;
    white - space : nowrap ;
    }

    Div #menu .a:hover table a, div#menu div.menuitem:hover table a {
    border - left : 10px solid #708090;
    border - right : 1px solid white ; /*resolves a jump problem*/
    color : #000000;
    display : block ;
    padding : 1px 12px ;
    text - decoration : none ;
    white - space : nowrap ;
    z - index : 1000 ;
    }

    Div #menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
    background : #7DA6EE;
    border : 1px solid #000000;
    border - left : 10px solid #000000;
    color : #000000;
    display : block ;
    padding : 0px 12px ;
    text - decoration : none ;
    z - index : 1000 ;
    }

    Td {
    border - width : 0px ;
    padding : 0px 0px 0px 0px ;
    }

    Menuitem {
    float : left ;
    margin : 1px 1px 1px 1px ;
    padding : 1px 1px 1px 1px ;
    }

    Menuitem * {
    padding : 0px 0px 0px 0px ;
    }

    #other {

    }

    #moz{

    }

    #moz::-moz-cell-content{
    height : auto ; visibility : visible ;
    }

    #other::-moz-cell-content{
    height : 1px ; visibility : hidden ;
    }

    #holder {
    width : 100 %;
    }

    < TABLE id = holder >
    < TR >
    < TD id = "other" >
    < DIV id = "menu" >
    < DIV class= "menuitem" >
    < a class= "a" href = "#" > File < BR >
    < TABLE >
    < TR >
    < TD >< a href = #2>click me

    < TR >
    < TD >< a href = #3>Save

    < TR >
    < TD >< a href = #4>Close



    < DIV class= "menuitem" >
    < A class= "a" href = "#11" > Help < BR >
    < TABLE >
    < TR >
    < TD >< a class= "disabled" >..

    < TR >
    < TD >< a href = #13>Index

    < TR >
    < TD >< a href = "#14" > About






    < TR >
    < TD id = "moz" > Mozilla specific menu !
    < DIV id = "menu" >
    < DIV class= "menuitem" >
    < a class= "a" href = "#" > Filezilla
    < TABLE >
    < TR >
    < TD >< a href = #2>Open

    < TR >
    < TD >< a href = #3>Save

    < TR >
    < TD >< a href = #4>Close




    < DIV class= "menuitem" >
    < A class= "a" href = "#11" > Helpzilla
    < TABLE >
    < TR >
    < TD >< a class= "disabled" >..

    < TR >
    < TD >< a href = #13>Index

    < TR >
    < TD >< a href = "#14" > About







    < BR >

    Что происходит, почему все работает?

    Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню - к псевдоклассу ":hover". Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ":hover". В нашем случае "A:hover TABLE" выбирает "

    в
    элементе , на который наводится указатель мыши. Далее следует трюк с таблицей, свойство "display" которой равняется "none" (т.е. она невидима). Таблица находится между тэгами якорей (,). По словам Microsoft, это может вызвать неадекватную реакцию IE, но я ничего такого не заметил.

    Почему мы используем таблицу? А потому, что что она очень хорошо разделяет вложенные якоря, которые мы хотим задействовать из основного якоря. Такое решение не работает в Mozilla 0.7 и даже с помощью JavaScript я еще не нашел способа реализовать это. Прямое вложение якорей не допускается Microsoft, поэтому элемент table - это своеобразный хак для IE. И, насколько я знаю, только таблицы позволяют таким образом "провести" IE.

    Итак, что у нас тут имеется? 2 таблицы с якорями внутри якорей.

    < A class= "a" href = "#11" > Help < BR >
    < TABLE cellpadding = "0" cellspacing = "0" border = "0" >
    < TR >
    < TD >< a href = "#12" > Howto

    < TR >
    < TD >< a href = "#13" > Index

    < TR >
    < TD >< a href = "#14" > About

    Которые являются скрытыми.

    div #menu .a table {
    display : none ;
    z - index :- 1 ;
    }

    Браузер показывает содержимое якоря при наведении указателя мыши и применяет в этом случае соответствующий стиль:

    div #menu .a:hover {
    background : #7DA6EE;
    border : 1px solid black ;
    color : black ; z - index : 0 ;
    }

    Для выпадающей таблицы, которую мы используем для подменю: это ключевая таблица, которая и является выпадающим списком.

    div #menu .a:hover table{
    background : White ;
    display : block ;
    position : absolute ;
    width : 125px ; z - index : 0 ;
    border : 1px solid #708090;
    }

    Для ссылок внутри подменю:

    div #menu .a:hover table a {
    display : block ;
    color : Black ;
    text - decoration : none ;

    }

    Если мы наводим указатель на одну из ссылок в подменю, браузер применяет следующий стиль:

    Для ссылок внутри подменю:

    div #menu .a:hover table a:hover {
    display : block ;
    background : #7DA6EE;
    color : black ;
    text - decoration : none ;
    padding : 0px 11px ;
    border : 1px solid black ; z - index : 1000 ;
    visibility : visible ;
    }

    Стиль ссылок в выпадающем меню:

    div #menu .a:hover table a {
    display : block ;
    color : Black ;
    text - decoration : none ;
    padding : 1px 12px ; z - index : 1000 ;
    }

    Возможно, вы заметили, что я испольщовал несколько свойств "z-index" для некоторых элементов. Они являются хаками для некоторых проблем, которые я нашел при тестировании меню.

    Усовершенствования

    Для того, чтобы добавить подуровни в выпадающее меню нужно просто вставить еще один элемент div ".menuitem" (вместе с его содержимым и аналогичной структурой) вместо ссылки в родительскую таблицу.
    Теперь, когда у вас есть подуровни в меню, вам нужно будет удалить тэги
    , чтобы дать меню "нормально выезжать". В дополнение к этому, вам нужно будет сделать несколько копий классов.menuitem и.a с одинаковыми свойствами, но разными именами для каждого подменю.
    Да, похоже поработать придется много, НО вы можете просто добавить их селекторы в соответствующую секцию таблицы стилей.

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

    Переключение стилей (Скины)

    Если вы хотите добавить скины для вашего меню с возможностью их смены самим пользователем, вам нужно будет добавить дополнительные таблицы стилей и дать им имена с id="some_name" (для IE) и с именами name="some_name" (для остальных браузеров). Для того, чтобы не применялись оба стиля, вам нужно заблокировать все стили, кроме стилей по умолчанию, путем добавления параметра "disabled" в стиль тэга (причем не имеет значения, связываете ли вы его или используете линейный синтаксис). Mozilla и Opera позволяют переключение поименованных стилей из браузера. Как правило, эти браузеры не применяют все стили, которые определены именем name="..." и игнорируют id="...". Также они умеют использовать имя name="default" как таблицу стилей по умолчанию и name="alternate" в качестве альтернативной таблицы стилей. Вы можете определить имя стиля, которое пользователь будет видеть как свойство title="...". Например, демонстрационная версия меню на этой странице включает следующие определения:

    < STYLE type = text / css id = "alternate" title = "Blue" name = "alternate" disabled >
    ...< STYLE >
    < STYLE type = text / css id = "default" title = "Default" name = "default" >
    ...< STYLE >

    Обратите внимание на порядок присвоения имен, я настойчиво рекомендую строго ему следовать.

    IE не имеет встроенного переключения стилей CSS, поэтому нам придется его сделать самим (тут уже не без использования JavaScript):

    Выберите один из стилей, кликнув на соответствующий, и вернитесь вверх, чтобы увидеть
    изменения:

    onclick = "document.styleSheets("default").disabled=false;document.styleSheets("alternate").disabled=true;" > Стиль
    по умолчанию

    Onclick = "document.styleSheets("alternate").disabled=false;document.styleSheets("default").disabled=true;" > Голубой

    Onclick = "document.styleSheets("alternate").disabled=true;document.styleSheets("default").disabled=true;" > Без
    стилей

    Это делается так:

    < ul >
    < li onclick = "document.styleSheets("default").disabled=false;
    document.styleSheets("alternate").disabled=true;" >
    < a >Default

    < li onclick = "document.styleSheets("alternate").disabled=false;
    >
    < a > Blue

    < li onclick = "document.styleSheets("alternate").disabled=true;
    document.styleSheets("default").disabled=true;" >
    < a > No Stylesheet

    Предупреждение! Это просто маленький пример!
    Перезагрузка страницы сбросит значения по умолчанию для таблиц стилей. Поэтому для реальных целей необходимо использовать cookies или серверные скрипты для того, чтобы запоминать выбор пользователя, что опять-таки не является предметом рассмотрения данной статьи.
    Добавлю только, что приведенный выше код будет работать только в
    IE.

    Заключение

    Я советую всем использовать меню на основе CSS на ваших сайтах (и в веб-приложениях), потому что таким образом можно избежать многих проблем, которые появляются при использовании меню на основе JavaScript. Такие проблемы, как правило, возникают при неправильной обработке событий в IE. Более того, в некоторых браузерах имеется возможность отключения скриптов, и уж тем более многие браузеры не поддерживают JS от Microsoft.

    Если же браузер не поддерживает CSS, то он по крайней мере будет отображать все ссылки.

    Известные ошибки

    По умолчанию ссылки в подменю не работают в Mozilla. Но я нашел более-менее приемлемое решение этой ошибки. Оно основано на вставке специального меню, опять-таки без использования скриптов. Просмотрите внимательно те места кода, где упоминается Mozilla (или "moz"). Вы увидите, что HTML разделы не имеют вложенных якорей (последний тэг помещен туда, где он и должен находиться). В первой части CSS я использую недокументированные селекторы - это специальные селекторы для Mozilla, и добавляю селектор:hover для тех элементов div, которые поддерживаются Mozilla. И все равно после этого поведение остается не совсем корректным.

    В комментариях есть замечание (от Nick Young), что меню не работает в Netscape. я уверен, что проблема там в том же, что и в Mozilla. Надо искать дополнительную информацию об этом. Решение возможно потребует некоторых изменений, потому что альтернативный код должен нормально работать и в Netscape.

    Замечания:

    Страница была протестирована в IE версий 5, 5.5, 6, в Opera 7.23 и Mozilla 0.71. Скорее всего, меню будет работать и в более ранних версиях указанных браузеров.

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

    Охарактеризуйте место операционных систем среди других видов программного обеспечения.

    Каковы функции операционной системы?

    4. Охарактеризуйте стиль работы с помощью графических операционных систем семейства Windows.

    5. Назовите основные объекты Windows и опишите их назначение.

    6. Какие функции выполняют меню Пуск? Поиск?

    7. Как вызвать динамическое меню и каковы его возможности?

    8. Охарактеризуйте назначение пунктов главного системного меню Windows.

    9. В чем заключаются принципы Plug and Play OLE и Drag and Drop?

    10. Опишите типичное окно Windows.

    11. Охарактеризуйте стандартные приложения Windows.

    12. Опишите развитие операционных систем семейства Windows.

    1.Охарактеризуйте место операционных систем среди других видов программного обеспечения.

    В компьютере одновременно работает много программ:
    одна программа выводит изображение на монитор (видеодрайвер)
    другая программа выводит на принтер (драйвер принтера)
    третья - работает с мышью (драйвер мыши)
    четвертая - с клавиатурой
    пятая - с винчестером,
    и т. д.
    А ОС объединяет работу этих программ и управляет ими

    2. Каковы функции операционной системы?

    Основные функции операционной системы:

    1. Обмен данными между компьютером и различными периферийными устройствами (терминалами, принтерами, гибкими дисками, жесткими дисками и т.д.). Такой обмен данными называется "ввод/вывод данных".

    2. Обеспечение системы организации и хранения файлов.

    4. Организация диалога с пользователем.

    3.Охарактеризуйте основные ступеньки эволюции операционных систем.

    Первое поколение.

    40-е годы. Первые цифровые вычислительные машины без ОС. Организация вычислительного процесса решается программистом с пульта управления.

    Второе поколение.

    50-е годы. Появление прообраза ОС - мониторные системы, реализующие систему пакетной обработки заданий.

    Пакетный режим

    Необходимость оптимального использования дорогостоящих вычислительных ресурсов привела к появлению концепции «пакетного режима» исполнения программ. Пакетный режим предполагает наличие очереди программ на исполнение, причём ОС может обеспечивать загрузку программы с внешних носителей данных в оперативную память, не дожидаясь завершения исполнения предыдущей программы, что позволяет избежать простоя процессора.

    Третье поколение.

    1965-1980 г.г. Переход к интегральным схемам. IBM/360. Реализованы практически все основные концепции, присущие современным ОС: разделение времени и многозадачность, разделение полномочий, реальный масштаб времени, файловые структуры и файловые системы. Реализация мультипрограммирования потребовала внесения очень важных изменений в аппаратуру компьютера: привилегированный и пользовательский режимы, средства защиты областей памяти, развитой системы прерываний.

    Разделение времени и многозадачность

    Уже пакетный режим в своём развитом варианте требует разделения процессорного времени между выполнением нескольких программ. Необходимость в разделении времени (многозадачности, мультипрограммировании) проявилась ещё сильнее при распространении в качестве устройств ввода-вывода телетайпов (а позднее, терминалов с электронно-лучевыми дисплеями) (1960-е годы). Поскольку скорость клавиатурного ввода (и даже чтения с экрана) данных оператором много ниже, чем скорость обработки этих данных компьютером, использование компьютера в «монопольном» режиме (с одним оператором) могло привести к простою дорогостоящих вычислительных ресурсов.

    Разделение времени позволило создать «многопользовательские» системы, в которых один (как правило) центральный процессор и блок оперативной памяти соединялся с многочисленными терминалами. При этом часть задач (таких, как ввод или редактирование данных оператором) могла исполняться в режиме диалога, а другие задачи (такие, как массивные вычисления) - в пакетном режиме.

    Четвертое поколение.

    Конец 70-х. Создан рабочий вариант стека протоколов TCP/IP. В 1983 году он был стандартизирован. Независимость от производителей, гибкость и эффективность, доказанные успешной работой Интернет, сделала этот стек протоколов основным стеком для большинства ОС.

    Начало 80-х. Появление персональных компьютеров. Бурный рост локальных сетей. Поддержка сетевых функций стала необходимым условием. 80-е годы. Приняты основные стандарты на коммуникационные технологии локальных сетей: Ethernet, Token Ring, FDDI. Это позволило обеспечить совместимость сетевых ОС на нижних уровнях.

    Начало 90-х. Практически все ОС стали сетевыми. Появились специализированные сетевые ОС (например IOS, работающая в маршрутизаторах)

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

    4.Охарактеризуйте стиль работы с помощью графических операционных систем семейства Windows.

    С переходом на персональные компьютеры с процессором 80386 и с увеличенной памятью (не менее 4 Мбайт), на смену Norton Commander и характерному для DOS стилю работы в текстовом режиме пришла оболочка Windows и новый стиль работы с графическим интерфейсом. Идея графического интерфейса Windows заимствована компанией «Microsoft», долгое время специализировавшейся на операционных системах для персональных компьютеров IBM, у операционной системы для компьютеров Apple. Иногда Windows определяют не как оболочку, а как нечто большее, используя термин типа «операционная среда». При этом исходят из того, что если классическая оболочка (такая как Norton Commander) видоизменяет лишь пользовательский интерфейс, то программа типа Windows дополнительно к этому берет на себя управление программами и заданиями, т.е. реализует основные функции операционной системы.

    Принципиально важные особенности Windows по сравнению с MS DOS - это многозадачность (допускается одновременное выполнение нескольких процессов) и возможность обмена данными между работающими программами. Важно и то, что Windows использует расширенную оперативную память (много больше 640 кбайт) и подразумевает единый интерфейс всех прикладных программ. Недаром утвердилось понятие «программировать под Windows», т.е. ориентироваться на стандартный графический интерфейс.

    Название Windows - «окна» - говорит само за себя. Эта оболочка операционной системы построена на основе графических окон, соответствующих программным средствам и группам программных средств, которыми пользователь может управлять, изменять их размеры, перемещать по экрану, открывать и закрывать по своему желанию.

    Оболочка Windows ориентирована на работу с помощью манипулятора «мышь». Все операции в этой среде в высокой степени унифицированы, все программные средства имеют очень схожие интерфейсы и принципы управления, что значительно ускоряет освоение новых программных средств.

    5.Назовите основные объекты Windows и опишите их назначение

    Группа файлов, объединенных по какому-либо критерию (аналог в NC – каталог).

    Документ

    Обычно изображаются на Рабочем столе как листочки бумаги с загнутыми уголками. Документ – любой файл, обрабатываемый с помощью приложений (программ). Документ может содержать текстовую, графическую, звуковую и видеоинформацию.

    Легко узнать по изогнутой стрелочке в нижнем левом углу пиктограммы. Ярлыки представляют собой высокоэффективное средство ускоренного доступа к объектам. Ярлык можно «нацепить» на любой объект – файл, программу, сетевую папку, диск, значок и поместить в любой области интерфейса пользователя. Двойной щелчок по ярлыку открывает объект, с которым он связан.

    Программы

    В отличие от других объектов имеют каждая свое собственное «лицо» (пиктограмму).

    Эффективное средство интеграции приложений. Его можно представить как некоторое динамическое пространство оперативной памяти для временного размещения данных обмена. Для занесения информации в буфер обмена и ее извлечения Windows имеет в своих меню команды Копировать, Вырезать, Вставить.

    6.Какие функции выполняют меню Пуск? Поиск?

    Меню «Пуск» в HYPERLINK "https://ru.wikipedia.org/wiki/Windows_XP" \o "Windows XP" Windows XP:

    Отображение имени и HYPERLINK "https://ru.wikipedia.org/wiki/%D0%90%D0%B2%D0%B0%D1%82%D0%B0%D1%80_(%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0)" \o "Аватар (картинка)" аватар пользователя

    Доступ к браузеру и E-mail клиенту

    Доступ к часто используемым программам

    Открытие специальных папок

    Выключение компьютера

    Осуществляет поиск файлов и папок, а также компьютеров в сети

    7.Как вызвать динамическое меню и каковы его возможности?

    Для быстрого вызова часто повторяемых команд можно воспользоваться динамическим меню, которое вызывается правой кнопкой мыши. Динамическое меню (рис) содержит часто употребляемые команды. Набор команд зависит от выбранного объекта: значка диска, папки или файла, выделенного текста, панели задач или свободного места экрана.

    Если щелкнуть правой кнопкой значок диска в окне программы Мой компьютер, то появятся команды: Открыть, Проводник, Найти, Разделение, Форматировать, Вставить, Создать ярлык. Свойства. Так же как и для диска, команды динамического меню для файла зависят от типа файла и дублируют меню Файл. Правую кнопку мыши удобно использовать для перемещения или копирования файла из одного окна в другое папки Мой компьютер или Проводник. После транспонирования значка папки/файла с нажатой правой кнопкой мыши появляется динамическое меню, позволяющее указать цель транспортировки: переместить или скопировать объект, создать значок быстрого вызова.

    (динамическое меню)

    8.Охарактеризуйте назначение пунктов главного системного меню Windows.

    Главное системное меню содержит следующие основные пункты.

    Меню часто запускаемых программ. В этих строках обычно располагаются программы, которые пользуются наибольшим спросом, т.е. запускаются чаще других.

    Все программы.

    Мои документы, Недавние документы, Рисунки, Моя музыка, Мой компьютер. Второй пункт выводит на экран меню, состоящее из открываемых в последнее время документов.

    Панель управления. Содержит в свою очередь подменю из большого числа пунктов, соответствующих средствам настройки системы: Администрирование, Дата и время, и т.п.

    Администрирование, Сетевые подключения, Принтеры и факсы.

    Справка и поддержка. Осуществляет допуск к справочной информации по работе с Windows. Справку можно получить в трех вариантах: по общему содержанию, по предметному указателю, по команде Поиск (поиск перечня разделов, где встречается интересующий термин).

    Поиск. Осуществляет поиск файлов и папок, а также компьютеров в сети.

    Выполнить. Позволяет осуществить запуск программ по указанному пути.

    9.В чем заключаются принципы Plug and Play OLE и Drag and Drop?

    Plug and Play (включи и работай). Данная технология ориентирована на автоматическое распознавание, установку и настройку любого типа устройств, в том числе, монитор, видеоплату, принтер, звуковую карту, модем, CD-ROM, различные контроллеры жесткого диска. Она позволяет упростить настройку и управление оборудованием, обеспечить надежную без сбоев их работу.

    OLE – Object Link and Embedding (связь и внедрение объектов). Объект OLE – произвольный элемент, созданный средствами какого-либо приложения Windows, который можно поместить (внедрить и/или связать) в документ другого приложения Windows. При этом, внедрив в документ приложения некий объект, созданный в другом приложении, имеется возможность редактировать этот объект средствами «родного» приложения.

    Существуют два способа реализации технологии OLE.

    Первый способ – через буфер обмена.

    Второй способ – командой приложения Вставка/Объект...

    Следует различать операции Внедрить и Связать.

    При внедрении объект становится частью документа-приемника и теряет связь с исходным файлом (если таковой был). Внедренный объект можно редактировать средствами «отца» – OLE-источника, но внесенные изменения не отражаются на исходном файле (и наоборот, «автономные» изменения исходного файла не отражаются на внедренном объекте).

    Связать с приемником можно только объект, который оформлен как файл-документ (т.е. зарегистрирован в файловой системе по точному адресу). При обновлении файла-документа средствами «отца» (OLE-источника) изменения отражаются и в документе-приемнике (либо автоматически, либо по указанию пользователя).

    Drag and Drop – метод, используемый для копирования или перемещения выделенного фрагмента информации, значка, окна, объекта в другое положение. Например, если, выделив участок картинки «ножницами», указать на него курсором мыши, нажав левую или правую кнопку и удерживать ее, то можно «перетащить» участок на новое место. Если во время перетаскивания удерживать нажатой клавишу , фрагмент будет копироваться на новое место. Кроме того, методом Drag and Drop можно изменять границы абзаца и страницы документа, ширину и высоту строк таблицы, составлять пользовательские панели инструментов и выполнять многие другие операции. Drag and Drop используется в технологии OLE, в информационных системах для физического и логического перемещения документов и т.д.

    10.Опишите типичное окно Windows.

    Главным объектом интерфейсной части Windows является окно – прямоугольная часть экрана, которая позволяет просматривать выведенную в ней информацию. Различаются три типа окон:

    Окно программы (приложения);

    Окно документа (окно объекта обработки программы);

    Диалоговое окно (инструмент обработки). Элементы окна Windows представлены на рисунке

    Системное меню содержит команды для изменения размеров окна, его перемещения, минимизации до размеров значка и закрытия.

    Строка состояния содержит разнообразную справочную информацию, зависящую от текущего режима работы.

    Строка горизонтального меню содержит группы команд, объединенных по функциональным признакам. Вызов справочной информации осуществляется через кнопку

    Некоторые кнопки панели инструментов окна (см. рисунок) имеют очевидный смысл.

    Опишем некоторые возможные манипуляции с размерами окон.

    1. При помощи кнопок, расположенных в строке заголовка окна:

    Кнопка Свернуть сворачивает окно в кнопку и помещает ее на Панели задач.

    Чтобы снова развернуть окно, необходимо щелкнуть по данной кнопке;

    Кнопка Развернуть увеличивает размер окна до максимально возможного;

    Кнопка Восстановить изменяет размер окна от максимального до среднего и обратно.

    2. При помощи мыши:

    Подвести указатель мыши к границе окна (вертикальной, горизонтальной, к углу), которую необходимо изменить (указатель примет вид двойной стрелки);

    При нажатой левой клавише мыши переместить указатель в нужном направлении.

    Закрыть окно можно следующими способами:

    Комбинация клавиш и ;

    Щелчок по кнопке Закрыть строки заголовка окна;

    Активизировать системное меню и выбрать команду Закрыть;

    Выполнить команду Файл/Закрыть.

    11.Охарактеризуйте стандартные приложения Windows.

    Существует группа прикладных программ, интегрированных в Windows и называемых стандартными приложениями. Это относительно скромные по возможностям (по сравнению со специализированными) программы, но удобные при выполнении несложных работ. Ссылки на стандартные приложения сосредоточены в папкеСтандартные среди всех программ.

    По мере развития семейства Windows стандартные приложения также совершенствуются. Текстовый редактор Блокнот (Notepad) позволяет работать с небольшими неформатированными текстами, а его более мощная версия WordPad является промежуточным по уровню возможностей редактором текстов между Notepad и мощным текстовым процессором Word. Графический редактор Paint – усовершенствованная версия редактора PaintBrush – позволяет создавать и редактировать несложные изображения, окрашивать их фрагменты, стирать и добавлять новые; кроме того, Paint может быть полезен как промежуточная среда при обмене рисунками между приложениями, когда из рисунка надо вырезать фрагмент и т.п. Программа Imaging обеспечивает: просмотр графических документов и их свойств, масштабирование, работу с фрагментами, получение графического документа путем сканирования изображения на бумаге, добавление комментариев. Калькулятор способен работать в двух режимах: простые вычисления (лишь арифметические операции) и инженерные вычисления (многие математические функции, различные системы счисления, использование скобок и т.д.). В специальных папках среди стандартных приложений имеются игры, в том числе с использованием Интернета, а также средства развлечения, позволяющие просматривать видеофайлы, прослушивать аудиодиски, создавать собственные видеоролики.

    12.Опишите развитие операционных систем семейства Windows.

    На смену системе Windows 95 последовательно пришли:

    ОС Windows 98, Windows NT, семейства систем Windows 2000 (Professional, Server и Advanced Server) и Windows XP (Home Edition, Professional) – и список этот не закрыт. Windows NT и Windows 2000 Server (Advanced Server) нацелены на обслуживание локальных сетей (обсуждение сетевых ОС отложим до гл. 5), а системы Windows 98, Windows 2000 Professional и Windows XP непосредственно продолжают линию Windows 95 и предназначены для организации работы ПК.

    Каждая последующая версия системы типа Windows, сохраняя основные принципы построения пользовательского интерфейса системы Windows 95, обеспечивает, вообще говоря, больше функций для пользователя, чем предыдущая. В то же время каждая следующая версия системы предъявляет все больше требований к быстродействию компьютера, объему оперативной памяти и жесткого диска.

    Новые возможности указанных систем.

    ОС Windows 98 является непосредственным усовершенствованием Windows 95. Общего между ними так много, что их в литературе часто обозначают собирательным именем Windows 9x. Тем не менее, во многих отношениях Windows 98 превосходит предшественницу. У нее более рациональный и более богатый возможностями пользовательский интерфейс и значительно упрощен доступ к ресурсам Интернета. Последнее достигнуто за счет включения в состав Windows 98 программы-обозревателя Internet Explorer 4.0 и возможности выхода в Интернет из различных панелей и окон. В Internet Explorer включены программа для работы с электронной почтой Outlook Express и другие коммуникационные программы. Значительно расширены возможности для использования мультимедиа-приложений, т.е. программ, использующих одновременно графические и звуковые средства отображения, а также движущихся изображений.

    ОС Windows 2000 Professional расширяет возможности пользователя ПК в следующих сферах:

    Установка системы и обновление системных файлов;

    Повышенная безопасность;

    Поддержка работы с Интернетом;

    Поддержка мультимедиа-приложений;

    Работа на переносном компьютере в режиме использования аккумуляторов.

    ОС Windows 2000 Professional может поддерживать компьютер с двумя центральными процессорами и значительно большей оперативной памятью. Новые возможности (по отношению к Windows 9x) связаны с более удобной процедурой установки ОС (включая установку по сети), с большей защищенностью от сбоев. Система поддерживает многоязычный пользовательский интерфейс. Ей свойственна ускоренная многозадачность, т. е. можно одновременно выполнять больше задач, чем в Windows 9x. Система допускает возможность параллельного использования на одном компьютере с системами Windows 9x, включая совместный допуск к папкам и периферийным устройствам. Специальный сервис организуется для переносных компьютеров. Так, она позволяет использовать «спящий режим» путем запоминания текущей настройки рабочего стола, последующего полного отключения питания с восстановлением рабочего состояния по желанию пользователя.

    При работе в сети система позволяет создать на компьютере зеркальную копию документов, хранимых в сети, а затем обрабатывать эти документы, отключившись от сети.

    Продолжение совершенствования ОС Windows в направлениях, указанных выше, привело к созданию ОС Windows XP. У нее обновлен пользовательский интерфейс, который может быть адаптирован к личным приемам работы пользователя, позволяет группировать однотипные приложения под общей кнопкой на Панели задач. Установлены новые или существенно усовершенствованы программы работы с аудио- и видеоданными, а также усилены коммуникативные возможности; в частности, пользователи могут совместно работать с приложениями (при работе в сети). Системные файлы защищены от порчи (перезаписи) при установке новых приложений. Разумеется, каждая новая версия ОС Windows наследует лучшие черты предшественницы.

    По имени файла или папки и по цепочке символов, входящих в имя файла или папки;

    По расширению имени файла;

    По дате последней модификации;

    По размеру;

    По отрывку текста из документа или по заголовку какого-либо раздела.

    Использование различных вкладок облегчает поиск файлов по определенным критериям.

    Для быстрого вызова часто повторяемых команд можно воспользоваться динамическим меню, которое вызывается правой кнопкой мыши. Динамическое меню (рис. 2.8) содержит часто употребляемые команды. Набор команд зависит от выбранного объекта: значка диска, папки или файла, выделенного текста, панели задач или свободного места экрана.

    Если щелкнуть правой кнопкой значок диска в окне программы Мой компьютер, то появятся команды: Открыть, Проводник, Найти, Разделение, Форматировать, Вставить, Создать ярлык. Свойства. Так же как и для диска, команды динамического меню для файла зависят от типа файла и дублируют меню Файл. Правую кнопку мыши удобно использовать для перемещения или копирования файла из одного окна в другое папки Мой компьютер или Проводник. После транспонирования значка папки/файла с нажатой правой кнопкой мыши появляется динамическое меню, позволяющее указать цель транспортировки: переместить или скопировать объект, создать значок быстрого вызова.

    Папка Мусорная корзина предназначена для удаления ненужных файлов. Основное различие между выполнением команды Удалить в Windows"95 и в других программах состоит в том, что в новой версии операционной системы выбор команды приводит не к удалению файла, а к его перемещению в папку Мусорная корзина. Попавший в нее файл сохраняется до тех пор пока Корзина не будет «очищена». Чтобы удалить любой файл, папку или значок быстрого вызова, можно использовать команду Удалить или переместить значок удаляемого объекта мышью на значок Мусорная корзина. Значок перетаскиваемого объекта исчезнет. Чтобы просмотреть все файлы, находящиеся в Мусорной корзине, необходимо дважды щелкнуть ее значок. Появится окно папки со строкой меню, имеющим стандартный набор команд. Для восстановления файла, папки или значка быстрого вызова необходимо щелкнуть имя восстанавливаемого файла. Если надо восстановить несколько файлов, то имена файлов выделяют при нажатой клавише Ctrl. Затем используют команду Восстановить из меню Файл.

    Рис. 2.8. Динамическое меню

    В настоящее время для IBM PC-совместимых компьютеров выпускаются тысячи наименований винчестеров, адаптеров, контроллеров и других изделий. В ряде случаев их установка на компьютере вызывает значительные трудности с точки зрения совместимости, требует больших затрат времени пользователя для выбора положения перемычек. Компьютеры с Plug and Play -адаптерами не нуждаются в ручной установке DIP-переключателей. В соответствии с технологией Plug and Play после включения компьютера автоматически определяются названия вновь подключенных устройств или плат и их характеристики, выполняется их конфигурирование и автоматически загружаются соответствующие драйверы. Это может происходить и во время сеанса работы в случае изменения аппаратных средств компьютера. Аналогично фиксируется удаление какого-либо устройства или платы, выгружаются драйверы этого устройства с тем, чтобы они не занимали оперативную память и освободили системные ресурсы.

    При инсталляции Windows"95 приложение Setup (Установка) определяет адаптеры и драйверы, которые не поддерживают новую технологию, и автоматически делает соответствующие записи в системных файлах. Даже если ваш компьютер не полностью поддерживает стандарт Plug and Play, Windows"95 поможет настроить аппаратное обеспечение с помощью диалогового окна Свойства с вкладкой Ресурсы рассматриваемого устройства. Для вызова окна Устройства сначала следует активизировать значок Система Панели Управления и двойным щелчком мыши выбрать устройство. В нижнем поле Список конфликтующих устройств указываются устройства, с которыми может конфликтовать рассматриваемое устройство. Рекомендуется установить флажок Использовать автоматическую настройку, чтобы операционная система сама производила настройку системных ресурсов.

    Технология Plug and Play содержит три основных компонента: операционную систему, поддерживающую Plug and Play, Plug and Play BIOS и Plug and Play - устройства с соответствующими драйверами. Поэтому полное решение проблемы Plug and Play требует поддержки как на программном, так и на аппаратном уровнях.

    В ходе работы с Windows"95 иногда приходится производить перезагрузку системы. Различают «холодную» и «горячую» перезагрузку компьютера. «Холодная» перезагрузка выполняется после выключения питания и его повторного включения. Необходимые для работы программы и параметры считываются в оперативную память заново. «Горячая» перезагрузка производится без выключения питания, одновременным нажатием клавиш Alt+Ctri+Del. В этом случае вся информация, хранящаяся в оперативной памяти и не записанная на жесткий диск, стирается. «Горячую» перезагрузку, как правило, используют в том случае, когда программа «зависла» и не реагирует на нажатие на клавиши и на кнопки мыши. В ряде случаев при нажатии на клавиши Alt+Ctri+Del появляется диалоговое окно Снять Задачу. Если окно позволит закрыть «зависшую» программу, то необходимость в перезагрузке компьютера отпадет.

    Перед тем как выключать питание компьютера, необходимо закрыть все открытые документы и приложения. Выключение питания без закрытия документа может привести к потере данных, повреждению открытых файлов и трудностям с их открытием при последующих сеансах работы. После выключения компьютера без правильного выхода из системы возможны нарушения в логической структуре диска. Их исправить можно с помощью программы ScanDisk, расположенной в группе Служебные программы.

    Для корректного выхода из Windows надо щелкнуть кнопку Пуск и команду Завершить работу в появившемся меню. Появится диалоговое окно Завершение Работы. Окно содержит кнопки-переключатели: Выключить компьютер. Перезагрузить компьютер. Перезагрузить компьютер в режиме эмуляции MS DOS , Войти в систему под другим именем. Все кнопки закрывают все программы. В нижней части окна Shut Down Windows расположены три кнопки - Да, Нет, Справка. Через небольшой промежуток времени после щелчка мышью кнопки Да компьютер будет подготовлен к выключению: будут очищены внутренние буферы и кэши дисков, обеспечено сохранение данных. Не следует выключать электропитание до тех пор, пока не появится сообщение: «Теперь питание компьютера можно выключить».

    Мы ограничимся лишь приведенным выше кратким описанием принципов работы Windows. Реальное ее освоение (еще в большей мере, чем DOS и Norton Commander) - дело практических занятий за компьютером с помощью как многочисленных специальных руководств, так и встроенного справочника.

    Контрольные вопросы и задания

    1. Охарактеризуйте место операционных систем среди других видов программного обеспечения.

    2. Каковы функции операционной системы?

    3. Охарактеризуйте основные ступеньки эволюции операционных систем.

    Процесс?

    Виртуализация?

    Прерывание?

    5. Охарактеризуйте функции основных компонент операционных систем.

    6. В чем состоит назначение файловой системы ОС?

    7. Что такое файл? Какие структуры файлов поддерживаются различными ОС?

    8. Что такое каталог (директорий)? Для чего каталоги служат?

    9. Какие операции над файлами обеспечиваются операционными системами?

    10. Охарактеризуйте команды операционной системы MS DOS.

    11. Опишите интерфейс оболочки ОС Norton Commander.

    12. Охарактеризуйте стиль работы с помощью оболочки Windows.

    13. По каким показателям Windows"95 превосходит Windows 3.11?

    14. Опишите типичное окно Windows"95.

    15. Какие функции выполняют меню Пуск? Поиск?

    16. Как вызвать динамическое меню и каковы его возможности?

    § 2. ПОНЯТИЕ О СИСТЕМЕ ПРОГРАММИРОВАНИЯ2.1. ОСНОВНЫЕ ФУНКЦИИ И КОМПОНЕНТЫ

    Системы программирования - это комплекс инструментальных программных средств, предназначенный для работы с программами на одном из языков программирования. Системы программирования предоставляют сервисные возможности программистам для разработки их собственных компьютерных программ.

    В настоящее время разработка любого системного и прикладного программного обеспечения осуществляется с помощью систем программирования, в состав которых входят

    Трансляторы с языков высокого уровня;

    Средства редактирования, компоновки и загрузки программ;

    Макроассемблеры (машинно-ориентированные языки);

    Отладчики машинных программ.

    Системы программирования, как правило, включают всебя

    Текстовый редактор (Edit ), осуществляющий функции записи и редактирования исходного текста программы;

    Загрузчик программ (Load ), позволяющий выбрать из директория нужный текстовый файл программы;

    Запускатель программ (Run ), осуществляющий процесс выполнения программы;

    Компилятор (Compile ), предназначенный для компиляции или интерпретации исходного текста программы в машинный код с диагностикой синтаксических и семантических (логических) ошибок;

    Отладчик (Debug ), выполняющий сервисные функции по отладке и тестированию программы;

    Диспетчер файлов (File ), предоставляющий возможность выполнять операции с файлами:сохранение, поиск, уничтожение и т.п.

    Ядро системы программирования составляет язык. Существующие языки программирования можно разделить на две группы: процедурные и непроцедурные, рис. 2.9.

    Процедурные (или алгоритмические) программы представляют из себя систему предписаний для решения конкретной задачи. Роль компьютера сводится к механическому выполнению этих предписаний.

    Процедурные языки разделяют на языки низкого и высокого уровня.

    Языки низкого уровня (машинно-ориентированные) позволяют создавать программы из машинных кодов, обычно в шестнадцатиричной форме. С ними трудно работать, но созданные с их помощью высококвалифицированным программистом программы занимают меньше места в памяти и работают быстрее. С помощью этих языков удобнее разрабатывать системные программы, драйверы (программы для управления устройствами компьютера), некоторые другие виды программ.

    Рис. 2.9. Общая классификация языков программирования

    Программы на языках высокого уровня близки к естественному (английскому)

    языку и представляют набор заданных команд.

    Перечислим наиболее известные системы программирования.

    1. Фортран (FORmula TRANslating system - система трансляции формул); старейший и по сей день активно используемый в решении задач математической ориентацииязык.

    2. Бейсик (Beginner"s All-purpose Symbolic Instruction Code - универсальный символический код инструкций для начинающих); несмотря на многие недостатки и изобилиеплохо совместимых версий - самый популярный по числу пользователей.

    3. Алгол (ALGOrithmic Language - алгоритмический язык); сыграл большую роль в теории, но для практического программирования сейчас почти не используется.

    4. ПЛ/1 (PL/I Programming Language - язык программирования первый). Многоцелевой язык; сейчас почти не используется.

    5. Си (С - «си»); широко используется при создании системного программного обеспечения.

    6. Паскаль (Pascal - назван в честь ученого Блеза Паскаля); чрезвычайно популярен как при изучении программирования, так и среди профессионалов. На его базе созданы несколько более мощных языков (Модула, Ада, Дельфи).

    7. Кобол (COmmon Business Oriented Language - язык, ориентированный на общийбизнес); в значительной мере вышел из употребления.

    8. Дельфи (Delphi) - язык объектно-ориентированного «визуального» программирования; в данный момент чрезвычайно популярен.

    9. Джава (Java) - платформенно-независимый язык объектно-ориентированного программирования, чрезвычайно эффективен для создания интерактивных веб-страниц.

    Среди непроцедурных языков наиболее известны

    1. Лисп (Lisp);

    2. Пролог (PROgramming in LOGic);

    3. Оккам (назван в честь философа У. Оккама).

    Широкое распространение среди разработчиков программ, а также при обучении программированию, получили системы программирования «Турбо» (Turbo) фирмы Borland, ядром которых являются трансляторы с языков программирования Бейсик, Паскаль, Си, Пролог и др. Интерфейс Турбо-оболочки для любых систем программирования внешне совершенно одинаков и предоставляет пользователю стандартный набор функций и команд, описанных выше и отображаемых в главном меню системы.

    Рассмотрим технологию разработки программ с использованием популярной системы программирования Турбо-Паскаль 7 (оставив знакомство с самим языком до следующей главы).

    В подобных интегрированных системах программирования сделана попытка предоставить разработчику программ максимум сервисных возможностей. Помимо основных функций система Турбо-Паскаль 7 позволяет настроить компилятор на работу в трех режимах: обычном режиме MS DOS (Real), защищенном режиме (Protected) и в режиме операционной среды Windows (Windows).

    После загрузки системы (файл TURBO. EXE), на экране монитора появляется интерфейсное окно, рис. 2.10.

    Рис. 2.10. Вид экрана интегрированной среды Турбо-Паскаля версии 7 (монтаж)

    Главное меню системы (верхняя строка экрана) содержит команды, которые позволяют осуществлять следующие виды работ:

    File - работа с файлами (сохранение, загрузка, связь с операционной
    системой);

    Edit - работа с текстовым редактором (после загрузки системы по умолчанию
    текстовый редактор находится в активном состоянии);

    Search - поиск и замена фрагментов текста;

    Run -запуск программы на выполнение;

    Compile - компиляция программы и установка параметров компиляции;

    Debug - установка параметров отладки программы;

    Tools - инструментальные программные средства (ненавязчивый сервис);

    Options -установка опций интегрированной среды;

    Window - работа с окнами;

    Help -система помощи и подсказок.

    Для начала работы с системой программирования необходимо иметь проект текста программы, который можно набирать на рабочем поле окна системы. Встроенный текстовый редактор прост и максимально приспособлен для набора текстов программ на языке Паскаль. В нем предусмотрена специальная подсветка управляющих структур, команд. Удобна система контекстной помощи (Shift+Fl), которая вызовет подсказку по набираемому текущему тексту программы в любой момент и в любом месте. Впрочем, текст программы можно приготовить в любом текстовом редакторе, хранящем тексты в ASCII-кодах (например, в Лексиконе); необходимо лишь снабдить имя файла расширением.pas.

    Если текст (тексты) программы был ранее сохранен на жестком диске или дискете, то он может быть загружен в поле редактирования с помощью пункта меню File .

    После окончания формирования текста необходимо откомпилировать программу (пункт меню Compile). Если в программе есть ошибки, то компилятор их укажет. После исправления ошибок можно снова повторить компиляцию.

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

    Но на этом этапе чаще всего работа не заканчивается. Сложные алгоритмы требуют тестирования и отладки. Многие программы составляются из отдельных модулей, требуют связи с другими программами и системами и т.д. Для решения всех этих проблем предназначены другие команды системы (Debug , Options и пр.).

    Разумеется, программисту, работающему на Паскале, нет нужды самому программировать такие непростые, но часто встречающиеся операции, как вычисление значений математических функций, построение изображений простых геометрических объектов (отрезков прямых, окружностей и т.д.), очистка экрана и множество других. Высокоэффективные, тщательно отлаженные программы таких действий сведены в стандартные модули и надо лишь уметь к ним обратиться. В состав пакета библиотек стандартных модулей входят:Crt - работы с экраном, Graph -работы с графикой и другие, такие как Overlay , String , System , Turbo 3 ,WinAPI , WinCrt , WinDos , WinPrn , WinTypes , WinProcs .

    2.2. ТРАНСЛЯЦИЯ ПРОГРАММ И СОПУТСТВУЮЩИЕ ПРОЦЕССЫ

    С появления первых компьютеров программисты серьезно задумывались над проблемой кодирования компьютерных программ. Уже с конца 40-х годов стали появляться первые примитивные языки программирования высокого уровня. В них программист записывал решаемую задачу в виде математических формул, а затем, используя специальную таблицу, переводил символ за символом, преобразовывал эти формулы в двухлитерные коды. В дальнейшем специальная программа (впоследствии названная интерпретатором) превращала эти коды в двоичный машинный код. Первый компилятор был разработан Г. Хоппер в начале 50-х годов; он осуществлял функцию объединения команд и в ходе трансляции производил организацию подпрограмм, выделение памяти компьютера, преобразование команд высокого уровня (в то время псевдокодов) в машинные команды. В дальнейшем компиляторы и интерпретаторы для языков Ассемблера стали развиваться и прочно вошли в практику компьютерного дела.

    Идеи трансляции (перекодирования) одних символов в другие легли в основу создания различных языков программирования с соответствующими трансляторами - компиляторами и/или интерпретаторами. Отличие компиляторов от интерпретаторов заключается в процедуре трансляции текста в машинный код. Компилятор преобразует весь текст программы в последовательный набор машинных команд, который в дальнейшем отправляется на выполнение (пример компилятора с языка Паскаль). Интерпретатор же осуществляет трансляцию по принципу синхронного перевода. Каждая отдельная строка программного текста транслируется, а затем, после ее интерпретации, команды этой строки выполняются (пример языка Бейсик). Современные трансляторы с языков программирования высокого уровня, систем управления базами данных интегрируют в себе возможности и достоинства компиляторов и интерпретаторов, а в системы программирования добавляют различные сервисные утилиты по трансляции и отладке создаваемых программ.

    Важнейшим элементом в развитии систем программирования выступили подпрограммы. Появление аппарата подпрограмм существенно облегчило процесс разработки системных и прикладных программ. Подпрограммы позволили формировать библиотеки из наиболее часто употребляемых в программах алгоритмов -процедур и функций. В системах программирования обязательно присутствуют стандартные (встроенные в систему) библиотеки подпрограмм. Например, в их число входят подпрограммы вычисления математических функций sin(х), cos(x), abs(х) и др.

    В настоящее время распространены пользовательские и прикладные библиотеки подпрограмм. Их число увеличивается. Меняется структура библиотечных подпрограмм. В современных языках получили распространение модули (Unit ), представляющие специализированные пакеты взаимосвязанных подпрограмм определенного предназначения, например по работе с клавиатурой, с графикой и пр. Развитие объектно-ориентированного программирования позволило создавать библиотеки объектов и подпрограмм с объектными типами данных (Object ). Примером могут служить оболочки типа TurboVision .

    Современная программа представляет набор команд, операторов и выражений, в которых имеются ссылки (прямые или косвенные) на различные подпрограммы из существующих в системе программирования библиотек, модулей, объектов. В этой связи исходный текст программы, как правило, занимает по объему места в памяти в несколько раз меньше, чем его оттранслированный вариант в машинных кодах. Как это происходит?

    Рассмотрим один из вариантов трансляции программы с языка программирования Паскаль. Исходный текст программы решения квадратного уравнения представленниже:

    program KvadUravn;

    var А, В, С, D, XI, Х2: REAL;

    writeln("введи А,В,С") ; read(A,B,C);

    if D