Дизайн и графика. Web-страницы

Содержание

Слайд 3

Перечень знаний, умений, навыков в соответствии со Спецификацией стандарта компетенции «Веб-дизайн и

Перечень знаний, умений, навыков в соответствии со Спецификацией стандарта компетенции «Веб-дизайн и разработка»
разработка»

Слайд 8

Лендинг – это небольшой одностраничный сайт, полностью заточенный под то, чтобы попадающий

Лендинг – это небольшой одностраничный сайт, полностью заточенный под то, чтобы попадающий
на него клиент выполнил целевое действие.
Как правило, лендинг состоит из одной страницы, на которой размещена вся необходимая пользователю информация о товаре или услуге.
Основная цель такой страницы – привлекать внимание клиента, мотивировать его сделать заказ. Она может предлагать пользователю товар или услугу, а может агитировать за подписку, к примеру за рассылку. Все зависит от того, на какое целевое действие вы ориентируетесь.

https://www.activetraffic.ru/wiki/landing-page/

Слайд 9

Особенности Web-графики

При сохранении иллюстрации, подготовленной в графическом редакторе, всегда возникают два вопроса:

Особенности Web-графики При сохранении иллюстрации, подготовленной в графическом редакторе, всегда возникают два

как не потерять качество изображения;
как получить файл небольшого объёма.
Эти вопросы особенно актуальны при подготовке графики для Web, ведь посещаемость сайта напрямую зависит от времени загрузки его страниц. Очень хочется сохранить хорошее качество иллюстраций, но “тяжёлая” графика испытывает терпение пользователя и ударяет по его кошельку.
.

Слайд 10

Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается.

Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается.
Пользователь любит быстрое обслуживание и не хочет тратить деньги на просмотр картинок “для настроения”.
Что понимается под объёмом страницы? Конечно, не геометрический размер страницы на экране, а сумма килобайтов, которые нужно загрузить по сети для построения экранного образа. Это размер самого HTML-файла, размер картинок, размер файлов со скриптами и стилевыми таблицами.
Основной источник лишних килобайт — картинки, и к ним нужно относиться с особым вниманием. Отказаться от лишних декораций, шершавых фонов, анимаций, уменьшить геометрические размеры иллюстраций, оптимизировать графику.
Под оптимизацией графики понимается поиск разумного соотношения “килобайтный объём/качество” (небольшой объём при приемлемом качестве изображения!!!!!).

!

Слайд 11

Правила подбора цветовой схемы

Ключевой цвет.
Дополнительные цвета.
Фон.

Правила подбора цветовой схемы Ключевой цвет. Дополнительные цвета. Фон.

Слайд 12

Ключевой цвет

Наличие ключевого цвета определяет стиль и эмоции.
Как правило, его оттенок

Ключевой цвет Наличие ключевого цвета определяет стиль и эмоции. Как правило, его
близок к трем основным: красный, зеленый, синий.
Красный: тепло, сила, стабильность, комфорт, шик.
Зеленый: радость, надежность.
Синий: спокойствие, сила, простота.

Слайд 16

Дополнительные цвета, в основном создают фон.

Желательно - основной фон не белый (не

Дополнительные цвета, в основном создают фон. Желательно - основной фон не белый
напрягает яркостью).
Если фоном выбран рисунок – приглушенная яркость.
Фоном могут быть светлые и темные оттенки друг друга и контрастные ключевому цвету.

Слайд 17

Образец ужасного подбора фонового рисунка.

Образец ужасного подбора фонового рисунка.

Слайд 18

Старайтесь использовать одну и ту же картинку на разных страницах.
Во-первых, такое

Старайтесь использовать одну и ту же картинку на разных страницах. Во-первых, такое
украшение обойдётся дешевле: картинка будет загружаться по сети только для первой страницы, а для других — из кеша компьютера.
Во-вторых, пользователь, увидев одну и ту же картинку на всех страницах, получит ощущение фирменности дизайна, связанности страниц друг с другом. Пример многократного использования картинок — кнопки навигационной панели. Уместно повторять на каждой странице логотип сайта. При этом на внутренних страницах его нужно делать ссылкой на главную. Инвариантом страниц является и рисованный заголовок сайта.

Слайд 19

https://midis.info/

http://kremlin.ru/

https://midis.info/ http://kremlin.ru/

Слайд 20

Один из главных путей оптимизации Web-графики ведёт к выбору графического формата, наиболее

Один из главных путей оптимизации Web-графики ведёт к выбору графического формата, наиболее
подходящего для данной иллюстрации и настройке его параметров при сохранении графического файла.
В Web популярны три графических формата — GIF (файлы с расширением gif), JPEG (файлы с расширением jpg или jpeg) и PNG (файлы с расширением png).

Слайд 21

Обычное применение этих графических форматов:
GIF — для логотипов, надписей, заголовков, рисунков с

Обычное применение этих графических форматов: GIF — для логотипов, надписей, заголовков, рисунков
чёткими цветовыми границами и однотонными заливками (без цветовых растяжек);
JPEG — для фотографий и сложных по цветовой гамме рисунков с плавными цветовыми переходами;
PNG — для любых иллюстраций, когда соотношение объём/качество оказывается лучше по сравнению с форматами GIF и JPEG.

