HTML. CSS. Виды вёрстки презентация

Разметка
Логическая – указывает на место и функцию элементов в логической структуре документа
Визуальная (физическая) – указывает как именно (в каком виде) представить элемент пользователю

HTML
Hypertext Markup Language или язык гипертекстовой разметки
Предназначен для описания структуры и форматирования документов
Создатель – Тим Бернерс-Ли (86-91гг.)
Основная функция: описание логической структуры страницы

HTML
Описание структуры и форматирование элементов документа осуществляется с помощью дескрипторов – тегов
Тег — это символьное или текстовое выражение, предписывающее предпринять какое-либо определённое действие непосредственно по разметке и форматированию экранного представления веб-страницы.
Обычный текст
курсив
обычный текст

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

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

HTML. Строчные элементы
- выделяет фрагмент текста
,
- жирный ширифт*
,
- курсив
- ссылка
- изображение
И т.д.

HTML. Блочные элементы
Располагаются по вертикали друг за другом в новой строке
По ширине занимают всю строку или доступное пространство
Можно задать ширину и высоту
Можно вкладывать другие блочные элементы
Используются для выделения блоков текста (заголовок, абзац и т.д.) и для форматирования структуры документа

HTML. Блочные элементы
- вывод таблицы
- создание блока
- заголовок
- абзац
- маркированный список
И т.д.

Структура HTML-документа
- описывает версию документа
- открывает документ
- «заголовок»
- «тело»
- закрывает документ

содержит
Техническую информацию о документе (напр. Кодировку)
Название документа (
)
Стили или ссылку на стили
Мета-теги (например, ключевые слова)
Различные скрипты (javascript, счётчики посещаемости и т.д.)
Основная функция – описание документа

содержит
Разметку страницы
Контент, содержание документа
Основная функция – вывод информации на экран

Версии HTML
HTML 1.0 - ~85-91
HTML 2.0 – 22.09.1995
HTML 3.2 – 14.01.1997
HTML 4.0 – 18.12.1997
HTML 4.01 – 24.12.1999
HTML 5.0 – 28.10.2014

World Wide Web Consortium

CSS
Cascading Style Sheets или каскадные таблицы стилей
Язык описания внешнего вида документа
Основная функция: описание внешнего вида, визуального представления элементов страницы, т.е. физической разметки
Тем самым, с помощью CSS удалось разделить логическую и визуальную структуры документа

Версии CSS
CSS1 – 17.12.1996 – выравнивание, габариты, отступы, параметры шрифтов, цвета,
CSS2 – 12.05.1998 – блочная вёрстка, виды позиционирования, вид устройства, расширенные селекторы, динамическое содержимое и т.д.
CSS2.1 – 7.06.2011 – в основном – исправление ошибок
CSS3 – 2011-2014 и сейчас дорабаотывается

Синтаксис CSS

Селекторы CSS
Универсальный
Селекторы тегов
Селекторы атрибутов
Классы
Идентификаторы
Псевдокласс
Псевдоэлемент
* {описание}
тег {…}
[атрибут тега] {…}
.класс {…}
#id {…}
селектор: псевдокласс {…}
так же

Селекторы CSS: селекторы тегов
В CSS:
наименование тега {свойство:значение;}
В HTML:
<тег> содержимое

Селекторы CSS: классы
В CSS:
.название класса {свойство:значение;}
В HTML:
<тег class=“название класса”> содержимое
Когда нужно определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега

Селекторы CSS: идентификаторы
В CSS:
#идентификатор {свойство:значение;}
В HTML:
<тег id=“идентификатор”> содержимое
Когда нужно определить стиль для индивидуального элемента веб-страницы + для обращения скриптов к данному элементу

Селекторы CSS: псевдоклассы и псевдоэлементы
селектор:псевдокласс(элемент) {свойство:значение;}
Псевдоклассы: описание свойств элементов, которые могут меняться в зависимости от действий пользователя, а также описание свойств элементов в зависимости от положения в документе.
:first-child, :last-child, :hover, :focus, :link, :active, :visited, :lang
Псевдоэлементы: генерация содержимого, которого нет в исходном коде страницы, описание элементов, не определенных в древе документа.
:before, :after, :first-line, :first-letter

Способы добавления стилей
Внутренние (как атрибут тега)
#cd66cc">
Глобальные стили (в head документа)
<br>селектор {свойство:значение;}<br>
Связанные стили (в отдельном файле)

Свойства CSS
Позиционирование блоков: position; left, top, bottom, right; z-index и т.д.
Размеры, поля, границы, отступы блочных (и некоторых строчных) элементов: height, width; margin; border; padding;
Обтекание и обрезка контента: float; clear; overflow;

Свойства CSS
Отображение в строке: display;
Фоновое изображение и заливка фона: background, background-image;
Настройки текста: font-family, font-size (и т.д.); color, text-decoration;

Верстка
Процесс формирования документа через набор кода или с помощью WYSIWYG-редакторов
Верстка в веб обычно представляет собой реализацию разработанного дизайна в виде HTML/CSS кода
Современная вёрстка должна отвечать стандартам HTML5 и CSS3

