Все в своих рамках - Компьютерная документация по Windows. Оптимизация Windows.
 Компьютерная документация по Windows. Оптимизация Windows.  Компьютерная документация по Windows. Оптимизация Windows. Поиск
  Здравствуйте  [ Новый пользователь ] Домой  .  Статьи по темам  .  Компьютерная документация  .  Личный кабинет  .  Toп 10  .  Карта сайта  

  Навигация

 Главная   Главная
 Главная   Магазин софта
 Темы новостей   Темы новостей
 Топ 10   Топ 10
 Архив новостей   Архив новостей
 Карта сайта   Карта сайта
 Конструктор   Конструктор
 Обзоры   Обзоры
 Интересное   Интересное
 Рассылка новостей   Рассылка новостей
    Полезные ресурсы
 Пользователи   Пользователи
 Поиск   Поиск
 Написать нам   Написать нам
 Тест скорости   Тест скорости


  Наши темы
Windows 8
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Оптимизация Windows
Обзор софта
Технологии, обзоры
Обзоры компьютеров и комплектующих
Рецензии
Полезные советы
Продвижение сайтов

Новые обзоры

Как заработать на ремонте компьютеров

Переработка отходов электроники

Типовые неисправности I:Phone, Pad, Pod и Macbook

Место для вашей электронной души

Ремонт компьютеров в Москве


Все в своих рамках

Размещено 17/11/2007

Вебмастеру В своё время, только начиная изучать азы web-дизайна, я столкнулся с проблемой смехотворной, но знакомой каждому начинающему web-мастеру: как расставить на странице все элементы так, чтобы они гармонично сочетались и, при этом, не мешали друг другу.
Перейдя с места в карьер, я стал использовать слои, но столкнулся с тем, что не все браузеры их поддерживали, а значит, не могли правильно отформатировать мои страницы. Это заставило меня уделить внимание таблицам.
Опыт, приобретенный в дальнейшем, показал, что таблицы, при всей банальной простоте своего построения, не так уж и просты. Ошибиться в форматировании страницы с помощью таблиц также легко, как и строить их. При этом, ошибки дают о себе знать неожиданно, как бы исподтишка, в разных браузерах по-разному. И приходится тратить массу времени для выявления и устранения ошибки, так, чтобы не породить новую.
Тема данной статьи может вызвать снисходительную улыбку у того, кто считает себя ассом в web-дизайне, тем не менее, я рассчитываю на внимание тех, кто только начал свой путь на этом поприще, или всегда открыт для восприятия накопленного другими опыта.

1. Таблицы как таковые.

Для начала, напомню самое простое: как создается каркас таблицы. Все начинается с пары тегов table: <table></table>. Они имеют свои стандартные параметры align, border, cellspacing, cellpadding, width, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: <tr></tr> Стандартными параметрами для строки являются align и valign, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: <td></td>. С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: thead, th, tbody и tfoot. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в html-документе. В самом простом варианте (с учётом всех вышеуказанных тегов) табличный код выглядит вот так:

<table align=left border=1 cellspacing=0 cellpadding=4 width=100%>
<thead>
<tr align=center valign=top>
<th valign=top colspan=3>Заголовок</th>
</tr>
</thead>
<tbody>
<tr align=center valign=top>
<td align=center valign=top>Ячейка 1</td>
<td align=center valign=top>Ячейка 2</td>
<td align=center valign=top>Ячейка 3</td>
</tr>
</tbody>
<tfo ot>
<tr align=center valign=top>
<td align=center valign=top colspan=3>Заключение</td>
</tr >
</tfoot>
</table>.

Всё это проще простого, скажете Вы. И что здесь сложного и опасного?
Во-первых, опасность в параметрах. Не все параметры стоит применять, так же, как и не все параметры из тех, что следовало бы, мы применяем. Так, например, для тега tr не обязательно применение параметров выравнивания. Однако они обязательны (!) для применения с тегом td. Также типичная ошибка, с тегами tr, td и th может не применяться параметр width, однако он очень важен, так влияет на соответствие расположения ячеек в таблице относительно друг друга и таблицы в целом.
Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "благозвучности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутри-ячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна соответственно быть указанна так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок html), расположенных в ячейках.
Прошу обратить внимание на параметр colspan, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется rowspan. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные html-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры style и class каскадных таблиц стилей. Здесь важно не ошибиться с использованием цветов и стилей, чтобы ваша таблица выглядела гармонично и не колола глаза пестротой и неопрятностью дизайна. Также, нужно учитывать, что netscape navigator по умолчанию использует для оформления рамки таблицы объемную линию. Он может частично "покрасить" её в указанный вами цвет, но не признает "светло-темного" варианта.
Во-вторых, опасность скрывается в самих таблицах. Нередко, создавая дизайн страницы с помощью таблицы, мы забываем, что ячейки намертво связаны друг с другом. Даже colspan/rowspan не позволяют нам освободиться полностью от тех рамок, в которые нас загоняют столбцы и строки таблицы. А ведь дизайн требует, чаще всего, "вольного" расположения элементов на странице.
В этом случае необходимо прибегнуть к "методу Матрёшки", при котором основная таблица является всего лишь носителем других, функционально значимых таблиц, в которых и располагаются элементы дизайна. На примере это выглядит следующим образом:

