Лабораторные работы / Лабораторная работа 4
.pdf
Лабораторная работа 4
Задание: Выполнить базовую стилизацию главной и внутренней страницы сайта. Завершённая базовая стилизация должна соответствовать следующим обязательным требованиям:
В базовую стилизацию входит:
Подключение нестандартных шрифтов (локально или из сервиса).
Подключение normalize.css.
Описание текстовых параметров для всех элементов:
o
o
o
o
o
o
размер шрифта, высоту строки, цвет шрифта, жирность шрифта,
гарнитура (название шрифта), другие текстовые параметры, если требуется по макету.
Описание фоновых параметров (фоновый цвет и изображения).
Описание состояний интерактивных элементов, |
которые описаны |
в стайлгайде (файл styleguide.psd). На этом этапе |
задавайте только |
текстовые параметры и параметры фона. |
|
Подготовка к лабораторной работе:
Перед выполнением лабораторной работы рекомендуется пройти курсы на сайте htmlacademy.ru:
Селекторы, часть 2.
Оформление текста, часть 2.
Декоративные эффекты. Рамки и фоны, часть 2.
Декоративные эффекты. Игра теней
1)Начнем с того что подключим шрифты. Прежде всего узнаем название шрифтов и их написание. Для этого откроем наш макет в программе
Adobe Photoshop. Далее выберем инструмент текст |
и выберем для |
редактирования любой из текстовых фрагментов. |
|
Обратите внимание, если у вас не установлены шрифты используемые в макете, то программа выдаст вам предупреждение о том что шрифты будут заменены на близкие (см. рисунок ниже).
Нажмите Cancel.
Затем воспользуйтесь панелью инструментов Character (см. рисунок ниже).
1
2 |
3 |
С помощью этой панели инструментов мы можем узнать название шрифта и его начертание (1), размер шрифта (2) и межстрочный интервал (3). В данном случае у нашего фрагмента шрифт PTSans NarrowBold, размер 14, межстрочный интервал 24. Это все параметры которые нам сейчас нужны.
2) Подключим шрифты. Для этого найдем нужный нам шрифт на сайте Google Fonts.
2. Перейдем на вкладку Embed
3. Скопируем ссылку
1. Выберем нужные нам стили шрифтов
Копируем ссылку и вставляем в head сразу после title. Аналогичным способом подключаем на всех страницах проекта.
3. Добавим файл normalize.css к нашему проекту.
Этот файл со стилями обеспечивает лучшую кроссбраузерность стилей по умолчанию. Подключим его на всех страницах проекта. (подробнее о normalize.css Статья о normalize.css). Подключаем style.css — основной файл стилей нашего проекта.
4. Переходим к стилизации. В первую очередь задаем стили для body. Обнуляем отступы (свойства margin и padding) у body. Указываем стили для базового шрифта, который встречается чаще всего в макете. Задаем свойства: font-family, font-size, line-height, font-weight, color, text-transform.
Параметры свойств берем из макета.
5.Далее укажем свойства для фона. Обязательно укажем цвет фона. Если изображение не загрузится, пользователь увидит фон с похожим цветом
исможет прочитать тексты на сайте. Добавим фон для body (свойство background-image). Укажем цвет фона (свойство background-color). Зададим начальное положение фонового изображения (свойство background-position) по центру вверху. Запретим повторение фонового изображения (свойство background-repeat).
6.Теперь перейдем к стилизации навигации. Для начала отменим у ссылок подчеркивание (свойство text-decoration), которое назначается браузером по умолчанию. Сделаем это для всех ссылок в проекте.
7.Теперь зададим стили самой навигации. Воспользуемся селектором по классу main-navigation. Укажем размер и цвет шрифта, высоту строки, а также черный фон для всей навигации.
8.Перед элементами ненумерованного списка по умолчанию ставятся маркеры. Отменим это для списков в навигации (селектор по классам site-navigation и user-navigation). Используем свойство list-style со значением none.
9.По умолчанию ссылки имеют отдельный цвет, который выделяет их на странице. В нашем случае он нам не нужен, поэтому зададим ссылкам обоих меню белый цвет, как в макете.
10.Ссылки — интерактивные элементы страницы. Пользователь
должен видеть, что навел на ссылку и кликнул по ней. Для стилизации таких состояний существуют специальные псевдоклассы. :hover для наведения, :focus для фокусировки. Зададим эти состояния ссылкам в навигации. Каким образом ссылка ведет себя при наведении и фокусировки смотрим в стайлгайде.
Мы видим, что при наведении ссылка меняет цвет. Воспользуйтесь
инструментом «Пипетка» («Eyedropper») 
для того чтобы узнать цвет ссылки при наведении. После этого задайте цвет фона для вышеуказанных состояний ссылок.
11. Переходим к разделу преимуществ. Отменим стили по умолчанию для ненумерованного списка (селектор по классу features-list).
12.Теперь перейдем к самим преимуществам. Зададим выравнивание текста по центру (селектор по классу feature-item) и назначим размер шрифта и межстрочный интервал для заголовков преимуществ.
13.В макете разделы с новостями и галереей объединены в один большой раздел с общим фоном. Поэтому добавляем в разметку общую обертку для этих двух разделов. Для такой обертки прекрасно подойдет тег div. Следующим образом обернем две секции:
<div class="index-columns"> <section class="news">
……. </section>
<section class="gallery">
…….
</section>
</div>
14.Добавим этому большому разделу (селектор по классу indexcolumns) фоновое изображение, начальное положение фонового изображения, разрешим повторение фонового изображения для того чтобы полностью замостить блок, зададим цвет фона и шрифта, а также изменим размер шрифта и межстрочный интервал для заголовков в разделах.
15.Перейдем к разделу новостей. Отменим маркировку элементов в списке новостей (селектор по классу news-list).
Вернем шрифт в дате публикации новости в стандартный регистр определив для свойства text-transform значение none.
16.Контейнеру фотографии в галерее (селектор по классу gallerycontent) зададим фон и обводку (свойство border).
17.Теперь разберемся с кнопками. Это непростая задача, так как у нас как кнопки выглядят и ссылки, и кнопки. У этих элементов различные механизмы наследования свойств от родительских элементов. Для того что
бы одинаково стилизовать эти |
элементы воспользуемся классом button. |
Зададим наследование шрифта |
от родительского элемента используя |
свойство font со значением inherit, выровняем текст по центру, зададим ему белый цвет и черный фон. Сделаем все символы текста прописными. Сбросим стандартную обводку.
18. Добавим фон при наведении, фокусе и нажатии. Для определения цвета фона воспользуемся стайлгайдом. Обратите внимание на порядок псевдоклассов в правиле:
.button:hover,
.button:focus,
.button:active
Он должен быть именно таким, а не случайным, чтобы правило корректно сработало.
19.Форма записи и контакты объединены в один большой раздел. Добавим им обертку с тем же классом, что и у обертки новостей и галереи.
20.Далее перейдем к стилизации форм. Здесь такая же проблема, что
иу тега button – проблема с наследованием свойств от родительского элемента. Поэтому для полей ввода в форме записи (селектор .appointmentitem input) добавим наследование шрифтов от родителя, прозрачный фон и черную обводку.
21.Изменим цвет обводки при фокусе в поле ввода.
22.Переходим к стилизации подвала. Задаем белый цвет шрифта, фон и его цвет.
23.Меняем цвет ссылок в соответствии с макетом, добавляем подчеркивание.
Добавим стили для состояния наведения и фокуса.
24.Зададим базовые стили для раздела социальных сетей. Выравниваем текст по центру и отменяем дефолтный стиль у списка.
Задаем белый цвет шрифта для кнопок.
25.В разделе с копирайтом выравниваем текст по центру.
Прописываем стили для состояния наведения и фокуса у кнопки с именем разработчика: назначаем черный цвет шрифта и контрастный белый фон.
26.Осталось сделать базовую стилизацию для модальных окон. Задаем цвет шрифта, фоновое изображение и подходящий цвет фона.
27.Зададим размеры шрифта в заголовках модальных окон.
28.Займемся полями ввода. Задаем наследование родительского шрифта, переводим текст в верхний регистр. Устанавливаем черный шрифт, контрастный светлый фон и черную обводку.
Задаем стиль для состояния фокусировки в поле ввода.
Заодно устанавливаем стиль подписи при наведении и фокусе в поле выбора.
29.Осталось сделать стилизацию ссылки «Я забыл пароль!». Задаем цвет шрифта и подчеркивание. Отменяем подчеркивание при наведении и фокусе.