Содержание образовательной (учебной) программы
«Web - дизайн»
Занятие 1. Основы сайт строения. Методы и технологии создания современных сайтов. Основы HTML. Этапы создания сайта целиком и стартовой (главной страницы). Использование программ Adobe Dreamweaver и Adobe Photoshop при создании сайта.
Перечень основных вопросов, подлежащих изучению:
- общие сведения о технологии создания сайтов;
- язык разметки HTML как основа создания любого сайта;
- теговая модель языка HTML;
- основные теги языка HTML;
- базовые теги для создания пустой web-страницы;
- определение будущего проекта web-сайта в программе Adobe Dreamweaver и знакомство с интерфейсом программы;
- настройка программе Adobe Dreamweaver под текущий проект;
- создание первой web-страницы в программе Adobe Dreamweaver и сохранение ее в проекте;
- создание описательных meta-тегов страницы, описание и назначение данных тегов;
- понятие DOCTYPE;
- структура HTML – основные теги html, head, title, body, синтаксис языка;
- основные теги для создания теста на web-странице h1-h1(теги заголовков);
- р (абзац), создание страницы с текстовым содержанием.
Занятие 2. Основы поэтапного создания web-страницы. Правила форматирования текста с использованием текстовых тегов. Оформление текста с использованием атрибутов тегов. Введение в CSS (каскадные стилевые инструкции).
Перечень основных вопросов, подлежащих изучению:
- использование тегов h1-h6 для создания заголовков текстового содержания;
- использование тегов p для создания абзацев текста;
- основные принципы создания текстового содержимого с учетом требований поисковых систем и удобства для посетителей сайта, понятие необходимого количества текста;
- оформление текста с помощью атрибутов тегов и тега font, понятие выравнивания текста, цвета текста и гарнитуры шрифтов;
- определение технологии CSS как основного инструмента при стилизации и разметки страницы, принцип работы и взаимодействия CSS и HTML документов;
- создание первого CSS документа и соединение его c HTML страницей, понятие селектора тега, создание селекторов тегов для стилевого оформления текстового содержимого web-страницы;
- основные стили, свойственные текстовому содержимому (выравнивание-text-align, цвет-color, гарнитура шрифта-font-family, внешние и внутренние отступы-margin и padding, границы текстовой области-border и фон-background);
- принципы создания web-страницы с текстовым содержанием;
- теги ul, ol, li – для оформления маркированного и нумерованного списка
- теги специальных возможностей br, pre, strong, em, hr;
- тег span, его назначение и возможности в стилевом оформлении текста.
Занятие 3. Вставка изображений в web-страницу. Типы графических файлов подлежащих вставке в web-страницу. Оптимизация изображений для web-страницы с использованием программы Adobe Photoshop.
Перечень основных вопросов, подлежащих изучению:
- типы графических файлов подлежащих вставке на web-страницу (jpg, png, gif) понятие размера и разрешения фотографии;
- основные принципы оптимизации изображения для web в программе Adobe Photoshop, обрезка изображения, установка необходимого разрешения и установка размера в зависимости от ширины web-страницы;
- сохранение изображения с использованием специальной функции программы Adobe Photoshop – сохранить для web и устройств непосредственно в папке проекта;
- вставка изображения на страницу с использованием тега вставки изображений img, атрибуты специальных возможностей данного тега: ширина(width), высота(height), альтернативный текст(alt), описание изображения(title);
- стили CSS для корректного отображения и позиционирования изображения на web-странице: обтекание(float), отступы(margin), границы(border), округления (border-radius);
- использование изображения в качестве фона web-страницы;
- создание страницы с текстовым содержанием и вставкой изображений с обтеканием текста справа и слева.
Занятие 4. Верстка страницы. Создание каркаса страницы с использованием тега DIV
Перечень основных вопросов, подлежащих изучению:
- виды верстки страницы – блочная, табличная, гибридная, преимущества и недостатки каждой из версток;
- создание каркаса страницы с использованием тега div;
- тег div как контейнер для удобного и эффективного позиционирования с присвоением имени каждому контейнеру div через идентификатор id;
- техника применения селектора идентификатора для тега div для удобного и адаптивного позиционирования элементов web-страницы;
- основные свойства, сообщаемые через селекторы идентификаторов для тегов div непосредственно тегам div с соответствующими идентификаторами:
- ширина (width), высота (height), выравнивание (margin), фон (background), границы (border), обтекания (float), абсолютное (absolut) и относительное (relativ) позиционирование (position), понятие слойности (z-index);
- понятие очистки обтекания(clear) при блочной верстке.
Занятие 5. Практическое занятие № 1.
Содержание занятия:
- создание схемы (эскиза) каркаса web-страницы;
- реализация данного эскиза в web-страницу.
1) Создание HTML страницы, CSS документ и соединение его с HTML документом, с использованием технологичных возможностей программы Adobe Dreamweaver.
2) Определение основных контейнеров DIV для элементов web-страницы:
шапки сайта, навигационного меню, левой колонки сайта, контентной части сайта и подвала (футера) сайта.
3) Определение в стилевом документе основных позиционных и стилевых свойств web-страницы (ширина (width), высота (height), выравнивание (margin), фон (background), границы (border), обтекание (float), абсолютное (absolut) и относительное (relativ) позиционирование (position), понятие слойности (z-index), понятие очистки обтекания (clear) при блочной верстке).
4) Проверка свойств и качества готового каркаса web-страницы по адаптивным характеристикам к электронным устройствам и мониторам.
5) Создание графического элемента – шапки сайта, с использованием программы Adobe Photoshop. Вставка шапки сайта в каркас подготовленной web-страницы.
Занятие 6. Гиперссылки. Создание навигационного меню.
Перечень основных вопросов, подлежащих изучению:
- понятие гиперссылки, абсолютная и относительная гиперссылка;
- тег ссылки a, атрибуты ссылки: href, title, target;
- создание ссылки на web-странице, создание ссылки навигационного меню, создание всех ссылок навигационного меню с использованием технологичных возможностей программы Adobe Dreamweaver;
- оформление ссылок горизонтального навигационного меню с помощью каскадных стилевых инструкций CSS;
- оформление ссылок вертикального навигационного меню с помощью каскадных стилевых инструкций CSS;
- создание дублирующего меню для подвала (футера) сайта;
- изображение как ссылка, создание интерактивных графических элементов (кнопок) на web-станице;
- карты-изображения позволяющие привязывать ссылки к разным областям одного изображения;
- ссылка на адрес электронной почты;
- ссылка на якорь;
- создание страниц сайта, согласно подготовленному навигационному меню.
Занятие 7. Виды контента страниц сайта (статический сайт, в виде вывода табличных данных, интерактивные формы).
Перечень основных вопросов, подлежащих изучению:
- создание контента для статичных (основных страниц), создание текста с встроенными изображениями для соответствующих страниц сайта;
- теги для создания таблиц table, tr, td;
- создание таблицы для вывода табличных данных на web-странице;
- оформление таблицы с помощью соответствующих атрибутов тегов и с помощью каскадных стилевых инструкций CSS;
- атрибуты colspan и rowspan для объединения строк и рядов таблицы;
- варианты стилевого оформления страниц;
- использование таблиц для создания каркаса web-страницы (табличная верстка);
- оформление страницы «Контакты» с использованием форм и полей для создания формы обратной связи, теги form, input, textarea, select и атрибуты action, method, name, type;
- принцип работы формы обратной связи и полей;
- создание простой и защищенной формы обратной связи с использованием технологии spry средствами программы Adobe Dreamweaver.
Занятие 8. Практическое занятие № 2.
Содержание занятия:
- окончательное оформление многостраничного сайта и подготовка его к публикации в сети интернет;
- публикация сайта в сети интернет.
1) визуальный и синтаксический анализ сайта, проверка всех страниц и функционирования навигационных меню сайта, соответствие каждой из страниц сайта наименованию пункта меню и тематике содержания;
2) выбор хостинга (свободное доменное имя, регистрация на хостинге, выбор тарифного плана);
3) настройка хостинга – проверка серверных служб, создание связки домен-каталог сайта;
4) просмотр протоколов связи с сервером–http (HyperText Transfer Protocol-«протокол передачи гипертекста») и ftp(File Transfer Protocol-протокол передачи файлов);
5) создание соединения по ftp протоколу с сервером;
6) копирование файлов сайта на сервер;
7) проверка работоспособности сайта в режиме реального размещения на сервере;
8) регистрация сайта в поисковой системе Яндекс, первичные настройки индексирования;
В результате выполнения данного практического занятия, получается сайт, опубликованный в сети интернет, который зарегистрирован в поисковых системах и отвечает всем современным требованиям современного сайтостроения.
Обучение адаптивной верстки Bootstrap
Занятие 1
- Что такое фреймворк Bootstrap.
- Установка Bootstrap.
- Состав фреймворка Bootstrap.
- Создание первого учебного проекта на фреймворке Bootstrap.
- Что такое сетка Bootstrap. Базовые классы CSS фреймворка Bootstrap для создания много колончатой верстки страниц.
- Создание адаптивной страницы с использованием базовых классов Bootstrap
Занятие 2
- Оформление содержимого страниц созданных с использованием фреймворка Bootstrap.
- Компоненты Bootstrap.
- Текст, таблицы, списки, кнопки, табы, навигационные меню, формы.
- Практика использования компонентов на странице.
- Создание простого шаблона сайта с использованием фреймворка Bootstrap.
Занятие 3
- Практика верстки шаблона сайта блога, интернет магазина с использованием фреймворка Bootstrap.
- Выбор и анализ шаблона.
- Верска верхней части сайта (HEADER) – шапка сайта, слайдер, меню.
Занятие 4
- Создание контентной части шаблона сайта.
- Разметка левой колонки (сайдбара) и основной контентной части.
- Разметка и верстка контентного содержимого – заметок блога или карточек товара.
Занятие 5
- Создание футера.
- Верстка и оформление формы подписки, слайдера, нижнего дублирующего меню.
Занятие 6
- Верстка Лендинг-Пейдж.
- Выбор и анализ макета шаблона.
- Определяем общее количество и назначение блоков страницы.
- Создание, разметка и оформление Header.
Занятие 7
- Определение, верстка и оформление остальных блоков Лендинг Пейдж.
- Модальные окна в Bootstrap.
- Форма обратной связи.
- Функционал реализуемый с помощью Bootstrap.
Занятие 8
- Окончательное оформление Лэндинг Пейдж.
- Верстка и оформление футера и его содержимого.
- Установка карты.
- Возможности применения анимации на странице.
Содержание учебной (образовательной) программы
«Программирование wеб-сайтов»
Занятие 1. Понятие программированного языка PHP. Изучение модели и принципа работы динамического сайта. Компоненты и разделы динамического сайта. Понятия: сервер и сервер баз данных. Способы взаимодействия сервера, баз данных, сайта. Установка локального сервера, проверка его работоспособности. Создание проекта сайта на сервере и определение его в Adobe Dreamweaver. Создание первого PHP файла и рассматриваем его структуру. Понятие переменной. Виды переменных. Создание переменных. Значение переменной. Вывод назначения переменной с помощью инструкции echo.
Перечень основных вопросов, подлежащих изучению.
- Введение в PHP и MySQL.
- Как устроен и работает динамичный сайт.
- Роль сервера в работе динамического сайта. Роль базы данных в работе сайта.
- Устанавливаем сервер Denser на локальный компьютер.
- Понятие переменной.
- Виды данных содержащихся в переменной.
- Отображение переменной.
- Операторы вывода.
- Синтаксис языка.
- Арифметические действия с переменными.
- Конкатенация.
- Основные циклические конструкции языка.
- Условия и иные конструкции.
Занятие 2. Работа с переменными. Арифметические действия. Конкатенация (соединение). Способы вывода значений переменных на экран. Конструкция if(else). Циклическая конструкция do(while). Цикл for each. Конструкция switch (case). Использование конструкции для работы с информацией находящейся в переменных. Методы GET и POST для передачи данных через адресную строку или напрямую в файл.
Перечень основных вопросов, подлежащих изучению.
- Введение функции. Их создание и использование.
- Функции, встроенные в язык PHP.
- Рассматриваются и изучаются все необходимые для создания сайта встроенные функции: Count, exit, list, date, isset, unset и т.д.
- Понятие массива.
- Ассоциативный массив.
- Многомерный массив.
- Методы GET и POST.
Занятие 3. Массивы. Простой и ассоциативный массив. Многомерный массив. Создание массива и работа с ним. Вывод данных из массива. Функции, введение в функции и их применение. Создание встраиваемых в PHP функций.
Форма проведения занятия – лекция
Количество учебного времени – 4 академических часа
Перечень основных вопросов, подлежащих изучению:
- Основы работы с базами данных.
- Создание первой базы данных и таблиц в ней.
- Выборка данных.
- Вывод данных на страницу.
- Вывод данных из базы в цикле.
- Оператор выборки SELECT.
- Оператор вставки INSERT.
- Оператор обновления UPDATE.
- Оператор удаления DELETE.
Занятие 4. Основы работы с базами данных. Функции и принципы работы. База данных, как основополагающая часть динамического сайта. Создание базы данных, вывод данных на страницу сайта, используя язык структурированных запросов к базе данных MySQL.
Перечень основных вопросов, подлежащих изучению:
- Создание дизайн-макета динамического сайта, верстка главной и динамической страницы.
- Определение динамичных и статичных страниц.
- Создание базы данных, таблицы ввода данных на статичные страницы.
- Способ соединения страницы сайта с базой данных. Тест на работоспособность (вывод содержимого базы данных на web-страницу).
Занятие 5. Макет сайта. Создание динамики на страницах сайта. Определение страниц, включающих в себя постоянное и динамичное содержание. Создание главной страницы сайта, используя инструкции PHP и «разрезая» страницу на блоки. Создание базы данных для сайта. Создание таблицы в базе данных, имеющую основные настройки. Взаимодействие базы данных с сайтом. Вывод содержания главной страницы. Создание остальные страниц.
Перечень основных вопросов, подлежащих изучению:
- Определение страницы с динамичным содержимым.
- Разработка структуры таблиц базы данных для динамичного содержания сайта.
- Создание таблицы в базе данных для динамичных web-страниц.
- Соединение динамичных страниц с таблицами базы данных и проверки вывода данных в цикле.
- Заполнение базы данных.
Занятие 6. Создание страницы контактов и форму обратной связи. Программирование отправки сообщений (писем) со станицы контактов посетителем сайта. Разработка структуры динамических страниц и создание для них таблицы в базе данных. Заполнение таблицы и вывод на динамические страницы. Создание динамических страниц.
Форма проведения занятия – лекция
Количество учебного времени – 4 академических часа
Перечень основных вопросов, подлежащих изучению:
- Создание административной части сайта.
- Редактирование содержимого динамичных страниц через интерфейс административной части сайта.
- Создание структуры административной части сайта для управления динамичными страницами.
- Установка визуального редактора.
Занятие 7. Создание административной части сайта. Методы управления содержимым сайта (административная панель). Установка в административной части сайта механизм входа по логину и паролю.
Форма проведения занятия – лекция
Количество учебного времени – 4 академических часа
Перечень основных вопросов, подлежащих изучению:
- Методы добавления, редактирования, и удаления материалов динамичных страниц через интерфейс административной части сайта.
- Установка защиты на административную часть, при помощи логина и пароля.
- Тестирование и настройка всех служб динамического сайта.
Занятие 8. Перенос готового динамичного сайта на сервер. Особенности переноса, импорта и экспорта баз данных с локального сервера на реальный. Пользовательская часть и административная. Настройка проекта на реальном сервере. Регистрация в поисковых системах. Установка счетчиков посещения. Способы размещения аудио и видео.
Форма проведения занятия – лекция
Количество учебного времени – 4 академических часа
Перечень основных вопросов, подлежащих изучению:
- Размещение динамичного сайта на реальном сервере.
- Экспорт-импорт базы данных через интерфейс сервера mysql на реальный хостинг.
- Перемещение файлов и папок сайта из локального сервера на реальный по протоколу ftp.
- Настройка служб сайта на хостинге.
- Проверка работы сайта.
- Регистрация в поисковых системах и каталогах.
- Установка счетчиков посещений.
Зачет.
