Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
5
Добавлен:
30.05.2015
Размер:
524.44 Кб
Скачать

веб-студия

SEVIDI

разработка веб-сайтов и уроки по созданию сайтов

Урок 10

Создание таблицы

Для изучения возможностей Dreamweaver по созданию таблиц создадим новую веб-страницу.Сохраним ее в папкеabc. Нажмем кнопкуТаблица вкладкиОбщие панелиВставить. При нажатии на кнопку появится диалоговое окноТаблица.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Вполях ввода Строк иСтолбцы вводятся, соответственно количество строк и столбцов. Если мы ошибемся, то количество строк

истолбцов можно добавить или удалить.

Вполе ввода Ширина таблицы задается ширина таблицы в пикселях или процентах от ширины родительского элемента. Поле вводаПоля ячеек служит для задания отступа между границами отдельных ячеек. По умолчанию равен 2 пикселям.

Вполе ввода Толщина границы задается толщина рамки таблицы и ее ячеек в пикселях. По умолчанию толщина рамки таблицы

1

равна 1; если нужно убрать рамку, в поле ввода введем 0.

В поле ввода Интервал ячеек задается отступ между границей ячейки таблицы и ее содержимым в пикселях.

Набор переключателей Заголовок позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключателиНет (нет ни "шапки", ни выделенного первого столбца),Слева (выделенный первый столбец),Сверху ("шапка") иОбе (выделены "шапка" и левый столбец).

Вполе ввода Подпись вводится название таблицы. Это название будет помещеновеб-обозревателемнад таблицей. Раскрывающейся списокВыравнивание подписи позволит задать местоположение и выравнивание названия, если оно задано.

Вобласти редактирования Сводка вводится примечание таблицы. Оно не выводитсявеб-обозревателемна экран.

И так зададим таблице значения, представленные на рисунке и нажмем ОК.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

Вставим в ячейки таблицы какой-нибудьтекст. В ячейку можно вставить другую таблицу. Добавлять строки в таблицу приходится очень часто. Ставим в самую правую ячейку последней строки таблицы текстовой курсор, нажимаем клавишу<Tab>

— и в таблице появилась новая пустая строка. Если новую строку нужно вставить в середину таблицы, делаем следующее. Помещаем текстовой курсор в ячейку строки, над которой нужно вставить новую, и выбираем пункт Вставка выше строку подменюОбъекты таблицы менюВставить.

2

 

 

 

 

 

 

яSevidi

 

 

 

 

 

и

 

 

 

 

д

 

 

 

 

у

 

 

 

 

 

т

 

 

 

 

 

 

с

 

 

 

 

 

 

-

 

 

 

 

 

б

 

 

 

Точно также можно вставить в таблицу новый столбец. Выбираем пункт Вставить столбец слева в подменюОбъекты таблицы

меню Вставка. И т.д. по пунктам.

е

 

 

 

 

 

 

 

 

 

 

В

 

 

 

 

 

Если нужно будет вставить в таблицу сразу несколько строк и столбцов, удобней будет воспользоваться пунктом Вставить строки и столбцы подменюТаблица менюИзменение. После его выбора на экране появится диалоговое окно.

3

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

С помощью переключателей группы Вставить задается элемент таблицы для вставки. ПереключательСтроки задает вставку строк, переключательСтолбцы — столбцов.

Строки и столбцы будут вставлены после нажатия кнопки ОК.

Кроме того, мы можем разделить текущую строку или столбец на несколько. Для этого ставим текстовой курсор в нужную ячейку строки(столбца) и нажимаем кнопку Ячейка панелиСвойства.

4

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

На экране появится диалоговое окно Раз ить ячейку.

 

 

 

е

 

 

 

 

Группа переключателей Разбить яч йку на задает, как будет делиться строка (столбец).

В

 

 

 

 

 

После нажатия кнопки ОК текущая строка (столбец) будут разделены.

После выделения таблицы на охватывающей ее толстой черной рамке, мы увидим давно знакомые нам маркеры изменения размеров. С их помощью мы можем задать размеры таблицы.

5

 

 

 

 

 

 

яSevidi

 

 

 

 

 

и

 

 

 

 

д

 

 

 

 

у

 

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

-

 

 

 

 

б

 

 

 

 

Если потребуется удалить строку, столбец или та лицу, выделяем нужный объект и нажимаем клавишу <Del> или выбрать пункт

е

 

 

 

 

 

Удалить строку (Удалить столбец) подм ню Та лицаменю Изменение.

В

 

 

Форматирование таблиц

 

 

 

Если мы выделим ячейку или просто поставим на нее курсор, редактор свойств позволит нам задать ее параметры.

6

 

 

 

яSevidi

 

 

и

 

д

 

у

 

 

т

 

 

 

с

 

 

 

-

 

 

 

Раскрывающейся списо к По горизонтали позволяет задать горизонтальное выравнивание содержимого ячейки. Аналогичный

е

 

 

 

список По вертикали задает вертикальное выравнивание содержимого ячейки. В поляхШ иВ соответственно ширина и высота

ячейки. Флажок Без переноса, будучи включбнным, запрещает перенос строк внутри ячейки. ФлажокЗаголовок при включении

В

 

 

 

превращает выделенную ячейку в яч йку заголовок. Поле ввода Фон служит для заданияинтернет-адресафонового изображения ячейки, а селектор цветаФон -цветаее фона. Если не то ни другое не задано, будут использоваться параметры фона родительского элемента.

Селектор цвета Граница позволяет задать цвет рамки ячейки.

Для строк предлагается такой же набор параметров, как и для ячеек. Естественно эти параметры применяются не к отдельной ячейке, а ко всей строке.

Вид редактора свойств, после выделения всей таблицы показан на предыдущем рисунке.

Поля Строки иСтолбцы служат для быстрого изменения количества строк и столбцов таблицы. Поле вводаШ служит для задания ширины. В раскрывающемся списке справа выбирается единица измерения: пиксели или проценты. Поле вводаВнутри ячейки задает отступ между границей ячейки и ее содержимым. ПолеМежду ячейками задает отступ между границами находящихся рядом ячеек. В поле вводаГраница задается толщина рамки ячеек в пикселях. Раскрывающейся списокВыровять служит для горизонтального выравнивания таблицы. Поле вводаФоновое служит для заданияинтернет-адресафайла фонового изображения всей таблицы. Селектор цветаЦвет фона задает цвет фона таблицы, селектор цветаЦвет границы задает цвет рамки таблицы.

Кнопка Очистить ширину столбцов удаляет все заданные для ячеек таблицы и самой таблицы значения ширины, а кнопкаОчистить высоты строк -всезаданные значения высоты. Кнопкапозволяет преобразовать относительные значения

7

ширины ячеек в абсолютные. Кнопка выполняет обратное преобразование значений ширины ячеек — из абсолютных в относительные.

Теперь займемся объединением ячеек таблиц. Прежде чем объединить ячейки таблиц их нужно выделить. После этого обратим внимание на редактор свойств. В его левом нижнем углу находится кнопка Ячейки.

С ее помощью производится объединение ячеек.

 

 

 

 

 

яSevidi

 

 

 

 

и

 

 

 

д

 

 

 

у

 

 

 

 

т

 

 

 

 

 

с

 

 

 

 

 

-

 

 

 

 

б

 

 

 

е

 

 

 

 

В

 

 

 

 

 

8