|
||||||||||||||||
| <Добавить в Избранное> <Сделать стартовой> <Реклама на сайте> <Контакты> | ||||||||||||||||
|
||||||||||||||||
| ||||||||||||||||
|
| ||||||||||||||||
Интернет технологии -> HTML / DHTML -> Часто задаваемые вопросы ( FAQ ) по HTML | ||||||||||||||||
Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана? В стилях документа нужно прописать <style type="text/css"><!-- body{ background-image:url("...URL картинки..."); background-repeat:...параметр...; } --></style> Допустимые значения параметра: no-repeat - подавляет размножение repeat-x - размножение только по горизонтали repeat-y - размножение только по вертикали Для совместимости со старыми версиями браузеров рекомендуется пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF) или совпадающим со значением BGCOLOR в <BODY> монотонным (для JPG) фоном полосы, доведя разрешение картинки в нужном направлении как минимум до 2048 пикселов. "Вес" картинки при этом увеличится незначительно, поскольку монотонный фон хорошо сжимается. Чтобы задать фоновую картинку для ячейки таблицы? Параметр background для <td> не рекомендован стандартами HTML и не поддерживается в Opera. Пользуемся стилями: <td style="background-image:URL('bg.gif');"> Если мы хотим, чтобы фон не "размножался" по вертикали или горизонтали, то добавляем в style параметр background-repeat, как описано в ответе на предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили. Если внутри ячейки c фоном мы собираемся использовать таблицы, то в соответствующих тегах <table> нужно указывать background="" для совместимости с NN. Как сделать так. чтобы фон странички оставался неподвижным при прокрутке? Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее. Если уж ни в какую без этого не обойтись, то вот пример странички с неподвижным фоном в IE3+, NN4+ и Opera: <html> <head> <title>Страничка с неподвижным фоном</title> <style type="text/css"> <!-- body{background-image:URL('back.gif');background-attachment:fixed; margin:0px;padding:0px;} #body{position:absolute;z-index:1;width:100%;} --> </style> <script language="JavaScript1.2"> <!-- var oldScrollX=0; var oldScrollY=0; var NN=(((document.layers)?true:false) && navigator.appVersion.charAt(0)=="4"); function fixBg() { if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){ document.layers['bg'].left=oldScrollX=window.pageXOffset; document.layers['bg'].top=oldScrollY=window.pageYOffset; } } function makeBg() { if (NN) { document.layers['bg'] = new Layer(window.innerWidth); document.layers['bg'].left = 0; document.layers['bg'].top = 0; document.layers['bg'].height = window.innerHeight; document.layers['bg'].background.src = 'back.gif'; document.layers['bg'].visibility = 'show'; document.layers['bg'].zIndex = 0; document.layers['bg'].document.open(); document.layers['bg'].document.write('<table width="100%" '+ 'height="105%" border="0" cellspacing="0" cellpadding="0">'+ '<tr><td> </td></tr></table>') document.layers['bg'].document.close(); setInterval("fixBg();",100); } } //--> </script> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" background="back.gif" bgproperties="fixed" onLoad="makeBg();"><script language="JavaScript1.2"><!-- if (NN) document.write('<div id="body">') //--></script> .... .... .... Baш HTML .... .... .... <script language="JavaScript1.2"><!-- if (NN) document.write('</div><table height="NNNN">'+ // ^^^^ //Здесь пишем высоту странички в пикселах при разрешении 640x480 '<tr><td> </td></tr></table>'); //--></script></body> </html> Как сделать так, чтобы при наведении мышки какой-либо отличный от ссылки элемент (скажем, ячейка таблицы) поменял оформление (например, фоновый цвет) Категорически не рекомендуется пользоваться скриптами типа <td onMouseOver="..."> В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и к любому другому элементу. о, к сожалению, IE не поддерживает эту возможность. Поэтому поступаем так - пишем в стилях: td{...styles...;behavior:url('td.htc');} /* работает в IE4+ */ td:hover{background-color:#RRGGBB;} /* стандарт CSS2, работает в NN6/Mozilla */ И создаем файл td.htc, в котором пишем: <public:attach event="onmouseover" onevent="color()"/> <public:attach event="onmouseout" onevent="restore()"/> <script language="JavaScript" type="text/javascript"><!-- function color() {runtimeStyle.backgroundColor='#RRGGBB';} function restore() {runtimeStyle.backgroundColor='';} Теперь все ячейки таблиц при наведении мышки будут подсвечиваться. Разумеется, можно использовать td.className:hover и td#idName:hover для подсветки ячеек определенного стиля или конкретной ячейки. Что такое чересстрочная и прогрессивная графика, почему она лучше обычной и как ее создать? Чересстрочная графика - это механизм, позволяющий показать грубое приближение к общему виду картинки до ее полной загрузки. Сохранять в этом формате всячески рекомендуется, поскольку пользователь сразу получает общее представление о картинке и при необходимости может отменить ее загрузку, нажать на ссылку и т.п. Для создания чересстрочной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется "File Export", "GIF89a Export". Должен быть отмечен пункт "Interlace". Для формата JPEG есть функциональный аналог чересстрочной графики - формат Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню "Save a Copy...", и в опциях JPEG отметить пункт Progressive. Интересно, что прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто "весит" меньше, чем стандартный :) Как создать прозрачную графику? Для создания прозрачной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется "File Export", "GIF89a Export", затем пипеткой выделяете тот цвет, который должен стать прозрачным. Таким образом, прежде чем сохранять картинку, нужно окрасить всю прозрачную область в один цвет. PhotoShop, конечно, позволяет сделать прозрачными и несколько цветов, но при этом эти несколько цветов становятся одним. Рассказывают, что yдобнее создать альфа-канал, в котоpом и наpисовать пpозpачность. Та часть изобpажения, котоpая находится под чеpными областями альфа-канала, бyдет пpозpачной. Сохpанять обычным способом. Есть и программы типа GIF Constructor Set, которые помогают определить один из цветов палитры GIF как прозрачный. Как создать анимацию? GIF-анимация - это последовательная смена картинок. Картинки можно сделать в любом редакторе, а сами анимации в специальных программах: а) Gif Construction Set: * Запустите 'Мастер' в Gif Construction Set: File / Animation Wizard... и нажмите Next и еще раз Next. Если вы хотите, чтобы ваша анимация после выполнения остановилась, то выбирайте Animate once and stop, а если хотите, чтобы она постоянно работала - Loop Indefinitely. Нажимайте Next. * Далее выберите качество изображения (фотореалистичное, рисованное). * Теперь надо выбрать промежуток времени между сменой кадров. * Теперь выбираете из каталогов GIF'ы для анимации. * Нажимайте Done. * Сохраните. * Для проверки нажмите View или просмотрите анимацию в браузере. б) MS GIF Animator: * Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр. * Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и разместите их в нужном порядке, перетаскивая мышью, используя Clipboard или клавиши со стрелками на панели (они дублируются клавиатурными стрелками). * Для повторяющейся анимации включите опцию Animation / Looping. При этом можно задать количество повторов или включить опцию Repeat Forever для бесконечного повтора. * На закладке Image выставьте для _каждого_ кадра нужную задержку по времени (проверить анимацию можно, нажав кнопку Preview), метод рисования (как правило, используется либо Undefined, либо Leave) и наличие прозрачных областей в текущем кадре (и прозрачный цвет). * Сохраните. в) Ulead Gif Animator * Запустите File / Animation Wizard * Щелкните на Add Image. Выберите нужные файлы (выбирать можно сразу несколько файлов - если у вас они будут стоять не в том порядке, в котором нужно, вы потом сможете поменять их местами). * Щелкаем "Далее". Появится выбор типа вашего изображения: Text-Oriented (Don't Dither) - состоят из текста Photo-Oriented (Dither) - содержат картинки * Нажимаем "Далее". Можете выбрать глобальное время задержки или сделать это потом отдельно для каждого кадра. * Нажимаем "Далее". Нажимаем "Готово". Стрелками [вверх] и [вниз] можете менять позицию кадра в анимации. В поле Delay можно установить свою задержку для каждого кадра * Жмем F12. Сохраните. Можно ли оптимизировать графику (уменьшить размер)? Да, и для этого есть два основных способа. Первый связан с форматом GIF и палитрованной графикой. По умолчанию используется палитра в 256 цветов. Но если вы _внимательно_ посмотрите на свои картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того, горизонтальные последовательности одинаковых точек архивируются в GIF лучше, чем вертикальные :-). А если уменьшить неиспользуемые поля... Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один - меняйте степень сжатия. Можно также попробовать поиграть с параметром Baseline. Наконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец файла GIF Constructor Set. Это тоже можно вырезать. Лучшее средство работы с форматами и масштабирования - Image Alchemy. Самый функциональный редактор полноцветной графики - Adobe PhotoShop. Лучшая работа с масками - Aldus PhotoStyler. |
| ||||||||||||||||
| ||||||||||||||||
| Copyright © CompDoc.Ru | ||||||||||||||||
| При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта. |