Разделы каталога
|
Шаблоны для вашего сайта
[0]
Что это такое и где это взять
|
|
HTML
[6]
Тонкости структуры страниц
|
|
CSS
[1]
Таблицы каскадных стилей - это удобно!
|
Друзья сайта
Статистика
Часто задаваемые вопросы (FAQ) по HTML
<p align="justify">Чтобы страничка не кэшировалась у клиента?</p> <br /> <p align="justify">Для этого нужно прописать в HTTP-response со стороны сервера параметры<br> <br /> Expires, Pragma и Cache-control.</p> <br /> <p align="justify">Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие<br> <br /> <meta>:</p> <br /> <p align="justify"><meta http-equiv="Expires" content="Thu, Jan 1 1970 00:00:00 GMT"><br> <br /> <meta http-equiv="Pragma" content="no-cache"><br> <br /> <meta http-equiv="Cache-Control" content="no-cache"></p> <br /> <p align="justify">Чтобы выровнять табличку по центру документа?<br> <br /> И почему в NN и Opera не работает <table align="center">?</p> <br /> <p align="justify"><table align="center"> - конструкция принципиально неверная. Параметр align в<br> <br /> <table> предназначен для того, чтобы задать обтекание таблицы текстом, так же,<br> <br /> как аналогичный параметр в <img>.</p> <br /> <p align="justify">Правильно так:<br> <br /> <div style="align:center"><table><br> <br /> ....<br> <br /> </table></div></p> <br /> <p align="justify">Чтобы разместить текст, картинку или табличку в центре экрана?</p> <br /> <p align="justify">Человек, который задает такой вопрос, не понимает, что такое HTML. Ему нужно<br> <br /> хотя бы поверить в то, что никакого экрана у его клиента нет, что HTML - не<br> <br /> привязанный к платформе язык, что браузер для слепых не показывает буквы, а<br> <br /> читает их, и так далее.</p> <br /> <p align="justify">Для тех, кто упорствует в ереси, есть решение с таблицей. Трудность в том, что<br> <br /> никакого атрибута HEIGHT в стандарте нет, поэтому его реализация - это<br> <br /> индивидуальные затеи браузера. Поэтому решение, которое предлагается здесь,<br> <br /> нарочито неправильно и нестандартно.</p> <br /> <p align="justify"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><br> <br /> <tr><br> <br /> <td align="center" valign="middle"><br> <br /> Текст, картинка или табличка в центре экрана<br> <br /> </td><br> <br /> </tr><br> <br /> </table></p> <br /> <p align="justify">Чтобы междy каpтинками не было пpомежyтков?</p> <br /> <p align="justify">Здесь мы вынуждены приспосабливаться к браузерам, которые не следуют стандарту<br> <br /> и показывают CR LF так, как бог на душу положит. Обычно - как пробел, хотя в<br> <br /> стандарте и сказано, что CR LF не должны показываться.</p> <br /> <p align="justify">Первое решение с таблицей. Здесь есть надежда, что пустоты, не относящиеся к<br> <br /> ячейкам, показаны не будут.</p> <br /> <p align="justify"><table border=0 cellpadding=0 cellspacing=0><br> <br /> <tr><br> <br /> <td><img src=...></td><br> <br /> <td><img src=...></td><br> <br /> </tr><br> <br /> </table></p> <br /> <p align="justify">Второе решение тоже обходит противоестественные склонности браузеров. Картинки<br> <br /> описываются без промежутков между тегами:</p> <br /> <p align="justify"><img src=...><img src=...><img src=...><br><img src=...><img src=...></p> <br /> <p align="justify">Чтобы убрать промежутки между ячейками в таблице, которая<br> <br /> получилась в результате разрезки целой картинки на куски?</p> <br /> <p align="justify">Пропишите в таблице параметры border="0" cellspacing="0" cellpadding="0"</p> <br /> <p align="justify">Также нужно убирать пробелы и возвраты каретки между <td>, <img> и </td>.<br> <br /> Например, так:</p> <br /> <p align="justify"><td><img src="kusok.gif" width="XXX" height="YYY" border="0"></td><br> <br /> ^ В местах, отмеченных галочками, пробелов нет!!! ^</p> <br /> <p align="justify">Если на картинки навешаны ссылки, то <a> и </a> тоже должны быть вставлены без<br> <br /> пробелов:</p> <br /> <p align="justify"><td><a href="..."><img ...></a></td></p> <br /> <p align="justify">И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры.</p> <br /> <p align="justify">Чтобы форматировать текст по ширине ?</p> <br /> <p align="justify">В HTML 4 появилось еще одно значение для атрибута ALIGN абзаца. Третьими<br> <br /> браузерами не поддерживается.</p> <br /> <p align="justify"><p align="justify"><br> <br /> Ваш текст<br> <br /> </p></p> <br /> <p align="justify">Можно также использовать CSS:<br> <br /> P{text-align:justify;}</p> <br /> <p align="justify">Как встроить свои шрифты в страничку?</p> <br /> <p align="justify">Это делается разными методами в IE и NN и может вызвать большие проблемы в<br> <br /> разных операционных системах и разных кодировках.</p> <br /> <p align="justify">Рекомендуется вместо этого использовать стандартные font-family: serif (шрифт<br> <br /> с засечками типа Times), sans-serif (рубленый, типа Arial) и monospace<br> <br /> (моноширинный шрифт типа Courier). Не рекомендуется использовать fantasy и<br> <br /> cursive - в IE это также может вызвать проблемы с кодировками, а в NN просто<br> <br /> игнорируется.</p> <br /> <p align="justify">Для небольших кусочков текста (заголовки, кнопки, спецсимволы) можно<br> <br /> воспользоваться картинками, разумеется, с указанием параметра ALT.</p> <br /> <p align="justify">Чтобы убрать синюю рамку вокруг картинки-ссылки?</p> <br /> <p align="justify">Точно так же, как убирают любую другую рамку вокруг любой другой картинки:<br> <br /> <img border="0" ...></p> <br /> <p align="justify">Чтобы убрать или задать отступы содержимого странички от краев<br> <br /> окна браузера?</p> <br /> <p align="justify"><body leftmargin="X" topmargin="Y" rightmargin="X" bottommargin="Y"<br> <br /> marginwidth="X" marginheight="Y"><br> <br /> Для нулевых отступов X=Y=0</p> <br /> <p align="justify">Грамотно также будет добавить в стили документа:<br> <br /> <style type="text/css"><!--<br> <br /> body{margin:0px;padding:0px;}<br> <br /> --></style></p> <br /> <p align="justify">Чтобы при смене страниц сам URL не изменялся?</p> <br /> <p align="justify">При загруженном фреймсете в строке URL показывается его адрес, а не адреса<br> <br /> загружаемых страниц. Соответственно, если страница без кадров, делается один<br> <br /> кадр размером во весь экран.</p> <br /> <p align="justify">Чтобы при нажатии на определенную область картинки происходил переход<br> <br /> на один адрес, а при нажатии в другой области - на другой?</p> <br /> <p align="justify">Стандарт позволяет пользоваться картами изображений. Полный формат описания<br> <br /> карт поищите в стандарте. Обратите внимание, что при описании самой карты<br> <br /> пишется просто "имя_карты", а при описании картинки пишется "#имя_карты", то<br> <br /> есть здесь уже ссылка.</p> <br /> <p align="justify"><img src="адрес_картинки" usemap="#имя_карты"><br> <br /> <map name="имя_карты"><br> <br /> ...<br> <br /> </map></p> <br /> <p align="justify">Обязательно ли использовать кавычки в значениях атpибyтов?</p> <br /> <p align="justify">Кавычки можно опyскать, если значение атpибyта:<br> <br /> * содеpжит только английские бyквы, цифpы, точки и тиpе<br> <br /> * начинается с бyквы<br> <br /> Некоторые считают, что если браузеры не обращают внимание на кавычки, то можно<br> <br /> кавычки не писать. Да, если вы пользуетесь языками браузеров, можно кавычки не<br> <br /> писать. Если вы пользуетесь языком HTML, писать их необходимо.</p> <br /> <p align="justify">Кроме того, кавычки нужно писать, чтобы придать своей страничке совместимость<br> <br /> с XHTML</p> <br /> <p align="justify">Как вставлять комментарии в HTML?</p> <br /> <p align="justify"><!-- это комментарий --><br> <br /> <!-- это тоже,<br> <br /> только занимает больше одной линии --></p> <br /> <p align="justify">Не допускается пробел между "<!" и "--", но разрешен пробел между "--" и ">".<br> <br /> Типичная ошибка - использование цепи дефисов ("---") в пределах комментария.<br> <br /> Нужно избегать помещения двух или более смежных дефисов внутри комментариев.</p> <br /> <p align="justify">Довольно частая проблема - использование оператора уменьшения на единицу в<br> <br /> блоке JavaScript (myVar--), вместо этого используйте оператор "-=" (myVar-=1)</p> <br /> <p align="justify">Говорят, для поисковиков надо прописать ключевые слова. Что это?</p> <br /> <p align="justify">Один из вариантов <meta>, определяющий ключевые слова или краткое описание<br> <br /> документа. Некоторые поисковые роботы обращают на них внимание, а некоторые не<br> <br /> обращают. Поисковый робот, знаете ли, тоже нам ничем не обязан.</p> <br /> <p align="justify">Слова - <meta name="Keywords" content="слово слово слово ..."><br> <br /> Описание - <meta name="Descripton" content="описание документа"></p> <br /> <p align="justify">В чем отличия <b> и <strong>, <i> и <em> ?</p> <br /> <p align="justify">Вообще говоря, никакой браузер не обязан вебмастеру показывать жирные или<br> <br /> курсивные шрифты. Например, у консольного браузера их нет. Это уже элементы<br> <br /> верстки, а HTML предназначен не для верстки, а для логической разметки.</p> <br /> <p align="justify"><b> и <i> - тэги физического выделения, то есть вы принудительно заставляете<br> <br /> выделять текст каким-то видом шрифта. <strong> и <em> - тэги логического<br> <br /> выделения. Каждый браузер может по-своему выделить текст внутри этих тэгов,<br> <br /> так, как удобно его пользователю. <em> означает выделение, а <strong> означает<br> <br /> усиленное выделение.</p> <br /> <p align="justify">Резюме: если вам нужно выделить текст, пользуйтесь <em>. Если вам нужно не<br> <br /> выделить текст, а сделать его курсивом, пользуйтесь <i>.</p> <br /> <p align="justify">Как сделать таблицу с большим количеством<br> <br /> произвольно объединенных по вертикали и горизонтали ячеек?</p> <br /> <p align="justify">1. Начертить схему таблицы.<br> <br /> 2. Провести до конца пунктирными линиями не доходящие до краев перегородки.<br> <br /> 3. Написать HTML-код таблицы, представив, что пунктирные линии - это сплошные.<br> <br /> Содержимое и параметры фона и выравнивания ячеек с пунктирными линиями<br> <br /> прописать в той ячейке, что находится сверху и слева.<br> <br /> 5. Добавить в <td> каждой такой ячейки ROWSPAN и COLSPAN с параметрами,<br> <br /> равными количеству ячеек, объединяемых по вертикали и горизонтали<br> <br /> соответственно.<br> <br /> 6. Удалить пустые пары <td></td>.</p> <br /> <p align="justify">Как сделать буквицу в начале абзаца без применения картинок?</p> <br /> <p align="justify">>Например, так:</p> <br /> <p align="justify">/ вот и начался<br> <br /> /__ мой новый<br> <br /> / абзац!</p> <br /> <p align="justify"><table border="0" cellspacing="6" cellpadding="0" align="left"><br> <br /> <tr><br> <br /> <td bgcolor="#000000"><font size="7" color="#FFFFFF"<br> <br /> style="font-family:sans-serif;font-size:300%;"><b> А </b></font></td></p> <br /> <p align="justify"></tr><br> <br /> </table>вот и начался мой новый абзац!</p> <br /> <p align="justify">Буквица - буква между двумя в <td>.</p> <br /> <p align="justify">Параметры bgcolor в <td>, color, size и style в <font> задавать по вкусу ;)</p> <br /> <p align="justify">Как окружить табличку рамкой нужного цвета?</p> <br /> <p align="justify">Это возможно, но если просто прописать bordercolor, то в NN рамка будет<br> <br /> объемная, а в IE - монотонная.</p> <br /> <p align="justify">Чтобы рамка была объемной и в IE, и в NN, надо для IE прописать в <table><br> <br /> параметры bordercolorlight="#RRGGBB" и bordercolordark="#RRGGBB", которые<br> <br /> нужно узнать, открыв страницу в NN, сделав Print Screen, вставив образ экрана<br> <br /> в графический редактор и узнав RGB-цвет светлых и темных "граней" рамки.</p> <br /> <p align="justify">Чтобы рамка была монотонной и в IE, и в NN, делаем так:<br> <br /> <table border="0" cellspacing="0" cellpadding="...толщина бордера..."<br> <br /> bgcolor="...цвет бордера..."><br> <br /> <tr><br> <br /> <td><table width="100%" border="0" bgcolor="...цвет фона..."></p> <br /> <p align="justify">...Наша табличка...</p> <br /> <p align="justify"></table></td><br> <br /> </tr><br> <br /> </table></p> <br /> <p align="justify">Как "разлиновать" табличку тонкими линиями нужного цвета?</p> <br /> <p align="justify"><table border="0" cellspacing="0" cellpadding="0" bordercolor="...цвет<br> <br /> линий..."><br> <br /> <tr><br> <br /> <td><table width="100%" cellspacing="...толщина линий..." border="0"><br> <br /> <tr bgcolor="...цвет фона первой строки..."><br> <br /> ...первая строка...<br> <br /> </tr><br> <br /> <tr bgcolor="...цвет фона второй строки..."><br> <br /> ...вторая строка...<br> <br /> </tr><br> <br /> ....<br> <br /> </table></td><br> <br /> </tr><br> <br /> </table></p> <br /> <p align="justify">Я, к сожалению, употребил тег, который поддерживается только<br> <br /> в браузере NNN. Что же увидят пользователи других браузеров?</p> <br /> <p align="justify">В стандарте можно прочитать, что пользовательские агенты должны игнорировать<br> <br /> неизвестные им теги. Браузеры так и делают.</p> <br /> <p align="justify">Чтобы HTML-документ выводился в некоторую область внутри<br> <br /> другого HTML-документа (например, в <div> или в ячейку таблицы)?<br> <br /> Чтобы <iframe> показывался в Netscape 4.x?</p> <br /> <p align="justify">По стандартам HTML 4.0, для встраивания внешних HTML-документов нужно<br> <br /> использовать тег <iframe>. Он имеет такие атрибуты:</p> <br /> <p align="justify">src="...URL..." - URL встраиваемого документа</p> <br /> <p align="justify">name="..." - имя для того, чтобы прописывать его, как target для<br> <br /> ссылок, которые должны будут загружаться в этот iframe.</p> <br /> <p align="justify">width="WWW" - ширина</p> <br /> <p align="justify">height="HHH" - высота</p> <br /> <p align="justify">marginwidth="XXX" - отступы содержимого iframe от левого и правого<br> <br /> края</p> <br /> <p align="justify">marginheight="YYY" - то же, но от верхнего и нижнего края</p> <br /> <p align="justify">scrolling="yes|no|auto" - задает наличие или отсутствие полосы<br> <br /> прокрутки. При значении auto полоса прокрутки появляется при<br> <br /> необходимости, если встраиваемый документ не влезает в размер iframe.<br> <br /> В общем случае, отключать скроллинг не рекомендуется.</p> <br /> <p align="justify">Тег <iframe> обязательно требует закрывающего тега (</iframe>). Внутри<br> <br /> <iframe>...</iframe> прописывается контент для браузеров, не<br> <br /> поддерживающих этот тег.</p> <br /> <p align="justify">К сожалению, NN4 не поддерживает <iframe>. Однако в нем есть иная<br> <br /> возможность встроить один документ в другой, причем так, чтобы внешние<br> <br /> ссылки на <iframe> работали корректно.</p> <br /> <p align="justify">Для этого в <head> своей странички вставьте скрипт:</p> <br /> <p align="justify"><script language="JavaScript" type="text/javascript"><!--<br> <br /> function chIframe(lnk) {<br> <br /> if (document.layers){<br> <br /> if (document.layers[lnk.target]) {<br> <br /> if (document.layers[lnk.target].origX==undefined) {<br> <br /> document.layers[lnk.target].origX=<br> <br /> document.layers[lnk.target].pageX;<br> <br /> document.layers[lnk.target].origY=<br> <br /> document.layers[lnk.target].pageY;<br> <br /> }<br> <br /> with (document.layers[lnk.target]) {<br> <br /> left=origX;<br> <br /> clip.left=-origX;<br> <br /> top=origY;<br> <br /> clip.top=-origY;<br> <br /> src=lnk.href;<br> <br /> }<br> <br /> }<br> <br /> return false;<br> <br /> } else return true;<br> <br /> }<br> <br /> //--></script></p> <br /> <p align="justify">А iframe пропишите так:</p> <br /> <p align="justify"><iframe name="myIframe" src="myiframe.html" width="X" height="Y"><br> <br /> <div id="myIframe"<br> <br /> style="position:relative;width:X;height:Y;include-source:url('myiframe.html');"><br> <br /> Ваш браузер не поддерживает вложения HTML-документов.<br> <br /> ажмите <a href="page1.html" target="myIframe">сюда</a>,<br> <br /> чтобы увидеть документ в новом окне.<br> <br /> </div><br> <br /> </iframe></p> <br /> <p align="justify">Если вы хотите, чтобы ваша ссылка изменяла содержимое iframe,<br> <br /> пропишите ее так:<br> <br /> <a href="newpage.html" target="myIframe" onClick="return chIframe(this);"></p> <br /> <p align="justify">Чтобы был абзацный отступ?</p> <br /> <p align="justify">P{margin-top:0;text-indent:5em;}</p> <br /> <p align="justify">Как подавить подчеркивание ссылок в некоторых местах?</p> <br /> <p align="justify"><HEAD><br> <br /> <STYLE type="text/css"><!--<br> <br /> a.noneline {text-decoration: none;}<br> <br /> --></STYLE><br> <br /> </HEAD></p> <br /> <p align="justify">После чего применяем этот стиль: <A HREF="ссылка" CLASS="noneline"></p> <br /> <p align="justify">Как сделать неподчеркнутые ссылки везде?</p> <br /> <p align="justify"><HEAD><br> <br /> <STYLE type="text/css"><!--<br> <br /> a:link {text-decoration:none;}<br> <br /> a:visited {text-decoration:none;}<br> <br /> a:active {text-decoration:none;}<br> <br /> --></STYLE><br> <br /> </HEAD></p> <br /> <p align="justify">Чтобы при наведении мышки на текст с ссылкой<br> <br /> он поменял цвет или стал подчеркнутым?</p> <br /> <p align="justify"><HEAD><br> <br /> <STYLE type="text/css"><!--<br> <br /> a:hover {color:#RRGGBB;text-decoration:underline;}<br> <br /> --></STYLE><br> <br /> </HEAD></p> <br /> <p align="justify">Этот код не будет работать в NN4.x.</p> <br /> <p align="justify">Чтобы фоновая картинка не размножалась по горизонтали<br> <br /> (по вертикали) при увеличении разрешения экрана?</p> <br /> <p align="justify">В стилях документа нужно прописать</p> <br /> <p align="justify"><style type="text/css"><!--<br> <br /> body{<br> <br /> background-image:url("...URL картинки...");<br> <br /> background-repeat:...параметр...;<br> <br /> }<br> <br /> --></style></p> <br /> <p align="justify">Допустимые значения параметра:<br> <br /> no-repeat - подавляет размножение<br> <br /> repeat-x - размножение только по горизонтали<br> <br /> repeat-y - размножение только по вертикали</p> <br /> <p align="justify">Для совместимости со старыми версиями браузеров рекомендуется<br> <br /> пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF)<br> <br /> или совпадающим со значением BGCOLOR в <BODY> монотонным (для JPG) фоном<br> <br /> полосы, доведя разрешение картинки в нужном направлении как минимум до<br> <br /> 2048 пикселов. "Вес" картинки при этом увеличится незначительно,<br> <br /> поскольку монотонный фон хорошо сжимается.</p> <br /> <p align="justify">Чтобы задать фоновую картинку для ячейки таблицы?</p> <br /> <p align="justify">Параметр background для <td> не рекомендован стандартами HTML и не<br> <br /> поддерживается в Opera. Пользуемся стилями:<br> <br /> <td style="background-image:URL('bg.gif');"></p> <br /> <p align="justify">Если мы хотим, чтобы фон не "размножался" по вертикали или горизонтали, то<br> <br /> добавляем в style параметр background-repeat, как описано в ответе на<br> <br /> предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми<br> <br /> браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.</p> <br /> <p align="justify">Если внутри ячейки c фоном мы собираемся использовать таблицы, то в<br> <br /> соответствующих тегах <table> нужно указывать background="" для совместимости<br> <br /> с NN.</p> <br /> <p align="justify">Как сделать так. чтобы фон странички оставался неподвижным при<br> <br /> прокрутке?</p> <br /> <p align="justify">Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном<br> <br /> выполняется медленнее.</p> <br /> <p align="justify">Если уж ни в какую без этого не обойтись, то вот пример странички с<br> <br /> неподвижным фоном в IE3+, NN4+ и Opera:</p> <br /> <p align="justify"><html><br> <br /> <head><br> <br /> <title>Страничка с неподвижным фоном</title><br> <br /> <style type="text/css"><br> <br /> <!--<br> <br /> body{background-image:URL('back.gif');background-attachment:fixed;<br> <br /> margin:0px;padding:0px;}<br> <br /> #body{position:absolute;z-index:1;width:100%;}<br> <br /> --><br> <br /> </style><br> <br /> <script language="JavaScript1.2"><br> <br /> <!--<br> <br /> var oldScrollX=0;<br> <br /> var oldScrollY=0;<br> <br /> var NN=(((document.layers)?true:false) &&<br> <br /> navigator.appVersion.charAt(0)=="4");</p> <br /> <p align="justify">function fixBg() {<br> <br /> if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){<br> <br /> document.layers['bg'].left=oldScrollX=window.pageXOffset;<br> <br /> document.layers['bg'].top=oldScrollY=window.pageYOffset;<br> <br /> }<br> <br /> }</p> <br /> <p align="justify">function makeBg() {<br> <br /> if (NN) {<br> <br /> document.layers['bg'] = new Layer(window.innerWidth);<br> <br /> document.layers['bg'].left = 0;<br> <br /> document.layers['bg'].top = 0;<br> <br /> document.layers['bg'].height = window.innerHeight;<br> <br /> document.layers['bg'].background.src = 'back.gif';<br> <br /> document.layers['bg'].visibility = 'show';<br> <br /> document.layers['bg'].zIndex = 0;<br> <br /> document.layers['bg'].document.open();<br> <br /> document.layers['bg'].document.write('<table width="100%" '+<br> <br /> 'height="105%" border="0" cellspacing="0" cellpadding="0">'+<br> <br /> '<tr><td> </td></tr></table>')<br> <br /> document.layers['bg'].document.close();<br> <br /> setInterval("fixBg();",100);<br> <br /> }<br> <br /> }<br> <br /> //--><br> <br /> </script><br> <br /> </head><br> <br /> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"<br> <br /> marginwidth="0" marginheight="0" background="back.gif"<br> <br /> bgproperties="fixed" onLoad="makeBg();"><script language="JavaScript1.2"><!--<br> <br /> if (NN) document.write('<div id="body">')<br> <br /> //--></script><br> <br /> ....<br> <br /> ....<br> <br /> ....<br> <br /> Baш HTML<br> <br /> ....<br> <br /> ....<br> <br /> ....<br> <br /> <script language="JavaScript1.2"><!--<br> <br /> if (NN) document.write('</div><table height="NNNN">'+<br> <br /> // ^^^^<br> <br /> //Здесь пишем высоту странички в пикселах при разрешении 640x480<br> <br /> '<tr><td> </td></tr></table>');<br> <br /> //--></script></body><br> <br /> </html></p> <br /> <p align="justify">Как сделать так, чтобы при наведении мышки какой-либо отличный<br> <br /> от ссылки элемент (скажем, ячейка таблицы) поменял оформление<br> <br /> (например, фоновый цвет)</p> <br /> <p align="justify">Категорически не рекомендуется пользоваться скриптами типа<br> <br /> <td onMouseOver="..."></p> <br /> <p align="justify">В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и<br> <br /> к любому другому элементу. о, к сожалению, IE не поддерживает эту<br> <br /> возможность. Поэтому поступаем так - пишем в стилях:</p> <br /> <p align="justify">td{...styles...;behavior:url('td.htc');} /* работает в IE4+ */<br> <br /> td:hover{background-color:#RRGGBB;} /* стандарт CSS2, работает в NN6/Mozilla */</p> <br /> <p align="justify">И создаем файл td.htc, в котором пишем:</p> <br /> <p align="justify"><public:attach event="onmouseover" onevent="color()"/><br> <br /> <public:attach event="onmouseout" onevent="restore()"/><br> <br /> <script language="JavaScript" type="text/javascript"><!--<br> <br /> function color() {runtimeStyle.backgroundColor='#RRGGBB';}<br> <br /> function restore() {runtimeStyle.backgroundColor='';}</p> <br /> <p align="justify">Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.</p> <br /> <p align="justify">Разумеется, можно использовать td.className:hover и td#idName:hover<br> <br /> для подсветки ячеек определенного стиля или конкретной ячейки.<br> <br /> </p> <br /> <p align="justify">Что такое чересстрочная и прогрессивная графика,<br> <br /> почему она лучше обычной и как ее создать?</p> <br /> <p align="justify">Чересстрочная графика - это механизм, позволяющий показать грубое приближение<br> <br /> к общему виду картинки до ее полной загрузки. Сохранять в этом формате<br> <br /> всячески рекомендуется, поскольку пользователь сразу получает общее<br> <br /> представление о картинке и при необходимости может отменить ее загрузку,<br> <br /> нажать на ссылку и т.п.</p> <br /> <p align="justify">Для создания чересстрочной графики вам понадобится графический редактор,<br> <br /> поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется<br> <br /> "File Export", "GIF89a Export". Должен быть отмечен пункт "Interlace".</p> <br /> <p align="justify">Для формата JPEG есть функциональный аналог чересстрочной графики - формат<br> <br /> Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню<br> <br /> "Save a Copy...", и в опциях JPEG отметить пункт Progressive. Интересно, что<br> <br /> прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто<br> <br /> "весит" меньше, чем стандартный :)</p> <br /> <p align="justify">Как создать прозрачную графику?</p> <br /> <p align="justify">Для создания прозрачной графики вам понадобится графический редактор,<br> <br /> поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется<br> <br /> "File Export", "GIF89a Export", затем пипеткой выделяете тот цвет, который<br> <br /> должен стать прозрачным.</p> <br /> <p align="justify">Таким образом, прежде чем сохранять картинку, нужно окрасить всю прозрачную<br> <br /> область в один цвет. PhotoShop, конечно, позволяет сделать прозрачными и<br> <br /> несколько цветов, но при этом эти несколько цветов становятся одним.</p> <br /> <p align="justify">Рассказывают, что yдобнее создать альфа-канал, в котоpом и наpисовать<br> <br /> пpозpачность. Та часть изобpажения, котоpая находится под чеpными областями<br> <br /> альфа-канала, бyдет пpозpачной. Сохpанять обычным способом.</p> <br /> <p align="justify">Есть и программы типа GIF Constructor Set, которые помогают определить один из<br> <br /> цветов палитры GIF как прозрачный.</p> <br /> <p align="justify">Как создать анимацию?</p> <br /> <p align="justify">GIF-анимация - это последовательная смена картинок. Картинки можно сделать в<br> <br /> любом редакторе, а сами анимации в специальных программах:</p> <br /> <p align="justify">а) Gif Construction Set:<br> <br /> * Запустите 'Мастер' в Gif Construction Set:<br> <br /> File / Animation Wizard... и нажмите Next и еще раз Next. Если вы<br> <br /> хотите, чтобы ваша анимация после выполнения остановилась, то<br> <br /> выбирайте Animate once and stop, а если хотите, чтобы она постоянно<br> <br /> работала - Loop Indefinitely. Нажимайте Next.<br> <br /> * Далее выберите качество изображения (фотореалистичное, рисованное).<br> <br /> * Теперь надо выбрать промежуток времени между сменой кадров.<br> <br /> * Теперь выбираете из каталогов GIF'ы для анимации.<br> <br /> * Нажимайте Done.<br> <br /> * Сохраните.<br> <br /> * Для проверки нажмите View или просмотрите анимацию в браузере.</p> <br /> <p align="justify">б) MS GIF Animator:<br> <br /> * Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.<br> <br /> * Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и<br> <br /> разместите их в нужном порядке, перетаскивая мышью, используя<br> <br /> Clipboard или клавиши со стрелками на панели (они дублируются<br> <br /> клавиатурными стрелками).<br> <br /> * Для повторяющейся анимации включите опцию Animation / Looping.<br> <br /> При этом можно задать количество повторов или включить опцию<br> <br /> Repeat Forever для бесконечного повтора.<br> <br /> * На закладке Image выставьте для _каждого_ кадра нужную задержку<br> <br /> по времени (проверить анимацию можно, нажав кнопку Preview), метод<br> <br /> рисования (как правило, используется либо Undefined, либо Leave) и<br> <br /> наличие прозрачных областей в текущем кадре (и прозрачный цвет).<br> <br /> * Сохраните.</p> <br /> <p align="justify">в) Ulead Gif Animator<br> <br /> * Запустите File / Animation Wizard<br> <br /> * Щелкните на Add Image. Выберите нужные файлы (выбирать можно<br> <br /> сразу несколько файлов - если у вас они будут стоять не в том<br> <br /> порядке, в котором нужно, вы потом сможете поменять их местами).<br> <br /> * Щелкаем "Далее". Появится выбор типа вашего изображения:<br> <br /> Text-Oriented (Don't Dither) - состоят из текста<br> <br /> Photo-Oriented (Dither) - содержат картинки<br> <br /> * Нажимаем "Далее". Можете выбрать глобальное время задержки или<br> <br /> сделать это потом отдельно для каждого кадра.<br> <br /> * Нажимаем "Далее". Нажимаем "Готово". Стрелками [вверх] и [вниз]<br> <br /> можете менять позицию кадра в анимации. В поле Delay можно<br> <br /> установить свою задержку для каждого кадра<br> <br /> * Жмем F12. Сохраните.</p> <br /> <p align="justify">Можно ли оптимизировать графику (уменьшить размер)?</p> <br /> <p align="justify">Да, и для этого есть два основных способа.</p> <br /> <p align="justify">Первый связан с форматом GIF и палитрованной графикой. По умолчанию<br> <br /> используется палитра в 256 цветов. Но если вы _внимательно_ посмотрите на свои<br> <br /> картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой<br> <br /> одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того,<br> <br /> горизонтальные последовательности одинаковых точек архивируются в GIF лучше,<br> <br /> чем вертикальные :-). А если уменьшить неиспользуемые поля...</p> <br /> <p align="justify">Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один<br> <br /> - меняйте степень сжатия. Можно также попробовать поиграть с параметром<br> <br /> Baseline.</p> <br /> <p align="justify">Наконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец<br> <br /> файла GIF Constructor Set. Это тоже можно вырезать.</p> <br /> <p align="justify">Лучшее средство работы с форматами и масштабирования - Image Alchemy. Самый<br> <br /> функциональный редактор полноцветной графики - Adobe PhotoShop. Лучшая работа<br> <br /> с масками - Aldus PhotoStyler.</p> Источник: http://www.electrocut.ru |
|
| Категория: HTML | Добавил: ads (22-Апр-2007) | |
| Просмотров: 1792
| Рейтинг: 5.0 |
|