Свой сайт - это просто! Пособие для чайников. Выпуск 19 (inet.webbuild.prostosait) : Рассылка : Subscribe.Ru

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 13.126 RSS

← Декабрь 2003 →
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

За последние 60 дней ни разу не выходила

Сайт рассылки: http://www.00am.ru
Открыта: 14-09-2003
Адрес автора: inet.webbuild.prostosait-owner@subscribe.ru

Автор

SuZZuS

Статистика

13.126 подписчиков
-1 за неделю

← Все выпуски →

Свой сайт - это просто! Пособие для чайников. Выпуск 19

Информационный Канал Subscribe.Ru

Свой сайт - это просто! Пособие для чайников.

Свой сайт - это просто!
Пособие для чайников.

Сайт рассылки - websuper.by.ru
Архив рассылки -websuper.by.ru/svoisait.htm

Главная Статьи Картинки Юмор
Полезное Услуги Ссылки

Выпуск 19
"Уменьшаем размер изображения."

Здравствуйте, уважаемые читатели!

Всем вновь подписавшимся предлагаю скачать или прочитать все предыдущие выпуски в архиве рассылки.

А в этом выпуске мы будем учиться уменьшать изображение.

Предположим, вы решили поместить на сайт фотографию или какое-то другое изображение. Если так, то вы столкнетесь с одной важной проблемой - размер изображения. Если картинка будет слишком большая и будет много весить, то вам необходимо будет ее уменьшить. Тогда встает вопрос: "Как?!".

Очень просто. Если у вас, конечно, есть программа Adobe Photoshop. (архив рассылки) Хотя, даже если и нет, уменьшить изображение можно и в других редакторах, но я буду рассказывать, как это сделать в Photoshop.

На сайт "Тосты, поздравления и соболезнования на все случаи жизни" (на примере которого я объясняла вам построение сайта в предыдущих выпусках) не предполагалось делать больших и "тяжелых" изображений, поэтому я буду рассказывать вам про уменьшение размера изображения на примере скриншотов, взятых с сайта Дикая правда.

Итак, открываем Adobe Photoshop. Нажмем File (Файл) - Open (Открыть) и найдем в нужной папке изображение. Теперь, не открывая его, посмотрим на величину (она написана внизу)

http://websuper.by.ru/tost/017.gif

Под фотографией прописан "вес" изображения - 149 килобайт. Вообще-то, это много. Как я уже говорила, главная страница в идеале - 30-40 килобайт (кб).

Теперь откроем Image (Рисунок) - Image Size (Размер рисунка). Перед нами появится вот такая табличка:

http://websuper.by.ru/tost/018.gif

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

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

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

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

Если вы видите в вашем изображении что-то лишнее, это лишнее можно просто обрезать.

Для этого нам потребуется основная палитра. Если она скрыта, ее можно открыть, нажав Window (Окно) - Tools (Инструментальные средства) в верхнем меню. Теперь нам потребуется самый верхний инструмент слева. Выделите им ту часть, которую вы хотите оставить. За пределами этой пунктирной линии останется все ненужное. Нажав Image (Рисунок) - Crop (Обрезать), вы обрежете изображение по контуру.

http://websuper.by.ru/tost/019.jpg

Вот что получилось:

http://websuper.by.ru/tost/020.jpg

После того, как мы обрезали изображение, переходим к самой главной части - оптимизации изображения под Web.

В верхнем меню нажмите File (Файл) - Save for Web (Сохранить для Web) и перед вами откроется вот такая панель:

http://websuper.by.ru/tost/021.jpg

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

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

В данном случае, получается около 13 кб. 136 кб мы убрали, причем фотография хуже не стала. Только улучшилась.

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

Толковый словарь

PHP - язык описания сценариев, выполняемых на сервере, встроенный в HTML

(Прислал DJ.Glance)

Байт — 8 бит, единица измерения количества информации. Позволяет закодировать одну из 2⁸комбинаций (256), этого количества хватает для кодировки русского и латинского алфавитов, цифр и т.д. Байт является первым шагом на пути сближения языка компьютеров (битов) и языка людей (слов, цифр, знаков препинания). Килобайт состоит из 1024 байт (2¹⁰), мегабайт состоит из 1048576 байт (1Кбх1Кб, т.е. 1024х1024=2¹⁰х2¹⁰=2²⁰). Здесь людьми допущена определенная путаница. В десятичной системе счисления “кило” означает тысячу, а “мега” миллион — тысяча тысяч, или тысяча в квадрате. В компьютерах применяется двоичная система счисления, где основой выступает степень двойки (а не десятки, как в десятичной системе), и чтобы “притянуть” десятичное название “кило” к двоичной системе, приходится лукавить и принимать за двоичную тысячу самое приближенное к десятичной тысяче число. Так как, повторяем, в двоичной системе все вертится вокруг цифры 2, то самым приближенным к десятичной тысяче является число 2¹⁰, которое составляет 1024. (2⁹=512, а 2¹¹=2048). Соответственно мегабайт, то есть тысяча тысяч байтов составляет 2¹⁰х2¹⁰=2²⁰. Видимо правильнее было бы назвать компьютерную тысячу не “кило”, а как-то иначе, чтобы народ не путался в двух системах счисления сразу. Гигабайт (Гб) содержит тысячу миллионов байт, а терабайт (Тб) содержит тысячу гигабайт (тысячу тысяч миллионов байт — 2⁴⁰), далее идут петабайт и экзабайт.

(Из личного архива)

Присылать свои материалы в толковый словарь можно сюда.

Вопрос - ответ в толковый словарь

В этом разделе вы можете задать вопрос, касающийся толкового словаря остальным читателям рассылки и обязательно получить на него ответ! Прислать вопрос!

Вопрос от Рыжова Виктора:
Что такое скин и кряк?

Ответить!

Будут опубликованы 3 первых правильных ответа, написанных доступным языком.

Улыбнуться! :)

Этот раздел посвящен анекдотам и афоризмам на компьютерную тему. Вы также можете присылать свои материалы в раздел
по этому адресу.
Ссылка на вас и большое спасибо гарантированы!

- Микола, ты що свою домашню страныцю на домен "ru" засував?
  - А шо?
  - Так то ж "Раша"!
  - Во, гады! А я думав, Ридна Украина!

(Из раздела Юмор)

Жена говорит програмисту:
- Иди в магазин, купи 2 батона, если будут яйца - купи десяток.
Програмер приходит в магазин:
- Дайте 2 батона.
- А у вас яйца есть?
- Да.
- Тогда дайте десяток батонов :)
(Прислал (а) Dobrobatko Denis)

1-й. Выбрасывает мужик системный блок с окна 9-го этажа, и
кричит в догонку: "А теперь попробуй зависни, сволочь!"
2-й. Устанавливал Windows XP Pro. О, чудо! Windows нашел все,
даже дохлую мышь в гараже!!!
3-й. Попадает программист в ад. Через неделю звонит черт богу,
"Слушай, забери этого отсюда, сил моих больше нет!" - "А в чем
дело?" -"Да он всех моих чертей вилами переколол, второй уровень
ищет!"

(Прислал (а) Andrew)

Больше анекдотов на компьютерную тему вы найдете на сайте рассылки в разделе Юмор.

Сайт рассылки

Приглашаю вас посетить сайт рассылки, целиком посвященный сайтостроению для чайников, где вы найдете очень много картинок, скриптов и советов по созданию своего сайта :))

В разделе Картинки появилось 100 новых оригинальных линий, 20 значков e-mail и стрелки.

В разделе Полезное появилось очень много новых программ.
Вы можете скачать программы как для помощи в создании своего сайта, так и для своего компьютера, причем абсолютно бесплатно!

Рекомендуемые рассылки

Ищешь счастье, здоровье, удачу, а может любовь?

Подпишись на рассылки Школы Своего Здоровья на Subscribe.ru!

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

Письма

А если у вас уже есть какой-нибудь собственный опыт на тему Web-дизайна и сайтостроения, присылайте мне ваши письма.
Самые интересные письма и материалы будут опубликованы!
Вопросы направлять сюда.

А на сегодня все.
Жду вас на сайте рассылки. Удачи!
Автор и ведущая рассылки Ольга.

http://subscribe.ru/
E-mail: ask@subscribe.ru

Отписаться
Убрать рекламу

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}

"Свой сайт - это просто! Создание, продвижение, SEO"

Статистика

Свой сайт - это просто! Пособие для чайников. Выпуск 19