<table align=center border=1 cellspacing=0 cellpadding=0 width=100%>
<tr align=center valign=top width=100%>
<td valign=top colspan=3>
<!-- Заголовок -- >
<table align=center border=1 bordercolor=red cellspacing=0 cellpadding=0 width=90%>
<tr align=center valign=top width=100%>
<td align=center valign=top width=100%>Таблица в заголовке</td></tr>
</table>
<!-- Конец Заголовка -- >
</td>
</tr>
<tr align=center valign=top width=100%>
<td align=center valign=top width=33%>
<! -- Ячейка 1 -- >
<table align=center border=1 bordercolor=blue cellspacing=0 cellpadding=0 width=90%>
<tr align=center valign=top width=100%>
<td align=center valign=top width=100%> Таблица в средней части</td></tr>
</table>
<! -- Конец Ячейки 1 -->
</td>
<td align=center valign=top width=34%>Ячейка 2</td>
<td align=center valign=top width=33%>Ячейка 3</td>
</tr>
<tr align=center valign=top>
<td align=center valign=top colspan=3>
<!-- Заключение -- >
<table align=center border=1 bordercolor=green cellspacing=0 cellpadding=0 width=90%>
<tr align=center valign=top width=100%>
<td align=center valign=top width=100%>Таблица в конце</td></tr>
</table>
<!-- Конец Заключения -- >
</td>
</tr>
</table>

Такой способ позиционирования элементов на web-странице позволяет размещать объекты относительно произвольно, так как функциональные таблицы "привязаны" только к размеру и формату ячеек, в которых они находятся, но не зависят от размера и формата основной таблицы в целом. Поэтому, при таком позиционировании, не появляется эффекта растягивания, к примеру, колонки с кнопками и ссылками вслед за удлинением центральной колонки web-страницы при вставке в последнюю огромного размера текста.
Кроме того, такой способ влияет, как ни странно, на форматирование абзацев текстовых блоков на странице. Дело в том, что опыт показывает - netscape не понимает выравнивание justify в ячейке таблицы. Для этого в ячейке ему необходим тег <p align=justify>. Но он также отказывается понимать <p align=justify>, если тег находится в ячейке, которая оперирует параметром colspan. "Матрёшка" спасает положение. netscape не переносит формат ячейки на таблицу, расположенную в ней, а рассматривает последнюю как целиком самостоятельный элемент.
В "методе Матрёшки" необходимо быть внимательным к тому, в каких единицах вы задаёте размер таблиц - в процентах или в пикселях - и какое выравнивание вы при этом задали. Опять таки, по причине своенравного характера netscape´а. Иногда, размер внешней таблицы необходимо указывать в пикселях, если вы хотите в последующем указать размеры внутренних таблиц в процентах, а выравнивание обязательно должно быть центральным. Иначе, может случиться так, что внутренняя таблица растянется на огромное расстояние, безобразно исказив внешнюю таблицу и весь дизайн страницы в целом. Вот простой пример:

1) <table align="center" width="100%">
2) <table align="center" width="600">
3) <table align="left" width="600">
4) <table align="left" width="100%">

В первых трёх вариантах, при указанных условиях, ничего страшного не произойдет. Однако в четвёртом, таблицу растянет так, что её правый край вы не сможете увидеть вовсе!

2. Таблицы и графика.

Таблицы являются незаменимым инструментом любого web-дизайнера для размещения графики на странице. Это уже аксиома. Так, используя таблицу, можно сгруппировать отдельные графические файлы, выполняющие самостоятельные функции, в законченное изображение, например заголовок.
Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега <img>. Собственно, когда рисунок расположен в ячейке один и не сопровождается ни текстом, ни какими-либо иными объектами, это не важно. В противном случае, отсутствие выравнивания становится заметным и может испортить весь дизайн.
Дело в том, что тег рисунка (изображения) не наследует параметров выравнивания ячейки, он только подчиняется им, как любой другой объект в ячейке. Поэтому, например, при любом выравнивании в ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите, чтобы текст его "обтекал"? В данном случае, необходимо указать в теге img параметр выравнивания align равный left или right. Тогда изображение будет мягко "окружено" текстом.
Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения vspace и hspace, так как отступы, заданные для ячейки также не наследуются.
В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен.
В этом случае, используются два варианта. Либо в теге <br> используется параметр clear=left или clear=right соответственно, и в этом случае часть текста после тега <br> будет уходить под изображение, а в выравнивании последнего можно использовать свойство middle, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (colspan=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.
Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо <br>, без согласования с размерами ячейки-«носителя», может привести к искажению размеров всей таблицы. Избежать этого, конечно же, можно только согласованием размеров.
Кроме ошибок, часто допускается невнимание к стандартным возможностям табличных тегов. Например, кто из вас серьезно задумывался над возможностями параметров фона, которые, кстати, поддерживаются и строками, и ячейками? Конечно, с помощью bgcolor можно задать цвет таблицы, строки и ячейки, как вместе, так и по отдельности. С помощью background можно вставить изображение в качестве фона. В этом случае оно будет заполнять всю площадь ячейки, строки, таблицы. Тут-то и начинается самое интересное.
Мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром background тега <td>, а другое тегом <img>. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна.
Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...
Конечно же, возможности таблиц не безграничны, но и не до конца раскрыты. Я попробовал описать лишь малую их часть в данной статье и, надеюсь, она принесет вам пользу.
Удачи!

Дмитрий М. Сагайдак

 



Компьютерная документация по Windows Copyright © 2008-2019