SWMR.narod.ru Главная страница

ГЛАВА 5
Таблицы
Если вам нужно поместить на ограниченном пространстве Web -страницы множество цифровых (и не только цифровых) данных, нет лучшего средства, чем таблица. Если вам необходимо создать красивый список, снова на помощь приходит таблица. Если вам требуется точно позиционировать текст и графику относительно друг друга, опять же незаменима таблица. Таблицы заполонили Web -документы. И немудрено: при нескольких не слишком значительных недостатках они обладают массой достоинств.
Без таблиц в Web -дизайне никуда. Таблицы с разноцветными ячейками, с границами и без границ, таблицы, вложенные друг в друга, таблицы с невидимыми границами приходят на помощь, когда Web -дизайнеру нужно сделать что-либо отличное от простого "потока" текста, "разбавленного" рисунками. Но — странная ирония судьбы и высоколобых разработчиков языка HTML — стандартизированы они были совсем недавно. А это значит, что раньше, если Web -дизайнеру требовалось поместить на страницу табличные данные, он прибегал к тексту фиксированного формата. Помните старинные текстовые редакторы для MS - DOS : Лексикон, "Слово и дело", MiltiEdit ? Помните, как там делались таблицы? Вот это и есть текст с фиксированным форматированием.
Но эти времена давно в прошлом. Сейчас же стандарт HTML предлагает Web -дизайнерам мощнейшие средства создания таблиц любой сложности. Главное — не запутаться в нагромождении строк и ячеек, но это уже про-шема не HTML .
Создавать таблицы, вводя HTML -код вручную, очень трудоемко. Dreamreaver значительно облегчает труд Web -дизайнера, позволяя вставить в текст аблицу несколькими щелчками мыши. Точно так же просто изменить войства как самой таблицы, так и любой ее строки или ячейки. И уж сосем просто размещать в ячейках таблицы нужное содержимое: текст, графику, другие таблицы и все, чем богат HTML и что придет в голову Web -дизайнеру.
В этой главе мы рассмотрим основные моменты работы с таблицами. Мы научимся их создавать, форматировать, размещать в них полезное содержимое, работать с ячейками и рассмотрим все их достоинства и недостатки. Но сначала давайте познакомимся с доисторическим, т. е. "дотабличным" периодом в истории HTML . А именно, выясним (или вспомним), что такое текст фиксированного формата и чем он может быть нам полезен.
Текст фиксированного формата
Как Web -обозреватель выводит на Web -страницу текст? На самом деле, здесь нет ничего сложного. Он придерживается нескольких простых правил, которые вам стоит узнать:
C имволы возврата каретки преобразуются в пробелы. Строка обрывается только тогда, когда встречается тег конца абзаца или разрыва ;
Любое количество последовательно стоящих пробелов преобразуется в один пробел.
Текст заполняет по ширине все доступное пространство родительского элемента (страницы, абзаца и т. п.). Внутри одного абзаца строки будут иметь примерно одинаковую длину с учетом переносов.
Эти правила, которым следует каждый Web -обозреватель и которые закреплены в стандартах HTML , помогают устранить последствия некоторых ошибок Web -дизайнера. Например, следуя им, Web -обозреватель игнорирует; дублирующиеся пробелы — настоящий бич современной полиграфии. Однако, если вам нужно поместить на странице текст фигурной формы, отформатированный с помощью пробелов и возвратов каретки, лучше сразу откажитесь от этой идеи.
Или прибегните к тексту фиксированного формата. Рассмотрим такой HTML - код:
<HTML>
<HEAD>
<ТITLE> Фигурный текст </ТITLE>
</HEAD>
<BODY>

\ хххххх \
\ хххххх \
\ хххххх \
\ хххххх \
\ хххххх \
\ хххххх \

