Возможны два варианты снятия скриншотов с использованием клавиши Print Screen:
• если необходимо «сфотографировать» весь экран, нажимаем клавишу Print Screen;
• если необходимо сделать скриншот только активного окна, то используем сочетание клавиш Alt + Print Screen.
В некоторых случаях необходимо «сфотографировать» только небольшую область экрана, да еще и запечатлеть положение указателя мыши. Для этого лучше воспользоваться небольшими специализированными программами для снятия скриншотов. Весьма удобно работать с бесплатной версией программы ScreenHunter. Программа «висит» в области уведомлений и всегда готова к использованию. Несмотря на то что у ScreenHunter английский интерфейс, настройки интуитивно понятны (рис. 3.2).
Рис. 3.2. Окно программы ScreenHunter
Перечислим основные особенности программы ScreenHunter.
• Запускается по умолчанию нажатием клавиши F6.
• Есть возможность захвата любой прямоугольной области экрана (Rectangular area), активного окна (Active windows), всего экрана (Full screen).
• Есть возможность захвата указателя мыши (Mouse pointer).
• Скриншот может сохраняться в указанную папку в форматах GIF, JPEG и BMP.
Подготовка изображений для публикации в Интернете
Чаще всего изображения, загруженные из Интернета, можно использовать на своих сайтах без обработки, чего нельзя сказать о фотографиях, полученных с цифрового фотоаппарата. К примеру, размер файла с фотографией, сделанной обычной «мыльницей», может достигать нескольких мегабайт. Если использовать на сайте необработанные фотографии, то страницы будут загружаться очень медленно. Это может привести к тому, что нетерпеливый пользователь покинет страницу, не дождавшись ее загрузки.
Подобными ошибками очень часто грешат начинающие веб-мастера, создающие сайты с помощью визуальных веб-редакторов типа FrontPage. Они вставляют на страницы необработанные фотографии, размер которых как по ширине, так и по высоте составляет несколько тысяч пикселов, а для того чтобы они полностью помещались на странице, уменьшают их масштаб отображения с помощью мыши. Хотя после подобного масштабирования картинка может выглядеть очень маленькой, размер файла остается прежним. Для примера взгляните на фрагмент веб-страницы, на которой присутствует изображение размером 155 х 117 пикселов, однако его реальные размеры 2816 х 2112 пикселов, а файл весит почти 3 Мбайт (рис. 3.3).
Рис. 3.3. Картинка выглядит очень маленькой, но размер файла почти 3 Мбайт
Никогда не допускайте подобных вольностей и обрабатывайте фотографии перед размещением на веб-страницах.
Если вы пользуетесь растровым графическим редактором Photoshop, то в меню File (Файл) выберите команду Save for Web & Devices (Сохранить для Сети и устройств). После этого будут доступны настройки, позволяющие быстро подготовить изображение для публикации в Интернете (рис. 3.4).
Рис. 3.4. Photoshop позволяет быстро подготовить изображение для публикации в Сети
Во многих случаях можно ограничиться изменением размера и качества изображения. К примеру, для блогов мы часто сохраняем изображение с размером 600 пикселов по большей стороне, а для параметра Quality (Качество) устанавливаем 51 %.
Если вы не дружите с Photoshop или привыкли пользоваться только легальным программным обеспечением, воспользуйтесь бесплатной программой FastStone Image Viewer. Это многофункциональный растровый редактор для операционных систем семейства Windows (сайт программы: www. faststone.org). Несмотря на то что FastStone Image Viewer бесплатен, он обладает неплохим набором функций. Перечислим его основные возможности:
• конвертирование изображений в различные растровые форматы;
• добавление надписей и водяных знаков на изображения;
• пакетная обработка изображений;
• удаление эффекта «красных глаз»;
• создание скриншотов.
Пакетная обработка изображений позволяет работать с изображениями не по одному, а сразу с группой. К примеру, можно взять 100 фотографий с цифрового фотоаппарата и за считанные секунды уменьшить их размер и качество до необходимых значений.
Отдельно стоит сказать и о водяных знаках. Поскольку в Интернете процветает повальное заимствование чужих фотографий, иногда нелишне на своих фотографиях размещать водяной знак или надпись. Логично указывать на изображениях адрес вашего сайта – наверняка найдутся желающие на него заглянуть (рис. 3.5).
Рис. 3.5. В правом нижнем углу отображается надпись, созданная в программе FastStone Image Viewer
При установке FastStone Image Viewer можно выбрать русский язык, благодаря чему не составит большого труда разобраться в принципах работы с программой.
Теперь вы знаете о картинках достаточно для того, чтобы с умом использовать их при создании сайтов.
Сейчас мы проведем несколько небольших экспериментов, которые дадут возможность вникнуть в основы HTML. Мы постараемся рассказывать все таким образом, чтобы в вашей памяти закрепились базовые принципы создания веб-страниц. К примеру, вы должны запомнить, как правильно именовать файлы веб-страниц и по каким причинам на сайтах иногда не отображаются картинки.
Создание простейшей веб-страницы
Начнем практику с создания простой веб-страницы с повторяющимся несколько раз текстом «Добро пожаловать!»
Хотя на данный момент существует большое количество различных HTML-редакторов, многие из которых автоматизируют процесс написания HTML-кода, мы воспользуемся стандартным приложением Блокнот. Поскольку в Блокноте приходится все делать вручную, он позволяет быстрее вникнуть в процесс создания веб-страниц.
Примечание
На практике, если вам придется править HTML-код, воспользуйтесь приложением типа Notepad++ – это продвинутый блокнот с поддержкой синтаксиса многих языков программирования. Он не добавляет в код BOM – невидимые символы, из-за которых может нарушиться нормальная работа сайта.
Итак, запускаем приложение Блокнот, которое находится в папке со стандартными приложениями Windows (подобное приложение есть и в Linux), и набираем следующий текст (рис. 3.6).
Рис. 3.6. HTML-код тестовой страницы
Документ открывается тегом <html> (он дает понять браузеру, что здесь начинается веб-страница), а заканчивается тегом </html> (конец страницы).
Примечание
Тег <html> – корневой элемент в документе HTML 5.0. Его наличие обязательно.
Наклонная черта в закрывающем теге называется «слеш». В данном случае, поскольку слеш наклонен в правую сторону, он называется прямым слешем.
Открывающий и закрывающий теги образуют так называемый контейнер. Как вы понимаете, для образования контейнера необходимо, чтобы теги были парными, то есть был тег открывающий и тег закрывающий. В нашем случае все теги парные, но так бывает не всегда, и скоро мы применим одиночные теги.
В контейнер <head></head> (с английского head переводится как «голова») помещается название документа и различная справочная информация, например ключевые слова. Сюда же добавлен контейнер <title></title>, в котором содержится название веб-страницы. Текст, помещенный в этот контейнер, отображается в заголовке окна браузера. Некоторые начинающие веб-мастера по незнанию не заполняют контейнер <title></title> или оставляют то, что прописывается по умолчанию веб-редакторами. Если взглянуть на скриншот предлагаемой ниже страницы, то можно увидеть, что она называется «Экспериментальные физические задачи. Механика», а на ее вкладке написано Новая страница 2, то есть содержимое контейнера <title></title> даже не дает намека о содержании веб-страницы (рис. 3.7).
Рис. 3.7. По надписи в заголовке окна браузера Новая страница 2 непонятно, чему посвящена веб-страница
Что произошло? Дело в том, что при работе над сайтом использовался популярный веб-редактор Microsoft FrontPage 2003, в чем можно убедиться, заглянув в HTML-код страницы. По умолчанию этот веб-редактор задает содержимое контейнера <title></title> как Новая страница 1, Новая страница 2 и т. д. Разработчику необходимо самому позаботиться о «правильном» наполнении контейнера.
Применительно к FrontPage 2003 нужно было открыть искомую страницу, в контекстном меню выбрать пункт Свойства страницы и изменить значение поля Название с Новая страница 2 на, к примеру, Экспериментальные физические задачи. Механика.
Далее идет контейнер <body></body> (с английского body переводится как «тело») – в него помещается основное содержимое страницы: текст, картинки, таблицы и т. д.
В нашем случае в контейнере <body></body> находятся шесть контейнеров, первым из которых является <h1></h1>, а последним – <h6></h6>. Это заголовки различных уровней, самый крупный из которых – hi. Как правило, при создании веб-страниц применяются только три первых заголовка, то есть hi, h2 и h3.
Внимание!
