Разработка веб-страниц на языке разметки HTML с использованием каскадных таблиц стилей CSS

Содержание

Слайд 2

Модуль 3 Графика в web-дизайне. Гиперссылки. Принципы навигации web-сайта

Модуль 3
Графика в web-дизайне. Гиперссылки. Принципы навигации web-сайта

Слайд 3

Форматы графических файлов в Web

Форматы графических файлов в Web

Слайд 4

bmp, tif, gif, jpg, png

bmp, tif, gif, jpg, png

Слайд 5

BMP ( англ. bitmap) — формат хранения растровых изображений. Вообще-то не

BMP ( англ. bitmap) — формат хранения растровых изображений. Вообще-то не один грамотный веб-мастер

не станет использовать графику в этом формате для оформления своего сайта (равно как и для контентного наполнения) - размеры несжатой битовой карты чрезвычайно объемны. Просто забудьте о том, что браузеры поддерживают bmp
TIFF (англ. Tagged Image File Format) — формат хранения растровых графических изображений, который стал популярным форматом для хранения изображений с большой глубиной цвета. Этот формат поддерживается всеми браузерами, но из-за весьма крупных размеров в веб-дизайне не используется. Однако, "тиффы" иногда можно встретить в контентном наполнении различных сайтов - например, в качестве демонстрации "на печать" работ различных фотохудожников. 
GIF (англ. Graphics Interchange Format — формат для обмена изображениями). Максимально допустимая глубина цвета - 8 бит (256 цветов). Этот формат очень хорошо подходит для того, что бы отображать на веб-страницах растровую графику. Огромный выбор вариантов компрессии, а так же палитр сделало этот формат одним из самых распространенных в вебе. Ну а возможность делать анимированные картинки (и использовать их в качестве банеров, меню и проч.). Формат совместим на 100% со всеми известными на сегодняшний день операционными системами. 
Слайд 6

JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко

JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко используемый

при создании сайтов и для хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно если он содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определенным цветом.
PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. Использует улучшенный формат сжатия данных. Используется в областях: текст, логотипы, иллюстрации с четкими краями, изображения с градиентной прозрачностью.
 PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно форматам GIF и PNG-8 сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях. Применение: фотографии, рисунки, содержащие прозрачные участки, рисунки с большим количеством цветов и четкими краями изображений.
Слайд 7

Тег и его атрибуты (src, alt, width, height, border)

Тег и его атрибуты (src, alt, width, height, border)

Слайд 8

Элемент представляет изображение и его резервный контент, который добавляется с помощью

Элемент  представляет изображение и его резервный контент, который добавляется с помощью атрибута alt.


Так как элемент  является строчным, то рекомендуется располагать его внутри блочного элемента, например, 

 или 

.
Тег  имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:
Пример кода
Слайд 9

Абсолютный путь src=" https://etikket.ru/images/povsednevnii-etiket/etiket-na-ulitse1.jpg " Когда ссылка представляет из себя полный

Абсолютный путь
src=" https://etikket.ru/images/povsednevnii-etiket/etiket-na-ulitse1.jpg "
Когда ссылка представляет из себя полный URL файла

или страницы, это и есть абсолютный путь
В основном абсолютный путь используется, тогда, когда нужно сослаться на другой сайт.
Минусы - Когда появится необходимость в смене домена(имени сайта) или например при переносе сайта с локальной машины на сервер.
Плюсы - Кража контента с вашего сайта, при использовании абсолютных путей, можно получить обратные ссылки с сайта, на котором находится сворованный контент.
Слайд 10

Относительный путь src= "images/povsednevnii-etiket/etiket-na-ulitse1.jpg" src="../images/povsednevnii-etiket/etiket-na-ulitse1.jpg" В основном относительный путь указывается тогда,

Относительный путь
src= "images/povsednevnii-etiket/etiket-na-ulitse1.jpg"
src="../images/povsednevnii-etiket/etiket-na-ulitse1.jpg"
В основном относительный путь указывается тогда, когда Вам нужно

отправить посетителя на другую страницу Вашего сайта, или вставить объект (например изображение) на одной из страниц
Слайд 11

Путь относительно документа src= "img/contacts.jpg" В основном такой путь используется тогда,

Путь относительно документа
src= "img/contacts.jpg"
В основном такой путь используется тогда, когда текущий

и связанный документ(страница) находятся в одной директории.
Слайд 12

Путь относительно корня сайта src= "../img/price.jpg" src= "/img/price.jpg" ../ означает переход

Путь относительно корня сайта
src= "../img/price.jpg"
src= "/img/price.jpg"
 ../ означает переход на одну директорию(уровень) выше

в иерархии каталогов, символ / обозначает переход на один уровень ниже
Слайд 13

Самый простой способ определить корневой относительный путь — взять абсолютный и

Самый простой способ определить корневой относительный путь — взять абсолютный и

отбросить http:// и имя хоста.
https://etikket.ru/images/povsednevnii-etiket/etiket-v-lifte.jpg
src= "/images/povsednevnii-etiket/etiket-v-lifte.jpg"
Слайд 14

Тег alt="" Альтернативное название картинки если вдруг картинка не прогрузилась, или

Тег alt=""
Пример кода
Альтернативное название картинки если вдруг картинка не

прогрузилась, или пользователь выключил показ изображений, или Вы не верно указали адрес изображения.
Служит для текстового описания того что изображено на картинке.
В seo оптимизации играет важную роль.
Слайд 15

Размер картинки width, height style="width: 200px; height:200px;"> width="200" height="200"> Без задания

Размер картинки width, height
Пример кодаstyle="width: 200px; height:200px;">

alt="Пример кода"
width="200" height="200">
Без задания размеров изображения отображается на странице в реальном размере.
Отредактировать размеры изображения можно с помощью атрибутов width и height.
Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
Слайд 16

Тег class для изображения style="width: 200px; height:200px;"> Тег class служит для

Тег class для изображения
Пример кодаstyle="width: 200px; height:200px;">
Тег

class служит для стилизации изображения, задания максимального размера или просто размера, обрамления рамкой, обтекания текстом и т.д.
Пример кода
img.full
{
width: 200px;
height: 200px;
}
Слайд 17

Тег class для изображения style="width: 200px; height:200px;"> Тег class служит для

Тег class для изображения
Пример кодаstyle="width: 200px; height:200px;">
Тег

class служит для стилизации изображения, задания максимального размера или просто размера, обрамления рамкой, обтекания текстом и т.д.
Слайд 18

Свойство border служит для обрамления рамкой любого элемента на сайте

Свойство border служит для обрамления рамкой любого элемента на сайте

Слайд 19

Свойство border служит для обрамления рамкой любого элемента на сайте

Свойство border служит для обрамления рамкой любого элемента на сайте

Слайд 20

Свойства margin и padding для изображения style="width: 200px; height:200px; padding: 5px;

Свойства margin и padding для изображения
Пример кодаstyle="width:

200px; height:200px; padding: 5px; margin: 10px;">
Тег class служит для стилизации изображения, задания максимального размера или просто размера, обрамления рамкой, обтекания текстом и т.д.
Пример кода
img.full
{
width: 200px;
height: 200px;
}
Слайд 21

Выравнивание изображения относительно текста или картинки style="width: 200px; height:200px; padding: 5px; margin: 10px;"> align="left";

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


style="width: 200px; height:200px; padding: 5px; margin: 10px;">
align="left";
Слайд 22

img.full {float:left; float:right;} Отмена выравнивания clear: none | left | right

img.full
{float:left;
float:right;}
Отмена выравнивания
clear: none | left | right | both | inherit

Выравнивание

изображения относительно текста или картинки
Пример кода
Слайд 23

Отмена выравнивания html – Тестовая картинка 1 небольшой текст Тестовая картинка

Отмена выравнивания
html –

Тестовая картинка 1



Пример кода

небольшой текст


Тестовая

картинка 2
Пример кода

небольшой текст


Css -
.left {
float: left;
}
Слайд 24

Отмена выравнивания html – Тестовая картинка 1 небольшой текст Тестовая картинка

Отмена выравнивания
html –

Тестовая картинка 1



Пример кода

небольшой текст


style="clear:both">

Тестовая картинка 2


Пример кода

небольшой текст


Css -
.left {
float: left;
}
Слайд 25

Фон страницы – свойство background:

Фон страницы – свойство background:

Слайд 26

Задание фона в виде цвета: background-color Html – bla bla bla

Задание фона в виде цвета: background-color
Html –

bla bla

bla text

Css –
.one {
background-color: red;
padding: 20px;
color: white;
font-size: 18px;
font-weight: bold;
}
.one:hover {
background-color: black;
}
Слайд 27

Обязательное задание фона для элемента body { background-color: #e2e2e2; width: 100%;

Обязательное задание фона для элемента
body {
background-color: #e2e2e2;
width: 100%;

margin: 0;
min-height: 500px;
}
body:hover {
background-color: white;
}
Слайд 28

Задание фона в виде изображения background-image Свойство устанавливает изображение в качестве

Задание фона в виде изображения background-image
Свойство устанавливает изображение в качестве фона

для элемента.
Фоновым изображением может быть картинка или градиент, который задаётся с помощью функций 
background-image: linear-gradient(), 
background-image: radial-gradient() 
или с помощью функций повтора градиента 
background-image: repeating-linear-gradient(), 
background-image: repeating-radial-gradient()
background: linear-gradient(to bottom left, red 10%, blue 20%);
background: radial-gradient(at left top, #1800ff, #ff0000);
background-image: linear-gradient(to top left, red, blue);
Слайд 29

Задание фона в виде изображения background-image Свойство устанавливает изображение в качестве

Задание фона в виде изображения background-image
Свойство устанавливает изображение в качестве фона

для элемента.
body {
background-image: url(https://orehinfo.ru/images/back1.jpg);
width: 100%;
margin: 0;
min-height: 12000px;
}
Слайд 30

Свойство background-repeat определяет, каким образом будет повторяться фоновый рисунок.

Свойство background-repeat определяет, каким образом будет повторяться фоновый рисунок.

Слайд 31

Свойство background-position определяет начальную позицию фонового изображения в виде горизонтальной и

Свойство background-position определяет начальную позицию фонового изображения в виде горизонтальной и

вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений. Значение по умолчанию background-position: 0% 0%
Слайд 32

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых

изображений
background-image: url(http://studmebel.com.ua/wp-content/uploads/2014/02/ClipArt_26.jpg), url(https://i.pinimg.com/originals/83/08/1e/83081e1….png), url(http://www.clipartbest.com/cliparts/Kcj/grG/KcjgrGXni.png);
background-repeat: repeat-x;
background-position: 0 309px, 0 198px, 0 99px;
background-size: 5%;
Слайд 33

Свойство background-attachment позволяет фиксировать фоновое изображение при прокрутке страницы. Ссылка на html Ссылка на css

Свойство background-attachment позволяет фиксировать фоновое изображение при прокрутке страницы.

Ссылка на

html

Ссылка на css

Слайд 34

Свойство background-size позволяет масштабировать фоновое изображение по вертикали и горизонтали описывает,

Свойство background-size позволяет масштабировать фоновое изображение по вертикали и горизонтали описывает, как

изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область.
С помощью этого свойства изображение также можно уменьшать по ширине и по высоте. background-size: 300px 150px;
Слайд 35

Спрайты: меньше картинок – больше скорость

Спрайты: меньше картинок – больше скорость

Слайд 36

Слайд 37

Css .yes-no{ background: url(https://basicuse.net/var/plain_site/storage/images/media/images/articles/prog_lang/textile/html_css/getting_started_with_bootstrap/glyphicons/61850-1-eng-GB/glyphicons_fit_content_width.png) -163px 243px; width: 56px; height: 48px; }


Css
.yes-no{
background: url(https://basicuse.net/var/plain_site/storage/images/media/images/articles/prog_lang/textile/html_css/getting_started_with_bootstrap/glyphicons/61850-1-eng-GB/glyphicons_fit_content_width.png) -163px 243px;
width: 56px;
height: 48px;
}
.yes-no:hover{
background:

url(https://basicuse.net/var/plain_site/storage/images/media/images/articles/prog_lang/textile/html_css/getting_started_with_bootstrap/glyphicons/61850-1-eng-GB/glyphicons_fit_content_width.png) -240px 242px;
width: 56px;
height: 48px;
}
Слайд 38

Сайты для создания спрайтов https://www.toptal.com/developers/css/sprite-generator https://spritegen.website-performance.org/

Сайты для создания спрайтов
https://www.toptal.com/developers/css/sprite-generator
https://spritegen.website-performance.org/

Слайд 39

HTML5 – конкурент Flash

HTML5 – конкурент Flash

Слайд 40

Вставка видео на странице посредством тега Атрибут controls отвечает за появление

Вставка видео на странице посредством тега

width="640px" height="350px">
Атрибут controls отвечает за появление элементов управления видеоплеером. Вы можете добавить изображение с помощью атрибута poster, которое браузер будет использовать, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения, а также задать высоту и ширину видео.
Как и в случае с аудиофайлами, рекомендуется перечислять в все форматы, начиная с более предпочтительного. Также нужно указывать MIME-тип для каждого видеофайла.
Слайд 41

Слайд 42


Слайд 43

Элемент используется для указания нескольких медиа-ресурсов для и . Добавляет альтернативные

data="video.swf" type="application/x-shockwave-flash">


Элемент  используется для указания нескольких медиа-ресурсов для 
Слайд 44

На данный момент браузеры поддерживают три основных видео формата: Видео в

На данный момент браузеры поддерживают три основных видео формата:

Видео в формате .avi на

сайте средствами HTML5 не воспроизводится. Поэтому его необходимо перекодировать в эти три формата с соответствующими видео и аудиокодеками для вывода на сайте. Для этого можно использовать видеоконвертеры.
Слайд 45

Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент в

 Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент 

 с

присвоенным классом, для которого задаются ширина и высота, соответствующие размерам вашего видео. Далее, с помощью css-свойств можно задать отступы, выравнивание на странице и т.д.
Слайд 46

Вставка аудио на странице посредством тега HTML5-аудио предоставляет улучшенные возможности работы

Вставка аудио на странице посредством тега

аудио контентом. До недавнего времени единственным способом добавления звуковых файлов на веб-страницы было интегрирование фонового звука с помощью тега , который проигрывался во время просмотра пользователем страницы без возможности выключения.
Слайд 47

HTML5-элемент используется для внедрения звукового контента в веб-страницы. В общем виде

HTML5-элемент 

имеет следующий вид:

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.
Слайд 48

HTML5-элемент используется для внедрения звукового контента в веб-страницы. В общем виде

HTML5-элемент 

имеет следующий вид:

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.
Слайд 49

В настоящий момент не существует аудио формата, который бы работал во

В настоящий момент не существует аудио формата, который бы работал во

всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента .
Одновременно можно добавить резервный контент для браузеров, которые не поддерживают элемент 
Слайд 50

Слайд 51

Создание изображений и анимации посредством тега https://www.youtube.com/watch?v=4P0i8QlQ6fE

Создание изображений и анимации посредством тега
https://www.youtube.com/watch?v=4P0i8QlQ6fE

Слайд 52

Использование svg формата Хоть формат не особо новый, но свою популярность

Использование svg формата
Хоть формат не особо новый, но свою популярность заслужил

благодаря внедрению его на сайты.
Все последние версии браузеров уже получили поддержку данного формата.
Слайд 53

Использование svg формата SVG – Scalable Vector Graphics (Масштабируемая Векторная Графика)

Использование svg формата
SVG – Scalable Vector Graphics (Масштабируемая Векторная Графика) –

основанный на векторе формат для веб-разработчиков.
Данный тип формата стал столь популярен благодаря тому, что его изображения возможно отображать на больших разрешениях без потери качества, так как SVG – это векторный формат.
Слайд 54

SVG имеет небольшой вес по сравнению с другими форматами. У этого

SVG имеет небольшой вес по сравнению с другими форматами. У этого

формата просто невероятные возможности.
Флаги, символы, элементы интерфейса. И это только небольшой список того, как его можно использовать.
Самый большой плюс его использования, это то что он является векторным форматом, то есть его возможно использовать на любых дисплеях – каким бы ни было их разрешение, он везде будет отображаться одинаково.
Слайд 55

Плюсы использования SVG Так почему же стоит отказаться от привычных нам

Плюсы использования SVG
Так почему же стоит отказаться от привычных нам JPG

или GIF в пользу SVG? Есть достаточно много причин того, почему же все таки стоит его использовать в вашем проекте.
SVG – векторный формат, именно поэтому его стоит его использовать для адаптивных сайтов, на которых размер изображений зависит от разрешения дисплея пользователя, и SVG безупречно соответствует всем требованиям.
SVG изображения используют XML для определения его свойств, и, соответственно, у него есть способность к еще большему сжатию.
SVG изображениями очень просто управлять, и это открывает еще больше возможностей для дизайнеров, которые могут менять цвет, добавлять тень, фильтры, размытие и еще много других эффектов.
SVG довольно прост для понимания
SVG работает с открытыми веб стандартами
Вы можете использовать обычный текстовый редактор кода для создания SVG. Это дает вам некоторую свободу в действиях, все зависит лишь от ваших потребностей и от уровня экспертных знаний в данной области.
Слайд 56

Минусы использования SVG Вы вероятно потрясены тем, сколько же у SVG

Минусы использования SVG
Вы вероятно потрясены тем, сколько же у SVG плюсов.

И возможно подумали, что у него нет минусов. Но нет, парочка точно есть, и вот некоторые из них:
Нет поддержки у старых браузеров, таких как Explorer 8 и ниже.
SVG не может использоваться в фотографиях, так как это векторный формат, и применяется он для создания различных фигур и линий.
Слайд 57

Замена jpg, gif, png на svg https://doromarine.kz/media/mod_languages/images/kz.svg https://doromarine.kz/media/mod_languages/images/kz.gif

Замена jpg, gif, png на svg
https://doromarine.kz/media/mod_languages/images/kz.svg
https://doromarine.kz/media/mod_languages/images/kz.gif

Слайд 58

С помощью svg можно рисовать Размеры и координаты задаются для разных

С помощью svg можно рисовать
Размеры и координаты задаются для разных фигур

по-разному, а вот фон и обводка — одинаковы для всех:
fill — заливка. Можно задать цвет любым способом.
Прозрачность — none или transparent.
Цвет по умолчанию — черный;
stroke — цвет обводки;
stroke-width — толщина обводки, по умолчанию — 1.
Без stroke не работает.



x,y — координаты левого верхнего угла фигуры;
width, height — ширина и высота прямоугольника.
Слайд 59

Закругленные уголки задаются параметрами rx и ry. Если задан только один

Закругленные уголки задаются параметрами rx и ry. Если задан только один

из параметров, скругление по вертикали и по горизонтали будет одинаковым:

Если заданы оба параметра (и они таки разные), радиус скругления будет разным:

Слайд 60

Много угольники рисуются с помощью - polygon Или В points задаются

Много угольники рисуются с помощью - polygon

points="5,135 115,5 225,135" fill="violet" stroke="purple" stroke-width="5" />

Или


В points задаются x,y-координаты вершин фигуры, через пробел.
polygon замыкается сам по себе, последнюю точку можно не указывать.
Слайд 61

Круги рисуются с помощью cirlce r — радиус круга; cx, cy

Круги рисуются с помощью cirlce

fill="orangered" stroke="crimson" stroke-width="5" />

r — радиус круга; cx, cy — координаты центра круга.
Эллипс с помощью - ellipse



rx, ry — горизонтальный и вертикальный радиусы эллипса; cx, cy — координаты центра эллипса.
Слайд 62

Более сложные фигуры можно сделать из сочетания простых: При этом стиль

Более сложные фигуры можно сделать из сочетания простых:
При этом стиль фигур

можно задать один раз для всей группы, а не отдельно для каждой фигуры:

Слайд 63

Так же можно рисовать линии с помощью line x1, y1, x2,

Так же можно рисовать линии с помощью line




x1, y1, x2, y2 — координаты начала и конца линии.
Или линии соеденненные между собой - Polyline



В points задаются x,y-координаты точек, каждая точка через пробел.
Слайд 64

Новые свойства: CSS3

Новые свойства: CSS3

Слайд 65

Работа с фоном: создание градиентов {background: linear-gradient(угол / сторона или угол

Работа с фоном: создание градиентов
{background: linear-gradient(угол / сторона или угол наклона

с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);}
Слайд 66

Направление градиента может быть задано двумя способами: с помощью угла наклона

Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение

которого определяет угол наклона линии внутри элемента.
div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }
с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.
div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. 
Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:
div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }
Слайд 67

Радиальный градиент radial-gradient() Радиальный градиент отличается от линейного тем, что цвета

Радиальный градиент radial-gradient()
Радиальный градиент отличается от линейного тем, что цвета выходят из одной

точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
{background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);}
Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
div { height: 200px; background: radial-gradient(white, #FFA9A1); }
Слайд 68

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position,

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением

приставки at.
Если позиция центра не задана, используется значение по умолчанию at center.
div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }
С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента.
Первое значение задает ширину эллипса, второе — высоту.
div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }
Слайд 69

Генераторы css градиентов https://yandex.kz/search/?text=css%20%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%20%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80&lr=162

Генераторы css градиентов
https://yandex.kz/search/?text=css%20%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%20%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80&lr=162

Слайд 70

Работа с границами: скругленные края у блоков – свойства border-radius border-radius:

Работа с границами: скругленные края у блоков –
свойства border-radius
border-radius: 100%;
border-radius: 100px;
Задает скругление

краев у элементов
Слайд 71

Задание полупрозрачности элементам страниц – свойство opacity Свойство opacity задает прозрачность

Задание полупрозрачности элементам страниц – свойство opacity
Свойство opacity задает прозрачность любому

элементу к примеру
opacity: 0.5 – задаст прозрачность в половину
Чем меньше значение тем более прозрачным будет объект
При значении 0 прозрачность будет максимальной, и объект исчезнет. Значение 1 стоит по умолчанию.
Слайд 72

Домашнее задание

Домашнее задание

Слайд 73

На своем сайте добавить как минимум 3 картинки в текст И добавить фон сайта

На своем сайте добавить как минимум 3 картинки в текст
И добавить

фон сайта
Слайд 74

Гиперссылки. Принципы навигации web-сайта

Гиперссылки. Принципы навигации web-сайта

Слайд 75

Общие сведения о гиперссылках

Общие сведения о гиперссылках

Слайд 76

Гиперссылка (англ. hyperlink) — часть гипертекстового документа, ссылающаяся на другой элемент

Гиперссылка (англ. hyperlink) — часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение)

в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.
Гиперссылка — фрагмент HTML-документа и его базовый элемент

Ссылка на следующую страницу

Слайд 77

Гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно

Гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно

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

«Битой» ссылкой называют такую гиперссылку, которая ссылается на отсутствующий по каким-либо

«Битой» ссылкой называют такую гиперссылку, которая ссылается на отсутствующий по каким-либо

причинам объект, например, если документ или файл удален или перемещен администратором ресурса, на котором он был расположен, или если сам ресурс недоступен. Обычно в таком случае на странице появляется сообщение с кодом ошибки.

Битая ссылка

Слайд 79

Для определения ссылки в HTML используется тег , структура которого имеет

Для определения ссылки в HTML используется тег , структура которого имеет вид 

href="filename">Текст ссылки,
где filename — имя файла или адрес в Интернете, на который необходимо сослаться, а Текст ссылки — текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе.
Также можно использовать аргумент TARGET, который показывает, в каком окне будет открыта ссылка (значения — _blank (новом), _self (текущем)). target="имя окна">.
Мои работы — ссылается на документ my-photo.html в текущем каталоге, образуя гипертекстовую ссылку в виде слова «Мои работы»;
Мой фотоальбом — ссылается на файл my-photo.html, расположенный в каталоге photo корневом каталоге и образует ссылку в виде текста «Мой фотоальбом»;
Мой сайт — ссылается на ресурс, расположенный на удаленном сервере.
Открыть в новом окне
Слайд 80

Человекопонятный URL = ЧПУ URL-путь, состоящий из понятных слов, вместо идентификаторов,

Человекопонятный URL = ЧПУ
URL-путь, состоящий из понятных слов, вместо идентификаторов, и

отражающий файловую структуру сайта.
Например, вместо /c14/3/97/ 
или 
/index.php?cat=10&subcat=2&id=41
 будет /product/phone/Samsung/
Технически URL может содержать только буквы латинского алфавита и некоторые символы. Все другие символы, включая русские буквы, кодируются (percent‐encoding) и могут выглядеть вроде %D0%9B%D1%83%D0%BA. Поэтому, обычно в адресах используют латиницу, чтобы избегать осложнений для пользователей
Слайд 81

Абсолютная и относительная адресация

Абсолютная и относительная адресация

Слайд 82

Абсолютный путь Ссылка на черный яндекс Когда ссылка представляет из себя

Абсолютный путь
Ссылка на черный яндекс
Когда ссылка представляет из себя полный

URL файла или страницы, это и есть абсолютный путь
Минусы – при замене домена ссылка становится не рабочей
Слайд 83

Относительный путь Прайс-лист Скачать прайс-лист В основном относительный путь указывается тогда,

Относительный путь
Прайс-лист
Скачать прайс-лист
В основном относительный путь указывается тогда,

когда Вам нужно отправить посетителя на другую страницу Вашего сайта
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Слайд 84

Самый простой способ добавить ссылку 1) Если ссылка внешняя то указывать

Самый простой способ добавить ссылку
1) Если ссылка внешняя то указывать

ссылку полностью
Прайс-лист
2) Если ссылка указывается на ваш сайт
Прайс-лист
Слайд 85

Ссылка на почту subject=Это письмо с сайта&Body=Новый текст для письма&cc=zuev@itstep.kz&bcc=phrakz@yandex.ru" title="Напишите

Ссылка на почту
нам">Напишите мне письмо
mailto – Адрес электронной почты
?subject=Тема письма
&Body=Тело письма
&cc=Кому отправить копию
&bcc=Кому отправить скрытую копию
title=Подсказка при наведении на ссылку

Слайд 86

Ссылка на телефон (срабатывает только на мобильных устройствах) Ссылка на звонок

Ссылка на телефон (срабатывает только на мобильных устройствах)

Ссылка

на звонок в Skype
логин
Ссылка на WhatsApp
Написать на WhatsApp
Слайд 87

Здесь много-много текста. Прокручивай его вниз. Или нажмите Вниз Наверх Атрибут


Здесь много-много текста. Прокручивай его вниз. Или нажмите

Вниз


Наверх



Атрибут name используется для определения закладки (иногда называют также якорь) внутри страницы. 
Имя ссылки на закладку начинается символом #, после чего идёт название закладки

Слайд 88

В XHTML и HTML5 вместо name для определения закладки требуется указывать

В XHTML и HTML5 вместо name для определения закладки требуется указывать атрибут id.
Атрибут id —

уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз


Здесь много-много текста. Прокручивай его вниз. Или нажмите Вниз


Наверх



Слайд 89

С помощью id можно создать ссылку на определенный элемент в тексте

С помощью id можно создать ссылку на определенный элемент в тексте

имеющий id

Ссылка на второй абзац статьи


Скрипты работают только с id
Слайд 91

HTML карта ссылок Между тегами

HTML карта ссылок
Между тегами


coords="636,293,589,408,684,408" title="Чистка носа" href="#green_link" data-title="Легкой движение шлефовальной машинки - и ваш носик чистый до самых костей">



Слайд 92

HTML карта ссылок shape="poly" – Многоугольник - coords = (x1,y1,x2,y2,...,xn,yn), последовательно

HTML карта ссылок

карты">

shape="poly" – Многоугольник - coords = (x1,y1,x2,y2,...,xn,yn), последовательно указываются координаты x,y каждой точки многоугольника;
shape=" rect" – Квадрат - coords = (x1,y1,x2,y2), где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 - координаты нижний правой точки прямоугольника;
shape=" circle" – Круг - coords = (x,y,r), где x,y координаты центра круга, а r - радиус круга;

https://html5book.ru/images-in-html/

Слайд 93

HTML карта ссылок Как вычислить координаты на изображении Изображение должно быть

HTML карта ссылок
Как вычислить координаты на изображении
Изображение должно быть фактического размера

на сайте, без использования width и height!!!
Заходим в Photoshop->открываем изображение ->Жмем F8, открывается окно информации где есть указания цвета в rgb, цвета в cmyk и самое главное координаты по горизонтали (Х) и координаты по вертикали (Y).
Слайд 94

Слайд 95

Создание меню при помощи структуры списков ( , )

Создание меню при помощи структуры списков (

    ,
  • )

Слайд 96

Важно понимать что меню можно сделать и из тегов и и

Важно понимать что меню можно сделать и из тегов

и

и и
  • и
    и даже

    Главная


    Новости


    События


    Цены


    Контакты


    Для каждого меню применяются свои стили. И раньше меню создавалось по средством свойства float, НО…
    • Слайд 97

    Свойство display Свойство display отвечает за вывод и визуальное отображение элементов

    Свойство display
    Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также

    с помощью свойства display можно изменить тип генерируемого контейнера.
    Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

    1

    2

    3

    4

    5


    Слайд 98

    Свойство display Свойство display отвечает за вывод и визуальное отображение элементов

    Свойство display
    Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также

    с помощью свойства display можно изменить тип генерируемого контейнера.
    Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

    1

    2

    3

    4

    5


    По умолчанию блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
    Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
    Слайд 99

    Слайд 100

    Слайд 101

    Псевдоклассы

    Псевдоклассы

    Слайд 102

    Динамические псевдоклассы Выбирают ссылки на странице, которые имеют атрибут href и

    Динамические псевдоклассы
    Выбирают ссылки на странице, которые имеют атрибут href и находятся в определенном

    состоянии, а также некоторые другие элементы:
    :link — не посещенная ссылка;
    :visited — посещенная ссылка;
    :focus — ссылки, а также элементы форм, которые активированы посредством курсора мыши или на которые перешли с помощью клавиатуры (кнопка TAB);
    :hover — ссылки, а также другие элементы, стили применяются при наведении пользователем на элемент;
    :active — выбирает элемент, активированный пользователем с помощью клика мышки. Обычно применяется для ссылок, но может отбирать и другие элементы на странице.
    Слайд 103

    Структурные псевдоклассы :first-child — элемент, который является первым дочерним элементом некоторого

    Структурные псевдоклассы
    :first-child — элемент, который является первым дочерним элементом некоторого другого элемента;
    :last-child —

    последний дочерний элемент элемента-контейнера;
    :first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
    :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
    Слайд 104

    CSS свойство cursor

    CSS свойство cursor

    Слайд 105

    Домашнее задание

    Домашнее задание

    - Предыдущая
    Социальная философия
    Следующая -
    Описание города Воркуты

    Похожие презентации

    Воздействие анимации на пользовательский опыт в мобильных интерфейсах мобильного приложения для облачного хранения данных
    Домашнее задание по итогам обучения ПО 5С
    Основные определения и принципы. Лекция 1
    Сравнительный анализ совокупной стоимости владения распространенными музыкальными редакторами
    Языки программирования
    Лекция 16. Сущность внешнего силового электромагнитного воздействия (СЭМВ) как угроза безопасности информации в АС
    Организация поиска. Хеширование
    Microsoft Excel 2007 – новые возможности. Стандартные функции и работа с ними
    Пример физического проектирования БД
    Программы воспроизведения звуковых файлов Windows Media Player
    Профессиональная этика. Как войти в курс Classroom на Google диск
    Kompýuter prezentasiýalarynyň bilimde wajyp orny bardyr
    Работа над докладом. Лекция 5
    Презентация "Устройства компьютера" - скачать презентации по Информатике
    Презентация Вредоносные и антивирусные программы. Компьютерные черви и защита от них.
    Производные типы данных. (Лекция 3)
    Аудит информационной безопасности
    Анализ требований к ПО
    Отличия группы ВК от публичной страницы
    Алгоритмы. Определение алгоритма
    Проверка технических условий для удаленной работы
    Информационная безопасность и защита информации
    Что такое Word?
    Сетевые службы. Кластеры
    Создание мультфильма в Power Point
    Проблемы обеспечения безопасности приложений
    Использование функций языка С++
    Компьютерный сленг
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть