Основы HTML и CSS. Списки и таблицы презентация

Содержание

Слайд 2

Списки и таблицы: Структурирование информации на WEB-странице при помощи списков.

Списки и таблицы:

Структурирование информации на WEB-странице при помощи списков. Типы

списков
Таблица и ее элементы
Правила задания размеров для таблицы и ее ячеек. Объединение ячеек. Типичные ошибки при работе с таблицами
Использование таблиц. Макетирование web-страницы с помощью таблиц
Использование вложенных таблиц
Приемы использования таблиц на web-странице
Слайд 3

Маркированный список (unordered list) Сравните первый элемент второй элемент ... последний элемент

Маркированный список (unordered list)

Сравните


  • первый элемент

  • второй элемент

  • ...
  • последний элемент



Слайд 4

Тип маркеров

Тип маркеров

 

Слайд 5

Нумерованный список (ordered list) Сравните первый элемент второй элемент ... последний элемент

Нумерованный список (ordered list)

 

Сравните


  1. первый элемент

  2. второй элемент

  3. ...
  4. последний элемент



Слайд 6

Типы нумерации

Типы нумерации

Слайд 7

Списки определений (definition list) Отдел маркетинга Данный отдел занимается продвижением

Списки определений (definition list)

Отдел маркетинга
Данный отдел занимается продвижением товаров и услуг

Финансовый

отдел
Данный отдел занимается всеми финансовыми операциями

Слайд 8

Вложенные (смешанные) списки Смешанный список НОВОСТЬ ДНЯ Сегодня идет дождь

Вложенные (смешанные) списки

Смешанный список
НОВОСТЬ ДНЯ

  • Сегодня идет дождь
  • Дождь будет идти весь день
    НОВОСТЬ
  • НОЧИ

  • Ночью будет идти дождь
  • Завтра начнется новый день

  • Слайд 9

    Лабораторная работа Создание и использование списков

    Лабораторная работа

    Создание и использование списков

    Слайд 10

    Рисуем таблицу - 3 этапа (HTML 3.2) С о д

    Рисуем таблицу - 3 этапа (HTML 3.2)







    С о д е р

    ж а н и е





















    Слайд 11

    (1,1) (1,2) (2,1) (2,2) (3,1) (3,2) (Не) Простая таблица














    (1,1) (1,2)
    (2,1) (2,2)
    (3,1) (3,2)

    (Не) Простая таблица

    Слайд 12

    Атрибуты элемента TABLE

    Атрибуты элемента TABLE

    Слайд 13

    Атрибуты элемента TR

    Атрибуты элемента TR

    Слайд 14

    Атрибуты элемента TD (TH)

    Атрибуты элемента TD (TH)

    Слайд 15

    Объединение ячеек Столбцы объединены Строки объединены Обычная ячейка, строка 2

    Объединение ячеек














    Столбцы объединены
    Строки объединены Обычная
    ячейка, строка 2
    Обычная ячейка, строка 3
    Строка 4, левая ячейка Строка 4, правая ячейка

    Слайд 16

    Создаем заголовок таблицы Заголовок таблицы ... Атрибуты заголовка: align = top|bottom|left|right valign = top|bottom

    Создаем заголовок таблицы



    ...

    Атрибуты заголовка:
    align = top|bottom|left|right
    valign = top|bottom

    Слайд 17

    Схема отступов и объединения ячеек width colspan rowspan ... ... ... ...

    Схема отступов и объединения ячеек

    width

    colspan

    rowspan





    Слайд 18

    Лабораторная работа Использование colspan и rowspan При необходимости посмотрите файл tables-result.html

    Лабораторная работа

    Использование colspan и rowspan

    При необходимости посмотрите файл tables-result.html

    Слайд 19

    Страничные отступы (варианты)

    Страничные отступы (варианты)

    Слайд 20

    Страничные отступы: 2 колонки   1 колонка 2 колонка   1 колонка 2 колонка

    Страничные отступы: 2 колонки

    Заголовок таблицы
    ...
    ... ...
    ...






     

    1 колонка

    2 колонка








      1 колонка 2 колонка

    Слайд 21

    Таблицы, вложенные друг в друга Вложенные таблицы Строки объединены Строка

    Таблицы, вложенные друг в друга










    Вложенные таблицы
    Строки объединены




    Строка I, Ячейка A Строка I, Ячейка B
    Строка II, Ячейка A Строка II, Ячейка B
    Строка III, Ячейка A Строка III, Ячейка B

    Обычная ячейка, строка 3




    Вложенная таблица
    Всего 2 строки

    Строка 4, правая ячейка

    Слайд 22

    Группируем таблицу по блокам (HTML 4.0) ... ... ... ...

    Группируем таблицу по блокам (HTML 4.0)




    Может быть много tbody блоков. Но все разделы должны содержать одинаковое количество столбцов
    ...
    ...
    ... ...
    ... ...

    Слайд 23

    Группируем таблицу по колонкам ... Атрибуты colgroup: align = center|left|right

    Группируем таблицу по колонкам

    ...

    Атрибуты colgroup:
    align = center|left|right
    valign

    = bottom|middle|top
    width = число|процент
    span = число




    Слайд 24

    Домашняя работа Объединение ячеек и вложенные таблицы

    Домашняя работа

    Объединение ячеек и вложенные таблицы

    Имя файла: Основы-HTML-и-CSS.-Списки-и-таблицы.pptx
    Количество просмотров: 81
    Количество скачиваний: 0