Учебный курс Социальные сервисы Веб 2.0. Модуль 3: различия между версиями
| Строка 1: | Строка 1: | ||
| − | Цель работы: | + | '''Цель работы:''' |
| − | 1. Научиться работать в Вики с таблицами | + | '''1.''' Научиться работать в Вики с таблицами |
| − | 2. Добавить таблицу в визитную карточку участника | + | '''2.''' Добавить таблицу в визитную карточку участника |
| − | 3. Добавить таблицы в статьи | + | '''3.''' Добавить таблицы в статьи |
<center>'''Таблицы в Вики'''</center> | <center>'''Таблицы в Вики'''</center> | ||
| Строка 11: | Строка 11: | ||
Любая таблица в Вики начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание. | Любая таблица в Вики начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание. | ||
| − | Пример: | + | Пример: |
| + | |||
Исходный код таблицы с одной строкой | Исходный код таблицы с одной строкой | ||
| + | |||
{| | {| | ||
|Ячейка 1 | |Ячейка 1 | ||
| Строка 20: | Строка 22: | ||
| − | В Вики это будет выглядеть так | + | В Вики это будет выглядеть так: |
| + | |||
Ячейка 1 Ячейка 2 Ячейка 3 | Ячейка 1 Ячейка 2 Ячейка 3 | ||
Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк. | Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк. | ||
Пример: | Пример: | ||
| + | |||
Исходный код таблицы в две строки | Исходный код таблицы в две строки | ||
| + | |||
{| | {| | ||
|Ячейка 1*1 | |Ячейка 1*1 | ||
| Строка 35: | Строка 40: | ||
|Ячейка 3*2 | |Ячейка 3*2 | ||
|} | |} | ||
| + | |||
В Вики это будет выглядеть так: | В Вики это будет выглядеть так: | ||
| + | |||
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 | Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 | ||
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 | Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 | ||
| + | |||
Таблица в три строки пишется так: | Таблица в три строки пишется так: | ||
| + | |||
{| | {| | ||
|Ячейка 1*1 | |Ячейка 1*1 | ||
| Строка 52: | Строка 61: | ||
|Ячейка 3*3 | |Ячейка 3*3 | ||
|} | |} | ||
| + | |||
Соответственно, в Вики это выглядит так: | Соответственно, в Вики это выглядит так: | ||
| + | |||
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 | Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 | ||
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 | Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 | ||
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3 | Ячейка 1*3 Ячейка 2*3 Ячейка 3*3 | ||
| − | Табличные рамки. Вид рамки описывается в первой строке, сразу после {|. Между ними и атрибутом должен быть пробел. Толщина линий рамки задается атрибутом border=n, где «n» — толщина линии: | + | Табличные рамки. Вид рамки описывается в первой строке, сразу после {|. Между ними и атрибутом должен быть пробел. Толщина линий рамки задается атрибутом border=n, где «n» — толщина линии: |
| + | |||
Пример: | Пример: | ||
| + | |||
Исходный код: Вид в Вики: | Исходный код: Вид в Вики: | ||
{| border=1 | {| border=1 | ||
| Строка 73: | Строка 86: | ||
|Ячейка 3*3 | |Ячейка 3*3 | ||
|} | |} | ||
| + | |||
Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков. | Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков. | ||
| + | |||
Пример: | Пример: | ||
| + | |||
{| border=1 Вид в Вики: | {| border=1 Вид в Вики: | ||
!Первый столбец | !Первый столбец | ||
| Строка 92: | Строка 108: | ||
|Ячейка 3*3 | |Ячейка 3*3 | ||
|} | |} | ||
| − | Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой. | + | |
| + | Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой. | ||
| + | |||
Пример: | Пример: | ||
| + | |||
{| border=1 | {| border=1 | ||
!Первый столбец||Второй столбец||Третий столбец | !Первый столбец||Второй столбец||Третий столбец | ||
| Строка 103: | Строка 122: | ||
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
|} | |} | ||
| + | |||
В Вики это будет выглядеть так: | В Вики это будет выглядеть так: | ||
| Строка 109: | Строка 129: | ||
Вертикальное объединение двух ячеек пишется так: | Вертикальное объединение двух ячеек пишется так: | ||
| + | |||
{| border=1 | {| border=1 | ||
|Ячейка 1 | |Ячейка 1 | ||
| Строка 117: | Строка 138: | ||
|Ячейка 5 | |Ячейка 5 | ||
|} | |} | ||
| + | |||
В Вики это будет выглядеть следующим образом: | В Вики это будет выглядеть следующим образом: | ||
| Строка 122: | Строка 144: | ||
Для объединения по горизонтали используется атрибут colspan=n. | Для объединения по горизонтали используется атрибут colspan=n. | ||
| + | |||
Пример: | Пример: | ||
| + | |||
{| border=1 | {| border=1 | ||
|Ячейка 1 | |Ячейка 1 | ||
| Строка 131: | Строка 155: | ||
|Ячейка 5 | |Ячейка 5 | ||
|} | |} | ||
| + | |||
Вид в Вики: | Вид в Вики: | ||
| − | «Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML: | + | «Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML: |
| − | • для отдельного слова — <font color="#ABCDEF">Teкст</font>; | + | |
| + | • для отдельного слова — <font color="#ABCDEF">Teкст</font>; | ||
| + | |||
• для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm) | • для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm) | ||
| + | |||
Пример: | Пример: | ||
| + | |||
Для "раскраски" текста пишут так: | Для "раскраски" текста пишут так: | ||
| + | |||
{| border=1 | {| border=1 | ||
|Ячейка 1*1 | |Ячейка 1*1 | ||
| Строка 153: | Строка 183: | ||
|Ячейка 3*3 | |Ячейка 3*3 | ||
|} | |} | ||
| + | |||
В Вики это будет выглядеть так: | В Вики это будет выглядеть так: | ||
| Строка 158: | Строка 189: | ||
Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» — индекс цвета в Таблице цветов. | Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» — индекс цвета в Таблице цветов. | ||
| + | |||
Пример: | Пример: | ||
| + | |||
Для «раскраски» одной ячейки пишется так: | Для «раскраски» одной ячейки пишется так: | ||
| + | |||
{| border=1 | {| border=1 | ||
|Ячейка 1*1 | |Ячейка 1*1 | ||
| Строка 173: | Строка 207: | ||
|Ячейка 3*3 | |Ячейка 3*3 | ||
|} | |} | ||
| + | |||
Вид в Вики: | Вид в Вики: | ||
| Строка 178: | Строка 213: | ||
| − | Ширина таблицы и столбцов. Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут width. | + | Ширина таблицы и столбцов. Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут width. |
| + | |||
Пример: | Пример: | ||
| + | |||
{| border=1 width=75% | {| border=1 width=75% | ||
|+Таблица 1 | |+Таблица 1 | ||
| Строка 196: | Строка 233: | ||
|Ячейка 2*4 | |Ячейка 2*4 | ||
|} | |} | ||
| + | |||
Выглядеть это будет так: | Выглядеть это будет так: | ||
| Строка 204: | Строка 242: | ||
С помощью этого же атрибута можно регулировать ширину отдельных столбцов: | С помощью этого же атрибута можно регулировать ширину отдельных столбцов: | ||
| + | + | ||
Пример: | Пример: | ||
| + | |||
{| border=1 width=75% | {| border=1 width=75% | ||
|+Таблица 1 | |+Таблица 1 | ||
| Строка 215: | Строка 255: | ||
|Ячейка 1*6 | |Ячейка 1*6 | ||
|} | |} | ||
| + | |||
Вид в Вики: | Вид в Вики: | ||
Версия 11:17, 11 апреля 2008
Цель работы:
1. Научиться работать в Вики с таблицами
2. Добавить таблицу в визитную карточку участника
3. Добавить таблицы в статьи
Любая таблица в Вики начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание.
Пример:
Исходный код таблицы с одной строкой
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
В Вики это будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3 Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.
Пример:
Исходный код таблицы в две строки
| Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
| Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
В Вики это будет выглядеть так:
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Таблица в три строки пишется так:
| Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
| Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
| Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
Соответственно, в Вики это выглядит так:
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 Ячейка 1*3 Ячейка 2*3 Ячейка 3*3
Табличные рамки. Вид рамки описывается в первой строке, сразу после {|. Между ними и атрибутом должен быть пробел. Толщина линий рамки задается атрибутом border=n, где «n» — толщина линии:
Пример:
Исходный код: Вид в Вики:
| Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
| Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
| Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.
Пример:
| Первый столбец | Второй столбец | Третий столбец |
|---|---|---|
| Первая строчка | Ячейка 2*1 | Ячейка 3*1 |
| Вторая строчка | Ячейка 2*2 | Ячейка 3*2 |
| Третья строчка | Ячейка 2*3 | Ячейка 3*3 |
Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой.
Пример:
| Первый столбец | Второй столбец | Третий столбец |
|---|---|---|
| Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
| Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
| Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
В Вики это будет выглядеть так:
Объединение ячеек. В Вики, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
Вертикальное объединение двух ячеек пишется так:
| Ячейка 1 | Ячейка 2, объединяет два ряда таблицы | Ячейка 3 |
| Ячейка 4 | Ячейка 5 |
В Вики это будет выглядеть следующим образом:
Для объединения по горизонтали используется атрибут colspan=n.
Пример:
| Ячейка 1 | Ячейка 2, объединяет два столбца | |
| Ячейка 3 | Ячейка 4 | Ячейка 5 |
Вид в Вики:
«Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
• для отдельного слова — Teкст;
• для длинного текста —
, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm)
Пример:
Для "раскраски" текста пишут так:
| Ячейка 1*1 | Здесь цветное только одно слово. | Ячейка 3*1 |
| Ячейка 1*2 | Ячейка 2*2 | А здесь выделен цветом длинный-длинный абзац.
|
| Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
В Вики это будет выглядеть так:
Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» — индекс цвета в Таблице цветов.
Пример:
Для «раскраски» одной ячейки пишется так:
| Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
| Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
| Ячейка 1*3 | Ячейка 2*3 | Ячейка 3*3 |
Вид в Вики:
Ширина таблицы и столбцов. Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут width.
Пример:
| Ячейка 1*1 - long - long- long- long- long | Ячейка 1*2 |
| Ячейка 1*3 | Ячейка 1*4 |
| Ячейка 2*1 | Ячейка 2*2 |
| Ячейка 2*3 | Ячейка 2*4 |
Выглядеть это будет так:
С помощью этого же атрибута можно регулировать ширину отдельных столбцов:
+
Пример:
| Ячейка 1*1 - long - long- long- long- long | Ячейка 1*2 - long - long- long- long- long | Ячейка 1*3 - long - long- long- long- long |
| Ячейка 1*4 | Ячейка 1*5 | Ячейка 1*6 |
Вид в Вики:
Задание 1. Найдите на страницах Летописи.ру примеры интересных таблиц (например, Шаблон:ВикиУниверситет). Разберитесь с Вики-кодом в них.
Задание 2. Добавьте в свою визитную карточку участника какую-либо интересную таблицу (свое портфолио, электронную зачетную книжку, календарь важных дат и др.)
Задание 3. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.
