Если Вам есть,  что сказать редактору, экспертам и читателям рассылки, пишите. Если у Вас есть возможность и желание быть экпертом рассылки в области HTML, визуальных редакторов и др. по вашему желанию и вести соответствующий раздел рассылки, то обращайтесь к Александру.

Урок № 2

(Прокашлялась) Так что же все-таки собой представляет HTML, буквенная аббревиатура которого пугает непосвященных непонятными символами, знаками, тегами и дескрипторами?

Спешу вас сразу обрадовать, HTML - это не язык программирования. Вам не нужно будет изучать массивы, переменные и встроенные функции. HTML - это просто язык разметки. И написан он простым английским языком. И переводится очень просто: Hypertext Markup Language. Что в переводе как раз это и означает. И все остальные тэги также легко переводятся. Так что вам достаточно будет тех куцых знаний английского, которые дала родная средняя школа. Так вспомним же наш текст:

Разжевываем с помощью переводчика:

HTML - нам уже понятен;
HEAD - заголовок документа
TITLE - название документа
BODY - тело документа

Ну а что же такое "IMG src"- хитро спросите вы, это что за абракадабра? И почему, например, не rcs или не scr?

А тоже очень легко. Если вы поймете, что это - сокращенная запись от Image source (источник изображения), вам сразу все станет понятно. Теперь, даже если вас разбудят среди ночи и попросят вставить изображение в ваш html-документ, вы нипочем не сделаете ошибку и напишете правильно:

<IMG src = "….">

Понятно? Ну и славненько. Ну а теперь, не бойтесь, на этот раз ни слова философии!

Откроем мою, не побоюсь этого слова, любимую программу Adobe Photoshop. Надеюсь, она у вас есть. А если нет, немедленно установите! Я бы, конечно, рассказала, как правильно установить эту программу, но на это уйдет уйма времени! Да и если честно… я не знаю, как ее устанавливать! Просто у меня для этого есть муж и двое, почти взрослых, сыновей. Так что если у вас до сих пор нет ни того, ни другого, срочно обзаведитесь! Потому как без Adobe Photoshop мы не сможем сдвинуться с мертвой точки.

Хотя, есть же у вас друзья, а у этих друзей - компьютер? Сейчас, в век всеобщей компьютеризации, трудно представить, что у кого-то нет компьютера. И ваши друзья с радостью помогут установить любую программу, которую вы только пожелаете. Вот только намекните, что может быть… в скором времени сделаете им веб-страничку.

Последнее отступление (клясться, правда, не буду), я советую вам установить последнюю, седьмую версию этой программы.

Итак, вот оно! Я же говорила! Ну, разве не красота (рис.3)?

Рис. 3. Окно AdobePhotoshop

Мы будем работать с этой программой много. И я постараюсь рассказать обо всем, что знаю сама.

Для начала, чтобы убрать с экрана лишние панели, которые пока нам не понадобятся, нажмем клавишу "tab".

Если вы захотите вернуть все-таки все панели на место, нажмите еще раз ту же клавишу, и панели возвратятся на свои прежние места. Теперь посмотрим на верхнюю часть экрана и увидим сразу под заголовком Adobe Photoshop строку меню, которая состоит из следующих команд: File, Edit, Image, Layer, Select, Filter, View, Window и Help

Нажмем File|Open, найдем в нужной папке наше изображение, которое мы поместили на свою первую страничку (у меня это файл "myfoto") и, не открывая его, посмотрим на величину, которая написана внизу (рис. 4):

Рис. 4. Открытие файла "myfoto.jpg"

У меня стоит там 149 килобайт. Это и есть "вес" нашего изображения, или объем файла. Так много это или мало? И вообще, что это такое, и почему я начала разговор именно с него?

Дело в том, что на загрузку одного килобайта затрачивается примерно одна секунда. Конечно, у одних пользователей - быстрая связь, и изображения загружаются почти мгновенно, а вот у других дело идет хуже. Вот и подсчитаем. На загрузку моего изображения в среднем затратится 149 секунд или почти три минуты! Согласитесь, это много. А если у меня там будет не одна фотография, а, скажем, с десяток? Тогда мой фотоальбом будет загружаться полчаса. А то и дольше.

