Практическое занятие №17

Наименование: Внедрение компонентов 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>.