Общая информация
АИШ 10 лет О программе Схема обучения Программа обучения Стоимость обучения Преподаватели Новости и успехи Дни открытых дверей Работы слушателей О филиале АИШ Летняя школа
Обучающимся
Расписание занятий Списки групп и оценки Поиск школьника
Внеучебная жизнь
Олимпиады Политех-квест КРОСС И3 Курс для родителей Small Basic - клуб Битва роботов
Обратная связь
Форум Как нас найти Контакты

Дни открытых дверей Академии информатики для школьников —

Печать

Семестр 1. Основы создания веб-сайтов

( Основы создания веб-сайтов )

Продолжительность обучения: 15 ак.ч. лекции очно + 33 ак.ч. практики очно + 24 ак.ч. самостоятельно
График обучения: 72 академических часа

Преподаватели

Аннотация

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

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

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

Языки HTML (HyperText Markup Language, язык разметки гипертекста) и CSS (Cascading Style Sheets, каскадные таблицы стилей) – это та база, тот фундамент, с которого начинается веб-разработка.

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

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

Программное обеспечение курса

  • Операционная система MS Windows 7 (русская версия)
  • Microsoft Expression Web 4 (англ. версия)
  • Microsoft Expression Design 4 (англ. версия)

Знания и умения, полученные в результате обучения

  • Знание HTML, в объеме достаточном для создания веб-сайтов
  • Знание CSS, в объеме достаточном для создания веб-сайтов
  • Умение верстать страницы сайтов и собирать сайт целиком
  • Кроссбраузерная верстка
  • Верстка слоями
  • Основы работы в программе Microsoft Expression Web 4
  • Основы работы в программе Microsoft Expression Design 4
  • Подготовка графики для веб
  • Основы валидации веб-страниц

Требования к начальному уровню знаний

Вступительные испытания

  • Вступительное тестирование по ОС Windows (Вступительный тест №ВКТ-502.01)
  • Возрастное ограничение: с сер. 7 - 8 класса школы

Для успешной сдачи теста №ВКТ-502.01 необходимо обладать следующими знаниями:

  1. Раскладка клавиатуры. Переключение языка.
  2. Работа с мышью в MS Windows: указатели и типы операций.
  3. Интерфейс MS Windows. Основные элементы.
  4. Элементы окон в MS Windows. Режимы отображения окна, операции с окнами. Виды окон.
  5. Запуск, завершение приложений, переключение между ними.
  6. Элементы диалоговых окон, заполнение полей в диалоговых окнах.
  7. Операции с пиктограммами. Виды пиктограмм.
  8. Типы меню и команд. Способы выполнения команд.
  9. Главное меню. Разделы Главного меню.
  10. Завершение работы с MS Windows. Перезагрузка системы.
  11. Стандартные приложения MS Windows: графический редактор Paint, текстовый редактор WordPad, Калькулятор. Стандартные кнопки в приложениях.
  12. Открытие и сохранение документов
  13. Буфер Обмена. Копирование и перемещение данных через Буфер Обмена.
  14. Ярлыки: определение, виды, способы создания, операции.
  15. Приложение "Компьютер": переход на нужный диск и в нужную папку; режимы просмотра; создание и переименование папок; выделение, копирование, перемещение и удаление объектов; отмена последнего действия; изменение свойств и установка параметров.
  16. Поиск файлов и папок.
  17. Панель задач: назначение
  18. Рабочий стол: назначение. Упорядочение окон и пиктограмм.

По результатам впрохождения компьютерного теста необходимо набрать 45 или более процентов правильных ответов.

Программа курса

Практика 1

Работа в Microsoft Expression Web 4

Введение в HTML

  • Инструментарий
  • Теги
  • Структура HTML-кода
  • Типы тегов
  • Значения атрибутов тегов

Разметка страницы

  • Текст
  • Ссылки
  • Якоря
  • Изображения
  • Списки
  • Таблицы

Практика 2

Введение в CSS

  • Преимущества стилей
  • Способы добавления стилей на страницу
  • Типы носителей
  • Базовый синтаксис CSS
  • Значения стилевых свойств

Типы селекторов

  • Селекторы тегов
  • Классы
  • Идентификаторы
  • Контекстные селекторы
  • Соседние селекторы
  • Дочерние селекторы
  • Селекторы атрибутов
  • Универсальный селектор
  • Псевдоклассы
  • Псевдоэлементы

Особенности CSS

  • Группирование
  • Наследование
  • Каскадирование

Практика 3

Стилевые описания

  • Общие свойства элементов
  • Свойства блочных элементов
  • Свойства строчных элементов
  • Свойства списков
  • Свойства таблиц

Практическая работа

  • Стилевое оформление текста

Практика 4

Основы блочной верстки

  • Блочная модель
  • Схлопывающиеся отступы
  • Поток документа
  • Блочные элементы
  • Строчные элементы
  • Строчно-блочные элементы
  • Использование свойств позиционирования в разметке содержимого

Практическая работа

  • Стилевое оформление сложной таблицы

Практика 5

Использование блочной верстки

  • Наложение и порядок слоёв
  • Плавающие элементы
  • Позиционирование элементов

Практическая работа

  • Создание страницы в 2 колонки

Практика 6

Вёрстка типичных элементов содержимого

  • Создание фотогалереи с использованием плавающих элементов
  • Создание фотогалереи с применением свойства inline-block
  • Создание вертикального меню
  • Создание горизонтального меню

Практическая работа

  • Создание страницы в 2 колонки

Практика 7

Типовые макеты страниц сайтов

  • Фиксированные
  • Резиновые
  • Эластичные
  • Адаптивные
  • Комбинированные

Практическая работа

  • Создание страницы в 3 колонки

Практика 8

Создание сайта

  • Обнуление начальных стилевых описаний
  • Импортирование стилевых описаний
  • Вёрстка каркаса страницы
  • Создание шаблона страницы

Практическая работа

  • Создание страницы в 3 колонки

Практика 9

Работа в программе Microsoft Expression Design 4

  • Интерфейс программы
  • Основные инструменты
  • Уменьшение размеров изображения
  • Выкадровка
  • Оптимизация изображения
  • Нарезка макета сайта

Практическая работа

  • Нарезка и верстка страницы сайта

Практика 10

Работа с формами

Заключительные шаги

  • Создание версии CSS для печати
  • Проверка сайта перед публикацией
  • Валидация документов

Практическая работа

  • Нарезка и верстка страницы сайта

Практика 11-12

Экзамен