Учебный курс Социальные сервисы Веб 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*1 - long - long- long- long- long Ячейка 1*2
Ячейка 1*3 Ячейка 1*4
Таблица 2
Ячейка 2*1 Ячейка 2*2
Ячейка 2*3 Ячейка 2*4

Выглядеть это будет так:




С помощью этого же атрибута можно регулировать ширину отдельных столбцов: + Пример:

Таблица 1
Ячейка 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. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.