Как сделать открытие новой вкладки. Как создать вкладки на фан странице Facebook

От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.

Библиотека jQuery UI предлагает нам виджет Табы (http://jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.

Итак, давайте начнем с разметки, которая может быть примерно такой:

Давайте немного разберем созданную структуру вкладок. Каждая вкладка представляет из себя элемент списка. Название вкладки помещено в ссылку, якорь которой является здесь ключевым. Дело в том, что по якорю ссылки мы можем связать вкладку с ее текстом. Тексты вкладок помещены в блок с идентификаторами, которые попросту дублируют якоря ссылок.

Теперь остается оформить наши табы, добавив несколько стилевых правил в файл стилей:

*{margin: 0; padding: 0;} .wrapper{ width: 500px; margin: 50px auto; } #tabs{ width: 100%; } #tabs ul{ list-style: none; display: table-row; } #tabs ul li{ display: table-cell; background: #ccc; height: 40px; text-align: center; border-left: 5px solid #fff; } #tabs ul li:first-child{ border-left: none; background: #f3f3f3; } #tabs ul li a{ display: table-cell; width: 500px; height: 40px; line-height: 40px; color: #000; text-decoration: none; font-size: 20px; } #tabs ul li a:hover{ color: #e8117f; } .tab-content{ border: 10px solid #f3f3f3; } .tabs-text{ padding: 10px; /*display: none;*/ }

В результате мы получили классические вкладки (табы). Осталось реализовать переключение между вкладками, добавив табам необходимый функционал. В следующем уроке мы с вами напишем несложный скрипт, который реализует необходимый функционал.

Процесс время пребывания в интернете в большинстве случаев сводится к использованию специальной программы под названием – браузер. Браузер, программа, использующая в своей работе основной протокол интернета HTTP, позволяет пользователю просматривать интернет страницы, работать с почтой, загружать файлы, общаться в социальных сетях.

Для удобной организации работы, а также одновременного просмотра нескольких страниц в браузере, разработчики позаботились о создании вкладок. Вкладки позволяют, не открывая еще один экземпляр приложения, находится одновременно на различных сайтах. По сути, вкладка это еще одно окно, только открытое внутри программы.

Существуют множество браузеров от создателей различных компаний, последние версии которых снабжены таким дополнением в работе как вкладки. Мы с вами рассмотрим вопрос: как добавить вкладку в таких широко известных браузерах: Google Chrome, Mozilla Firefox, Opera и Safari.

Google Chrome

Начнем наш обзор с рассмотрения операции добавления вкладки в браузере от такого интернет гиганта как Google. В программе Chrome создание новой вкладки не создаст трудностей даже начинающему пользователю, все интуитивно понятно.

В открывшемся окне браузера Google Chrome, программа автоматически создает новую вкладку, название которой содержит имя открытой страницы. В нашем случае это Google. Рядом возле крестика закрытия программы содержится небольшая кнопка, напоминающая уменьшенную версию вкладки. Клик мыши по этой копии вкладки – создаст новую.

Еще пара вариантов как в Хроме добавить вкладку:

• Открыть меню программы, и выбрать первый пункт Новая вкладка;

Mozilla Firefox

Продолжаем знакомится с созданием новых вкладок в браузерах. На очереди рассмотрение бесплатного и динамически развивающегося браузера Mozilla Firefox. Процесс создания вкладки в данном браузере очень схож на то, как добавить вкладку в Гугле, который описан выше. В открытом окне браузера под строкой адреса, находится панель вкладок. Для добавления новой необходимо нажать на рядом размещенный возле открытой вкладки «+».

Либо доступны следующее варианты создания новой вкладки в Мозилле:

• Пункт меню Файл - Новая вкладка;
• Нажать сочетание клавиш CTRL + T.

Opera

Проследим процесс того, как создать новую вкладку в популярной у пользователей программе Opera. Браузер от компании Opera обладает большими возможностями, ну и конечно же поддержкой работы со многими вкладками. Для создания новой вкладки необходимо сделать щелчок мыши по изображенному «+», рядом с существующей вкладкой.

Следующее варианты создания новой вкладки в Опере:

• Нажать по главной кнопке c логотипом «Opera», далее перейти по пунктам: Вкладки и окна - Создать вкладку;
• Нажать сочетание клавиш CTRL + T.

Safari

Напоследок вспомним о компании Apple, и о его детище браузере Safari, совместимым в работе с операционной системой Windows. Изначально браузер Сафари был разработан для пользователей макбуков под операционной системой Mac OS. В рассматриваемом примере взята версия, работающая под ОС Windows.

Для добавления новой вкладки на панель вкладок, необходимо кликнуть по изображению меню текущей страницы, и затем выбрать первый пункт Новая вкладка. Либо уже известным сочетанием горячих клавиш CTRL + T.

Каждый бизнесмен для своего продвижения создает фан страницу на Facebook. Как создать вкладки на этой странице, которые будут завязаны на Ваш канал на YouTube и Ваши продающие страницы - это тема сегодняшней статьи.

Мы уже не раз говорили о том, что все стараются совершенствовать свои ресурсы. Поэтому очень часто меняются механизмы создания той или иной функции.

Прошли изменения и на фан странице Faсebook в части создания вкладок или, как их еще называют - табов. Изменилось даже расположение табов на странице.

Сама страница становится все больше похожа на блог. На ней так же в верхней части ленты новостей. А слева образован сайдбар, в котором на блоге мы устанавливаем статичную информацию. Например какие-нибудь виджеты с переходом на подписную страницу. Или прямо - форму подписки.

Можно выставить какое-нибудь интересное видео с полезной информацией по теме вашего блога. То же самое теперь можно сделать и на фан странице. Но для начинающего владельца такой странички сделать это не просто. Надо знать некоторые моменты.

Вот о них мы сегодня и поговорим. Что бы выйти на приложения , которые нас интересуют - надо нажать кнопку в правом верхнем углу

и Вы попадаете в

Переходим по опции - Приложения и попадаем в настройки приложений . Здесь у Вас будут отображены те приложения. которые Вы уже подключили к работе. Сегодня мы обсудим работу приложения Woobox Custom Tab. Если оно еще у Вас не загружено - скопируйте название и введите его в строку поиска.

После предложенных Вам действий начинайте с ним работу. Просто кликните по ссылке - перейти к Приложению . Первое что Вам будет предложено сделать - это инсталлировать его. Нажмите зеленую кнопку и выполните все действия.

После инсталляции - выберите страницу, на которой Вы хотите установить данный таб

И переходите к настройке конфигурации вкладки

На открывшейся странице найдите две стрелочки в верхнем левом углу, нажмите на них для того что бы увидеть все приложения, которые уже установлены на Вашей странице. Как работать с ними дальше, Вы можете увидеть в видео, которое расположено в нижней части страницы.

А сейчас мы попробуем связать нашу страницу с аккаунтом в твиттере.

Для этого жмем на зеленую кнопку в правом верхнем углу и в выпадающем меню - выбираем Твиттер .

И в открывшейся странице приступайте к настройкам

1. В этом поле введите свой логин в твиттере;
2. Выбираем - все свои твитты или твитты, отобранные по специальным условиям поиска. Я выбрала все.
3. Если установим в этих чек боксах галочки, то исключим рисунки из ленты;
4. Не забудьте сохранить изменения

И получаете ленту твиттера внутри страницы Facebook

Ну а теперь приступаем к просмотру видео.