Виды вёрстки: табличная вёрстка
Таблица состоит из строк и столбцов, которые образуют ячейки
При табличной вёрстке модульная сетка (разметка структуры) создается ячейками (строками и столбцами) таблицы
Позиционирование элементов страницы осуществляется через помещение в ячейки

Табличная вёрстка
В HTML вывод таблицы осуществляется с помощью тега
. Вложенный
тег
формирует строку таблицы. В неё вкладывается тег ) или соответствующем селекторе CSS можно указывать:
Выравнивание
содержимого по горизонтали (align=“”) и вертикали (valign=“”)
Ширину (width=“”) и высоту (height=“”) ячейки. При этом, ячейки обладают одинаковой шириной по столбцу и одинаковой высотой по строке, т.е. зависят друг от друга
Слайд 31
Табличная вёрстка
В каждую ячейку можно вкладывать новую таблицу или любой другой
блочный элемент
Можно настраивать различные свойства ячеек (отступы, границы, поля) и вложенных элементов с помощью CSS
Слайд 32
Табличная вёрстка: плюсы и минусы
Преимущества:
Простота по сравнению с блочной
Кроссбраузерность
Недостатки:
Громоздкий код
Недостаточная гибкость
Слайд 33
Виды вёрстки: блочная вёрстка
Разметка страницы осуществляется с помощью универсальных блочных элементов
(слоёв)
При этом HTML-код содержит только теги разметки и логического форматирования, а всё визуальное оформление выносится в CSS
Таблицы используются только для вывода табличных данных
Слайд 34
Блочная вёрстка
представляет собой прямоугольную область
Блоку присваивается класс из таблицы CSS
В
CSS настраивается позиционирование блока, выравнивание относительно других элементов, строчность\блочность*, поля, отступы, границы, фон, выравнивание и стили содержимого
Слайд 35
Блочная вёрстка
Габариты каждого блока не зависят от габаритов любого другого
Можно выводить
блоки из потока документа с помощью позиционирования в CSS
В
можно вкладывать любые строчные или блочные элементы в т.ч. другие
Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
Блок 7
Блок 9
Блок 8
Слайд 36
Блочная вёрстка: плюсы и минусы
Преимущества:
Более компактный код
Намного больше возможностей, гибкость
Блоки загружаются
быстрее таблиц
Недостатки:
Требует больше знаний и навыков
Слайд 37
, который формирует ячейку в данной строке, т.е. столбец.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Слайд 29
Табличная вёрстка
Количество столбцов в каждой троке должно быть одинаковым (но можно
объединять ячейки по вертикали и горизонтали с помощью атрибутов rowspan=“число” и colspan=“число” тега
Ячейка 1 и 4
Ячейка 2 и 3
Ячейка 5
Ячейка 6
Слайд 30
Табличная вёрстка
В атрибутах ячейки (
против
Слайд 38
Виды вёрстки (дизайна)
Фиксированная
Резиновая
Адаптивная\отзывчивая
Слайд 39
Фиксированная вёрстка
Размеры всех элементов жестко определены (заданы в пикселях)
При изменении разрешения
(размера окна браузера), размер элементов в пикселях не меняется
Простота перевода дизайна в код
Некорректное отображение при изменении разрешения
Слайд 40
Фиксированная вёрстка
Слайд 41
Резиновая вёрстка
Размеры всех элементов заданы в процентах от разрешения (размера окна)
При
изменении разрешения (размера окна браузера), размер элементов изменяется пропорционально
Более-менее подстраивается под размер экрана
Сложнее корректно реализовать дизайн в коде.
Слайд 42
Резиновая вёрстка
Слайд 43
Адаптивная вёрстка
Адаптируется к набору разрешений (прыгает по контрольным точкам). Размеры элементов
указываются в пикселях, при этом значения изменяются в зависимости от разрешения.
Подстраивается под любое устройство и размер экрана (с нюансами). Позволяет избавиться от «мобильных версий»
Гораздо сложнее фиксированной и резиновой
Слайд 44
Адаптивная вёрстка
Слайд 45
Отзывчивая вёрстка
Приспосабливается к любому разрешению. Размеры элементов указываются в относительных единицах.
При
изменении разрешения (размера окна браузера), размер элементов и их положение изменяется так, как это необходимо для корректного отображения
Подстраивается под любое устройство и размер экрана. Позволяет избавиться от «мобильных версий»
Гораздо сложнее фиксированной и резиновой
Имя файла: HTML.-CSS.-Виды-вёрстки.pptx
Количество просмотров: 32
Количество скачиваний: 0
Скачать
- Предыдущая
Тюлевые и портьерные ткани
Следующая -
Сферы применения роботов
Похожие презентации
Проект Эрбий (Erbium) в РФ и странах СНГ
Құрылымдық схема және ДК құрылғылары
Современные электронные образовательные ресурсы
Организация ввода и вывода данных. Начала программирования
Программно-аппаратный комплекс для мониторинга и управления освещением в производственных помещениях
Компьютер или книга - что лучше
Тестирование и отладка программных средств
Информационная модель лечебно-диагностического процесса
Етапи розв'язування прикладних задач
Проект Социальные страницы ВКонтакте великих людей
Пути реализации стратегии развития информационного общества в республике Беларусь
Пользователи интернета
Методическая разработка (презентация) по теме Алгоритм и его свойства
Онлайн-СМИ России
Типы циклических структур
Программирование на Python. Урок 16
3D-ручка. Как появилась 3D-ручка
Обработка информации и алгоритмы
Сети TCP / IP. Протокол разрешения адресов. Система DNS
Виды внедрения, план внедрения. Стратегии, цели и сценарии внедрения
Геоинформационные системы
Алгоритмы и структуры данных. Слияние-распределение
Общие правила оформления текста
Пузырьковая сортировка
Нейронные сети
Усадьба Прекрасные зори
Чек-лист проверки технической оптимизации
Знакомство с языком программирования Python
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:342222,name:m,category:G,count:46,jpg:"jpg\u002F342222",hits:32,download:b,h1:"HTML. CSS. Виды вёрстки презентация",meta:{h1:m,title:m,description:"HTML. CSS. Виды вёрстки презентация на тему, доклад, Информатика",keywords:"HTML. CSS. Виды вёрстки, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему HTML. CSS. Виды вёрстки из раздела Информатика. Презентация на заданную тему содержит 46 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EРазметка\u003Cbr\u003E\u003Cp\u003EЛогическая – указывает на место и функцию элементов в логической структуре документа\u003Cbr\u003EВизуальная (физическая) – указывает как именно (в каком виде) представить элемент пользователю\u003Cbr\u003E \u003Cp\u003EHTML\u003Cbr\u003E\u003Cp\u003EHypertext Markup Language или язык гипертекстовой разметки\u003Cbr\u003EПредназначен для описания структуры и форматирования документов\u003Cbr\u003EСоздатель – Тим Бернерс-Ли (86-91гг.)\u003Cbr\u003EОсновная функция: описание логической структуры страницы\u003Cbr\u003E",file:"HTML.-CSS.-Виды-вёрстки.pptx",texts:["\u003Cp\u003EHTML. CSS. Виды вёрстки \u003Cbr\u003E\u003Cp\u003EОсновы HTML и CSS. Табличная и блочная вёрстка. Фиксированная и резиновая вёрстка. Адаптивный дизайн\u003Cbr\u003E","\u003Cp\u003EРазметка\u003Cbr\u003E\u003Cp\u003EЛогическая – указывает на место и функцию элементов в логической структуре документа\u003Cbr\u003EВизуальная (физическая) – указывает как именно (в каком виде) представить элемент пользователю\u003Cbr\u003E","\u003Cp\u003EHTML\u003Cbr\u003E\u003Cp\u003EHypertext Markup Language или язык гипертекстовой разметки\u003Cbr\u003EПредназначен для описания структуры и форматирования документов\u003Cbr\u003EСоздатель – Тим Бернерс-Ли (86-91гг.)\u003Cbr\u003EОсновная функция: описание логической структуры страницы\u003Cbr\u003E","\u003Cp\u003EHTML\u003Cbr\u003E\u003Cp\u003EОписание структуры и форматирование элементов документа осуществляется с помощью дескрипторов – тегов\u003Cbr\u003EТег — это символьное или текстовое выражение, предписывающее предпринять какое-либо определённое действие непосредственно по разметке и форматированию экранного представления веб-страницы.\u003Cbr\u003EОбычный текст \u003Ci\u003Eкурсив\u003C\u002Fi\u003E обычный текст\u003Cbr\u003E","\u003Cp\u003EHTML. Атрибуты тега\u003Cbr\u003E\u003Ctable width=“100px” border=“1”\u003E\u003Cbr\u003E…\u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003EПрактически все теги обладают атрибутами. Изменение значения этих атрибутов, позволяет использовать дополнительные возможности в форматировании документа\u003Cbr\u003E","\u003Cp\u003EHTML. Строчные элементы\u003Cbr\u003E\u003Cp\u003EРасполагаются и являются частью одной строки. Строка не переносится без необходимости\u003Cbr\u003EНельзя задавать ширину и высоту, поскольку они определяются содержимым строчного элемента\u003Cbr\u003EВнутрь строчного элемента можно вкладывать другие строчные элементы, но не блочные\u003Cbr\u003EПредназначены для оформления документа на уровне отдельных фраз текста\u003Cbr\u003E","\u003Cp\u003EHTML. Строчные элементы\u003Cbr\u003E\u003Cp\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E - выделяет фрагмент текста\u003Cbr\u003E\u003Cstrong\u003E\u003C\u002Fstrong\u003E, \u003Cb\u003E\u003C\u002Fb\u003E - жирный ширифт*\u003Cbr\u003E\u003Cem\u003E\u003C\u002Fem\u003E, \u003Ci\u003E\u003C\u002Fi\u003E - курсив\u003Cbr\u003E\u003Ca\u003E\u003C\u002Fa\u003E - ссылка\u003Cbr\u003E\u003Cimg \u002F\u003E - изображение\u003Cbr\u003EИ т.д.\u003Cbr\u003E","\u003Cp\u003EHTML. Блочные элементы\u003Cbr\u003E\u003Cp\u003EРасполагаются по вертикали друг за другом в новой строке\u003Cbr\u003EПо ширине занимают всю строку или доступное пространство\u003Cbr\u003EМожно задать ширину и высоту\u003Cbr\u003EМожно вкладывать другие блочные элементы\u003Cbr\u003EИспользуются для выделения блоков текста (заголовок, абзац и т.д.) и для форматирования структуры документа\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EHTML. Блочные элементы\u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E\u003C\u002Ftable\u003E - вывод таблицы \u003Cbr\u003E\u003Cdiv\u003E\u003C\u002Fdiv\u003E - создание блока\u003Cbr\u003E\u003Ch1\u003E\u003C\u002Fh1\u003E - заголовок\u003Cbr\u003E\u003Cp\u003E\u003C\u002Fp\u003E - абзац\u003Cbr\u003E\u003Cul\u003E\u003C\u002Ful\u003E - маркированный список\u003Cbr\u003EИ т.д.\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 3.2 Final\u002F\u002FEN\"\u003E - описывает версию документа\u003Cbr\u003E\u003Chtml\u003E - открывает документ\u003Cbr\u003E\u003Chead\u003E\u003C\u002Fhead\u003E - «заголовок»\u003Cbr\u003E\u003Cbody\u003E\u003C\u002Fbody\u003E - «тело»\u003Cbr\u003E\u003C\u002Fhtml\u003E - закрывает документ\u003Cbr\u003E","\u003Cp\u003E\u003Chead\u003E\u003C\u002Fhead\u003E содержит\u003Cbr\u003E\u003Cp\u003EТехническую информацию о документе (напр. Кодировку)\u003Cbr\u003EНазвание документа (\u003Ctitle\u003E\u003C\u002Ftitle\u003E) \u003Cbr\u003EСтили или ссылку на стили\u003Cbr\u003EМета-теги (например, ключевые слова)\u003Cbr\u003EРазличные скрипты (javascript, счётчики посещаемости и т.д.)\u003Cbr\u003EОсновная функция – описание документа\u003Cbr\u003E","\u003Cp\u003E\u003Cbody\u003E\u003C\u002Fbody\u003E содержит\u003Cbr\u003E\u003Cp\u003EРазметку страницы\u003Cbr\u003EКонтент, содержание документа\u003Cbr\u003EОсновная функция – вывод информации на экран\u003Cbr\u003E","\u003Cp\u003EВерсии HTML\u003Cbr\u003E\u003Cp\u003EHTML 1.0 - ~85-91\u003Cbr\u003EHTML 2.0 – 22.09.1995\u003Cbr\u003EHTML 3.2 – 14.01.1997\u003Cbr\u003EHTML 4.0 – 18.12.1997\u003Cbr\u003EHTML 4.01 – 24.12.1999\u003Cbr\u003EHTML 5.0 – 28.10.2014\u003Cbr\u003E","\u003Cp\u003EWorld Wide Web Consortium\u003Cbr\u003E","\u003Cp\u003ECSS\u003Cbr\u003E\u003Cp\u003ECascading Style Sheets или каскадные таблицы стилей\u003Cbr\u003EЯзык описания внешнего вида документа\u003Cbr\u003EОсновная функция: описание внешнего вида, визуального представления элементов страницы, т.е. физической разметки\u003Cbr\u003EТем самым, с помощью CSS удалось разделить логическую и визуальную структуры документа\u003Cbr\u003E","\u003Cp\u003EВерсии CSS\u003Cbr\u003E\u003Cp\u003ECSS1 – 17.12.1996 – выравнивание, габариты, отступы, параметры шрифтов, цвета, \u003Cbr\u003ECSS2 – 12.05.1998 – блочная вёрстка, виды позиционирования, вид устройства, расширенные селекторы, динамическое содержимое и т.д.\u003Cbr\u003ECSS2.1 – 7.06.2011 – в основном – исправление ошибок\u003Cbr\u003ECSS3 – 2011-2014 и сейчас дорабаотывается\u003Cbr\u003E","\u003Cp\u003EСинтаксис CSS\u003Cbr\u003E","\u003Cp\u003EСелекторы CSS\u003Cbr\u003E\u003Cp\u003EУниверсальный\u003Cbr\u003EСелекторы тегов \u003Cbr\u003EСелекторы атрибутов\u003Cbr\u003EКлассы\u003Cbr\u003EИдентификаторы\u003Cbr\u003EПсевдокласс\u003Cbr\u003EПсевдоэлемент\u003Cbr\u003E\u003Cp\u003E* {описание}\u003Cbr\u003Eтег {…}\u003Cbr\u003E[атрибут тега] {…}\u003Cbr\u003E.класс {…}\u003Cbr\u003E#id {…}\u003Cbr\u003Eселектор: псевдокласс {…}\u003Cbr\u003Eтак же\u003Cbr\u003E","\u003Cp\u003EСелекторы CSS: селекторы тегов\u003Cbr\u003E\u003Cp\u003EВ CSS:\u003Cbr\u003Eнаименование тега {свойство:значение;}\u003Cbr\u003EВ HTML:\u003Cbr\u003E\u003Cтег\u003E содержимое \u003C\u002Fтег\u003E\u003Cbr\u003E","\u003Cp\u003EСелекторы CSS: классы\u003Cbr\u003E\u003Cp\u003EВ CSS:\u003Cbr\u003E.название класса {свойство:значение;}\u003Cbr\u003EВ HTML:\u003Cbr\u003E\u003Cтег class=“название класса”\u003E содержимое \u003C\u002Fтег\u003E\u003Cbr\u003EКогда нужно определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега\u003Cbr\u003E","\u003Cp\u003EСелекторы CSS: идентификаторы\u003Cbr\u003E\u003Cp\u003EВ CSS:\u003Cbr\u003E#идентификатор {свойство:значение;}\u003Cbr\u003EВ HTML:\u003Cbr\u003E\u003Cтег id=“идентификатор”\u003E содержимое \u003C\u002Fтег\u003E\u003Cbr\u003EКогда нужно определить стиль для индивидуального элемента веб-страницы + для обращения скриптов к данному элементу \u003Cbr\u003E","\u003Cp\u003EСелекторы CSS: псевдоклассы и псевдоэлементы\u003Cbr\u003E\u003Cp\u003Eселектор:псевдокласс(элемент) {свойство:значение;}\u003Cbr\u003EПсевдоклассы: описание свойств элементов, которые могут меняться в зависимости от действий пользователя, а также описание свойств элементов в зависимости от положения в документе.\u003Cbr\u003E:first-child, :last-child, :hover, :focus, :link, :active, :visited, :lang\u003Cbr\u003EПсевдоэлементы: генерация содержимого, которого нет в исходном коде страницы, описание элементов, не определенных в древе документа.\u003Cbr\u003E:before, :after, :first-line, :first-letter\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003EСпособы добавления стилей\u003Cbr\u003E\u003Cp\u003EВнутренние (как атрибут тега)\u003Cbr\u003E\u003Cdiv style=\"font-size: 120%; font-family: monospace; color: #cd66cc\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003EГлобальные стили (в head документа)\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Cstyle\u003E \u003Cbr\u003Eселектор {свойство:значение;}\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003EСвязанные стили (в отдельном файле)\u003Cbr\u003E\u003Clink rel=\"stylesheet\" href=\"адрес файла стилей.css\"\u003E \u003Cbr\u003E","\u003Cp\u003EСвойства CSS\u003Cbr\u003E\u003Cp\u003EПозиционирование блоков: position; left, top, bottom, right; z-index и т.д.\u003Cbr\u003EРазмеры, поля, границы, отступы блочных (и некоторых строчных) элементов: height, width; margin; border; padding; \u003Cbr\u003EОбтекание и обрезка контента: float; clear; overflow;\u003Cbr\u003E","\u003Cp\u003EСвойства CSS\u003Cbr\u003E\u003Cp\u003EОтображение в строке: display;\u003Cbr\u003EФоновое изображение и заливка фона: background, background-image;\u003Cbr\u003EНастройки текста: font-family, font-size (и т.д.); color, text-decoration;\u003Cbr\u003E","\u003Cp\u003EВерстка\u003Cbr\u003E\u003Cp\u003EПроцесс формирования документа через набор кода или с помощью WYSIWYG-редакторов\u003Cbr\u003EВерстка в веб обычно представляет собой реализацию разработанного дизайна в виде HTML\u002FCSS кода\u003Cbr\u003EСовременная вёрстка должна отвечать стандартам HTML5 и CSS3\u003Cbr\u003E","\u003Cp\u003EВиды вёрстки: табличная вёрстка\u003Cbr\u003E\u003Cp\u003EТаблица состоит из строк и столбцов, которые образуют ячейки\u003Cbr\u003EПри табличной вёрстке модульная сетка (разметка структуры) создается ячейками (строками и столбцами) таблицы \u003Cbr\u003EПозиционирование элементов страницы осуществляется через помещение в ячейки\u003Cbr\u003E","\u003Cp\u003EТабличная вёрстка\u003Cbr\u003E\u003Cp\u003EВ HTML вывод таблицы осуществляется с помощью тега \u003Ctable\u003E. Вложенный тег \u003Ctr\u003E формирует строку таблицы. В неё вкладывается тег \u003Ctd\u003E, который формирует ячейку в данной строке, т.е. столбец.\u003Cbr\u003E\u003Ctable\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 1 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 2 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 3 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 4 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 5 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 6 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003EТабличная вёрстка\u003Cbr\u003E\u003Cp\u003EКоличество столбцов в каждой троке должно быть одинаковым (но можно объединять ячейки по вертикали и горизонтали с помощью атрибутов rowspan=“число” и colspan=“число” тега \u003Ctd\u003E\u003Cbr\u003E\u003Ctable\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd rowspan=\"2\"\u003E Ячейка 1 и 4 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd colspan=\"2\"\u003E Ячейка 2 и 3 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 5 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E Ячейка 6 \u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003EТабличная вёрстка\u003Cbr\u003E\u003Cp\u003EВ атрибутах ячейки (\u003Ctd\u003E\u003C\u002Ftd\u003E) или соответствующем селекторе CSS можно указывать:\u003Cbr\u003EВыравнивание содержимого по горизонтали (align=“”) и вертикали (valign=“”)\u003Cbr\u003EШирину (width=“”) и высоту (height=“”) ячейки. При этом, ячейки обладают одинаковой шириной по столбцу и одинаковой высотой по строке, т.е. зависят друг от друга\u003Cbr\u003E","\u003Cp\u003EТабличная вёрстка\u003Cbr\u003E\u003Cp\u003EВ каждую ячейку можно вкладывать новую таблицу или любой другой блочный элемент\u003Cbr\u003EМожно настраивать различные свойства ячеек (отступы, границы, поля) и вложенных элементов с помощью CSS\u003Cbr\u003E","\u003Cp\u003EТабличная вёрстка: плюсы и минусы\u003Cbr\u003E\u003Cp\u003EПреимущества:\u003Cbr\u003EПростота по сравнению с блочной\u003Cbr\u003EКроссбраузерность\u003Cbr\u003EНедостатки:\u003Cbr\u003EГромоздкий код\u003Cbr\u003EНедостаточная гибкость\u003Cbr\u003E","\u003Cp\u003EВиды вёрстки: блочная вёрстка\u003Cbr\u003E\u003Cp\u003EРазметка страницы осуществляется с помощью универсальных блочных элементов \u003Cdiv\u003E\u003C\u002Fdiv\u003E (слоёв)\u003Cbr\u003EПри этом HTML-код содержит только теги разметки и логического форматирования, а всё визуальное оформление выносится в CSS\u003Cbr\u003EТаблицы используются только для вывода табличных данных\u003Cbr\u003E","\u003Cp\u003EБлочная вёрстка\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E представляет собой прямоугольную область\u003Cbr\u003EБлоку присваивается класс из таблицы CSS\u003Cbr\u003EВ CSS настраивается позиционирование блока, выравнивание относительно других элементов, строчность\\блочность*, поля, отступы, границы, фон, выравнивание и стили содержимого\u003Cbr\u003E","\u003Cp\u003EБлочная вёрстка\u003Cbr\u003E\u003Cp\u003EГабариты каждого блока не зависят от габаритов любого другого\u003Cbr\u003EМожно выводить блоки из потока документа с помощью позиционирования в CSS\u003Cbr\u003EВ \u003Cdiv\u003E можно вкладывать любые строчные или блочные элементы в т.ч. другие \u003Cdiv\u003E\u003Cbr\u003E\u003Cp\u003EБлок 1\u003Cbr\u003E\u003Cp\u003EБлок 2\u003Cbr\u003E\u003Cp\u003EБлок 3\u003Cbr\u003E\u003Cp\u003EБлок 4\u003Cbr\u003E\u003Cp\u003EБлок 5\u003Cbr\u003E\u003Cp\u003EБлок 6\u003Cbr\u003E\u003Cp\u003EБлок 7\u003Cbr\u003E\u003Cp\u003EБлок 9\u003Cbr\u003E\u003Cp\u003EБлок 8\u003Cbr\u003E","\u003Cp\u003EБлочная вёрстка: плюсы и минусы\u003Cbr\u003E\u003Cp\u003EПреимущества:\u003Cbr\u003EБолее компактный код\u003Cbr\u003EНамного больше возможностей, гибкость\u003Cbr\u003EБлоки загружаются быстрее таблиц\u003Cbr\u003EНедостатки:\u003Cbr\u003EТребует больше знаний и навыков\u003Cbr\u003E","\u003Cp\u003E\u003Ctable\u003E против \u003Cdiv\u003E\u003Cbr\u003E","\u003Cp\u003EВиды вёрстки (дизайна)\u003Cbr\u003E\u003Cp\u003EФиксированная\u003Cbr\u003EРезиновая\u003Cbr\u003EАдаптивная\\отзывчивая\u003Cbr\u003E","\u003Cp\u003EФиксированная вёрстка\u003Cbr\u003E\u003Cp\u003EРазмеры всех элементов жестко определены (заданы в пикселях)\u003Cbr\u003EПри изменении разрешения (размера окна браузера), размер элементов в пикселях не меняется\u003Cbr\u003EПростота перевода дизайна в код\u003Cbr\u003EНекорректное отображение при изменении разрешения\u003Cbr\u003E","\u003Cp\u003EФиксированная вёрстка\u003Cbr\u003E","\u003Cp\u003EРезиновая вёрстка\u003Cbr\u003E\u003Cp\u003EРазмеры всех элементов заданы в процентах от разрешения (размера окна)\u003Cbr\u003EПри изменении разрешения (размера окна браузера), размер элементов изменяется пропорционально\u003Cbr\u003EБолее-менее подстраивается под размер экрана\u003Cbr\u003EСложнее корректно реализовать дизайн в коде.\u003Cbr\u003E","\u003Cp\u003EРезиновая вёрстка\u003Cbr\u003E","\u003Cp\u003EАдаптивная вёрстка\u003Cbr\u003E\u003Cp\u003EАдаптируется к набору разрешений (прыгает по контрольным точкам). Размеры элементов указываются в пикселях, при этом значения изменяются в зависимости от разрешения.\u003Cbr\u003EПодстраивается под любое устройство и размер экрана (с нюансами). Позволяет избавиться от «мобильных версий»\u003Cbr\u003EГораздо сложнее фиксированной и резиновой\u003Cbr\u003E","\u003Cp\u003EАдаптивная вёрстка\u003Cbr\u003E","\u003Cp\u003EОтзывчивая вёрстка\u003Cbr\u003E\u003Cp\u003EПриспосабливается к любому разрешению. Размеры элементов указываются в относительных единицах.\u003Cbr\u003EПри изменении разрешения (размера окна браузера), размер элементов и их положение изменяется так, как это необходимо для корректного отображения\u003Cbr\u003EПодстраивается под любое устройство и размер экрана. Позволяет избавиться от «мобильных версий»\u003Cbr\u003EГораздо сложнее фиксированной и резиновой\u003Cbr\u003E","\u003Cp\u003EОтзывчивая вёрстка\u003Cbr\u003E"],href:"\u002Finformatika\u002Fhtml-css-vidy-vyorstki",href_category:"\u002Finformatika",date:1659195199,related:[{id:422714,name:"Проект Эрбий (Erbium) в РФ и странах СНГ",href:"\u002Finformatika\u002Fproekt-erbiy-erbium-v-rf-i",jpg:"jpg\u002F422714"},{id:111372,name:"Құрылымдық схема және ДК құрылғылары",href:"\u002Finformatika\u002Frylymdy-shema-zhne-dk-rylylary",jpg:"jpg\u002F111372"},{id:594293,name:"Современные электронные образовательные ресурсы",href:"\u002Finformatika\u002Fsovremennye-elektronnye-obrazovatelnye-resursy",jpg:"jpg\u002F594293"},{id:372844,name:"Организация ввода и вывода данных. Начала программирования",href:"\u002Finformatika\u002Forganizatsiya-vvoda-i-vyvoda-dannyh-nachala-6",jpg:"jpg\u002F372844"},{id:344079,name:"Программно-аппаратный комплекс для мониторинга и управления освещением в производственных помещениях",href:"\u002Finformatika\u002Fprogrammno-apparatnyy-kompleks-dlya-monitoringa-i",jpg:"jpg\u002F344079"},{id:166732,name:"Компьютер или книга - что лучше",href:"\u002Finformatika\u002Fkompyuter-ili-kniga-chto-luchshe-1",jpg:"jpg\u002F166732"},{id:89197,name:"Тестирование и отладка программных средств",href:"\u002Finformatika\u002Ftestirovanie-i-otladka-programmnyh-sredstv",jpg:"jpg\u002F89197"},{id:155112,name:"Информационная модель лечебно-диагностического процесса",href:"\u002Finformatika\u002Finformatsionnaya-model-lechebno-diagnosticheskogo-protsessa",jpg:"jpg\u002F155112"},{id:209175,name:"Етапи розв'язування прикладних задач",href:"\u002Finformatika\u002Fetapi-rozvyazuvannya-prikladnih-zadach",jpg:"jpg\u002F209175"},{id:310786,name:"Проект Социальные страницы ВКонтакте великих людей",href:"\u002Finformatika\u002Fproekt-sotsialnye-stranitsy-vkontakte-velikih-lyudey",jpg:"jpg\u002F310786"},{id:111455,name:"Пути реализации стратегии развития информационного общества в республике Беларусь",href:"\u002Finformatika\u002Fputi-realizatsii-strategii-razvitiya-informatsionnogo-obshchestva",jpg:"jpg\u002F111455"},{id:235935,name:"Пользователи интернета",href:"\u002Finformatika\u002Fpolzovateli-interneta",jpg:"jpg\u002F235935"},{id:480515,name:"Методическая разработка (презентация) по теме Алгоритм и его свойства",href:"\u002Finformatika\u002Fmetodicheskaya-razrabotka-prezentatsiya-po-teme-algoritm",jpg:"jpg\u002F480515"},{id:103035,name:"Онлайн-СМИ России",href:"\u002Finformatika\u002Fonlayn-smi-rossii",jpg:"jpg\u002F103035"},{id:539786,name:"Типы циклических структур",href:"\u002Finformatika\u002Ftipy-tsiklicheskih-struktur",jpg:"jpg\u002F539786"},{id:579723,name:"Программирование на Python. Урок 16",href:"\u002Finformatika\u002Fprogrammirovanie-na-python-urok-16",jpg:"jpg\u002F579723"},{id:394988,name:"3D-ручка. Как появилась 3D-ручка",href:"\u002Finformatika\u002F3d-ruchka-kak-poyavilas-3d-ruchka",jpg:"jpg\u002F394988"},{id:306751,name:"Обработка информации и алгоритмы",href:"\u002Finformatika\u002Fobrabotka-informatsii-i-algoritmy-3",jpg:"jpg\u002F306751"},{id:358350,name:"Сети TCP \u002F IP. Протокол разрешения адресов. Система DNS",href:"\u002Finformatika\u002Fseti-tcp-ip-protokol-razresheniya-adresov",jpg:"jpg\u002F358350"},{id:585892,name:"Виды внедрения, план внедрения. Стратегии, цели и сценарии внедрения",href:"\u002Finformatika\u002Fvidy-vnedreniya-plan-vnedreniya-strategii-tseli",jpg:"jpg\u002F585892"},{id:262993,name:"Геоинформационные системы",href:"\u002Finformatika\u002Fgeoinformatsionnye-sistemy-3",jpg:"jpg\u002F262993"},{id:188174,name:"Алгоритмы и структуры данных. Слияние-распределение",href:"\u002Finformatika\u002Falgoritmy-i-struktury-dannyh-sliyanie-raspredelenie",jpg:"jpg\u002F188174"},{id:215055,name:"Общие правила оформления текста",href:"\u002Finformatika\u002Fobshchie-pravila-oformleniya-teksta",jpg:"jpg\u002F215055"},{id:377113,name:"Пузырьковая сортировка",href:"\u002Finformatika\u002Fpuzyrkovaya-sortirovka",jpg:"jpg\u002F377113"},{id:348577,name:"Нейронные сети",href:"\u002Finformatika\u002Fneyronnye-seti-11",jpg:"jpg\u002F348577"},{id:371605,name:"Усадьба Прекрасные зори",href:"\u002Finformatika\u002Fusadba-prekrasnye-zori",jpg:"jpg\u002F371605"},{id:597382,name:"Чек-лист проверки технической оптимизации",href:"\u002Finformatika\u002Fchek-list-proverki-tehnicheskoy-optimizatsii",jpg:"jpg\u002F597382"},{id:594883,name:"Знакомство с языком программирования Python",href:"\u002Finformatika\u002Fznakomstvo-s-yazykom-programmirovaniya-python-2",jpg:"jpg\u002F594883"}],navigation:{next:"\u002Funcategorized\u002Fsfery-primeneniya-robotov",next_name:"Сферы применения роботов",prev:"\u002Funcategorized\u002Ftyulevye-i-porternye-tkani",prev_name:"Тюлевые и портьерные ткани"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","HTML. CSS. Виды вёрстки","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) тег

Табличная вёрстка
В каждую ячейку можно вкладывать новую таблицу или любой другой блочный элемент
Можно настраивать различные свойства ячеек (отступы, границы, поля) и вложенных элементов с помощью CSS

Табличная вёрстка: плюсы и минусы
Преимущества:
Простота по сравнению с блочной
Кроссбраузерность
Недостатки:
Громоздкий код
Недостаточная гибкость

Виды вёрстки: блочная вёрстка
Разметка страницы осуществляется с помощью универсальных блочных элементов
(слоёв)
При этом HTML-код содержит только теги разметки и логического форматирования, а всё визуальное оформление выносится в CSS
Таблицы используются только для вывода табличных данных

Блочная вёрстка
представляет собой прямоугольную область
Блоку присваивается класс из таблицы CSS
В CSS настраивается позиционирование блока, выравнивание относительно других элементов, строчность\блочность*, поля, отступы, границы, фон, выравнивание и стили содержимого

Блочная вёрстка
Габариты каждого блока не зависят от габаритов любого другого
Можно выводить блоки из потока документа с помощью позиционирования в CSS
В
можно вкладывать любые строчные или блочные элементы в т.ч. другие
Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
Блок 7
Блок 9
Блок 8

Блочная вёрстка: плюсы и минусы
Преимущества:
Более компактный код
Намного больше возможностей, гибкость
Блоки загружаются быстрее таблиц
Недостатки:
Требует больше знаний и навыков

Табличная вёрстка
Количество столбцов в каждой троке должно быть одинаковым (но можно объединять ячейки по вертикали и горизонтали с помощью атрибутов rowspan=“число” и colspan=“число” тега

Табличная вёрстка
В атрибутах ячейки (

Виды вёрстки (дизайна)
Фиксированная
Резиновая
Адаптивная\отзывчивая

Фиксированная вёрстка
Размеры всех элементов жестко определены (заданы в пикселях)
При изменении разрешения (размера окна браузера), размер элементов в пикселях не меняется
Простота перевода дизайна в код
Некорректное отображение при изменении разрешения

Фиксированная вёрстка

Резиновая вёрстка
Размеры всех элементов заданы в процентах от разрешения (размера окна)
При изменении разрешения (размера окна браузера), размер элементов изменяется пропорционально
Более-менее подстраивается под размер экрана
Сложнее корректно реализовать дизайн в коде.

Резиновая вёрстка

Адаптивная вёрстка
Адаптируется к набору разрешений (прыгает по контрольным точкам). Размеры элементов указываются в пикселях, при этом значения изменяются в зависимости от разрешения.
Подстраивается под любое устройство и размер экрана (с нюансами). Позволяет избавиться от «мобильных версий»
Гораздо сложнее фиксированной и резиновой

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

Отзывчивая вёрстка
Приспосабливается к любому разрешению. Размеры элементов указываются в относительных единицах.
При изменении разрешения (размера окна браузера), размер элементов и их положение изменяется так, как это необходимо для корректного отображения
Подстраивается под любое устройство и размер экрана. Позволяет избавиться от «мобильных версий»
Гораздо сложнее фиксированной и резиновой