HTML / CSS. Интерактивный курс (Домашние работы)
- Установить вышеуказанные инструменты.
- Создать в удобном для вас месте на жестком диске папку, где будет храниться интернет-магазин.
- Выбрать тематику интернет-магазина.
- Создать html-страницу товара каталога, по вашей тематике.
- На странице должны присутствовать:
- Структура HTML-документа.
- Название товара.
- Заголовок «Описание товара».
- Картинка товара.
- Текст краткого описания товара.
- Заголовок «Характеристики товара».
- Текст характеристик товара, который вы выбрали.
- Текст подробного описания товара.
- Горизонтальная черта.
- Текст «Все права защищены».
- Выучить комбинации горячих клавиш.
- Добавить произвольные подразделы описания товара, например, описание внешнего вида или особенностей товара.
- Добавить 2 страницы товаров по вашей тематике.
Создание основного наполнения нашего сайта, главной страницы, каталога, товара каталога и контактов. Создать файл index.html — это будет главная страница. На этой странице сделайте ссылки в виде маркированного списка на следующие страницы.
- Меню (должно располагаться на каждой странице сайта):
-Главная.
-Каталог.
-Контакты.
- Отделить горизонтальной чертой шапку сайта.
- Добавить название вашего магазина.
- Напишите приветственное сообщение.
- Горизонтальная черта.
- Подвал (должен располагаться на каждой странице сайта). Что должно присутствовать в Footer:
-Значок копирайта.
-Текст “Все права защищены”.
На странице «Каталог»:
-Меню сайта.
-Горизонтальная черта.
-Заголовок «Каталог».
-Уменьшеные копии изображений товаров из вашего магазина.
-Ссылки под картинками, для перехода в подробное описание товара.
-Footer.
На странице «Товар каталога» (страницы из первого ДЗ):
-Добавить картинку товара с возможностью нажатия на нее. Картинка должна открыться в полном размере, в новом окне.
-В подразделе «характеристики товара» необходимо добавить маркированный или нумерованный список характеристик товара.
На странице «Контакты»:
-Меню сайта.
-Горизонтальная черта.
-Заголовок «Напишите нам».
-Поля для заполнения:
-Имя.
-Email.
-Тема.
-Текстовое поле.
* Произвольные поля, которые на ваше усмотрение нужны на вашем сайте.
-Заголовок «Адрес»
-Поля для заполнения:
-Контактный номер телефона интернет-магазина.
-Адрес.
-Email.
* Любая информация о магазине.
** На страницу контактов добавьте реальную карту Yandex или Google.
** Если вы сделали несколько товаров, добавьте описание и харатеристики для каждого товара.
** Количество страниц товаров не ограничено.
Задачи со * предназначены для продвинутых учеников, которым мало сделать обычное ДЗ.
Стилизация интернет-магазина.
- Создать файл style.css, в котором будут храниться все стили вашей работы. Подключить этот файл ко всем страницам.
- В качестве фона на всех страницах установить цвет #f8f8f8.
- Меню сайта:
-Для всех ссылок меню задать определённый стиль (Цвет текста, размер шрифта, начертание шрифта и т.д.).
-Убрать маркеры списка.
- Страница «Товар каталога»:
-Заголовки (Краткое описание товара, Характеристики, Подробное описание товара):
-Цвет текста черный.
-Размер шрифта 18px.
-Насыщенность шрифта 400. (font-weight).
-Установите цвет фона #eaeaea.
-Для краткого описания товара:
-Цвет текста #707070.
-Размер шрифта 14px.
-Начертание шрифта italic. (font-style).
-Высоту текста 16px (line-height).
-Для подробного описания товара:
-Цвет текста #484343.
-Размер шрифта 16px.
-Насыщенность шрифта 400. (font-weight).
-Высоту текста 24px (line-height).
-Расположение текста по левому краю (text-align).
-Для списка характеристик товара:
-Задайте списку стили, отличные от всего остального текста.
-Установите в качестве маркеров произвольные изображения.
- Страница «Контакты»:
-Задать значения ширины и высоты для полей ввода.
-Задать стили для текста внутри полей input (Цвет текста, размер шрифта и т.д.).
-Следите, чтобы на странице всё выглядело гармонично, не выбирайте слишком резких цветов.
** Для изображений, размещенных на странице подробного описания товара, задать рамку, не используя свойства border, произвольным цветом.
** Приветствуются самостоятельные дополнения ваших работ в пределах пройденной темы.
Добавление контента на страницу, создание первых блоков и эффектов на ссылки сайта:
- При наведении на меню сайта цвет ссылок должен меняться на произвольный.
- На всех страницах создать блок с классом header, содержащий:
-Логотип интернет-магазина.
-Меню сайта.
- Создать блок с классом footer и разместить в него содержимое футера.
- При вводе текста в поле Email на странице контактной информации поменять цвет текста и цвет поля.
- При вводе текста в текстовые поля каждое слово должно начинаться с большой буквы, даже если пользователь будет вводить с маленькой.
- На странице товара каталога:
-Под заголовком «Технические характеристики» разместить таблицу, размером не меньше 2X3 (есть отдельное задание).
-Записать в таблицу произвольные технические характеристики вашего товара.
-Если технических характеристик нет, добавьте таблицу с любыми параметрами по вашему выбору.
- При наведении на изображения в разделе просмотра товара, подробного описания, необходимо сделать так, чтобы рамка исчезала, но сама картинка при этом не должна смещаться, т.е., должна оставаться неподвижной.
- На странице просмотра товара каталога в каждом параграфе сделать первую букву первого слова другим шрифтом и размером.
- Создать таблицу размером не менее 4*5.
- Объединить несколько ячеек по горизонтали и вертикали.
** Задать высоту для верхней строки таблицы, отличную от всех остальных.
Создание блочной структуры сайта, позиционирование элементов.
- Главная страница:
-Создать родительский блок с классом container, задать значение ширины и расположить блок по центру экрана.
-Задать блоку с классом header значение высоты.
-Отодвинуть логотип от верхнего и левого края.
-Из вертикального меню сделать горизонтальное.
-Разместить меню справа от логотипа.
-Прижать меню к правому краю.
- Footer (на всех страницах):
-Задать высоту.
-Поменять цвет фона.
-Прижать текст «Все права защищены» к правому краю и отодвинуть от верхней и правой границы.
- Страница просмотра товара каталога:
-Разместить краткое описание товара справа от картинки.
-Добавить кнопку «Купить».
-Присвоить эффект наведения и нажатия кнопке «Купить».
- Страница каталога:
-Создать блоки для картинки и ссылки на просмотр товара каталога.
-Расположить элементы каталога горизонтально.
Доделать то, что не успели в прошлых уроках.
** Расположить элементы на ваше усмотрение.
** Страница контактов:
-Ширина карты 100%,
-Высота карты 374px.
** Добавить фоновые изображения для header на каждой странице.
Знакомство с макетом интернет-магазина.
- Открыть предоставленный макет интернет-магазина, визуально представить разбиение на блоки.
- Нарезать макет любым из двух представленных способов.
- Создание главной страницы сайта.
** Добавить все эффекты наведения и нажатия на кнопки или ссылки, присутствующие в макете.
Макет interior-home-page.psd можно скачать по ссылке: https://drive.google.com/drive/u/0/folders/0B0l8jmNN0HJEZDFSZS1vRHVKV0U Также вы можете поработать над таким макетом: https://drive.google.com/drive/u/0/folders/1SwlFqAn0Y88G57DSZwuaG7kP_F8jZnAj
Создание новых страниц интернет-магазина.
- Доделать главную страницу, если не доделали.
- Создание новых страниц по желанию, произвольный выбор следующих страниц.
** Познакомиться с сеткой, присутствующей в макете.
Финальный проект.
- Завершить работу над магазином (который вы начали верстать на 6 уроке).
- Проверить проект на валидность и кроссбраузерность.