-
Если вам нужно поместить на ограниченном пространстве Web-страницы множество цифровых (и не только цифровых) данных, нет лучшего средства, чем таблица. Если вам необходимо создать красивый список, снова на помощь приходит таблица.
-
Как Web-обозреватель выводит на Web-страницу текст? На самом деле, здесь нет ничего сложного. Он придерживается нескольких простых правил, которые вам стоит узнать: | символы возврата каретки преобразуются в пробелы.
-
Ну все, пора переходить к настоящим таблицам. Хватит с нас корявого текста фиксированного формата! | Сначала, как обычно, создадим новую Web-страницу. | Пустую таблицу создать проще всего, нажав кнопку Insert Table (рис. 5.3) вкладки Common панели объектов (см. рис. 4.3).
-
Измените размер окна документа Dreamweaver, в котором находится наша таблица. Заметьте, как изменяется ширина таблицы, а все потому, что она задана относительно ширины родителя, в нашем случае окна. Если бы мы задали фиксированную ширину таблицы в пикселах, она бы не изменилась.
-
Обычно после рассмотрения создания какого-либо элемента страницы мы рассказываем о тегах HTML, с помощью которых он создается. Теперь пришла пора выяснить, с помощью каких тегов формируется таблица HTML. Итак, она формируется в четыре этапа. Сейчас мы их рассмотрим.
-
Ну вот, как работать с таблицами, мы разобрались. Теперь пора изучить средства, предлагаемые HTML для форматирования таблиц. Но сначала нужно выяснить, как выделить в окне документа Dreamweaver нужный элемент нашей таблицы. | Обратимся к Dreamweaver, а именно к нашей учебной страничке 5.3.htm.
-
Чтобы добраться до параметров ячейки, совсем не обязательно ее выделять. Просто поставьте в нее текстовый курсор, и редактор свойств тотчас предложит вам задать ее параметры (рис. 5.11). | Рис. 5.11. Вид редактора свойств при выделенной ячейке таблицы | Как видите, уже знакомые нам элементы управления, находящиеся в верхней части редактора свойств, позволяют задать параметры текста.
-
Для строк предлагается такой же набор параметров, как и для ячеек (см. рис. 5.11). Естественно, все эти свойства применяются не к отдельной ячейке, а ко всей строке. Мы с вами не будем их подробно рассматривать, обратим внимание только на следующие замечания.
-
Вид редактора свойств при выделенной таблице показан на рис. 5.15. Как видите, набор параметров здесь сильно отличается от набора параметров ячеек и строк. И это не удивительно. | Рис. 5.15. Вид редактора свойств при выделенной таблице | Сначала поговорим о знакомом.
-
Ко всему вышесказанному можно добавить, что Dreamweaver предлагает на выбор множество предопределенных форматов таблиц и возможность быстро "подогнать" ту или иную схему под свои нужды. Концепция форматов таблиц схожа с концепцией предопределенных цветовых схем, рассмотренных нами в главе 3 – они тоже созданы профессиональными дизайнерами с целью помочь начинающим пользователям.
-
Очень часто бывает необходимо отсортировать таблицу по значению одного или двух столбцов (более сложные сортировки по множеству столбцов встречаются значительно реже). Это случается, когда пользователь создает таблицу и вводит в нее данные из какого-то небрежно составленного документа или даже множества таких документов.
-
Да, конечно, создавать "с нуля" таблицы в Dreamweaver проще простого. Но что делать, если нужно поместить на Web-страницу таблицу, созданную в другой программе? Как Dreamweaver поможет нам в данном случае? | Поможет, и еще как!
-
Мы научились работать с таблицами и их составными частями. Вы можете подумать, что это все. Отнюдь! Мы еще не рассмотрели такое мощное средство, как слияние ячеек. | Что это такое, проще всего объяснить на примере. | Предположим, у нас есть следующая таблица (рис. 5.22).
-
Выше мы говорили, что способ, принятый в HTML для формирования таблиц, исключительно гибок. Добавление строк с новыми данными в таблицу выполняется исключительно просто, даже если вы работаете непосредственно с HTML-кодом; точно так же просто можно удалить ненужные строки.
-
Пожалуй, текст в рамке – самое простое, что можно сделать с использованием таблиц. С помощью таблицы Web-дизайнеры с легкостью обходят ограничения HTML в форматировании текстовых абзацев. (Во всяком случае, рамку вокруг абзаца штатными средствами HTML вы не сделаете.) | Итак, для страницы со списком увлечений мы хотим создать красивый заголовок с рамкой вокруг него, не используя при этом графику.
-
Аппетит приходит во время еды. Нам уже кажется, что текст в обычной цветной рамке – слишком простенькое украшение для нашей странички. Мы хотим чего-нибудь покрасивее, посложнее, позабавнее. | Давайте сделаем все тот же текст в рамке. Но не в простой рамке, а в графической, т. е.
-
Следующий интересный прием, помогающий немного оживить Web-страницу, – это размещение текста с отступами слева и (или) справа. Иногда слева, справа, сверху и (или) снизу помещают линейки, черные или цветные.
-
Уже было сказано, что работа Web-дизайнера – по большей части не наука (здесь вернее сказать – технология), а искусство (а зачастую – просто шаманизм). И, как в любом искусстве, здесь нет готовых путей решения той или иной проблемы.
-
Теперь поговорим еще об одном применении таблиц. А именно о составных изображениях. | Предположим, вы создали, получили в подарок от знакомого художника или нашли в Сети красивую картину. И теперь хотите поместить ее на своей странице. Конечно, вы уже узнали, как это делается, в главе 4.
-
Напоследок давайте поговорим о том, какие проблемы подстерегают Web-дизайнера, решившего использовать таблицы, и как они преодолеваются. | Итак, поговорим о недостатках таблиц… Да, у HTML-таблиц есть серьезные недостатки. Что ж, в мире нет ничего совершенного!.. | О первом недостатке уже говорилось.
-
А сейчас пора вплотную заняться Navigator. | Вы уже заметили, что старые версии этой программы отличаются весьма странным поведением. Мало того, что они зачастую некорректно отображают даже абсолютно правильный с точки зрения стандартов HTML-код, так еще и содержат множество ошибок, с некоторыми из них вы уже познакомились и научились их обходить.