Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Верстка web-страниц

Содержание

СодержаниеКонструирование таблицы Редактирование содержимого таблицыВложенность таблицТаблицы как средство компоновки Web-страниц
Верстка web-страниц1ТаблицыТитова Ольга ИвановнаМинск, 2017 СодержаниеКонструирование таблицы Редактирование содержимого таблицыВложенность таблицТаблицы как средство компоновки Web-страниц ТаблицаИспользуем таблицы для отображения информационных данных, но не для компоновки элементов веб-страниц:расписание;результаты Таблица Таблица … тег для вставки таблицы в html-документ … тег для обозначения Таблица      содержимое ячейки АтрибутыВАЖНО:Для задания внешнего вида таблицы (свойства форматирования) желательно применять не атрибуты, а стилевые значения Атрибутыbgcolorпозволяет задать цвет для фона таблицыbackgroundпозволяет установить изображение для фона таблицыborder позволяет Атрибутыwidth – позволяет установить ширину таблицы; ширину можно задать в определенных единицах Атрибутыcellpadding –расстояние от края ячейки до ее содержимого;align – выравнивание таблицы (left, Объединение ячеекДля тега :colspan – позволяет «растянуть» ячейку на несколько столбцов (т.е. ПримерКод ПримерОписание стилейРезультат ЗаданиеСоздайте таблицу, аналогично предыдущему примеру, но объедините несколько ячеек по вертикали (объединение по строкам) ЗаданиеЕсть дополнительный набор тегов для работы с таблицами; он позволяет выполнить условную СтилиТот факт, что таблица состоит из нескольких html-тегов, помогает определить более детально, Стили: отступыОтступ – т.е. расстояние между границей элемента и его содержимым;В данном Стили: отступыПримерыtd {	padding-top: 10px;	padding-right: 5px;	padding-bottom: 3px;	padding-left: 5px;} Стили: выравниваниеЧтобы настроить месторасположение содержимого внутри самой ячейки, используются свойства:text-align	- по горизонталиvertical-align	- по вертикали Стили: выравниваниеtext-align	унаследованное свойство, т.е. если вы примените его ко всей таблице, то Стили: выравниваниеvertical-align	не унаследованное свойство, поэтому его нужно применять непосредственно к тем объектам, Стили: границыСвойство border работает и с таблицами, однако есть некоторые особенностиПрименение border Стили: границыУправление промежутками между ячейками таблицыЕсли не указано другое, то по умолчанию Стили: границыУдаление двойных границДаже если убрать промежутки между ячейками, границы, заданные для Стили: границыСкругленные углыЧтобы добавить к ячейкам таблицы (но не к самой таблице) Стили: границыВАЖНО:Если для свойства border-collapse установить значение collapse, то свойство border-spacing работать Стили: строки, столбцыЧередование по цвету строк в таблице – один из распространенных Стили: строки, столбцыМожно усложнять используемые селекторыПример.products tr:nth-of-type(odd) {background-color: red;} .products tr:nth-of-type(even) {background-color: ТаблицаВЕДОМОСТЬ Таблица Анализ задачи: ВЕДОМОСТЬ Создание таблицыШаг 1. Добавляем заголовокВ код:ВедомостьВ стили:.hd{font-size: 20px;font-family: Arial;font-weight: bold;color: #0069b4;text-align: center;} Пример Создание таблицыШаг 2. Каркас таблицыВ код:					В стили:.table{	width:80%; 	border:1px solid black;} Пример Создание таблицыШаг 3. Шапка таблицы (первая строка)В код:	№ п.п.	ФИО	Оклад	Премия	Всего Создание таблицыШаг 4. Шапка таблицы (вторая строка)В код:	%	СуммаВ стили:.tableHead{	background-color:#ccccff;	text-align:center;} Пример Создание таблицыШаг 5. Данные таблицыВ код:	 1 	 Иванов И.И. 	 550 Пример Создание таблицыШаг 6. ИтогоВ код:	  	 	 		 ИТОГО 	 2 Пример Оформление таблицыШаг 1. Выравниваем таблицу по центру; к уже имеющемуся описанию стилей Пример Оформление таблицыШаг 2. Выставляем отступы и рамки у ячеекВ стили:td{	padding: 5px; 	border: 1px solid black;} Пример Оформление таблицыШаг 3. Убираем отступы между ячейками. Добавим в описание стилей:		padding:0;		border-collapse: collapse;В ПримечаниеЗначение collapse - соединяет рамки , склеивая ячейки таблицы.Значение separate - наоборот, формирует рамки отдельно для Пример Оформление таблицыШаг 4. Выбираем шрифт и его размерДобавляем к CSS table 	font:16px Пример Оформление таблицыШаг 5. Уберем ненужные линии для пустых ячеекЗададим для пустых ячеек Пример Вложенность таблицВложенная таблицаДопустимо размещать одну таблицу в другой (степень вложенности в пределах разумного) ЗаданиеСоздайте таблицу из 5 строк и 6 столбцов;объедините некоторые из ячеек по Таблицы на web-страницахТабличная верстка web-страниц считается недопустимой.Таблицы используются при верстке только в Спасибо за внимание
Слайды презентации

Слайд 2 Содержание
Конструирование таблицы
Редактирование содержимого таблицы
Вложенность таблиц
Таблицы как средство

СодержаниеКонструирование таблицы Редактирование содержимого таблицыВложенность таблицТаблицы как средство компоновки Web-страниц

компоновки Web-страниц


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

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

для компоновки элементов веб-страниц:

расписание;
результаты мероприятий;
списки воспроизведения музыкальных объектов;
и т.п.


Слайд 4 Таблица






Таблица

Слайд 5 Таблица

тег для вставки таблицы в html-документ


Таблица … тег для вставки таблицы в html-документ … тег для


тег для обозначения строк в таблице



тег

для обозначения ячеек в таблице

Если в таблице отсутствуют объединенные ячейки, то количество ячеек в каждой строке должно быть одинаковым (без учета объединения)



Слайд 6 Таблица


содержимое

Таблица    содержимое ячейки   содержимое ячейки

ячейки
содержимое ячейки




содержимое ячейки
содержимое ячейки




Слайд 7 Атрибуты
ВАЖНО:
Для задания внешнего вида таблицы (свойства форматирования) желательно

АтрибутыВАЖНО:Для задания внешнего вида таблицы (свойства форматирования) желательно применять не атрибуты, а стилевые значения

применять не атрибуты, а стилевые значения




Слайд 8 Атрибуты

bgcolor
позволяет задать цвет для фона таблицы

background
позволяет установить изображение

Атрибутыbgcolorпозволяет задать цвет для фона таблицыbackgroundпозволяет установить изображение для фона таблицыborder

для фона таблицы

border
позволяет установить толщину рамки таблицы




Слайд 9 Атрибуты
width – позволяет установить ширину таблицы; ширину можно

Атрибутыwidth – позволяет установить ширину таблицы; ширину можно задать в определенных

задать в определенных единицах или в % соотношении
width=50% -

таблица займет половину от ширины страницы

height – позволяет установить высоту таблицы;

cellspacing – расстояние между ячейками таблицы; если параметр не задан, то по умолчанию, расстояние будет равно нескольким пикселям;

Слайд 10 Атрибуты
cellpadding –расстояние от края ячейки до ее содержимого;

align

Атрибутыcellpadding –расстояние от края ячейки до ее содержимого;align – выравнивание таблицы

– выравнивание таблицы (left, right, center);

valign – позволяет разместить

текст внизу, вверху или по центру ячейки (bottom, top, middle)

Слайд 11 Объединение ячеек
Для тега :

colspan – позволяет «растянуть» ячейку

Объединение ячеекДля тега :colspan – позволяет «растянуть» ячейку на несколько столбцов

на несколько столбцов (т.е. объединить несколько ячеек по горизонтали)

rowspan

– позволяет «растянуть» ячейку на несколько строк (т.е. объединить несколько ячеек по вертикали)

Слайд 12 Пример
Код

ПримерКод

Слайд 13 Пример
Описание стилей
Результат

ПримерОписание стилейРезультат

Слайд 14 Задание
Создайте таблицу, аналогично предыдущему примеру, но объедините несколько

ЗаданиеСоздайте таблицу, аналогично предыдущему примеру, но объедините несколько ячеек по вертикали (объединение по строкам)

ячеек по вертикали (объединение по строкам)


Слайд 15 Задание
Есть дополнительный набор тегов для работы с таблицами;

ЗаданиеЕсть дополнительный набор тегов для работы с таблицами; он позволяет выполнить

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

к ним определенные стили
Парные теги:
- позволяет выделить заголовок таблицы





Задание: самостоятельно изучите назначение перечисленных тегов

Слайд 16 Стили
Тот факт, что таблица состоит из нескольких html-тегов,

СтилиТот факт, что таблица состоит из нескольких html-тегов, помогает определить более

помогает определить более детально, к какому элементу таблицы применить

то или иное свойство

Слайд 17 Стили: отступы
Отступ – т.е. расстояние между границей элемента

Стили: отступыОтступ – т.е. расстояние между границей элемента и его содержимым;В

и его содержимым;
В данном случае, у таблицы границы –

это края ячейки; следовательно при добавлении отступов образуется свободное пространство вокруг содержимого ячейки

Отступы не применимы к таблице в целом

Примеры
td, th {padding: 10px;}
или
td {padding: 10px 5px 3px 5px;}

Слайд 18 Стили: отступы
Примеры

td {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
}

Стили: отступыПримерыtd {	padding-top: 10px;	padding-right: 5px;	padding-bottom: 3px;	padding-left: 5px;}

Слайд 19 Стили: выравнивание
Чтобы настроить месторасположение содержимого внутри самой ячейки,

Стили: выравниваниеЧтобы настроить месторасположение содержимого внутри самой ячейки, используются свойства:text-align	- по горизонталиvertical-align	- по вертикали

используются свойства:

text-align - по горизонтали
vertical-align - по вертикали


Слайд 20 Стили: выравнивание
text-align унаследованное свойство, т.е. если вы примените его

Стили: выравниваниеtext-align	унаследованное свойство, т.е. если вы примените его ко всей таблице,

ко всей таблице, то оно применится к каждой ячейке,

находящейся внутри

Допустимые значения: left, right, center, justify

Пример
table {text-align: right;}

Слайд 21 Стили: выравнивание
vertical-align не унаследованное свойство, поэтому его нужно применять

Стили: выравниваниеvertical-align	не унаследованное свойство, поэтому его нужно применять непосредственно к тем

непосредственно к тем объектам, которые вам необходимы

Допустимые значения: top,

baseline, middle, bottom
Значение baseline позволит выровнять первую строку каждой ячейки в одной строке

Пример
td {vertical-align: top;}

Слайд 22 Стили: границы
Свойство border работает и с таблицами, однако

Стили: границыСвойство border работает и с таблицами, однако есть некоторые особенностиПрименение

есть некоторые особенности

Применение border к выделит границей всю

таблицу, а не ее ячейки, т.е. граница будет только внешней по периметру

При применении border к ячейкам (например, td {border: 1px solid black; }) образуется видимый интервал между границами соседних ячеек – эффект двойной границы

Слайд 23 Стили: границы
Управление промежутками между ячейками таблицы

Если не указано

Стили: границыУправление промежутками между ячейками таблицыЕсли не указано другое, то по

другое, то по умолчанию браузеры расставляют в таблице интервалы

между ячейками около 2 пикселов – этот промежуток визуально заметен, если для ячеек заданы границы.

Свойство border-spacing может контролировать размер этого промежутка:

table {border-spacing: 0;}

Слайд 24 Стили: границы
Удаление двойных границ

Даже если убрать промежутки между

Стили: границыУдаление двойных границДаже если убрать промежутки между ячейками, границы, заданные

ячейками, границы, заданные для ячеек будут удваиваться за счет

наличия соседних границ – поэтому реальная толщина будет удваиваться от заданного значения в стилях

Свойство border-collapse может принимать два значения (separate, collapse) – в первом варианте промежутки и двойные границы для соседних ячеек, во втором варианте – промежутков нет и для соседних ячеек одна линия
table {border-collapse: collapse;}

Слайд 25 Стили: границы
Скругленные углы

Чтобы добавить к ячейкам таблицы (но

Стили: границыСкругленные углыЧтобы добавить к ячейкам таблицы (но не к самой

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


border-radius

Пример,
td {
border: 1px solid black;
border-radius: 5px;
}

Слайд 26 Стили: границы
ВАЖНО:

Если для свойства border-collapse установить значение collapse,

Стили: границыВАЖНО:Если для свойства border-collapse установить значение collapse, то свойство border-spacing

то свойство border-spacing работать не будет

Если для свойства border-collapse

установить значение collapse, то свойство border-radius работать не будет

Таблице и ячейкам можно назначать свойство box-shadow


Слайд 27 Стили: строки, столбцы
Чередование по цвету строк в таблице

Стили: строки, столбцыЧередование по цвету строк в таблице – один из

– один из распространенных способов увеличить читабельность и воспринимаемость

информации

Используя селектор nth-of-type можно выбрать нужные элементы

Пример
tr:nth-of-type(odd) {background-color: red;}
tr:nth-of-type(even) {background-color: blue;}

добавляет четным и нечетным строкам свой фон

Слайд 28 Стили: строки, столбцы
Можно усложнять используемые селекторы

Пример
.products tr:nth-of-type(odd) {background-color:

Стили: строки, столбцыМожно усложнять используемые селекторыПример.products tr:nth-of-type(odd) {background-color: red;} .products tr:nth-of-type(even)

red;}
.products tr:nth-of-type(even) {background-color: blue;}

добавляет четным и нечетным строкам

свой фон

Слайд 29 Таблица
ВЕДОМОСТЬ

ТаблицаВЕДОМОСТЬ

Слайд 30 Таблица


Анализ задачи:

ВЕДОМОСТЬ

Таблица Анализ задачи: ВЕДОМОСТЬ

Слайд 31 Создание таблицы
Шаг 1. Добавляем заголовок

В код:
Ведомость

В стили:
.hd
{
font-size:

Создание таблицыШаг 1. Добавляем заголовокВ код:ВедомостьВ стили:.hd{font-size: 20px;font-family: Arial;font-weight: bold;color: #0069b4;text-align: center;}

20px;
font-family: Arial;
font-weight: bold;
color: #0069b4;
text-align: center;
}


Слайд 32 Пример

Пример

Слайд 33 Создание таблицы
Шаг 2. Каркас таблицы
В код:







В стили:
.table
{
width:80%;

Создание таблицыШаг 2. Каркас таблицыВ код:					В стили:.table{	width:80%; 	border:1px solid black;}


border:1px solid black;
}


Слайд 34 Пример

Пример

Слайд 35 Создание таблицы
Шаг 3. Шапка таблицы (первая строка)
В код:

Создание таблицыШаг 3. Шапка таблицы (первая строка)В код:	№ п.п.	ФИО	Оклад	Премия	Всего

class=‘tableHead’>
№ п.п.
ФИО
Оклад
Премия
Всего



Слайд 36 Создание таблицы
Шаг 4. Шапка таблицы (вторая строка)
В код:

Создание таблицыШаг 4. Шапка таблицы (вторая строка)В код:	%	СуммаВ стили:.tableHead{	background-color:#ccccff;	text-align:center;}

class=‘tableHead’>
%
Сумма


В стили:
.tableHead
{
background-color:#ccccff;
text-align:center;
}


Слайд 37 Пример

Пример

Слайд 38 Создание таблицы
Шаг 5. Данные таблицы
В код:

1

Создание таблицыШаг 5. Данные таблицыВ код:	 1 	 Иванов И.И.

Иванов И.И.
550 000 р.
50%

275 000 р.
825 000 р.


2
Сидоров Ф.К.
700 000 р.
100%
700 000 р.
1 400 000 р.



Слайд 39 Пример

Пример

Слайд 40 Создание таблицы
Шаг 6. Итого
В код:



Создание таблицыШаг 6. ИтогоВ код:	 	 	 		 ИТОГО 	 2 225 000 р. В стили:.result{	background-color:#ccccff;}



ИТОГО
2 225 000 р.



В стили:
.result
{
background-color:#ccccff;
}

Слайд 41 Пример

Пример

Слайд 42 Оформление таблицы
Шаг 1. Выравниваем таблицу по центру; к

Оформление таблицыШаг 1. Выравниваем таблицу по центру; к уже имеющемуся описанию

уже имеющемуся описанию стилей добавим
margin-left: auto;
margin-right:auto;
и уберем временно границы

(все равно они не совсем такие, как в задании)
В стили:
table
{
width:80%;
margin-left: auto;
margin-right:auto;
border:0;
}

Слайд 43 Пример

Пример

Слайд 44 Оформление таблицы
Шаг 2. Выставляем отступы и рамки у

Оформление таблицыШаг 2. Выставляем отступы и рамки у ячеекВ стили:td{	padding: 5px; 	border: 1px solid black;}

ячеек

В стили:
td
{
padding: 5px;
border: 1px solid black;
}


Слайд 45 Пример

Пример

Слайд 46 Оформление таблицы
Шаг 3. Убираем отступы между ячейками. Добавим

Оформление таблицыШаг 3. Убираем отступы между ячейками. Добавим в описание стилей:		padding:0;		border-collapse:

в описание стилей:
padding:0;
border-collapse: collapse;
В стили:
.table
{
width:80%;
margin-left: auto;
margin-right: auto;
border:0;
padding:0;
border-collapse: collapse;
}


Слайд 47 Примечание
Значение collapse - соединяет рамки , склеивая ячейки таблицы.
Значение separate - наоборот,

ПримечаниеЗначение collapse - соединяет рамки , склеивая ячейки таблицы.Значение separate - наоборот, формирует рамки отдельно

формирует рамки отдельно для каждой ячейки. Это же значение

является значением по умолчанию.

Слайд 48 Пример

Пример

Слайд 49 Оформление таблицы
Шаг 4. Выбираем шрифт и его размер

Добавляем

Оформление таблицыШаг 4. Выбираем шрифт и его размерДобавляем к CSS table

к CSS table
font:16px Verdana;


Добавляем к CSS .tableHead
font-size: 18px;


Слайд 50 Пример

Пример

Слайд 51 Оформление таблицы
Шаг 5. Уберем ненужные линии для пустых

Оформление таблицыШаг 5. Уберем ненужные линии для пустых ячеекЗададим для пустых

ячеек




Зададим для пустых ячеек класс .zero; внесем изменения для

последней строки:
В код:





ИТОГО
2 225 000 р.

В стили:
.zero
{
border-left:0px;
border-right:0px;
border-bottom:0px;
}

Слайд 52 Пример

Пример

Слайд 53 Вложенность таблиц

Вложенная таблица
Допустимо размещать одну таблицу в другой

Вложенность таблицВложенная таблицаДопустимо размещать одну таблицу в другой (степень вложенности в пределах разумного)

(степень вложенности в пределах разумного)


Слайд 54 Задание
Создайте таблицу из 5 строк и 6 столбцов;
объедините

ЗаданиеСоздайте таблицу из 5 строк и 6 столбцов;объедините некоторые из ячеек

некоторые из ячеек по горизонтали / по вертикали;
вставьте в

две произвольные ячейки по таблице 3Х3;
опишите через стили параметры для созданной таблицы таким образом, чтобы по стилю вложенные таблицы отличались от основной таблицы (на ваше усмотрение).

Слайд 55 Таблицы на web-страницах
Табличная верстка web-страниц считается недопустимой.

Таблицы используются

Таблицы на web-страницахТабличная верстка web-страниц считается недопустимой.Таблицы используются при верстке только

при верстке только в обоснованных ситуациях:
- наличие на странице

контента, оформленного в виде таблицы;
- оформление части веб-структуры в виде таблицы и т.п.;

  • Имя файла: verstka-web-stranits.pptx
  • Количество просмотров: 94
  • Количество скачиваний: 0