Где вы найдете в наш стремительный век такого чудака, который согласился бы часами таращиться на экран, в надежде дождаться конца загрузки моих или ваших шедевров?

А сколько, интересно знать, весит ваша фотография? Подсчитайте, сколько времени уйдет на ее загрузку, и вы поймете, что самое важное сейчас - оптимизировать ее размер. И не в ущерб качеству. Этим мы сейчас и займемся.

Поэтому откроем наше изображение в Adobe Photoshop и начнем с ним работать.

В строке меню выберем следующую команду: Image|Image Size, вот так (рис.5):

Рис. 5. Посмотрим размерчик!

И перед нами появится такая вот таблица (рис. 6):

Рис. 6. Размер изображения

Как видим, это диалоговое окно Image Size разбито на две части. Мы пока будем пользоваться верхней частью изображения. В верхних двух окошках Pixel Dimenssions находятся два окошка, обозначающих Width (Ширина) и Height (Высота) нашего изображения в пикселах.

Так что же такое пиксел? Пиксел является основной единицей измерения разрешения экрана. И сейчас мы его увидим! Выделите мышкой свое изображение и нажимайте несколько раз одновременно две клавиши "ctrl" и "+".

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

А теперь, вы легко поймете, что же такое "разрешение экрана". Я, конечно, могу всего этого и не рассказывать, просто объяснить, как уменьшить изображение, как его оптимизировать, как сделать быстро то, к чему вы стремитесь. Но я хочу, чтобы вы не только умели что-то делать, но и знали основы. Знаний много не бывает, поверьте мне. Их может быть мало, их может вообще не быть. Да и вы будете себя чувствовать увереннее, когда, например, захотите купить новый монитор, и будете задавать умные вопросы продавцу. И тогда уж он точно не подсунет вам монитор, разрешение экрана которого не будет соответствовать последним мировым стандартам.

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

Так вот, моя фотография занимает, судя по показателям 640 пикселов в ширину и 480 - в длину. И при разных разрешениях экрана мое изображение будет занимать разную часть пространства монитора.

Если установить разрешение экрана 800 х 600, то фотография займет практически все пространство по ширине, а по высоте нужно еще и прокрутить, чтобы рассмотреть его целиком.

При больших разрешениях фотография занимает меньшее место и смотрится гораздо привлекательнее.

Ну а теперь попробуем уменьшить (если вы, конечно, сочтете нужным) свою фотографию.

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

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

Но тут, не знаю, что на меня наехало, я просто не смогла пройти мимо этого пиджака. И, хотя в нем не было ничего необычного, я его купила. Может, меня устроила цена, сейчас уже и не помню.

Ну, так вот. Я прибежала домой, скинула с себя одежду на кровать, перерыла весь шкаф, достала подходящую кофточку, а вот закрыть дверцу шкафа уже не хватило терпения. Срочно включила утюг, отгладила юбку, настроила видеокамеру… и - вот она я! В новом пиджаке… Боже, как мне понравился мой новый имидж "бизнес-леди"!

И вот такую фотографию я и решила вывесить на всеобщее обозрение. Ну кому, скажите, интересно разглядывать мои разбросанные вещи, распахнутый шкаф и неубранный утюг? Да и обои старые, на шкафу завал. Нет, этот позор надо срочно убрать! Иначе какая я после этого "бизнес-леди"? Федора да и только!

Но я не буду долго переживать, потому что у меня есть Adobe Photoshop. Вот он мне и поможет.

Итак, откроем (если она скрыта) основную палитру (кто не знает, в верхнем меню: Window | Tools), и на этой вертикальной узкой панели нажмем левой кнопкой мыши на самый левый верхний инструмент в виде пунктирного прямоугольника. Потом подведем мышку к той части своего изображения, которую решим обрезать и, удерживая нажатой левую кнопку мыши, растянем прямоугольник вокруг желаемой области, после чего отпустим нашу мышку (рис.7).

Кстати, чтобы увидеть свое изображение в натуральную величину, можете нажать два раза на изображение лупы на основной палитре инструментов (в правом ряду - 11-ая сверху).

Рис. 7. Окно AdobePhotoshop

Вокруг моей фигуры появился пунктирный прямоугольник. Теперь выберем из верхнего меню Image | Crop, и наше изображение обрежется по контуру (рис. 8):

Рис. 8. Обрезка по контуру

