Как сделать картинку вкладки
Вставка изображения в HTML
За вставку картинок в HTML-документ отвечает тег и его атрибуты, главным из которых можно считать src, задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.
Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Раньше у тега был ещё один обязательный атрибут — alt, но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width (указывает ширину) и height (определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:
Навигационная карта
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
Пример карты изображения
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше — дело техники и определения координат, с точки зрения HTML ничего не усложняется.
Полезные ссылки:
LiveInternetLiveInternet
—Метки
—Музыка
—Рубрики
—Приложения
—Поиск по дневнику
—Подписка по e-mail
—Статистика
Для начинающих. Что такое вкладки и как с ними работать?
Основы работы в интернете
Начнем с браузеров. Браузер – это программа, с помощью которой Вы лазите в интернете – смотрите сайты, скачиваете фильмы, игры, программы, проверяете веб-почту, узнаете прогноз погоды на завтра и т.д. Сейчас для Windowsиспользуются в основном следующие четыре браузера:
— Mozilla Firefox (Мозила)
— Google Chrome (Хром)
С 99-процентной вероятностью можно утверждать, что у Вас на рабочем столе есть один из этих значков, и с его помощью Вы и выходите в интернет.
Далее я кратко рассмотрю основные элементы браузера на примере Оперы (ну нравится мне она, ничего не могу с собой поделать :))).
Адресная строка. Там, где на картинке написано www.kudz.ru, там и располагается адресная строка. В нее, Вы не поверите, вводят адрес сайта, на который хотят попасть. Как правило, вполне достаточно ввести адрес наподобие yandex.ru, google.comили kudz.ru, нажать после ввода Enterна клавиатуре, и Вы попадете на нужный сайт. Хотя иногда нужно вводить адрес как www.yandex.ru. Как понять, что и когда нужно вводить? Опытным путем, это самое простое.
Слева от адресной строки расположены кнопки управления:
стрелки назад-вперед позволяют перемещаться по посещенным страницам. Предположим, вы сейчас на сайте yandex.ru находитесь (т.е. написали в адресной строке yandex.ru и нажали Enter). Потом Вам взгрустнулось и Вы решили перейти на сайт google.ru. Перешли, т.е. написали в адресной строке google.ru и нажали Enter. РАНЬШЕ Вы были на yandex, СЕЙЧАС Вы находитесь на google, следите за мыслью? Теперь, Если Вы нажмете на кнопку со стрелкой назад, Вы попадете обратно на yandex, если после этого Вам снова взгрустнется и Вы снова захотите на google– Вам нужно будет нажать на кнопку со стрелкой вперед. Попробуйте, не бойтесь – такие перемещения иногда сильно облегчают жизнь.
Круговая стрелка – это кнопка «Обновить». Нажав на нее, Вы убедительно попросите браузер загрузить из интернета и показать Вам самую новую, последнюю версию страницы. Зачем это нужно? Интернет – это очень динамичная вещь, и информация в нем постоянно обновляется. Вот смотрите Вы курсы акций, например. Зашли на какой-нибудь биржевой сайт, нашли страничку, где есть курсы акций, и смотрите на них. Минуту смотрите, вторую, десятую… А потом Вы думаете – «А чего это я на старые цифры-то смотрю? Акции каждую секунду меняются, а у меня данные десятиминутной давности! Дай-ка я обновлю их!». Нажимаете на кнопку «Обновить» и получаете курсы акций на нынешний момент.
Остальные кнопки вряд ли представляют для Вас практический интерес.
Теперь перейдем к сайтам и страницам.
Сайт – это место в интернете, кем-то созданное, созданное ДЛЯ ЧЕГО-ТО, объединяющее как правило, множество разных материалов (но посвященных одной теме) и имеющее свой адрес.
Например, kudz.ru – это сайт, созданный мной, посвященный компьютерным курсам разной направленности, и у него есть адрес – kudz.ru.
yandex.ru – это сайт, созданный большущей такой серьезной компанией, специализирующийся на поиске в интернете информации и предоставлении разных интересных сервисов посетителям, и у него есть адрес – yandex.ru.
Страница – это составной элемент сайта. Т.е. любой сайт – хоть самый маленький, хоть гигантский – состоит из страничек. Каждая страница тоже имеет свой адрес, но в этот адрес ВСЕГДА включается имя сайта. Никаких адресов страниц Вам, естественно, помнить и знать не нужно – еще чего, память забивать!
Вам вполне достаточно знать адрес сайта – а уж по всем остальным страницам Вы сможете пройти с помощью ссылок.
Ссылка – это такая строчка текста, выделенная особым цветом (как правило, синим, хотя бывают и любые другие) и подчеркнутая. А еще при наведении на нее мыши указатель мышки меняет вид. И если, наведя на ссылку указатель, вы еще и нажмете левую кнопку мыши, то Вы перейдете на ту страницу, куда указывает эта ссылка.
Вот примеры ссылок:
Все эти подчеркнутые строчки текста – это ссылки. Кстати, ссылок полно и на самом сайте КУДЗ. Можете найти их и пощелкать по ним мышкой, и посмотреть что получится.
Работа с вкладками (удобное перемещение по страницам).
Что такое вкладки и зачем они нужны? Представьте себе, что Вы сидите в интернете, смотрите, например, сайт об автомобилях. Находитесь Вы на странице с каталогом автомобилей. И вот приглянулся Вам один из них. Вы щелкаете по нему левой кнопкой мышки и… переходите на страницу с ним, которая замещает страницу с каталогом автомобилей. Потом Вы решили посмотреть другую модель автомобиля. Что Вы сделаете? Нажмете на панели управления кнопку «Назад» и вернетесь в каталог. В нем уже выберете другую модель авто и щелкните уже по ней. И снова она заместит собой страницу с каталогом. Не очень удобно. А если Вы хотите открыть и сравнить две модели автомобиля между собой? По мощности там, по скорости… Ну это уж совсем неудобно будет – постоянно нажимать то «Назад», то «Вперед», щелкать мышкой то по одной модели автомобиля, то по второй… Одна морока и головная боль!
Разработчики браузеров, видимо, тоже так подумали-подумали и сделали всем пользователям классный подарок – вкладки. Благодаря им Вы можете в одном браузере открыть много страниц сразу. Итак, вверху экрана у Вас будет небольшая полоса вкладок – кнопок с названиями интернет-страниц. Посмотрите сейчас на верхнуюю часть своего браузера. Там должна быть как минимум одна вкладка. На картинке вкладки помечены красными стрелками.
Каждая вкладка – это одна страница. Отображается в основной части браузера только одна – та, которая сейчас активна.
На рисунке сейчас активной является с автомобилем JaguarXK, и ее содержимое показывается на основной части экрана. Чтобы другую вкладку сделать активной, нужно щелкнуть по ней левой кнопкой мышки. Только щелкайте, пожалуйста, по самой вкладке, а не по крестику! Многие по неизвестной причине нажимают именно на него, из-за чего вкладка закрывается, а потом удивляются…
Таким образом, вверху экрана у Вас, предположим открыто 3 вкладки, т.е. как бы 3 страницы. Первая с каталогом автомобилей, вторая – с одной моделью, третья – с другой моделью автомобиля. И вот с помощью мыши Вы можете практически мгновенно переключаться между этими вкладками-страницами. Щелкнули по одной – и Вы смотрите на AlfaRomeoSpider, щелкнули по другой – и Вы уже изучаете JaguarXK. Время переключения между вкладками исключительно мало, благодаря чему они очень удобны.
Как открывать новые вкладки? Есть два пути.
Посмотрите на рисунок, и Вы поймете, где эта кнопка находится в Опере. В других браузерах она может быть другого вида, но в любом случае она будет находиться либо слева, либо справа от самих вкладок. Попробуйте – Вы обязательно найдете ее!
Второй – это открывать страницы в новой вкладке. Например, Вы смотрите каталог автомобилей, и Вам приглянулся Ягуар. Вы хотите перейти на его страницу, НЕ ЗАКРЫВАЯ страницу с каталогом. Т.е. открыть Ягуар в новой вкладке. Для этого наведите указатель мыши на ссылку с приглянувшимся Вам Ягуаром, нажмите правую кнопку мыши и в выпадающем меню выберите «Открыть в новой вкладке».
Либо, что еще проще, просто щелкните по ссылке СРЕДНЕЙ кнопкой мыши. Чаще всего в роли средней кнопки выступает колесико мыши. Да-да, колесико можно не только крутить, но и нажимать, как обычную кнопку. Попробуйте и так, и сяк. И попереключайтесь между вкладками.
Как закрывать вкладки? Это совсем просто. Посмотрите внимательно на вкладку. В правой ее части Вы обязательно найдете крестик. Нажав на него, Вы закроете вкладку. Если хотите закрыть вообще все вкладки, можете на любой вкладке щелкнуть правой кнопкой мыши и в выпадающем меню выбрать «Закрыть все».
У меня вообще нет вкладок в браузере. К сожалению, может быть и такое (хотя и маловероятно). Это может быть только если Вы используете браузер InternetExplorerверсии 6 или ниже. Мой Вам совет – вообще не используйте его. Ставьте лучше Оперу или Мозилу.
Как сменить браузер (на Оперу, Мозилу, Хром)?
Опишу все для браузера Опера.
1. Открываете тот браузер, который у Вас есть (скорее всего, это Интернет Эксплорер).
2. Заходите на сайт opera.ru. Т.е. в адресной строке вводите opera.ruи нажимаете Enter.
3. Внимательно ждете, пока сайт загрузится.
4. На появившейся странице находите большущую кнопку «Загрузить Opera версии такой-то для Windows». Жмете на нее.
5. Перед Вами появляется окно, подобное представленному на картинке.
6. Появляется окно загрузки, в котором показывается время, которое осталось подождать. Терпеливо ждете (или нетерпеливо, это уж как хотите).
7. Когда время подойдет, скачанный файл установки автоматически запустится. Перед Вами возникнет окно установки Оперы. В нем СО ВСЕМ СОГЛАШАЕТЕСЬ, ВЕЗДЕ ГДЕ ТОЛЬКО МОЖНО жмете Далее, Да, Согласен, и все в таком духе. Никаких Отмен и Прервать НЕ НАЖИМАЕТЕ. Таким образом у Вас устанавливается Опера.
После этого на Вашем рабочем столе появляется значок Оперы. Теперь Вы можете прекрасно выходить в интернет через этот значок. Поздравляю! Можете таким образом скачать другой браузер, но просто имейте в виду, что все (вообще все) уроки будут рассмотрены на примере именно Оперы.
Процитировано 1 раз
Понравилось: 1 пользователю
Узнайте, как создавать вкладки с помощью CSS и JavaScript.
Вкладки
Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Создать вкладки с возможностью переключения
Шаг 1) Добавить HTML:
Пример
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Создавайте кнопки для открытия определенного содержимого вкладки. Все
Шаг 2) Добавить CSS:
Стиль кнопок и содержимого вкладки:
Пример
/* Стиль вкладки */
.tab <
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
>
/* Стиль кнопок, используемых для открытия содержимого вкладки */
.tab button <
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
>
/* Изменить цвет фона кнопок при наведении */
.tab button:hover <
background-color: #ddd;
>
/* Создать активный / текущий класс tablink */
.tab button.active <
background-color: #ccc;
>
/* Style the tab content */
.tabcontent <
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
>
Шаг 3) Добавить JavaScript:
Example
function openCity(evt, cityName) <
// Объявить все переменные
var i, tabcontent, tablinks;
// Получить все элементы с и скрыть их
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i
Исчезать во вкладках:
Если вы хотите добавить содержимое вкладки, добавьте следующий CSS:
Пример
.tabcontent <
animation: fadeEffect 1s; /* Эффект затухания занимает 1 секунду */
>
/* Перейти от нуля до полной непрозрачности */
@keyframes fadeEffect <
from
to
>
Показать вкладку по умолчанию
Чтобы открыть конкретную вкладку при загрузке страницы, используйте JavaScript, чтобы «кликнуть» по кнопке указанной вкладки:
Пример
Закрыть вкладку
Если вы хотите закрыть определенную вкладку, используйте JavaScript, чтобы скрыть вкладку одним нажатием кнопки:
Узнать, как создать вкладки с помощью CSS и JavaScript.
Вкладки
Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:
Лондон
Лондон является столицей Англии.
Париж
Париж является столицей Франции.
Токио
Токио является столицей Японии.
Создание переключаемых вкладок
Шаг 1) Добавить HTML:
Пример
Лондон
Лондон является столицей Англии.
Париж
Париж является столицей Франции.
Токио
Токио является столицей Японии.
Создание кнопок для открытия определенного содержимого вкладки. Все элементы
Шаг 2) Добавить CSS:
Стиль кнопок и содержимого вкладки:
Пример
/* Стиль вкладки */
.tab <
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
>
/* Стиль кнопок, которые используются для открытия содержимого вкладки */
.tab button <
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
>
/* Изменение цвета фона кнопок при наведении курсора */
.tab button:hover <
background-color: #ddd;
>
/* Создание активного/текущего класса связи вкладки */
.tab button.active <
background-color: #ccc;
>
/* Стиль содержимого вкладки */
.tabcontent <
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
>
Шаг 3) Добавить JavaScript:
Пример
function openCity(evt, cityName) <
// Объявить все переменные
var i, tabcontent, tablinks;
// Получить все элементы с помощью и спрятать их
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i
Вкладки исчезают:
Если вы хотите скрыть содержимое вкладки, добавьте следующий CSS:
Пример
.tabcontent <
animation: fadeEffect 1s; /* Эффект затухания занимает 1 секунду */
>
/* Перейти от нуля к полной непрозрачности */
@keyframes fadeEffect <
from
to
>
Показывать вкладку по умолчанию
Чтобы открыть определенную вкладку при загрузке страницы, используйте JavaScript, чтобы «нажать» на указанную кнопку вкладки:
Пример
Закрыть вкладку
Если вы хотите закрыть определенную вкладку, используйте JavaScript, чтобы скрыть вкладку одним нажатием кнопки:
Панель вкладок в фотошопе
Рассмотрев общую концепцию интерфейса программы фотошоп, мы приступили к детальному изучению его основных панелей. Уже позади такие обзоры как: панель управления, палитра Adobe Mini Bridge, рабочая среда и панель параметров. Теперь на очереди обзор панели вкладок в фотошопе.
На самом деле, она ничего сложного из себя не представляет. Более опытный пользователь пройдет сразу мимо, но моя цель, при создании учебника, рассмотреть каждый аспект, даже такой простой как панель вкладок.
Что такое панель вкладок?
Каждый открытый документ в фотошопе это отдельное окно. Другими словами, вы открыли фотографию, автоматически создалась вкладка, открыли другую фото — новая вкладка. Таких можно открыть в программе сколько угодно. П анель вкладок помогает :
Чтобы понять какая в данный момент активная вкладка, обратите внимание на цвет. Активная выделяется более ярким цветом. Все остальные будут одинаково темно-серые (в зависимости от выбранной версии программы, эти цвета могут отличаться, но принцип действия остается тот же).
Переключаться между ними также просто. Нужно только навести указатель мыши на нужную и сделать клик левой кнопкой мыши. На скриншоте выше я отметил красной стрелкой крестик. Если на него нажать, то окно с документом закроется. Если вы не сохранили изменения, программа вам предложит это сделать.
Вкладки можно свободно перемещать по программе. Есть несколько вариантов как это можно сделать.
1. Менять их местами на самой панели (под панель подразумевается тонкая темная линия, расположенная под панелью параметров). Для этого зажмите левой кнопкой мыши нужную вкладку и тащите ее влево или вправо на этой линии.
2. Поскольку это все-таки окно, то его можно свободно перемещать в любое место программы. Зажмите мышью и тащите вкладку, например, вниз. Вы увидите как оно сразу примет очертания окна, так знакомого нам по той же ОС Windows (в верхнем правом углу будут присутствовать кнопки Закрыть, Свернуть и Развернуть.) Вот так оно будет выглядеть:
Обратите внимание на желтую стрелочку. По умолчанию, когда вы создаете такое окно, оно будет размером с изображение, которое в себя включает. Бывает так, что оно очень большое и занимает весь экран. Если использовать инструмент изменения размера (как раз и отмеченный желтой стрелкой), то можно регулировать этот размер по своему усмотрению.
При таком изменении размера само изображение не меняется. Меняется только его масштаб.
Еще один пример из миллиона, когда эти вкладки нам нужны:
Вам нужно объединить два и более изображения (один из самых простых способов как это сделать — перетащите одно на другое). Вы перемещаете вкладку в вид окна, меняете размер, чтобы оно не мешало, затем открываете изображение, с которым нужно объединить и обыкновенным перетаскиванием тащите картинку из окна. Вот так это выглядит:
Кликните, чтобы увеличить
Такое окно можно вернуть обратно на панель. Для этого кликните мышью по верхней части окна (она серого цвета) и тяните на панель. Когда увидите, что на панели появились голубые полосы, значит можно отпустить мышь.
Способы упорядочивания документов
Если помните, в статьях про интерфейс и панель управления я упоминал о функции упорядочить документы. Она, главным образом, влияет на то, как ваши вкладки будут располагаться в программе фотошоп. Вот эта кнопочка и ее меню:
Итак, вы видите 20 прямоугольников с разной разметкой. Это ни что иное как макеты расположения вкладок на рабочем пространстве фотошопа. Я не буду сейчас выкладывать скриншоты как они все выглядят — это вы можете сделать сами. Просто откройте штучек 5-6 любых изображений, а затем пробегитесь по макетам. Вы увидите как будет меняться главный экран фотошопа.
Может быть, ни один из них вы использовать не станете, но знать как это выглядит — обязаны!
Самый первый прямоугольник — Объединить все — это стандартный режим, который, скорее всего, оставите в итоге.
В этом же меню есть и другие полезности. Актуальные пиксели — благодаря этому инструменту можно просмотреть изображение, учитывая его размерность в пикселях. Во весь экран — устанавливает изображение на все рабочее пространство. Согласовать масштаб и Согласовать расположение — устанавливает один и тот же масштаб и выравнивает все изображения.