Adobe Dreamweaver – работаем с таблицами

Запускаем программу Adobe Dreamweaver, создаем страницу и выбираем Table.

Adobe Dreamweaver

В окне Table, вводим ширину таблицы и нажимаем на кнопку ОК.

Adobe Dreamweaver

И получаем:

Adobe Dreamweaver

Выделяем верхние ячейки, клик + Ctrl, удерживая Shift. Далее для их слияния, нажимаем правую кнопку мыши и выбираем:

Adobe Dreamweaver

Создаем новый сайт.

Adobe Dreamweaver

Вводим имя сайта и идем дальше…

Adobe Dreamweaver

Далее, выбираем:

Adobe Dreamweaver

И по окончании, нажимаем на кнопку: Done.

Adobe Dreamweaver

Далее копируем в папку с сайтом, папку с изображениями, для сайта.

Adobe Dreamweaver

Нажимаем на кнопку Image и выбираем одноименный пункт:

Adobe Dreamweaver

Выбираем изображение и нажимаем на кнопку ОК.

Adobe Dreamweaver

И еще два раза ОК.

Adobe Dreamweaver

Смотрим, что у нас получилось:

Adobe Dreamweaver

Сохраняем страницу как: Ctrl+Shift+S.

Adobe Dreamweaver

Выделяем ячейки, и для добавления колонок, нажимаем правую кнопку мыши и выбираем...

Adobe Dreamweaver

И вставляем в ячейки кнопки, размером 152х30. Но как видно по рисунку в 152х5=760 пикселов, мы не укладываемся…

Adobe Dreamweaver

Убираем бордюр, вбив в свойства таблицы:

Adobe Dreamweaver

Но как видно, фактическая длина таблицы 760 (782) пикселей. Вводим значение 0 в CellPad и CellSpace, а заодно и выравниваем таблицу, по середине, относительно документа: Align > Center.

Adobe Dreamweaver

Меняем цвет заливки фона страницы – кликнув пипеткой по кнопке:

Adobe Dreamweaver

Далее, для вступления изменений в силу, нажимаем последовательно на кнопки:

Adobe Dreamweaver

Смотрим на результат:

Adobe Dreamweaver

Добавляем колонки, вводим туда текст, добавляем разделительную черту 760х3 пикселя:

Adobe Dreamweaver

Можно обойтись и без разделительной черты. Просто выделяем таблицу и добавляем бордюр белого цвета.

Adobe Dreamweaver

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

Adobe Dreamweaver

Копируем текст и добавляем фотографию в ячейку. Выделяем ее и получаем доступ к ее свойствам…

Adobe Dreamweaver

В свойствах – выбираем вариант выравнивания относительно текста:

Adobe Dreamweaver

Отодвигаем изображение от текста:

Adobe Dreamweaver

Выделяем заголовок новости и выравниваем его.

Adobe Dreamweaver

 
Рейтинг@Mail.ru