Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт.
Обучение дизайну. Фото. Гламурные галереи |
|
Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт.
Обучение дизайну. Фото. Гламурные галереи |
|
|
 |
 |
|
 |
|
 |
 |
 Про дизайн и web дизайн |
|
 |
 |
 |
|
 |
 |
 Главная Галереи Дизайна (29) |
 |
 |
|
 |
 |
 |
|
|
|
 |
 |
|
|
|
|
 |
Насколько важен этот вопрос? Если ваша задача - просто разместить информацию на страничке, в том числе и в табличном варианте, то самая обыкновенная таблица со стандартными бордерами устроит и вас, и вашего зрителя.  Это вполне нормальное оформление информации, и во многих случаях его вполне достаточно. И совершенно минимальными средствами. Но если вы решитесь раскрасить даже подобный простенький вариант, то убедитесь, что это совсем не просто по причине разных трактовок свойств таблиц даже самыми распространенными броузерами. Даже более того, если IE показывает ячейки во всей их красе, то NN просто игнорирует пустые ячейки. (При анализе данных свойств таблиц я пользуюсь NN4 и IE4. В билды броузеров вникать вовсе не хочется). 
На таком уровне оформления таблицы все вроде успешно. Но попробуйте убрать бордер и обозначить цвет таблицы. Скажу сразу, что прямо с этого момента вы должны контролировать свою работу обоими броузерами, если хотите добиться адекватного отображения информации. Я буду пользоваться картинками-скриншотиками для избежания путаницы как таковой вообще. 
Чувствуете разницу? Вернее, чем это вам может угрожать... В чем же эта самая разница? Декоративные свойства таблицыДекоративные свойства таблицы описываются параметрами<table border="#" bgcolor="#DEE2EB" cellpadding="#" cellspacing="#"> Где BORDER="#" - эта самая объемная рамочка вокруг таблицы, BGCOLOR="#DEE2EB" - общий цвет фона таблицы, CELLPADDING="#" - отступ между текстом внутри ячейки и границей самой ячейки, CELLSPACING="#" - расстояние в пикселах между ячейками таблицы. Это те параметры, которыми мы можем управлять декором таблицы. Помимо этого существуют еще возможность задания цвета фона ячейки (что важно), расцветка бордера (что, по моему частному мнению, менее важно, ибо я пока еще не видел со вкусом выполненной расцветки бордера). Искомая нами разница в том, что NN все декоративные свойства таблицы передает на свойства ячейки. Поэтому в первом примере видны ячейки (NN), и общий ровный фон (IE). Декоративные свойства ячейкиТут тоже есть возможности, о реальном применении которых речь ниже<TD BGCOLOR="#990000" BORDERCOLOR="#0000CC"> В варианте работы с ячейками NN тоже имеет небольшие особенности. NN3 игнорирует ячейку, в которой отсутствует информация. Для избежания нарушения общего вида таблицы приходится вставлять в ячейку "рыбу", то есть ничего не значащую информацию под цвет фона ячейки. Это может быть символ, или пиксел empty.gif (1х1 прозрачный), да мало ли что можно туда воткнуть незаментно для глаза (но заметное для NN3). Как красиво оформить таблицуРазумеется, понятие красоты в данном случае крепко привязано к визуальному стилю страницы. Но общие принципы таки есть.Ну, во-первых, рамочки. Для IE это просто - задал цвет таблицы (в данном случае это и будет цвет рамочки), обозначил цвет ячеек - и все. Но в NN рамочка исчезнет. Есть очень простой способ - вложенные таблицы. Создаем таблицу с параметрами <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR BGCOLOR="#000000"> <TD> </TD> </TR> </TABLE> И в нее вкладываем нужную нам таблицу с заданными параметрами, но обязательно BORDER="0" CELLSPACING="1". Это и будет таблица с симпатичной черной рамочкой между ячейками, одинаковая и в IE, и в NN.  Если вы цвет рамочки сделаете не черным, а близким к цвету ячеек, но достаточно плотным по тону, то сможете еще больше акцентировать внимание на тексте при благополучном внешнем виде. 
Во-вторых, цветовое решение таблицы. Основным ляпом здесь бывает либо дисгаромния цвета, либо резкие тона ячеек таблицы (либо то и другое в совместном варианте). Лекарством от этого может служить применение в таблицах в качестве фона одного цвета с небольшими тональными различиями.  Такие внешние приемы можно использовать при определении цвета для таблицы в фотошоповской палитре. 
При работе со стандартной системной палитрой лучше всего сразу определиться с цветом, а потом тональным движком справа выбрать оттенки для параметров таблицы. О декоре элементов таблицы пиксельными изображениямиТут опять же NN весьма своеобразно трактует поставленные перед ней задачи. Картинку, подгруженную как БГ в ячейку (Cell) она показывает должным образом, а вот если вы выполните то же самое в отношении всей таблицы - NN покажет ее как отдельное изображение в каждой ячейке. Загруженное в ячейку - покажет в ячейке. Так же прикольно ведет себя IE. Изображение на всю таблицу он так и показывает - на всю таблицу. А на ячейку он вообще чихал (всмысле не показывает картинку в ячейке...). Зато цвет ячейки кладет поверх картинки БГ в таблице (чего NN не делает). В общем есть над чем поломать голову при решении творческих задач.Виктор Вязьминов (MrDeSign) 1999 г. Другие статьи Виктора Вязьминова о дизайне, цвете и композиции: Стиль на веб сайте Создание логотипов Физиологические основы восприятия Психология восприятия пространства Цвет и тон в среде Как работать с цветом Беседы о тоне и цвете Тон и цвет в рекламе Модульная сетка Основные средства и принципы композиции Акценты в композиции Модульные сетки в веб-дизайне Web дизайн таблиц |
|
|
 |
 |
|
|
 |
|
 |
 |
 |
|
|
 |
 |
|
|
|
