Практическая работа "Создание сайта"
Практическая работа №2. Создание сайта
Две подруги, недавно открыли магазинчик по продаже креативных вещей/подарков. Для
привлечения покупателей и ознакомления их с продукцией девушки хотят создать сайт и просят у
Вас помощи. Не откажите им, тем более что подробный макет уже разработан. Ниже приведено его
описание.
Сайт должен состоять из 7 страниц:
Главная,
«Забавные бумажки»,
Неожиданные подарки. С этой страницы должен осуществляться переход на следующие
страницы:
- незабываемы подарки для женщин;
- эксклюзивные подарки для мужчин;
- удивительные подарки для детей;
Контакты.
Все страницы должны иметь одинаковую структуру, чтобы пользователи могли максимально
удобно работать с сайтом. Сайт должен быть оформлен в едином стиле.
!!! Границы, выделенные пунктиром не должны отображаться.
Заголовок сайта
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
Некоторая
информация 1
Содержание страницы
Некоторая
информация 2
Основной фон на всех страницах должен задаваться рисунком fon10.jpg.
Заголовок сайта должен иметь название “Добро пожаловать! Магазин креативных вещей
«YES!»” и быть выровненным по центру. А также содержать 2 рисунка: for_she_main.png,
for_he_main.png.
Пример данной страницы:
for_he_main.png
Добро пожаловать!
Магазин креативных вещей «YES!»
for_she_main.png
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
pasha.png presents.png
text_1
О магазине
text_3
interior.png sleep.png
text_2
Переходы по страницам осуществляются при помощи ссылок.
Поле «Некоторая информация 1» должна содержать заголовок «Внимание!» (выделенный
шрифтом белого цвета), два рядом стоящих изображения: pasha.png, presents.png, а также text_1.
Выравнивание текста по центру, шрифт Comic Sanc MS, цвет текста черный.
Поле «Некоторая информация 2» должна содержать заголовок «Только у нас!» (выделенный
шрифтом белого цвета), два рядом стоящих изображения: interior.png, sleep.png, а также text_2.
Выравнивание текста по центру, шрифт Comic Sanc MS, цвет текста черный.
При наведении на рисунки presents.png, interior.png, sleep.png должна появляться
всплывающая подсказка с информацией «Новинка!».
«ГЛАВНАЯ СТРАНИЦА» должна содержать заголовок «О магазине» (начертание курсив) и
text_3 (выравнивание по центру). Цвет текста черный, шрифт Arial, размер шрифта 4.
Содержимое страница «ЗАБАВНЫЕ БУМАЖКИ» должно отображать (по разделам) все
грамоты (gr1.jpg, gr2.jpg, gr3.jpg), дипломы (dip1.jpg, dip2.jpg, dip3.jpg) и свидетельства (sv1.jpg,
sv2.jpg, sv3.jpg). Рисунок sv3.jpg - это рисунок, созданный Вами в 1-ом задании.
Пример отображения содержимого данной страницы:
for_he_main.png
Добро пожаловать!
Магазин креативных вещей «YES!»
for_she_main.png
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
pasha.png presents.png
text_1
Грамоты
gr1.jpg
gr2.jpg
gr3.jpg
Дипломы
dip1.jpg
dip2.jpg
dip3.jpg
Свидетельства
sv1.jpg
sv2.jpg
sv3.jpg
interior.png sleep.png
text_2
Страница «НЕОЖИДАННЫЕ ПОДАРКИ» должна иметь заголовок «Выберете категорию»
(начертание курсив) и содержать три ссылки (они выровнены по центру):
- подарки для женщин (для перехода на страницу «Незабываемые подарки для женщин»)
- подарки для мужчин (для перехода на страницу «Эксклюзивные подарки для мужчин»)
- подарки для детей (для перехода на страницу «Удивительные подарки для детей»)
Также под каждой ссылкой должен находиться текст text_4, text_5, text_6 (выровненный по
центру) соответственно.
Шрифт ссылок Comic Sanc MS, шрифт текста Arial.
Пример отображения содержимого данной страницы:
for_he_main.png
Добро пожаловать!
Магазин креативных вещей «YES!»
for_she_main.png
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
pasha.png presents.png
text_1
Выберете категорию
Подарки для женщин
text_4
Подарки для мужчин
text_5
Подарки для детей
text_6
interior.png sleep.png
text_2
При переходе по ссылке «Подарки для женщин» открывается страница следующего вида с
заголовком «Незабываемые подарки для женщин»:
for_he_main.png
Добро пожаловать!
Магазин креативных вещей «YES!»
for_she_main.png
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
pasha.png presents.png
text_1
Незабываемые подарки для женщин
<<Вернуться назад
Придумать название
для вещи и указать
цену
p1.jpg
p2.jpg
Придумать название
для вещи и указать
цену
Придумать название
для вещи и указать
цену
p3.jpg
interior.png sleep.png
text_2
Таблица должна быть залита белым цветом, границы должны отображаться.
!!! Обратите внимание, что должна быть ссылка на возврат к странице «Неожиданные
подарки».
При переходе по ссылке «Подарки для мужчин» открывается страница следующего вида с
заголовком «Эксклюзивные подарки для мужчин»:
for_he_main.png
Добро пожаловать!
Магазин креативных вещей «YES!»
for_she_main.png
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
pasha.png presents.png
text_1
Эксклюзивные подарки для мужчин
<<Вернуться назад
Придумать название
для вещи и указать
цену
pp1.jpg
pp2.jpg
Придумать название
для вещи и указать
цену
Придумать название
для вещи и указать
цену
pp3.jpg
interior.png sleep.png
text_2
Таблица должна быть залита белым цветом, границы должны отображаться.
!!! Обратите внимание, что должна быть ссылка на возврат к странице «Неожиданные
подарки».
При переходе по ссылке «Подарки для детей» открывается страница следующего вида с
заголовком «Удивительные подарки для детей»:
for_he_main.png
Добро пожаловать!
Магазин креативных вещей «YES!»
for_she_main.png
Главная
«Забавные бумажки»
Неожиданные подарки
Контакты
pasha.png presents.png
text_1
Удивительные подарки для детей
<<Вернуться назад
Придумать название
для вещи и указать
цену
ppp1.jpg
ppp2.jpg
Придумать название
для вещи и указать
цену
Придумать название
для вещи и указать
цену
ppp3.jpg
interior.png sleep.png
text_2
Таблица должна быть залита белым цветом, границы должны отображаться.
!!! Обратите внимание, что должна быть ссылка на возврат к странице «Неожиданные
подарки».
Страница «КОНТАКТЫ» должна иметь заголовок «Схема проезда», после которого идет
изображение map.jpg, затем заголовок «Адрес:», после которого располагается сам адрес магазина
(придуманный в задании 2). Ниже должна находиться ссылка на скачивание документа
«контакты.doc», созданного во 2-м задании. Выравнивание по центру.
P.S. Все необходимые изображения находятся в папке «images», текстовые заготовки в файле
«text.doc». Результаты сохранить в заархивированном виде Практическая работа 2.rar.
