1  2  3  4  5  6  7  8  9  10

Выделение элементов таблиц
Обратимся к Dreamweaver , а именно к нашей учебной страничке 5.3.htm . Откроем ее, поместим текстовый курсор в одну из ячеек и посмотрим на секцию тегов. Мы увидим там что-то, похожее на < BODY >< TABLE >< TR >< TD >< P>
Тега < P > может и не быть (это содержимое ячейки), а на тег < body > мы отвлекаться не будем. Обратим внимание на уже знакомые нам теги, задающие отдельные части таблицы.
Щелкнем мышью по тегу < TD >. Ячейка, где стоит текстовый курсор, будет выделена толстой черной рамкой. Теперь вы можете производить какиелибо манипуляции с этой ячейкой, в частности задать значения ее парамитров. Теперь щелкните по тегу < tr > в секции тегов. В этом случае будет выделена вся строка, в которой находится текущая ячейка. Ну и нажатие на тег
< table > выделяет всю таблицу.
Есть и другие способы выделить таблицу, строку или целый столбец сразу.
Чтобы выделить строку, поместите курсор мыши точно на левую границу самой левой ячейки этой строки. Курсор при этом примет вид небольшой черной стрелки, направленной вправо. Если вы щелкнете в этот момент лм вой кнопкой мыши, строка, напротив которой стоит курсор, будет выделе­на. А если вы нажмете левую кнопку мыши и, не отпуская ее, протащите мышь по вертикали, то сможете выделить сразу несколько строк.
Столбец или несколько столбцов можно выделить точно так же, только для! этого курсор мыши помещается на верхнюю границу самой верхней строки таблицы. И принимает он вид черной стрелки, направленной вниз.
Вы можете также выделить одновременно несколько ячеек. Для этого щелкните мышью на ячейке, где начнется ваше выделение, и, не отпуская левой кнопки мыши, протащите ее, пока все нужные ячейки не будут выделены.
Таблицу выделить несколько сложнее. Поместите курсор на внешнюю границу таблицы и немного сдвиньте его "вовне". При этом курсор примет вид четырехконечной стрелки. Если после этого вы щелкнете мышью, таблица будет выделена целиком.
Также разработчики Dreamweaver предусмотрели еще один, самый быстрый способ выделить всю таблицу. Поставьте текстовый курсор в любую ячейку таблицы и выберите пункт Select Table подменю Table меню Modify или контекстного меню или просто нажмите комбинацию клавиш
< Ctrl >+< A >.
После выделения таблицы на ее границе вы увидите уже знакомые вам маркеры изменения размеров. С их помощью вы можете изменить размеры таблицы.
Таким образом вы можете добраться до любой из составных частей вашей таблицы.
А теперь поговорим, что нам предлагает редактор свойств Dreamweaver .
Параметры ячейки
Чтобы добраться до параметров ячейки, совсем не обязательно ее выделять. Просто поставьте в нее текстовый курсор, и редактор свойств тотчас пред­ложит вам задать ее параметры.
Как видите, уже знакомые нам элементы управления, находящиеся в верхней части редактора свойств, позволяют задать параметры текста. Обратимся к нижней части редактора свойств.
Раскрывающийся список Horz позволяет задать горизонтальное выравнивание содержимого ячейки. Здесь доступны четыре пункта:
Default — выравнивание по умолчанию, обычно по левому краю, в некоторых случаях — по центру;
Left — выравнивание по левому краю;
Center — по центру;
Right — по правому краю.
Аналогично раскрывающийся список Vert задает вертикальное выравнивание содержимого ячейки. Здесь доступно пять пунктов:
Default — выравнивание по умолчанию, обычно посередине;
Тор — выравнивание по верху;
Middle — посередине;
Bottom — по низу;
Baseline — по базовой линии.
В полях ввода W и Н вводятся, соответственно, величины ширины ячейки и высоты строки, в которой она находится. Вы можете задать их в пикселах или процентах от ширины таблицы. Во втором случае просто добавьте по­сле цифр знак процента. Если вы ничего не введете в это поле ввода, то ячейка займет все свободное пространство.
Флажок No Wrap запрещает перенос строк внутри ячейки. В этом случае ячейка растягивается по ширине, чтобы вместить весь имеющийся в ней текст, который в этом случае будет "вытянут" в одну строку. Обычно Web -обозреватель растягивает ячейку по ширине только в самом крайнем случае, если в тексте встретится очень длинное слово, а вместо этого растягивает ее по вертикали и переносит текст по строкам. Используйте этот параметр только для декоративных целей и с большой осторожностью, иначе ваша таблица может оказаться столь широкой, что пользователю придется прокручивать ее по горизонтали. А слишком широкие таблицы, не помещающиеся в окне Web -обозревателя, — очень плохой стиль в Web -дизайне.
Флажок Header позволит отформатировать ячейку, в которой находится текстовый курсор, как ячейку заголовка таблицы. Ячейка заголовка отлича­ется от обычной ячейки тем, что ее содержимое выравнивается по центру и отображается жирным шрифтом. Используйте этот параметр только для ячеек первой строки таблицы, содержащей ее "шапку"; в этом случае лучше всего отформатировать таким образом все ячейки строки.
Примечание
Ячейка заголовка таблицы создается с помощью тега < TH >, аналогичного < TD >.Поле ввода Bg служит для задания имени файла фонового изображения ячейки. Селектор цвета Bg (не путать с одноименным полем ввода!) позволяет задать цвет фона ячейки таблицы. Если ни то, ни другое не заданы, будет использован фон страницы.
Как видите, ячейка таблицы может иметь свое фоновое изображение и свой цвет фона, отличные от фонового изображения страницы. Это позволяет Web -дизайнерам создавать очень красивые графические эффекты: текстовые плашки, линейки и т. п. Однако, если вы собираетесь задать фоновое изображение и цвет фона для ячейки таблицы, следуйте рекомендациям, изложенным в главе 3.
Селектор цвета Brdr позволяет задать цвет границы ячейки.
Параметры строки
Для строк предлагается такой же набор параметров, как и для ячеек. Естественно, все эти свойства применяются не к отдельной ячейке, а ко всей строке. Мы с вами не будем их подробно рассматривать,обратим внимание только на следующие замечания.
Если ввести в поле ввода W какое-либо значение и нажать клавишу < Enter >, данное значение будет применено ко всем ячейкам таблицы. Используйте эту особенность, если хотите создать таблицу с ячейками одинаковой ширины. Но если вы зададите некорректное значение (например, 50% для таблицы из десяти столбцов), Web -обозреватель сам решит, какой ширины будет та или иная ячейка.
Если включить флажок No Wrap , ваша таблица может расшириться до невообразимых пределов. Хорошо подумайте, прежде чем включить этот флажок.
Если вы задали фоновое изображение (поле ввода Bg ), цвет фона (селек­тор цвета Bg ) или цвет границы (селектор цвета Brdr ), значения этих па­раметров будут применены ко всем ячейкам выделенной строки. Естест­венно, вы можете изменить любой из названных параметров у любой ячейки.
Однако разные Web -обозреватели поддерживают не все параметры, предлагаемые Dreamweaver для строк и ячеек. И ваша красивая таблица может отобразиться в них совсем не так, как вы планировали. Поэтому чем чаще вы будете справляться в электронном руководстве по HTML , какой атрибут каким тегом поддерживается, и чем чаще будете просматривать вашу страницу в разных Web -обозревателях, тем меньше у вас будет возникать про­блем с совместимостью.
Параметры таблицы
Как видите, набор параметров здесь сильно отличается от набора параметров ячеек и строк. И это не удивительно.Сначала поговорим о знакомом.
Поля ввода Rows и Cols служат для быстрого изменения количества, соответственно, строк и столбцов таблицы.
Если вы задали количество строк или столбцов меньше существующего , лишние строки или столбцы будут удалены без предупреждения .
Поля ввода W и Н служат для задания, соответственно, ширины и высоты таблицы. Эти значения могут быть заданы как в пикселах, так и в процентах относительно ширины или высоты родительского элемента страницы (элемента, в котором находится наша таблица; это может быть сама Web -страница или ячейка другой таблицы). Вам нужно просто выбрать в раскрывающихся списках, находящихся справа от соответствующего поля ввода, значение pixels (пикселы)
или %.
Поле ввода Bg Image служит для задания имени файла фонового изображения для всей таблицы. Селектор цветов Bg Color задает цвет фона таблицы, а селектор цветов Brdr Color — цвет границ таблицы. Все эти установки перекрываются аналогичными установками для ячейки.
Поле ввода CellPad служит для задания расстояния между границей ячейки и ее содержимым в пикселах. Поле ввода CellSpace задает расстояние между границами находящихся рядом ячеек в пикселах. Поле ввода Border служит для задания толщины границы ячейки в пикселах. Все эти параметры мы задавали в диалоговом окне Insert Table .
Теперь рассмотрим параметры, с которыми мы еще не встречались, а если и встречались, то в приложении к другим элементам страницы.
Раскрывающийся список Align , как вы поняли, служит для задания горизонтального выравнивания таблицы.
Доступны четыре значения:
Default — выравнивание по умолчанию, обычно влево;
Left — выравнивание влево;
Center — по центру;
Right — вправо.
Заметьте, что с помощью этого списка задается не выравнивание содержимого таблицы, а выравнивание самой таблицы, т. е. будет ли таблица прижата к левому краю окна или центрирована в нем.
В левом нижнем углу редактора свойств есть группа из шести кнопок, управляющих значениями ширины и высоты ячеек и строк таблицы. Часто бывает так, что после многочисленных экспериментов с установкой размеров ячеек таблицы нужно вернуться к значениям по умолчанию. В самом деле, жестко задавать размеры ячеек стоит лишь в том случае, если вы точно знаете, какого эффекта хотите достичь. В основном, это нужно лишь для дизайнерских изысков, но не для простой публикации таблично организованных данных. В последнем случае лучше все оставить как было — пусть сам Web -обозреватель разбирается, какой ширины сделать каждую ячейку, чтобы таблица поместилась в его окно.
Итак, мы уже порядком намучались, задавая фиксированные размеры ячеек, и теперь хотим стереть их, вернувшись к значениям по умолчанию. Для этого предназначены левая верхняя и левая нижняя кнопки группы. Верхняя удаляет значения ширины ячеек, а нижняя — значения высоты .строк. Попробуйте выделить нашу учебную таблицу и нажать эти кнопки.
При этом будут сброшены также значения ширины и высоты самой таблицы .
Если вы закрыли редактор свойств или предпочитаете пользоваться меню, вы можете достичь того же эффекта, выбрав пункты Clear Cell Heights (стереть высоты строк) или Clear Cell Widths (стереть значения ширины ячеек) подменю Table меню Modify .
Теперь представим такой случай. Вы после долгих мучений выставили зна­чения ширины ячеек и теперь довольны результатом. Но — все эти величины заданы в процентах! И теперь, если размеры таблицы изменятся, все значения ширины ячеек "поплывут", ведь они относительны, а не абсолютны. Как быть в этом случае?
Для этого служит средняя верхняя и средняя нижняя кнопки. Верхняя из них позволяет преобразовать относительные значения ширины ячеек в абсолютные, фиксированные. А нижняя то же самое выполняет с высотами строк. Аналогичного эффекта вы можете достичь, выбрав пункты Convert Widths to Pixels (преобразовать ширину ячеек в пикселы) или Convert Heights to Percents (преобразовать высоты в пикселы) подменю Тable меню Modify .
Правая верхняя и гфавая нижняя кнопки выполняют обратное преобразование — абсолютных значений (пикселы) в относительные (проценты). Опять же, верхняя кнопка проделывает это с шириной ячеек, а нижняя — с высотами строк. Также вы можете воспользоваться пунктами Convert Widths to JPercent (преобразовать ширину ячеек в проценты) или Convert Heights to Percent (преобразовать высоты в проценты) подменю Table меню Modify .

1  2  3  4  5  6  7  8  9  10

Вверх