Домашки - хранители полиэтиленовых пакетов на кухне
[282x66]
[288x132]
[216x78]

Урок от NATALI:
[показать]
[показать]
Урок-ответ на вопрос Татьяны Кирилловой.
Я довольно редко пользуюсь способами изменения "веса" изображения, поскольку это неизбежно отрицательно влияет на его качество. Но иногда....в конце месяца, когда заканчиваются мои лимитированные 4 гигабайта бесплатного интернета, а так хочется что-то там загрузить.... каюсь, делаю это!
Итак, наша задача - сделать изображение "легче", но так, чтобы непрофессиональному взгляду не было заметно, что качество не совсем "качественное" :).
Я думаю, существует много способов "облегчения", но я делаю это пока так, как опишу. Но нет предела совершенству! Существует довольно много способов и инструментов для оптимизации изображений. Я же делаю это с помощью Фотошопа.Иногда во время процесса работы с изображением, иногда загружаю изображение и оптимизирую его.
Кстати, этот урок - из тех, о которых говорят: "Долго сказка сказывается, да не долго дело делается!". Это только на первый взгляд кажется, что долго и нудно. А когда "набьёшь руку", то весь процесс длится считанные минуты.
Строим таблицу
|
Код простой сетки <TABLE border=4> <TR> <TD>первая клетка в первой строке</td> <TD>вторая клетка в первой строке</td> </tr> <TR> <TD> первая клетка во второй строке</td> <TD>вторая клетка во второй строке</td> </tr> </table> |
||||
| Сетка с фоном <TABLE background="URL адрес ФОНА" border=8> Вместо URL адрес ФОНА поставляем адрес фонового рисунка.
|
Код сетки с фоном <TABLE background="URL Адрес фона"border=4> <TR> <TD>первая клетка в первой строке</td> <TD>вторая клетка в первой строке</td> </tr> <TR> <TD> первая клетка во второй строке</td> <TD>вторая клетка во второй строке</td> </tr> </table> |
||||
| Рамки с разрывом рисунка: |
Рамки с разрывом рисунка: <fieldset><legend><img src="адрес картинки"></legend>рамка растягивается на всю ширину записи</fieldset> |
||||
| Рамка с разрывом текста: |
Картинка обтекаемая текстом [показать] Не забывайте, что картинка должна быть не очень большой, иначе текст просто выдавит ее вверх. цифровые значения vspace="10" и hspace="10"- это всего навсего расстояние от картинки к тексту вправо и вниз, можно их менять, по вашему вкусу. |
Код обтекания картинки текстом <img src="httр:адрес картинки" align="left" vspace="10" hspace="30" alt=>"здесь нет картинки, хотя должно быть изображение. Какое оно будет, решать вам" |
|
Картинка слева от текста [показать]Снова пишем свой текст. Если картинка длинная, бордюрного типа, то и весь текст будет вдоль нее. Если не очень большая, то продолжится ниже. Снова предупреждение в постах, картинка не должна превышать размер 200 в ширину иначе просто снова уйдет вверх. |
Код картинки слева <img src="URL адрес картинки" align="left" border="0"> И снова пишем свой текст, или стихотворение, или.... придумали? молодцы! |
|
Картинка справа от текста: [показать] Все правила написания для правой стороны такие же , как и для левой. |
Код для картинки с права: <img src="URL адрес картинки" align="right" border="0">Пишем свой текст, что напишем, то и увидим |
|
| Картинка в центре текста: Обратите внимание, что текст пишется перед кодом и после кода. Это для того, чтобы обтекание было полноценным, [показать] и как бы обкутывало вашу картинку. Поэтому, часть текста вверху, часть внизу и создают такой эффект. |
Код для картинки в центре текста: Первая часть текста <img src="URL адрес картинки" align="middle" border="0"> Вторая часть текста. |
|
Текст между двух картинок
|