Совет 1: Как сделать обводку текста
Существуют различные методы привлечь внимание читателя к определенной части текста . Один из этих методов – сделать обводку . С поддержкой программы Photoshop эту задачу дозволено исполнить несколькими методами.
Вам понадобится
- – Программа Photoshop.
Инструкция
1. При помощи команды “New” («Новейший») из меню “File” («Файл») сделайте новейший документ в программе Photoshop. Можете сделать то же действие, применяя сочетание клавиш “Ctrl”+”N”. В палитре «Инструменты» выберите инструмент “Horizontal Type Tool” («Горизонтальный текст»). Разместите указатель курсора на сделанный документ, щелкните левой кнопкой мыши в необходимом месте и напишите текст. Переведите написанный текст в растр. Для этого щелкните правой кнопкой мыши по текстовому слою в палитре “Layers” («Слои») и выберите опцию “Rasterize Type” («Растрировать текст»).Исполните обводку текста . Для этого воспользуйтесь командой “Stroke” («Обводка») из меню “Edit” («Редактирование»). В открывшемся окне настроек выберите ширину обводки в пикселях, цвет обводки и ее расположение: внутри обводимого силуэта, по центру либо снаружи силуэта. Нажмите кнопку “ОК”. Сбережете сделанный документ при помощи команды “Save” («Сберечь») в меню “File” («Файл»).
2. Иной метод создания обводки дает вероятность не переводить текст в растр. Напротив говоря, вы сумеете редактировать текст с обводкой, сделанной как жанр слоя. Для этого сделайте слой с текстом, воспользовавшись инструментом «Горизонтальный текст».Кликните правой кнопкой мыши по текстовому слою и выберите опцию “Blending Options” («Опции наложения»). Поставьте галочку в чекбоксе “Stroke” («Обводка»). Кликните по этой вкладке левой кнопкой мыши. В открывшейся вкладке настроек выберите ширину обводки в пикселях. Данный параметр дозволено настроить, вводя чистовые значения в поле “Size” («Размер»), либо передвигая ползунок. Из раскрывающихся списков выберите позицию обводки и режим наложения. В раскрывающемся списке “Fill Type” («Тип заливки») выберите, чем будет заполняться обводка: цветом, градиентом либо текстурой. В открывшейся палитре настройте цвет, градиент либо текстуру для обводки. Итог метаморфозы параметров будет отображаться в документе, тот, что вы сотворили. Нажмите кнопку “ОК”.Сбережете текст с обводкой при помощи команды “Save” («Сберечь») в меню “File” («Файл»).
Совет 2: Как сделать раскрывающийся текст
Размещение спрятанных блоков текста улучшает визуальное воспринятие страницы веб-сайта – она загружается в браузер именно в том виде, тот, что разработал дизайнер, самостоятельно от помещенного объема информации. Помимо того, это комфортнее посетителю – в поисках надобного блока информации ему не доводится просматривать каждый массив, а только лишь небольшие «верхушки айсбергов».
Вам понадобится
- Базовые познания языков HTML и JavaScript.
Инструкция
1. Используйте пользовательскую функцию на языке JavaScript, дабы организовать в HTML-странице сокрытие и отображение необходимых блоков текста . Всеобщая для всех блоков функция гораздо комфортнее, чем добавление кода к всем из них по отдельности. В заголовочную часть начального кода страницы разместите открывающий и закрывающий теги script, а между ними сделайте пустую пока функцию с наименованием, скажем, swap и одним непременным входным параметром id:<script>function swap(id) {}</script>
2. Добавьте две строки JavaScript-кода в тело функции – между фигурными скобками. Первая строка должна считывать нынешнее состояние блока текста – включена его видимость либо отключена. Таких блоков в документе может быть несколько, следственно всякий должен иметь личный идентификатор – именно его функция получает в качестве исключительного входного параметра id. По этому идентификатору она и ищет в документе надобный блок, присваивая значение видимости/невидимости (состояние свойства display) переменной sDisplay:sDisplay = document.getElementById(id).style.display;
3. Вторая строка должна менять качество display необходимого блока текста на противоположное – скрывать, если текст видим, и отображать, если спрятан. Это дозволено делать таким кодом:document.getElementById(id).style.display = sDisplay == ‘none’ ? ” : ‘none’;
4. Разместите в заголовочную часть еще и такое изложение жанров:<style type=”text/css”>a {cursor: pointer}</style>Оно потребуется для верного отображения указателя мыши при наведении курсора на неполный тег ссылки. С поддержкой таких ссылок вы организуете в странице переключение видимости/невидимости текстовых блоков.
5. Поместите в тексте эти ссылки-переключатели перед всем спрятанным блоком, а в блоки – в конце текста – добавьте аналогичную ссылку. Заметный текст заключите в теги span, у которых в признаках style задана невидимость. Скажем:Раскройте текст <a onclick=”swap(‘hiddenTxt’)”>+++</a> <span id=”hiddenTxt” style=”display: none”>Это спрятанный текст <a onclick=”swap(‘hiddenTxt’)”>—</a></span>В этом примере щелчок по ссылке из 3 плюсов будет вызывать описанную выше функцию по событию onClick, передавая ей идентификатор блока, тот, что необходимо сделать видимым. А вовнутрь блока размещена ссылка из 3 минусов с такими же функциями – щелчок по ней будет скрывать текст.
6. Сделайте необходимое число текстовых блоков, схожих описанному в предыдущем шаге, не забывая при этом менять идентификаторы в признаке id тега span и в переменной, передаваемой функции по событию onClick в 2-х ссылках.
