Студентам

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

Общение группы ноябрь 2018: https://vk.com/topic-62632143_39783770


Курс: Разработка и продвижение сайтов в Интернете

Занятие №1

Введение. Что такое сайт? Что нужно для работы сайта? Домен. Хостинг. Способы разработки сайтов. CMS – движок сайта. WordPress. Установка WordPress. Плагины и темы. Знакомство с панелью управления. Редактирование контента на сайте. Типовой сайт компании с демо-контентом.

Домашнее задание #1
  • Зарегистрировать хостинг-аккаунт на sweb.ru (тариф “Взлёт”)
  • Узнать адрес Вашего сайта (технический домен) и удалить все содержимое корневой папки этого сайта
  • Загрузить и распаковать архив дистрибутива WordPress в корневую папку сайта
  • Установить и настроить WordPress
  • Удалить плагин Hello Dolly
  • Удалить весь контент: Записи и Страницы (очистить Корзину)
  • Установить бесплатную тему: Corporate Key
  • Установить и активировать все требуемые темой плагины
  • Импортировать демо-контент
  • Изменить адрес входа в админку сайта (см. Как защитить вход в админку WordPress? Примитивные меры и WPS Hide Login)
  • Прислать ссылку на получившийся сайт в тему обсуждения Вашей группы сообщества: https://vk.com/tushov_ru (сайт должен выглядеть вот так: https://demo.axlethemes.com/corporate-key/)
Полезные ссылки
  • ru.wordpress.org – официальный сайт WordPress
  • nic.ru/whois/ – сервис WHOIS для получении информации о домене

 

Занятие №2

Локальный веб-сервер. Плагин Интернет-магазина WooCommerce. Особенности поиска и выбора бесплатных WordPress-плагинов из каталога. Платные темы WordPress. Перенос сайта с локального веб-сервера на хостинг. Как работают поисковые системы? Поисковая оптимизация WordPress-сайтов. Плагин All in One SEO Pack.

