http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1333728595.html <p>В современном web-дизайне без графики обойтись практически невозможно, можно спорить лишь о том, в каких количествах и насколько оправданно ее наличие или отсутствие в пределах того или иного ресурса.</p> <p>Многие web-мастера загоняют мелкие графические элементы в один графический файл - так называемый спрайт и далее позиционируют его в нужное место, тем самым, уменьшая количество запросов к серверу, что положительно сказывается на скорости загрузки web-страницы.</p> <p>Рассмотрим частный случай на конкретном примере.</p> <img src="../blog/i/image/sl.png" style="display:block;margin:5px auto;width:507px;height:38px;" alt="спрайт"> <p>Имеем 14 картинок каждая, из которых в реальном проекте является кликабельной и ведет по прописанному ей линку в соответствующее место.</p> <p>Если пойти стандартным путем, то html-код и стили могут выглядеть примерно так:</p> <pre class="pre"> &lt;div class="zzz"&gt; &lt;a href="#" class="x"&gt;&lt;/a&gt; ... &lt;a href="#" class="xn"&gt;&lt;/a&gt; &lt;/div&gt; .x {background:url(...) no-repeat YYpx XXpx;} ... .xn {background:url(...) no-repeat YYpx XXpx;} </pre> <p>Как мы видим, чтобы отпозиционировать часть спрайта в нужное место необходимо указать не только класс ссылке, но и в стилях прописывать этому классу, помимо всего прочего, позицию нужной картинке, к тому же подбор сдвига по горизонтали, дело весьма утомительное.</p> <p>Но можно обойтись более простым способом.</p> <p>html-код практически остается без изменений, следует только удалить из тегов «a» ставшие абсолютно не нужными классы.</p> <p>Стили тогда приобретут следующий вид:</p> <pre class="pre"> .zzz { background:url(...) no-repeat YYpx XXpx; margin:5px auto;width:XXpx;height:XXpx; } .zzz a { <span>margin-left:XXpx</span>;position:relative; <span>top:XXpx</span>;width:XXpx;height:XXpx; } </pre> <p>Для смещения ссылки по горизонтали и вертикали достаточно использовать margin-left и отностильное позиционирование, нужные параметры выделены цветом.</p> <p>Чтобы добиться максимальной точности совпадения кликабельной области ссылки и индивидуальной картинки, временно добавляем в стили для ссылки верхний и нижий border.</p> <p>При сравнении двух вариантов, второй выглядит более предпочтительным, что и было использовано в очередном апгрейде Lasto Blog для переводчика Google и «Хомячкового рая».</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1333728595.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1333728595.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 06 Apr 2012 23:09:55 GMT http://trifler.ru/blog/post_1328093233.html <p>Никогда не приходилось этим заниматься, но все когда-нибудь бывает в первый раз… Возможно предлагаемое всем известно и лишь местный автор как всегда снова открывает свою «Америку».</p> <p>Речь идет о конвертации файлов с раcширением .fb2 в привычный вордовский документ с возможностью его дальнейшего редактирования не посредственно в Microsoft Office.</p> <p>Задача на первый взгляд имеет достаточно простое решение, но не любовь к установке нового софта, время, потраченное на его изучение показалось мастеру Горди слишком обременительным.</p> <h4 class="panel">Задача</h4> <p>Конвертируем .fb2 в .doc</p> <h4 class="panel">Программное обеспечение</h4> <p>Только то, что изначально входит в состав Windows XP</p> <ul><li>Блокнот</li> <li>Internet Explorer</li> <li>Microsoft Word</li></ul> <h4 class="panel">Шаг первый</h4> <p>Открываем файл с раcширением .fb2 в блокноте и сохраняем его с расширением .htm (.html)</p> <h4 class="panel">Шаг второй</h4> <p>Открываем полученный файл в выше упомянутом браузере, все выделяем и копируем.</p> <h4 class="panel">Шаг третий</h4> <p>Открываем Microsoft Word, производим вставку из буфера обмена скопированного ранее и сохраняем полученное.</p> <h4 class="panel">Результат</h4> <p>Без установки дополнительного софта обошлись подручными средствами и имеем возможность редактировать содержимое.</p> <p style="text-align:center;">*****</p> <p>Более элегантным и менее затратным решением может быть постое переименование файлов с расширением .fb2 в .htm, тем самым исключая из процесса "Первый шаг".</p> <p>Далее по уже стандартной схеме - открываем полученные файлы в браузере, выделяем, копируем, потом вставка скопированного в Microsoft Word и, как завершающий этап сохранение документа с разрешением .doc.</p> <p style="text-align:center;">*****</p> <p>Структура документа с расширением .fb2 такова, что IE6+ могут вывести только то, что расположено внутри тега &lt;body&gt;...&lt;/body&gt;</p> <p>Браузеры - FireFox, OPERA, Google Chrome отображают на экране монитора все содержимое документа.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1328093233.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1328093233.html">All Comments</a></div> <!-- RSS_link_to_post end --> Wed, 01 Feb 2012 17:47:13 GMT