Пример:

Слайд 22

Дизайн картинок

Дизайн картинок

Слайд 23

Рамка

Рамка

Слайд 26

Задание 1.

Изготовить для иллюстраций рамки, используя средства HTML и CSS (без графического

Задание 1. Изготовить для иллюстраций рамки, используя средства HTML и CSS (без графического редактора).
редактора).

Слайд 27

Обтекание

Обтекание

Слайд 28

Примеры:

Примеры:

Слайд 30

Задание 2.

Создать страницу с описанием картинки по образцу.

Задание 2. Создать страницу с описанием картинки по образцу.

Слайд 31

Конструирование

При подготовке иллюстрации для Web-страницы её часто разрезают на несколько частей.
Уменьшение

Конструирование При подготовке иллюстрации для Web-страницы её часто разрезают на несколько частей.
килобайтного объёма иллюстрации. Небольшие фрагменты легче оптимизировать. Однотонные участки, участки с чёткими границами, текстовые надписи можно сохранять в формате GIF (или PNG-8), минимизируя число цветов в палитре отдельно для каждого фрагмента. При сохранении фрагментов в формате JPEG можно управлять параметром качество/объём отдельно для каждой части. В итоге килобайтный объём оптимизированных кусочков оказывается меньше объема полной оптимизированной картинки.
Возможность создания карты ссылок. Отдельные фрагменты общей иллюстрации можно оформить как гипертекстовые ссылки, что особенно полезно, если изображение используется как навигационное меню.
Кажущаяся быстрота загрузки. Иллюстрация появляется на экране по мере поступления её частей по сети, и пользователю есть чем занять себя, в ожидании полной загрузки страницы.

Слайд 32

Как из отдельных частей собрать единое изображение?
Запустим двух козочек попастись, поместив

Как из отдельных частей собрать единое изображение? Запустим двух козочек попастись, поместив
их в абзац:

Свойство white-space со значением nowrap заставляет браузер выводить элементы в одну строку. При конструировании картинки из фрагментов это необходимо, иначе в узких окнах изображение “развалится”.

Слайд 33

Как удалить промежуток между картинками?


сомкнули границы тегов, ведь конец строки

Как удалить промежуток между картинками? сомкнули границы тегов, ведь конец строки для
для браузера равнозначен пробелу!!!!!

Как бы мы ни уменьшали окно, браузер включит протяжку, но не развалит рисунок на части.

Слайд 34

Как построить заголовочную часть сайта из картинки?

Эту картинку удобно разрезать на

Как построить заголовочную часть сайта из картинки? Эту картинку удобно разрезать на
три части: логотип, заголовок и декоративную иллюстрацию:

Для показа сложно-разрезанных картинок используют таблицы

Слайд 36

Задание 3.

Создать страницу с описанием картинки по образцу.

Первый фрагмент (логотип) оформлен

Задание 3. Создать страницу с описанием картинки по образцу. Первый фрагмент (логотип)
как ссылка на главную страницу.

Слайд 37

Адаптивная верстка

В настоящее время посетители заходят на сайты не только с настольного

Адаптивная верстка В настоящее время посетители заходят на сайты не только с
компьютера, но и с ноутбука, планшета, смартфона. При этом на устройствах с маленьким экраном часто текст слишком мелкий, ссылки практически некликабельны, элементы управления расположены слишком близко друг от друга.
Чтобы устранить эти недостатки стали разрабатывать отдельные мобильные версии сайтов. Но это долго, дорого и неудобно в поддержке.
Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.

Слайд 38

Пример

Разработку адаптивной верстки чаще всего проводят от уже существующего сайта для большого

Пример Разработку адаптивной верстки чаще всего проводят от уже существующего сайта для
экрана к экранам меньшего размера. Проверять результат работы можно разными способами:

просто менять размер экрана браузера,
расположить справа панель инспектора компонентов и менять ее ширину,
использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.

Слайд 39

Что используют для оптимизации сайта под мобильные устройства?

Метатег viewport
Мобильные браузеры по умолчанию

Что используют для оптимизации сайта под мобильные устройства? Метатег viewport Мобильные браузеры
принимают страницу сайта за страницу для обычного компьютера и масштабирует ее по ширине экрана телефона. В результате текст становится мелким, и посетителю, чтобы его прочесть, приходится увеличивать масштаб страницы.
Для корректировки размеров и масштабирования страницы с учетом ширины экрана устройства используют метатег viewport, который содержит инструкции для браузера.

Чтобы сообщить браузеру, что страница адаптируется к любым устройствам, в заголовок документа добавляют метатег viewport.

Пример

Слайд 40

Контент шире экрана – часто возникающая проблема, как только задан viewport.
Это происходит,

Контент шире экрана – часто возникающая проблема, как только задан viewport. Это
если каким-то элементам задана большая фиксированная ширина.

Основные свойства метатега

Чтобы не появлялась горизонтальная прокрутка, ширину страницы задают на весь экран, при необходимости ограничивая ее свойством max-width.
Пример
.content { width: 100%; max-width: 1200px; }

Имя файла: Дизайн-и-графика.-Web-страницы.pptx
Количество просмотров: 41
Количество скачиваний: 0