 |
 |
 |
 |
|
 |
|||||||||||||||||||
 |
 |
||||||||||||||||||
 |
 |
||||||||||||||||||
 |
 |
||||||||||||||||||
 |
Гостевая | ||||||||||||||||||
 |
Статьи | ||||||||||||||||||
 |
Веб-дизайн | ||||||||||||||||||
|
Фотошоп | ||||||||||||||||||
|
Система | ||||||||||||||||||
|
Биос | ||||||||||||||||||
|
|||||||||||||||||||
|
|||||||||||||||||||
Общие советы по web-дизайну2
- Не используйте очень большие таблицы на страничке. Если есть возможность, поделите таблицу на несколько более мелких таблиц или вообще откажитесь от них. Это связано с тем, что содержимое таблицы не выводится на экран до тех пор, пока вся таблица не скачана. И у пользователя создается иллюзия медленной загрузки этой страницы, что нежелательно.
- Если вы используете параметры отступа текста от рабочего края броузера, учтите, что для NN и IE они разные:
- 1) Для Netscape Navigator: "marginwidth" и "marginheight" 2) Для Internet Explorer: "topmargin" и "leftmargin"
Единственный способ корректного распознавания в обоих броузерах разместите все параметры:
<Body Topmargin="0" Leftmargin="0" Marginwidth="0" Marginheight="0">- Отступы внутри ячеек таблицы и между ячейками по умолчанию не равны нулю. Если вы хотите, чтобы содержимое соседних ячеек плотно прилегало друг к другу (например, при размещении в таблице порезанной на части картинки), пропишите в тэге <table> атрибуты cellpadding="0" и cellspacing="0".
- Если вы хотите, чтобы ваша страница верно отображалась в Netscape Navigator'e, никогда не задавайте края и отступы (margin и padding) для тэгов <table> и <td> с помощью CSS. Поведение Navigator'а, столкнувшегося с подобными определениями, непредсказуемо; особенно вероятны ошибки в том случае, если вы используете вложенные таблицы.
- При задании с помощью CSS верхнего и нижнего полей (margin-top и margin-bottom) блоковых элементов (абзацев, заголовков и т.п.) разные браузеры интерпретируют их неодинаково. Internet Explorer как бы "накладывает" смежные поля друг на друга, и в результате расстояние между элементами оказывается равным значению большего поля (например, если для тэга <p> заданы margin-top: 20px; margin-bottom: 10px; то расстояние между двумя абзацами будет равно 20 пикселов). А Netscape Navigator суммирует значения смежных полей, и в приведенном примере расстояние между абзацами будет равно 30 пикселов. Чтобы избежать различий при отображении страниц в разных браузерах, проще всего задавать одно из этих значений равным нулю. Проще всего задавать margin-bottom: 0px; а после последнего абзаца вставлять или пустой абзац (не очень красиво выглядит), или прозрачный gif-распорку нужной высоты. Не нужно делать такие gif-ы разных размеров на все случаи жизни: однопиксельный "спэйсер" прекрасно масштабируется браузером - он же прозрачный :).
- Многие наверняка сталкивались с тем, что при вставке формы ячейка таблицы сильно расползается в высоту, и сверху появляется нежелательный отступ. Чтобы избежать этого, поменяйте вложенность тэгов:
<form>
<td>содержимое ячейки</td>
</form>,
если вся форма умещается в одной ячейке;
или
<form>
<td> содержимое ячейки 1 </td>
<td>содержимое ячейки 2 </td>
<td> содержимое ячейки 3 </td>
</form>,
если вся форма помещается в одной строке;
или же
<form>
<tr>
<td> содержимое ячейки 1 </td>
</tr>
<tr>
<td> содержимое ячейки 2 </td>
</tr>
</form>,
если форма занимает несколько строк. Заметьте: все тэги при такой записи вложены правильно, и нежелательный отступ исчез!- Очень часто встречается такая ситуация: вы задаете точные размеры ячеек таблицы в пикселах, но ячейки, содержащие текст, в браузере все равно расползаются "по-своему". Если у вашей таблицы нет видимых границ, то избавиться от этого поможет вставка дополнительной невидимой строки высотой в 1 пиксел, ячейки которой должны содержать прозрачные gif'ы нужной длины. Таким образом, с помощью gif-ов-распорок вы жестко фиксируете размеры ячеек. Пример кода:
<table width="400" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100" height="1"> <img src="spacer.gif" width="100" height="1"> </td> <td width="220" height="1"> <img src="spacer.gif" width="220" height="1"> </td> <td width="80" height="1"> <img src="spacer.gif" width="80" height="1"> </td> </tr> <tr> <td>Текст ячейки 1</td> <td>Текст ячейки 2</td> <td>Текст ячейки 3</td> </tr> </table>Здесь spacer.gif - это однопиксельный (1х1) прозрачный gif-распорка, масштабируемый вами произвольно. Если вы не забыли вставить его во все ячейки дополнительной строки и везде правильно указали его размеры, то строка высотой в один пиксел будет абсолютно незаметна, зато текстовые ячейки будут иметь строго заданную ширину.- Еще один способ применения прозрачных gif-ов. Наверное, все сталкивались с абсолютной неспособностью Netscape Navigator'a использовать фон-подложку для таблицы. Стоит только указать атрибут background тэга table, как тем же рисунком заливается и каждая ячейка <td> в отдельности. Если в качестве "подложки" используется крупный сложный неповторяющийся рисунок, то результат выглядит отвратительно. Чтобы избежать этого, нужно прописать в качестве background'a всем ячейкам все тот же spacer.gif (название может быть любое, имеется в виду прозрачный gif размерами 1х1). И все - проблема решена, таблица выглядит как надо.
- При оптимизации графики для сайта учтите, что фотографии и "пестрые" изображения лучше сохранять в формате .jpg - они получатся меньшего размера, чем в .gif. А вот картинки с большими площадями одноцветной заливки и с несложными градиентными заливками при сохранении в .jpg выглядят отвратительно - по всей площади однотонных заливок появляется характерный для этого способа сжатия "муар". Такие рисунки надо сохранять в формате .gif.
- Internet Explorer и Netscape Navigator используют разные атрибуты тэга <body> для обозначения ширины полей страницы. По умолчанию в обоих браузерах ширина полей ненулевая, но у каждого - своя. Чтобы страница выглядела одинаково и там, и там, следует подставить в тэг <body> четыре атрибута: leftmargin - ширина левого поля для IE, topmargin - ширина верхнего поля для IE; marginwidth - ширина левого поля для NN, marginheight - ширина верхнего поля для NN.
- Для того, чтобы "собрать" один HTML-документ из нескольких кусков, нужно использовать команды SSI (Server-Side Includes):
<!--#include file="ssi/menu.html" -->
путь к файлу указывается от текущего файла (файла, в котором расположена команда).
<!--#include virtual="/ssi/menu.html" -->
путь к файлу указывается от корня сервера.
Таким образом, например, можно задать меню, одинаковое для всех страниц сервера, и хранить его в отдельном файле. Тогда его изменение отразится на всем сервере и не потребует кропотливой работы по правке всех HTML-страниц Вашего сервера.- У адреса mailto:, применяемого для отправки писем, можно задать и другие опции, крома самого адреса. Например, адрес вида:
<A Href='mailto:name@domain.ru?subject="Заголовок письма"&Body="This body of e-mail">Text</A>