</BODY>
</ HTML>
Наберите этот текст в любом текстовом редакторе (можно и в Dreamweaver в режиме отображения кода), сохраните его в файле под именем 5.1.htm и откройте в Web -обозревателе.
Web -обозреватель прекрасно знает свое дело. Ему нужно только правильно поставить задачу — и он ее решит.
Так вы поняли, что такое текст фиксированного формата? Все, что находится внутри парного тега < pre >, Web -обозревателем переносится на страницу
Да уж, мягко говоря, не то... Но не надо ругать Web -обозреватель: он всего лишь программа, следующая заложенному в ней алгоритму. Давайте сделаем лучше. Заменим теги и на < pre > и </ pre >, соответственно. Полученный файл сохраним под именем 5.2.htm и откроем в Web - обозревателе. Web-обозреватель прекрасно знает свое дело.Ему нужно только правильно поставить задачу - и он ее решит.
Так вы поняли,что такое текст фиксированного формата? Все,что находится внутри парного тега <PRE> ,Web-обозревателем переносится на страницу
без всяких изменений. Кроме того, такой текст выводится моноширинным шрифтом (шрифтом, символы которого имеют одинаковую ширину), а не пропорциональным, как обычно (символы пропорционального шрифта имеют разную ширину). Поэтому он выглядит, как в старые добрые времена MS - DOS . (Если вы, конечно, помните эти времена...)
А можно ли сделать такое в Dreamweaver ? Конечно! Для этого просто наберите первую строку текста, который вы хотите превратить в текст фиксировануого формата, и:
Либо выберите пункт Preformatted в раскрывающемся списке Format редактора свойств;
Либо выберите пункт Preformatted Text в подменю Paragraph Format меню Text;
Либо выберите пункт Preformatted Text в подменю Paragraph Format контекстного меню.
Вот и все.
В тексте с фиксированным форматированием действуют все теги HTML Например, вы можете раскрасить такой текст в разные цвета, поместить в нем изображение или гиперссылку, как и в обычном тексте.
Выше мы говорили о таблицах. С помощью текста фиксированного формата они создаются очень просто, хотя и трудоемко. Взгляните, например, на такой код
<PRE>
+ ---- + --------------------------- + -------------------- +
! №№ ! Проект ! Закончен ? !
+ ---- + --------------------------- + -------------------- +
! 1 ! Свой домашний сайт ! Да !
+ ---- + --------------------------- + -------------------- +
! 2 !Сайт своей любимой кошки ! нет кошка убежала !
+ ---- + --------------------------- + -------------------- +
</PRE>
Вы можете сохранить его в HTML -файле и загрузить в Web -обозревателе. Даже несмотря на отсутствие тегов < html >, < head > и < body >, он будет нормально отображаться. Да, это таблица, хотя и корявая. Именно такие таблицы были в ходу, когда HTML еще не имел инструментов для построения настоящих таблиц, и Web -дизайнерам приходилось ломать голову, как сделать "таблицу без таблицы".
Зачем мы все это рассматриваем? Ведь это, фактически, устаревший подход. Может быть и устаревший, но в некоторых случаях весьма актуальный. В частности, если вы имеете много текстовых файлов и хотите опубликовать их в Интернете, но не желаете заниматься трудоемким HTML -форматированием, то самый лучший вариант — заключить их содержимое в теги < pre >. Так поступает Максим Мошков, когда выкладывает в свою интернет-библиотеку новые книги.
Простые таблицы
Ну все, пора переходить к настоящим таблицам. Хватит с нас корявого текста фиксированного формата!
Создание таблиц
Сначала, как обычно, создадим новую Web -страницу.
Пустую таблицу создать проще всего, нажав кнопку Insert Table вкладки Common панели объектов. Также вы можете выбрать пункт Table меню Insert или нажать комбинацию клавиш
< Ctrl >+< Alt >+< T >. В любом случае на экране появится диалоговое окно Insert Table .
В полях ввода Rows и Columns вводится, соответственно, количество строк и столбцов создаваемой таблицы. Если вы ошибетесь и введете большее или меньшее количество строк или столбцов, не беда — вы всегда сможете добавить их или удалить.
В поле ввода Width задается ширина таблицы. Возможно задание ширины как в пикселах, так и в процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, вы должны будете выбрать пункт Percent (проценты) или Pixels (пикселы).
В поле ввода Border задается толщина границ таблицы в пикселах. По умолчанию она равна 1; вы можете ввести 0, чтобы убрать границы совсем
В поле ввода Cell Padding задается расстояние между границей ячейки таблицы и ее содержимым в пикселах. По умолчанию оно равно 1.
Аналогично, поле ввода Cell Spacing служит для задания расстояния между границами отдельных ячеек. По умолчанию оно равно 2.
Изменяя значения полей ввода Cell Padding и Cell Spacing , можно получить интересные эффекты, например огромные промежутки между границами ячеек или полупустые ячейки, в самом центре которых съежился небольшой текст. Обычно такие эффекты используют в декоративных таблицах.
Задав значения в полях ввода, нажмите кнопку ОК. Мы не будем говорить, что именно вам нужно вводить — поэкспериментируйте сами. Так или иначе, наша первая таблица будет чисто учебной. Во всяком случае, у вас должно получиться. Сохраните эту таблицу в файле 5.3.htm .
Теперь поставьте текстовый курсор в любую ячейку таблицы и наберите какойнибудь текст. Повторите то же самое с любыми другими ячейками.
В одну из ячеек можете вставить графическое изображение из тех, что мы использовали в предыдущих занятиях.
Вы даже можете вставить в ячейку таблицы другую таблицу. Попробуйте — и это получится!
Кстати, даже если вы задали толщину границ таблицы равной нулю, Dreamweaver все равно будет отображать тонкую штриховую линию, чтобы помочь вам не потерять таблицу. Если эта граница вам мешает, и вы уверены, что справитесь без нее, отключите пункт-выключатель Table Borders подменю Visual Aids меню Views . Чтобы вернуть границы назад, просто включите этот пункт.

1 2 3 4 5 6 7 8 9 10

Вверх


Copyright© Бронников М.В 2004г. Все вопросы комментарии направляйте по адресу SWMR@narod.ru