Cascading Style Sheets: возможности

 

  1. Повторить материал

  2. Создать папку ФамилияCSS2

  3. Распаковать в папке ФамилияCSS2 архив с простой анимаций, выполненной средствами языка CSS

  4. Познакомиться с файловым содержимым каталога "CSS3 animation" и вложенных папок.

  5. Переименовать файл index в ФамилияИО

  6. Открыть в браузере файл ФамилияИО.htm и познакомиться с интерактивной анимацией (реагирует на указатель мыши)

  7. Познакомиться обеспечивающими анимацию и автоматически обрабатываемыми кодами HTML-странички (ФамилияИО.htm) и CSS-файла (kmp-style.css).

  8. Переименовать графические файлы kmp и mpk на акронимы латиницей Ваших Фамилии Имени Отчества  и, соответственно, Ваших Имени Отчества Фамилии.

  9. Переименовать kmp-style.css, заменив kmp  на акроним латиницей Ваших Фамилии Имени Отчества

  10.  Отредактировать код страницы index:

  • заменить в контейнере <title></title> Фамилия Имя Отчество на свои собственные

  • адаптировать код к новым именам графических файлов

  • новому имени css-файла

  • заменив в диалоге анимашек Фамилия Имя Отчество на свои собственные

  1.  Отредактировать css-файл, адаптировав его код к новым именам графических файлов

  2. Проверить отредактированную вами анимацию и убедиться, что она есть и работает (!)

  3. Сохранить в каталоге ФамилияCSS2 страничку с HTML5-анимацией под именем CSS-ФИО.

  4. Заменить в контейнере <title></title> CSS-ФИО kmp на Фамилия Имя Отчество (свои собственные!).

  5. Отредактировать код CSS-ФИО таким образом, чтобы в браузере GoogleChrome (а лучше и других) отображался уникальный (невероятный, фантастический) цвет  объектов анимации (солнца, луны, неба, тучи...).
    Руководство по редактированию анимации здесь.
    Проверить результат своей работы (по крайней мере в     GChrome...)

  6. Сохранить отредактированную страничку CSS-ФИО в папке ФамилияCSS2

  7. Распаковать в папке ФамилияCSS2 архив с игрой (интерактивной компьютерной программой) "Duck hunter", выполненной исключительно средствами языка CSS (можно стрелять в летающих уток и за это начисляются очки).  
    Чтобы играть должен быть актуальный правильный браузер.

  8. Познакомиться с файловым содержимым каталога "CssGame" и вложенных папок.

  9. Посмотреть демо использования использовать CSS 3D transforms для моделирования 3D пространства.

  1. Посетить сайт  (на сайте немало материалов по CSS и ссылок на онлайновые инструменты), а на нем страничку: http://ruseller.com/lessons.php?rub=2&id=1289

  2. Посмотреть ДЕМО примеров анимированных меню на CSS3, скачать ИСХОДНИКИ

  3. Распаковать архив demo_1289 в каталог ФамилияМеню папки ФамилияCSS2
    Выбрать один пример меню (соответстующий Вашему номеру в зачетной таблице,  если он больше 10, идете на второй круг). Удалить файлы для прочих примеров из     ФамилияМеню и вложенных папок (включая файлы стилей).

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

  • Ваша Фамилия

  • одна из Ваших замечательных черт (телесных, душевных, духовных...)

  1. Проверить работоспособность меню с измененным текстом (!)...

  2. Отредактировать страничку с меню, заменив на ней:

  • Креативное анимированное меню CSS3 на Анимированное меню Фамилия

  • Эксперименты с трансформациями и анимациями CSS3 на Эксперименты Фамилия Имя Отчество

  1. Проверить результат (!)

  2. Отослать преподавателю письмо:

  • с отзывом,  

  • указанием времени, затраченного на выполнение работы,

  • архивом каталога  ФамилияCSS2, в котором должны быть:

    • CSS-ФИО

    • каталог CSS3 animation (с файлами)

    • каталог ФамилияМеню (с файлами)

     

 kmp