tag:blogger.com,1999:blog-17268516439707011782011-11-27T17:00:05.085-08:00Мажорный дизайнерBlogfannoreply@blogger.comBlogger71100tag:blogger.com,1999:blog-1726851643970701178.post-85581929241658727622009-01-14T13:53:00.001-08:002009-01-14T13:53:08.926-08:00Работа со скинами под браузер Opera(Часть 1)<p>Статья не моя, я только перевел. Я думаю, что она даст вам общее представление об работе со скинами под браузер Opera. Статья написана под версию браузера 9.5.</p> <p>Оригинал статьи: "<a href="http://dev.opera.com/articles/view/opera-skinning-part-1-introduction/" target="_blank">Opera Skinning</a>"</p> <p>Автор статьи: <a href="http://dev.opera.com/author/15862" target="_blank">Lars Kleinschmidt</a></p> <h4><strong>Вступление</strong></h4> <p>В <a href="http://dev.opera.com/articles/view/getting-started-with-opera-skinning/" target="_blank">первой моей статье</a>(<a href="http://majordesigner.blogspot.com/2008/07/92-95.html" target="_blank">мой перевод</a>), я дал вам представление о том, как работать со скинами браузера Opera, включая расположение папок со скинами, о том, как их распаковать и упаковать, как реализовать замену графического элемента (кнопок и фона). В этом наборе статей я рассмотрю еще подробнее как работать со скинами, с большим количеством практических примеров, с подробной инструкцией по файлу skin.ini, и дам несколько советов как создавать более эффектные скины. Эта статья была обновлена под версию браузера <a href="http://www.opera.com/download/" target="_blank">Opera 9.5</a>.</p> <p>Вы имеете доступ ко всем 5 статьям, вы можете просмотреть их по ссылкам выше. Не обязательно читать статьи по порядку - в любой части вы можете найти что-то интересное для себя, не имеет значения, каков ваш уровень работы со скинами, просто чувствуйте себя свободно и читайте статьи которые вас больше интерисуют.</p> <p>Первая часть в себе содержит:</p> <h4><strong>Оглавление</strong></h4> <ul> <li>Определение расположения папки со скинами </li> <li>Распаковка и упаковка скинов </li> <li>Структура скина </li> <li>Вступление к работе с файлом skin.ini </li> <li>Родные и неродные скины </li> <li>Замена отсутствующих элементов </li> <li>Совместимость скинов </li> <li>Список папок и файлов стандартного скина </li> <li>Форматы изображений </li> <li>Анимации </li> <li>Загрузка изображений </li> </ul> <h4><strong>Определение расположения папки со скинами</strong></h4> <p>Прежде чем приступить к редактированию скина нужно найти файлы скинов на своём жестком диске. Расположение файлов зависит от вашей операционной системы и скина, который вы хотите редактировать - расположение скина по умолчанию отличаеться от расположения скинов скаченых из Интернета, например от расположения скинов, которые можно скачать с сайта <a href="http://my.opera.com">my.opera.com</a>. Следующий список показывает, как зависит расположение папки со скинами от операционной системы:</p> <ul> <li>Windows: <ul> <li>Стандартный скин расположен в папке Skin в папке установки браузера Opera - в большинстве случаев это C:\Program Files\Opera\Skin. </li> <li>Скаченные из Интернета скины расположены в папке profile\Skin. Чтобы определить, где находится папка profile нужно зайти в меню браузера "Справка" > "О программе". Есть еще один способ найти папку profile, надо зайти в меню "Пуск" > "Выполнить" и ввести %APPDATA% и после нажатия клавиши Enter должна открыться папка Application Data, в которой вы сможете найти папку скаченых скинов, полный путь - %APPDATA%\Opera\profile\Skin . </li> </ul> </li> <li>Linux/Unix: <ul> <li>Стандартный скин расположен в папке /usr/share/opera/skin. </li> <li>Скаченные из Интернета скины расположены в папке ~/.opera/skin. Заметьте, что папка .opera является скрытой папкой и вам скорее всего придеться вводить путь вручную. </li> </ul> </li> <li>Mac OS X: <ul> <li>Стандартный скин расположен в папке /Applications/Opera.app/Contents/Resources/Skin(чтобы получить доступ к папке нужно кликнуть правой кнопкой мыши по значку Opera в папке Applications(Приложения), сделайте Ctrl-клик на ней и выберите Show Package Contents(Показать содержимое пакета), чтобы получить доступ к внутренним файлам браузера Опера.) </li> <li>Скаченные из Интернета скины расположены в ~/Library/Preferences/Opera Preferences/Skin. </li> </ul> </li> </ul> <p>Изначально Opera содержит 2 скина - standard_skin.zip, который является стандартным, и родной скин, который именуеться windows_skin.zip или mac_skin.zip. Родной скин не содержит никаких изображений; он использует изображения из стандартного скина. Имена скаченых файлов скинов обычно совпадают с именем самого скина.</p> <h4><strong>Распаковка и упаковка скинов</strong></h4> <p>Скины упакованы как zip файлы (.zip). Когда Opera применяет скин, она распаковывает его и загружает необходимые изображения из скина, причем делает она это на лету - каждое изображение загружается только один раз, даже если оно используеться несколько раз из файла skin.ini, это значит, что уже загруженные файлы в оперативную память, не будут повторно загружатся, а сразу использоваться.</p> <p>Прежде чем приступить к редактированию скина, вы должны распаковать его используя программы, такие как WinZip или 7zip. Вы можете распаковать в любую, удобную для вас папку, ведь вам все равно придеться опять запаковывать. Попробуйте сейчас - найдите и распакуйте стандартный скин браузера. Структура папки скина описана в следующем разделе.</p> <p>После редактирования скина вам нужно запаковать его обратно, чтобы потом можно было использовать в браузере Opera. Вам нужно будет упаковать всю папку в которой находиться файл skin.ini, вместе со всеми файлами и папками в zip архив.</p> <p>Чтобы загрузить скин в браузер нужно переместить zip файл в папку для скаченных скинов и выбрать в меню браузера "Инструменты" > "Представление" - появиться список скинов в котором должен быть и ваш. Заметьте, если файла skin.ini нету в папке со скином, то Opera выдаст такое сообщение об ошибке: "Невозможно продолжить. Пожалуйста, выберите скин сделанный для вашей версии браузера"!</p> <h4><strong>Структура скина </strong></h4> <p>После запаковки всех файлов и папок скина в zip файл, вы сможете найти в нем папки содержащие все необходимые изображения и файл skin.ini. Этот файл вы можете отредактировать в любом текстовом редакторе, и отредактировать информацию о скине, такую как его имя, сможете изменить пути к изображениям используемых в скине, в том числе вы можете изменить изображения для каждого элемента пользовательского интерфейса, цвета текста и фона.</p> <p>Папки содержащие изображения используються скином. Создавать папки не обязательно для работы со скином - они создаються только для удобства и организации хранения данных, то есть, чтобы вам было легче найти нужный элемент.</p> <p>Содержимое стандартного скина описано в разделе "Папка стандартного скина и список файлов" этой статьи.</p> <h4><strong>Вступление к работе с файлом skin.ini </strong></h4> <p>Файл Skin.ini расположен в корневой папке каждого скина - это файл конфигурации скина. Он определяет информацию о скине и общие параметры, и определяет параметры отображения для каждого элемента используемого в скине.</p> <p>В начале файла вы сможете найти общую информацию о скине. Для этого достаточно найти раздел [Info]. Этот раздел должен быть похож на это:</p> <p>[Info] <br />Name=Opera7 Standard Skin <br />Author=Opera Software <br />Version=3 <br />Preview Image=</p> <ul> <li>Name и Author: первые два параметра определяют имя скина и имя автора скина. Эта информация отображается в окне которое вы видите после загрузки выбранного скина. </li> <li>Version: версия используемого файла skin.ini. Для скинов сделанных под версию браузера Opera 9.5 и выше, нужно ставить 3. </li> <li>Preview Image: этот параметр уже не используется, так что может быть пропущен. </li> </ul> <p>Следующий раздел после этого, это [Options], он определяет основные настроки и параметры скина, такие как родной он или нет, в остальных разделах определяються параметры элементов скина. Мы рассмотрим поподробнее это файл во <a href="http://dev.opera.com/articles/view/opera-skinning-part-2-skinning-examples/" target="_blank">второй части этой статьи</a>. </p> <h4><strong>Родные и неродные скины </strong></h4> <p>Opera поддерживает два вида скинов, родные и нормальные. Главные отличия между двумя видами скинов:</p> <ul> <li>Нормальные скины могут содержать любую графику и изменять любые визуальные элементы браузера - кнопки, фоновые изображения, полосы прокрутки и другие элементы. Такие скины дают возможность полностью изменить стиль браузера, независимо от используемой операционной системы. </li> <li>Родные скины используют большинство элементов операционной системы, вы можете изменить только изображения кнопок и некоторые параметры. Все остальные элементы, такие как фоновые изображения и диалоговые окна прорисовуються операционной системой. Эти скины делают браузер Opera похожим на стандартные приложения операционной системы. Браузер перенимает стиль операционной системы. </li> </ul> <p>Родные скины можно установить на всех операционных системах, на которых можно запустить браузер Opera. В Windows вид родного скина будет соответствовать выбранной теме; в Linux интерфейс браузера будет загружаться из Qt toolkit.</p> <p>Чтобы создать родной скин нужно добавить одну строчку в файл skin.ini и браузер будет использовать визуальные элементы операционной системы.</p> <blockquote> <pre>[Options]<br />Native Skin = 1</pre><br /></blockquote><br /><br /><pre>Для обычных скинов просто опускайте этот параметр, то есть не добавляйте эту строчку.</pre><br /><br /><h4><strong>Замена отсутствующих элементов</strong></h4><br /><br /><p>Если элемент скина отсутствует, тогда вместо того, чтобы показывать пустое место, Opera автоматически загрузит похожий элемент из стандартного скина. Элемент, который не описан в файле skin.ini, будет считаться отсутствующимся, при этом не имеет значения есть ли он в папке скина или нету.</p><br /><br /><p>При применении скинов для старых версий часто встречаються случаи, когда необходимые изображения отсутствуют. Чтобы не показывать пустое место Opera проверяет стандартный скин на содержание этого элемента и если находит, тогда отображает его. Стандартные изображения, вставленные, по причине отсутствия какого-нибудь элемента скорее всего не подойдут по стилю с изображениями, которые находяться в вашем скине. Поэтому нужно избегать таких ситуаций.</p><br /><br /><p>Эта технология используеться при загрузке родного скина, который входит в стандартный комплект установки. Этот скин не содержит никаких изображений, он содержит только некоторую информацию о прорисовке того или иного элемента, фактические изображения загружаються зи стандартного скина.</p><br /><br /><p>Замена отсутствующих элементов может быть отключена для фонового изображения и таких элементов как, кнопки, используя опцию <code>Fallback background</code> и <code>Fallback foreground в разделе [Options] файла skin.ini:</code></p><br /><br /><blockquote><br /> <pre>[Options]<br />Fallback foreground = 1<br />Fallback background = 1</pre><br /></blockquote><br /><br /><p>По умолчанию эти опции включены(1 - включены, 0 - выключены) в любом случае, но не помешает включить эти опции, в случае, если стандартные опции изменены.</p><br /><br /><p>Совет: я не рекомендую отключать вам эти опции, так как они могут повлиять на стабильность будущих версий!</p><br /><br /><h4><strong>Совместимость скинов </strong></h4><br /><br /><p>Opera может загрузить любой скин сделанный под седьмую версию и новее. Все изображения загрузятся и будут использоваться, а отсутствующие элементы будут загружены из стандартного скина благодаря замене отсутствующих элементов.</p><br /><br /><p>Дополнительные изображения - которые новая версия браузера уже не использует - просто будут игнорированы. Они никак не отразятся на загрузке скина.</p><br /><br /><h4><strong>Список папок и файлов стандартного скина</strong></h4><br /><br /><p>Если вы хотите создать новый скин, то проще всего начать изменение существующего скина, например, попробуйте поизменять стандартный скин.</p><br /><br /><p>Следующая таблица отображает список всех папок стандатного скина, включенного в версию 9.5, и скины скаченные с <a href="http://my.opera.com/community/customize/skins/" target="_blank">MyOpera</a> тоже должны быть похожеми, но нет никакой гарантии, что это относится ко всем скачанным скинам. Если скин, который вы пытаетесь изменить имеет другую структуру, отличающуюся от стандартного, тогда попробуйте визуально определить, по именам файлов и папок или по просмотру изображений в программе позволяющей их просматривать.</p><br /><br /><table cellspacing="0" cellpadding="2" width="400" border="0"><tbody><br /> <tr><br /> <td align="center" width="133">Папка</td><br /><br /> <td align="center" width="133">Описание</td><br /><br /> <td align="center" width="133">Изображение</td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">a/</td><br /><br /> <td align="center" width="133">Содержит изображение границы вокруг активного элемента при управлении с клавиатуры. Этот элемент настраивать нельзя!</td><br /><br /> <td align="center" width="133"><a href="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5Z5Kt_wrI/AAAAAAAAAV0/4Y7rDIzLTl4/image15.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="28" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5Z7VCXQ-I/AAAAAAAAAV4/k8sXesfC6co/image_thumb5.png" width="46" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">account/</td><br /><br /> <td align="center" width="133">Не используеться в версии 9.5</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5Z93Ji51I/AAAAAAAAAV8/xIy2tkcZBeI/image16.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5aAJcuAgI/AAAAAAAAAWA/3gDOhQf3nrE/image_thumb6.png" width="58" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">anims/</td><br /><br /> <td align="center" width="133">Содержит анимации используемые в Быстром наборе и при работе с ссылками.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5aDBiluLI/AAAAAAAAAWE/OtpPwa2vj9I/image17.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="24" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5aFTtL7RI/AAAAAAAAAWI/_Gtjgvhl9Y4/image_thumb7.png" width="45" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">backgrounds/</td><br /><br /> <td align="center" width="133">Содержит фоновые изображения для всех панелей инструментов.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5aHxtiGPI/AAAAAAAAAWM/62PxWAYUaMk/image18.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="30" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5aKtlDMFI/AAAAAAAAAWQ/lHf5N6s35Ss/image_thumb8.png" width="143" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">border/</td><br /><br /> <td align="center" width="133">Содержит изображение границы, разделителей в диалоговых окнах, и границы вокруг кнопок панели инструментов.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5ajUXAowI/AAAAAAAAAWY/3i2rHlPaZ-w/image19.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5aliMx99I/AAAAAAAAAWc/n-7JuR8N7gs/image_thumb9.png" width="45" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">buttons/</td><br /><br /> <td align="center" width="133">Содержит все изображения кнопок, которые описаны в файле skin.ini. Также содержит графику для вкладок.</td><br /><br /> <td align="center" width="133"><a href="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5aolE1vKI/AAAAAAAAAWg/7lygk-JnY9U/image26.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="24" alt="image" src="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5asG0W27I/AAAAAAAAAWk/FkvswkH4txQ/image_thumb12.png" width="218" border="0" /></a> <br /><br /> <br /><a href="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5auT6rv-I/AAAAAAAAAWo/tvsCxPwn1aM/image27.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="62" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5axDkdh2I/AAAAAAAAAWs/E6XM_NZ94DU/image_thumb13.png" width="201" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">caption/</td><br /><br /> <td align="center" width="133">Содержит изображения таких кнопок как, свернуть, восстановить и закрыть</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5aze0F50I/AAAAAAAAAWw/sakeobHTQ1c/image31.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5a131-GXI/AAAAAAAAAW0/oDXbNBA3nCA/image_thumb15.png" width="67" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">checkbox/</td><br /><br /> <td align="center" width="133">Содержит графику пунктов выбора.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5a3zp38fI/AAAAAAAAAW4/QszA6Y3zOaQ/image35.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="14" alt="image" src="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5a9jgpQeI/AAAAAAAAAW8/7WYjF-XG6SY/image_thumb17.png" width="35" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">contacts/</td><br /><br /> <td align="center" width="133">Содержит значки контактов для адресной книги.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5bACblm8I/AAAAAAAAAXA/hfRKipTcmsk/image39.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5berFjGUI/AAAAAAAAAXE/rDWmSfwownA/image_thumb19.png" width="195" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">dialog_images/</td><br /><br /> <td align="center" width="133">Содержит значки для многих сообщений.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5bhIFex1I/AAAAAAAAAXI/SpJ2KhCPYQI/image43.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="32" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5bjwORAgI/AAAAAAAAAXM/y3AuB1Z6QR4/image_thumb21.png" width="188" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">dialog_page/</td><br /><br /> <td align="center" width="133">Содержит графику для границ и теней вокруг фона диалоговых окон.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5bmRmZ_3I/AAAAAAAAAXQ/GjKm0gcd4DE/image47.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="23" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5boqDf0DI/AAAAAAAAAXU/tY5qnHVp5-I/image_thumb23.png" width="23" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">drop_insert/</td><br /><br /> <td align="center" width="133">Содержит изображение, которое появляеться при перемещении кнопок.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5bqQkc4FI/AAAAAAAAAXY/U5vyayjsM6c/image51.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="23" alt="image" src="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5btp7MfyI/AAAAAAAAAXc/7eTSsMDXDbo/image_thumb25.png" width="37" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">dropdown/</td><br /><br /> <td align="center" width="133">Содержит изображение, которое используеться как фон выпадающих меню.</td><br /><br /> <td align="center" width="133"><a href="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5bwDfvCyI/AAAAAAAAAXg/yLwBwyzgoqs/image55.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="22" alt="image" src="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5by_WI2CI/AAAAAAAAAXk/Qd5t5iFy4kU/image_thumb27.png" width="17" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">edit/</td><br /><br /> <td align="center" width="133">Содержит графику поля редактирования для строки адреса, списков и многострочных текстовых полей. Иногда операционные системы запрещают заменять этот элемент.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5b04i-kTI/AAAAAAAAAXo/Hu5_4xB1D-4/image59.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="32" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5b2lMC8LI/AAAAAAAAAXs/OgROZV0-zBg/image_thumb29.png" width="45" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">expand_button/</td><br /><br /> <td align="center" width="133">Содержит значки указателей выпадающих элементов в диалоговых окнах.</td><br /><br /> <td align="center" width="133"><a href="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5b5f_KAZI/AAAAAAAAAXw/M6NqDpRc6Zo/image63.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5b8q02SPI/AAAAAAAAAX0/FYd4qE9e02U/image_thumb31.png" width="32" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">header_button/</td><br /><br /> <td align="center" width="133">Содержит графику для заголовков.</td><br /><br /> <td align="center" width="133"><a href="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5b-wW1-MI/AAAAAAAAAX4/Gh5rs2oCR-c/image67.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="22" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5cBTqIibI/AAAAAAAAAX8/c2QCYB6_FG8/image_thumb33.png" width="133" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">icons/</td><br /><br /> <td align="center" width="133">Содержит все значки.</td><br /><br /> <td align="center" width="133"><a href="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5cDjDtdcI/AAAAAAAAAYA/Fl7zenx9nro/image71.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5cGJZDlHI/AAAAAAAAAYE/c7iC7pAlcl4/image_thumb35.png" width="157" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">link/</td><br /><br /> <td align="center" width="133">Содержит значки статуса ссылок.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5cJ_Nup6I/AAAAAAAAAYI/yjit7Laq1vg/image75.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5cMPhrAdI/AAAAAAAAAYM/G5rzpowuUv8/image_thumb37.png" width="58" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">notifier/</td><br /><br /> <td align="center" width="133">Содержит фоновое изображение для уведомителя всплывающих окон.</td><br /><br /> <td align="center" width="133"><a href="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5cPbwq0uI/AAAAAAAAAYQ/lo_T8vFfbDw/image79.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh6.ggpht.com/_Mv3ghSe3B0M/SW5cSQnCR9I/AAAAAAAAAYU/iOWTDhJUDa0/image_thumb39.png" width="75" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">pagebar_close_button/</td><br /><br /> <td align="center" width="133">Содержит графику кнопок закрытия вкладок.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5cUY6UDeI/AAAAAAAAAYY/znfNSDOfcO4/image83.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="11" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5cWnG_3MI/AAAAAAAAAYc/EIEGqqYnm0I/image_thumb41.png" width="87" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">panel_toogle/</td><br /><br /> <td align="center" width="133">Содержит графику перемещения панелей.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5cYldUimI/AAAAAAAAAYg/cFmqwl8W7CM/image87.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="7" alt="image" src="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5ca-l__2I/AAAAAAAAAYk/3CqzOM8Rq1Q/image_thumb43.png" width="37" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">progress/</td><br /><br /> <td align="center" width="133">Содержит графику индикатора прогресса загрузки страницы.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5cdvREbLI/AAAAAAAAAYo/3q_1wMGTK48/image91.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="21" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5cgGYE0PI/AAAAAAAAAYs/l_RnbChU8Iw/image_thumb45.png" width="240" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">radio_button/</td><br /><br /> <td align="center" width="133">Содержит графику для пунктов выбора.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5ciqmwXsI/AAAAAAAAAYw/xfqSffzsw40/image95.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="14" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5ckYME5zI/AAAAAAAAAY0/iPgBo4G0XUE/image_thumb47.png" width="33" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">scrollbar/</td><br /><br /> <td align="center" width="133">Содержит графику для полосы прокрутки.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5cm-OTn2I/AAAAAAAAAY4/mRuwqtZFOIU/image99.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5eWIjEu_I/AAAAAAAAAY8/rAA-ka3gZSw/image_thumb49.png" width="96" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">scrollbar_knob/</td><br /><br /> <td align="center" width="133">Содержит графику для главного элемента полосы прокрутки.</td><br /><br /> <td align="center" width="133"><a href="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5eYKJQWxI/AAAAAAAAAZA/ZzNoNf68O5A/image103.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5eZvPuVvI/AAAAAAAAAZE/KU0R5QQrHbg/image_thumb51.png" width="73" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">selector_button/</td><br /><br /> <td align="center" width="133">Содержит изображение фона, которое находиться вокруг кнопок панели инструментов.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5eb8wSLMI/AAAAAAAAAZI/U5LpvHmQ1hk/image113.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="28" alt="image" src="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5egZYDlqI/AAAAAAAAAZM/ZA5NXz_3Zqw/image_thumb55.png" width="50" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">smilies/</td><br /><br /> <td align="center" width="133">Содержит изображения смайлов.</td><br /><br /> <td align="center" width="133"><a href="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5ejPRZ70I/AAAAAAAAAZQ/FS92MubwI-s/image114.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="17" alt="image" src="http://lh4.ggpht.com/_Mv3ghSe3B0M/SW5elMbRWCI/AAAAAAAAAZU/U1B9eW9w76c/image_thumb56.png" width="225" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">speeddial/</td><br /><br /> <td align="center" width="133">Содержит графику для окна быстрого набора, для окон предпросмотра сайтов, разделителей области поиска по быстрому набору, содержит тени, вместе с диалоговым окном настройки быстрого набора и изображения для операционных систем, которые не поддерживают альфа прозрачность.</td><br /><br /> <td align="center" width="133"><a href="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5eniBkhAI/AAAAAAAAAZY/bOokwt-Ojsw/image115.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="87" alt="image" src="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5eqNPKGNI/AAAAAAAAAZc/M2_wps7LOWo/image_thumb57.png" width="206" border="0" /></a> </td><br /> </tr><br /><br /> <tr><br /> <td align="center" width="133">trust_and_security_button/</td><br /><br /> <td align="center" width="133">Содержит графику для области определения надежности сайта. (зеленый цвет добавлен в версии 9.5)</td><br /><br /> <td align="center" width="133"><a href="http://lh3.ggpht.com/_Mv3ghSe3B0M/SW5esQVnmbI/AAAAAAAAAZg/of9o_U8CnbI/image119.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="22" alt="image" src="http://lh5.ggpht.com/_Mv3ghSe3B0M/SW5eund0s-I/AAAAAAAAAZk/a1fO5C4UjWA/image_thumb59.png" width="88" border="0" /></a> </td><br /> </tr><br /> </tbody></table><br /><br /><h4><strong>Форматы изображений </strong></h4><br /><br /><p>Opera поддерживает PNG, JPEG, BMP и GIF изображения для скинов. В большинстве случаев используют PNG, так как этот формат поддерживает альфа каналы, позволяя отображать некоторые участки изображений прозрачными. Для фоновых изображений используют JPEG потому, что он занимает меньше места, это единственное его преимущество над PNG.</p><br /><br /><h4><strong>Анимации </strong></h4><br /><br /><p>Opera поддерживает анимированные GIF и анимированные PNG в <a href="http://wiki.mozilla.org/APNG_Specification" target="_blank">APNG формате</a>, APNG это продолжение того GIF только с поддержкой более 256 цветов. Анимации будут видны пока интерфейс браузера загружаеться. Анимированные изображения будут использоваться как и все остальные изображения.</p><br /><br /><h4><strong>Загрузка изображений </strong></h4><br /><br /><p>Opera загружает каждое изображение только один раз, не имеет значения сколько раз вы используете одно и тоже изображение в skin.ini, такой же принцип загрузки изображений и на HTML страницах. Это экономит оперативную память. Вы не можете одному и тому же изображению задать разные параметры, когда браузер загружает скин, он использует только первый экземпляр изображения и запоминает его и его параметры. В случае, если вы хотите задать одному изображению разные параметры, для примера, чтобы применить разные <a href="http://dev.opera.com/articles/view/opera-skinning-part-3-skin-ini-explaine/#colorize" target="_blank">цветовые схемы</a>, вам придеться создать несколько копий изображения в разных папках. </p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-8558192924165872762?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0tag:blogger.com,1999:blog-1726851643970701178.post-18470397669401254272008-07-20T05:48:00.001-07:002008-07-20T05:54:14.414-07:00Начало работы с созданием скинов под Оперу(для версии 9.2 - 9.5 бета)<p><strong></strong></p> <p><strong></strong></p> <p>Это мой перевод статьи про создание скинов под браузер Opera. </p> <p>Внимание! В финальной версии браузера Opera 9.52 произошли серьезные изменения интерфейса и это руководство для создания скинов уже к ней не подходит, так как изменилась структура скинов.</p> <p>Перевел для того, чтобы вам было легче разобраться с этой темой.</p> <p>Оригинальная статья: "<a title="http://dev.opera.com/articles/" href="http://dev.opera.com/articles/view/getting-started-with-opera-skinning/">Getting started with Opera skinning</a>"</p> <p>Автор статьи: <a href="http://dev.opera.com/author/15862">Lars Kleinschmidt</a></p> <h4><strong>Вступление</strong></h4> <p>Эта статья научит вас основам создания скинов для браузера Opera.  Я имею в виду изменение внешнего вида браузера, включая изменение изображений, кнопок, панелей инструментов, фонов и других визуальных элементов, которые вы видите в браузере. Помните, что все изображения, которые вы видите в браузере, хранятся на вашем жестком диске. В этой статье я покажу вам, как найти и изменить изображения интерфейса вашего браузера, распаковать и упаковать файлы для использования созданных и измененных файлов в браузере, и покажу на примере, как сделать простые изменения скина вашего браузера, такие как замена изображений кнопок и фона. Статья имеет такую структуру:</p> <ol> <li>Определение расположения папки со скинами </li> <li>Распаковка и упаковка скинов </li> <li>Папка стандартного скина и список файлов скина </li> <li>Пример 1: перемещение кнопки на панели инструментов </li> <li>Пример 2: добавление дополнительной кнопки на панель инструментов </li> <li>Пример 3: добавление фонового изображения к окну быстрого набора </li> </ol> <h4><strong>Определение расположения папки со скинами </strong></h4> <p>Перед тем как начать редактирование скина, сначала нужно найти папку со скинами на вашем жестком диске. Расположение этой папки зависит от операционной системы, на которой установлена Opera и от скина который вы хотите редактировать - расположение стандартного скина отличается от скинов скаченых с Интернета, в том числе с сайта <a href="http://my.opera.com">my.opera.com</a>. Следующий список показывает путь к файлам скинов для разных операционных систем:</p> <ul> <li>Windows: <ul> <li>Стандартный скин расположен в папке Skin в папке установки браузера Opera - в большинстве случаев это C:\Program files\Opera\Skin. </li> </ul> <ul> <li>Скины загруженные из Интернета расположены в папке profile\Skin. Чтобы определить расположение папки profile, нужно выбрать в меню браузера "Справка > О программе". Можете еще зайти в командную строку("Пуск" > "Выполнить") и ввести %APPDATA% и после выполнения должна открыться папка Application Data в которой вы сможете найти папку Opera и подпапку profile, в которой будет располагаться папка skin, полный путь выглядит так:  %APPDATA%\Opera\profile\Skin. </li> </ul> </li> <li>Linux/Unix: <ul> <li>Стандартный скин расположен в папке /usr/share/opera/skin. </li> <li>Скины загруженные из Интернета расположены в папке ~/.opera/skin. Обратите внимание, что папка .opera скрытая, но вы можете просто ввести полный путь в строку адреса вручную. </li> </ul> </li> <li>Mac OS X: <ul> <li>Стандартный скин расположен в пакете приложений, обычно в /Applications/Opera.app/Contents/Resources/Skin(кликните правой клавишей мыши на значке браузера Opera в папке Applications(Приложения), зажмите Ctrl и кликните на нем, и выберите Show Package Contents(Показать содержимое пакета) чтобы получить доступ к внутренним файлам браузера Opera). </li> <li>Скины загруженные из Интернета расположены в папке ~/Library/Preferences/Opera Preferences/Skin. </li> </ul> </li> </ul> <p>Изначально, в стандартном пакете установки идет два скина - standart_skin.zip, который является скином по умолчанию, то есть стандартным, и базовый скин под именем windows_skin.zip или mac_skin.zip. Базовый скин не содержит никаких изображений; он использует графику из стандартного скина. Имена файлов скачаных скинов обычно похожи на имя скина.</p> <h4><strong>Распаковка и упаковка скинов</strong></h4> <p>Скины упакованы в zip архивы(*.zip). Когда Опера применяет скин, она распаковывает и загружает необходимые изображения из скина на лету - каждое изображение загружается только один раз, даже если вы выбирали один и тот же скин несколько раз.</p> <p>Прежде чем начать редактирование скина нужно распаковать его с помощью программ таких как WinZip или 7zip. Вы можете распаковать скин в любую удобную для вас папку, а потом, когда скин будет готов, вам придется его снова упаковать. Попробуйте сейчас найти стандартный скин и распаковать его. Структура скина рассматривается в следующем разделе.</p> <p>После редактирования скина вы должны упаковать файлы обратно, чтобы можно было использовать скин в браузере. Вы должны в папке скина, выбрать все изображения, файл skin.ini, все папки и упаковать в новый zip файл.</p> <p>Чтобы загрузить скин в браузер Opera вы должны разместить zip файл в папке для загруженных скинов, и тогда выбрать пункт в меню браузера "Инструменты" > "Представление" - и тогда у вас появиться возможность выбрать ваш скин из общего списка скинов. Обратите внимание, на то, что если файла skin.ini нету в zip архиве, то браузер Opera выдаст сообщение об ошибке "Невозможно продолжить. Пожалуйста выберите скин сделанный под вашу версию браузера Opera"!</p> <h4><strong>Папка стандартного скина и список файлов скина </strong></h4> <p>Каждый скин содержит конфигурационный файл, именуемый skin.ini, который определяет, как изображения будут использованы в интерфейсе браузера. Эти изображения обычно расположены в нескольких папках, структура разных скинов может отличаться. Вы можете изменить структуру расположения файлов в скине как хотите, но пути к изображениям в файле skin.ini должны  быть корректными. Skin.ini отредактирован в примерах в конце этой статьи, и я покажу вам полностью как изменять файл skin.ini в деталях в следующих статьях.</p> <p>Если вы хотите отредактировать существующий скин, то вам полезно знать, какие изображения и папки соответствуют частям интерфейса браузера Opera. Следующая таблица покажет вам, какие изображения, в каких папках находятся в скине по умолчанию. Некоторые изображения из стандартного скина включенного в браузер Opera можут быть совместимыми со скинами скачеными с сайта <a href="http://my.opera.com">my.opera.com</a>, но это не относиться ко всем скаченым скинам. Если скин, который вы пытаетесь отредактировать имеет другую структуру, то можно определить где какие элементы по именам файлов или по просмотру изображений.</p> <p>Обратите внимание, что структура скинов для Оперы версии 9.5 похожа на 9.2x, но есть некоторые изменения. Мы будем продолжать использовать базовую структуру версии 9.2x, потому что в стандартном скине версии 9.5 произошли существенные изменения в финальной версии релиза.</p> <table cellspacing="0" cellpadding="2" width="590" border="0"><tbody> <tr> <td align="center" width="182">Папка</td> <td align="center" width="160">Описание</td> <td align="center" width="246">Изображения</td> </tr> <tr> <td align="center" width="182">border/</td> <td align="center" width="160">Содержит изображения границы для панели инструментов, разделителей в диалоговых окнах и  границы вокруг кнопок панели инструментов</td> <td align="center" width="246"><a href="http://lh6.ggpht.com/BlogfanPictures/SIMyjXORcqI/AAAAAAAAANU/PcIY2X-N2LQ/image3.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMykb-Ym4I/AAAAAAAAANY/gF5vSItxmvU/image_thumb1%5B1%5D.png" width="45" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">buttons/</td> <td align="center" width="160">Содержит изображения все кнопок панели инструментов, которые указаны в файле Skin.ini</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMyll5l_oI/AAAAAAAAANc/peW-nQGmkEs/image7.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="22" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMym8jUksI/AAAAAAAAANg/K8qnye2swt4/image_thumb3.png" width="218" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">caption/</td> <td align="center" width="160">Содержит изображения свертывания, разворачивания и закрытия окна.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMyoNTl33I/AAAAAAAAANk/8cRb8pIkKXc/image22.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="19" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMyo25G4VI/AAAAAAAAANo/8E2lITsi3jI/image_thumb12.png" width="67" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">checkbox/</td> <td align="center" width="160">Содержит графику пунктов выбора</td> <td align="center" width="246"><a href="http://lh6.ggpht.com/BlogfanPictures/SIMyqDNWnbI/AAAAAAAAANs/nC9_C5Jt_sw/image15.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="14" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMyrJQFgyI/AAAAAAAAANw/NnI9Ss14CLw/image_thumb7.png" width="35" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">contacts/</td> <td align="center" width="160">Содержит изображения контактов в адресной книге</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMysRYwoDI/AAAAAAAAAN0/9Lr71jE3xgU/image26.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMytuX4-DI/AAAAAAAAAN4/Zp86nIYlGbY/image_thumb14.png" width="195" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">dialog/</td> <td align="center" width="160">Содержит фон для диалоговых окон</td> <td align="center" width="246"><a href="http://lh4.ggpht.com/BlogfanPictures/SIMyupVyDCI/AAAAAAAAAN8/UlrHf6TuovU/image30.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMyviZa5vI/AAAAAAAAAOA/zAa2hbn-_Tg/image_thumb16.png" width="45" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">dialog_button_border/</td> <td align="center" width="160">Содержит тени для кнопок в диалоговых окнах(не используется в версии 9.2 и выше)</td> <td align="center" width="246"><a href="http://lh6.ggpht.com/BlogfanPictures/SIMyww4rRSI/AAAAAAAAAOE/xtOn-X7Qdts/image34.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMyxkKDV8I/AAAAAAAAAOI/mGcNr4DWI8Y/image_thumb18.png" width="45" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">dialog_images/</td> <td align="center" width="160">Содержит изображения для разных окон</td> <td align="center" width="246"><a href="http://lh4.ggpht.com/BlogfanPictures/SIMyy4Ct9GI/AAAAAAAAAOM/JeYxOXumwrI/image38.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="32" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMy00SwISI/AAAAAAAAAOQ/z6X_ZzIAWWs/image_thumb20.png" width="211" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">dialog_page/</td> <td align="center" width="160">Содержит графику для границ и теней вокруг внутреннего фона диалоговых окон.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMy2FMNcuI/AAAAAAAAAOU/acfFhWDF6FQ/image42.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMy3EL1ldI/AAAAAAAAAOY/scfweiyx9NI/image_thumb22.png" width="45" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">drop_insert/</td> <td align="center" width="160">Содержит изображение, которые появляется при перемещении кнопок панели инструментов.</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMy4fb-h4I/AAAAAAAAAOc/e3o02Se4Ws0/image46.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="23" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMy5ouy--I/AAAAAAAAAOg/MFtAbnmM7Jo/image_thumb24.png" width="37" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">edit/</td> <td align="center" width="160">Содержит изображение адресной строки, разнообразных списков  и многострочных полей для редактирования. Этот элемент не всегда применяется, потому, что иногда операционные системы не дают доступа к этому элементу.</td> <td align="center" width="246"><a href="http://lh4.ggpht.com/BlogfanPictures/SIMy6ntyIWI/AAAAAAAAAOk/0nlRHZsiZWQ/image50.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="32" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMy7voF0fI/AAAAAAAAAOo/73WgxndwMoc/image_thumb26.png" width="45" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">header_button/</td> <td align="center" width="160">Содержит графику для заголовков, например этот графический элемент взят из почты встроенной в Оперу.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMy8ljDhRI/AAAAAAAAAOs/KfZHIr_FcXs/image54.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="20" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMy9lIANFI/AAAAAAAAAOw/FE63-MHN-lo/image_thumb28.png" width="45" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">icons/</td> <td align="center" width="160">Содержит многие изображения, за исключением тех, которые описаны в других частях таблицы. </td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMy-k6bUkI/AAAAAAAAAO0/QeinI1ZI-uk/image58.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMzA1qcqpI/AAAAAAAAAO4/VGczVF0WmVQ/image_thumb30.png" width="186" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">notifier/</td> <td align="center" width="160">Содержит фоновое изображение для елемента блокирующего всплывающие окна.</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzB2L4wtI/AAAAAAAAAO8/0t2IfSLP4E0/image62.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzCxrjyNI/AAAAAAAAAPA/Lr9vymWbGXg/image_thumb32.png" width="75" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">pagebar_close_button/</td> <td align="center" width="160">Содержит графику для кнопок, которые закрывают вкладки.</td> <td align="center" width="246"><a href="http://lh6.ggpht.com/BlogfanPictures/SIMzDwfju3I/AAAAAAAAAPE/djQeNEQqu5c/image66.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="16" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzEzdPe6I/AAAAAAAAAPI/PbRJlY2Mtb8/image_thumb34.png" width="79" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">panel_toggle/</td> <td align="center" width="160">Содержит графику используемую при перемещении панелей инструментов</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzGLmLzvI/AAAAAAAAAPM/aNF4EjV4D3k/image70.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="7" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMzHNHVNYI/AAAAAAAAAPQ/BTjqIWpcD8g/image_thumb36.png" width="37" border="0" /></a></td> </tr> <tr> <td align="center" width="182">progress/</td> <td align="center" width="160">Содержит графику индикатора процесса загрузки страницы</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzIXoS7uI/AAAAAAAAAPU/gnbyGTJ1j5Y/image74.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="21" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzJ0yVaVI/AAAAAAAAAPY/_nUVPzbh8OI/image_thumb38.png" width="240" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">push_button/</td> <td align="center" width="160">Содержит базовую графику для таких кнопок как ОК, Cancel, и многих кнопок в диалоговых окнах, полосах прокрутки.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMzKwbWZsI/AAAAAAAAAPc/4WMrpiymvuE/image78.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMzL8UiurI/AAAAAAAAAPg/YfGUDyBKoGY/image_thumb40.png" width="152" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">push_default_button/</td> <td align="center" width="160">Кнопка выделенная по умолчанию, при нажатии клавиши Enter она активируется.</td> <td align="center" width="246"><a href="http://lh4.ggpht.com/BlogfanPictures/SIMzM4_9twI/AAAAAAAAAPk/KyY3MQXscg4/image82.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzNwJfmyI/AAAAAAAAAPo/IBFKkD9YP_Q/image_thumb42.png" width="106" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">radio_button/</td> <td align="center" width="160">Содержит графику пунктов выбора.</td> <td align="center" width="246"><a href="http://lh6.ggpht.com/BlogfanPictures/SIMzOw3XqRI/AAAAAAAAAPs/uiD-HXK5_B0/image86.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="14" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMzP6ism_I/AAAAAAAAAPw/60KuVrtDInE/image_thumb44.png" width="33" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">scrollbar/</td> <td align="center" width="160">Содержит графику для полосы прокрутки, для её фона и указателей.</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzREVbPeI/AAAAAAAAAP0/UufoEXpiEQs/image90.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzRwBjRPI/AAAAAAAAAP4/qRRQNOv6cmk/image_thumb46.png" width="96" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">scrollbar_knob/</td> <td align="center" width="160">Содержит графику для полосы прокрутки, для активного елемента.</td> <td align="center" width="246"><a href="http://lh4.ggpht.com/BlogfanPictures/SIMzS0WVbwI/AAAAAAAAAP8/uaEzG5H5heU/image94.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="29" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzUNjSJlI/AAAAAAAAAQA/jslc7slktW8/image_thumb48.png" width="54" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">selector_button/</td> <td align="center" width="160">Содержит фоновое изображение которое используется вокруг кнопок панели инструментов, для трех состояний: при наведении курсора мыша, при выборе и при нажатии.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMzVfAcwNI/AAAAAAAAAQE/NN6J8GKBQVE/image98.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="42" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMzWvf1rmI/AAAAAAAAAQI/TnfVpEbzWJU/image_thumb50.png" width="240" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">smilies/</td> <td align="center" width="160">Содержит изображения смайлов.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMzX8WmzrI/AAAAAAAAAQM/dOB60SXmvLw/image102.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="17" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzZV2fwoI/AAAAAAAAAQQ/aayHn__gPWY/image_thumb52.png" width="225" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">speeddial/</td> <td align="center" width="160">Содержит графику для быстрого набора, включая значки, разделитель поиска по быстрому набору, тени, изображения для рамки предпросмотра сайтов и изображения для операционных систем не поддерживающих альфа прозрачность.</td> <td align="center" width="246"><a href="http://lh5.ggpht.com/BlogfanPictures/SIMzaZpYwFI/AAAAAAAAAQU/v9CcA74WXBQ/image111.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="87" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzbW3B21I/AAAAAAAAAQY/lkZe4TmVPxU/image_thumb59.png" width="206" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">startup_dialog/</td> <td align="center" width="160">Содержит графику для заголовка 7 версии стартового диалога(уже не используется)</td> <td align="center" width="246"> </td> </tr> <tr> <td align="center" width="182">tab_button/</td> <td align="center" width="160">Содержит графику для вкладок для главного окна и диалоговых окон.</td> <td align="center" width="246"><a href="http://lh6.ggpht.com/BlogfanPictures/SIMzchW8UZI/AAAAAAAAAQc/ll2Bo1t9FB0/image115.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="17" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzd8HtMEI/AAAAAAAAAQg/te2O0KfBiqE/image_thumb61.png" width="240" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">tab_button_bottom/</td> <td align="center" width="160">Содержит графику для того варианта, когда вкладки расположены внизу окна.</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzfF6zZVI/AAAAAAAAAQk/Gf-g5QBUvnw/image119.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="26" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMzgPoja1I/AAAAAAAAAQo/nbDOG1dUERE/image_thumb63.png" width="237" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">toolbar_button/</td> <td align="center" width="160">Содержит графику для 7 версии фона кнопок - уже не используеться</td> <td align="center" width="246"> </td> </tr> <tr> <td align="center" width="182">trust_and_security_button/</td> <td align="center" width="160">Содержит графику для области определения надежности страницы в строке адреса (зеленый цвет добавлен в версии 9.5)</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzhfqKDgI/AAAAAAAAAQs/pkXUYLQ5j-g/image123.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="22" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMziQDSwAI/AAAAAAAAAQw/KEzer_aYfFQ/image_thumb65.png" width="124" border="0" /></a> </td> </tr> <tr> <td align="center" width="182">window/</td> <td align="center" width="160">Содержит основной фон для панели инструментов - изменяя это изображение - это самый простой путь изменить внешний вид браузера.</td> <td align="center" width="246"><a href="http://lh3.ggpht.com/BlogfanPictures/SIMzjqURxJI/AAAAAAAAAQ0/6CaCZN0Me8g/image135.png"><img height="49" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzkoSmn6I/AAAAAAAAAQ4/G--qx9YPlPU/image_thumb75.png" width="76" border="0" /></a> </td> </tr> </tbody></table> <p> </p> <p>Теперь, я приведу вам несколько примеров, как заменить стандартные кнопки и фоновые изображения, и как добавить изображение для новой кнопки панели инструментов.</p> <h4><strong>Пример 1: перемещение кнопки на панели инструментов </strong></h4> <p>В этом примере вы замените изображение кнопки "Обновить" на изображение показанное на рисунке.</p> <p><a href="http://lh5.ggpht.com/BlogfanPictures/SIMzlguDLTI/AAAAAAAAAQ8/i8nDLadTjzk/image4.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="20" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzmqemWpI/AAAAAAAAARA/hUjUP1dL90s/image_thumb1.png" width="22" border="0" /></a> </p> <p><a href="http://devfiles.myopera.com/articles/342/New_Reload.png" target="_blank">Скачать изображение в формате PNG</a></p> <p>Сначала нужно распаковать стандартный архив скина, как было описано выше. Изображение которое вы хотите изменить, это кнопка на панели инструментов, она должна быть расположена в папке /buttons - зайдите в эту папку и найдите изображение reload.png.</p> <p>Теперь замените старое изображение reload.png на представленное выше или на какое захотите.</p> <p>Чтобы использовать отредактированный скин в браузере нужно запаковать его обратно. вернитесь в папку скина, в которой расположен файл skin.ini, выберите все файлы и создайте новый zip архив - имя выбирайте какое захотите.</p> <p>Теперь переместите этот zip архив в папку skin там где была установлена Opera(например, C:\Program Files\Opera\skin), затем перезапустите браузер, если он был запущен и зайдите в меню "Инструменты" > "Представление..." и вы должны увидеть свой скин в общем списке скинов. Выберите его и вы увидите измененную клавишу "Обновить".</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SIMzo1s9A0I/AAAAAAAAARE/3GUaXUWOhVA/image9.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="428" alt="image" src="http://lh5.ggpht.com/BlogfanPictures/SIMzrd4kUwI/AAAAAAAAARI/zepRQtbZsQY/image_thumb4.png" width="523" border="0" /></a> </p> <h4><strong>Пример 2: добавление дополнительной кнопки на панель инструментов</strong></h4> <p>Opera дает вам возможность добавлять любые кнопки на любую панель инструментов. Эти кнопки могут использовать изображения уже содержащиеся в скине, но люди часто добавляют свои изображения для кнопок.</p> <p>В этом примере вы впервые добавите вашу собственную кнопку на ваши панели инструментов и используете изображение для создания кнопки. Этот пример не содержит всех деталей, как пример 1 потому вы должны прочитать и попробывать сделать первый пример, если вы еще его не сделали.</p> <p>Чтобы добавить функцию кнопки кликните <a href="opera:/button/Switch%20to%20next%20page,,,,%22Next%20page%22">здесь</a>(вы должны смотреть эту страницу через браузер Opera, чтобы добавить данную функцию), должно появиться окно, нажмите ОК и появиться диалоговое окно "Мои кнопки", перетащите надпись "Next page" на любую панель инструментов. Это должно выглядеть так, как на изображении ниже. Ссылка кнопки должна соответствовать изображению "Next page" для этой кнопки, теперь осталось только добавить изображение для этой кнопки, но об этом чуть попозже.</p> <p><a href="http://lh6.ggpht.com/BlogfanPictures/SIMztXCVdOI/AAAAAAAAARQ/sNCfyW7YSUA/image13.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="35" alt="image" src="http://lh6.ggpht.com/BlogfanPictures/SIMzvA3CrvI/AAAAAAAAARU/TGSLdTGsC4M/image_thumb6.png" width="158" border="0" /></a> </p> <p>Так выглядит наша кнопка без изображения. </p> <p>Дальше распакуйте скин, как вы делали это в первом примере и зайдите в папку buttons/ - это самое логичное место чтобы расположить здесь изображение для новой кнопки. Теперь, нужно найти изображение, которое будет использоваться для этой кнопки - подходящее изображение расположено ниже:</p> <p><a href="http://lh5.ggpht.com/BlogfanPictures/SIMzwPABzhI/AAAAAAAAARY/smXk79ME9TQ/image17.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="22" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzxD24NhI/AAAAAAAAARc/4u9IrFu9YJo/image_thumb8.png" width="22" border="0" /></a> </p> <p><a href="http://devfiles.myopera.com/articles/342/nextpage.png" target="_blank">Скачать изображение в формате PNG</a></p> <p>Изображение для нашей кнопки.</p> <p>Переименуйте изображение в nextpage.png и сохраните в папке buttons/.</p> <p>Еще немного осталось до конца этого примера - осталось только связать изображение с кнопкой через файл Skin.ini. Откройте файл Skin.ini и найдите раздел [Images]. Строчки в этой секции определяют пути к изображениям разных кнопок. Нам нужно добавить строчку в виде Image name = path/to/image.png. Только для нашей кнопки. Добавьте следующую строчку в любое место раздела [Images], чтобы связать наше изображение с созданной кнопкой:</p> Next page = buttons/nextpage.png <p>Сохраните изменения и закройте текстовый редактор, запакуйте файлы и переместите созданный архив в папку skin в папке Opera, как уже было описано выше. Теперь перезапустите браузер и выберите скин как раньше - теперь должно появиться изображение кнопки "Next page", как показано на рисунке:</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SIMzyUfjlnI/AAAAAAAAARg/MtOchg3cgxs/image21.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="35" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIMzzlP6gLI/AAAAAAAAARk/gQocnOL0WBc/image_thumb10.png" width="99" border="0" /></a> </p> <h4><strong>Пример 3: добавление фонового изображения к окну быстрого набора </strong></h4> <p>В этом примере мы заменим белый фон на странице Быстрого набора на изображение показанное ниже:</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SIMz1BCwYmI/AAAAAAAAARo/ly7VXD_kfC4/image25.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="150" alt="image" src="http://lh3.ggpht.com/BlogfanPictures/SIMz2sPZG9I/AAAAAAAAARs/iIDXkUg5eRQ/image_thumb12%5B1%5D.png" width="150" border="0" /></a> </p> <p><a href="http://devfiles.myopera.com/articles/342/speeddialbackground.png" target="_blank">Скачать изображение в формате PNG</a></p> <p>Это изображение циклически замостит все свободное пространство.</p> <p>Опять вам придеться распаковывать скин. Теперь нужно разместить это изображение в папке speeddial/(переименуйте изображение на speeddialbackground.png.)</p> <p>Дальше откройте файл skin.ini в текстовом редакторе. Фоновое изображение определяется в разделе [Speed Dial Widget Skin]. По умолчанию этот раздел должен выглядеть так:</p> <blockquote> <p>[Speed Dial Widget Skin] <br />Padding Left                    = 1 <br />Padding Top                     = 1 <br />Padding Right                  = 1 <br />Padding Bottom                = 1 <br />Border                              = 1 <br />Border Color                      = #bec2cb <br />Color                                 = #000000 <br />Text Color                         = #000000</p> </blockquote> <p>Чтобы получить возможность использовать изображение в качестве фона, нужно добавить в этот раздел еще одну строчку:</p> <blockquote> <p>Type                        = BoxTile</p> </blockquote> <p>Теперь фоновое изображение будет заполнять все свободное пространство, но нужно еще добавить строчку определяющую путь к изображению:</p> <blockquote> <p>Tile Center                    = speeddial/speeddialbackground.png</p> </blockquote> <p>Эта строчка определяет путь к изображению, которое мы хотим использовать. После всех изменений раздел [Speed Dial Widget Skin] должен выглядеть так:</p> <blockquote> <p>[Speed Dial Widget Skin] <br />Type                    = BoxTile <br />Tile Center                = speeddial/speeddialbackground.png <br />Padding Left                = 1 <br />Padding Top                = 1 <br />Padding Right                = 1 <br />Padding Bottom                = 1 <br />Border                    = 1 <br />Border Color                = #bec2cb <br />Color                    = #000000 <br />Text Color                = #000000</p> </blockquote> <p>Сохраните изменения и закройте текстовый редактор.</p> <p>Теперь упакуйте файлы в zip архив и переместите его в папку Opera/skin и выберите новый скин через меню. Теперь ваша страница быстрого набора должна выглядеть также как на картинке:</p> <p><a href="http://lh5.ggpht.com/BlogfanPictures/SIMz8sYv8eI/AAAAAAAAARw/OAl5JC6VLmw/image30%5B1%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="606" alt="image" src="http://lh4.ggpht.com/BlogfanPictures/SIM0AikKLUI/AAAAAAAAAR0/q13vDaz2TrQ/image_thumb15.png" width="850" border="0" /></a></p> <h4><strong>Резюме</strong></h4> <p>В этой статье я показал вам основы работы со скинами, и рассказал как их распаковать, изменять их, посредством замены и добавления графических изображений, и как применять сделанные изменения. Скоро будут новые статьи с более подробным описание редактирования скинов под браузер Opera.</p> <p>Вы можете скачать готовый скин, со всеми сделанными изменениями, которые я описал в трех примера по этой <a href="http://dev.opera.com/articles/view/getting-started-with-opera-skinning/new_skin.zip" target="_blank">ссылке</a>.</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-1847039766940125427?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0tag:blogger.com,1999:blog-1726851643970701178.post-68420411802995134512008-07-16T02:47:00.001-07:002008-07-16T02:47:17.429-07:00Сайт дизайнерской студии(dragoninteractive.com)<p><a href="http://lh4.ggpht.com/BlogfanPictures/SH3DirykmcI/AAAAAAAAALg/cRrZgpLG5Bk/dragoninteractive2%5B3%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="145" alt="dragoninteractive2" src="http://lh5.ggpht.com/BlogfanPictures/SH3DkEPPfnI/AAAAAAAAALk/wwaKT_t3BFk/dragoninteractive2_thumb%5B1%5D.jpg" width="240" border="0" /></a> </p> <p>Это обновленный сайт дизайнерской студии расположенной в Лос Анжелесе. Красивый и современный сайт.</p> <p>Раньше студии Dragon Interactive имели другое название - Dragon Labs, но теперь компания расширилась и сменила название на Dragon Interactive и сделала редизайн сайта.</p> <p>Сама студия занимаеться разработкой сайтов, логотипов, разнообразных веб-приложений, пользовательских интерфейсов, иконок, стартапов.</p> <p>Еще студия Dragon Interactive предоставляет и типографические услуги.</p> <p><a href="http://lh3.ggpht.com/BlogfanPictures/SH3Dmg8fz_I/AAAAAAAAALo/CRfj3TO8QNw/dragoninteractive%5B3%5D.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="150" alt="dragoninteractive" src="http://lh4.ggpht.com/BlogfanPictures/SH3DotzonJI/AAAAAAAAALs/ailQiD43w84/dragoninteractive_thumb%5B1%5D.jpg" width="240" border="0" /></a></p> <p>На сайте есть возможность просмотреть таймлайн, то есть активность студии в этом году. Очень интересный сайт.</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-6842041180299513451?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0tag:blogger.com,1999:blog-1726851643970701178.post-44067308736643533262008-07-15T12:48:00.001-07:002008-07-15T12:48:56.725-07:00Бесплатные флеш шаблоны сайтов<p><a href="http://lh6.ggpht.com/BlogfanPictures/SHz-kUEkXjI/AAAAAAAAAKw/-R4Pls9hJ78/flashmocom%5B7%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="224" alt="flashmocom" src="http://lh3.ggpht.com/BlogfanPictures/SHz-nQ49MUI/AAAAAAAAAK0/8FZcvhUQWsg/flashmocom_thumb%5B3%5D.jpg" width="240" border="0" /></a>  </p> <p>Нашел сайт, на котором полно бесплатных флеш шаблонов сайтов и всяких флеш кнопок и элементов. Есть даже флеш 3D галерея. Сайт - <a href="http://flashmo.com" target="_blank">flashmo.com</a>.</p> <p>Для новичка ресурс вообще отличный, здесь очень много хороших профессиональных работ. Есть с кого брать пример.</p> <p>Решил отобрать работы, которые мне понравились больше всего:</p> <p>1)Movies</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SHz-rrNtPGI/AAAAAAAAAK4/nI1KyRBei-0/movies%5B3%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="187" alt="movies" src="http://lh4.ggpht.com/BlogfanPictures/SHz-tRiSXLI/AAAAAAAAAK8/bpe0qgYf1P4/movies_thumb%5B1%5D.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.flashmo.com/preview/flashmo_080_movie" target="_blank">Просмотреть</a></p> <p>2)3D Cylinder Box</p> <p><a href="http://lh6.ggpht.com/BlogfanPictures/SHz-weOEezI/AAAAAAAAALA/R0tTWANhaik/3dcylinderbox%5B3%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="187" alt="3dcylinderbox" src="http://lh4.ggpht.com/BlogfanPictures/SHz-yALryfI/AAAAAAAAALE/x02uOoQd9jA/3dcylinderbox_thumb%5B1%5D.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.flashmo.com/preview/flashmo_096_3d_cylinder_box" target="_blank">Просмотреть</a></p> <p>3)Circular</p> <p><a href="http://lh3.ggpht.com/BlogfanPictures/SHz-0ZyFACI/AAAAAAAAALI/4zShApcvMvk/circular%5B3%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="187" alt="circular" src="http://lh5.ggpht.com/BlogfanPictures/SHz-2WFLJYI/AAAAAAAAALM/5MBB54lzKYQ/circular_thumb%5B1%5D.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.flashmo.com/preview/flashmo_104_circular" target="_blank">Просмотреть</a></p> <p>4)XML Horizontal Menu</p> <p><a href="http://lh3.ggpht.com/BlogfanPictures/SHz-6TW1HJI/AAAAAAAAALQ/PeTJvS2rGW8/xmlhorizontalmenu%5B7%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="137" alt="xmlhorizontalmenu" src="http://lh6.ggpht.com/BlogfanPictures/SHz-8fdY0NI/AAAAAAAAALU/KcktgEZYOdc/xmlhorizontalmenu_thumb%5B5%5D.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.flashmo.com/preview/flashmo_114_horizontal_menu" target="_blank">Просмотреть</a></p> <p>5)The Dream</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SHz_C2EYLNI/AAAAAAAAALY/OCgEVy5Dgog/thedream%5B3%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="240" alt="thedream" src="http://lh4.ggpht.com/BlogfanPictures/SHz_Jd3mGGI/AAAAAAAAALc/lJh03Etlfuo/thedream_thumb%5B1%5D.jpg" width="233" border="0" /></a> </p> <p><a href="http://www.flashmo.com/preview/flashmo_116_dream" target="_blank">Просмотреть</a></p> <p>На сайте еще полно интересных работ, заходите не пожалеете.</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-4406730873664353326?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0tag:blogger.com,1999:blog-1726851643970701178.post-79823543829810011142008-07-15T12:14:00.001-07:002008-07-15T12:14:42.112-07:00Бесплатные CSS шаблоны сайтов<p><a href="http://lh5.ggpht.com/BlogfanPictures/SHz2eGMsTnI/AAAAAAAAAKA/wMwJC5szJLw/csstemplates3.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="176" alt="css-templates" src="http://lh3.ggpht.com/BlogfanPictures/SHz2guaY8yI/AAAAAAAAAKE/ylEWxLwV2wc/csstemplates_thumb1.jpg" width="240" border="0" /></a> </p> <p>Недавно нашел отличный сайт на котором можно скачать бесплатные css шаблоны сайтов, его можно найти по адресу <a title="browse all CSS templates" href="http://www.freecsstemplates.org" target="_blank">www.freecsstemplates.org</a>. Сайт часто пополняеться новыми шаблонами.</p> <p>Некоторые шаблоны сделаны просто великолепно, и причем, хорошо смотряться даже под широкоэкранным монитором.</p> <p>Я решил сделать подборку избранных шаблонов, которые мне понравились и представить вашему вниманию:</p> <p>1)Zenlike</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SHz2mtvRAHI/AAAAAAAAAKI/fGBj9tgCxSw/zenlike%5B4%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="150" alt="zenlike" src="http://lh5.ggpht.com/BlogfanPictures/SHz2pR4veRI/AAAAAAAAAKM/OHU3EGIpFwE/zenlike_thumb%5B1%5D.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.freecsstemplates.org/preview/zenlike" target="_blank">Просмотреть</a> | <a href="http://www.freecsstemplates.org/download/zip/zenlike" target="_blank">Скачать</a></p> <p>2)Thermal</p> <p><a href="http://lh5.ggpht.com/BlogfanPictures/SHz2viIS2dI/AAAAAAAAAKQ/lXtzdoMHKhg/thermal3.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="150" alt="thermal" src="http://lh4.ggpht.com/BlogfanPictures/SHz2ypf12qI/AAAAAAAAAKU/Vq_fCoEk3Zc/thermal_thumb1.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.freecsstemplates.org/preview/thermal" target="_blank">Просмотреть</a> | <a href="http://www.freecsstemplates.org/download/zip/thermal" target="_blank">Скачать</a></p> <p>3)Flavour</p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SHz23WlCrQI/AAAAAAAAAKY/VA8r2ub0Cqc/flavour3.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="150" alt="flavour" src="http://lh3.ggpht.com/BlogfanPictures/SHz27JjOmrI/AAAAAAAAAKc/huVL9R8rL2U/flavour_thumb1.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.freecsstemplates.org/preview/flavour" target="_blank">Просмотреть</a> | <a href="http://www.freecsstemplates.org/download/zip/flavour" target="_blank">Скачать</a></p> <p>4)Puzzled</p> <p><a href="http://lh6.ggpht.com/BlogfanPictures/SHz2_uuj3UI/AAAAAAAAAKg/6CtdYXbwFLQ/puzzled3.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="150" alt="puzzled" src="http://lh4.ggpht.com/BlogfanPictures/SHz3BqG9goI/AAAAAAAAAKk/2hTXUZ1aT_4/puzzled_thumb1.jpg" width="240" border="0" /></a> </p> <p><a href="http://www.freecsstemplates.org/preview/puzzled" target="_blank">Просмотреть</a> | <a href="http://www.freecsstemplates.org/download/zip/puzzled" target="_blank">Скачать</a></p> <p>5)Nature's chasm </p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SHz3FdG-XhI/AAAAAAAAAKo/WiD7aYqAseA/natureschasm3.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="150" alt="natureschasm" src="http://lh5.ggpht.com/BlogfanPictures/SHz3HkBKq7I/AAAAAAAAAKs/PKmjm1bShcs/natureschasm_thumb1.jpg" width="240" border="0" /></a></p> <p><a href="http://www.freecsstemplates.org/preview/naturescharm" target="_blank">Просмотреть</a> | <a href="http://www.freecsstemplates.org/download/zip/naturescharm" target="_blank">Скачать</a></p> <p>Все отобранные шаблоны сделаны в 2008 году. Очень интересные работы студии <a href="http://www.nodethirtythree.com/">NodeThirtyThree Design</a>. Особенно мне нравиться <a href="http://www.freecsstemplates.org/preview/zenlike" target="_blank">Zenlike</a>.</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-7982354382981001114?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0tag:blogger.com,1999:blog-1726851643970701178.post-32424340277312840612008-07-15T11:38:00.001-07:002008-07-15T11:38:45.902-07:00Оригинальный и интересный сайт Microsoft Visio 2007(www.visiotoolbox.ru)<p><a href="http://lh5.ggpht.com/BlogfanPictures/SHzulUdP-JI/AAAAAAAAAJw/Rk-lW5m77L0/1_reedited%5B12%5D.jpg"><img height="277" alt="1_reedited" src="http://lh3.ggpht.com/BlogfanPictures/SHzunjLI_MI/AAAAAAAAAJ0/xxSXNwAwL_U/1_reedited_thumb%5B10%5D.jpg" width="528" border="0" /></a></p> <p>Сайт очень оригинально сделан, что-то похожее на игру, вы являетесь в роли путешественника, который путешествует вокруг данного острова и в конце своего путешествия находит сокровища. Разработчики очень оригинально подошли к разработке довольно таки серьезного проекта для Microsoft.</p> <p> </p> <p><a href="http://lh4.ggpht.com/BlogfanPictures/SHzuqTCK-kI/AAAAAAAAAJ4/TRkF8H6oLc0/2_reedited%5B7%5D.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="279" alt="2_reedited" src="http://lh6.ggpht.com/BlogfanPictures/SHzus5heouI/AAAAAAAAAJ8/2-UJGcZQbl8/2_reedited_thumb%5B5%5D.jpg" width="528" border="0" /></a>  </p> <p>Во время вашего путешествия по острову встечаються всякие свитки - там описаны страницы сайта "Кодекс", "Журнал", "Рейтинг". Очень интересный сайт. Приятно пользоваться. Очень креативно сделан, в интернете что-то похожее найти просто не удасться, разработчики проявили творческий подход. Причем, наверно, впервые, чтобы сайт от Microsoft выглядел так необычно и креативно. Обычно подобные сайты набиты информацией о программном обеспечении, а тут такое отвлечение от темы и это делает сайт еще интереснее.</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-3242434027731284061?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0tag:blogger.com,1999:blog-1726851643970701178.post-77458538620516240282008-07-12T09:52:00.001-07:002008-07-12T09:52:14.927-07:00Старт блога<p>Сегодня стартовал мой блог о веб-дизайне. Буду стараться выкладывать интересные работы в блог.</p> <p>Буду также отбирать интересные сайты по темама дизайна, CSS, JavaScript, различные шаблоны сайтов.</p> <p>А еще буду публиковать разнообразные уроки дизайна и необходимые к ним инструменты.</p> <p>На старт этого блога меня впечатлила одна разработка для создания красивых всплывающих тултипов(tooltips).</p> <p>Блог, в основном, будет для новичков, пытающихся разобраться в дизайне и HTML.</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1726851643970701178-7745853862051624028?l=majordesigner.blogspot.com' alt='' /></div>Blogfannoreply@blogger.com0