Наименование: Внедрение компонентов Bootstrap на веб - страницу
1. Цель: Научиться использовать сетку Bootstrap для создания шаблона сайта, внедрять компоненты Bootstrap на созданную страницу. Формировать компетенции ОК 1, ОК 4, ОК 5, ОК 8, ОК 9; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4
2. Подготовка к занятию: по предложенной литературе повторить тему «Фреймворк Bootstrap» и ответить на следующие вопросы:
2.1 Назначение фреймворка?
2.2 Какие компоненты представлены во фреймворке?
3. Литература:
3.1 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014
3.2 http://getbootstrap.com – фреймворк Bootstrap
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
5. Задание:
5.1 Создать собственный профиль по аналогии социальных сетей. Пример профиля должен выглядеть следующим образом:
6. Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
|
|
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
7. Содержание отчета:
7.1 Наименование и цель работы
7.2 Ответы на контрольные вопросы
7.3 Код программы и скрин ее выполнения
7.4 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Сколько колонок идет в стандартной сетке Bootstrap?
8.2 Как сверстать фиксированный макет на основе сетки Bootstrap?
8.3 Как сверстать резиновый макет на основе сетки Bootstrap?
8.4 Какие стандартные классы для разметки макеты представлены в Bootstrap?
ПРИЛОЖЕНИЕ:
Ход выполнения задания:
1. Для выполнения задания нужно взять шаблон, к которому подключен bootstrap.
2. Основа профиля (его сетка) состоит из двух колонок:
3. Левая колонка включает в себя следующие элементы:
Фотография – необходимо разместить изображение шириной 155px, высота произвольная. Пример: <img src="myphoto.jpg" width=”155” height=”200”>
Файл с изображением должен лежать в той же папке, что и все остальные файлы. Изображение нужно поместить в тег <a> с классом thumbnail.
Компонент: http://getbootstrap.com/components/#thumbnails
Пример:
4. Список ссылок реализован с помощью bootstrap – компонента nav:
http://getbootstrap.com/components/#navpills
Внутри списка используется компонент badges:
http://getbootstrap.com/components/#badges
Пример:
5. Правая колонка состоит из следующих компонентов:
Заголовок - <h1 class="pageheader">Шомас Елен <small>Самара</small></h1>
Класс pageheader позволяет делать большие заголовки с нужным бордюром. Тег <small> размещенный внутри заголовка, делает текст размером меньше и более блеклого оттенка.
Цитата выводится с помощью специального тега <blockquote>.
|
|
6. Список характеристик пользователя, реализовывается с помощью таблиц:
http://getbootstrap.com/css/#tables
Пример таблицы с одной строкой: