Учебный курс «Web-дизайн + адаптивная верстка Bootstrap + web-программирование»

Содержание образовательной (учебной) программы

 «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.

-         Настройка служб сайта на хостинге.

-         Проверка работы сайта.

-         Регистрация в поисковых системах и каталогах.

-         Установка счетчиков посещений.

 

Зачет.