Панель навигации в фотошопе. Панель навигации (Navigation Panel)
Особенно это полезный материал для тех, кто занимается ретушированием и обработкой фотографий, так как в вашем деле необходимо быстро ориентироваться в пространстве рабочего изображения.
Итак, разберемся еще раз с ролями:
Фотошоп - это ваш самолет!
Вы - пилот!
Ваш штурвал - панель навигации!
Для управления изображением в Photoshop
мы используем навигационную панель.
Если навигационная панель не видна, то ее нужно активировать в меню Window
(Окна) - выбрать (Навигатор).
Давайте приглядимся к навигационной панели:
В области отмеченной буквой A мы видим редактор масштаба.
В данный момент изображение имеет масштаб 81.97% от настоящего размера.
Здесь можно вводить значения от 0.11% до 1600% .
Мы также можем использовать ползунок (отмечен буквой E ):
перетаскивая вправо - увеличиваете , влево - уменьшаете .
Кликая на значок (отмечен буквой В ) мы можем уменьшить постепенно небольшими шажками.
А этот значок (отмечен буквой С ) увеличивает. Красный квадратик, отмеченный буквой D , говорит нам о том, какая часть изображения видна в документе.
Это окошко будет становиться меньше и меньше в том случае, если мы будем постоянно увеличивать изображение.
Мы можем передвигать этот квадратик - просто наведите курсор на изображение в навигационной области пока не появится такой значок:
Когда это случится, вы просто зажимаете левую кнопку мыши и перетаскиваете окошко на тот участок изображения, который вам нужно корректировать в данный момент.
Заметьте: вы можете перетаскивать квадратик только в том случае, если он меньше чем само изображение.
Посмотрите на скриншоты:
на верхнем - мы не можем передвигать красный квадрат, на нижнем можем без проблем:
Важно отметить, что саму навигационную панель мы тоже можем увеличивать.
Просто потяните за нижний правый угол панели (отмечен красным цветом на скриншоте):
Это позволит увидеть больше деталей:
Надеемся, вам этот материал будет полезен, и вы будете закрытыми глазами ориентироваться по вашему бескрайнему изображению.
Приятного путешествия!
Глава 7. Панель навигации
Pamela Roberts
Перевод на русский : Kernel PanicРедакция русского перевода : Григорий Мохин
Издание 3.1 (2002-09-22 )
Панель навигации находится в левой части окна Konqueror . Включить её (или отключить, если она уже включена) можно с помощью пункта меню Окно ->Показать панель навигации или клавиши F9 .
Данная панель содержит несколько вкладок; чтобы перейти к одной из них, щёлкните по её значку. Чтобы отключить панель навигации, оставив только значки вкладок, щёлкните по значку текущей вкладки.
Закладки
В этой вкладке отображается список закладок; чтобы открыть одну из них в главном окне, щёлкните по ней левой кнопкой мыши.
ЖурналВ этой владке отображается журнал вашей работы в Интернете. Чтобы открыть один из показанных адресов в главном окне, щёлкните по нему левой кнопкой мыши. Чтобы открыть его в новом окне, щёлкните по нему правой кнопкой мыши и в появившемся меню выберите пункт В новом окне .
Чтобы удалить какой-либо адрес, щёлкните по нему правой кнопкой мыши и в появившемся меню выберите пункт Удалить элемент . Чтобы очистить журнал работы в Интернете, выберите пункт Очистить журнал .
В этом же меню вы можете указать, в каком порядке следует отображать адреса в журнале: в алфавитном или по дате.
Если в том же меню выбрать пункт Настройка... , появится окно, в котором вы сможете указать максимальный размер журнала, а также через какое время после последнего посещения адрес следует автоматически удалять. Также имеется возможность отображать новые и старые адреса различными шрифтами. Если включить режим Расширенные подсказки , то в подсказках к адресам журнала будут отображаться более подробные сведения.
Домашний каталогВ этой вкладке отображается ваш домашний каталог. Заметьте, что скрытые файлы (начинающиеся с точки) не отображаются. Чтобы открыть какой-либо файл в главном окне Konqueror щёлкните по нему левой кнопкой мыши. Если вы щёлкнете правой кнопкой мыши по каталогу, то с помощью появившегося меню вы сможете открыть каталог в новом окне или в новой вкладке основного окна.
СетьВ этой вкладке отображается список сетевых подключений (однако в нём также можно отображать и каталоги). Чтобы открыть объект в главном окне, щёлкните по нему левой кнопкой мыши. Щёлкнув по нему правой кнопкой мыши, вы вызовете меню, в котором вам будут предложены дополнительные возможности.
Папки, отображаемые во вкладке Сеть , хранятся в каталоге ~/.kde/share/apps/konqsidebartng/virtual_folders/remote/ . Создав в нём новый каталог, вы добавите во вкладку новую папку. Файлы, описывающие сетевые подключения, имеют расширение.desktop ; чтобы создать новый файл, воспользуйтесь пунктом меню Создать ->Ссылку на адрес Интернета... .
Корневой каталогКорневой каталог - это начальная точка файловой системы; в нём хранятся все остальные файлы и каталоги. Путь к корневому каталогу обозначается косой чертой: / . Развернув его, вы увидите, в частности, каталог root , где хранятся файлы системного администратора, и home , в котором вы сможете найти свой домашний каталог.
ИнструментыЭта вкладка предоставляет доступ к следующим инструментам:
Обозреватель аудиокомпакт-диска .
Устройства . Здесь отображается список имеющихся у вас жёстких дисков (и их разделов), дисководов и устройств чтения компакт-дисков. Чтобы подключить устройство и отобразить его содержимое в главном окне, щёлкните по нему левой кнопкой мыши. Чтобы отключить устройство, щёлкните по нему правой кнопкой мыши и в появившемся меню выберите пункт Отключить .
Обозреватель сети позволяет просматривать диски других компьютеров в локальной сети.
Обозреватель системы печати предоставляет доступ к менеджеру печати KDE , Kprinter .
Настроить внешний вид панели навигации можно следующим образом: щёлкните правой кнопкой мыши по свободному пространству под самой нижней вкладкой или щёлкните по значку Кнопка настройки (на рисунке выше - самая верхняя кнопка; в зависимости от конфигурации эта кнопка может отсутствовать). При этом появится меню, предлагающее вам следующие возможности:
Добавить
Этот пункт позволяет добавить в панель навигации ещё одну вкладку. Это может быть Панель проигрывателя (один из дополнительных модулей Konqueror ) или какой-либо каталог.
Несколько видовЭтот пункт позволяет разделить панель навигации таким образом, что вы сможете видеть две вкладки одновременно.
Показывать вкладки слеваЭтот пункт позволяет указать, с какой стороны панели отображаютсязначки вкладок.
Показывать кнопку настройкиС помощью этого пункта вы можете указать, следует ли отображать Кнопку настройки .
Щёлкнув по значку какой-либо вкладки правой кнопкой мыши, вы вызовете меню, предлагающее следующие возможности.
Список
Как и большинство современных панелей навигации, наша будет основываться на теге неупорядоченного списка (
- ). Это название имеет семантический смысл, навигационная панель на самом деле представляет собой лишь список ссылок, ведущих на ваш сайт. Традиционная горизонтальная ориентация - это просто удобное средство для того, чтобы получить все самые важные элементы списка, видимые без прокрутки.
Вот наш пример HTML:
Вот и все, что для этого нужно! Заметьте, что я использовал один идентификатор, чтобы мы могли отличить нашу навигационную панель от всех других неупорядоченных списков на странице. Но если бы он был помещен в div с его собственным идентификатором (например, div “banner” или “header”), возможно, идентификатор не будет нужен. И да, я мог бы добавить еще больше идентификаторов и классов, если бы хотел усложнить пример, но сегодняшний урок посвящен простоте.
Как сделать его горизонтальным
По умолчанию наш список вертикальный. Итак, давайте сделаем его горизонтальным:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none; }
#nav li {
float: left; }
Здесь мы перемещаем наш список и элементы списка налево. Перемещение элементов списка налево растягивает их в горизонтальный ряд, элементы помещаются слева направо. Однако, из-за характера перемещения, наш список, если он также не перемещен влево, свернется до нулевой высоты.
И это не будет серьезной проблемой, за исключением того, что я планирую задать цвет фона моему списку позже, поскольку хочу выделить на фоне элементы списка, и если мой список свернется, этого не произойдет. Вот ещё одна причина, почему я задаю ширину списка 100%: таким образом, он будет заполнять всю ширину страницы (или её контейнер, если он находится в контейнере с заданной шириной).
Я также удаляю большинство полей и отступов, чтобы список хорошо отображался (я оставляю небольшие поля внизу, просто для эстетических целей), и устанавливаю стиль списка на “никакой”, что удаляет маркеры абзацев из моего списка.
На данный момент наша панель навигации выглядит так:
Конечно, у него нет никакого стиля (и, наверное, его тяжело использовать и загружать), но, хотите верьте, хотите нет, самое сложное уже позади! Отталкиваясь от этой основной структуры, можно создать любое количество уникальных панелей навигации. Но, давайте немного усовершенствуем нашу панель.
Во-первых, мы зададим фон и границы для нашей панели навигации, изменив наш #nav в CSS таким образом:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-top: 1px solid #ccc; }
Теперь давайте определим тегом “якорь” немного свободного места и зададим стиль:
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
Здесь я задаю “якорям” тип отображения “block”, чтобы убедиться, что они заполняют весь элемент списка и делают всю площадь активной. Затем я добавляю заполнение, чтобы немного растянуть их. Я также удаляю подчеркивание, делаю шрифт жирным, задаю красивый голубой цвет и добавляю границу с правой стороны от этого элемента, равную той, что мы добавили в верхней и нижней части нашего неупорядоченного списка.
И, наконец, давайте зададим элементам навигации цвета, которые будут отличаться при наведении на них курсора:
#nav li a:hover {
color: #c00;
background-color: #fff; }
Итак, мы получаем полностью функциональную, практичную и полезную панель навигации.
А тут в одном месте собраны все CSS:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
Это полезная основа для дальнейшей работы. 90% панелей навигации начинаются почти в точности как эта. Нужный вид панели - это всего лишь вопрос оформления.
Спасибо за внимание. Впереди еще очень много уроков на разные темы! Оставайтесь с нами! :)
P.S. По сравнению с другими меню, данное меню выглядит очень просто, но не надо об этом кричать в комментариях:). Это основа, используя которую, можно сделать нечто большее.
Последнее обновление: 27.04.2016
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации - это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.
Горизонтальное меню
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .
Использование float
Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.
Второй этап заключается в установке у элемента ссылки display: block , что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.
inline и inline-block
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block: