Позиционирование. Параметры блока

Март 5, 2021

Главная
Информатика
Позиционирование. Параметры блока

Содержание

2. Параметры блока width: величина|% height: величина|% min-width : величина|% | inherit max-width : величина|% | inherit
3. Позиционирование position: static | absolute | relative | fixed | sticky top: auto | величина |
4. Правила использования 1) position: absolute — для нестандартных сайтов со множеством анимаций; для совмещения нескольких элементов
5. Визуальные свойства display: none | block | inline | inline-block visibility: hidden | visible | inherit
6. Настройка курсора Cursor – auto (по умолчанию) – default (обычный курсор) – crosshair (перекрестие) – pointer
7. Bootstrap – популярный фреймворк для разработки сайтов
8. Что такое фреймворк и Bootstrap? Фреймворк — это заготовка, отвечающая за облегчение и ускорения процесса написания
9. Как начать работу Подключить Bootstrap — CSS в head, JS файлы — перед закрывающим body Начинаем
10. Контейнеры Это базовый элемент в Bootstrap. Контейнеры необходимы при использовании стандартной сеточной системы.
11. Сетка
12. Две колонки Первая колонка Вторая колонка
13. Три колонки Первая колонка Вторая колонка Третья колонка
14. Photoshop
15. О программе Photoshop — самый популярный графический редактор растровой графики в мире. Он подходит для практически
16. Как нарезать макет Открыть PSD-файл. Во вкладке сверху Файл - Открыть (Ctrl+O или CMD+O). Выбрать слой.
17. Работа с текстом Выбрать инструмент для работы с текстом (T). Кликнуть на любой текст в файле.
18. Как найти цвет Найти нужный вам цвет можно с использованием инструмента Eyedropper tool (Пипетка) — быстрая
19. Работа с изображениями Выдернуть изображение можно тремя способами: Если вам нужна картинка в формате PNG, или
21. Как сохранить изображение Сохранить исходники можно через стандартные средства — Сохранить или Сохранить как… Сохранять картинки
23. Скачать презентацию

Слайд 2

Параметры блока

Параметры блока width: величина|% height: величина|% min-width : величина|% |

Слайд 3

Позиционирование

position: static | absolute | relative | fixed | sticky
top: auto

Абсолютное позиционирование в действии

Позиционирование position: static | absolute | relative | fixed |

Слайд 4

Правила использования

1) position: absolute — для нестандартных сайтов со множеством анимаций;

для совмещения нескольких элементов в правильных пропорциях, используя position: relative в качестве родителя; для выведения одного из элементов из общей сетки
2) position: fixed — если нужно зафиксировать элемент при прокрутке
3) position: sticky — если нужно зафиксировать элемент при прокрутке внутри контейнера
В остальных случаях мы используем static (по умолчанию), т. к. он не нарушает целостность страницы.

Правила использования 1) position: absolute — для нестандартных сайтов со

Слайд 5

Визуальные свойства

display: none | block | inline | inline-block
visibility: hidden |

visible | inherit

Слайд 6

Настройка курсора

Cursor
– auto (по умолчанию)
– default (обычный курсор)
– crosshair (перекрестие)
–

pointer (как ссылка)
– move (движение вправо-влево)
– text (как текст)
– wait (загрузка)

Настройка курсора Cursor – auto (по умолчанию) – default (обычный

Слайд 7

Bootstrap – популярный фреймворк для разработки сайтов

Слайд 8

Что такое фреймворк
и Bootstrap?

Фреймворк — это заготовка, отвечающая за облегчение и

ускорения процесса написания кода. Диктует правила построения архитектуры, выступает в качестве некоего «каркаса» веб-сайта.
Bootstrap — это самый популярный в мире фреймворк по созданию адаптивных, мобильных сайтов и приложений. Включает в себя адаптивную сетку, заготовки для работы с типовыми элементами (кнопки, списки, формы и многое другое), а также включает в себя минимальный JS-функционал для полноценной работы сайта.
Актуальная версия — 5.
Документация и ссылки на скачивание - https://getbootstrap.com/docs/versions/

Что такое фреймворк и Bootstrap? Фреймворк — это заготовка, отвечающая

Слайд 9

Как начать работу

Подключить Bootstrap — CSS в head, JS файлы

— перед закрывающим body
Начинаем работу, руководствуясь документацией.

Как начать работу Подключить Bootstrap — CSS в head, JS

Слайд 10

Контейнеры

Это базовый элемент в Bootstrap. Контейнеры необходимы при использовании стандартной сеточной

системы.

Слайд 11

Сетка

Слайд 12

Две колонки

Первая колонка

Вторая колонка

Слайд 13

Три колонки

Первая колонка

Вторая колонка

Третья колонка

Слайд 14

Photoshop

Слайд 15

О программе

Photoshop — самый популярный графический редактор растровой графики в мире.

Он подходит для практически любых целей, в частности для разработки дизайна сайтов.
Расширение файла — PSD.
Такие файлы содержат в себе слои, которые, в свою очередь, содержат в себе картинки или текст, необходимые нам для верстки сайта. PSD-файл — это исходник, без которого нельзя точно перенести макет в верстку.
Также есть аналогичные программы — например, Adobe XD, Figma, Zeplin, Sketch.app и другие. Так или иначе они похожи на Photoshop, без знания которого будет трудно использовать другие программы для работы с графикой.

О программе Photoshop — самый популярный графический редактор растровой графики

Слайд 16

Как нарезать макет

Открыть PSD-файл. Во вкладке сверху Файл - Открыть (Ctrl+O

или CMD+O).
Выбрать слой. Сделать это можно двумя способами:
Выбрать самый первый инструмент в списке — Move Tool (Перемещение) — быстрая клавиша V. Убедиться, что нажата галочка Auto-select (Автовыбор). Не забыть убрать галочку, если вы хотите перемещать слои.
Найти слой сразу в списке — правая нижняя часть экрана. Если блока со слоями нет — включить его во вкладке Window (Окно).

Как нарезать макет Открыть PSD-файл. Во вкладке сверху Файл -

Слайд 17

Работа с текстом

Выбрать инструмент для работы с текстом (T). Кликнуть на

любой текст в файле.
В панели сверху (или в правом верхнем краю экрана) можно увидеть все настройки текста — шрифт, вес, размер текста, выравнивание, цвет, межстрочный интервал и т.д.

Если такого блока нет — включить его во вкладке Window (Окно).

Работа с текстом Выбрать инструмент для работы с текстом (T).

Слайд 18

Как найти цвет

Найти нужный вам цвет можно с использованием инструмента Eyedropper

tool (Пипетка) — быстрая клавиша I. Далее можно скопировать нужный вам цвет из окна с подбором цвета в левом нижнем углу экрана.

Как найти цвет Найти нужный вам цвет можно с использованием

Слайд 19

Работа с изображениями

Выдернуть изображение можно тремя способами:
Если вам нужна картинка

в формате PNG, или вам не важен формат — выбрать Быстрый экспорт в PNG, нажав правой кнопкой мыши на слое. В новых версиях Photoshop можно скопировать SVG при экспорте небольших изображений.
Если вам необходим конкретный формат - ниже есть кнопка Экспортировать как…
Если по той или иной причине вам не подходят эти опции — можно дублировать слой в отдельный документ и сохранить документ как новый.