Это гораздо лучше, не правда ли? В дальнейшем, я уберу задний фон вообще, заменив его на более подходящий… а пока пойдем дальше. Откроем опять Image|Image Size и посмотрим на получившиеся размеры: width-278, height-351. В принципе, меня это устраивает. Если же вы хотите уменьшить свою фотографию, введите свое значение в любое поле, например width, программа сама изменит пропрорционально значение height.

Уменьшили? Тогда приступаем к последнему шагу. К оптимизации нашего изображения.

На верхней панели выберите Fail|Save for Web, и перед вами откроется панель оптимизации изображений, предназначенной как раз для помещения графики в интернете. Вот она (рис. 9):

Рис. 9. Оптимизация изображения для web

На верху вы видите четыре закладки: Original/ Optimized/ 2-up/ 4-up. Я выбрала закладку 2-up, и у меня появилось два изображения, одно - левое - оригинал, а вот правое мы будем изменять настройками, подбирая наилучший вариант. вы же, если желаете, можете выбрать 4-up, и у вас будут четыре изображения, одно из которых - оригинал, а три других можно изменять настройками.

Изображение у меня в формате jpg, думаю и у вас тоже. Есть еще формат gif, но для фотографий более подходящим является все-таки jpg. Об этом мы еще будем говорить, а пока - нам главное уменьшить размер изображения.

Справа находится как раз то, что нам нужно. В поле "Settings" выберите вариант "jpg", сразу под ним станут доступны в нижнем окошке варианты: Low, Medium, High и Maximum. Перебирая эти варианты, следите за изменением значений под оптимизированным изображением, где показывается "вес" изображения, а также время его вероятной загрузки. Стремитесь к максимальному уменьшению файла, но при этом качество изображения все-таки должно оставаться приемлемым.

Я лично остановилась на "medium", размер файла оказался 12, 16 килобайт, и время загрузки 10 секунд. Что ж, неплохо. Соглашусь, фотография у меня не лучшего качества, и я взяла ее только ради примера. Но все равно, старайтесь, чтобы ваше изображение не было больше 30 килобайт. Хотя, конечно, есть такие шедевры, на которые и 50 килобайт не жалко. Но лучше все-таки не мучить посетителей своей странички ожиданием загрузки. Но, повторяю, выбор все-таки за вами. Ваша страничка, что хотите то и воротите. Я могу только советовать.

Теперь осталось только нажать на клавишу Save и сохранить нашу фотографию под новым именем, а лучше всего и в новой папке. Для этого открываем новую папку, называем ее "foto" и сохраняем нашу оптимизированную фотографию, скажем под именем foto01.jpg.

Вот и все. Теперь сравним насколько наша первая, необработанная фотография, отличается от оптимизированной:

Если первоначальная фотография имела размер: 640 пикселей в ширину, 480 - в высоту, занимала объем памяти в 149 килобайт, грузилась почти три минуты, содержала ненужный фон, то новая, оптимизированая, занимает всего 278 х 351 пикселей, весит 12 килобайт, грузится всего 10 секунд, и при этом практически не потеряла в качестве… Комментарии, я думаю, излишни.

Открываем NotePad, открываем наш файл index.html и заменяем запись на:

Видите, адрес нашего изображения немного изменился? Ведь мы создали новую папку "foto", поэтому мы и указали новый путь: "foto/myfoto01.jpg"

Так скорее же откроем нашу "облегченную" страничку, и будем опять радоваться. Радоваться тому, что сделали еще одно важное, полезное дело.

Доставайте скорее свою еще пока не истрепанную записную книжку, не забудьте вставить сегодняшнее число, и запишите: Я научилась делать легкие изображения!

И это важный шаг, поверьте мне!

Вредные советы от Яндекса

 Рекомендую:

Попрошу всех, кто занимается раскруткой своих сайтов или заработком денег в системах активной раскрутки Раскрутим точку Ру", Neosap и Uniq-IP сообщить мне о накопленном опыте. При желании Ваши статьи будут опубликованы в рассылке и Вы получите признание и уважение более чем 4890 читателей.

Если Вы знаете человека, которому могла бы быть интересна данная рассылка, то перешлите ему этот номер, или подпишите его сами.

Все предыдущие выпуски рассылки находятся в Архиве