Домашнее задание #2
  • Установите и запустите на компьютере программу XAMPP
  • Установите WordPress на Ваш локальный веб-сервер XAMPP (чтобы ваш сайт работал по адресу: http://localhost)
  • Установите и активируйте тему Best Commerce
  • Установите и активируйте все требуемые темой плагины
  • Произведите все необходимые настройки WooCommerce
  • Переведите на русский язык пункты главного меню сайта
  • Используя хостинг-обзоры и хостинг-рейтинги найдите какой-нибудь виртуальный хостинг с тестовым периодом и зарегистрируйте там новый аккаунт (внимание! это не должен быть TimeWeb или SpaceWeb!)
  • Перенесите свой локальный сайт с веб-сервера XAMPP на хостинг
  • Попробуйте найти, установить и настроить плагин, позволяющий посетителям в отзывах к продуктам (товарам) на сайте – прикреплять изображения (фотографии).
Полезные ссылки

 

Занятие №3

Знакомство с HTML. Создание первой страницы на HTML. Базовая структура любой веб-страницы. HTML-теги. Парные и одиночные HTML-теги. Версии HTML и DOCTYPE. Кодировка страницы. Правила написания тегов. Комментарии в HTML. Атрибуты тегов и их использование на примере <img> и <a>-тегов. Справочник HTML.

Домашнее задание #3
  • Скачайте и установите редактор кода Sublime Text – https://www.sublimetext.com/
  • Создайте новый HTML-файл с именем task3.html
  • При помощи автогенерации (автозавершения) кода в Sublime Text сформируйте базовую структуру страницы
  • Задайте кодировку utf-8 для страницы
  • Укажите в качестве заголовка страницы: “Краткая информация о поисковых системах”
  • Вставьте на страницу следующий текст из файла: task3-text.text
  • Оформите при помощи HTML-тегов текст, так чтобы он выглядел как на скриншоте (нажмите на картинку чтобы просмотреть в большем размере):
    Студентам
  • Обратите внимание, на то что:
    • текст “Поисковые системы” – выделен полужирным
    • слова Яндекс, Google и Mail.ru – должны быть ссылками на соотв. сайты этих поисковых систем, при этом эти ссылки должны открываться в новой вкладке (подсказка – см. атрибут: target для ссылки)
  • Скриншот получившей страницы, отправьте в рабочую группу Вконтакте.
Домашнее задание #4
  • Создайте новую страницу и назовите её файл: task4.html
  • Сформируйте базовую HTML-структуру и задайте кодировку utf-8
  • Вставьте на страницу текст из файла: task4-text.txt
  • Оформите текст на странице так, чтобы он выглядел как на скриншоте (нажмите на картинку, чтобы просмотреть в большем размере):
    Студентам
  • скачайте и вставьте на страницу исходную картинку:
    Студентам
    чтобы сохранить картинку, кликните по ней – она откроется в новой вкладке – нажмите по ней правой кнопкой и выберите “Сохранить изображение как
  • Внимание, чтобы картинка отобразилась на Вашей странице она должна находится в той же папке, где находится файл вашей веб-страницы (т.е. рядом с task4.html)
  • обратите внимание не следующие факторы:
    • картинка должна быть шириной 200 пикселей
    • текст HTML в самом верху должен быть по центру (как на скриншоте)
    • вокруг картинки должны быть отступы по бокам (как на скриншоте) – ищите в справочнике соотв. атрибут для этого.
    • Полужирный текст на скриншоте должен быть полужирным и у вас, тоже самое и касательно курсива.
    • Текст Консорциумом всемирной паутины (W3C) должен быть полужирным и ссылать по адресу: https://www.w3.org – ссылка должна открываться в новой вкладке браузера
  • Ваша страница может выглядеть несколько иначе чем на скриншоте, потому что у вас может быть другой браузер или другая его версия, другая диагональ монитора или другая операционная система – однако оформление текста должно быть таким же.

 

Занятие №4

Знакомство с CSS. Методы использования CSS-кода на веб-странице. Преимущества и возможности CSS. Синтаксис CSS-кода. Основные виды селекторов в CSS. Контекстный доступ. Типовой макет веб-страницы на div-блоках.

Задание #5
  • Создайте новую папку, например coffee и создайте в ней два файла: task5.html и style.css
  • Скачайте и распакуйте в папку coffee все изображения из архива: task5_images (помните, что браузер не умеет отображать и подключать файлы из архивов!)
  • Сформируйте базовую HTML-структуру и задайте кодировку utf-8
  • Подключите style.css к странице task5.html через link-тег.
  • Задайте цвета фона для всей страницы таким: #f5f5f5 – о том, что это за код почитайте здесь:  Форматы задания цвета в CSS
  • Подключите Google-шрифт на страницу, вставив этот код перед подключением вашего стилевого файла style.css:

    задайте подключенный Google-шрифт для всей страницы (body) с помощь такого CSS-кода:

  • Добавьте на страницу div-тег с id равным: mainpage. Внутри этого div-блока будет всё содержимое страницы. В CSS для этого div’а установите ширину равную 1070 пикслей и поставьте выравнивание по центру страницы:
  • Для разметки шапки добавьте тег header (в дальнейшем названия тегов и css свойств будут сопровождаться ссылками на htmlbook.ru) и задайте внутри него выравнивание по центру с помощью CSS-свойства: text-align
  • Внутрь header’а добавьте изображение logo.png (см. в архиве изображений). Задайте с помощью CSS ( не с помощью HTML-атрибута) ширину этому изображению, равную 180 пикселям. Для обращения именно к этому изображению, а не во всем вообще на странице – используйте или идентификацию по id или контекстный селектор доступ, учитывающий что изображение logo.png вставлено именно внутрь header’а – в отличии от других изображений на этой странице.
  • Сразу после изображения логотипа вставьте тег menu для создания меню. Внутри menu создайте пункты меню: Главная, О кофейне, Меню, Новости, Фото, Контакты при этом каждый пункт меню должен быть ссылкой, у которой в качестве адреса будет символ: # (это анкоры – в данном случае просто “заглушки” чтобы ссылки были кликабельными, но никуда не вели).
  • Установите одинаковый цвет текста для всех ссылок на странице: #333
  • Добавьте следующий CSS-код для стилизации пунктов меню:
  • Отмените нижнее подчеркивание ссылок внутри пунктов меню используя CSS-свойство: text-decoration
  • Установите отступ снизу в 20 пикселей для heaeder’а (см. свойство: margin-bottom) – чтобы отодвинуть меню от логотипа.
  • После header’а добавьте еще один элемент: section с идентификатором (id) равным: gallery-home. Пропишите, обращаясь по id к нему выравнивание элементов и текста по центру через text-align
  • Внутри section’а создайте 6 композиций вида:

    Вместо URL-картинки будет имя файла изображений, в вашей папке должно быть 6 JPEG-картинок с именами от 1.jpg до 6.jpg. Все они должны быть вставлены именно в выше приведенном формате внутри section-тега.

  • Обратитесь ко всем ссылкам внутри элемента с id = gallery-home и задайте им ширину равную 25%, внешний отступ в размере 10 пикселей (см. свойство: margin), а также сделайте их блочными элементами в линию:
  • Далее, используя контекстный селектор укажите 100% ширину всем картинкам, которые находятся в ссылках, которые в свою очередь находятся внутри элемента с id = gallery-home
  • После section’а добавьте тег footer и напишите внутри него следующий текст:
  • Выровняйте текст внутри footer’а по центру (см. выше Вы уже это делали несколько раз).
  • Установите для footer’а верхнюю границу (линию) с помощью свойства: border-top. Толщина линии границы: 1 пиксель, тип линии: сплошной, цвет линии: #ccc.
  • Отодвиньте footer от section-элемента с помощью внешнего отступа сверху (margin-top) в 30 пикселей. Такой же внешний отступ сделайте снизу footer’а в 20 пикселей (найдите аналогичное CSS-свойство в справочнике для внешнего отступа снизу).

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

Студентам

 

Занятие №5

Знакомство с JavaScript и jQuery. Использование сторонних js-скриптов на странице. Пример подключения скрипта LightBox. Использование Web Inspector’а в браузере. Файловая структура WordPress. Изменение CSS-кода темы WordPress. Приёмы модификации WordPress-тем.

Задание #6
  • Создайте новую папку, например task6 и создайте в ней файл: task6.html
  • Сформируйте базовую HTML-структуру и задайте кодировку utf-8
  • Создайте на странице div-элемент с классом: slider
  • Найдите в Интернете 4-е фотографии на любую тематика, главное чтобы каждая фотография имела размер: 800х500 пикселей!
  • Создайте в папке task6 папку images и сохраните в неё выбранные выше фотографии
  • Вставьте все четыре фотографии внутрь div-блока с классом: slider
  • Подключите javascript-файл по URL-адресу: https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js (библиотеку JQuery) к Вашей странице
  • Скачайте и распакуйте архив слайдера bxslider, таким образом, чтобы в вашей папке task6 появилась папка bxslider из архива.
  • Подключите CSS-файл jquery.bxslider.css из папки bxslider к вашей странице
  • Подключите javascript-файл jquery.bxslider.min.js из папки bxslider к вашей странице
  • Перед закрывающим тегом head вставьте код инициализации (запуска) слайдера:
  • Создайте и подключите свой стилевой файл: style.css к странице task6.html через link-тег. Обратите внимание – что нужно его подключить в самом конце перед закрывающим тегом head.
  • Откройте страницу и убедитесь что слайдер работает без ошибок.
  • Через инспектор кода в браузере (F12) выясните какие теги создает слайдер, чтобы через самый внешний тег внутри которого лежит весь слайдер – выставить ему ширину в 800 пикселей и выровнять по центру – сделать отступ сверху в размере 5%.

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

Студентам