http://supportbigforu.youbb.ru/ Форум технической поддержки ru-ru Sat, 01 Sep 2012 10:23:20 +0400 MyBB/mybb.ru http://supportbigforu.youbb.ru/viewtopic.php?pid=568#p568 <p><span style="color: red"><span style="font-size: 18px"></p><div class="quote-box quote-main"><blockquote><p>С удовольствием послушаем все ваши отзывы даже если они отрицательные!</p></blockquote></div><p></span><span style="font-family: Impact"></span><br /><span style="display: block; text-align: right"><span style="font-size: 16px">(Admin:gids)</span></span></span></p> mybb@mybb.ru (gids) Sat, 01 Sep 2012 10:23:20 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=568#p568 http://supportbigforu.youbb.ru/viewtopic.php?pid=567#p567 <p>Ошибка испраленна, спасибо за предоставленную информацию!</p> mybb@mybb.ru (barON) Tue, 27 Mar 2012 23:08:26 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=567#p567 http://supportbigforu.youbb.ru/viewtopic.php?pid=566#p566 <p>Проблема устранена - функция удалена.</p> mybb@mybb.ru (barON) Tue, 27 Mar 2012 22:22:06 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=566#p566 http://supportbigforu.youbb.ru/viewtopic.php?pid=556#p556 <p>да) очень нужная вещь</p> mybb@mybb.ru (CoinBox) Mon, 26 Mar 2012 23:46:29 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=556#p556 http://supportbigforu.youbb.ru/viewtopic.php?pid=531#p531 <p><strong>barON</strong>, спасибо</p> mybb@mybb.ru (CoinBox) Mon, 26 Mar 2012 20:03:23 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=531#p531 http://supportbigforu.youbb.ru/viewtopic.php?pid=528#p528 <p><strong><span style="display: block; text-align: center"><span style="color: red">Расширение последних сообщений</span></span></strong><br />Модификация связана с выведением аватара перед ссылкой на тему на главной странице форума и странице просмотра отдельного раздела (форума).<br /><img class="postimg" loading="lazy" src="http://uploads.ru/i/P/F/9/PF9Af.png" alt="http://uploads.ru/i/P/F/9/PF9Af.png" /></p> mybb@mybb.ru (barON) Sun, 25 Mar 2012 22:12:25 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=528#p528 http://supportbigforu.youbb.ru/viewtopic.php?pid=525#p525 <p><strong>Пожалуйста, создавайте для каждой ошибки свою отдельную тему.</strong><br />Напомню, что в этом разделе подразумевается писать о ошибках сервиса и движка форума, глобальных ошибках <br /><span style="font-style: italic">Но никак не о тех проблемах, которые создают сами себе неопытные админы форумов.</span></p> mybb@mybb.ru (barON) Sat, 17 Mar 2012 00:27:21 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=525#p525 http://supportbigforu.youbb.ru/viewtopic.php?pid=524#p524 <p><strong>Отличная новость для пользователей сервиса BIGFO.<br />Теперь стало возможным работать с резервными копиями ваших форумов самостоятельно.<br />Посмотреть список резервных копий, восстановить или создать срочную резервную копию форума теперь можно за несколько минут, не покидая админ-центра своего форума.</strong><br /><img class="postimg" loading="lazy" src="http://uploads.ru/i/Z/x/3/Zx3np.png" alt="http://uploads.ru/i/Z/x/3/Zx3np.png" /><br /><strong>В целях безопасности, выполнять действия с резервными копиями может только основатель форума.<br />Вы можете бесплатно использовать возможности резервного копирования не чаще 1 раза в месяц.<br />Мы также предусмотрели<br /><span style="color: red">Расширенную услугу по резервному копированию форума,<br />которая включает все возможности и добавляет<br />ежедневное автоматическое архивирование форума.</span><br />Количество операций с резервными копиями можно увеличить до 30 в месяц.<br />Стоимость расширенной услуги: от 90 кредитов в месяц, в зависимости от необходимого числа операций с резервными копиями.</strong></p> mybb@mybb.ru (barON) Mon, 12 Mar 2012 14:50:32 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=524#p524 http://supportbigforu.youbb.ru/viewtopic.php?pid=503#p503 <p>Теперь отправить сообщение стало еще проще!<br />Прото нажмите комбинацию клавиш Ctrl + Enter и Ваше сообщение будет отправленно. <br />При&#160; этом старая функция отправки (ввиде кнопки под формой ответа) будет работать, как и раньше.</p> mybb@mybb.ru (barON) Wed, 29 Feb 2012 14:43:04 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=503#p503 http://supportbigforu.youbb.ru/viewtopic.php?pid=501#p501 <p>Теперь, когда Ваш текст&#160; оформлен как код, его можно будет выделить одним нажатием. <br />Особенно, если текст большой удобнее просто 1 нажатием его скопировать, ем выделять самостоятельно.<br />Чтобы оформить текст &quot;кодом&quot;, нажмите на <img class="postimg" loading="lazy" src="http://uploads.ru/t/Y/G/o/YGoKm.jpg" alt="http://uploads.ru/t/Y/G/o/YGoKm.jpg" /> .<br />После чего, между этими тегами напишите свой текст. Код готов.<br />Код часто используется как форма для заполнения или важный материал, требующий копирования.</p> mybb@mybb.ru (barON) Wed, 29 Feb 2012 14:37:29 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=501#p501 http://supportbigforu.youbb.ru/viewtopic.php?pid=499#p499 <p>Отключено слайд-шоу при нажатии. По причине плохой функциональности.</p> mybb@mybb.ru (barON) Wed, 29 Feb 2012 13:17:29 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=499#p499 http://supportbigforu.youbb.ru/viewtopic.php?pid=494#p494 <p>[modteg]Тема актуальна?[/modteg]</p> mybb@mybb.ru (barON) Thu, 16 Feb 2012 19:29:32 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=494#p494 http://supportbigforu.youbb.ru/viewtopic.php?pid=489#p489 <p>[modteg]<strong>Не принято:</strong> <span style="color: #CB0000"><span style="font-size: 10px">Некорректное описание, заказы принимаются строго по шаблону и без всяких непоняток, учитесь правильно формулировать ваши посты.</span></span><br />[/modteg]</p> mybb@mybb.ru (Fover) Thu, 09 Feb 2012 01:37:45 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=489#p489 http://supportbigforu.youbb.ru/viewtopic.php?pid=465#p465 <div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 10.5em"><pre>Внести определенную сумму в Фонд форума. Сумма расчитывается из кол-ва показов. 2.1 нижний баннер - 30р - месяц. 1/7 показов. 2.2 нижний баннер - 50р - месяц. 1/2 показов. 2.3 верхний баннер - 50р - месяц. 1/7 показов. 2.4 верхний баннер - 100р - месяц. 1/2 показов.</pre></div></div></div><p>Средства можете положить на счет мобильного телефона +79109971013<br />Сначала Выберите подпункт!</p> mybb@mybb.ru (barON) Fri, 06 Jan 2012 16:14:20 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=465#p465 http://supportbigforu.youbb.ru/viewtopic.php?pid=452#p452 <p>Нет.</p> mybb@mybb.ru (street) Fri, 06 Jan 2012 15:45:58 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=452#p452 http://supportbigforu.youbb.ru/viewtopic.php?pid=444#p444 <p><span style="display: block; text-align: center"><strong>Шаблон заказа </strong></span><br />если вы уже разбираетесь, как называются элементы вашего форума и четко, подробно представляете себе его дизайн оформляйте по этому шаблону.<br />Пункты, выделенные жирным шрифтом обязательны для копирования. <br />Все то, что идет в пунктах через черточку &quot;-&quot;, либо копируйте по мере необходимости (частично, то бишь только то, что вам необходимо описать) и заполняйте, либо не копируйте и пишите своими словами все, что относится к выделенным жирном пунктам.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>1. Ссылка на форум 2. Размеры и раположение - Форумные таблицы (слева, справа или по центру, фиксированная ширина в пикселях или &quot;резиновый форум&quot; - ширина в процентах) - Описание границ форума (сделать ли их картинками, описание ширины и вида границ таблиц, описание границ отдельных элементов типа блока цитаты/кода и т.п.) - Расположение элементов форума относительно друг друга (иконки слева/справа, рекламный блок относительно шапки форума и т.п.) - Дополнительные предпочтения в расположении элементов форума (любые другие предпочтения относительно конкретных элементов форума, их размера и расположения) 3. Фон форума - картинки для фонового изображения и общая цветовая гамма - предпочтения о расположении (статичный или прокручивающийся, повторяющийся или не повторяющийся, с боку или по центру и т.п.) 4. Шапка форума - картинки для шапки - предпочтения по расположению и размеру шапки (плавный переход в общий фон, наличие/отсутствие рамки, рисовать ли блок для рекламы mybb и т.п.) 5. Стиль меню навигации форума и пользовательского меню (если желаете для них отличающийся друг от друга стиль указывайте отдельно) - Расположение (если не указано ранее, укажите ждесь) - Цвет/картинки для меню навигации - Ссылки (оформлять по подобию пункта &quot;8. Цветовая гамма и стиль ссылок&quot;) 6. Цветовая гамма: (цвета и изображения, которые должны фигурировать) - Цвет/картинки для форумных таблиц - Цвет/шрифт текста форума - Предпочтения по оформлению категорий форума + стиль заголовков форума (расположение, цвет, стиль шрифта) - Цвет/картинки для фона шапки таблиц форума (это где &quot;Форум&quot;, &quot;тем&quot;, &quot;Сообщений&quot;, &quot;последнее сообщение&quot;) - Цвет/картинки для статистики форума - Цвет/картинки для окна кода и цитаты - Цвет/картинки для формы ответа - Цвет/картинки для других (указать каких) элементов форума 7. Окантовка профиля: нужна/не нужна - Рамка под аватар (размер аватара, описание рамки) - Описание границ окантовки - Описание стиля отдельных пунктов профиля - Картинки для фона окантовки 8. Цветовая гамма и стиль ссылок: -= Изначальное состояние =- - Цвет ссылки - Стиль ссылки (обычный/жирные/курсивом и т.п.) - Наличие/отсутствие подчеркивания (+ цвет подчеркивания, стиль подчеркивания) - Наличие/отсутствие фона под ссылкой - Наличие/отсутствие свечения или тени у ссылок -= При наведении курсора =- - Цвет ссылки - Стиль ссылки (обычный/жирные/курсивом и т.п.) - Наличие/отсутствие подчеркивания (+ цвет подчеркивания, стиль подчеркивания) - Наличие/отсутствие фона под ссылкой - Наличие/отсутствие свечения или тени у ссылок 9. Иконки форума (картинка(и) или описание иконок) - Есть новые сообщения. - Нет новых сообщений. - Важная тема. - Тема закрыта. - Переадресация. - Иконка в статистику форума (если нужна). 10. Остальные пожелания (например, очерк подписи картинкой и т.п.)</pre></div></div></div><p><span style="display: block; text-align: center"><strong>Упрощенный шаблон заказа</strong></span><br />если вы не разбираетесь в предыдущем шаблоне или плохо представляете себе идеальный стиль для вашего форума, доверьтесь нашим дизайнерам, заполнив шаблон:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 31.5em"><pre>1. Ссылка на форум - 2. Ваши предпочтения по оформлению форума - (сделать расположения форума по центру или сбоку, двигать ли навигационное меню, расположение заголовков... например, популярные запросы: &quot;шапка, переходящая в фон&quot;, &quot;границы форума картинкой&quot;, &quot;фон не прокручивается&quot; и т.п.) 3. Шапка форума - (можно дать картинки для шапки, если нет готовой, или заказать шапку в разделе &quot;Элементы дизайна для форумов&quot; в теме &quot;шапки&quot;) 4. Фон форума - (предоставить картинку или подробно описать свои предпочтения по поводу фона) 5. Общая цветовая гамма форума - (укажите цвета, в которых нужно оформить форум) 6. Картинки для иконок форума предоставьте следующие картинки (или одну картинку для всех типов иконок) или подробно опишите вид иконок: Есть новые сообщения - Нет новых сообщений - Важная тема - Тема закрыта - Переадресация - Иконка в статистику форума - 7. Дополнительные предпочтения по дизайну - (тут писать все то, что не вписалось в остальные пункты)</pre></div></div></div><p><span style="font-style: italic">Шаблон заказа разработан <a href="http://forumd.ru" rel="nofollow" target="_blank">http://forumd.ru</a></span></p> mybb@mybb.ru (barON) Fri, 06 Jan 2012 01:15:32 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=444#p444 http://supportbigforu.youbb.ru/viewtopic.php?pid=443#p443 <p><span style="display: block; text-align: center"><span style="color: red"><strong>Написание электронных HTML писем</strong></span></span></p> <p>Электронные HTML письма - это хороший способ держать пользователей в курсе последних событий, касающихся вашего бизнеса или продукции. Однако во время создания html писем возникают трудности. В почтовых клиентах нет поддержки сторонних CSS. В результате приходится прибегать к &quot;древним&quot; техникам, таким как использование таблиц и встроенным таблицам стилей. Сегодня я ознакомлю вас с процессом создания простых электронных HTML писем.</p> <p><strong>Введение</strong></p> <p>Написание HTML писем - одна из самых трудоемких задач для фрилансера. К счастью, один из моих первых клиентов, для которого я создавал такое электронное письмо, был достаточно терпеливым, и я смог сполна погрузиться в этот длительный и противоречивый процесс. Вам может повезти меньше, так что подготовьтесь с помощью данного урока.</p> <p><strong>Проблема: Почтовые клиенты</strong></p> <p>Вы думаете IE - самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?</p> <p><strong>Решение: Программируйте как в 1997</strong></p> <p>Да-да. Таблицы. Cellpadding, cellspacing, colspan - все эти сложные вещи, о которых вы уже, наверное, забыли. Таблицы - единственный способ получить согласованный интерфейс письма. Так что пора забыть (временно) о ваших любимых CSS стилях и вспомнить о массивных таблицах.</p> <p><strong>Шаг 1: Дизайн</strong></p> <p><strong>Простота</strong></p> <p>Разрабатывая дизайн электронного HTML письма, не забывайте о простоте. В таблице, используемой нами сегодня, много колонок. Это в основном, для демонстрации. Вам же следует придерживаться варианта из двух колонок, чтобы не усложнять себе работу.</p> <p><strong>Минимизируйте использование изображений</strong></p> <p>Не слишком фантазируйте с дизайном писем, так как Outlook не поддерживает фоновые изображения. По существу, вам хотелось бы избежать волокиты с Фотошопом и сделать дизайн практичным. Несмотря на это, использование Фотошопа остаётся в наших планах.</p> <p>Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него. К примеру, мы добавим легкий градиент в заголовке письма, но ничего страшного, если он не отобразится у получателя.</p> <p><strong>Чем Уже, тем лУчше</strong></p> <p>Из-за того что окно просмотра письма в почтовых клиентах часто занимает лишь малую часть общего окна, ваше письмо должно быть шириной не более 600 пикселей. Ведь никому не нравятся горизонтальные полосы прокрутки.</p> <p><strong>Сохраняйте пропорции</strong></p> <p>Помните, что нам понадобится использовать такие неудобные атрибуты как cellpadding и cellspacing для установки отступов между элементами. Благоразумно пытаться сохранять пропорции отступов между элементами.</p> <p><strong>Наш дизайн</strong></p> <p>Данный дизайн похож на тот, который я когда-то использовал, но упрощенный. Он не привлекателен, но это здесь не важно. Он прост и пропорционален, включает много элементов, так что вы сможете пронаблюдать, как они отличаются в различных клиентах.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/1.jpg" alt="http://ruseller.com/lessons/les861/1.jpg" /><br /><strong>Шаг 2: План</strong></p> <p>По моему опыту, программировать электронные HTML письма очень сложно, но быстро. Важно иметь заранее подготовленный план. И вот этот план (мы к этому вернемся, так что не переживайте, если не следите за ходом работы).</p> <p>Во-первых, начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.</p> <p>Затем, заметьте, у нас еще три таблицы в основной: одна вверху для ссылки просмотра в браузере, одна по центру для основного содержимого письма и внизу для ссылки отмены подписки.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/2a.jpg" alt="http://ruseller.com/lessons/les861/2a.jpg" /></p> <p>Наконец, в главной таблице каждая горизонтальная часть текста будет расположена в ячейке таблицы. Такие ячейки, в свою очередь, будут содержать другие таблицы для каждого раздела текста.<br /><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/2b.jpg" alt="http://ruseller.com/lessons/les861/2b.jpg" /></p> <p><strong>Отступы внутри и снаружи ячеек</strong></p> <p>Вместо использования CSS свойств margin и padding мы будем использовать атрибуты HTML cellpadding и cellspacing. Cellpadding - почти то же самое, что и padding в CSS - отступы от содержимого до рамки. Cellspacing - это отступы между ячейками таблицы.</p> <p>Cellspacing таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти cellpadding и cellspacing относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни cellpadding, ни cellspacing, необходимо определить это для каждой таблицы.</p> <p><strong>Шаг 3: Написание кода</strong></p> <p>Теперь можно начинать написание кода письма, раздел за разделом. Мы немного стилизируем письмо, несмотря на то, что это не рекомендуется делать. Мы начнем с общего расположения элементов, отступов, фоновых цветов, а затем займемся оформлением.</p> <p><strong>Создаем скелет</strong></p> <p>HTML-код письма будет очень прост: нам нужны три главных тега html, head и body. Давайте создадим базовую таблицу и три внутренние таблицы, о которых мы ранее говорили.</p> <p>Есть несколько способов описания тега DOCTYPE. Однако в данном случае, мы исключим его вообще, так как его описание нам ничего не даст.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt; &lt;title&gt;Ruseller Email Newsletter&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bgcolor=&quot;e4e4e4&quot;&gt;&lt;tr&gt;&lt;td&gt; &lt;table id=&quot;top-message&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; align=&quot;center&quot;&gt; &lt;/table&gt;&lt;!-- top message --&gt; &lt;table id=&quot;main&quot; cellpadding=&quot;0&quot; cellspacing=&quot;15&quot; bgcolor=&quot;ffffff&quot; width=&quot;600&quot; align=&quot;center&quot;&gt; &lt;/table&gt;&lt;!-- main --&gt; &lt;table id=&quot;bottom-message&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; align=&quot;center&quot;&gt; &lt;/table&gt;&lt;!-- bottom message --&gt; &lt;/tr&gt;&lt;/td&gt;&lt;/table&gt;&lt;!-- wrapper --&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div></div><p>Заметьте, что у двух таблиц cellpadding=&quot;20&quot;. Это отделит их от основного содержимого. Отступы главной таблицы равны 15 пикселей. Это делается для того, чтобы установить упорядоченность по вертикали. В связи с тем, что каждый раздел находится в своей отдельной ячейке, то между ними будет отступ в 15 пикселей.</p> <p>Заметьте также, что у всех таблиц задан атрибут align со значением &quot;center&quot;, а ширина таблиц задана явно (600 пикселей). В электронных HTML письмах лучше не указывать ширину основной таблицы явно. Лучше устанавливать размеры каждой ячейки, но у нас есть отступы, так что можно об этом не беспокоиться.</p> <p><strong>Таблицы с заголовками</strong></p> <p>Эти таблицы очень просты: в них всего лишь описаны параграфы в ячейках, выровненных по центру.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 22.5em"><pre>&lt;table id=&quot;top-message&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td align=&quot;center&quot;&gt; &lt;p&gt;Проблемы с отображением письма?&lt;a href=&quot;#&quot;&gt;Просмотрите его в браузере.&lt;/a&gt;&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- top message --&gt;</pre></div></div></div><p>Вторая таблица выглядит абсолютно так же.</p> <p><strong>Заголовок</strong></p> <p>Таблица для заголовка достаточно проста. В ней одна колонка и три строки. У нас приятный голубой цвет фона, поэтому нам понадобятся отступы внутри каждой ячейки, чтобы текст не прилипал к краям.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;tr&gt; &lt;td&gt; &lt;table id=&quot;header&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;570&quot; bgcolor=&quot;7aa7e9&quot;&gt;&lt;h1&gt;Наши услуги&lt;/h1&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width=&quot;570&quot; bgcolor=&quot;8fb3e9&quot;&gt;&lt;h2&gt;Новости и События&lt;/h2&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width=&quot;570&quot; align=&quot;right&quot; bgcolor=&quot;7aa7e9&quot;&gt;&lt;p&gt;July 2010&lt;/p&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- header --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- header --&gt;</pre></div></div></div><p>Не забудьте указать ширину каждой ячейки, равную 570 пикселей (600 - 15 пикселей отступов с обеих сторон). Мы также выравниваем дату по правому краю. Фоновое изображение добавим позже. А пока в качестве фона будет бледно-голубой цвет.</p> <p>Заметьте, мы используем атрибут bgcolor вместо style=&quot;background: &quot;. Это все потому что html атрибуты воспринимаются в электронных письмах лучше, нежели CSS свойства.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3a.png" alt="http://ruseller.com/lessons/les861/3a.png" /><br />Вот что у нас пока получилось. Выглядит не очень привлекательно, но большего нам пока и не надо.</p> <p><strong>Основное содержимое - 2 колонки</strong></p> <p>Первая часть нашего контента - это изображение, выровненное по левому краю, с двумя заголовками вверху. Мы не будем использовать CSS свойства float, а создадим таблицу с тремя ячейками:</p> <p>одной для изображения,</p> <p>одной для отступа между изображением и заголовками,</p> <p>и одну для самих заголовков.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3b.jpg" alt="http://ruseller.com/lessons/les861/3b.jpg" /><br />Для изображения с рамкой, мы создадим еще одну таблицу в ячейке с отступом 5 пикселей и серым фоновым цветом. Отступ увеличивает ширину элемента, поэтому необходимо уменьшить ширину ячейки на 10 пикселей.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;170&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;d0d0d0&quot;&gt;&lt;img src=&quot;http://dummyimage.com/170x120/e9e9e9/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;375&quot; valign=&quot;top&quot; colspan=&quot;3&quot;&gt; &lt;h3&gt;Новый дизайн сайта!&lt;/h3&gt; &lt;h4&gt;На 150% Лучше и на 40% Эффективнее!&lt;/h4&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content 1 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content 1 --&gt;</pre></div></div></div><p><strong>Примечание:</strong></p> <p>Мы добавили пустую строку и ячейку в таблице. Так как у ячеек есть отступы, мы можем добавлять пустые ячейки, чтобы делать отступы в 15 пикселей между элементами. По моему опыту, это работает, но для полной уверенности можете добавить сущность &amp;nbsp;.</p> <p>Атрибуту valign даем значение &quot;top&quot;. Это важно, так как располагает каждую ячейку в верхней части строки. Значение по умолчанию - middle, что приводит к непредсказуемым результатам.</p> <p>Используем изображения от dummyimage.com, так как все изображения, используемые в электронных письмах, должны быть выложены в сеть (подробнее бо этом позже), и намного проще использовать генерируемые изображения. Просмотрите сайт, там объясняется, как задать картинке необходимый URL.</p> <p><strong>Основное содержимое - 1 колонка</strong></p> <p>Это очень простая часть: таблица из одной колонки с одним абзацем. Не забудьте задать ширину ячейки и выровнять таблицу по центру.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 28.5em"><pre>&lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-2&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;570&quot;&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-2 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-2 --&gt;</pre></div></div></div><p><strong>Разделители</strong></p> <p>Для того чтобы добавить отступы по вертикали (помимо 15 пикселей, которые у нас уже есть), необходимо использовать изображения. Вспомним 90-ые! Можно подгрузить изображение gif, но на данный момент быстрее использовать одно из иображений от dummyimage.com. Я оставлю его серым, но в последствии можно сделать его белым.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 10.5em"><pre>&lt;tr&gt; &lt;td height=&quot;30&quot;&gt;&lt;img src=&quot;http://dummyimage.com/570x30/e9e9e9/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt;</pre></div></div></div><p>В результате получаем что-то вроде этого:<br /><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3c.png" alt="http://ruseller.com/lessons/les861/3c.png" /></p> <p><strong>Основное содержимое - 3 колонки</strong></p> <p>Для этой части используем таблицу из 5 ячеек: три на колонки и две в качестве разделителей между ними.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3d.jpg" alt="http://ruseller.com/lessons/les861/3d.jpg" /></p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-3&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;d0d0d0&quot;&gt;&lt;img src=&quot;http://dummyimage.com/170x120/e9e9e9/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;d0d0d0&quot;&gt;&lt;img src=&quot;http://dummyimage.com/170x120/e9e9e9/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;d0d0d0&quot;&gt;&lt;img src=&quot;http://dummyimage.com/170x120/e9e9e9/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-3 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-3 --&gt;</pre></div></div></div><p>Достаточно просто. Для границ примените тот же метод, что в части из 2 колонок. Не забывайте про valign!</p> <p>Повторите то же самое и для текста.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-4&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;h5&gt;Новые продукты!&lt;/h5&gt; &lt;p&gt; Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum&lt;/p&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;h5&gt;Письмо каждый месяц&lt;/h5&gt; &lt;p&gt;Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;h5&gt;Новый Улучшенный Форум&lt;/h5&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-4 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-4 --&gt;</pre></div></div></div><p>Добавьте еще один разделитель в нижней части, и на этом почти всё:</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3e.png" alt="http://ruseller.com/lessons/les861/3e.png" /></p> <p><strong>Осталось совсем немного...</strong></p> <p>Дальше повторяйте то, что мы уже делали: части из двух и одной колонок и разделители между ними.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-5&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;267&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; bgcolor=&quot;d0d0d0&quot;&gt;&lt;tr&gt;&lt;td&gt; &lt;img src=&quot;http://dummyimage.com/267x200/e9e9e9/fff&quot; /&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;278&quot; valign=&quot;top&quot;&gt; &lt;h4&gt;Это шапка&lt;/h4&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-5 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-5 --&gt; &lt;tr&gt; &lt;td height=&quot;30&quot;&gt;&lt;img src=&quot;http://dummyimage.com/570x30/e9e9e9/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-6&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;p align=&quot;center&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt; &lt;p align=&quot;center&quot;&gt;&lt;a href=&quot;#&quot;&gt;CALL TO ACTION&lt;/a&gt;&lt;/p&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt;</pre></div></div></div><p><strong>Работа над основной частью на этом завершается.</strong></p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3f.png" alt="http://ruseller.com/lessons/les861/3f.png" /></p> <p><strong>Пару слов об изображениях</strong></p> <p>В отличие от веб-страниц, вы не можете просто поместить все изображения в папку и прописать к ним относительные ссылки. Все ссылки должны быть абсолютными. Когда я разрабатываю электронное письмо, я загружаю изображения на какой-то хостинг или Amazon S3. Когда я уже готов отправить заказ клиенту, я загружаю изображения на его сайт.</p> <p><strong>Шаг 4: Оформление письма<br /></strong><br />Мы не можем подключить стили CSS и не можем описать стили в теге head в письме, потому что некоторые почтовые клиенты игнорируют его или только тег style. Мы будем использовать встроенные стили, хотя это и очень громоздко. К счастью, есть некоторые сервисы, которые встраивают стиль в html код. Я пользуюсь услугой сайта Premailer, которая делает это за меня.</p> <p>Мы напишем CSS стили отдельно, а затем воспользуемся premailer-ом.</p> <p><strong>Сброс основных значений по умолчанию</strong></p> <p>Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.</p> <p>Обратите внимание также на внешние отступы у главной таблицы, являющихся всего лишь стилем по умолчанию тега body.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 10.5em"><pre>&lt;style type=&quot;text/css&quot;&gt; body, #header h1, #header h2, p {margin: 0; padding: 0;} &lt;/style&gt;</pre></div></div></div><p><strong>Оформление текста</strong></p> <p>Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа &quot;font: &quot;), так как результаты будут неоднозначными.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 28.5em"><pre>#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #header h1 {color: #ffffff; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; font-size: 24px; } #header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } #header p {color: #ffffff; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; font-size: 12px; } h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; } p {font-size: 12px; color: #444444; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; line-height: 1.5;} h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}</pre></div></div></div><p>Смотрите, теперь письмо выглядит намного привлекательнее!</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3g.png" alt="http://ruseller.com/lessons/les861/3g.png" /></p> <p><strong>Фоновые изображения</strong></p> <p>Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 7.5em"><pre>&lt;td style=&quot;background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); &quot; width=&quot;570&quot; bgcolor=&quot;8fb3e9:&gt; &lt;h2&gt;Новости и События&lt;/h2&gt;&lt;/td&gt;</pre></div></div></div><p><strong>Другие стили</strong></p> <p>Необходимо задать стиль каждой ссылке, в противном случае, она примет стиль, заданный по умолчанию почтового клиента. А также добавим рамку главной таблице. Еще добавим атрибут display:block каждому изображению, это исключит дефект, возникающий в Outlook и Hotmail.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 10.5em"><pre>#main {border: 1px solid #cfcece;} img {display: block;} a {color: #4A72AF;}</pre></div></div></div><p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/3h.png" alt="http://ruseller.com/lessons/les861/3h.png" /></p> <p>Мы закончили. Приступим к тестированию!</p> <p><strong>Шаг 5: Тестирование</strong></p> <p>Тестирование - это самая важная и самая несносная часть создания электронного письма. Во время работы над таким письмом я провожу тесты часто, на каждой стадии разработки, так что я знаю точно, в чем ошибка. Почтовых клиентов много, как и способов тестирования. Давайте начнем.</p> <p><strong>Почтовые клиенты</p> <p></strong>Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:</p> <p>Outlook 2003/2007</p> <p>Hotmail</p> <p>Yahoo! Mail</p> <p>Gmail</p> <p>Apple Mail</p> <p>Thunderbird</p> <p><strong>Как тестировать?</strong></p> <p>Сперва необходимо найти способ отправить HTML письмо. Ваш заказчик скорее всего использует такой сервис как Mailchimp или Campaign Monitor, осуществляющий рассылку.</p> <p>Вы возможно подумали, что я усложняю работу, ведь некоторые почтовые клиенты позволяют вставку HTML-кода. Тем не менее это может привести к непредсказуемым результатам в случае использования приложений, осуществляющих рассылку. Протестируйте письмо на таком приложении, чтобы быть уверенным, что все работает корректно.</p> <p><strong>Тестирование с помощью Mailchimp</strong></p> <p>Мне нравится использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:</p> <p>Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol&quot; campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.</p> <p>На странице design выберите Import -&gt; Paste in code, а затем отметьте пункт Automatic CSS Inliner.</p> <p>Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.</p> <p>Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.</p> <p><strong>Тестирование с помощью Litmus</strong></p> <p>Litmus - это веб-приложение, тестирующее HTML письма во всех почтовых клиентах любой версии. Полная версия сервиса платная, и если ваш заказчик отказывается оплачивать эту услугу, вы можете протестировать бесплатно старую версию Gmail и Outlook 2003, которые все еще используются.</p> <p><strong>Хорошие результаты</strong></p> <p>Некоторые тесты показали довольно-таки хорошие результаты:</p> <p>Apple Mail</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/4a.png" alt="http://ruseller.com/lessons/les861/4a.png" /></p> <p>Old Gmail (explorer)<br /><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/4h.png" alt="http://ruseller.com/lessons/les861/4h.png" /></p> <p><strong>Исправление ошибок</strong></p> <p>В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения !important. Иногда я почти уверен в том, что они хотят свести меня с ума.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/4i.jpg" alt="http://ruseller.com/lessons/les861/4i.jpg" /></p> <p>Чтобы это исправить, нужно добавить !important ко всем стилям заголовков:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 10.5em"><pre>h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }</pre></div></div></div><p>В старой версии Gmail возникает подобная проблема в заголовке: Gmail добавляет дополнительный отступ всем заголовкам. Нам всего лишь необходимо дополнительно описать стиль для верхнего отступа заголовков:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 7.5em"><pre>#header h1 {color: #ffffff !important; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; font-size: 24px; margin-bottom: 0!important; } #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}</pre></div></div></div><p>Мы получили функциональное, согласованное (правда, простое) электронное HTML письмо. Да, это нудно, но после первого разработанного письма, процесс пойдет намного быстрее. Постарайтесь писать комментарии к коду и хорошо его организовать, чтобы можно было в последствии использовать его части повторно.</p> <p>Если вам удасться уговорить заказчика подписаться на Litmus, это облегчит работу. Вы также можете проводить тестирования многих почтовых клиентов с помощью платной версии Mailchimp и Campaign monitor.</p> <p><strong>Устранение неполадок<br /></strong><br />Конечно же вы столкнетесь с проблемами, о которых в статье речи не шло, но я хочу дать несколько советов по поводу устраниения ошибок.</p> <p>Считайте правильно: я очень много раз портил весь общий вид из-за того, что неправильно подсчитывал ширину ячеек таблицы. Не забывайте про отступы внутри ячеек: они увеличивают ширину всей ячейки.</p> <p>Проверяйте стандартные стили: используйте что-то вроде Firebug или Webkit Inspector, чтобы проверять, не перекрывает ли почтовый клиент ваши стили. Если это происходит, добавление обозначения !important решит проблему.</p> <p>Ищите решения проблем: всегда есть шанс, что кто-то уже решил проблему, с которой вы столкнулись. Если Google не помог, покопайтесь в блогах популярных сервисов рассылки писем. Ведь некоторые люди зарабатывают этим деньги, так что они свою работу знают!</p> <p>Не сдавайтесь: если вы не можете понять, где допустили ошибку, вернитесь в самое начало разработки и проверьте весь код, пока не найдете ошибку.</p> <p><strong>Результат</strong></p> <p>Вот конечный вариант кода:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt; &lt;title&gt;Ruseller Email Newsletter&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; a {color: #4A72AF;} body, #header h1, #header h2, p {margin: 0; padding: 0;} #main {border: 1px solid #cfcece;} img {display: block;} #top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #header h1 {color: #ffffff !important; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; } #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; } #header p {color: #ffffff !important; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; font-size: 12px; } h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;} h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; } p {font-size: 12px; color: #444444 !important; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Lucida Sans Unicode&quot;, sans-serif; line-height: 1.5;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bgcolor=&quot;e4e4e4&quot;&gt;&lt;tr&gt;&lt;td&gt; &lt;table id=&quot;top-message&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td align=&quot;center&quot;&gt; &lt;p&gt;Trouble viewing this email? &lt;a href=&quot;#&quot;&gt;View in Browser&lt;/a&gt;&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- top message --&gt; &lt;table id=&quot;main&quot; width=&quot;600&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;15&quot; bgcolor=&quot;ffffff&quot;&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;header&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; bgcolor=&quot;8fb3e9&quot;&gt; &lt;tr&gt; &lt;td width=&quot;570&quot; bgcolor=&quot;7aa7e9&quot;&gt;&lt;h1&gt;Communitech Venture Services&lt;/h1&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width=&quot;570&quot; bgcolor=&quot;8fb3e9&quot; style=&quot;background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);&quot;&gt;&lt;h2 style=&quot;color:#ffffff!important&quot;&gt;News and Events&lt;/h2&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width=&quot;570&quot; align=&quot;right&quot; bgcolor=&quot;7aa7e9&quot;&gt;&lt;p&gt;July 2010&lt;/p&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- header --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- header --&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;170&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;&gt; &lt;tr&gt;&lt;td bgcolor=&quot;d0d0d0&quot;&gt;&lt;img src=&quot;http://tessat.s3.amazonaws.com/coins_small.jpg&quot; width=&quot;170&quot; /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;375&quot; valign=&quot;top&quot; colspan=&quot;3&quot;&gt; &lt;h3&gt;All New Site Design&lt;/h3&gt; &lt;h4&gt;It's 150% Better and 40% More Efficient!&lt;/h4&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content 1 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content 1 --&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-2&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;570&quot;&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-2 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-2 --&gt; &lt;tr&gt; &lt;td height=&quot;30&quot;&gt;&lt;img src=&quot;http://dummyimage.com/570x30/fff/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-3&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;170&quot; valign=&quot;top&quot; bgcolor=&quot;d0d0d0&quot; style=&quot;padding:5px;&quot;&gt; &lt;img src=&quot;http://tessat.s3.amazonaws.com/crayons.jpg&quot; width=&quot;170&quot; /&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;170&quot; valign=&quot;top&quot; bgcolor=&quot;d0d0d0&quot; style=&quot;padding:5px;&quot;&gt; &lt;img src=&quot;http://tessat.s3.amazonaws.com/handshake.jpg&quot; /&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;170&quot; valign=&quot;top&quot; bgcolor=&quot;d0d0d0&quot; style=&quot;padding:5px;&quot;&gt; &lt;img src=&quot;http://tessat.s3.amazonaws.com/moo02.jpg&quot; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-3 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-3 --&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-4&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;h5&gt;Exciting New Products!&lt;/h5&gt; &lt;p&gt; Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum&lt;/p&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;h5&gt;A Newsletter Every Month&lt;/h5&gt; &lt;p&gt;Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;180&quot; valign=&quot;top&quot;&gt; &lt;h5&gt;New and Improved Forum&lt;/h5&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-4 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-4 --&gt; &lt;tr&gt; &lt;td height=&quot;30&quot;&gt;&lt;img src=&quot;http://dummyimage.com/570x30/fff/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-5&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td width=&quot;267&quot; valign=&quot;top&quot;&gt; &lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; bgcolor=&quot;d0d0d0&quot;&gt;&lt;tr&gt;&lt;td&gt; &lt;img src=&quot;http://tessat.s3.amazonaws.com/card18.jpg&quot; /&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/td&gt; &lt;td width=&quot;15&quot;&gt;&lt;/td&gt; &lt;td width=&quot;278&quot; valign=&quot;top&quot;&gt; &lt;h4&gt;This is a heading&lt;/h4&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- content-5 --&gt; &lt;/td&gt; &lt;/tr&gt;&lt;!-- content-5 --&gt; &lt;tr&gt; &lt;td height=&quot;30&quot;&gt;&lt;img src=&quot;http://dummyimage.com/570x30/fff/fff&quot; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;table id=&quot;content-6&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt; &lt;p align=&quot;center&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt; &lt;p align=&quot;center&quot;&gt;&lt;a href=&quot;#&quot;&gt;CALL TO ACTION&lt;/a&gt;&lt;/p&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- main --&gt; &lt;table id=&quot;bottom-message&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; align=&quot;center&quot;&gt; &lt;tr&gt; &lt;td align=&quot;center&quot;&gt; &lt;p&gt;You are receiving this email because you signed up for updates&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Unsubscribe instantly&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Forward to a friend&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;View in Browser&lt;/a&gt;&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;&lt;!-- top message --&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;!-- wrapper --&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div></div><p>Вот как выглядит наше письмо с реальными изображениями:</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les861/4k.png" alt="http://ruseller.com/lessons/les861/4k.png" /></p> <p>Ничего особенного, но это должно дать вам представление о том, как разрабатывать электронные HTML письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.</p> <p>Данный урок подготовлен для Вас командой сайта <a href="http://ruseller.com" rel="nofollow" target="_blank">http://ruseller.com</a><br />Источник урока: <a href="http://www.net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/" rel="nofollow" target="_blank">http://www.net.tutsplus.com/tutorials/h &#8230; ml-emails/</a><br />Перевел: Станислав Протасевич<br />Урок создан: 20 Января 2011</p> mybb@mybb.ru (barON) Fri, 06 Jan 2012 00:57:36 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=443#p443 http://supportbigforu.youbb.ru/viewtopic.php?pid=442#p442 <p><span style="color: red"><span style="display: block; text-align: center"><strong>Анимированное меню с помощью jQuery</strong></span></span><br />Сегодня мы создадим отличное анимированное меню для сайта ресторана. Пункты меню будут анимированы, а при клике по одному из них будет выплывать окошко с контентом. К тому же, фоновое изображение будет меняться в зависимости от того, какой пункта меню был открыт.<br /><a href="http://qps.ru/YJFti" rel="nofollow" target="_blank">Демо</a><br /><a href="http://qps.ru/fcVg2" rel="nofollow" target="_blank">Исходники</a></p> <p>У нас будут отображены категории меню ресторана. В каждом блоке с контентом будут перечислены какие-то напитки и блюда. Сразу после появления блока с контентом меню скроется. При клике по кнопке закрытия, контент скроется и отобразится меню.</p> <p>Итак, начнем!</p> <p><strong>Структура</strong><br />В HTML у нас будут несколько элементов для фонового изображения, сетки, перекрывающей его, иконки загрузки и главного меню. Структура будет выглядеть так:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 10.5em"><pre>&lt;div id=&quot;ac_background&quot; class=&quot;ac_background&quot;&gt; &lt;img class=&quot;ac_bgimage&quot; src=&quot;images/Default.jpg&quot; alt=&quot;Фон&quot;/&gt; &lt;div class=&quot;ac_overlay&quot;&gt;&lt;/div&gt; &lt;div class=&quot;ac_loading&quot;&gt;&lt;/div&gt; &lt;/div&gt;</pre></div></div></div><p>После загрузки страницы отобразится изображение по умолчанию Default.jpg. При клике по какому-то пункту меню, фоновое изображение будет перекрываться другим, а само оно исчезнет.</p> <p>Меню заключим в блок div с классом “ac_content”. Здесь будет размещен заголовок и ненумерованный список для пунктов меню, заключенный в div с классом “ac_menu”.</p><div class="quote-box quote-main"><blockquote><p>&lt;div id=&quot;ac_content&quot; class=&quot;ac_content&quot;&gt;<br />&#160; &#160; &lt;h1&gt;&lt;span&gt;Cafe + Bar&lt;/span&gt;Dhalia&lt;/h1&gt;<br />&#160; &#160; &lt;div class=&quot;ac_menu&quot;&gt;<br />&#160; &#160; &#160; &#160; &lt;ul&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;a href=&quot;images/Appetizers.jpg&quot;&gt;Appetizers&lt;/a&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;div class=&quot;ac_subitem&quot;&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;span class=&quot;ac_close&quot;&gt;&lt;/span&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;h2&gt;Appetizers&lt;/h2&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;ul&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; A wonderful serenity has taken possession<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; of my entire soul, like these sweet mornings<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; of spring which I enjoy with my whole heart.<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Lobster Bisque&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Smoked Salmon Terrine&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Tuna Ceviche&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Wild Mushroom Flan&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Almond Bruschetta&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Green Chilli Canapee&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;li&gt;Artichoke Rucula Salad&lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;/ul&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &lt;/div&gt;&lt;!-- ac_subitem--&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; &lt;/li&gt;<br />&#160; &#160; &#160; &#160; &#160; &#160; ...<br />&#160; &#160; &#160; &#160; &lt;/ul&gt;<br />&#160; &#160; &lt;/div&gt;&lt;!-- ac_menu --&gt;<br />&lt;/div&gt;&lt;!-- ac_content --&gt;</p></blockquote></div><p>Для каждого пункта меню создадим блок div с классом “ac_subitem”, в котором будет содержаться контент. Сюда мы поместим другой список (не обязательно список, можно все, что угодно).</p> <p>Ссылки в главном меню будут вести к изображениям, которые отобразятся при клике на соответствующий пункт меню.</p> <p>Теперь давайте разберемся со стилями.</p> <p><strong>CSS</strong></p> <p>В самом начале давайте подключим файл reset.css:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 4.5em"><pre>@import url('reset.css');</pre></div></div></div><p>Фоновый цвет элемента body будет черным, чтобы они темнели во время того, как одно изображение будет сменяться другим.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 12em"><pre>body{ background:#000; color:#fff; font-family: 'PT Sans Narrow', Arial, sans-serif; text-transform:uppercase; }</pre></div></div></div><p>Цвет текста под ссылки будет белым:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 9em"><pre>a{ color:#fff; text-decoration:none; }</pre></div></div></div><p>Фоновые изображения будут назначаться с помощью JavaScript, поэтому мы не назначим ни одного из них через CSS. Размеры и расположение изображений также будут считаться динамически и будут зависеть от размеров пользовательских мониторов:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 13.5em"><pre>img.ac_bgimage{ position:fixed; left:0px; top:0px; opacity:0.8; display:none; }</pre></div></div></div><p>Поверх изображения отобразим специальный паттерн, который придаст ему красивый вид:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 15em"><pre>.ac_overlay{ width:100%; height:100%; position:fixed; top:0px; left:0px; background:transparent url(../images/pattern.png) repeat top left; }</pre></div></div></div><p>Иконку загрузки поместим в правый верхний угол страницы. Она будет отображаться во время смены изображений:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 21em"><pre>.ac_loading{ position:fixed; top:10px; right:10px; background:#000 url(../images/loader.gif) no-repeat center center; width:50px; height:50px; border-radius:10px 10px 10px 10px; z-index:999; opacity:0.7; display:none; }</pre></div></div></div><p>Блок с контентом расположим в центре страницы. Для этого присвоим атрибуту top значение 50% и уменьшим его высоту, присвоив атрибуту margin-top значение -65px. Так он расположится прямо по центру:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 15em"><pre>.ac_content{ position:fixed; height:90px; width:100%; top:50%; left:0px; margin-top:-65px; }</pre></div></div></div><p>Фон под заголовком слева будет черным полу-прозрачным. Стили для заголовка h1 и span мы определим отдельно. Справа добавим рамку толщиной в 1 пиксель, чтобы визуально отделить заголовок от меню:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 28.5em"><pre>.ac_content h1{ background:transparent url(../images/bg_menu.png) repeat top left; display:block; float:left; width:90px; height:50px; padding:20px; font-size:36px; font-weight:bold; line-height:20px; margin-right:1px; } .ac_content h1 span{ display:block; font-weight:normal; font-size:14px; }</pre></div></div></div><p>Фон блока меню будет таким же. Начальная его ширина будет 0 пикселей. Через JavaScript мы увеличим ее до ширины окна при загрузке страницы:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 13.5em"><pre>.ac_menu{ background:transparent url(../images/bg_menu.png) repeat top left; float:left; position:relative; height:90px; width:0px; }</pre></div></div></div><p>Для ненумерованного списка с пунктами меню определим такой стиль:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 7.5em"><pre>.ac_menu &gt; ul{ float:right; }</pre></div></div></div><p>Высота элементов списка будет подсчитана определенным образом, для них мы также зададим атрибут overflow: hidden, так как нам необходимо, чтобы они выплывали снизу. Если не задать атрибут overflow: hidden, то ссылки будут видны во время анимации:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 12em"><pre>.ac_menu &gt; ul &gt; li{ float:left; position:relative; height:90px; overflow:hidden; }</pre></div></div></div><p>Изначально ссылки будут скрыты с помощью задания атрибутов margin-top и opacity. После мы плавно переместим их на середину (margin-top: 0px) и сделаем их видимыми, увеличив значение opacity. Причем сделаем это так, чтобы они немножко задерживались, тем самым создадим интересный эффект:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 22.5em"><pre>.ac_menu &gt; ul &gt; li a{ margin-top:60px; opacity:0; display:block; height:90px; padding:0px 10px; text-align:center; line-height:90px; outline:none; font-size:18px; font-weight:bold; text-shadow:1px 1px 1px #000; }</pre></div></div></div><p>Блоки с контентом будут шириной в 400 пикселей и начальной высотой в 0 пикселей. Мы плавно увеличим это значение потом, а также значение margin-top, чтобы окошко появлялось из середины:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 19.5em"><pre>.ac_subitem{ width:400px; height:0px; /* animate to 400px */ top:50%; right:0px; margin-top:0px; /* animate to -200px */ position:fixed; z-index:99; overflow:hidden; background:transparent url(../images/bg_menu.png) repeat top left; }</pre></div></div></div><p>Определим также некоторые стили для блока с контентом:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 33em"><pre>.ac_subitem h2{ font-size:22px; font-weight:bold; color:#fff; padding: 40px 0px 0px 40px; text-shadow:0px 0px 1px #000; } .ac_subitem ul{ padding:0px 40px; } .ac_subitem ul li{ margin:10px 0px; } .ac_subitem ul li:first-child{ font-size:14px; text-transform:none; border-bottom:1px dotted #333; padding-bottom:15px; margin-bottom:15px; }</pre></div></div></div><p>Добавим иконку закрытия данного блока в его правый верхний угол:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 21em"><pre>span.ac_close{ float:right; margin:10px; width:11px; height:12px; cursor:pointer; background:transparent url(../images/close.png) no-repeat top left; opacity:0.4; } span.ac_close:hover{ opacity:1.0; }</pre></div></div></div><p>Это все насчет стиля. Перейдем к анимации.</p> <p><strong>JavaScipt</strong></p> <p>Для анимации мы будем использовать дополнительный плагин. Подключите его сразу после подключения jQuery.</p> <p>Сперва объявим переменные:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 19.5em"><pre>var $ac_background = $('#ac_background'), $ac_bgimage = $ac_background.find('.ac_bgimage'), $ac_loading = $ac_background.find('.ac_loading'), $ac_content = $('#ac_content'), $title = $ac_content.find('h1'), $menu = $ac_content.find('.ac_menu'), $mainNav = $menu.find('ul:first'), $menuItems = $mainNav.children('li'), totalItems = $menuItems.length, $ItemImages = new Array();</pre></div></div></div><p>Загрузим все изображения, так что добавим все ссылки, а также дополнительно объявим текущее изображение:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>$menuItems.each(function(i) { $ItemImages.push($(this).children('a:first').attr('href')); }); $ItemImages.push($ac_bgimage.attr('src')); А теперь приступим к нашей главной функции: var Menu = (function(){ var init = function() { loadPage(); initWindowEvent(); }, loadPage = function() { /* 1- загружает все фоновые и другие изображения; 2- отображает фоновое изображение; 3- скрывает и открывает меню; 4- отображает пункты меню; 5- инициализирует события, связанные с пунктами меню */ $ac_loading.show(); //отображение иконки загрузки $.when(loadImages()).done(function(){ $.when(showBGImage()).done(function(){ //скрывает иконку загрузки $ac_loading.hide(); $.when(slideOutMenu()).done(function(){ $.when(toggleMenuItems('up')).done(function(){ initEventsSubMenu(); }); }); }); }); }, showBGImage = function() { return $.Deferred( function(dfd) { //подсчитывает размеры изображения adjustImageSize($ac_bgimage); $ac_bgimage.fadeIn(1000, dfd.resolve); } ).promise(); }, slideOutMenu = function() { /* подсчитывает новую ширину меню */ var new_w = $(window).width() - $title.outerWidth(true); return $.Deferred( function(dfd) { //скрывает меню $menu.stop() .animate({ width : new_w + 'px' }, 700, dfd.resolve); } ).promise(); }, /* скрывает / отображает пункт меню */ toggleMenuItems = function(dir) { return $.Deferred( function(dfd) { /* скрывает / отображает пункты меню. каждый раз разная анимация. */ $menuItems.each(function(i) { var $el_title = $(this).children('a:first'), marginTop, opacity, easing; if(dir === 'up'){ marginTop = '0px'; opacity = 1; easing = 'easeOutBack'; } else if(dir === 'down'){ marginTop = '60px'; opacity = 0; easing = 'easeInBack'; } $el_title.stop() .animate({ marginTop : marginTop, opacity : opacity }, 200 + i * 200 , easing, function(){ if(i === totalItems - 1) dfd.resolve(); }); }); } ).promise(); }, initEventsSubMenu = function() { $menuItems.each(function(i) { var $item = $(this), // &lt;li&gt; $el_title = $item.children('a:first'), el_image = $el_title.attr('href'), $sub_menu = $item.find('.ac_subitem'), $ac_close = $sub_menu.find('.ac_close'); /* пользователь кликает по пункту меню */ $el_title.bind('click.Menu', function(e) { $.when(toggleMenuItems('down')).done(function(){ openSubMenu($item, $sub_menu, el_image); }); return false; }); /* контент скрывается */ $ac_close.bind('click.Menu', function(e) { closeSubMenu($sub_menu); return false; }); }); }, openSubMenu = function($item, $sub_menu, el_image) { $sub_menu.stop() .animate({ height : '400px', marginTop : '-200px' }, 400, function() { //the bg image changes showItemImage(el_image); }); }, /* меняется фоновое изображение */ showItemImage = function(source) { //если это текущее изображение, то вернет 0 if($ac_bgimage.attr('src') === source) return false; var $itemImage = $('&lt;img class=&quot;ac_bgimage&quot; src=&quot;'+source+'&quot; alt=&quot;Background&quot;&gt;'); $itemImage.insertBefore($ac_bgimage); adjustImageSize($itemImage); $ac_bgimage.fadeOut(1500, function() { $(this).remove(); $ac_bgimage = $itemImage; }); $itemImage.fadeIn(1500); }, closeSubMenu = function($sub_menu) { $sub_menu.stop() .animate({ height : '0px', marginTop : '0px' }, 400, function() { //отображение элементов toggleMenuItems('up'); }); }, /* on window resize, ajust the bg image dimentions, and recalculate the menus width */ initWindowEvent = function() { /* назначает ширину фонового изображения */ $(window).bind('resize.Menu' , function(e) { adjustImageSize($ac_bgimage); /* считает новую ширину меню */ var new_w = $(window).width() - $title.outerWidth(true); $menu.css('width', new_w + 'px'); }); }, /* расширяет изображение и располагает его по центру */ adjustImageSize = function($img) { var w_w = $(window).width(), w_h = $(window).height(), r_w = w_h / w_w, i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h, new_left,new_top; if(r_w &gt; r_i){ new_h = w_h; new_w = w_h / r_i; } else{ new_h = w_w * r_i; new_w = w_w; } $img.css({ width : new_w + 'px', height : new_h + 'px', left : (w_w - new_w) / 2 + 'px', top : (w_h - new_h) / 2 + 'px' }); }, /* загружает все изображения */ loadImages = function() { return $.Deferred( function(dfd) { var total_images = $ItemImages.length, loaded = 0; for(var i = 0; i &lt; total_images; ++i){ $('&lt;img alt=&quot;&quot;&gt;').load(function() { ++loaded; if(loaded === total_images) dfd.resolve(); }).attr('src' , $ItemImages[i]); } } ).promise(); }; return { init : init }; })(); /* вызов метода init */ Menu.init(); &lt;/li&gt;</pre></div></div></div><p>На этом все. Надеюсь, вам понравился урок!</p> <p>Данный урок подготовлен для Вас командой сайта <a href="http://ruseller.com" rel="nofollow" target="_blank">http://ruseller.com</a><br />Источник урока: <a href="http://www.tympanus.net/codrops/2011/03/09/animated-content-menu/" rel="nofollow" target="_blank">http://www.tympanus.net/codrops/2011/03 &#8230; tent-menu/</a><br />Перевел: Станислав Протасевич<br />Урок создан: 26 Мая 2011</p> mybb@mybb.ru (barON) Thu, 05 Jan 2012 01:34:14 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=442#p442 http://supportbigforu.youbb.ru/viewtopic.php?pid=441#p441 <p><span style="display: block; text-align: center"><span style="color: red"><strong>Создание стены Facebook при помощи jQuery шаблонов</strong></span></span></p> <p>В этом уроке мы хотим создать свою собственную стену как на Facebook. Для этого нам придётся воспользоваться Facebook Graph API, jQuery, и плагином для шаблонов (template plugin). jQuery.tmpl позволит нам сконвертировать наши посты и создать отдельный HTML код.<br /><a href="http://qps.ru/FmXgh" rel="nofollow" target="_blank">Демо</a></p> <p><a href="http://qps.ru/flZ2T" rel="nofollow" target="_blank">Cкачать</a></p> <p>Перед тем, как начать, давайте поговорим о Facebook API.<br /><strong>Graph API</strong></p> <p>Graph - это решение Facebook, которое применяется для интерфейсов. У каждой страницы, которую Вы видите на сайте, есть соответствующее представление, будь то пользователь, фотография, группа, корректировка данных или что-либо еще. API также поддерживает запросы JSONP, что позволяет задействовать jQuery.</p> <p>В нашем случае, будем использовать два API ключа – для того, чтобы получить все последние посты и для извлечения информации о пользователе (полное имя, аватар и т.д.); Ниже можете увидеть пример:</p> <p><a href="http://graph.facebook.com/smashmag/posts/" rel="nofollow" target="_blank">http://graph.facebook.com/smashmag/posts/</a></p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>{ &quot;data&quot;: [{ &quot;id&quot;: &quot;45576747489_10150136051797490&quot;, &quot;from&quot;: { &quot;name&quot;: &quot;Smashing Magazine&quot;, &quot;category&quot;: &quot;Website&quot;, &quot;id&quot;: &quot;45576747489&quot; }, &quot;message&quot;: &quot;Creating a sphere with 3D CSS&quot;, &quot;picture&quot;: &quot;http://platform.ak.fbcdn..&quot;, &quot;link&quot;: &quot;http://bit.ly/epqBBv&quot;, &quot;name&quot;: &quot;Creating a sphere with 3D CSS \u2013 Paul Hayes&quot;, &quot;caption&quot;: &quot;www.paulrhayes.com&quot;, &quot;description&quot;: &quot;A professional slice of newly..&quot;, &quot;icon&quot;: &quot;http://photos-d.ak.fbcdn.net/photos..&quot;, &quot;actions&quot;: [{ &quot;name&quot;: &quot;Share&quot;, &quot;link&quot;: &quot;http://www.facebook.com/share..&quot; }], &quot;type&quot;: &quot;link&quot;, &quot;application&quot;: { &quot;name&quot;: &quot;Sendible&quot;, &quot;id&quot;: &quot;26065877776&quot; }, &quot;created_time&quot;: 1301325483, &quot;updated_time&quot;: 1301325483, &quot;likes&quot;: { &quot;data&quot;: [{ &quot;name&quot;: &quot;Zome Lia&quot;, &quot;id&quot;: &quot;100000643422735&quot; }], &quot;count&quot;: 16 } }] }</pre></div></div></div><p>Ответ JSON содержит информацию о постах Smashing Magazine. Некоторые поля содержат информацию о дате создания/редактирования, количестве комментов, заголовок, описание, тип… И это не предел.</p> <p>Также нам надо создать дополнительный запрос для извлечения аватарки:</p> <p><a href="http://graph.facebook.com/smashmag/" rel="nofollow" target="_blank">http://graph.facebook.com/smashmag/</a></p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 22.5em"><pre>{ &quot;id&quot;: &quot;45576747489&quot;, &quot;name&quot;: &quot;Smashing Magazine&quot;, &quot;picture&quot;: &quot;http://profile.ak.fbcdn.net/hp..&quot;, &quot;link&quot;: &quot;http://www.facebook.com/smashmag&quot;, &quot;category&quot;: &quot;Website&quot;, &quot;likes&quot;: 42696, &quot;website&quot;: &quot;http://www.smashingmagazine.com/&quot;, &quot;username&quot;: &quot;smashmag&quot;, &quot;company_overview&quot;: &quot;Founded in September 2006..&quot;, &quot;mission&quot;: &quot;The offical Smashing Magazine pa..!&quot;, &quot;products&quot;: &quot;Looking for a web design job? Che..&quot; }</pre></div></div></div><p>Теперь мы получили то, что нам нужно.<br /><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les1132/1.jpg" alt="http://ruseller.com/lessons/les1132/1.jpg" /></p> <p><strong>Шаблоны</strong></p> <p>Теперь давайте поговорим о шаблоне jQuery. Так как Graph API возвращает валидные JSON данные, то мы можем применить их для шаблонов. Для этого мы должны определить блоки HTML кода.</p> <p>Сами шаблоны можно поместить между тегом script или обратиться к ним средствами AJAX. В этом уроке мы будем использовать первый вариант.</p> <p>Каждый шаблон будет иметь следующую форму:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 7.5em"><pre>&lt;script id=&quot;someID&quot; type=&quot;text/x-jquery-tmpl&quot;&gt; &lt;!-- HTML markup coupled with template tags --&gt; &lt;/script&gt;</pre></div></div></div><p>А вот и первый шаблон:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 7.5em"><pre>&lt;script id=&quot;headingTpl&quot; type=&quot;text/x-jquery-tmpl&quot;&gt; &lt;h1&gt;${name}&lt;span&gt;on Facebook&lt;/span&gt;&lt;/h1&gt; &lt;/script&gt;</pre></div></div></div><p>${} тег получает изменённое имя свойства объекта, переданного в метод tmpl().</p> <p>Другой шаблон, который служит для отображения постов, будет более сложным:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;script id=&quot;feedTpl&quot; type=&quot;text/x-jquery-tmpl&quot;&gt; &lt;li&gt; &lt;img src=&quot;${from.picture}&quot; /&gt; &lt;div&gt; &lt;h2&gt;&lt;a href=&quot;http://www.facebook.com/profile.php?id=${from.id}&quot; target=&quot;_blank&quot;&gt;${from.name}&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;{{html message}}&lt;/p&gt; {{if type == &quot;link&quot; }} &lt;div&gt; {{if picture}} &lt;img src=&quot;${picture}&quot; /&gt; {{/if}} &lt;div&gt; &lt;p&gt;&lt;a href=&quot;${link}&quot; target=&quot;_blank&quot;&gt;${name}&lt;/a&gt;&lt;/p&gt; &lt;p&gt;${caption}&lt;/p&gt; &lt;p&gt;${description}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; {{/if}} &lt;/div&gt; &lt;p&gt;${created_time} · {{if comments}} ${comments.count} Comment{{if comments.count&gt;1}}s{{/if}} {{else}} 0 Comments {{/if}} · {{if likes}} ${likes.count} Like{{if likes.count&gt;1}}s{{/if}} {{else}} 0 Likes {{/if}} &lt;/p&gt; &lt;/li&gt; &lt;/script&gt;</pre></div></div></div><p>Внутри тегов мы можем использовать JavaScript выражения. Это особенно полезно, когда нам надо использовать выражения {{if}}, чтобы проверить наличие комментариев.</p> <p>А вот наш HTML документ:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; &lt;title&gt;Making a Custom Facebook Wall with jQuery | Tutorialzine Demo&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/styles.css&quot; /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;page&quot;&gt; &lt;div id=&quot;wall&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- jQuery templates. Not rendered by the browser. Notice the type attributes --&gt; &lt;script id=&quot;headingTpl&quot; type=&quot;text/x-jquery-tmpl&quot;&gt; &lt;h1&gt;${name}&lt;span&gt;on Facebook&lt;/span&gt;&lt;/h1&gt; &lt;/script&gt; &lt;script id=&quot;feedTpl&quot; type=&quot;text/x-jquery-tmpl&quot;&gt; &lt;li&gt; &lt;img src=&quot;${from.picture}&quot; class=&quot;avatar&quot; /&gt; &lt;div class=&quot;status&quot;&gt; &lt;h2&gt;&lt;a href=&quot;http://www.facebook.com/profile.php?id=${from.id}&quot; target=&quot;_blank&quot;&gt;${from.name}&lt;/a&gt;&lt;/h2&gt; &lt;p class=&quot;message&quot;&gt;{{html message}}&lt;/p&gt; {{if type == &quot;link&quot; }} &lt;div class=&quot;attachment&quot;&gt; {{if picture}} &lt;img class=&quot;picture&quot; src=&quot;${picture}&quot; /&gt; {{/if}} &lt;div class=&quot;attachment-data&quot;&gt; &lt;p class=&quot;name&quot;&gt;&lt;a href=&quot;${link}&quot; target=&quot;_blank&quot;&gt;${name}&lt;/a&gt;&lt;/p&gt; &lt;p class=&quot;caption&quot;&gt;${caption}&lt;/p&gt; &lt;p class=&quot;description&quot;&gt;${description}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; {{/if}} &lt;/div&gt; &lt;p class=&quot;meta&quot;&gt;${created_time} · {{if comments}} ${comments.count} Comment{{if comments.count&gt;1}}s{{/if}} {{else}} 0 Comments {{/if}} · {{if likes}} ${likes.count} Like{{if likes.count&gt;1}}s{{/if}} {{else}} 0 Likes {{/if}} &lt;/p&gt; &lt;/li&gt; &lt;/script&gt; &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;js/jquery.tmpl.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div></div><p>Блок #wall будет динамически взаимодействовать с данными Graph API. В самом низу вы можете увидеть сами шаблоны. За ними я подключаю библиотеку jQuery, jQuery.tmpl плагин и файл script.js, о котором пойдёт речь дальше.</p> <p><strong>jQuery</strong></p> <p>Давайте приступим к разработке плагина.</p> <p>script.js</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>// Создаём плагин. (function($){ $.fn.facebookWall = function(options){ options = options || {}; if(!options.id){ throw new Error('You need to provide an user/page id!'); } // начальные значения: options = $.extend({ limit: 15 // лимит },options); // Graph API URL: var graphUSER = 'http://graph.facebook.com/'+options.id+'/?fields=name,picture&amp;callback=?', graphPOSTS = 'http://graph.facebook.com/'+options.id+'/posts/?callback=?&amp;date_format=U&amp;limit='+options.limit; var wall = this; $.when($.getJSON(graphUSER),$.getJSON(graphPOSTS)).done(function(user,posts){ // user[0] содержит инфу о пользователе // posts[0].data содержит инфу о постах; var fb = { user : user[0], posts : [] }; $.each(posts[0].data,function(){ posts feed: if(this.type != 'link' &amp;&amp; this.type!='status'){ return true; } // Копируем аватар // проще генерировать шаблоны: this.from.picture = fb.user.picture; // конвертируем время из UNIX timestamp // в что-то вроде (5 минут назад): this.created_time = relativeTime(this.created_time*1000); // конвертируем URL this.message = urlHyperlinks(this.message); fb.posts.push(this); }); $('#headingTpl').tmpl(fb.user).appendTo(wall); // создаём список для постов: var ul = $('&lt;ul&gt;').appendTo(wall); // Присоединяем шаблоны: $('#feedTpl').tmpl(fb.posts).appendTo(ul); }); return this; }; // Вспомогательные методы: function urlHyperlinks(str){ return str.replace(/\b((http|https):\/\/\S+)/g,'&lt;a href=&quot;$1&quot; target=&quot;_blank&quot;&gt;$1&lt;/a&gt;'); } function relativeTime(time){ var period = new Date(time); var delta = new Date() - period; if (delta &lt;= 10000) { // Less than 10 seconds ago return 'Just now'; } var units = null; var conversions = { millisecond: 1, // ms -&gt; ms second: 1000, // ms -&gt; sec minute: 60, // sec -&gt; min hour: 60, // min -&gt; hour day: 24, // hour -&gt; day month: 30, // day -&gt; month (roughly) year: 12 // month -&gt; year }; for (var key in conversions) { if (delta &lt; conversions[key]) { break; } else { units = key; delta = delta / conversions[key]; } } delta = Math.floor(delta); if (delta !== 1) { units += 's'; } return [delta, units, &quot;ago&quot;].join(' '); } })(jQuery); &lt;/ul&gt;</pre></div></div></div><p>Мы используем метод $.getJSON для отправки запроса в Graph API. Вы наверное заметили, что у нас нет функции обратного вызова. Это происходит по той причине, что мы получаем все данные одновременно.</p> <p>Начиная с jQuery 1.5, всем стало известно об отложенных объектах. Наверное вы уже видели конструкции типа $.when(). Это поможет нам достичь желаемого результата (инфа о пользователе и посты получим одновременно).</p> <p>Рендеринг шаблонов:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 13.5em"><pre>$('#headingTpl').tmpl(fb.user).appendTo(wall); // создаём список для постов: var ul = $('&lt;ul&gt;').appendTo(wall); // генерируем шаблоны: $('#feedTpl').tmpl(fb.posts).appendTo(ul);</pre></div></div></div><p>Метод tmpl() принимает массив. Теперь давайте применим плагин:</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 12em"><pre>$(document).ready(function(){ // вызываем плагин: $('#wall').facebookWall({id:'smashmag'}); });</pre></div></div></div><p>Вот и всё!</p> <p>Вывод</p> <p>Итак, вы научились работать с шаблонами и взаимодействовать с Facebook!</p> <p>Надеюсь, сегодняшний урок был для вас полезен.</p><div class="quote-box quote-main"><blockquote><p>Данный урок подготовлен для Вас командой сайта <a href="http://ruseller.com" rel="nofollow" target="_blank">http://ruseller.com</a><br />Источник урока: <a href="http://www.tutorialzine.com/2011/03/custom-facebook-wall-jquery-graph/" rel="nofollow" target="_blank">http://www.tutorialzine.com/2011/03/cus &#8230; ery-graph/</a><br />Перевел: Станислав Протасевич<br />Урок создан: 31 Мая 2011</p></blockquote></div> mybb@mybb.ru (barON) Wed, 04 Jan 2012 19:58:30 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=441#p441 http://supportbigforu.youbb.ru/viewtopic.php?pid=440#p440 <p><span style="display: block; text-align: center"><span style="color: red"><strong>Отличное портфолио на HTML5</strong></span></span><br />В данном уроке мы сделаем отличное портфолио на основе HTML5, jQuery и плагина Quicksand. Потенциально демонстрационное портфолио может быть существенно расширено без особых усилий.<br /><a href="http://qps.ru/46zmx" rel="nofollow" target="_blank">Демо</a>&#160; <br /><a href="http://ruseller.com/lessons/les1274/demo_1274.zip" rel="nofollow" target="_blank">Cкачать</a>&#160; <br /><strong><br />HTML</strong></p> <p>Сначала сделаем разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:</p> <p>index.html</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt; &lt;title&gt;Портфолио на HTML5 | Материалы сайта RUSELLER.COM&lt;/title&gt; &lt;!-- Наш файл CSS --&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/styles.css&quot; /&gt; &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Мое портфолио&lt;/h1&gt; &lt;/header&gt; &lt;nav id=&quot;filter&quot;&gt; &lt;!-- Пункты меню будут располагаться здесь. Они генерируются кодом jQuery --&gt; &lt;/nav&gt; &lt;section id=&quot;container&quot;&gt; &lt;ul id=&quot;stage&quot;&gt; &lt;!-- Пункты портфолио располагаются здесь --&gt; &lt;/ul&gt; &lt;/section&gt; &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;assets/js/jquery.quicksand.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;assets/js/script.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div></div><p>Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элемент section содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav, оформленный как зеленая полоса, действует как фильтр содержания.</p> <p>Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data, который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 19.5em"><pre> &lt;li data-tags=&quot;Типографика&quot;&gt; &lt;img src=&quot;assets/img/shots/1.jpg&quot; alt=&quot;Иллюстрация&quot; /&gt; &lt;/li&gt; &lt;li data-tags=&quot;Логотипы,Типографика&quot;&gt; &lt;img src=&quot;assets/img/shots/2.jpg&quot; alt=&quot;Иллюстрация&quot; /&gt; &lt;/li&gt; &lt;li data-tags=&quot;Веб дизайн,Логотипы&quot;&gt; &lt;img src=&quot;assets/img/shots/3.jpg&quot; alt=&quot;Иллюстрация&quot; /&gt; &lt;/li&gt;</pre></div></div></div><p>Вы можете поместить в список пунктов другие работы и использовать другие метки.</p> <p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les1274/img_1.jpg" alt="http://ruseller.com/lessons/les1274/img_1.jpg" /></p> <p><strong>jQuery</strong></p> <p>Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы li в них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.</p> <p>После загрузки страницы мы запускаем цикл для обнаружения меток.</p> <p>script.js – Часть 1</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>$(document).ready(function(){ var items = $('#stage li'), itemsByTags = {}; // Цикл по всем элементам li: items.each(function(i){ var elem = $(this), tags = elem.data('tags').split(','); // Добавляем атрибут data-id. Требуется плагином Quicksand: elem.attr('data-id',i); $.each(tags,function(key,value){ // Удаляем лишние пробелы: value = $.trim(value); if(!(value in itemsByTags)){ // Создаем пустой массив для пунктов: itemsByTags[value] = []; } // Каждый пункт добавляется в один массив по метке: itemsByTags[value].push(elem); }); });</pre></div></div></div><p>Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags['Веб дизайн'] будет содержать массив всех пунктов, которые имеют метку 'Веб дизайн'. Мы используем данный объект для создания скрытого неупорядоченного списка на странице для плагина Quicksand.</p> <p>Создадим вспомогательные функции</p> <p>script.js – Part 2</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>function createList(text,items){ // Вспомогательная функция, которая получает текст кнопки меню и // массив пунктов li // Создаем пустой неупорядоченный список var ul = $('&lt;ul&gt;',{'class':'hidden'}); $.each(items,function(){ // Создаем копию каждого пункта li // и добавляем ее в список: $(this).clone().appendTo(ul); }); ul.appendTo('#container'); // Создаем пункт меню. Неупорядоченный список добавляется // как параметр data (доступен через .data('list'): var a = $('&lt;a&gt;',{ html: text, href:'#', data: {list:ul} }).appendTo('#filter'); }</pre></div></div></div><p>Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список&#160; ul и добавляет ссылку на зеленую полоску.</p> <p>Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.</p> <p>script.js – Часть 3</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 34.5em"><pre>// Создаем опцию &quot;Все&quot; в меню: createList('Все',items); // Цикл по массивам в itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $('#filter a').live('click',function(e){ var link = $(this); link.addClass('active').siblings().removeClass('active'); // Используем плагин Quicksandдля анимации пунктов li. // Он использует data('list'), определённую нашей функцией createList: $('#stage').quicksand(link.data('list').find('li')); e.preventDefault(); }); $('#filter a:first').click();</pre></div></div></div><p><strong>CSS </strong></p> <p>Самая интересная часть стилей CSS - зеленая полоска #filter. Для нее используются&#160; псевдо-элементы :before / :after, чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.</p> <p>styles.css</p><div class="code-box"><strong class="legend">Код:</strong><div class="blockcode"><div class="scrollbox" style="height: 35em"><pre>#filter { background: url(&quot;../img/bar.png&quot;) repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align:center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; box-shadow:0 4px 4px #000; } #filter:before, #filter:after { background: url(&quot;../img/bar.png&quot;) no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ''; -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); } #filter:before { background-position: 0 -47px; left: -78px; } #filter:after { background-position: 0 0; right: -78px; } #filter a{ color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; } #filter a:hover{ text-decoration:none; } #filter a.active{ background: url(&quot;../img/bar.png&quot;) repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; }</pre></div></div></div><p><img class="postimg" loading="lazy" src="http://ruseller.com/lessons/les1274/img_2.jpg" alt="http://ruseller.com/lessons/les1274/img_2.jpg" /><br /><strong>Готово!</strong></p> <p>Вы можете использовать шаблон для своих проектов. Изменение содержания портфолио осуществляется просто. если у пользователя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта.</p><div class="quote-box quote-main"><blockquote><p>Данный урок подготовлен для Вас командой сайта <a href="http://ruseller.com" rel="nofollow" target="_blank">http://ruseller.com</a><br />Источник урока: <a href="http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/" rel="nofollow" target="_blank">http://tutorialzine.com/2011/06/beautif &#8230; l5-jquery/</a><br />Перевел: Сергей Фастунов<br />Урок создан: 14 Октября 2011</p></blockquote></div> mybb@mybb.ru (barON) Wed, 04 Jan 2012 17:07:08 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=440#p440 http://supportbigforu.youbb.ru/viewtopic.php?pid=433#p433 <p><span style="color: red"><span style="display: block; text-align: center"><strong>Видеоурок:<br />Что такое ТиЦ и PR. Основы раскрутки</strong></span></span><br /></p> mybb@mybb.ru (barON) Tue, 15 Nov 2011 07:53:23 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=433#p433 http://supportbigforu.youbb.ru/viewtopic.php?pid=421#p421 <div class="quote-box quote-main"><blockquote><p><strong>&lt;html&gt;&lt;/html&gt; - Указывает программе просмотра страниц что это HTML документ. </p> <p>&lt;head&gt;&lt;/head&gt; - Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. </p> <p>&lt;body&gt;&lt;/body&gt; - Определяет видимую часть документа </p> <p>Теги оглавления </p> <p>&lt;title&gt;&lt;/title&gt; - Помещает название документа в оглавление программы просмотра страниц </p> <p>Атрибуты тела документа </p> <p>&lt;body bgcolor=?&gt; - Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. </p> <p>&lt;body text=?&gt; - Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. </p> <p>&lt;body link=?&gt; - Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет. </p> <p>&lt;body vlink=?&gt; - Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет. </p> <p>&lt;body alink=?&gt; - Устанавливает цвет гиперссылок при нажатии. </p> <p>Теги для форматирования текста </p> <p>&lt;pre&gt;&lt;/pre&gt; - Обрамляет предварительно отформатированный текст. </p> <p>&lt;h1&gt;&lt;/h1&gt; - Создает САМЫЙ БОЛЬШОЙ заголовок </p> <p>&lt;h6&gt;&lt;/h6&gt; - Создает самый маленький заголовок </p> <p>&lt;b&gt;&lt;/b&gt; - Создает жирый текст </p> <p>&lt;i&gt;&lt;/i&gt; - Создает наклонный текст </p> <p>&lt;tt&gt;&lt;/tt&gt; - Создает текст - имитирующий стиль печатной машинки.Используется для цитат, обычно наклонный текст. </p> <p>&lt;em&gt;&lt;/em&gt; - Используется для выделения из текста слова (наклонный или жирный текст) </p> <p>&lt;strong&gt;&lt;/strong&gt; - Используется для выделения наиболее выжных частей текста (наклонный или жирный текст) </p> <p>&lt;font size=?&gt;&lt;/font&gt; - Устанавливает размер текста в пределах от 1 до 7. </p> <p>&lt;font color=?&gt;&lt;/font&gt; - Устанавливает цвет текста, используя значение цвета в виде RRGGBB. </p> <p>Гиперссылки </p> <p>&lt;a xhref=&quot;URL&quot;&gt;&lt;/a&gt; - Создает гиперссылку на другие документы или часть текущего документа. </p> <p>&lt;a xhref=&quot;mailto:EMAIL&quot;&gt;&lt;/a&gt; - Создает гиперссылку вызова почтовой программы для написания письма автору документа. </p> <p>&lt;a name=&quot;NAME&quot;&gt;&lt;/a&gt; - Отмечает часть текста как цель для гипперссылок в документе. </p> <p>&lt;a xhref=&quot;http://www.cyberguru.ru/#NAME&quot;&gt;&lt;/a&gt; - Создает гиперссылку на часть текущего документа. </p> <p>Форматирование </p> <p>&lt;p&gt; - Создает новый параграф </p> <p>&lt;p align=?&gt; - Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center </p> <p>&lt;br&gt; - Вставляет перевод строки. </p> <p>&lt;blockquote&gt;&lt;/blockquote&gt; - Создает отступы с обеих сторон текста.&lt;dl&gt;&lt;/dl&gt;Создает список определений. </p> <p>&lt;dt&gt; - Определяет каждый из терминов списка </p> <p>&lt;dd&gt; - Описывает каждое определение </p> <p>&lt;ol&gt;&lt;/ol&gt; - Создает нумерованный список </p> <p>&lt;li&gt; - Определяет каждый элемент списка и присваивает номер </p> <p>&lt;ul&gt;&lt;/ul&gt; - Создает ненумерованный список </p> <p>&lt;li&gt; - Предваряет каждый элемент списка и добавляет кружок или квадратик. </p> <p>&lt;div align=?&gt; - Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей </p> <p>Графические элементы </p> <p>&lt;img xsrc=&quot;name&quot;&gt; - Добавляет изображение в HTML документ </p> <p>&lt;img xsrc=&quot;name&quot; align=?&gt; - Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle </p> <p>&lt;img xsrc=&quot;name&quot; border=?&gt; - Устанавливает толщину рамки вокруг изображения </p> <p>&lt;hr&gt; - Добавляет в HTML документ горизонтальную линию.&lt;hr size=?&gt;Устанавливает высоту(толщину) линии </p> <p>&lt;hr width=?&gt; - Устанавливает ширину линии, можно указать ширину в пикселах или процентах. </p> <p>&lt;hr noshade&gt; - Создает линию без тени. </p> <p>&lt;hr color=?&gt; - Задает линии определенный цвет. Значение RRGGBB. </p> <p>Таблицы </p> <p>&lt;table&gt;&lt;/table&gt; - Создает таблицу. </p> <p>&lt;tr&gt;&lt;/tr&gt; - Определяет строку в таблице. </p> <p>&lt;td&gt;&lt;/td&gt; - Определяет отдельную ячейку в таблице. </p> <p>&lt;th&gt;&lt;/th&gt; - Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) </p> <p>Атрибуты таблицы </p> <p>&lt;table border=#&gt; - Задает толщину рамки таблицы. </p> <p>&lt;table cellspacing=#&gt; - Задает расстояние между ячейками таблицы. </p> <p>&lt;table cellpadding=#&gt; - Задает расстояние между содержимым ячейки и ее рамкой. </p> <p>&lt;table width=#&gt; - Устанавливает ширину таблицы в пикселах или процентах от ширины документа. </p> <p>&lt;tr align=?&gt; или &lt;td align=?&gt; - Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. </p> <p>&lt;tr valign=?&gt; или &lt;td valign=?&gt; - Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. </p> <p>&lt;td colspan=#&gt; - Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1) </p> <p>&lt;td rowspan=#&gt; - Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) </p> <p>Доступно только для пользователей - Не позволяет программе просмотра делать перевод строки в ячейке таблицы. </p> <p>Кадры </p> <p>&lt;frameset&gt;&lt;/frameset&gt; - Предваряет тег &lt;body&gt; в документе, содержащем кадры; </p> <p>&lt;frameset rows=&quot;value,value&quot;&gt; - Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров. </p> <p>&lt;frameset cols=&quot;value,value&quot;&gt; - Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров. </p> <p>&lt;frame&gt; - Определяет единичный кадр или область в таблице кадров. </p> <p>&lt;noframes&gt;&lt;/noframes&gt; - Определяет, что будет показано в окне браузера если он не поддерживает кадры. <br />Атрибуты кадров </p> <p>&lt;frame xsrc=&quot;URL&quot;&gt; - Определяет какой из HTML документов будет показан в кадре. </p> <p>&lt;frame name=&quot;name&quot;&gt; - Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров. </p> <p>&lt;frame marginwidth=#&gt; - Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1. </p> <p>&lt;frame marginheight=#&gt; - Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1. </p> <p>&lt;frame scrolling=VALUE&gt; - Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть &quot;yes,&quot; &quot;no,&quot; или &quot;auto&quot;. Значение по умолчанию для обычных документов - auto. </p> <p>&lt;frame noresize&gt; - Препятствует изменению размеров кадра. </p> <p>Формы </p> <p>Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. </p> <p>&lt;form&gt;&lt;/form&gt; - Создает формы </p> <p>&lt;select multiple name=&quot;NAME&quot; size=?&gt;&lt;/select&gt; - Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. </p> <p>&lt;option&gt; - Указывает каждый отдельный элемент меню </p> <p>&lt;select name=&quot;NAME&quot;&gt;&lt;/select&gt; - Создает ниспадающее меню &lt;option&gt;Указывает каждый отдельный элемент меню </p> <p>&lt;textarea name=&quot;NAME&quot; cols=40 rows=8&gt;&lt;/textarea&gt; - Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. </p> <p>&lt;input type=&quot;checkbox&quot; name=&quot;NAME&quot;&gt; - Создает checkbox. За тегом следует текст. </p> <p>&lt;input type=&quot;radio&quot; name=&quot;NAME&quot; value=&quot;x&quot;&gt; - Создает radio кнопку. За тегом следует текст. </p> <p>&lt;input type=text name=&quot;foo&quot; size=20&gt;- Создает строку для ввода текста. Параметром Size указывается длина в символах. </p> <p>&lt;input type=&quot;submit&quot; value=&quot;NAME&quot;&gt; - Создает кнопку &quot;Принять&quot; </p> <p>&lt;input type=&quot;image&quot; border=0 name=&quot;NAME&quot; xsrc=&quot;name.gif&quot;&gt; - Создает кнопку &quot;Принять&quot; - для этого используется изображение&lt;input type=&quot;reset&quot;&gt;Создает кнопку &quot;Отмена&quot;</strong></p></blockquote></div> mybb@mybb.ru (barON) Tue, 18 Oct 2011 20:40:47 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=421#p421 http://supportbigforu.youbb.ru/viewtopic.php?pid=419#p419 <p><del><img class="postimg" loading="lazy" src="http://uploads.ru/i/g/2/U/g2U6h.png" alt="http://uploads.ru/i/g/2/U/g2U6h.png" /><br /></del></p> mybb@mybb.ru (barON) Mon, 17 Oct 2011 23:37:08 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=419#p419 http://supportbigforu.youbb.ru/viewtopic.php?pid=404#p404 <p><span style="display: block; text-align: center"><img class="postimg" loading="lazy" src="http://uploads.ru/i/Z/e/3/Ze3ip.jpg" alt="http://uploads.ru/i/Z/e/3/Ze3ip.jpg" /><br /></span><br />Интернет - это сплошной HTML, даже на форумах и в социальных сетях люди ломают голову над нехитрой кнопкой с названием очередного HTML-тега, поэтому прохождение данного видеокурса просто необходимо каждому &quot;юзеру&quot;. Этот курс даст вам начальные знания по HTML и общее представление об устройстве сайтов.</p> <p>Содержание видеокурса:<br />01. Что такое HTML<br />02. Создаём HTML-файл<br />03. О структуре файлов и папок сайта<br />04. Три главных тега в HTML-коде<br />05. Теги переноса строки<br />06. Заголовки и выделение текста<br />07. Раскрашиваем текст + таблица цветов<br />08. Вставляем картинки<br />09. Гиперссылки на другие HTML-страницы<br />10. Гиперссылка на скачивание файла<br />11. Таблицы и структура HTML-страницы<br />12. Меняем фон страниц</p> <p>Название: HTML для начинающих<br />Автор: Дмитрий Альховик<br />Год выпуска: 2009<br />Язык: русский<br />Аудио: mp3 44.100kHz, Stereo, 128kBits/sec<br />Видео: кодек: flash SWF<br />Формат: 800 Х 600 pixels<br />Продолжительность: 80 мин<br />Размер: 77 Mb</p> <p><a href="http://depositfiles.com/files/8kbhqejxc" rel="nofollow" target="_blank">Скачать</a></p> mybb@mybb.ru (barON) Sun, 16 Oct 2011 13:37:01 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=404#p404 http://supportbigforu.youbb.ru/viewtopic.php?pid=403#p403 <p>Спасибо за помощь м дизайном. <span style="font-family: Arial Black"><span style="color: red"><strong> <a href="http://tuner.bigfo.ru/" rel="nofollow" target="_blank">здесь</a></strong></span></span><br /> <img class="postimg" loading="lazy" src="http://upforme.ru/uploads/0002/25/06/8547-2.gif" alt="http://upforme.ru/uploads/0002/25/06/8547-2.gif" /></p> mybb@mybb.ru (street) Sun, 16 Oct 2011 12:02:03 +0400 http://supportbigforu.youbb.ru/viewtopic.php?pid=403#p403